treasuring misc.

リクルートのメディアテクノロジーラボさんがやっているDESIGN SHOWCASEのトークセッションに行ってきました。

DESIGN SHOWCASE

内容は、参加するまでぜんぜんチェックしていなかったんですが（汗）、今回、AB-ROADが提供している海外ツアー旅行DBのAPIを使った作品、というお題で4組のデザイナーさんが作品を作っていて今月上旬に公開されていて、その発表会＆制作の裏側を語ります、というもの。
すべてFlashによる作品。どれも相当なパワーを割いて作られた力作。どれも（プログラマーではなく）デザイナーが考えたものならではのアイデアが詰まっていて、商業デザインを忘れて純粋にアートを追求した世界でした。そんな作品の開発裏話はどれも面白し。以下、紹介された作品たち。

■COLOR YOUR TRIP

独特のUIで原色を混ぜて「色」を作ると、その色にちなんだツアーが見つかる、というもの。作られうる「色」は全12種類（記憶ちがうかも）で、それぞれの色毎に検索キーワードを設定しているとのこと。赤系の色にキーワード「カルビ」を紐づけたら、検索結果が韓国旅行ばかりになった！なんて話がありました。

■YOU HAVE CHOICE

独特のUIで文字のようなものが流れて出てきて、おもむろにクリックするとなにかツアーが紹介される、というもの。この文字のようなものは、今回のために独自に作ったフォントで、しかも表示ディスプレイサイズに応じて2種類も制作したんだとか。デパートの紙袋をほうふつとさせるような、なんだかかわいいフォント。

■HACK THE EARTH

今回の中で一番イカれた（いい意味で）ように感じた作品。ツアー旅先候補の場所に応じて音色の違う音が奏でられて、フィーリングにあった音色のツアーを選んでね、というもの。この発想は自分にはできないわ。プレゼン中にちりばめられた小ネタ（制作が遅れた言い訳？）が楽しかったです。

■私の旅物語～旅日記ジェネレーター

「旅行に行ってきましたブログ」をランダムに作成する、というもの。最初に名前を入力するんだが行き先はまったくのランダム。仕組みはすごく単純なんだけど、入力フォームを表示させるまでの見せ方とか、結果の表示画面とか、なるほどなーと思わされました。つーか作成されるブログ文章が変にパワー掛けて何パターンも作られていたり、ムービーが実はやたら長くてスカイライナーで成田まで実際に往復する車内の映像をそのまま片道45分ずつまるごと収録していたり、こだわってるポイントが変にすごい。

最後の旅日記ジェネレータは結果生成にAPIが使われていてあまりAB-ROADが前面に出てこないが、そのほかの3つはどれもツアーDBを検索する行為を、それぞれまったく別の着眼点からデザインしなおしたもの。トークセッションの中でもみなさん言われていたが、取り組む人によってこんなに多様な作品がでてくることが楽しい、というのが会場から見ていても感じました。

前職のデザイン会社で定期的に、デザイン制作したものをみんなで持ち寄ってコンテストする会を開いていたのを思い出した。自分は外から見ているだけでしたが、この制作物のこういうところにこだわりがあって、こういう課題や苦労をどう解決してその結果こんな最終形になった、なんて話はどれも面白くてケーススタディにもなりますよね。こういう取り組みは自分も身近でできることからやっていきたいものです。

書きたいネタがたまっているんですがここんとこバタバタしていて、でも後回しにしていると時期を完全に逸してしまいそうなのでひとまず1ネタ。

先週、銀座で開催されていた中村勇吾のインタラクティブデザイン展へ行ってきました。自分が行ったのが最終日だったのでもう開催終了なのが残念なのですが、展示されていた作品のたぶん全部が前述のリンク先に整理されています。

展示されていた作品は、トーシロの自分があれこれ批評するのものアレですが、発想をまるっきり転換してみせたものを具現化されて見せつけられたり、小気味いいギミックや動きのなかにリアルな躍動感がにじみ出てきていたり、さすがyugop、というようなものばかり。見た目の動きに奪われてなかなか目立たないですが、実は動きの裏側にはやたらとプログラムコードが仕込まれていて、世界中のブログからクロールしてきたり、遠くにいる別ユーザーとブラウザ上で同期したり、webカメラの映像をリアルタイムにflashに取り込んでいたり、技術的にも高度なものばかり。単純にぼーっと見てるだけでも楽しさ満点。

以前雑誌でインタビュー記事を読んだんですが、中村氏は天才肌のように見えてずっと努力を積み上げ続けてきた方で、社会人になって最初のうちは別の仕事をしていたとか。そこから日本を代表するCreative Directorとして数々の活躍を重ねていることに、人生の先輩としてもリスペクトを感じます。

エンジニアの人たちには意外と知られてなかったりしますよね。こちらあたりにインタビュー記事がありますのでどうぞ。

• 中村 勇吾 : 第6回 Webクリエーション・アウォード　Web人発見！


• 第82回　ウェブデザイナー・中村勇吾（2008年4月1日放送） | NHK プロフェッショナル 仕事の流儀


• yugop.com

1月1日にヤフートップページがリニューアルされて2週間。webのなかでの反応をみていると、不思議なくらいこの件が話題になっていません。mixiがデザインリニューアルしたときはものすごい勢いで非難ごうごうだったのに比べると不気味なくらい。

時期が正月だったから？
かなり長い期間をかけて「こんなんに変わります」プレビューを公開していたから？
新しくなったデザインそのものがとても的を得たものだから？

どんなサイトでもデザインリニューアルを行うことはあると思いますが、スムーズに移行するための方法論として、この事例からなにが学べるでしょう？

関連リンク：
拒否反応が少ないYahoo! Japan新デザインと曙の終わり:坂本多聞のインサイドアウト - CNET Japan

redditって日本語版もあるんだ！というのを知ってちょっと触っていたら、「ページが見つかりません」の404ページがこんなんでてきた。

しかも、url適当に打ってみたら、いくつかバリエーションがある模様。こういうの大スキです。

http://ja.reddit.com/4
http://ja.reddit.com/40
http://ja.reddit.com/404
http://ja.reddit.com/a

このネタすでに書いてるブログあるかなー、とかるくぐぐって見つけたのがコチラ。reddit普段使ってないのでよく知らないのですが、デザインのセンスいいみたいです。

先週のニュースですが、

高品位日本語フォント「IPAフォント」の一般利用者向け無償配布を開始 - 報処理推進機構

独立行政法人 情報処理推進機構（略称：IPA、理事長：藤原　武平太）は、環境を問わない共通の日本語基盤として、誰でも無償で自由に利用できるフォント「IPAフォント（アイピーエー フォント）の一般利用者への配布を2007年10月1日より開始しました。

だ、そうです。

フォントのライセンスは意外とシバリがいろいろあって、サーバに積んだフォントを使って、画像化したりロゴ作ったりするとフォントのライセンス違反になるケースがちらほら。
某脳内メーカーのような○○ジェネレータのたぐいもきわどいですね。はてなセリフでMSゴシックとかのメジャーどころが使えないのもたぶん同じ理由のはず。

そういったケースで、安心して使っていいですよー、というのが今回のIPAフォントの趣旨でしょう。
フォントデザインとしてはいたって平凡な感じですが、ライセンスの心配をしなくていい、というのはありがたいですね。

よくまとまってるなーと思いました。

Liner Note - 無償で商用利用できて品質の高い日本語フォント一覧

先日初めてお会いして、仲良くなった（と一方的に思っている）エスカフラーチェのpurprinさんが、CSS Niteの資料を公開されてます。

[CSSNite in Nagoya 2007] 極力ハックしない CSS というテーマでお話しました - pur*log

えらい大ボリュームの力作。
ネタもさることながら、すごく分かりやすくまとまっていて、これはよいベンキョウ材料になりそうです。
ブラウザによるCSSのレンダリング差は、自分も経験的にしか分かってなかったりするので、コレのように整理されたものはとても有り難いです。あ、これジブンもハマったことある！的なネタが盛りだくさん。
　
事前に自慢していた緑色のレーザーポインタもフル活用したんでしょうか。ともあれ、おつかれさまでした。

こんにちは。プログラマーとデザイナーとのブリッジ的立ち位置、なんて揶揄される最近のヒラシマです。本人どちらもあまりよく分かっていません。＾＾；

さて。今回は、
大量の画像を、同じようにPhotoShopで加工する処理をラクにおこなう方法について、です。

以前、イラストレーターで処理するときに、JavaScriptでスクリプトを書いて処理する方法を紹介しましたが、今回はフォトショップでの処理を対象に行います。

PhotoShop CS2では「アクションの記録」「ドロップレット作成」がサポートされているので、これの機能を活用してみます。ちなみにWindows版でのお話。

「アクションの記録」は、PhotoShop上で行った一連の操作を自動で記録してくれる機能のことで、いちど記録しておくと、あとで何度でもおなじ操作をカンタンに呼び出すことができます。

「ドロップレット（droplet）」は、ドキュメントファイルをそのアイコンへドラッグ＆ドロップすると処理が実行されるアプリケーションの総称です。処理したいファイル群（複数可）をドラッグ＆ドロップすると、すべてのファイルに対して同じ処理を行うことができます。Windowsだとあまり見かける機会は少ないですが、DTP業界では日常的に使われているやり方ですね。直感的で分かりやすい利点があるかと思います。
PhotoShop CS2では、このドロップレットを作成する機能が備えられています。

■１．まずは処理したい一連の操作をアクションに記録。

適当なファイルを開いてor新規ドキュメント作成をして、ひととおりの編集操作が実行できる状態にします。

「アクション」ウインドウで、アクションの新規作成をすると、新しいアクションが「記録開始」状態になります。

　　↓「アクション」ウインドウで、アクションの新規作成。

　　↓アクション新規作成ウインドウ。そのまま「記録」。

　　↓するとあたらしいアクションが「記録状態」に。

ここから、繰り返し行いたい一連の操作を、順に行います。

操作をするたびに、「アクション」ウインドウに1行ずつ増えていきます。
今回は「色彩・彩度の変更」操作を登録してみました。

　　↓操作が記録されていきます。終えるときは「記録停止」。

記録したい操作がおわったら、「停止」ボタンで記録を終了します。
いちど記録した内容は、この状態で削除や順番入れ替えが可能です。必要に応じて記録内容が修正できます。

■２．ドロップレットを作成

メニューの「ファイル」→「自動処理」→「ドロップレットを作成」にて、ドロップレット作成ウインドウを開きます。

　　↓ドロップレット作成ウインドウ。

保存するドロップレットのファイル名を指定します。
アクションには、さきほど記録したアクション名を。
「サブフォルダをすべて含める」にすると、ドロップする対象が子フォルダや孫フォルダを含んでいてもOKになります。
「実行後」は、いくつか選択肢がありますが、「保存して閉じる」にすると、処理をしたあとに各ファイルを上書き保存するようになります。

そして「OK」ボタンを押すと、このようなexeファイルが作られます。これがドロップレット本体になります。

■３．処理したいファイル群をドラッグ＆ドロップ！

さて、これでようやく準備が整いました。

初期ほど記録した一連の操作を行いたい対象ファイル（複数可、フォルダごとでも可）を、ドロップレットアイコンの上のドロップします。

　　↓処理したいファイル（群）を、ドロップレットのうえへドラッグ＆ドロップ！

すると、PhotoShop上でものすごい勢いで処理が実行されます。
処理したファイルは上書き保存されるので（上記の設定の場合）、あらかじめコピーをとっておくことを推奨。

今回はこの方法にて、150ファイルほどの処理が、2-3分で実行できました。

っとまあ、説明だけだとなんだかめんどくさそう感が満載ですが、やってみるとカンタンです。
大量画像処理の機会があれば、ぜひチャレンジしてみてくださいー。

ちょっと変わったフォントをwebで見つけて、気に入ってダウンロードして、パワーポイントのなかでふんだんに活用して、いざプレゼン本番のときに別の端末でppt開いたらレイアウト崩れまくりという件。

フォントは端末ごとのOSに依存しちゃうので、フォントが入っていないマシンでは表示できません。変わったフォントをどうしても使いたいときは、面倒ですがgifなどに画像化しましょう。

そんなジブンのさいきんのお気に入りは、こちらでgetできるモトヤシリーズです。

これってどのくらい知られていることなんでしょうか。ググってもあまり出てこない話なのでまとめを書いてみるテスト。

画像をあつかうグラフィックソフトとして、Adobeのイラストレーター（Illustrator）やフォトショップ（PhotoShop）が有名です。アドビのソフトの多くはスクリプティングに対応していて、ちょこっとプログラミングをかじったことのある人なら比較的簡単にイラストレーターやフォトショップを自動操縦することができます。

先日、縦横サイズがバラバラの画像（数100点）をすべて同じ大きさにリサイズする作業をやることになりました。手作業で「ファイル開く」「リサイズする」「別名保存する」をひたすら心を無にして手を動かしてもいいんですが、途中で気が狂ってしまいそうな予感がしたので、このリサイズ処理を自動で行うスクリプトを書いて処理させてみました。このときの話をベースにして書きます。

■Adobeソフトのスクリプティング基礎

◆OSプラットホームとスクリプト言語

AdobeソフトはWindows向けとMacintosh向けに提供されていますが、それぞれ利用できるスクリプティング言語が指定されています。

• VBScript （Windowsのみ）


• JavaScript （Windows、Macintosh両方）


• AppleScript （Macintoshのみ）

それぞれ言語ごとに、for文の書き方とかプロパティへのアクセスの仕方とかコメントアウトの仕方とかは異なります。が、共通のアプリケーションオブジェクトモデルが採用されています。ですので、例えばdocumentオブジェクトには複数のpageitemがあって、それぞれのpageitemには座標情報や線の色といったプロパティ群が用意されている、といったアプリケーション内のオブジェクト構造へ、どのスクリプティング言語からでも同じようにアクセス・操作することができます。

◆スクリプトの作成と起動方法

今回は、Illustrator向けのスクリプトを、JavaScriptで作成します。

作成するには、手元のテキストエディタで編集して、拡張子.jsで保存すればOKです。ほかになにも特別なものは要りません。

作成したスクリプトの実行するには、２通りの方法があります。

• イラストレーター内メニューの、ファイル＞スクリプト＞その他のスクリプト
  で、ファイル選択ダイアログが表示されるので、このjsファイルを指定する。


• Illustratorがインストールされているフォルダ内の「プリセット」＞「スクリプト」フォルダの中に配置する。
  するとイラストレーターのスクリプトメニューに、このスクリプトが表示されるようになります。
  （要イラストレーター再起動）

このへんの基礎的なことや、クラス構造の詳細については、インストールCDのなかにスクリプティングガイド資料pdfが入っていますので、そちらを見てください。あるいはサンプルスクリプトも各種用意されていますので、あたらしく何か作るときにとても参考になります。

■今回つくったスクリプト

実行するとフォルダを聞いてきます。 画像が入ったフォルダを指定すると、そのフォルダ内にあるファイルを1つずつ、新規ドキュメントをつくって中に貼り付けて、縦横比率を守ったままサイズを72ピクセル四方へリサイズして、gif形式で別名保存します。

というものです。
ソースはこんなかんじ。

var sourceFolder, files, fileType;

var gBaseSize = 72;    //リサイズ後のキャンパスの縦横サイズ


// 読み込みフォルダを選択

sourceFolder = Folder.selectDialog( 'フォルダを選択してください: ', '~' );

if ( sourceFolder != null ) {

  // フォルダ内のファイルフィルタ指定

  fileType = '*.*';

  files = new Array();

  files = sourceFolder.getFiles( fileType );

  

  if ( files.length > 0 ) {

    // gif書き出し設定

    var exportType = ExportType.GIF;

    var exportOptions = new ExportOptionsGIF();

    exportOptions.antiAliasing = true;        // アンチエイリアス＝On

    exportOptions.colorCount = 256;           // 256色モード

    exportOptions.interlaced = true;          // インタレース＝On

    exportOptions.transparency = true;        // 透明色使用

    exportOptions.artBoardClipping = true;    // アートボードサイズで保存

    

    for (var i = 0; i < files.length; i++ ) {    // フォルダ内のファイルごとにループ

      // ドキュメント新規作成

      var newDoc = app.documents.add(null, gBaseSize, gBaseSize);

      

      // 画像読み込み

      var obj = newDoc.groupItems.createFromFile(files[i]);

      

      // 移動＆リサイズ（縦横比を維持したまま、中央そろえにする）

      var oldWidth = obj.width;

      var oldHeight = obj.height;

      if(oldWidth > oldHeight) {    //横長の場合

        obj.width = gBaseSize;

        obj.height = (gBaseSize * (1.0 * oldHeight / oldWidth));

        obj.left = 0;

        obj.top = (gBaseSize - ((gBaseSize - obj.height) / 2));

      }

      else {                        //縦長の場合

        obj.height = gBaseSize;

        obj.width = (gBaseSize * (1.0 * oldWidth / oldHeight));

        obj.top = gBaseSize;

        obj.left = ((gBaseSize - obj.width) / 2);

      }

      // 出力ファイルパス＆命名（元のフォルダと同じ場所に別名保存）

      var exportPath = new File(files[i].path + "/resized_" + files[i].name);

      

      // GIF書き出し

      newDoc.exportFile(exportPath, exportType, exportOptions);

      

      // ファイル閉じる

      newDoc.close(SaveOptions.DONOTSAVECHANGES);

    }

  }

  alert('finish');

}

■こまかい注意点など

日本語をあつかうときは微妙に注意が必要な場合があります。

• このスクリプトはUTF-8で保存しましょう。他のエンコーディングだとコメント中の日本語箇所でエラーになったりします。


• 扱うファイルのフルパスのなかに日本語が含まれていると、不具合が起きることがあります。


• そのほか、今回は扱っていませんが、色とかフォントとか座標単位系とかの操作は若干クセがあったりします。慣れましょう。

気が向いたら続く、、かも。