Illustrator(イラレ)でアプリのプロトタイピングを手軽に行えるスクリプト
作った背景
1~2年前から様々なペーパープロトタイピングツールが出ている中、いくつかの不満点があったため作成。
まだまだ出来のよくないところもありますが一応動くので一度公開してみようかと思います。
既存のプロトタイピングツールの不満点
既存のプロトタイピングツールはよくできており、直感出来で使いやすいのですがいくつかの不満点を感じていました。
自分が感じていた不満点は以下になります。
※今はいろいろ改善されているかもしれません。最近全然触ってなくてわからない
・誰でも使える事に焦点を当てているため、グラフィックソフト(イラレとかね)との連携がイマイチ
・上記の理由からレイアウトに修正が入るたび、リンクの貼り直しなどがメンドクサイ
・新しいツールまた覚えるのメンドクサイ
主に上記のような理由+スクリプトの勉強がてらプロトタイピングようのスクリプトを作ろうと思いました。
ただ現在のプロトタイピングツールはほんとに高機能なため、そういった部分では全く太刀打ちができません。
あくまでサッと確認するときに便利なスクリプトかなと思います。
このスクリプトでできること
あくまで簡易確認ツールになるので、主にできることといえばイラレのオブジェクトにリンクを貼って、他のページに遷移するといった感じです。
実際に出力されるファイルはhtmlで、それをローカルのwebサーバーに上げて確認する形になります。
自分のプログラミング能力だとこれが限界。
とりあえず以下から使い方の説明を順をおってしていこうと思います。
実際のスクリプト実行例は以下になります。
イラレで画面を作成
以下の様な感じでアートボードを分割して各ページを作成していきます。

そして今回作成しているスクリプトを利用すると、以下の様な形でページが生成されます。
↓↓↓↓↓↓↓↓↓↓
生成されたページ
上記を実行するスクリプトファイルのzip
↓↓↓↓↓↓↓↓↓↓
page_export.zip
※使用は自己責任でお願いします
使い方
1.新規ドキュメントを作成する
まずイラレの新規ドキュメントを作成して下さい。
このスクリプトはイラレのアートボード1つを1ページとみなします。

新規作成でこれから作るアプリやウェブサイトのサイズを入力し、だいたい必要になりそうなページ数分アートボード数を入力して下さい。
完了後任意のディレクトリに保存して下さい。
※ちょっと多めに作っておくほうがオススメ
※イラレの仕様上アートボードは100までしか作成できません
2.設定ファイルを入力する
スクリプトの都合上いろいろな情報を記載する必要があります。
zipファイルを開封後、その中にconfig.jsxというファイルがあるのでテキストエディタで開きます。
以下のようなスクリプトが記載されているので、指定通りに入力していって上書き保存して下さい。
|
var Config = { "ROOT_DIR":"C:/Users/User/Desktop", // 処理したいaiファイルが入っているパス "CAPTURE_NAME":"image", // 変更なし大丈夫 "JSON_FILE_NAME":"data.json", // 変更なし大丈夫 "FIXED_ITEM_DIR_NAME":"fixed_parts", // 変更なし大丈夫 "ARTBOARD_COL_NUM":10, // アートボードの列の数 "ARTBOARD_ROW_NUM":10, // アートボードの行の数 "ARTBOARD_WIDTH":320, // アートボードの横幅 "ARTBOARD_HEIGHT":920, // アートボードの縦幅 "ARTBOARD_MARGIN_RIGHT":100, // アートボード同士の右側のマージンサイズ "ARTBOARD_MARGIN_BOTTOM":100, // アートボード同士の下側のマージンサイズ "TAP_HIGHLIGHT_COLOR":"rgba(0,0,0,2)" // リンクカラー } |
リンクカラーはrgbaで設定できます。アルファの部分を0にすると色無しで表示されます。
※ここの数値が性格に入力されていないとアウトプットされたページのリンク位置などがずれてしまうので正確に入力して下さい。
3.アートボードに名前をつける
次にスクリプト上でアートボードを判別するためにアートボードに名前を付ける必要があります。
アートボード名の確認は上部メニューの
ウィンドウ>アートボード
からアートボードのパレットを出すことで確認できます。
デフォルトの名前はアートボード 1とかになっているかと。
アートボードの名前はzipファイルの中に格納してあるadd_page_numbering.jsxを実行することで自動的に変更できます。

スクリプトの実行の仕方は、先ほど作成したイラレのドキュメントを開き、その開いたドキュメントがアクティブな状態で上部メニューの
ファイル>スクリプト>その他のスクリプト
からadd_page_numbering.jsxを選択して実行して下さい。
アートボード名がa-1、a-2のような表記になりアートボードの左上に小さくa-1などテキストで表記されれば成功です。
4.ページのデザインを作る
ここはもう自由に、いつもどおり作成して下さい。
特に制限はありません。
画像のリンクや、効果などもどんどん使ってもらって構いません。
5.リンクを貼る
あらかたページのデザインが固まってきたらリンクを貼っていきます。
リンクの貼り方はまずリンクを張りたいオブジェクトを選択します。(テキストでも画像でもシェイプでもなんでもいいです)

選択後、レイヤーウィンドウから選択しているオブジェクトの名前を変更します。
オブジェクト数が多く選択しているオブジェクトが見つけにくい場合は虫眼鏡のアイコンをクリックすると一気に移動することができます。
名前を以下のように変更するとリンクを貼ることができます。
$link=a-2

$link=はリンクを張るときの決まり文句のようなものなのであまり気にせず書いて下さい。
その後に続くa-2は移動したいページ名になります。a-2とかけばa-2ページに移動します。
そのような感じでリンクを貼っていって下さい。
6.ページを書き出す
あらかたリンクを貼り終えたらhtmlページを出力します。

出力用のpage_export.jsxというファイルがあるのでそれを
ファイル>スクリプト>その他のスクリプト
から実行して下さい。
実行したイラレのドキュメントと同じ階層にページのhtmlが出力されます。
※すべてのオブジェクトのロックを解除してください
※一つでもオブジェクトが乗っているアートボードのみページとして出力されます
7.確認する
後は任意のhtmlファイルを開いて遷移を確認します。スマホで確認したい場合などはローカルにXamppなどを用いてサーバーを立てて確認すると便利です。
Xamppの設定の仕方は調べればいくらでも出てくると思うのでそちらを参考に。
※簡単です
これで大まかな説明は終わりです。
まとめ
設定ファイルの入力やアートボードに名前をつける作業は一度してしまえば再度する必要がないので、
デザイン修正をしページを書き出して確認と高速に行うことが可能です。
一度リンクを張ったオブジェクトは移動してもその位置にリンクを貼り直す必要はありません。
そこらへんは既存のプロトタイピングツールよりは便利なポイントかなと思ってます。
まだまだ使い勝手もよいとはいえませんが、改善要望などあれば対応しようかなと思います。
とりあえずGUIでいろいろ入力できるようにはしたいと思ってます。
またプログラムへの指摘などあればどんどんいただけるとありがたいです。