スマホのホーム画面に置けるサイトを作ったら、なぜか古い画面が表示され続けた話
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
ツール工房.ai の中で、毎日触るタイプのツールは、スマホのホーム画面に置ける形にしています。
ブラウザのお気に入りから開くより、ホーム画面のアイコンから一発で開くほうが、ほんの一手間ですが体験がぐっと良くなる気がしたからです。
ただ、最初に作ったときは、思わぬところで困りました。私が更新したはずの最新版が、私自身のスマホでは何時間経っても古い画面のまま表示される という状態になってしまったのです。
何度リロードしても変わらず、「ちゃんと更新したよね……？」と自分のパソコンを見返したり、家のWi-Fiを疑ったり、ちょっと右往左往しました。
じつは、この「古い画面のまま」に気づいて右往左往した顛末そのものは、以前 直しても古いまま問題に悩んだ話 に書きました。そちらは「どう気づいて、どう直したか」という体験の記録なので、この記事のほうは、その反省をふまえて裏側の仕組みを実際にどう組み直したか——設計の話に絞ってみます。
どのツールをホーム画面対応にしたか
ホーム画面に置けるようにしているのは、検索系のツール群です。
ホテル検索、スマホ料金比較、楽天最安値検索、子連れスポット検索など、スマホで「ちょっと開いて確認したい」場面が多いものを中心に対応しました。
逆に、月に数回しか開かないものや、操作の都合上アプリっぽい起動が向かないものには、ホーム画面対応を入れていません。
ホーム画面のアイコンの枠は限られているし、見渡したときに「いつものやつだけが並んでいる」のが気持ちいいなと思うので、頻度の高いものだけに絞ることにしています。
「前に取ってきた中身」を出す仕組みで詰まった
ホーム画面対応の中で一番手応えがあったのが、「前に一度取ってきた中身」をどこまで残しておくか、というルール決めでした。
最初に組んだのは、いちばんシンプルな形でした。「前に取ってきた中身」があればまずそれを画面に出して、無いときだけネットに取りに行く、というものです。
これだとたしかに表示は速くなります。ただ、サイトを更新しても、利用者の手元では「前に取ってきた中身」が出続けてしまう。冒頭の「自分のスマホで古い画面のままだった」事件は、まさにこれが原因でした。
取り直しのルールを整え直した
二回目に組み直したルールはこうです。
画面の中身そのものは、毎回まずネットから取りに行く。もしネットがつながらなければ、しかたなく前に取ってきた中身で代用する。一方で、見た目や動きを支える部品ファイルは、前に取ってきたものをすぐ表示して、裏でこっそり最新を取り直しておく。
要は、よく中身が変わるものはネット最新を優先、めったに変わらない部品は手元優先、と役割を分けました。
加えて、部品ファイルには、更新すると自動で別名になる仕組みを入れています。中身を直したらファイル名そのものが変わるので、スマホ側から見ると「これは見たことがないファイル」になり、新しいものを取りに行きやすくなります。これがあるとないとで、安心感が全然違います。
「前に取ってきた中身」をしまっておく場所にも世代の番号を付けて、新しい裏側の仕組みが動き始めるタイミングで、古い世代を整理するようにしました。これを入れておかないと、古い在庫がスマホの中にずっと残り続けて、別の事故の元になります。
即時に切り替えるか、ボタンで知らせるか
新しい版を利用者にどう届けるかは少し悩みました。
「新しい版が出ましたよ」とバナーでタップしてもらう丁寧なやり方もあれば、こちらで黙って新しい版に即座に切り替えるやり方もあります。
私は後者を選びました。バナー方式だと、利用者にひと手間かけてもらわないと最新版にならないのが、個人ツールとしては少し不安だったからです。
私のツール群は「短い時間で答えを出して終わり」というものが中心なので、多少すぐに切り替わっても大きく困る場面は少なそうだと判断しました。ページを開くたびに軽くチェックも走るので、届くまでのタイムラグも自分で納得できる範囲に収まっています。
アイコンの背景で詰まった話
ホーム画面に置けるようにするには、アイコンや名前などをまとめた設定ファイルを用意します。
ここで失敗したのが、アイコンの背景 でした。
絵文字をそのまま貼り付けただけのアイコンを置いてみたら、Android では下地が黒く、iPhone では白くなって、見た目がちぐはぐに。
透明な背景をやめて、塗りつぶしの背景に絵文字を乗せる形にしたら、両方の OS で見え方がだいたい揃いました。何枚もサイズ違いを作らないとダメかと身構えていたので、想像より軽い対応で済んで拍子抜けしたほどです。
ネットがつながらない場面はどこまでやるか
ホーム画面対応では「ネットがつながらなくても動かせる場合がある」という話もありますが、これはツールの性質によって温度感が全然違います。
外部のサービスに問い合わせて結果を返すツール（ホテル検索や楽天最安値検索など）は、ネットがないと答えようがないので、「つながっていません」と伝えるのが精一杯です。
一方、端末の中だけで完結するツール（TODO のようなもの）なら、ネットがなくても普通に使える状態にできます。電車の中でさっと開ける体験は、地味ですが満足度が高い部分です。
アイコンを消した後の話
ホーム画面のアイコンを消せばそれで終わり、と最初は思っていました。
実際には、裏側で静かに動く小さな仕組みが端末に残っていることがあって、もう一度入れ直したときに古い動きを引きずる場合がある、と知って驚きました。
他の人の端末で起きると説明もしづらいので、ページを開くたびに「新しい版が来ていないか」を軽くチェックする、という保険だけは入れてあります。
振り返り
ホーム画面に置ける形にする、という話は、見栄えの良さ以上に、「なるべく新しい状態で使ってもらう仕組み」を考えないといけない、というほうが本体だな、と思いました。
ここを誤ると、自分で作ったツールが、自分のスマホで古いまま動き続ける、というちょっと滑稽な状態に陥ります（実際になりました）。
毎日使うものほど、更新の挙動を真面目に組んでおくと、後がぐっと楽になります。派手な機能を増やすよりも、こうした裏側の挙動を整える時間のほうが、結局はツールの寿命を延ばしてくれる気がしています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ