Forguncyをお楽しみの皆さん、ポップアップウィンドウは使っていますか？
私はポップアップウィンドウ大好きです。だってオシャレじゃないですか？ボタンを押したらポーンと小窓が開くあの感覚。
「ポップアップウィンドウの表示コマンド」はポーンと開くだけではなく、いろんな動きができるんです。公式マニュアルにも記載がありますが試さないのはもったいない！
抜粋してご紹介しますので、ポップアップウィンドウを活用しオシャレなアプリにしていきましょう。
このページでは以下のことがわかります！
- ポップアップウィンドウ表示コマンド、の応用
- ポップアップ表示モード「ドロワー」について
- ポップアップの開く方向の活用事例
このページの想定読者
- Forguncyをもっと使いこなしたい人
- UIに凝りたくなった人
- 作成したアプリの操作性を上げたい人
ポップアップウィンドウ表示コマンドって？
ポップアップウィンドウ表示コマンドは字のごとく、コマンド設定した箇所を操作したときポップアップでウィンドウを上げてくれるコマンドです。
以下の図ではアプリ内テンプレート「宅配コスト管理」をお借りしていますが、このテンプレート内では「配達依頼」ボタンにポップアップウィンドウ表示コマンドが設定されていますね。
ボタンを押したら小さなポップアップウィンドウが開く…これは設定したことがある方も多いと思います。ポップアップ表示モードはいくつかありますが、「ダイアログウィンドウ」や「タイトルバーなしのポップアップ」を使うことが多くはありませんか？
今回このページでオススメしたいのは「ドロワー」です。いざ行かんポップアップの沼へ…。
ドロワーについて
ドロワーについての理解はマニュアルを見るよりデバッグしてみるのが一番です、実行してみれば「あぁよくＷｅｂサイトで見るあれね」となるに違いありません。
せっかくなのでテンプレートを使ってドロワーで遊んでみましょう。
ビルダーで「Top」というページを見ると右上にちょうどいいハテナボタンがいます。ここのコマンドを見てみましょう。
見ると「ページ遷移」コマンドが設定されていて、遷移先には「HowToUse」が指定されています。これを…
こうじゃ！
「ページ遷移」コマンドから、「ポップアップウィンドウを表示」コマンドに変え、以下のように設定してみました。
ポップアップ表示モード：ドロワー
開く方向：右から左へ
右から左とは…？あとでのお楽しみです。
次に「HowToUse」ページを編集します。諸事情につき小さくしたいので、AJ列より右を削除しちゃいます。
もうひとつ、このページのマスターページ設定は「なし」にします。
さぁこれで準備OK！いざデバッグ。
Topページのハテナボタンを押すと…。
じゃん！
どうでしょうか、画面の右端から左にニョキっとポップアップが出てきたはずです。
この動き見たことありますよね、例えばWebアプリで右上に歯車ボタンがあって押下すると設定の画面が上がったり、左上のメニューボタンを押すとメニューバーが左側に出てきたり。ドロワーを使うとあの動きが実現できます！
コマンドを見るとわかりますが、開く方向は他にも「上から下へ」や「下から上へ」が指定できます。
操作メニュー等を展開するのに使えるテクニックだと思います。ぜひいろいろ試してみてくださいね！
この記事はいかがでしたか？内容を楽しんでいただけましたか？少しでもワクワクしたり、新しい発見があれば嬉しいです！わくわくした方は、ぜひわくわくボタンをクリックしてください。
【著者】
シャケちゃん
ノーコード大好き
複雑なコードは書けない書かないがモットー。
ノーコード縛りでありながらも、でもかわいく見せたいしオシャレにしたいしと工夫するのが好き。
好きなコマンドは1画面で見た目が工夫できる「行列のレイアウト設定」。
