TwitterのタイムラインをPHPとJSを使ってIllustratorに自動組版のデモ
Author: 秋葉秀樹 | Comments(0) | Trackback(0)
〜DTP Booster 028 @ アップルストア銀座に出演しました〜
もう少しかかるかもしれませんが、Illustratorの書籍を執筆中で、夏の終わりか秋口にリリースされる予定の「Illustrator 10倍ラクする仕事術」の出版記念イベントが東京のアップルストア銀座で開催されたので出演してきました。
アップルストア銀座には2度目の登壇になるんですが、DTP系のイベント出演で東京はAdobeさんのイベントで一度出させていただいたっきり久しぶりだったと思います。
この日、アップルストア銀座3Fシアター会場は超満員！
立ち見（座り見）の方も出たくらいでした、参加された方ありがとうございました。
このイベントで僕は、IllustratorをJavaScriptで自動化するというデモをさせていただきました。
もちろん、書籍にも執筆しているトピックです。
このサンプルは、CSV形式に保存された各社員の名前、肩書き、メール、画像のファイル名を、JavaScriptが読み取り、解析してIllustratorに全社員分の名刺を作成／配置するということを想定したデモです。
この内容は本に載りますのでここでは書きません、ぜひ本を買ってね！
ちょっと面白そうだと思い立って、前日になって考えたネタなのですが、
Twitterにあるハッシュタグ付きでつぶやかれたそのツイートのアイコン画像と本文をIllustratorで名刺にしちゃおうという実験をしようと思いました。
あらかじめFacebookで友達に声をかけて協力してもらったりしましたが、
会場にいた方にもこの実験に参加してもらいました。
結果は見事成功！
ただ、プロセスを言いますと、ローカル内のCSVファイルを読み込むことはできるんですが、
外部ドメインやリモートサーバ上のファイル（http://で始まる）を読んだりするのは色々挑戦してみたんですが、どうしてもエラーが起きて取れません。
なのでこうしました。
1. Mac内でローカルサーバを立てる（今回はMAMP）
2. ローカルサーバ内でPHPを起動、Twitterのタイムラインを取得
3. PHPによりローカル内にTwitterアイコンをダウンロード保存させる
4. PHPによりローカル内にTwitterタイムライン内のデータをjsonファイルとして保存する
5. JavaScriptでjsonをパース、Illustratorに画像と本文を自動配置
これでいけました！
ひとつハマったのが、アイコン画像の破損リンクと拡張子。
どうも間違ったり適当な拡張子をファイル名に付けてしまうと、Illustratorがエラーを吐き出して処理を中断します。
このため、PHP内部で行った対策。
1. 画像サイズが存在しないと判断された場合、処理をスキップする
2. 拡張子はimage_type_to_extension関数で調べて得た本来の拡張子を適用し、jsonにも反映させる
（これをしないとIllustratorが受け付けない事がある）
さて、JavaScript側ですが、アイコン画像はサイズがバラバラです、大きい方の画像を取得したので。
これをそのままIllustratorに配置するとみっともないので、対策は主に2つあります。
・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)
上記のスクリプトでいうと、マスクアイテム内に取得した画像を配置します（1）
imageFileに代入された画像のパスを指定してロードします（2）
(3)は画像を50ptの横幅に統一させたいので、まずは50÷画像サイズで拡大縮小率が出ます。
resize()関数を使えば、拡大縮小ツールを使うのと同じです、ただし、100%が原寸として考えるので、100を掛けます。
これによって画像は全て同じ横幅にリサイズされて表示されます。
さてこれだと、正方形なら縦も50ptになるはずなんですが、画像の縦横比もバラバラ。
ここでは正方形のパスをマスクする側として使います。
マスクオブジェクトを最初に用意しておきます。
マスクのgroupItems[0]で、グループ内の重ね順で一番上のグループ化されたオブジェクトを取得できます。
その中ですでにクリッピングマスク処理された四角形を入れておき、この中に画像を配置してマスクさせるという方法です。
さて、セッション中ナマ実演だったので、うまくいくかドキドキでした。
アップルストアの電波を借りたのですが、やっぱりちょっと遅くて、読み込みから処理まで時間がかかりましたが、
何とか成功しました、下図はその結果です。
49人分のTwitter名刺をIllustratorで自動生成しました。
もっと多かったんですが、なぜか最初につぶやいてくれたひと、入ってません、ゴメンナサイ！！
あとPHPの制作は最終的にCarpalの宮澤さんにお願いしました、ありがとう！
セッションで使ったスライドはこちらです。
セッション中で紹介しました、Illustrator用のJavaScriptリファレンスは
で見れます、英語ですが。。。
ライブデモでできたTwitter名刺 ▼
