30
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iOSのホーム画面にオリジナルのアイコンを置く方法

Last updated at Posted at 2015-03-19

##方法
以下のテキストの【~】の部分を好きなように置き換え、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>
30
30
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?