「アイコンメモ」をプログラマ目線で読み解く!アイコンってどうやって変化させてるの?

公開: 2013-03-23 18:06
更新: 2016-04-29 06:02
このまえようやく家に光が来ました。
ネットがサクサクで嬉しいあっきぃです♪

アイデアはおもしろければ良いってわけじゃないけど、
この発想はなかった!iPhoneのホーム画面にメモがおけちゃうアプリ「アイコンメモ
ちょっと小さいけど、アプリを立ち上げなくてもメモが見えるのは素晴らしい!
このアプリおもしろい!
という記事はたくさんあるので、
今回はこのアプリがどういう仕組みでアイコンを変化させているのかを考えてみたいと思います。

アプリを起動→好きな付箋を選択→Safariが立ち上がるわけですが、
ふんふん
立ち上がったページの
<head>〜</head>付近をちょっと見てみましょう。

<html lang="ja" manifest="memo.appcache" class="ui-mobile">
<head>
        <base href="http://jp.iconmemo.com/memo/?guid=...">
        <meta charset="utf-8">
        <title>
IconMemo</title>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0,maximum-scale=1, user-scalable=no" name="viewport">

        <link id="icon" rel="apple-touch-icon-precomposed" href="data:image/png;base64,iV...CC">
        <meta id="title" name="apple-mobile-web-app-title" content="Memo">

        <!-- 640x920 for retina display -->
        <link rel="apple-touch-startup-image" media="screen and (device-height: 480px) and (-webkit-min-device-pixel-ratio: 1)" href="images/Default.png">

        <!-- 640x920 for retina display -->
        <link rel="apple-touch-startup-image" media="screen and (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/Default-2x.png">
        
        <!-- 640x1136 for retina display (568)-->
        <link rel="apple-touch-startup-image" media="screen and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2)" href="images/Default-568h-2x.png">
        
        <!-- iPad Portrait 768x1004 -->
        <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)" href="images/Default-Portrait-ipad.png">
        
        <!-- iPad Landscape 1024x748 -->
        <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)" href="images/Default-Landscape-ipad.png">
        
        <!-- iPad Portrait 768x1004 -->
        <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)" href="images/Default-Portrait-2x-ipad.png">
        
        <!-- iPad Landscape 1024x748 -->
        <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2)" href="images/Default-Landscape-2x-ipad.png">
        

ふんふん。全然わかんn...

色々重要なことはありますが、
とりあえず今回注目すべきはこの一行でしょう。
<link id="icon" rel="apple-touch-icon-precomposed" href="data:image/png;base64,iV...CC">

apple-touch-icon-precomposedとは、
WebページをiPhoneのホーム画面に追加したときのアイコン画像を指定するものです。
(※precomposedは光沢なし)

普通はpng画像などをhref="icon.png"みたいな形で渡しますが、Base64形式で指定してあります。さらにid="icon"とidが振ってあります。その理由はJavaScriptで画像を合成しhrefの値を変えているためでしょう。たぶん手順はこうです。

①iPhoneアプリからSafariを起動
②起動したページをホーム画面に追加させる
③ホーム画面から起動させるとメモが書けたり色変えたり
④HTML5のcanvas、JavaScriptで画像を生成
⑤apple-touch-icon-precomposedのhrefを書き換える

という感じでしょうか。
(②③がいらない気がするのですが、きっと何か理由があるに違いない。

といわけで実際にこの予想が正しいのか何か簡単なアプリを作ってみよう!
ふっふー♪



...数時間後



出来ました!
なかなか手こずりました。名を冠するなら「icollision」です。
デザインがどこかで見た事ある気がした人は気のせいだよ☆
どういうアプリかと言いますと、
ランダムで何か一つアプリを見つけてくれる!
というシンプルなもの。そのアプリがアイコンへ反映されます。
目的なく何か見た事ないようなアプリに出会いたい時に使うといいかもですな♪(使ってみてネ♪
?マークついたアプリってあんまり見た事ないなぁ
最初ホーム画面に追加するとこんな感じです。
あらかじめ、apple-touch-icon-precomposedに「?マークの画像」を指定してあります。
若干クールじゃまいですか?だめ?
ホーム画面に追加したあと、起動させるとこうなります。
ちなみにホーム画面から起動されたかどうかの判定はwindow.navigator.standaloneを使います。

「いきなりリロードかよっ」

と思うでしょうが、致し方ないのです。
先ほどの②③あたりいらなくない?という疑問の答えになるのですが、
LocalStorageを使用する場合、Safariとホーム画面に追加したあとではデータを共有できないのでやんす。

「LocalStorage使わなきゃいいじゃんっ」

と思うでしょうが、致し方ないのでふ。
apple-touch-icon-precomposedは起動時に書き換えないと反映されないようなのです。

つまり、

起動→文字入力→画像生成→apple-touch-icon-precomposed書き換えはダメで、
起動→文字入力→画像生成→LocalStorageに保存→再起動→LocalStorage読み取って→書き換えなら大丈夫♪

ってなわけなんですな。
あっきぃさん的にも「知るかっ」って感じなんですが...

さてさてこのことを意識しながらリロードしてみましょう。
(リロードっていってもホームに一回戻ってもう一度起動です...
バトルスケートだと?!なんて楽しそうなゲームなんだっ!!
するとランダムで一つアプリが表示されます。
ホーム画面に戻るとあら不思議アイコンが変わるのでーす♪
(※appleのAPIを使っているのでネットワーク環境下でしか動きません。

起動時に書き換えないと反映されないという事は、
今表示されている画像はすでにLocalStorageに入っていたということです。
「Please reload」とか表示されたときはすでに次に出すアイコン画像を取得、合成、保存が完了しているのです。

つまること、いまこのめっちゃおもしろそうな「バトルスケート」が
表示された時にすでに次に表示するアプリデータが保存されているのでごわす♪なかなかあざとい。

さてさて話が少し長く&ごちゃごちゃなりましたが、答えはこうでしたね。

①iPhoneアプリからSafariを起動
②起動したページをホーム画面に追加させる
③ホーム画面から起動させるとメモが書けたり色変えたり
④HTML5のcanvas、JavaScriptで画像を生成しLocalStorageへ保存
⑤再起動
⑥LocalStorageを読み込みapple-touch-icon-precomposedのhrefを書き換える

例えばこのテクニックを用いて
・起動すると今日の運勢がアイコンに出る占いアプリ
・エサをあげてアイコンを育てよう!アイコン育成アプリ
・気温をアイコンに表示するお天気アプリ
・カウントダウンアプリ
などなど...

色々なアプリが作れそうですね♪
もしもこの記事を読んで何か作ったらぜひぜひ教えてくださいませ♪

ではでは♪

icollision(http://icollision.appstars.jp/)

この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。