Adobe XDで、エリア内テキスト要素に日本語のダミーテキストをちょうどよさそうな長さで挿入してくれるプラグインを作りました

2018年11月14日 12:22

はじめに

少し前になりますが、Adobe XDの2018年10月アップデートでサードパーティ製のプラグインが使えるようになりました。このプラグインはHTMLやJavaScriptで開発できるので、ウェブのフロントエンドの知識があれば、お手軽にプラグイン開発ができます。
今回はこのプラグイン開発をしてみたのでご紹介したいと思います。

簡単なプラグインであれば、2つのファイルを作成するだけで開発することができます。

- main.js にプラグインの機能を実装
- manifest.json にメタ情報を記載

そして、XDでは開発用のコンソールも用意されているので、コードを書き保存して実行し、XDの画面と開発用コンソールで確認を繰り返していく感じです。拡張APIで利用できる機能や詳しい開発の仕方などは、公式のブログで紹介されているのでこちらをご覧ください。

今回はエリア内テキスト要素に日本語のダミーテキストをちょうどよさそうな長さで挿入してくるれる君プラグインを開発してみました。
XDでプロトタイプを作っていてダミーのテキストを挿入する場合は、自分で手入力するか、ウェブなどで検索してダミーのテキストをコピペをしていました。これがなかなか面倒な作業で、リピートグリッドで簡単に要素を増やせるのはよいものの、あとからそれらしいダミーテキストをいれようとすると骨がおれます。
英語を挿入してくれるプラグインは存在するのですが、日本語がないので自分で作ってみることにしました。

開発したプラグインでできること

今回開発したプラグインでできることは次の通りです。テキストエリアの大きさに合わせて文字数を算出できるところは工夫できたかなと思います。

- 選択されている複数の要素にまとめてテキストを挿入する
- エリア内テキスト以外の要素が含まれていても、エリア内テキストだけに挿入できる
- エリア内テキストの大きさを算出し、指定されているフォントの大きさから良さげな文字数を算出
- もともと指定されてあったフォントのスタイルなどはそのまま

開発

ソースはこんな感じになりました。普段JavaScriptをあまり書かないので、少し時間がかかりましたが比較的簡単に開発できたと思います。

const {Text} = require("scenegraph");
const {alert} = require("./lib/dialogs.js");

function insertText(selection) {

  // 挿入するテキストを用意
  const insertText = "あめんぼ赤いな あいうえお 浮き雲（も）に 小えびも泳いでる  柿の木栗の木 かきくけ>こ きつつきコツコツ 枯れケヤキ  ささげに巣をかけ さしすせそ その魚（うお） 浅瀬で刺しました  立ちましょ
ラッパで たちつてと トテトテ立ったと 飛び立った  なめくじノロノロ なにぬねの 納戸（なんど）にぬめって >何ねばる  鳩ぽっぽホロホロ はひふへほ 日向のお部屋にゃ 笛を吹く  まいまいねじ巻き まみむめも 梅の実落ち
ても 見もしまい  焼き栗 ゆで栗 やいゆえよ やまたに火のつく 宵の家  雷鳥 寒かろ らりるれろ れんげが咲い>たら るりの鳥  わいわい わっしょい わいうえを 植木屋井戸がえ お祭りだ"

  selection.items.forEach(item => {

    // 要素がエリア内テキスト以外のものだった場合はalertを表示
    if (item.areaBox === null || item.text === undefined) {
      alert('エリア内テキスト以外の要素が含まれています', 'エリア内テキスト以外のオブジェクトにはテキス
トを挿入することはできません。', 'エリア内テキストへの挿入が完了しました。');
      return;
    }

    // エリア内テキストの面積と文字の面積を求める
    const width = item.areaBox.width;
    const height = item.areaBox.height;
    const areaSize = width * height;
    const fontAreaSize = item.styleRanges[0].fontSize ** 2;

    // エリア内に文字が何文字入るか求める
    let length = areaSize / fontAreaSize;

    // もし挿入テキストが足りない場合はテキストを増やし挿入
    if (length > insertText.length ) {
      const magnification = Math.ceil(length / insertText.length);
      item.text = insertText.repeat(magnification);
    } else {

      // テキストが足りた場合は、挿入テキストを必要な長さに調整し挿入
      length = Math.floor(length);
      item.text = insertText.substr(0,length);
    }
  });
}

module.exports = {
  commands: {
    mainCommand: insertText
  }
};

プラグインを利用してみる

こんな感じに動作します。manifest.jsonではショートカットの設定などもできるのでいつでも簡単に実行できます。ここではわかりやすくするために上部メニューから実行しています。

まとめと感想

不便だったダミーテキストの挿入が簡単にできるようになりました！プラグインの開発も比較的簡単にでき、もっとプラグインを開発してみたいなと感じました。
便利だったXDがユーザーなどの力でさらに便利になる。とてもよいことだと思います。

今回本当は、ダミーテキストを他サービスのAPIなどからランダムで自動生成できるような機能や、インタラクティブに挿入テキストの設定が変更できるような機能も実装したかったのですが、いろいろな障害で実現できなかったのでゆっくりまったり開発していきたいと思います。あと、プラグインの公開もしてみたいですね！

以上、Adobe XDのプラグイン開発でした！

この記事が気に入ったらサポートをしてみませんか？