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
  • このエントリーをはてなブックマークに追加

関連記事

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

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

記事を読む

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

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

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

記事を読む

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

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

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

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

記事を読む

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

【jquery】iframe内のスクロールイベント設定とスクロール量取得

ページ内に設置したiframeのスクロールイベントおよびスクロール量を取得したかったのでメモ

記事を読む

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

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