kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- 特定のViewのときのみアクションボタンを表示させたい人
- PCとモバイルで表示させるアクションボタンを変更させたい人
今回の記事内容は、context()関数についてです。
いきなりですが、この関数は知らなくてもアプリ開発をするうえで困ることは特にありません。
でも、アプリ開発をしているとここのボタンを必要なときにだけ表示させたいといった願望が出てくることがあります。
アプリのUIを高めるためTIPSとして、本記事を読んでいただければと思います(^^)
それでは勉強していきましょう！
View typeとView nameを直接指定する
今回の検証に用いるView typeは上図の4つを使用します。
アプリプレビュー画面は下図になります。
deck Viewのみdeck1とdeck2のView nameで2つ用意しました。
context()関数の検証は、上図に表示されている＋ボタン（Add）で検証したいと思います(^^)
View typeで制限をかけたい場合
見えているViewでアクションボタンの制御をかけたい場合は、以下の形が基本です。
context(view type)=”〇〇”（〇〇にはtableやdetailなどView typeを入力）
試しにSystem generatedのAddボタンに関数を入力してみました。
or(context(viewtype)=calendar,context(viewtype)=deck,context(viewtype)=gallery)
関数の意味としては、View typeがcalendar,deck,galleryのViewの時にアクションボタンを表示させるです。
本当にそうなっているか確認してみましょう(^^)
Addボタンが表示されています。
deck1 Viewには、Addボタンが表示されています。
deck2 Viewにも、Addボタンが表示されています
Addボタンが表示されていません。
Addボタンが表示されています。
入力した関数は、calendar、deck、galleryの3つのView typeの時にAddボタンを表示させるだったので、その条件を満たす結果が得られています(^^)
context(view type)=”〇〇”（〇〇にはtableやdetailなどView typeを入力）
この基本形をぜひ覚えておきましょう！
View nameで直接制限をかける場合
先ほどの設定よりも狭義的な設定で、以下の形が基本です。
context(view)=”〇〇”（〇〇にはView nameを入力）
試しにSystem generatedのAddボタンに関数を入力してみました。
context(view)=deck1
関数の意味としては、View nameがdeck1の時にアクションボタンを表示させるです。
Deck Viewはdeck1とdeck2の2つがありますが、どうなっているか確認してみましょう(^^)
deck1 ViewにはAddボタンが表示されています。
ちなみにView nameは、プレビュー画面の下にあるView:〇〇の〇〇です。
deck2 ViewにはAddボタンが表示されていません。
設定した関数の挙動が確認されました(^^)
ある特定のViewのみアクションボタンを表示させたい場合は、
context(view)=”〇〇”（〇〇にはView nameを入力）
これを覚えておいてください！
PCとモバイルで表示させるボタンに制限をかける
最後にPCとモバイル、端末別でアクションボタンの表示を変更させる方法をまとめます。
この設定は説明出来るものではなく、覚えるしかないです・・
設定としては以下の関数を入力します。
- PCだけ表示させたい場合：context(host)<>device
- モバイルだけ表示させたい場合：context(host)=device
この関数をYes/No expressionに入力すると、操作する端末によって入力や表示項目を切り替えることが可能です。
まとめ
以上、context()関数についての記事でした。
UIを高める方法として知っておいて損はない関数かな？というのが私の見解です。
ただし！私が知らないだけで実はものすごく有用な関数だったらごめんなさい・・(^^)
面白い設定方法とか分かったら記事に追記していきます！
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)