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

関連記事

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

【javascript】正規表現文字置換簡易ツール

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

記事を読む

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

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

記事を読む

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

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

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

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

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

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

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

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

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

→もっと見る

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