方法
以下のテキストの【～】の部分を好きなように置き換え、SafariのURLバーに入力し、開いたページをホーム画面に追加することで、ホーム画面にオリジナルのアイコンを設置することができます。
data:text/html;charset=UTF-8,<title>【タイトル】</title><meta name="apple-mobile-web-app-capable" content="yes"><link rel="apple-touch-icon" href="【画像URL】"><script>navigator.standalone?location="【URLスキーム】":alert("ホーム画面に追加してください")</script>
ポイントは以下のようになります。
- data URI … サーバーなどにHTMLファイルを用意することなくHTMLを使える
- apple-mobile-web-app-capable … フルスクリーンモードで、Safariを開かずにHTMLを表示できる
- apple-touch-icon … 好きな画像をアイコンとして使える
- navigator.standalone … フルスクリーンモードで開かれたかどうかを判定し、処理を分岐する
- URLスキームを使ってアプリを起動
それぞれ具体的にどのような機能があるのかを知りたい場合は、ググると参考になるサイトがたくさん出てくると思います。
さらに、画像URL部分にもdata URIを使えば、完全にオフラインで作動します。変換には、こちらが便利です。
使用例
例えば、「SySight」というiOSのメモリ管理アプリがあります。このアプリにはURLスキームを使ったメモリ解放機能があるのですが、これを使ってホーム画面からメモリ解放するには、以下のようなdata URIにします。
data:text/html;charset=UTF-8,<title>メモリ解放</title><meta name="apple-mobile-web-app-capable" content="yes"><link rel="apple-touch-icon" href="data:image/png;base64,iVBORw0KGg...（省略）...lFTkSuQmCC"><script>navigator.standalone?location="sysight://allkill":alert("ホーム画面に追加してください")</script>