フレックスレイアウトとは何か（7）InDesignで9（ナイン）スライスを作る
あと2回で締めたいと思います。
フレックスレイアウトで最初に思いついたのが、「自動組版の代わりに使える？」でした。
こういったコマ組は自動組版やデータ結合で組むのが通常なんですが、欠点として、コマを1つ外すような修正が入っても、自動で後のコマを移動してはくれません。手作業で移動するか、データベースに戻って修正し再度組み直す必要があります。
そこをフレックスレイアウトにすれば、後のコマが勝手に移動してくれる！ と思ったんですが、残念ながらフレックスレイアウトはフレームの連結ができないので、そのページ内の移動しかしてくれないんですね。そうするとメリットは薄いなあということです。それならアンカー付きオブジェクトを並べる方がまだまし（落ちる危険性と隣り合わせですが）。なので断念しました。
次の考えたのが旅行の行程表（旅程）。図形が複数行にわたって続くので、実現できたら画期的だと思ったんですが、フレックスレイアウトは折り返しがあると「間隔を埋める」が無効になるので、「駅は固定で駅間を伸縮させ、かつ複数行にわたって続く」ことを実現できないと判明。結果的にこの連載の最初のサンプルのみに落ち着いたという経緯があります。
なかなか使えるサンプルが見つからない……
そんな中、前々回の中カッコをついに発見。やっと多くの人に使ってもらえる例になりました。
で、今回はその応用、9スライスを作ってみよう！ の巻きです。
元の形はこれです。
四隅はレイヤー上で「ペーストされたグラフィック」とありますがAffinityで作ったグラフィックです。1つ作ってあとはコピーして回転したもの。別にIllustratorで作ってもよいです。InDesignで作るのはさすがに厳しい(笑)
四辺は直線と色なし長方形をグループ化したもの。伸縮します。やってみて分かったのですが、伸縮させたいオブジェクトは回転をかけると伸縮してくれません。ですから四隅と同じようにコピーして回転を掛けることができません。ひとつひとつ作っていかなければなりません。（だからなるべく単純なのが良いです）
中央はテキストフレームです。縦にも横にも伸びます。
これらをフレックスアイテムにするのですが、「全選択で一発」とはいかないのが悲しいところ。伸縮させたいフレックスアイテムがある場合は折り返しができないのです。そこで4回に分けてフレックスレイアウトを作成していくことになります。
まずは上段3つを選択してフレックスレイアウトを作成します。
次に中段の3つ。こんな具合に順番が入れ替わることがよくあります。どの順で並ぶのか、まだ原理を解明していないので余計なことは考えず素直に入れ替えします。
最後は下段。多分レイヤーの重なり順が影響しているんだろうけど、結果を予測してレイヤーパネルで入れ替える方が面倒なので、結果を見て入れ替えます。
このように3つのフレックスレイアウトができました。
これらを選択してフレックスレイアウトを作成します。またもや残念な結果に。下からやった方がよかったのかしら。
フレックスレイアウトの入れ子状態になっているので、並び順を入れ替えるのはレイヤーパネルの方がいいです。ただ、レイヤーパネルでの移動は、移動先を誤ると他のフレックスレイアウトの子になってしまうので、そこに注意です。
あとは、伸縮させたいフレックスアイテムを選択して伸縮方向を「固定」から「間隔を埋める」に変更していくだけです。
フレックスコンテナの設定は、指定に合うように勝手に変更されます。
中央のテキストフレームは縦横ともに「間隔を埋める」ですね。
個々のフレックスアイテムの設定を変更したら、大外のフレックスコンテナを少し伸ばしてみます。
隙間ができていますね。これを修正していきます。なお、修正内容はそれぞれの環境で異なる（初期値が違うため）ので、この通りにならないと思います。設定箇所は数か所なので、試行錯誤してください。
私の場合、右に空白があるので、内側のフレックスコンテナの幅を「間隔を埋める」に変更します。
上下方向は、フレックスコンテナ同士の間に空白があるので、中央のフレックスコンテナの高さを「間隔を埋める」に変更します。
最後にテキストフレームの縦横共に「間隔を埋める」に変更します。これは先に変更したはずなんだけど戻ってしまっているので、手順がよくなかったのかもしれません。ただ、どの順が正解なのかわかっていないので……
隙間が全部埋まったらOKのはずです。伸縮して確認してください。なんてこったい！
上辺の横幅を「間隔を埋める」にして今度こそ完成！
なかなかいうことをきいてくれないですが、だからこそ出来上がったときの感動があります。