2019月08日09日

NikoNikoLog 開発の記録 (5) - ホーム画面に追加して使うとアプリじゃないのにアプリ（っぽく）なります。お知らせ？重大発表？

前回の記事では開発中の画面のスクリーンショットを一部公開しました（右の画像）。

「モバイルウェブ版の開発の話」としているのに、このスクリーンショット、Safari のアドレスバーが無かったりしていることにお気づきの方がもしいたら鋭いです。

NikoNikoLog の次期大規模アップデートでは、Safari で NikoNikoLog を開いた状態で「ホーム画面に追加」すると、ほぼそのままアプリのようなインターフェイスで使うことができるようになるんです。

とりあえず。

はい、とりあえず書いておくと、Safari で開いているページをホーム画面に追加すると、アドレスバーなどが一切表示されないアプリっぽい表示にすること自体はめちゃくちゃ簡単です。ページに以下の meta 要素を入れておくだけです。

<meta name="apple-mobile-web-app-capable" content="yes">

まあ追加でこんな設定も。

<meta name="apple-mobile-web-app-status-bar-style" content="default">

これだけです。ね？簡単でしょ？

ちょうどいいのでちょっとだけ歴史的な背景を書いておきましょう。

その昔、2007年に日本では発売されなかった初代 iPhone の頃は AppStore と言うものがありませんでした。当然、アプリを作って iPhone に入れることもできませんでした。

当時の Apple の主張は要約するとこんな感じでした。

ネイティブアプリなんて開発しなくても、ウェブの技術で作ったものをホーム画面に追加すりゃアプリっぽくなるよ。そっち使って。

その頃の名残なのか、今でも上述したようなコードをウェブページに追加すると、ホーム画面に追加したアイコンから開いた時に「アプリ風」な表示になるのです。

Safari で開いた状態で提供できるユーザー体験の限界

はい、完全に話が脱線してしまいました。すいません。さて、前回の記事で、以下のように書きました。

しかしこの記事で書いた通り、スマートフォンのブラウザで使う比較的ライトなユーザーの皆さんにも、アプリと同じレベルのユーザー体験を届けたいと思っていました。

これ、言うのは簡単なんです。

ただ実際にアプリと同じレベルのユーザー体験を実現しようと思うと、そもそもの普段使っているアプリの「自然な動き」の部分（普段は誰も意識していない動きや操作性の部分）がどのように設計、実装されているのかを注意深く観察して、それをひとつひとつウェブの技術で置き換えて実装していってやる・・・っていう、結構途方もない作業があったりもしました。

その辺りの UI/UX 絡みの話は、実は次回に少し掘り下げて書こうと思っています。

さて、ここの項目の小見出しにもなっている「Safari で開いた状態で提供できるユーザー体験の限界」ですが、一番わかりやすい例をひとつ取り上げてみます。

Safari って左から右にスワイプしたら、前に表示していたページに戻りますよね？

この動きは Safari がウェブブラウザである以上、ごくごく "自然" なものです。

ただ実はこの動きは NikoNikoLog を SPA（シングルページアプリケーション）にする上で、ユーザーの皆さんに自然なユーザー体験をお届けする上で障害でした。

実際にちょっと試してみましょう

もしこの記事をお読みの方で iPhone をお持ちの方がいれば、例えば「設定」アプリを開いてみてください。そして "Bluetooth" の項目を開いてみてください。開いたら、画面左から右側に向かってスワイプしてみてください。そうすると、前の画面（設定の最初の画面）に戻りましたね？

ここでお気づきの方は鋭いです。

そう、この「画面左から右側に向かってスワイプ」の動きを Safari 上で再現するのは、ジェスチャーが重複しているのでかなり難しい（と言うかほぼ不可能）のです。

ただし、冒頭で書いた「ホーム画面に追加」をしていただいた状態で「アプリ風」に表示させた場合は、その中でページ遷移が起きてさえいなければ、この横スワイプの動きを再現することは可能でした（そして NikoNikoLog はページ遷移が発生しないように慎重に設計、開発を行いました）。

本当にざっくりとした説明になってしまいましたが、目標としていた自然な使い心地を作り上げるのもなかなか簡単にはいかないものでした。

ホーム画面にアイコンがあるということ

それがたとえ Safari のブックマーク、ショートカットであったとしても、皆さんの iPhone のホーム画面から直接 NikoNikoLog を使えることと、あくまでも Safari などのウェブブラウザのお気に入り、ブックマークとしてウェブブラウザを開いてからアクセスするのでは、全然利便性が違うことは作っている自分自身がよーくわかっています。

実はここでひとつ発表することが・・・。

パブリックベータとして NikoNikoLog 次期大規模アップデートを公開します

はい。この項目の見出しの通りです。

現在開発中の、そして散々ここのラボで記事を書いてきた NikoNikoLog の次期大規模アップデートをパブリックベータとして近日中に公開することが決定しました。

正式なリリースは iOS 13 のリリース前後の時期になる予定ですが、遅くとも今月中（たぶんもっと早くなるはず）にはパブリックベータの提供を開始します。

とりあえずひとつ、いいお知らせを発表できてよかったです。

次回・・・

次回はまたちょっと開発者寄りの話を予定しています。エンジニアだけじゃなく、UI/UXデザインに興味のある方などにも楽しんで読んでいただけるような記事になるかなぁ？くらいに思っています。

それではまた次回の記事で！

NikoNikoLog 開発の記録 (5) - ホーム画面に追加して使うとアプリじゃないのにアプリ（っぽく）なります。お知らせ？重大発表？

とりあえず。

Safari で開いた状態で提供できるユーザー体験の限界

実際にちょっと試してみましょう

ホーム画面にアイコンがあるということ

パブリックベータとして NikoNikoLog 次期大規模アップデートを公開します

次回・・・

関連記事

アトトックラボとは

連載記事

最近の記事

タグ