JavaScript/jQuery

monacaでWebサイトをアプリ化

投稿日:

スポンサードリンク

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

スポンサードリンク

-JavaScript/jQuery

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.