みなさんこんにちは、秋葉です。梅雨もあけていよいよ本格的な夏ですね。さてさて、先月末の6/30、私は東京に仕事で出張していまして、たまたま重なったアップルストア銀座で行われたイベント「DTP Booster 028」に出演しました。夏の終わりか秋口にリリースされる予定の書籍「10倍ラクするIllustrator仕事術」の出版記念でした。
アップルストア銀座には二度目の登壇になるんですが、DTP系のイベントでは、東京はAdobeさんのイベントで一度出させていただいたっきり久しぶりだったと思います。この日、アップルストア銀座3Fシアター会場は超満員！ 立ち見（座り見）の方も出たくらいでした、参加された方ありがとうございました。
その時の写真
< http://akibahideki.com/blog/assets_c/2011/07/IMG_1944-4.html
>
このイベントで、CSV形式に保存された各社員の名前、肩書き、メール、画像のファイル名をスクリプトが読み取り、解析してIllustratorに全社員分の名刺を作成／配置するということを想定したデモをさせていただきました、書籍にも執筆しているトピックです。ぜひ本を買ってくださいね！
次に応用編のデモも行いました。
アップルストア銀座には二度目の登壇になるんですが、DTP系のイベントでは、東京はAdobeさんのイベントで一度出させていただいたっきり久しぶりだったと思います。この日、アップルストア銀座3Fシアター会場は超満員！ 立ち見（座り見）の方も出たくらいでした、参加された方ありがとうございました。
その時の写真
< http://akibahideki.com/blog/assets_c/2011/07/IMG_1944-4.html
>
このイベントで、CSV形式に保存された各社員の名前、肩書き、メール、画像のファイル名をスクリプトが読み取り、解析してIllustratorに全社員分の名刺を作成／配置するということを想定したデモをさせていただきました、書籍にも執筆しているトピックです。ぜひ本を買ってくださいね！
次に応用編のデモも行いました。
これはちょっと面白そうだと、イベントの前日になって思いついたネタを一晩で作りました。Twitterにあるハッシュタグ付きでつぶやかれたツイートの、アイコン画像と本文を、Illustratorで名刺にするという実験です。あらかじめ、Facebookで友達に声をかけて協力してもらったりしましたが、会場にいた方にもこの実験に参加してもらいました。
結果は見事成功！ ただ、プロセスを言いますと、ローカル内のCSVファイルを読み込むことはできるんですが、外部ドメインやリモートサーバ上のファイル（http://で始まる）を読んだりするのは、色々挑戦してみたんですが、どうしてもエラーが起きて取れません。
なのでこうしました。
1）ローカルサーバを立てる（今回はMacなのでMAMP）
2）ローカルサーバ内でPHPを起動、Twitterで特定のハッシュタグでつぶやかれたタイムラインを取得
3）PHPによりローカル内にTwitterアイコンをダウンロード保存させる
4）PHPによりローカル内にTwitterタイムライン内のデータをjsonファイルとして保存する
5）JavaScriptでjsonをパース、Illustratorに画像と本文を自動配置
これでいけました！
ひとつハマったのが、破損したアイコン画像へのリンクと拡張子。どうも画像の破損リンクの場合、pngの画像なのに、jpg拡張子をファイル名に付けてしまうと、Illustratorがエラーを吐き出して処理を中断します。
このため、PHP内部で行った対策。
1）画像サイズが存在しないと判断された場合、処理をスキップする
2）拡張子はimage_type_to_extension関数で調べて得た本来の拡張子を適用し、jsonにも反映させる（これをしないとIllustratorが受け付けないことがある）
さて、JavaScript側ですが、取得したアイコン画像はみんなサイズがバラバラです。これをそのままIllustratorに配置すると、大きさがバラバラでみっともないので、対策は主に二つあります。
・PHP側で画像の幅を指定して作り直し、保存する
・JavaScript側で、規定の横幅÷画像の幅で得た倍率によって画像を拡大縮小する、縦にはみ出た部分はクリッピングマスクする
で、後者を選びました。
そのソースがこんな感じです。
var imageFile = File(imagePath);
var imageObj = maskItem.placedItems.add(); // -----(1)
imageObj.file = imageFile; // -----(2)
var scales = 50/imageObj.width; // -----(3)
imageObj.resize(scales*100,scales*100); // -----(4)
上記のスクリプトでいうと、マスクアイテム（maskItem）内に取得した画像を配置します（1）
imageFileに代入された画像のパスを指定してロードします（2）
（3）は画像を50ptの横幅に統一させたいので、まずは50÷画像サイズで拡大縮小率が出ます。
resize()関数を使えば、拡大縮小ツールを使うのと同じです、ただし、100％が原寸として考えるので、100を掛けます。
これによって画像は全て同じ横幅にリサイズされて表示されます。
これだと、正方形なら縦も50ptになるはずなんですが、画像の縦のサイズもマチマチです。ここでは正方形のパスをマスクする側として使います。
マスクオブジェクトを最初に用意しておきます。マスクのgroupItems[0]で、グループ内の重ね順で一番上のグループ化されたオブジェクトを取得できます。その中ですでにクリッピングマスク処理された四角形を入れておき、この中に画像を配置してマスクさせるという方法です。
さて、セッション中ナマ実演だったので、うまくいくかドキドキでした。アップルストアの電波を借りたのですが、やっぱりちょっと遅くて、読み込みから処理まで時間がかかりましたが、何とか成功しました、下図はその結果です。
49人分のTwitter名刺をIllustratorで自動生成しました。もっと多かったんですが、なぜか最初につぶやいてくれたひと、入ってません、ゴメンナサイ！！あとPHPの制作は最終的にCarpalの宮澤さんにお願いしました、ありがとうございました！
ライブデモでできたTwitter名刺
< http://akibahideki.com/blog/assets_c/2011/07/applestore_demo-1.html
>
【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。