AppSheet... - Qiita

AppSheetで簡単アプリ開発 ～vol4. 日報アプリを作る（ビュー編） #GoogleCloud - Qiita 8 いいねしたユーザー一覧へ移動 4 X（Twitter）でシェアする Facebookでシェアする はてなブックマークに追加する more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete info この記事は最終更新日から1年以上が経過しています。 @ kccs_hiromi-nishida ( Hiromi Nishida ) in 京セラコミュニケーションシステム（デジタルソリューション） AppSheetで簡単アプリ開発 ～vol4. 日報アプリを作る（ビュー編） GoogleCloud nocode ノーコード AppSheet 8 最終更新日 2024年03月25日 投稿日 2024年02月26日 はじめに こんにちは、京セラコミュニケーションシステム 西田（ @kccs_hiromi-nishida ）です。 vol.4となる今回は、アプリの顔部分ともいえるビュー部分をカスタマイズします！ これでグッと使いやすいアプリに近づくと思うので、ぜひお試しください。 本記事は2024年2月ごろに作成しております。よって、引用している文章などはこの時点での最新となります。ご了承ください。 また、特別な記載のない限り、画像はGoogle AppSheet画面をキャプチャしたものとなります。 連載記事一覧 AppSheetで簡単アプリ開発 ～vol1. AppSheetって何ができる？ AppSheetで簡単アプリ開発 ～vol2. サンプルを使って作ってみよう！ AppSheetで簡単アプリ開発 ～vol3. 日報アプリを作る（データ準備編） AppSheetで簡単アプリ開発 ～vol4. 日報アプリを作る（ビュー編） ★本記事★ AppSheetで簡単アプリ開発 ～vol5. 日報アプリを作る（Automation編） この記事の対象者 AppSheetに興味のある方 AppSheetでアプリを作ってみたい方 ビューってなに？ 今回の記事ではビュー部分のカスタマイズを行いますが、そもそもビューとは何でしょうか。 ビューとは、前回の記事で作成したデータの表示方法を設定する機能です。 ビューの設定画面は画面左側の赤丸箇所のアイコンを選択すると表示されます。 ビューの種類 記事執筆時点でビューの種類は11種類あります。 特徴を見ていきたいと思います。（サンプル画像は選択すると拡大表示されます） 種類 説明 サンプル画像 calendar カレンダー形式で表示します。 日・週・月表示が可能で、Googleカレンダーとの 連携も可能です。 deck デッキ形式で表示します。 画像があればそのサムネイル画像と文字情報を あわせて表示できます。 table テーブル形式で表示します。 スプレッドシートやExcelのような見た目の表示が 可能です。beta機能ではありますが、 tableビュー上でデータを直接編集も可能です。 gallery ギャラリー形式で表示します。 写真がメインの場合に最適なViewです。 detail 詳細形式で表示します。 投稿内容を確認するような画面に適しています。 map 地図形式で表示します。 車のアイコンを選択するとGoogle Mapsが別タブで 表示され、現在地からの経路を確認できます。 chart グラフ形式で表示します。 グラフの種類は13種類用意されています。 ※記事執筆時点(2024年2月) dashboard ダッシュボード形式で表示します。 複数の要素を組み合わせた表示が可能です。 form フォーム形式で表示します。 データの入力、編集時に使用するViewです。 onboarding 画面全体にデータを表示し、Nextを選択すると 次のデータに移動します。カタログのような Viewです。 card カード形式で表示します。 カードの種類も4種類から選択できます。 カレンダービューを追加する 現在はこのように、 日報 という1つのViewしかありません。 では、今作成しているアプリにカレンダービューを追加します。 Viewの追加 まず、 PRIMARY NAVIGATION の横の ＋ マークを選択します。 表示された画面の Create a new view を選択。 新しいViewが作成されました。 カレンダーViewの設定 作成したViewをカレンダーViewにします。 まずはView nameを カレンダー に変更し、View typeを calendar にしてください。 これでカレンダーViewへの変更が行われました。 次に、カレンダー上に登録された日報の製造番号を表示したいと思います。 View Options の Start date と End date にそれぞれ 日付 を選択してください。 そして、 Description にはカレンダーに表示するイベント名となる項目を選択します。 今回は 製造番号 を選択することにします。 アプリのプレビュー画面を確認すると、カレンダーに製造番号の表示が追加されていることがわかります。 製造番号を選択→日単位のカレンダーに遷移→製造番号を選択→日報詳細画面へ遷移、という流れになります。 汎用的な項目の日本語化 アプリ内のOK・NGなど汎用的な項目は日本語にしたほうがわかりやすいですよね。 このやり方に関しては、vol.2の記事にて紹介しているので、やってみてください。 今回私は、以下を変更してみました。 Save → 保存 Cancel → キャンセル This entry is required → 必須項目です おまけ 最後におまけとして、アプリのテーマを変更してみましょう。 画面左の歯車アイコン→ Theme & Brand を選択します。 Primary color で好きな色を選択、または色の作成も可能です。 選択するとアプリの基本色が変更されます。 また、 Header & Footer の Style を変更すると、この画像のプレビュー画面のようにヘッダーとフッターが選択した色になります。 色が変わるだけでも結構印象が変わりますよね？ このページではアプリのロゴを変更したり、フォントを変更したりできるので、色々触ってみてください。 次回予告 最終回ではワークフローの作り方紹介したいと思います！ 日報が登録されたら、指定した人に登録されたことを知らせる仕組みを作成します。 お楽しみに！ おしらせ 弊社X（旧：Twitter）では、Qiita投稿に関する情報や各種セミナー情報をお届けしております。情報収集や学びの場を求める皆さん！ぜひフォローしていただき、最新情報を手に入れてください 8 いいねしたユーザー一覧へ移動 4 comment 0 コメント一覧へ移動 新規登録して、もっと便利にQiitaを使ってみよう あなたにマッチした記事をお届けします 便利な情報をあとで効率的に読み返せます ダークテーマを利用できます ログインすると使える機能について 新規登録 ログイン 8 いいねしたユーザー一覧へ移動 4 more_horiz 記事を削除する close 一度削除した記事は復旧できません。 この記事の編集中の下書きも削除されます。 削除してよろしいですか？ キャンセル 削除する delete