kの雑記ブログ
本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
UIの新旧画面への切り替えは、下写真を参考にアイコンをクリックしてください(^^)
まずはじめに
プライベートで使える日記アプリを作成したい人
データタイプLatLongを使ってみたい人
現在地を取得するhere()関数の便利な使い方がわかる
split()関数とindex()関数の組み合わせと使い方がわかる
アプリに登録した目的地の天気予報を取得することができる
今回はプライベートでも使える日記アプリの作成についてまとめたいと思います。
先日、母親から「御朱印集めすることにした！」と言われたので、せっかくなら神社巡りの思い出をアプリに保存してもらおうと思い作りました(^^)
普段まとめている「今日から使えるテクニック！！」みたいなものではなく、原点に立ち返って「自分でアプリを作成してみる楽しさ」を思い出してもらえたらなって思います。
ちなみにその時に見せられた写真がこちら↓
めちゃくちゃ賑やかです・・笑
この派手な写真に負けないようなTIPSを盛り込んだアプリに仕上げましたので、ぜひ参考にしてもらえたらなって思います(^^)
また、行ってみたかったお店の食べ歩きや行ってみたかった旅行先を記録するアプリとしても使えます笑
それでは勉強していきましょう！
準備するデータについて
まずは、いつものようにアプリを構成するデータテーブルについて説明します。
下図のようなカラム構成で今回はまとめたいと思います。
続いてappsheetのデータタイプの変更をしていきます。
実際の設定は以下を参考にしてください。
赤枠のデータタイプに修正します。ここまでは特に難しい設定はありません。
続いて、緯度と経度のカラムの設定を以下のように行います。
データタイプをDecimal、Display modeをLabelにします。
Initial valueに以下の構文を入力します。
decimal(index(split([緯度経度], “,”),1))
3つの関数をそれぞれ説明します。
split(text, delimiter)
第一引数にテキスト、第二引数にそのテキストを区切る文字を指定
また、split()関数の返り値はリスト型になります。
今回の場合だと、Latlongのデータは 〇〇.〇〇（緯度） , △△.△△（経度）という形を取るので、,（カンマ）で区切るという設定が可能となります。
index(list, which-one)
第一引数にリスト、第二引数にそのリストから取り出したい何番目を指定（リストの一番左が1番目）
使用例) index({“A型”,”B型”,”O型”,”AB型”},2) なら返り値は B型
decimal(x)
xは任意の値で、その値が認識可能な場合は同等のdecimal（小数）を返します。
図解で表すと以下のようになります(^^)
経度のInitial valueには、decimal(index(split([緯度経度], “,”),2))を入力すればOKです。
次にチェックカラムの設定をします。
ここでは、行った or 行っていない のフラグ管理が出来ればOKです(^^)
TIPSとして、現在地から目的地までの直線距離を取得するカラムを作成したいと思います。
アプリに導入したい人は以下の手順を参考にしてください。
- App formulaにdistance([緯度経度],here())を入力
- Show?のチェックを外す
- TypeをDecimalにする
- App formulaに[距離]&”km”を入力
- TypeをTextにする
データタイプの設定は以上です。お疲れ様でした(^^)
アクションボタンの作成
続いてアプリに必要なアクションボタンの作成をしていきます。
私が実装したいアクションボタンは以下の4つです(^^)
Googleマップで現在地に戻るボタン
目的地までのルート検索ができるボタン
チェックカラムを変更するボタン
目的地の10日間の天気予報を見るボタン
上2つに関しては、データタイプやMap viewを設定するだけで実装ができるので、特に意識しなくて大丈夫です(^^)
まずは簡単なチェックカラムを変更するボタンを作りましょう！
PositionはInlineでやってみたいと思います(^^)
Attach to columnはチェックを指定します。
他にできることとして
- Only if this condition is trueの条件式を入力
- Format rulesでアクションボタンに色を付ける
あたりかなって思います(^^)
チェックのアクションボタンができたら、次に目的地の天気予報を入手するアクションボタンを作成します。
設定は下図を参考にしてください(^^)
Targetには、以下の構文を入力します。
“https://www.weather.com/ja-JP/weather/tenday/” & ENCODEURL([緯度]) & “,” & ENCODEURL([経度])
このURLは、特定の緯度と経度に対応する場所の10日間の天気予報を表示するためのウェブページへのリンクです。
もう少し具体的に説明すると
天気予報の10日間表示のベースURLであり、tendayをtodayに変えると本日、weekendに変えると週末など検索の対象期間を設定することが可能
特定の場所の緯度および経度をURLエンコードしています。これにより、緯度と経度の座標がURLに挿入される
それぞれのURLを＆を用いて繋げて、1つのURLとして成立させています。
＆の代わりにconcatenate()関数を使ってももちろん可能です(^^)
アクションボタンの設定は以上です。お疲れ様でした(^^)
Viewを整える
大事なアプリの画面設定をしていきます。
と言っても、特に難しい設定はありませんので下図を参考に編集をしてみてください。
今回はCard ViewとMap Viewを作ってみたいと思います(^^)
まずはLayoutからlargeを選択します。
私の設定では、赤枠の部分には何も情報を入れないほうがすっきりとした見栄えになったので、今回は使わずにいきたいと思います(^^)
下図のようにそれぞれ該当する箇所をクリックして、セットするカラムを選択していってください。
すべての設定が問題なくできていると、下図のようなViewになります(^^)
Map Viewの設定は以上です笑
その他のViewとして、新規作成のためのForm Viewは合ったほうがいいかもしれません。
このあたりはアプリ開発者の好みです(^^)
Format Ruleの設定
アプリの視認性を高めるために、ちょっとしたフォーマットルールを追加したいと思います。
別になくても構わない設定なので、不要な人は飛ばしていただいても結構です。
私が試しに設定してみたものは、以下の6つです(^^)
アプリ動作の確認
最後に作成したアプリの動作検証を行いたいと思います。
このアプリはモバイル（スマホ）を意識して作成しているので、そのViewで確認するのがいいです(^^)
赤矢印の項目を登録していきます。
今回は一度行ったことがある、チェック＝完了 で検証をしてみます(^^)
登録したデータをタップすることで、Map Viewに画面が遷移します。
アプリのGマップを移動させたあと、最初の登録座標に戻したい場合は赤のマップアイコンをタップします。
天気予報をタップすることで、外部サイトから登録地点の天気予報が取得できます。
車のアイコン（appsheetが自動で作成するアクションボタン）をタップすると、Googleマップのルート検索ができる
まとめ
以上、プライベートでも使える日記アプリについての記事でした。
appsheetが求めているカラムを用意すると完成度の高いアプリが作れますので、こういうアプリから勉強してもらえると楽しく学べていいかなって思います(^^)
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)