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

2019年09月11日 11:30更新

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

「モバイルウェブ版の開発の話」としているのに、このスクリーンショット、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デザインに興味のある方などにも楽しんで読んでいただけるような記事になるかなぁ?くらいに思っています。

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

atotok について

atotok(アトトック)は理想の姿を明確に描き、あなたの「夢」を叶えるお手伝いをします。

で理想の姿を描き、 で描いた夢を叶えるまでの気分の変化を残しておきましょう。

なりたい自分を探すため、夢を叶えるためのヒントを集めたさまざまなコンテンツも展開しています。

サービス

ヒントを探す

よく読まれている記事

atotok とは?

atotok(アトトック)は理想の姿を明確に描き、あなたの「夢」を叶えるお手伝いをします。

で理想の姿を描き、 で描いた夢を叶えるまでの気分の変化を残しておきましょう。

なりたい自分を探すため、夢を叶えるためのヒントを集めたさまざまなコンテンツも展開しています。

10Yearsは理想の姿を明確に描くためのサービスです。

10年先の将来を考えることで今なにをすべきか見えてきます。

さあ、10年後の自分に向けて10Yearsを始めてみましょう。

ニコニコログは毎日の気分の変化を記録するためのサービスです。

記録した気分の変化は、カレンダーで過去に遡って一覧できます(チームのカレンダーはもっと便利です!)

もし悲しい顔のアイコンが毎日続いていたら・・・生活を見直す時期なのかもしれませんよ!

まだユーザー登録がお済みでない方
今すぐユーザー登録!
ユーザー登録がお済みの方
ログイン

ヒントを探す