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タグにリンク先を表示するイベントを追加しています。サイトによって位は表示されません。

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

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

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