はじめに
こんにちは。吉積情報(株)アプリケーション開発部のイイズナです。
AppSheet のView type にある onboarding（オンボーディング）の、ちょっと変わった使い方のご紹介です。
”オンボーディング”といったらオンボーディング。導入。新人教育。
「アプリの最初に使い方を説明するためのビュー」といったイメージが強いのではないでしょうか。
私も最初はそのイメージがありましたが、アプリを作成する中で 「こんな使い方もあるのか」 と思った使い方やをご紹介します。
また、 「そもそもアプリを開いて最初に onboarding ビューにするやり方がわからない！」 という方向けにもご説明しますので、安心してくださいね。
※サンプルアプリも公開中です詳しくはこちら※
「onboarding ビューの基本的な使い方がわからない」場合は こちら の記事もあわせてご覧ください。
onboarding ビューのいろんな使い方
onboarding ビューの基本的な使い方は、アプリを起動した際などに「アプリの使い方」を説明するインフォメーションスライド的な位置づけで使われることが多いですね。
アプリの中で一回こっきり見て終わりそうなイメージですが「こんな使い方もできますよ」というご紹介をさせていただきます。
メニューから表示する
まずは一般的な使い方から。ビューをメニューに設定する利用方法です。
Display の Icon 設定で「info（インフォメーションマーク）」を設定することで、「アプリの使い方案内」などを表示させてもいいかもしれませんね。
モバイル・デスクトップ表示の場合の、メニューから onboarding ビューを表示させたデモンストレーション
この場合の onboarding の使い方としては、データを用意し Views のビュー設定で onboarding を選ぶだけです。
View 機能の説明になりますが、具体的な設定方法は2パターン。
1つ目は、対象ビューの設定画面の Position で「menu」 を選択。
2つ目は、画面左のViewsメニューの設定対象ビューの 「︙」から Move to ＞ Menu Navigation を選択するやり方があります。
Form での入力後に「完了画面」として表示する
次に、使っている方もそれなりにいらっしゃるのではないかと思いますが、申込完了画面のように、ペライチでPNG画像などを用いた案内を表示させたい場合などです。
アプリ側の動きを説明すると、Form を閉じる ＞ onboarding ビューへ遷移というのを想定しています。
onboarding ビューを作成し、
対象 Form の Finish View にてビューを指定するだけです。
「アンケート」ビューの Form 入力後、onboarding を用いて作った「回答御礼画面」へ遷移しています。
この例は Form でデータを入力後、ユーザーに次の指示を案内するために onboarding ビューを利用することもできる使い方なので、あったら便利なプラスα要素です。
メンテナンスが少し複雑になるので、慣れてきたら使うとよいでしょう。
Action ボタンから表示する
Action を使った難易度高めの使い方をご紹介します。
アプリ側の動きを説明すると、
- 対象の Detail ビューを表示する（サービス詳細）
- Action が設定されたボタンを押下する（もっと詳しく）
- onboarding ビューに遷移する（無料で GooTorial を使って～）
- 開始画面（Detail）に遷移する（サービス詳細）
となります。
開発画面の手順を説明すると
- 対象のデータ（ここではスプレッドシートのシート）を作成する
- Table に読み込み、View で onboarding ビューを作成する
- 作成したビューの Position を ref にする
- Actions で、遷移元のビューに onboarding を設定したビューへ遷移する Action ボタンを作成する
となります。
画面を用いて詳細を見てみましょう。
今回の例では onboarding をスライド3ページという形で作成しました。
上の行から下の行へ、1行＝1ページとしてアプリ上でスライド表示がされます。
画像データのカラム TYPE は Image を選択。
ボタンを設置したいビューを選択し、Action を作成。
ここでの設定は以下のとおりです。
「App:go to another view within this app」は現在表示されているビューから別のビューに遷移する、つまりこの例でいえば「サービス」→「GooTorial」に遷移をしています。
LINKTOVIEW は[サービス名] という変数を指定していますが、ビュー名を指定すればよいのでこの例でいえば直書きにて「LINKTOVIEW("Gootorial")」でもOKです。
そして prominent は画面上でボタンを表示する位置、Display name はボタンの名称となります。
アプリ画面
実際のアプリ画面を見てみましょう。
アプリでは、このボタンを押すと onboarding 画面が表示されます。
▼ ボタンを設置したビュー
▼ onboarding ビュー1ページ目
サンプルアプリも公開しているので、この辺りは実際にアプリを触ってみて理解するのが一番かもしれません。
また、設定には Views だけでなく Actions も設定する必要が出てくるので、こちらもメンテナンス時にも混乱しないように注意が必要ですね。
onboarding ビューは機能性よりもコンテンツ性を重視したい時に活躍する機能ですので、シンプルだけど「きれいに」「わかりやすく」見せたいアプリを作る際には、使ってみてはいかがでしょうか。
onboarding ビューを最初に表示させる
ユーザーに向けてアプリの使い方を説明したビューなどを onboarding ビューとして設定し、「アプリを開いて最初に onboarding ビューを表示させたい」という場合についてです。
onboarding ビューの作成とは別に、Settings にて設定の必要があります。
やり方は、Settings ＞ Views ＞ General ＞ Starting view で、プルダウンもしくはFORMULA（フラスコマーク）から指定したビュー（ここでは onboarding として作ったビュー）を指定すればOKです。
アプリ起動直後に一度表示できればそれでよい、という場合はビューを REFERENCE VIEWS（Position：ref）に指定してもよいですが、ユーザーが任意で表示することもできるようにしたい場合は MENU NAVIGATION（Position：menu）でビューを表示できるようにした方がユーザー側の混乱を避けられてよいでしょう。
おわりに
今回は onboarding の応用も含めた内容でした。
AppSheet のメリットはエンジニアリング知識があまりなくても簡単にアプリ開発ができるところですが、このような応用もできるので工夫次第で作りこむこともできることにも魅力がありますね。
吉積情報(株)では、AppSheet の基本的な使い方だけではなく、このような応用を用いたカスタマイズについての活用サポートやご要望に応じた貴社向けの AppSheet トレーニングも承っております。
ぜひ、お気軽にお問い合わせくださいませ。
それでは、ご覧いただきありがとうございました。また次回お会いしましょう。
サンプルアプリのご案内
今回ご紹介したアプリのサンプルはこちら
AppSheet についての詳しい記事・ご相談などはこちら ※いただいたコメントは全て拝見させていただきますが、全てのご質問にはお答えできないことがございますので、あらかじめご了承くださいませ。
Discussion