monacaでWebサイトをアプリ化

公開日: : JavaScript/jQuery

スポンサーリンク

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。

Webサイトのアプリ化…というより単純にページを表示しただけでは面白みがない(というか審査通るのか疑問)のでオリジナルのブラウザチックなものを考え取り組んでいました。例えば上部メニューバーがあったり、戻る・進むボタンが付いていたりといった感じです。

ajaxを利用する方法?

外部ページの表示の方法として、はじめajaxを使ってHTMLファイルを取得し、DOM操作により指定要素にページをhtmlメソッドやappendメソッドにより追加する…ということを考えました。しかし、実際やってみると読み込み先のjavascriptがうまく動作しないという問題に直面し、色々やったのですが無理と判断しました。

さらに、上記の場合ページ移動を把握しないと外部ページを指定要素に取り込めず、ページが切り替わってしまうため、リンククリックイベントでページを開くのをやめてリンク先のページをajaxで取得して指定要素内に表示するといった工夫が必要と思うのですが、location.hrefにURLが代入された時の遷移をイベントで把握することができずあきらめました。(もしあれば知りたいです)

CordovaのInappbrowserプラグインを使う

このプラグインを使えばきっちりページを表示することはできますが、ページの構成をカスタマイズしたり、使った限りページ内の情報を使って何かしたり、イベントを追加したりといったことはできませんでした。

iframeを用いる方法

一番簡単で色々とできそうな方法だと思います。iframeの中身はDOM操作できる上、周りでスクリプトを動かしたりメニューバーを付けてみたりといったカスタマイズはやりやすいです。

ただ、iframeの問題はサイトで他サイトからのiframeの表示をヘッダで禁止している場合は表示できないところにあります。yahooなどはそのようです。なので、iframeを使う際は何かしら工夫が必要そうです。

一番シンプルですがindex.htmlを書いておきます。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <script src="js/feed-reader.js"></script>
    <link rel="stylesheet" href="css/style.css">

    <style type="text/css">
    html,body
    {
        width:100%;
        height:100%;
        padding:0;
        margin:0;
    }
    iframe
    {
        width:100%;
        height:100%;
        padding:0;
        margin:0;
        border:0;
    }    
    </style>
    <script>
    $(function()
    {
        $('iframe').load(function()
        {
            $('iframe').contents().find('a').click(function()
            {
                var href = $(this).attr("href");
                alert(href);  
            });
        });
    });
    </script>
    </head>
    <body>
    <iframe src="http://www.livedoor.com/" seamless></iframe>
    </body>
</html>

ただただlivedoorのサイトが表示されるだけです。
loadで読み込みを待った後にaタグにリンク先を表示するイベントを追加しています。サイトによって位は表示されません。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

【javascript】正規表現文字抽出簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

jQueryにおけるcreateElement

jQueryでcreateElementに変わる関数は単純で、例えばvar dom = docume

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

OpenCV3.1をopencv_contrib付きでVisual Studio2013でビルドしてインストールする

はじめに OpenCV3.1でトラッキングがしたいと思いインストーラ

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑