はてなブックマークApp Extensionの裏側

こんにちは。はてなでアプリ開発をがんばっているアプリ&ブックマークチームのid:yashigani_wです。

先日iOSアプリ「はてなブックマーク」で、iOS 8で新たに追加された「App Extension」を使ってMobile Safariなどのアプリから簡単にブックマークできる機能をリリースしました。

はてなブックマークのApp Extensionは既にお試しいただけたでしょうか?

Mobile Safariでシェアボタンをタップすると、はてなブックマークが登場!
f:id:hatenabookmark:20140917150843p:plain:w300

ここから直接ブックマークできます! もちろん、コメントやタグも付けられます。
f:id:hatenabookmark:20140917150855p:plain:w300

今回は、はてなブックマークのApp Extensionにおける、はてなブックマークへの認証の設計について紹介します。

App Extensionとは

まず、App Extensionの仕組みについてざっくり説明します。App Extensionとは、アプリ独自の機能を他のアプリやシステムと連携させて利用するための仕組みです。先日リリースされたiOS 8で新しく追加されました。

App ExtensionとContaining App

https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/Art/simple_communication_2x.png

App Extensionはあくまで拡張であるため、単独で配布することができません。Containing App(本体となるアプリ)に同梱するアプリとして配布する必要があります。Containing Appがインストールされると、Mobile SafariなどのアプリからApp Extensionを起動できるようになります。はてなブックマークの場合は、アプリに拡張を同梱しています。

認証までのフローを考える

はてなブックマークのようなアプリでは、投稿するには認証をクリアしなければなりません。App Extensionからの認証フローには、大きく分けて2種類の方法が考えられます。

  1. Containing Appで認証する
  2. App Extensionで完結する

それぞれの利点・欠点について考えてみます。

1.Containing Appで認証する

Containing Appには必ず認証機能が実装されているので、それを使うというアプローチです。認証フローという点から考えても、Containing Appに統一されるためシンプルになるという利点があります。

一方で、Containing Appを起動する場合はアプリの切り替えが必要であるため、すぐにシェア機能を使いたいユーザーにとっては、あまりいい体験とはいえません。また、自動で元のアプリに戻る手段がないため、認証した後にユーザーは自分で元のアプリに戻らなければなりません。iOSでのアプリの切り替えは苦痛に感じられる操作のひとつですが、そのつらさ、面倒さをもろに受けてしまう典型例です。

余談ですが、Share ExtensionからContaining Appを開く標準的な手段は提供されていないため、通常はユーザーが自分で切り替える必要があります。しかし、ちょっとしたハックで開くことができます。そちらについては、以下のエントリーをご覧ください。


2.App Extensionで完結する

App Extensionのみで解決するという手法です。App Extensionからも通常のアプリのように任意の画面を表示できます。Appleのプラットフォームは長い間制限が多かったため、個人的には驚きました。

App Extensionから認証画面を表示することで、App Extensionに閉じた状態で認証処理を完了させることができます。Containing Appを使うアプローチでは、アプリの切り替えが必要となることが問題でしたが、このパターンではシームレスに認証と投稿を完了させられます。

その一方で、従来のアプリの概念では単一だった認証のフローが複数になり、複雑化します。例えば初回起動でログインを促す画面がある場合、それより前にログインされることがあり得ます。したがって、状態を考慮した上で認証フローを作成することが必要です。

はてなブックマークでは

iOS組み込みのTwitterやFacebookは1のアプローチで実装されているため、当初はそれにならうつもりでした。

実際に実装してみたものがこちらです。

f:id:yashigani_w:20140919182709p:plain

「OK」をタップすると、はてなブックマークアプリが起動します。使いづらさは若干あるものの、そもそも認証という操作はあまり連続して行うものではないため、当初はこの方法で進めようと考えていました。しかし、先ほどの1と2のアプローチの差を踏まえ、結果として2のアプローチで実装しました。

1のアプローチでの実装で、実際の利用シーンを想定して試してみたところ、操作のスムーズさにおいて難があると感じました。「ブックマークしたい!」と思った瞬間が、ブックマークするという操作に最も強くつながります。ユーザーがブックマークするまでの障害をなるべく減らしたいと思いました。

また、ユーザーの主目的はHost Appであり、Extensionはあくまでも影の存在です。それなのに、アプリの切り替えをユーザーに要求し、操作を増やしてしまうのは、Extensionとしては好ましくありません。


App Extensionは一見何気ない機能ですが、iOS 8を使うユーザーの体験を劇的に変えることができる新しい手段です。ぜひ、皆さんのアプリに組み込む際の参考にしてください。

株式会社はてなではスマートフォンアプリで生活を楽しく豊かにしたいスタッフを募集しています
iPhone, Androidアプリエンジニア職 - 株式会社はてな