iPhone,iPod touch用のフルスクリーンWebアプリをインストールさせるJavaScriptを書いてみた
2013年12月14日
僕はObj-CもJavaも全然書けない人間です。HTMLと、CSSと、JavaScriptだけです。
iOSには、Webサイトをフルスクリーンで表示するAPIがあり、ホーム画面に追加するとインストールするアプリを作ることが出来ます。
そこで、「フルスクリーンではない状態でサイトを開くと、ホーム画面に追加することを促す」というJavaScriptを書いてみました。
ダウンロード
これをダウンロードして、展開してください。
使い方
展開したファイルを、Webアプリを配置したディレクトリに放り込んでください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
< !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> |
これが、一番簡単なコードだと思います。
まず、headの中のmetaタグで、
- Viewportで、widthをデバイスの横幅に、拡大縮小を禁止
- ホーム画面にアプリとして登録
- アイコンを、icon.pngに設定
この3つを行っています。
その後、jQueryと僕の作ってみた「jquery.webappinstaller.js」を読み込んでいます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(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)でした!