illustratorでUIデザイン：スクリプトでの座標系

スクリプトを作成しているとの座標の計算が上手くいかなかったりすることが多く困ってしまうことがままあります。良い機会なので座標系について調べてみました。

ドキュメント基準/アートボード基準の座標システムの違い

スクリプト上で設定できる座標系にはドキュメント基準/アートボード基準の座標系のどちらかを設定できます。下図のような3つのアートボードを作成し実験してみます。

DOCUMENTCOORDINATESYSTEM

座標システムをドキュメント基準にするもので、スクリプト上ではデフォルトはこの設定になっています。試しにオブジェクトの座標取得と原点近くに楕円を書くプログラムを実行してみます。3つ目のアートボードにあるオブジェクトを選択してから実行してください。

#target "illustrator"

app.coordinateSystem = CoordinateSystem.DOCUMENTCOORDINATESYSTEM;

$.writeln(app.selection[0].geometricBounds);
app.activeDocument.activeLayer.pathItems.ellipse(0,0,30,50); 

結果は次のようになりました。

TesselでState パターン

※2014/1/4…以前のコードはオーバーライドでprototypeを全て書き換えてしまう書き方になっていたので、部分的にオーバーライドできるような書き方に修正しました。

前回の記事でも書きましたがJavascriptでプログラムできる「Tessel」でちょこちょこと遊んでいます。

TesselはWifi標準搭載でモバイルバッテリーでも起動するので、スタンドアロンなガジェットをサクッと作るには調度良いマイコンかと思います。
実際に何かを作ることになったらセンサやボタンなどを複数取り付けることになり、状態変化の制御に四苦八苦しそうなのでステートパターンが使えないか試してみました。

結論：継承にnode.jsのinheritsを使ったら動いた。

TesselのWifi設定

突然ですが、最近Javascriptでプログラムできるマイコン「Tessel」で遊んでいます。

このマイコンのメリットは

• Javascriptで開発できる
• node.jsをサポートしていて、使い方もnode.jsライク。
• Wifiモジュール標準搭載
• Tesselに直接指すだけで使える様々なパーツ（センサやサーボなど）が用意されている

なのでWeb系の勉強しかしてこなかったけど、実は電子工作もやってみたい人にはうってつけのものかと思います。
TesselをWebサーバーにすることとかめっちゃ簡単に行えます。
スマホ用の外部バッテリーでも動作するので、Webを介したイノベーティブな何かを作るのに挑戦するのもグッと座敷が下がった気がします。
Technical Machine

100円ショップのモノだけでキレイな物撮り

この写真はスタジオや撮影ボックスなどを使用していません。
カメラ以外は100円ショップに売っているものだけを使って物撮りを行いました。

用意するもの

• カメラ（コンデジでも可）
• 三脚
• 障子紙（100円）
• 模造紙（100円）
• お絵描き用の画用紙（100円）

大手の100円ショップ（ダ○ソー）などで売っています。

illustratorでUIデザイン：画面遷移図作成スクリプト

illustratorでUIデザインをし始めると便利だなーと思うところが幾つかあります。
その内、個人的に押しなのは「アートボード」です。

1つのファイルで複数の画面を作成・管理することができ、一覧性が高いのでアプリの全体を俯瞰しつつ１つ１つの画面を作成していくことができます。
但し、単に画面が並べてあるだけなので画面遷移図のような並びにできたら便利だろうなと思いついてスクリプトを作成してみました。

画面遷移図.jsx

Githubにもアップしてみました。github.com

iOS8の写真アプリの新しい補正機能

何気ない夕食の写真を撮ってみました。味付けがちょうどよくペロリと食べてしまいました。我が家のヒット作の一つになったかも。

・・・今回は料理を自慢したかったのではなく、iOS8から搭載された写真アプリの新機能を紹介したいと思います。

USMのTVボードとNelson End Table

注文していたUSMのTVボードとNelson End Tableが届きました。

TVボードとコーヒーテーブルは大きさ・デザイン・形状などなかなか納得できるものが無く、結局購入が一番最後になってしまいました。