Adobe XDのテキストデータとリピートグリッド

2017年4月更新で一部挙動が変わったので、変更部分を反映しています。
2016年7月更新で一部挙動が変わったので、変更部分を反映しています。

Adobe XDには単純な改行区切りテキストファイルをリピートグリッドのデータソースにする機能がある。2016年6月時点での挙動のマトメと推察を紹介したい。

※この記事は、UIに興味はあるけれどデザインはどこかとおい気がしてというエンジニアさん向けにデザインとは関係のないAdobe XDの話を書いています。デザインビューを使う上では基本的に役に立ちません。

データソースにするとはどういうことか

自在に要素の繰り返しができるリピートグリッドでは、繰り返しになっている要素ごとのテキストを編集するのは数が増えるほど面倒な作業になる。その面倒な作業を、改行区切りの単純なテキストファイルをドラッグ・アンド・ドロップすることで省略できる。データ駆動型リピートグリッド…なんていうとカッコイイかもしれない。閑話休題。この機能によって、一つ一つ編集する面倒臭さを解消し、より現実に近いデータをデザインに取り込めるわけだ。リアルデータをデザインに持ち込むという取り組みの一つでもある。

他のデザインツールの機能との比較

Adobe/Macromedia系のデザインツールでは、Fireworksである時期提供されていたグラフィックウィザードや、Photoshop/Illustratorのデータ駆動型グラフィックというXMLファイルやJSONでデータを用意してテキストや画像を入れ替えられる機能が提供されていた。
Adobe XDのそれも、見た目上はそれに近い。しかし、Adobe XDは主に「試行を高速に行う」のためにシンプルな構造のデータで十分で、従来のAdobeのデザインツールは「完成品の量産を想定」して作られているために単一ファイルで複雑な構造を持てるデータを必要とする。なお、データ構造の観点でみると、Sketchに６月に実装された新しいシンボルはFireworksのスマートライブラリに近く、そのプラグインとして振る舞うinVision/Craftのパネル(custom data/Googleスプレッドシート/web)からのデータ持ち込み機能はAdobe XDより更にプロトタイピングによった機能ではあると考えられる。

##データはテキストオブジェクトに紐付いている

リピートグリッド以外にはさほど有効ではないせいかヘルプではリピートグリッドの機能として紹介されているが、実際にはデータのヘッドはテキストに紐付いている。それを説明するために2つの例を示す。

• リピートグリッドを解除した時も、データがテキストに結びついている状態は変わらない。(リピートグリッドを解除したエレメントを再度リピートグリッドのソースにすると、解除時のデータをインスタンスが表示することになるのでわかる） リピートグリッド解除でデータソースもリセットされる様になりました
• リピートグリッドを作る前にテキストとデータをひも付けても同じ結果が得られる。
• リピートグリッド化した後に中の要素をグループ化するとデータが飛ぶ 2017年4月更新から、グループ化やグループ化解除によるデータ破棄はできなくなりました。

リピートグリッドは複数のテキストを含むことができるし、それぞれに一つの、あるいは別のテキストファイルをドラッグ＆ドロップできるのだから、リピートグリッドがデータの保持から表示順まですべて担うのは効率がよくないのだろう。

リピートグリッドの役割

リピートグリッドは自身のルールに従って、テキストがデータソース中の何番目のデータを使うかのインデックス管理をしている。インデックスは左上が1(プログラマ的には0からか)となり右に行くほど大きくなる。右端まで行き着くと次の行に進む。1列のリピートグリッドでは序数は一番上が1で下に行くほど大きくなる。

カード型レイアウトやカレンダーのような配置を想定してのことだと思われる。UserVoiceで、右から左に流れる文化圏のことも考慮してほしいといった意見は上がっている。
テキストオブジェクトが既に表示序数を持っている場合その要素の序数を上書きせず、その次のインスタンスを2として序数を増加させる。上書きされないが序数は独立して増加するので、オリジナルオブジェクトは一種の特異点となる。

リピートグリッドとオリジナルソース

リピートグリッドがオブジェクト複製するのは左上の要素であり、テキストファイルのドラッグをどのインスタンスのテキストオブジェクトに向かっても同じ結果が得られる。データソースが保存されるのはデータグリッドもしくは左上の要素のように思える。

紐付けられたデータソースは参照である

テキストファイルで与えられたデータ数よりリピートグリッドが増やしたインスタンスが多い場合、データは再度初めから表示される。1234512345と言った具合だ。さらに、一度データソースと紐付けられたテキストを変更してもオリジナルのオブジェクトが所持してるデータソースが編集される。見た目はテキストオブジェクトのデータが変わったように見えるが、実際テキストの値そのものは変わらずオリジナルのテキストオブジェクトのリストが更新され、編集前と同様にリピートグリッドから与えられたインデックスに従った値が表示される。そのため二回目に登場した値はやはり編集後のものが表示される。リピートグリッドによって作られるインスタンスの表示はあくまで自分に与えられたインデックスとオリジナルオブジェクトのデータソースの2つで決定される。

オリジナルソースであるテキストデータへのリンクは保持しない

少なくとも、テキストファイルの中身を編集しても、XD上の値は変化しない。オリジナルオブジェクトに複製が保存されると考えて良い・

データソースにできないファイル

番外編と言える情報であるが、拡張子なしのようなOSがテキストファイルとして認識しないファイルはデータソースにすることはできない。

将来的に

このデータ駆動型リピートグリッドは、アイデアが初めて紹介の際は、テキストファイルをドラッグするものだけではなかった。

• ビルトインサンプル挿入パネル
• ローカルファイルシステム(今回の話題。実装済み)
• Google Sheets
• Web

提供された機能を使っていると、一番最初に提供されるにふさわしいのがテキストファイルだったと思う。単純でユーザが慣れるのに時間がかからず、その割に組み合わせによる応用性が高い。(応用性が高いのはリピートグリッドの自由度が高いため) そろそろ慣れてきたので他の機能も仕様が固まってどんどん投入されることを期待したい。ビルトインサンプル挿入パネルはもし表示するサンプルを自作(と検索)できるなら期待できる。

以上、見事なまでにデザインに関係ない話でした。こちらは裏版なので、役に立つテキストデータとデータグリッドの話はUXMILKさんでご覧ください！そちらの記事も書かせていただいてます。