IOS Simulator Screen shot Dec 14 25 Heisei 22 45 30

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

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

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

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

ダウンロード

webappinstaller.zip

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

使い方

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

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

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

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

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

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

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

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

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

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

をしています。

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

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

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

さいごに

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

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