Caede入門 - エラスティックとダイナミックレイアウト [SCSK株式会社]

エラスティックとダイナミックレイアウト

同じスマートフォンでも4.Xインチから5.Xインチまでさまざまな大きさのディスプレイが搭載されており、さらにタブレットまで含めてアプリケーションを対応しようとするとかなり大変です。

Caedeにはこれらの課題に対して、「エラスティック（伸長圧縮技術）」と「ダイナミックレイアウトシステム」を提供しており、さまざまなデバイスに対して１つのプロジェクトで開発できるようになっています。

エラスティックを使ったフィッティング

エラスティックとダイナミックレイアウト

Caedeには「エラスティック」と呼ばれる技術が使用できます。これはグラフィックコンテンツの幅や高さに対して通常は固定値の「18px」や「30cm」などのように距離を設定しますが、そうすると大きさの違うディスプレイを思ったデバイスでは小さく表示されてしまったり、崩れてしまったりします。そこで固定値の代わりに「make-elasticプロシージャ」というものをしてすることで画面または親のグラフィックのサイズに合わせて伸び縮みさせることができます。対象は「COM.CAEDE.CAEDESAMPLE」内の「tparent-detail.scurl」の「SParentDetailGraphicクラス」です。

{construct-super
   halign = "center",
   width = {make-elastic preferred-size = 640px},
   {DetailHeaderBlockGraphic},
   {ScrollBox
       hscroll? =false,
       {VBox
          halign = "center",
          width = {make-elastic preferred-size = 640px},
          以下省略

「sparent-detail.scurl」の「SParentDetailGraphic」クラス

VBoxのwidthにmake-elasticプロシージャが設定されています。これにより画面サイズに合わせて伸長圧縮されるようになります。make-elasticプロシージャを使用するとかなり細かい設定が可能です。たとえば伸長係数を設定することにより、以下のように１：２の比率で常に伸長圧縮するなどです。対象は「COM.CAEDE.CAEDESAMPLE」内の「tparent-top.scurl」の「TParentTopGraphicクラス」と「menu-block.scurl」の「MenuBlockGraphicクラス」です。

TParentTopGraphicクラスではVBoxにエラスティックが設定されていますが、stretchnessという伸長係数オプションが２と設定されています。

・・・
{MenuBlockGraphic},
{Rule width=1px,height = {make-origin-elastic}},
{VBox
   background ="#ffffff",
   width = {make-elastic stretchiness=2},
   {DetailHeaderBlockGraphic}, 以下省略

「tparent-top.scurl」の「TParentToplGraphicクラス」

逆にTParentTopGraphicクラスで管理されるMenuBlockGraphicクラスではstretchnessという伸長係数オプションが1と設定されています。

・・・
{constructor public {default}
   {construct-super
       name = "menu-block",
       halign = "center",
       width = {make-elastic stretchiness = 1},
       height = {make-elastic preferred-size = 1136px},
以下省略

「menu-block.scurl」のMenuBlockGraphicクラス

この伸長係数により伸長圧縮の比率が決定され、画面のように１：２の関係で常に表示されるようになります。Stretchnessオプション以外にもさまざまなオプションを用意しています。詳しくはCurlドキュメントから「エラスティック」や「make-elastic」プロシージャーを検索し、参照してください。

ダイナミックレイアウトシステムを使用したスマートフォン／タブレットの同時対応

ダイナミックレイアウトとは「 2．Caedeを使用した際のCurl言語の基本的な構文」で説明したようにスマートフォンからタブレットまでの複数のディスプレイサイズに対応したプログラムを実装する方法です。ダイナミックレイアウトを使用する場合は以下のように最初にスマートフォンの設計から開始します。

スマートフォンの1画面に表示される情報量／コンテンツを決定します。
画面遷移先の画面も同様に1画面に表示される情報量／コンテンツを決定します。
スマートフォン画面サイズ以上の場合にスマートフォンの画面情報をどのように1画面に表示するか決定します。
タブレットの画面設計が決定したら、スマートフォンの画面からブロック（Blockクラス）に分解します。
ブロックを管理するコントローラーとなる画面クラスを決定します。

またロジックについてはブロックのScreenクラスでもコントローラーとなる画面のScreenクラスでもどちらでも実装ができますが以下のように整理すると明確になります。

ブロック内にのみ影響し、ディスプレイサイズの変化に依存しないブロック内でのみ処理ができるものはブロックのScreenクラスにロジックを記述する。
たとえばブロックが表示または更新されたときの初期処理や、ボタンが押されたときのメッセージ出力、タップされたときにカメラを表示する、または画像を表示するなど
上記以外をコントローラーとなる画面のScreenクラスで記述する
たとえば、画面遷移時の初期処理や次の画面へのデータ引き渡しや、更新処理、またブロックで管理されているコントロールなどがディスプレイサイズに変化によって振る舞いが変わるときの処理など

本サンプルでは以下の図のような構造でブロックおよびコントローラーとなるクラスを分解しています。

詳しくは各ブロッククラスや画面クラスのGraphicクラス、Screenクラスを参照してみてください。