カテゴリー別アーカイブ: Illustrator

Illustrator(イラレ)でアプリのプロトタイピングを手軽に行えるスクリプト

Illustrator(イラレ)でアプリのプロトタイピングを手軽に行えるスクリプト

作った背景

1~2年前から様々なペーパープロトタイピングツールが出ている中、いくつかの不満点があったため作成。
まだまだ出来のよくないところもありますが一応動くので一度公開してみようかと思います。

既存のプロトタイピングツールの不満点

既存のプロトタイピングツールはよくできており、直感出来で使いやすいのですがいくつかの不満点を感じていました。

自分が感じていた不満点は以下になります。
※今はいろいろ改善されているかもしれません。最近全然触ってなくてわからない

・誰でも使える事に焦点を当てているため、グラフィックソフト(イラレとかね)との連携がイマイチ

・上記の理由からレイアウトに修正が入るたび、リンクの貼り直しなどがメンドクサイ

・新しいツールまた覚えるのメンドクサイ

主に上記のような理由+スクリプトの勉強がてらプロトタイピングようのスクリプトを作ろうと思いました。
ただ現在のプロトタイピングツールはほんとに高機能なため、そういった部分では全く太刀打ちができません。
あくまでサッと確認するときに便利なスクリプトかなと思います。

このスクリプトでできること

あくまで簡易確認ツールになるので、主にできることといえばイラレのオブジェクトにリンクを貼って、他のページに遷移するといった感じです。

実際に出力されるファイルはhtmlで、それをローカルのwebサーバーに上げて確認する形になります。

自分のプログラミング能力だとこれが限界。
とりあえず以下から使い方の説明を順をおってしていこうと思います。
実際のスクリプト実行例は以下になります。

イラレで画面を作成

以下の様な感じでアートボードを分割して各ページを作成していきます。
ai_desc1

そして今回作成しているスクリプトを利用すると、以下の様な形でページが生成されます。
↓↓↓↓↓↓↓↓↓↓
生成されたページ

上記を実行するスクリプトファイルのzip
↓↓↓↓↓↓↓↓↓↓
page_export.zip
※使用は自己責任でお願いします

使い方

1.新規ドキュメントを作成する

まずイラレの新規ドキュメントを作成して下さい。
このスクリプトはイラレのアートボード1つを1ページとみなします。

ai_desc2

新規作成でこれから作るアプリやウェブサイトのサイズを入力し、だいたい必要になりそうなページ数分アートボード数を入力して下さい。

完了後任意のディレクトリに保存して下さい。

※ちょっと多めに作っておくほうがオススメ
※イラレの仕様上アートボードは100までしか作成できません

2.設定ファイルを入力する

スクリプトの都合上いろいろな情報を記載する必要があります。
zipファイルを開封後、その中にconfig.jsxというファイルがあるのでテキストエディタで開きます。

以下のようなスクリプトが記載されているので、指定通りに入力していって上書き保存して下さい。

リンクカラーはrgbaで設定できます。アルファの部分を0にすると色無しで表示されます。
※ここの数値が性格に入力されていないとアウトプットされたページのリンク位置などがずれてしまうので正確に入力して下さい。

3.アートボードに名前をつける

次にスクリプト上でアートボードを判別するためにアートボードに名前を付ける必要があります。

アートボード名の確認は上部メニューの

ウィンドウ>アートボード

からアートボードのパレットを出すことで確認できます。
デフォルトの名前はアートボード 1とかになっているかと。

アートボードの名前はzipファイルの中に格納してあるadd_page_numbering.jsxを実行することで自動的に変更できます。

ai_desc3

スクリプトの実行の仕方は、先ほど作成したイラレのドキュメントを開き、その開いたドキュメントがアクティブな状態で上部メニューの

ファイル>スクリプト>その他のスクリプト

からadd_page_numbering.jsxを選択して実行して下さい。

アートボード名がa-1、a-2のような表記になりアートボードの左上に小さくa-1などテキストで表記されれば成功です。

4.ページのデザインを作る

ここはもう自由に、いつもどおり作成して下さい。
特に制限はありません。
画像のリンクや、効果などもどんどん使ってもらって構いません。

5.リンクを貼る

あらかたページのデザインが固まってきたらリンクを貼っていきます。
リンクの貼り方はまずリンクを張りたいオブジェクトを選択します。(テキストでも画像でもシェイプでもなんでもいいです)

ai_desc4

選択後、レイヤーウィンドウから選択しているオブジェクトの名前を変更します。

オブジェクト数が多く選択しているオブジェクトが見つけにくい場合は虫眼鏡のアイコンをクリックすると一気に移動することができます。

名前を以下のように変更するとリンクを貼ることができます。

$link=a-2

ai_desc5

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

6.ページを書き出す

あらかたリンクを貼り終えたらhtmlページを出力します。

ai_desc6

出力用のpage_export.jsxというファイルがあるのでそれを

ファイル>スクリプト>その他のスクリプト

から実行して下さい。

実行したイラレのドキュメントと同じ階層にページのhtmlが出力されます。
※すべてのオブジェクトのロックを解除してください
※一つでもオブジェクトが乗っているアートボードのみページとして出力されます

7.確認する

後は任意のhtmlファイルを開いて遷移を確認します。スマホで確認したい場合などはローカルにXamppなどを用いてサーバーを立てて確認すると便利です。

Xamppの設定の仕方は調べればいくらでも出てくると思うのでそちらを参考に。
※簡単です
これで大まかな説明は終わりです。

まとめ

設定ファイルの入力やアートボードに名前をつける作業は一度してしまえば再度する必要がないので、
デザイン修正をしページを書き出して確認と高速に行うことが可能です。

一度リンクを張ったオブジェクトは移動してもその位置にリンクを貼り直す必要はありません。
そこらへんは既存のプロトタイピングツールよりは便利なポイントかなと思ってます。

まだまだ使い勝手もよいとはいえませんが、改善要望などあれば対応しようかなと思います。
とりあえずGUIでいろいろ入力できるようにはしたいと思ってます。

またプログラムへの指摘などあればどんどんいただけるとありがたいです。

illustratorの指定したpageItemをpng24で書きだす

illustratorのオブジェクト(pageItem)を、そのオブジェクトのサイズでトリミングして、
書き出す関数を作ったのでメモ。
処理の流れとしては、指定のオブジェクトを新規に開いたドキュメントにコピーして、
そのドキュメントからPNG24に保存する感じ。

使用方法

第一引数には書き出したいオブジェクト(pageItem)を、第二引数にはファイルクラス( new File( ‘filePath’ ) )のインスタンスを渡す。

ソース

Illustratorでドキュメント内の画像をすべて置き換えるJavaScript

前に作った画像を置き換える関数を利用して、ドキュメント内のすべての画像を差し替えるJSを作成しました。
とりあえずなんとか動くはず・・・。

使用方法

まず、差し替え元と差し替え先の情報を持った連想配列を作成する(以下のソースではimgReplaceListというやつ)。で、keyには差し替え元の画像名を、valueには差し替え先の画像のパスを入れてあげます。

そしたらその配列をimgReplaceAll()という関数に渡してやればおkです。

ソース

Illustratorで画像を置き換えるJavaScript

別にスクリプトでやる必要がないのですが、画像の一括置き換えなど行いたいときにできないと困るので、関数化しておきたいと思います。
すごく単純な事だったのに、サンプルがなかなか見つからずかなり遠回りしました・・・。

使用方法

第一引数には置き換えたいPlacedItemを、第二引数には置き換えたい画像のFileオブジェクトを渡す。

ソース

Illustrator で指定したフォルダのAIファイルをPDF保存するJavaScript

イラレのバッチでもできるのですが、任意のフォルダにaiファイル以外が入っているときなど、バッチだとそれを省くことが出来ないので作成しました。
aiファイルのみを他のディレクトリに一旦移動してそこでバッチでもいいかと思ったのですが、そうすると画像のリンクが切れたり面倒だなーと。

使用方法

1.以下のJSをメモ帳かなにかに貼り付けて.jsxで保存。
2.そのファイルをIllustratorで実行
3.pdf化したいaiファイルが入っているディレクトリと、保存先のディレクトリを聞かれるので指定
(pdfの保存オプションはweb用に最適化している感じです)
以上

ソース