AppSheetMemo

AppSheetを使ったスマホアプリ開発メモ。画像メインなのでPC閲覧推奨。

カレンダーの時間範囲(Datetime型)

当日特化型の予定表を作成してみました。日を跨ぐデータは入力不可にしてあります。

f:id:tanaka0:20210916124104p:plain     f:id:tanaka0:20210916124032p:plain

f:id:tanaka0:20210916124051p:plain     f:id:tanaka0:20210916131433p:plain

 

Datetime型の入力フォーム。スマホと開発画面。

f:id:tanaka0:20210916131518p:plain   f:id:tanaka0:20210916132712p:plain

 

データシートはこんな感じ。

f:id:tanaka0:20210916125905p:plain

 

日付はDateTime型を指定。開始日か終了日どちらかのカラムを編集します。

f:id:tanaka0:20210916130356p:plain

 

Data Validity部分に入力条件を入れました。同じ日付しか許可しません。

f:id:tanaka0:20210916130940p:plain

 


 

■ 日付と時間の範囲を期待通りに表示したい

Date型の日付範囲表示について終了日付に+1すると期待通りに表示される、ということをしていたのですが、Datetime型でそのまま実装すると正しく動かなかったので新しい対策を考えました。バーチャルカラムを作成して以下の数式を入力、終了日と終了時間に指定!

=if(time([終了日])="000:00:00",[終了日]+"023:59:59",[終了日])

よくよく考えると終了日の時間が0:00:00の時だけに問題がある模様!その時だけ対策をすればよい!終了日のデフォルト時間を"023:59:59"にしてしまうのもアリかも!

(期待通り期待通りと書いていますが私の偏見です。)

 

以上。

カレンダーの日付範囲(Date型)

■ 現象の確認

カレンダーの日付範囲について気になる点を現象の確認から。データシートはこんな感じのものを用意。日付は全てDate型。

f:id:tanaka0:20210915131459p:plain

 

何も考えず作成すると出来上がるのがコレ。全部、日付範囲が1日足らんです・・・

f:id:tanaka0:20210915131858p:plain

 

カレンダービューは秒刻みのタイムスケジュールも組めるので、内部的にDate型をDatetime型に変換してるのではないか?そうすると9/12~9/14は9/12 0:00:00~9/14 0:00:00になり、図に書いてみると確かにこの通りになる。だけど当日範囲だけは正しく表示されてる・・・ちょい矛盾。

 


 

■ 対策

これはDate型だけを使っている場合の対策です。見た目が1日足りなければ1日足してやればよい。バーチャルカラム作成、内容は終了日+1だけ。この部分は編集時に表示しても意味が無いのでShowはOFF。

f:id:tanaka0:20210915135442p:plain

 

終了範囲を上記で作成したバーチャルカラムに置き換える。作業は以上。

f:id:tanaka0:20210915135457p:plain

 

当日の範囲も(何故か)大丈夫そう。とりあえず矛盾なし。

f:id:tanaka0:20210915132922p:plain

※ 9/12~9/14をDatetime型で試してみたところ、終了日の指定を9/14 0:00:00にすると9/13までの範囲になり、9/14 0:00:01にすると9/14までの範囲になりました。ちょっとでも次の日に食い込んでいればよい模様。

 


 

■ 補足

DayとWeekを表示した時のこの部分。Date型が指定されれば使われず、Datetime型が指定されれば使われる模様。Datetime型でも日を跨いでいるデータの場合は使われない模様。当日の時間範囲指定の場合だけ使われる模様。

f:id:tanaka0:20210915141448p:plain

 

以上。

カレンダービューと色

せっかくなのでカレンダーに手を出してみた。何も考えてなかったのでDatetime型ではなくDate型で作ってしまいました。開発環境のカレンダービューだと見づらかったのでスマホ画面を使ってます。

f:id:tanaka0:20210912161446p:plain     f:id:tanaka0:20210912163850p:plain

 

各カラー帯を選択するとDetail画面に遷移する。ビュー名の整合性が取れていませんが気にしない。細かいインタフェースは実行環境によって異なる模様。

f:id:tanaka0:20210912161516p:plain     f:id:tanaka0:20210912161626p:plain

 

月表示だと表示数限界時に「+2 more」とか省略される模様。分からんけど環境の縦サイズによる?タブレットとかではたくさん見れるのでは?週表示では全部見れた。

f:id:tanaka0:20210912161646p:plain     f:id:tanaka0:20210912161637p:plain

 

いちおう私の開発環境のビューも載せておきます。見づらいというかアレですね。

f:id:tanaka0:20210912180059p:plain     f:id:tanaka0:20210912180346p:plain

f:id:tanaka0:20210912182752p:plain

 

注意点

Datetime型を使っていればこういうことは起きないと思いますが、テストデータではDate型で9/16~9/18を指定して、2021/09/16 0:00:00~2021/09/18 0:00:00に変換されてます。カラー帯が18日まで伸びていません。しかしこれは矛盾ではないし当然の結果です。よく考えて実装していきましょう。

 


 

■ やったこと

スプレッドシートにカラム「カラー」を右端に追加。エラーが出まくるのでAppSheet側でテーブル再構成を実行。データ側でシステム対応外のカラーを指定するとホワイト?何も指定しないとデフォルト(ブルー?)になる模様。あと開始日<終了日である必要がある模様。カレンダーに表示されませんでした。

f:id:tanaka0:20210912170339p:plain

 

ビューを作成。

f:id:tanaka0:20210912181019p:plain

 

ちょいスクロールしてView Optionsの各設定項目にカラムを設定。作業終了。

f:id:tanaka0:20210912181059p:plain


カスタマイズはカラーくらいですが、デフォルトで問題ないです。

f:id:tanaka0:20210912182233p:plain

 

表示するカラーの順番変えられます。各列左端のクリリンを上下にドラッグしましょう。

f:id:tanaka0:20210912184047p:plain

 

この部分は謎です。

f:id:tanaka0:20210912193740p:plain

 


 

■ カレンダーカテゴリに使える色(2021年9月12日)
カレンダーのカテゴリに使える色は、デフォルトで出てくるGreen、Yellow、Orange、Red、Purple、Blue、White、Blackだけだと思います。「Add」とか出てたので「Gray」とか軽い気持ちで指定してみたらエラーになりましたゴメンナサイもうしません。

f:id:tanaka0:20210912162553p:plain

 

UX>Brandで用意されているこの色もカレンダーカテゴリには使えない模様。

f:id:tanaka0:20210912162944p:plain

Primary colorの+Custom、Moreに左上からRed、Orange、Light green、Forest green、Teal、Medium blue、Navy blue、Purple、Magenta、Almondがあったので全部試してみましたが、デフォルトの8個とかぶっている3個以外は全滅でした。でもカレンダーカテゴリは8種類もあれば十分です。

以上。

日付のMM/DD表示2

見た目スッキリ!「2021/」の5文字を2列分省略できたのは大きいです。左がスッキリ、右は何もしてないヤツです。

f:id:tanaka0:20210910180013p:plain     f:id:tanaka0:20210910180025p:plain

 

両方とも参照テーブルが同じです。

f:id:tanaka0:20210910180033p:plain

 

バーチャルカラムを使った表示特化版。=text([開始日],"mm/dd")でも構いません。「9/10」「09/10」のデータ型はTextです。Date型にしてみると空表示になります。

f:id:tanaka0:20210911085120p:plain

 

編集用の構成。ほとんどデフォルトです。

f:id:tanaka0:20210911085059p:plain

 

更にスライスにするとカラムの並び替えができるので、それをビューにすると見せ方が広がりますね!やはり編集をするならちゃんとしたユニークキーが必要かと。スプレッドシートの左端にユニークキーカラムを追加してテーブルの再構成を行い、INITIAL VALUEに=UNIQUEID()を入れて、、、、やり始めたらキリがないので終了。

以上。

Detail画面を表示させない

Appsheetで色々試していると、Action実行時にデータの変更がない場合に更新処理をやってないように見えたので試してみました。

 

Behavior>ActionsでNew Action+を選択。開始日に開始日を入れるだけのActionを作成。

f:id:tanaka0:20210910172043p:plain

 

該当ViewのBehaviorで、行選択時のActionを**auto**から作成したActionに変更。Detail画面に遷移する処理が、Action実行に置き換わります。

f:id:tanaka0:20210910172111p:plain

 

図の緑で囲ってあるあたりを連打。開始日に開始日を入れる不毛な処理が連打分行われるはずですが、データ更新が行われているようには見えません...Appsheet側ではじいているのでしょうか?分かりませんが。

ということでタイトル回収です。Detail画面が表示されないようになりました。草。

 

以上。

日付のMM/DD表示1

バーチャルカラム作る。数式入れる。
=TEXT([日付カラム名], "MM/DD")
これだけ!!!!


注意点
データ型のDateとTextを混同しない!「2021/09/10」はDateで「9/10」はText。先述のバーチャルカラムはText型じゃないとダメ。念のためDate型にしてみたところ空表示になりました。

以上。

一部の行を編集不可にする

編集不可の行って必要だと思うんです。やってみたら出来たので記録。

あくまで一例です。スプレッドシートでこんな感じに編集可否のカラムを追加。

f:id:tanaka0:20210909101811p:plain

 

追加した列がAppsheet側で認識されていません。Regenerate Strucatrureを押すとテーブルが再認識されます。確認が出ます。Sure?

f:id:tanaka0:20210909102815p:plain

 

認識されました!列を入れ替えた時も同様の対応です。

この後、画面上で表示する必要は特にないので設定ShowをOFFにしました。

f:id:tanaka0:20210909103919p:plain

 

Behavior>Actions>Show system actionsを選択。

f:id:tanaka0:20210909144555p:plain

 

似たような項目がたくさんあります。一覧のEdit>Behavior>Only if condition is trueに数式を入れます。ここが実行可否を決める部分だと思います。

=if([edit],true,false)

f:id:tanaka0:20210909150654p:plain

 

Editアイコンが消えました!編集できません!

f:id:tanaka0:20210909151222p:plain     f:id:tanaka0:20210909151231p:plain

 

加算アクションも消しましょう。数式は同じもので構いません。

f:id:tanaka0:20210909151858p:plain

 

消えました。

f:id:tanaka0:20210909152118p:plain

 

アクションの一括実行時、変更不可の行を混ぜるとメニューが表示されません。

f:id:tanaka0:20210909153027p:plain     f:id:tanaka0:20210909153117p:plain

 

以上。