ブログ

【FileMaker】デバイスの向きに応じたレイアウトの切替と最初に開くレイアウトの指定+ウィンドウのセンタリング

iPadなどのデバイスの向きに応じてレイアウトを自動的に切り替えつつ、最初に開くレイアウトを指定のレイアウトにし、ウィンドウを画面の中央に配置する方法の忘備録です。
管理人はFileMakerをiPadとPC(Windows)で使用しています。レイアウト描画領域はiPadの横画面サイズを基準で作成していますので、iPadでは元々画面サイズ一杯に表示されます。ウィンドウのセンタリング設定は主にPCで開く時に機能する感じです。

管理人のFileMakerレベルについて

ズバリ初心者です。
ファイルメーカーを触りだしてかれこれ5年以上になりますが、未だに趣味の域を出ず、業務としてAPPを作成した経験はありません。顧客管理や作業の進捗管理など、管理人自身が使うために必要と感じたものを作ってるレベル。いずれは業務レベルでの制作ができる様になればいいなと考えてます。


※本記事はFileMaker Pro19での解説となります。

2021/03/08
誤った解説を修正し、説明不足部分を補填しました。

ウィンドウを上下左右中央に配置する

まずはセンタリングの方法です。
以下のスクリプトでレイアウト描画領域に自動調整されたウィンドウを、画面の上下中央位置に配置できます。

スクリプト

  • 新規ウィンドウ[ ]
    ※この項目自体任意です。無くても構いません。
    ※ウィンドウ名:任意
    ※その他の項目:空白 ※詳細なスタイルは任意
  • レイアウトの切り替え[ ]
    ※レイアウト:任意
    ※その他項目:任意
  • ウインドウの調整[収まるようにサイズ変更]
  • ウインドウの移動/サイズ変更[ ]
    ※高さ:Get( ウインドウ高さ )
    ※横幅:Get( ウインドウ幅 )
    ※上端からの距離: Int( Get( ウインドウデスクトップ高さ ) /2 ) - Int( Get( ウインドウ高さ ) /2 )
    ※左端からの距離: Int( Get( ウインドウデスクトップ幅 ) /2 ) - Int( Get( ウインドウ幅 ) /2 )

デバイス(iPad)の向きに応じてレイアウトを自動変更

iPad横用レイアウトとPC用レイアウトは共通で使用。iPad横用(PC用)のレイアウト分だけ縦用レイアウトを用意して切り替えます。

2021/03/08追記
以下の重要な説明が抜けておりました。

横用レイアウトと縦用レイアウトのレイアウト名は同じにした上で、それぞれレイアウト名の末尾に「横」か「縦」を判定させるためのワードの追加が必要です。

例:レイアウト名「顧客一覧」の場合、横用レイアウト名は「顧客一覧横」縦用は「顧客一覧縦」

これは、下記「各レイアウトに設定するスクリプト」の 5行目「変数を設定」の末尾で指定したワードになります。

各レイアウトに設定するスクリプト

スクリプト

  • ユーザーによる強制終了を許可[ オフ ]
  • エラー処理[ オン ]
  • ウインドウの固定
  • If [Get( システムプラットフォーム ) = 3]
      変数を設定[$レアウト名; 値: Left( Get( レイアウト名 ) ; Length( Get( レイアウト名 ) ) - 1 ) & If( Get( ウインドウ方向 ) > 0 ; "縦" ; "横" )]
      レイアウト切り替え[$レイアウト名; アニメーション:なし]
    End If

上記を自動切り替えしたい横画面用レイアウトと縦画面用レイアウトのレイアウト設定→スクリプトトリガ→OnLayoutEnterOnLayoutSizeChangeに指定します。

上記設定で画面の向きに応じたレイアウトの自動切り替えが可能になります。

センタリング+最初に開くレイアウト指定

iPad横画面用レイアウトをPCで開いた時に、ウンィンドウサイズをレイアウト描画領域に自動サイズ調整し、画面の中央にセンタリングします。

スクリプト

  • ユーザーによる強制終了を許可[ オフ ]
  • エラー処理[ オン ]
  • レイアウト切り替え[スクリプトを設定する横画面用レイアウト名; アニメーション:なし]
  • ウィンドウ調整[ 収まるようにサイズ変更 ]
  • ツールバーの表示切り替え[ 表示する ]
    ※この項目は任意です。
  • ウインドウの移動/サイズ変更[ 現在のウィンドウ; ]
    ※高さ:Get( ウインドウ高さ )
    ※横幅:Get( ウインドウ幅 )
    ※上端からの距離: Int( Get( ウインドウデスクトップ高さ ) /2 ) - Int( Get( ウインドウ高さ ) /2 )
    ※左端からの距離: Int( Get( ウインドウデスクトップ幅 ) /2 ) - Int( Get( ウインドウ幅 ) /2 )
  • スクリプト実行[ 指定:一覧から; 「上記、全レイアウト共通のスクリプト」; 引数: ]

上記スクリプトを、APPのファイルオプション→スクリプトトリガ→OnFirstWindowOpenに設定します。

まとめ

以上の設定で、PCで開いた時はレイアウトの描画領域に合わせて自動的にウィンドウサイズが変更され、PC画面の上下左右の真ん中に配置されます。またiPadで開いた時は、横画面用レイアウトと縦画面用レイアウトが画面の向きに応じて、自動的に切り替わります。

この記事を書いた人管理人

SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の指導を行っております。

SAKURAGRAPHICAができること

最近の記事 おすすめ記事
PAGE TOP