iPadアプリでのヘルプのあり方

[トレタ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/toreta)の12日目の記事です。

トレタでiOSエンジニアをやっている @y_koh です。
今日はiPadアプリでいつも頭を悩ませる「ヘルプ」について書いてみます。

# 設定難しい問題
<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/eedbac00-2243-136a-b934-9ea974ef28c5.png" width="600">

さて、これは[トレタ](https://toreta.in/jp/)の設定画面なのですが、ぱっと見操作に迷うようなところは無いと思います。でもそれぞれの項目を設定することでどうなるのかってわからないですよね。

現状はカスタマーサクセス部門が導入説明会で丁寧に教えているので、特に問題にはなっていません。ただ、今後導入店舗数が増え続けていく状況で全てのお客様に対して手取り足取りやっていくことは現実的ではなくなってきました。

# やっぱりヘルプが必要なのでは？
- ヘルプ？そんなもんデザインの負けでしょ？
- そうかもしれません。でも負けたとしてもちゃんと使えてなければ何の意味もないと思うんですよね
- デザインで解決できることはもちろんするとして、それを補完するためにヘルプが必要なことはあるんじゃないかなぁと思います

# ヘルプに必要なこと
- 邪魔にならないこと
- 必要な時に必要な情報を見つけられること
- 今やっている作業を中断せずに確認できること
- **継続的にメンテナンスできること**
    - これ地味に大事なところです

# みんなどうしてる？

悩んだらまずはApple標準アプリを確認してみましょう。

## Appleアプリ
#### GarageBand
<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/d8299a58-e979-9dab-0117-147841397b34.png" width="600">

付箋のようなものがオーバーレイで表示されます
<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/a52c2213-c237-eed3-ac7d-28e0d27fc4e1.png" width="600">

disclosureタップした箇所によって表示するヘルプも変わります。
ここでは上の「コントロールバーの詳細情報」をタップしてます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/3d9c61ec-062c-68cf-75bb-95cb0db8291b.png" width="600">

こちらは右下の「ギターの詳細情報」。
<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/249c0536-4896-6d7b-983f-66d76bbaa066.png" width="600">

画面遷移が少なく、操作するものがだいたい同じ位置にとどまっているものはこのタイプのヘルプが採用されています。
iMovieも同様でした。

#### Keynote
Keynoteでは画面上にコントローラが少ないので、先程のようにオーバーレイするものは無かったです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/50d2a6cd-2745-5d42-f201-02916810eef8.png" width="600">

<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/55d6f106-7e22-a118-8f93-9ea04f6c7b53.png" width="600">

Keynote、Pages、Numbersはこちらのパターンでした。
結構ちゃんとトーン揃えてるんだなぁという感じですよね。
実はこれHelpKitというprivateフレームワークでした。

### HelpKit
https://github.com/nst/iOS-Runtime-Headers/tree/master/PrivateFrameworks/HelpKit.framework

何でこれに気づいたかというと、リンクを何気なーくドラッグしたら普通にフレームワーク名が見えました(^_^;)
<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/aa83cb86-9a25-ba7d-fe70-11f3d9a1e9ba.png" width="600">

Helpの内容はウェブベースになっていて、リアルタイムにメンテナンス可能になっています。

## ベンダーアプリ
### Dropbox

<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/984be54a-3178-f4f9-da8e-65e7c215ecd6.png" width="600">

<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/319e5df3-e2f6-ede1-d6c5-261e19b336d5.png" width="600">


これすごくいいなと思いました。既にあるウェブベースのHelpをアプリ上ではSFSafariViewControllerを使ってモーダルで表示させるだけです。
（ちょっと下の方にプランとかへのリンクがあるのが大丈夫なのか気になりますが…）

これならメンテするときも、元のヘルプを更新するだけで良いですね。

## トレタアプリでやるとしたら…
**※あくまでお試しで現状プロダクションに載せる予定は無いです**

完全にジャストアイデアで、Issueではなくいきなり打ち手に飛んでますが、
こんな感じでそれぞれにヘルプボタンを置いて、該当するヘルプページを表示するのはどうでしょう。

<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/c08f3fc1-73f6-4641-646b-a822c1ca7d2f.png" width="600">

<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/32468078-475d-effd-3def-3f4c33b2b04d.png" width="600">

<img src="https://qiita-image-store.s3.amazonaws.com/0/2569/67d8d309-a5e3-a475-9862-ab6970c2ff6a.png" width="600">

ヘルプは既存のものを使っていますし、SFSafariViewControllerは全画面ではないので、後ろの画面も見えて何をしていたかを忘れずにすみます。（横長になっているのは現状のヘルプページの関係で狭いとかなり見づらかったためです）

ちなみに設定画面内の他の画面にも設置してみたのですが、共通化部分に追加することが出来たので全体で50行くらいで実装することが出来ました。これくらいのコスト感で出来るなら結構良いのでは？と思ったりしてます。

# まとめ
- ヘルプは悪ではない
- ただし、よく考えないとメンテされずに放置され負の遺産になる
- SFSafariViewControllerで既存ヘルプを表示するのはコスト低めでおすすめ