本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事!と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに
- お気に入り登録している複数のURLを1画面で管理したい人
- 自分好みのアイコンでページを飾りたい人
- AppSheetでアプリ開発をしたことがない人
- Card Viewのlayoutの設定方法
今回の記事内容は初心者向けです。
昨今、「DXが大事だ!!」と言われ、データの保存先もローカルではなく、クラウド環境化に保存されることが多くなってきました。
そこで、AppSheetを使って自分の使いやすいお気に入り画面を作成しようというのが今回の内容です。

こちらは私のお気に入り画面で、本記事の完成形です。
いわゆるlauncher(ランチャー)です。
アイコンをクリックすると、そのページに瞬時に飛ぶことが出来ます(^^)
それでは勉強していきましょう!
参照データの作成

AppSheetにデータを送るデータソースとして、私が推奨するのはスプレッドシートです。
- Googleアカウントを持っていれば無料で利用が可能
- オンライン上で複数人とのデータの共有が容易
- AppSheetの関数との互換性が高い
これらのメリットがあります。
なので今回(いつもですが)はスプレッドシートを用いて説明します。
Googleアカウントを持っている方は、下記参考リンクからどうぞ(^^)

アイコンにある画像URLの取得の仕方は、フリー素材など写真を保存する時と同じで
右クリック→画像アドレスをコピーで取得が可能です。
私がよく使っているフリーアイコンの素材が取得できる外部サイト様です(^^)
AppSheetでアプリ作成

作成したスプレッドシートをAppSheetに取り込みます。AppSheetへのログインは参考リンクからどうぞ(^^)
アプリ作成手順
アプリの作成は、以下の手順を参考にしてください(^^)

もし拡張機能にアプリを作成がない場合は、こちらの手順を参考にしてください。

ボタンをクリックするとアプリ化は完了です(^^)
取り込んだデータタイプの修正

AppSheetにデータを取り込ませるとAppSheet側で初期設定を行ってくれます。
ただ、これが狙いどおりの設定になっているとは言い難く、自分で修正する必要があります。

Dateペインから上図を参考にデータタイプとLABELを修正して、最後に右上にあるSAVEを押してください。
アクションボタンの編集


ActionsペインからSystem generatedのOpen urlを修正
PositionをHideに変更します。
Positionは全部で4つあり、それぞれのイメージとしては以下になります。
- Primary:画面右上(画面外)にアクションボタンを配置
- Prominent:Detail Viewの画面上部にアクションボタンを配置
- Inline:Detail Viewのインラインにアクションボタンを配置
- Hide:画面上にアクションボタンを配置しない
Viewの修正

次に、実際のブラウザ(アプリ)で表示されるView画面を整えます。







この手順で設定すればOKです(^^)
フォーマット修正

最後に文字の色や大きさを修正していきます。
UXペインのFormat Rulesで実装が可能です(^^)


まとめ
今回はお気に入リに登録したURLを1つの画面で管理する方法についてまとめました。
仕事だけではなくプライベートでも使える設定ですので、興味のある方はぜひトライしてみてください(^^)
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです!
勉強お疲れさまでした(^^)