【初心者におすすめ】appsheetで簡単に作成できるアプリ

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回の記事内容は初心者向けです。

昨今、「DXが大事だ！！」と言われ、データの保存先もローカルではなく、クラウド環境化に保存されることが多くなってきました。

そこで、appsheetを使って自分の使いやすいお気に入り画面を作成しようというのが今回の内容です。

こちらは私のお気に入り画面で、本記事の完成形です。

いわゆるlauncher（ランチャー）です。

アイコンをクリックすると、そのページに瞬時に飛ぶことが出来ます(^^)

それでは勉強していきましょう！

参照データの作成

appsheetにデータを送るデータソースとして、私が推奨するのはスプレッドシートです。

• Googleアカウントを持っていれば無料で利用が可能
• オンライン上で複数人とのデータの共有が容易
• appsheetの関数との互換性が高い

これらのメリットがあります。

なので今回（いつもですが）はスプレッドシートを用いて説明します。

Googleアカウントを持っている方は、下記参考リンクからどうぞ(^^)

スプレッドシートの情報

私がよく使っているフリーアイコンの素材が取得できる外部サイト様です(^^)

appsheetでアプリ作成

作成したスプレッドシートをappsheetに取り込みます。appsheetへのログインは参考リンクからどうぞ(^^)

アプリ作成手順

アプリの作成は、以下の手順を参考にしてください(^^)

スプレッドシートの拡張機能からアプリを作成する

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

Customize with 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つの画面で管理する方法についてまとめました。

仕事だけではなくプライベートでも使える設定ですので、興味のある方はぜひトライしてみてください(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)