読者です 読者をやめる 読者になる 読者になる

Two hats

Design + technologies

大量のダミー画像を生成するイラレ用スクリプト

久々にイラストレーター用のスクリプトを作成しました。今回のスクリプトはダミー画像を大量に作るというスクリプトです。 大規模なシステムのソフトウェアのリニューアルの案件などで稀に、刷新される新しいデザインに沿った画像ができあがるまで既存の画像…

Javascript:Unicodeでエンコードされた2バイト文字を元に戻す

主にExtendScriptでしか活用できないと思いますが、JSで日本語などの2バイト文字をtoSource()するとUnicodeに変換されてしまいます。例えば「あ」は「\u3042」と表示されます。 このままでは使いにく場面があるので、元の2バイト文字に戻すコードを作成し…

素早く画像書き出しできるillustrator向けスクリプト

イラレから素早く画像を書き出すことができるスクリプトです。PNG / GIF /JPEG /SVG対応。iOSやAndroid用の画像も同時に作成できます!

illustratorでUIデザイン:スクリプトでExtension風パネルを実装

2015/9/5追記 いくつか認識違いがあったので記事を書きなおしました。 はじめに断っておきますが完全に時代遅れな内容の記事です。CCから実装できるようになったHTML5を使って作るExtensionが主流になると思いますので、これからやろうという方はそちらを調…

illustratorでUIデザイン:切り出しスクリプトの設定変更

illustratorでは画像を書き出すときにいくつかのオプションがあります。例えば、背景色を指定したり、インデックスカラーの使用色を指定できたりします。 画像切り出しスクリプトでは操作をシンプルにするためと、スクリプト上では設定した内容を覚えておく…

illustratorでUIデザイン:画像切り出しスクリプト

Illustrator上で選択したオブジェクトをPNG(24bit)/ PNG(8bit)/ GIF/ SVGの形式で一括書出しするスクリプトです。

illustratorでUIデザイン:positionとleft, topの違い

座標をいじるようなスクリプトを作成していると、たまに予測不可能な挙動をするときがあります。今まではあまり深く探ってきませんでしたが、良い機会なので調べてみることにしました。 オブジェクトの座標を示す2種類のプロパティ ある程度スクリプトをい…

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

スクリプトを作成しているとの座標の計算が上手くいかなかったりすることが多く困ってしまうことがままあります。良い機会なので座標系について調べてみました。 ドキュメント基準/アートボード基準の座標システムの違い スクリプト上で設定できる座標系には…

TesselでState パターン

※2014/1/4…以前のコードはオーバーライドでprototypeを全て書き換えてしまう書き方になっていたので、部分的にオーバーライドできるような書き方に修正しました。 前回の記事でも書きましたがJavascriptでプログラムできる「Tessel」でちょこちょこと遊んで…

TesselのWifi設定

突然ですが、最近Javascriptでプログラムできるマイコン「Tessel」で遊んでいます。 このマイコンのメリットは Javascriptで開発できる node.jsをサポートしていて、使い方もnode.jsライク。 Wifiモジュール標準搭載 Tesselに直接指すだけで使える様々なパー…

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

illustratorでUIデザインをし始めると便利だなーと思うところが幾つかあります。 その内、個人的に押しなのは「アートボード」です。 1つのファイルで複数の画面を作成・管理することができ、一覧性が高いのでアプリの全体を俯瞰しつつ1つ1つの画面を作成…

illustratorでUIデザイン:属性抽出スクリプト

文字のサイズ・色やパスの線の太さ・塗りの色などを抽出してくれるスクリプトを作成しました。getProperties.zipダウンロード 基本的な使い方 要素を選択してスクリプトを実行するだけです。

illustratorでUIデザイン:スクリプトの注意点

illustratorのスクリプトについて調べていくうちに意外と引っかかりそうな困った点をいくつか見つけました。 四角形・楕円形の関数の引数はXY座標の順ではない これ最初に引っかかりました。 PathItemsにはrectangleとellipseという四角形・楕円形を描くメソ…

illustratorでUIデザイン:スクリプトことはじめ

Adobeの製品は自分で書いたプログラムを動かすことができ、バッチのように自動で大量のタスクをこなしたりすることができます。このような機能は「スクリプト」と「プラグイン」と呼ばれ、それぞれの役割は似ていても作り方や使い方が違ってきます。 今回は…

illustratorでUIデザイン:ボタン量産スクリプト

またillustrator用のスクリプトを作成してみました。タイトルそのまま、ボタンを沢山作るスクリプトです。 と言っても、ボタンの見た目まで作ってくれるのではなく、四角形のパスでボタンのワイヤーフレームを作ってくれるだけです。 UIデザインを行っている…

illustratorでUIデザイン:便利なショートカット

今回は便利なショートカット集です。 SPACE:手のひらツール V:選択ツール A:ダイレクト選択ツール Ctrl+U:スマートガイドON/OFF Ctrl+Shift+O:文字のアウトライン Ctrl + Shift + C:文字の中央揃え Ctrl + Shift + L:文字の左揃え Ctrl + Shift + R:…

llustratorでUIデザイン:縦横サイズ書出しスクリプト

縦横サイズを書出してくれるスクリプトを作成しました。縦横サイズ.jsxインストール、実行は前回の記事を参考にしてください。オブジェクトを選択してスクリプトを実行すると、縦横サイズの寸法線を描いてくれます。

llustratorでUIデザイン:相対座標書出しスクリプト

寸法っていちいち手作業で測って指示書作るのって一苦労なんですよね。Web系は指示書を自動化するツールがでてきているみたいですが、組み込み系のソフトウェアは使っている言語が違うのでそうもいきません。そこで汎用的に使えるillustratorで寸法指示する…

ちょこっと暗記 -英単語学習用のChrome拡張-

JavaScriptの勉強がてら、Chrome 拡張のアプリを作りました。 ダウンロードはこちらからどうぞ。

Mongooseでauto incrementの実装

最近、MongooseというMongoDB用のODM(Object Document Mappar)を使っているのですが、連番のID(0, 1, 2, 3…)のようにauto incrementさせることができるフィールドがデフォルトでは用意されていないみたい(そもそもMongoDBにその機能がない)なので、実装…

Backbone.ioBindのSyncで起こっていること(Colleciton編)

ここまでにBackbone.jsのModelとCollection、またBackbone.ioBindのModelについてSyncがどのような値を通信しているか見て来ました。千秋楽としてBackbone.ioBindのCollectionのSyncについて見ていきたいと思います。感想から言うと、「標準Syncのルールと違…

Backbone.jsのSyncで起こっていること(Colleciton編)

前々回、ModelのSyncについて調べましたが、今回はCollectionです。Syncを伴うCollection特有のメソッドとしてはfetchとcreateでしょうか。ざっくりと説明すると下記です。・Collection.fetch():url属性に設定されているアドレスへGETメソッドで通信する。…

Backbone.ioBindのSyncで起こっていること(Model編)

以前の投稿では、Backbone標準のSyncについて調べてみましたが、今回は通信をAjaxではなくSocket.ioで行えるライブラリ、Backbone.ioBindについて使い方を調べてみました。Backbone.iobind(Github)結論から言うと、標準のSyncとほぼ同じ感じで使うことができ…

Backbone.jsのSyncで起こっていること(Model編)

Backbone.jsで一度は使ってみたいお便利機能Sync。クライアントサイドのモデル・コレクションをサーバーと簡単に同期させることができるそうですが、リファレンス読んだだけでは実際にサーバーとのやりとりがどうなっているのか分からなかったので、自分なり…

Backboneのお勉強サイト〜その2

以前のポストではBackbone.jsの導入に適したサイトを掲載しましたが、もうちょっと足を深くつっこんだ記事を見つけました。 Backbone.jsにおけるModel-View-Presenterアーキテクチャパターン Backboneを使ってMVCならぬMVPパターンでの実装の記事です。独特…

Backbone.jsのお勉強サイト

Backbone.jsのお勉強用のサイトまとめ。ドットインストール/ Backbone.js入門ビデオのお手本通りに行うと、どんなふうに動くのか概要がつかめます。Qiita/ Backbone.js入門dotinstallをひと通り行なって感触を掴んでから、こちらのサイトで解説を読むとすん…

JavaScriptのブロックスコープ

まず、下記のコードを見て下さい。変数iの値は何になると思うでしょうか。 for(var i=0;i<10;i++){ //...};console.log(i); //iは宣言されていないのでエラー? Javaや他の言語に慣れている方はエラー(iは宣言されていない変数)と思うでしょうが、JavaScri…

MongoDB事始め

node.jsで使用するDBのために、最近話題になっているMongoDBをまずは勉強してみることにしました。自分用にインストール時のメモを残します。MongoDBとはNoSQLの流れを組むJavaScriptの言語で操作できるDBの仕組みです。まず下記のサイトの「Try it out」で…

node.js事始め

そろそろサーバーサイドも勉強しはじめないとなーということで、最近話題になっているnode.jsに取り掛かってみることにしました。サーバーサイドの言語は色々ありますが、今まで勉強してきたJavaScriptで書けるという安易な発想で node.jsを選びました。まず…

配列でのfor文・for-in文

最近までfor-in文はfor文の代わりに使えると思っていました。ですが、どうやらそれぞれ用途が違うようです。簡潔に書くと、for文:配列に使用for-in文:オブジェクトに使用 ということに集約されそうです。for-in文はオブジェクト(連想配列)のプロパティを…

JavaScriptのグローバル変数

JavaScriptで「グローバル変数を使わないほうが良い」と言っている記事を見かけたりするので、調べてみました。グローバル変数を使用しない方がよい理由とは、グローバル変数はウェブページやJavaScriptアプリ内にあるすべてのコードで共有できてしまう点に…

JavaScriptパターン

最近、Chrome拡張でアプリを作ろうと思い、Javascriptを勉強していますが、どうも素人くさい作り方になってしまうのが悩みです。普段、仕事ではプログラムする機会はほとんど無く、チームワーク的な実践経験もないので、JavaScriptの定石的な作り方を知る機…