こんにちは。吉積情報(株)アプリケーション開発部のイイズナです。
AppSheet の View の設定のうち View type の onboarding（オンボーディング）について、基本の使い方をご紹介します。
使い方、といっても AppSheet は非エンジニアにも優しいUIのため、基本操作はほぼプルダウンから選択するだけ。
全部を解説すると長くなるので、ポイントをかいつまんでお話します。
onboarding に関する機能一覧は下の表にまとめました。
onboarding View を使う
View Options では主にビュー上で表示したいカラムの選択・配置の設定を行います。
今回は弊社サービスの「GooTorial」を紹介する、という目的で作られたコンテンツを使用します。
onboarding ビューに使うのは、このスクショの内容のテーブルです。
Text、LongText、Image TYPE のカラムがありますね。
（「_RowNumber」の Number カラムは無視でOKです）
View 全体の設定
Views での onboarding View 作成に移ります。
View name → View名（≒画面名）、For this data → 元データの Table、View type →画面表示タイプ は必ず設定しましょう。
Position は画面のメニュー表示位置の設定なので自動で設定されたままでも構いませんが、見栄え以外にも表示画面に優先順位をつけるという意味でも設定はしておいた方が無難でしょう。
カラムを設定
onboarding View に表示するカラムの設定に移ります。
View Options で設定しますが、メニューが折りたたまれている場合はメニューをクリックして開いてください。
右側に表示される画面プレビュー機能である Show in preview でスマホ画面プレビューを見ながら作業すると、実際のカラム表示が確認できるためわかりやすいです。
それぞれのカラムを、表示したい位置に該当する項目のプルダウンで選択します。
Image タイプのカラムは「Image」のみで選択が可能、などカラムの特徴によっては設定する場所が決まっているのでご注意ください。
今回の例ではこのように項目選択しました。
「Auto assign (Start View)」というのは、Appsheet 側で自動で設定されたビュー（onboarding ビューが開始する直前に表示されたスタート画面に戻る）という意味です。
▼アプリのスプレッドシート（データソース）
▼ Views における、カラム選択とデータソースカラムの対応表
ちょっとわかりにくいですが、スプレッドシートのデータ（データソース）を用意→Dataでカラムの定義を設定→Viewでカラムの画面表示を設定、というようなイメージを理解できればOKです。
表示したいカラムがない場合
指定する（表示したい）カラムがない場合は、None をプルダウンから選択してください。
最後に確認
最後に画面・動作確認です。
チェックポイントは主に2つ。
1つ目は、ビューに画像表示を用いている場合、画像が小さすぎないかどうか。
思いのほか小さく表示される上に、現時点では画像をクリックしても拡大されないため、文字や描かれているものがユーザーから認識がしやすいかを確認してください。
2つ目は、onboarding ビューをユーザーが閉じた時の画面遷移先などの確認です。
閉じた後に「ユーザーに最初に見てもらいたい画面」を表示するように設定しておく、などをやっておけば混乱を招かずスムーズに使ってもらいやすいでしょう。
その他動作も問題がないかきちんと確認しておきましょうね。
今回ご紹介した内容は onboarding の基本の操作になります。
記事内で出てきたこちらのアプリ、実はちょっと変わった使い方をしているので、それはまた次回の記事でご紹介いたします。
それでは、ご覧いただきありがとうございました。
サンプルアプリのご案内
今回ご紹介したアプリのサンプルはこちら
AppSheet についての詳しい記事・ご相談などはこちら
※いただいたコメントは全て拝見させていただきますが、ご質問には全てにお答えすることができかねることがございますので、あらかじめご了承くださいませ。
Discussion