iPhone,iPod touch用のフルスクリーンWebアプリをインストールさせるJavaScriptを書いてみた

2013年12月14日

しゅんぼー(@shun_kashiwa)です。

僕はObj-CもJavaも全然書けない人間です。HTMLと、CSSと、JavaScriptだけです。

iOSには、Webサイトをフルスクリーンで表示するAPIがあり、ホーム画面に追加するとインストールするアプリを作ることが出来ます。

そこで、「フルスクリーンではない状態でサイトを開くと、ホーム画面に追加することを促す」というJavaScriptを書いてみました。

ダウンロード

webappinstaller.zip

これをダウンロードして、展開してください。

使い方

展開したファイルを、Webアプリを配置したディレクトリに放り込んでください。

< !DOCTYPE HTML>

<html>
<head>
    <meta name="viewport" content="width=device-width user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="apple-touch-icon" href="icon.png"/>

    <meta charset="UTF-8"/>
    <title>WebApp</title>
    <script src="jquery.js"></script>
    <script src="jquery.webappinstaller.js"></script>
    <script>
    </script>
</head>

<body>
<!--Webアプリのコード-->
</body>
</html>

< !DOCTYPE HTML>

<html>

<head>

<title>WebApp</title>

</script>

</head>

<body>

</body>

</html>

これが、一番簡単なコードだと思います。

まず、headの中のmetaタグで、

Viewportで、widthをデバイスの横幅に、拡大縮小を禁止
ホーム画面にアプリとして登録
アイコンを、icon.pngに設定

この3つを行っています。

その後、jQueryと僕の作ってみた「jquery.webappinstaller.js」を読み込んでいます。

$(function(){
var agent = navigator.userAgent;
if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1){
            if(window.navigator.standalone != true){
                $("body").load("file.html");
                $("head").append("<link />");
                css = $("head").children(":last");
                css.attr({
                    rel: "stylesheet",
                    type: "text/css",
                    href: "webappinstaller.css"
                });
}
}else{
    location.href="../"
}

});

$(function(){

var agent = navigator.userAgent;

if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1){

if(window.navigator.standalone != true){

$("body").load("file.html");

$("head").append("<link />");

css = $("head").children(":last");

css.attr({

rel: "stylesheet",

type: "text/css",

href: "webappinstaller.css"

});

}

}else{

location.href="../"

}

});

これが、JavaScriptのソースです。

まず、ユーザーエージェントの中に「iPhone」「iPod」の文字列が合った場合。

さらに、window.navigator.standaloneがtrueでない場合（フルスクリーンモードの場合はtrueを返します）に、

bodyにfile.htmlを読み込み
webappinstaller.cssを読み込み

をしています。

iPhoneでなければ、一段下の階層に飛ばしています。この処理はかきかえてください。

僕の場合は、アプリの説明ページの下にアプリのディレクトリを置くので、このようにしました。

後は、icon.pngを好きなアイコンに置き換えればできるはずです。

さいごに

これをそのまま使うのはありえないですが、このコードを参考にWebアプリを制作してもらえたらいいと思っています。

それでは、しゅんぼー(@shun_kashiwa)でした！

Please Share !

Twitter Facebook Google+ LINE Hatebu