どうもこんばんは、みかんです。

！！！！とつぜんですがたいせつなおしらせ！！！！

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1

??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・

！！！！おしらせはおわりです！！！！！

今回は「分割レイアウトで遊んでみる」という題で書いてみます。
下記ステップでやっていきます。

• 1 下準備
• 2 動きの確認
• 3 スクリプトで操作
• 4 思いつきで遊んでみる

1 下準備

分割レイアウトがバリバリ使われているサンプルがどれか思い出せないので、専用のアプリを作って試します。
Black Applicationで行きます。

中央に、おもむろに分割レイアウトを配置してみます。縦と横がありますが、今回は横にしました。

また、右左を区別しやすいように片方のレイアウトのStyle VariantをDarkに変更します。

2 動きの確認

Previewして動きを見てみます。

ユーザーの好きな位置で可視範囲を制御できるので、とても便利そうですね。

3 スクリプトで操作

App Makerのウィジェットでドラッグしながら動かせるUIは大分限られるので、この時点でもありあまる可能性を感じるところですが、なんとこの仕切り棒は、スクリプトで位置を変えることができます！！

スクリプトで位置を変えることができます！！！
大事なことなので(略

App Makerのウィジェットはスクリプトから柔軟に参照できるのですが、基本的にサイズ系にはアクセスできません。
なのでスクリプトでUIをあれこれ動かすのは結構苦手だったりします。
サイズを細かく定義したスタイルをスクリプトで切り替えたり、DOMに直接アクセスしたりと、方法が無いわけでは無いですが、とにかく手軽ではありません。

しかしこのウィジェットは、この簡便さで変更可能です！

//今回配置した分割レイアウトの名前が「Split」
widget.root.descendants.Split.splitPosition = 100;

プロパティにもバッチリsplitPositionがあります。

なんか作ってみましょう！

4 思いつきで遊んでみる

というわけで、できたのがこちらです。

クリエイティブさの欠片もない内容ですが、動的なUIを作れる感は伝わったんじゃないかと思います。
作り方は至って単純で、それぞれ配置したボタンを押した時にsplitPositionを変えているだけです。

//「目を背ける」ボタンのonClick
widget.root.descendants.Split.splitPosition = 0;

//「実態を暴く」ボタンのonClick
widget.root.descendants.Split.splitPosition = 300;

これだけじゃちょっとつまらないかなと思って、ちょっと余計な細工もしてあります。
上のPreviewで、いつもはドラッグで動かせる仕切り棒を、動かせないようにしています。
動かせないようにするプロパティは無かったので、強引にやってみました。

//SplitウィジェットのonAttachに記述
var splitElement = widget.getElement();
var nodes = splitElement.childNodes;
for (var i = 0 ; i < nodes.length ; i++){
  var node = nodes.item(i);
  if (node.innerHTML.indexOf("app-NewPage-Split-Splitter") != -1) {
    var cNode = node.cloneNode();
    splitElement.appendChild(cNode);
    splitElement.removeChild(node);
  }  
}

DOMをいじっています。App Makerとは関係のないハックです。
最初は仕切り棒の各種イベントリスナーを適宜削除すれば良いかなと思って始めたのですが、全然うまく行かず挫折。。
試しに複製してみたらリスナーがついてこなかったので、これ幸いと複製ノードを追加、元のノードを削除で上手く行きました。
デベロッパーツールでクラス名確認して無理やりヒットさせてたり、そもそもやりたいことに対してこのやり方で良いのかとかまったく自信がありません。。
今後そのまま動くかもわからないので、ご利用は計画的にお願いします。

それと、仕切り棒にマウスオーバーした時にカーソルがいかにも動かせそうなやつに変わってしまうので、CSSで設定も変更しています。

Page styleに記述

.app-HorizontalSplit-Splitter {
    cursor: default;
}

実用的なパターンは思いついたら書こうと思います。個人的にあまり注目していないレイアウトウィジェットでしたが、プログラマブルに触れるところがあるとわかるとテンションがあがってしまいますね。

以上です。良いApp Makerライフを!