#はじめに
本記事は一度でもAppSheetでのアプリ構築を行ったことがある方向けに記載します。
そのため、一部作業方法についてはスキップしながら記入します。
作業に対し不明点がありましたらコメントを記載いただけますと幸いです。
DBはSpreadsheetを利用します。
デフォルトURLに対し、記入した文字列を記入し、リンクとする方法を記入します。
今回の場合、デフォルトURLをTwitterとし、記入する文字列をアカウントIDとします。
（例）
デフォルトURL：https://twitter.com/
アカウントID ：UN_NERV
リンク先 ：https://twitter.com/UN_NERV
#準備（Spreadsheetでのテーブル設定）
下記構成をスプレッドシートに用意します。
| ID | アカウント名 | アカウントID | リンク |
|---|---|---|---|
| ※IDとアカウント名については、わかりやすくするために設定しているため、必須ではありません。 |
#Data構築（AppSheet作業）
AppSheetでの作業に移動します。
Dataにて作成したスプレッドシートを読み込んでください。
Columnsタブにて読み込んだスプレッドシートの各カラムの設定を行います。
- _RowNumber
- 利用しないため設定をすべて解除します。
- ID
- 一意の値として利用します。
- Key?を選択し、SHOW?を解除。
- INITIAL VALUEに「UNIQUEID()」を設定。
- SEARCH?を解除。
- ※表示する設定は必要ないので解除します。
- アカウント名
- Twitterのアカウント名を記入するために利用します。
- LABEL?を選択してください。
- アカウントID
- TwitterのアカウントIDを記入するために利用します。
- TYPEが「Text」に設定されていれば問題ありません。
- リンク
- デフォルトURLを設定し、アカウントIDで記入した内容と組み合わせることが出来るようにします。
- TYPEを「Url」に変更します。
- FORMULAに下記設定を記入します。
- HYPERLINK(CONCATENATE("https://twitter.com/",[アカウントID]),CONCATENATE("@",[アカウントID]))
- ※設定の内容については後述
以上です。
この時点で一度SAVEを行い、エラー等が表示されないか確認してください。
#UX構築（AppSheet作業）
New Viewにて新規画面設定を開いてください。
下記を変更してください。（項目として上げていないものは変更不要です。）
- View name
- 「Twitterアカウント」※任意名前
- For this data
- 今回読み込んだスプレッドシート名を選択してください。
- View type
- 「table」を選択してください。
これにて、データが登録されている場合に
一覧として表示される画面の設定が完了となります。
続いて、画面下部にある「Ref Views」に下記構成のページを編集します。
「スプレッドシート名」_Detail
登録されたデータを選択し、表示した画面となります。
Column order：「Add」を選択し、下記を追加
「アカウント名」
「アカウントID」
「スプレッドシート名」_Form
アカウント情報の登録・編集画面で表示される画面となります。
Column order：「Add」を選択し、下記を追加
「アカウント名」
「アカウントID」
以上です。
この時点でSAVEを行ってください。
「スプレッドシート名」_FormのColumn orderに「ID」が自動的に追加されます。
構築は完了となります。
#動作確認
画面右のプレビューから動作確認を行ってください。
「スプレッドシート名」_Form
UX構築で最初に設定した画面
この画面内、アカウント名の横にある□から→がでているアイコンをクリックし、
Twitterの対象アカウント画面へ遷移することを確認してください。
「スプレッドシート名」_Detail
以上で動作確認完了となります。
#リンク設定について
下記の通り設定したFORMULAの内容について分解します。
HYPERLINK(
CONCATENATE("https://twitter.com/",[アカウントID])
,CONCATENATE("@",[アカウントID])
)
HYPERLINK（リンク先, 別名）
HYPERLINK についてのドキュメントは下記になります。
https://help.appsheet.com/en/articles/2357254-hyperlink
CONCATENATE（文字列1, 文字列2, ..., 文字列255）
CONCATENATE についてのドキュメントは下記になります。
https://help.appsheet.com/en/articles/2347638-concatenate
設定した内容はアカウントIDをTwitterURLと結合し、
表示時には@アカウントIDとなるようにしています。
※今回のUX設定ではURLを表示しないようにしていますが…。
…ただ、何故かうまく表示されない場合があります。
本来、Spreadsheetには下記構成で保存される仕組みとなっています。
{"Url":"https://twitter.com/UN_NERV","LinkText":"@UN_NERV"}
想定通り保存される場合もあれば、うまく行かない時もあり…
解消の仕方がわかる方がいらっしゃいましたらコメントをお願い致します。。