《やっぱり時代はスマートフォンということみたい》
■明日もデザインで食べていこう！［23］
Opera Labs Camera and Pagesを使ってみました
秋葉秀樹
■クリエイター手抜きプロジェクト［292］Adobe Photoshop CS3/CS4/CS5編
テキストファイル内の文字を調整して配置し連番PSDで保存する
古籏一浩
■データ・デザインの地平［11］
設計者であるための、日々の心得
薬師寺 聖
--PR------------------------------------------------------------------
★吉田印刷所が電子書籍販売サイト「印刷の泉」をオープンしました
┃ https://www.ddc.co.jp/estore/
≪≪≪
印
刷 ●オリジナルの電子書籍・デジタルコンテンツを自由に販売可能
の ●販売価格は50円〜設定可能なので小さなコンテンツでも対応可能
泉
★デザイン・印刷・製本・DTPなどの印刷関係コンテンツ専門のサイトです
-----------------------------------------------------------------PR---
■明日もデザインで食べていこう！［23］
Opera Labs Camera and Pagesを使ってみました
秋葉秀樹
■クリエイター手抜きプロジェクト［292］Adobe Photoshop CS3/CS4/CS5編
テキストファイル内の文字を調整して配置し連番PSDで保存する
古籏一浩
■データ・デザインの地平［11］
設計者であるための、日々の心得
薬師寺 聖
--PR------------------------------------------------------------------
★吉田印刷所が電子書籍販売サイト「印刷の泉」をオープンしました
┃ https://www.ddc.co.jp/estore/
≪≪≪
印
刷 ●オリジナルの電子書籍・デジタルコンテンツを自由に販売可能
の ●販売価格は50円〜設定可能なので小さなコンテンツでも対応可能
泉
★デザイン・印刷・製本・DTPなどの印刷関係コンテンツ専門のサイトです
-----------------------------------------------------------------PR---
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［23］
Opera Labs Camera and Pagesを使ってみました
秋葉秀樹
< https://bn.dgcr.com/archives/20111024140300.html
>
───────────────────────────────────
秋葉です。こんにちは。先日、ホントに5日前とかなんですが、Operaブラウザのテストビルド（という言い方が正しいかどうかわかりませんが......）が発表されました。
Operaといえば、HTML5のフォームなど、私達デザイナーでも分かりやすいところで他のブラウザがあまり実装しない機能をいち早く実装したり、割と実験的かつ意欲的なところが好きだったりします（もちろん、何でも先行実装したらいいというわけではないのですが......）。
以前、このデジクリでもお伝えした「明日もデザインで食べていこう！［20］HTML5でつくるカメラ＆落書きアプリ（中国GTUGハッカソンで発表）」
< https://bn.dgcr.com/archives/20110829140300.html
>
ですが、この当時はブラウザからカメラにアクセスする機能はAndroid版OperaMobileの特殊なビルドだったんですが、やはりOpera、遂にPC版に実装してきました。
ここで注意。正式版ではありません、あくまでテストビルドのようなものですが、Mac版、Win版、Linax版、Android版があります。こちらから入手できます。
< http://labs.opera.com/news/2011/10/19/
>
このブラウザの大きな目玉は2つ。
●CSSのページング機能を実装
スクロールしようとするとわかりますが、実はこのOpera、画面をフリックしてスクロールようになっています。最近ではMac OSX Lionとかで採用されたインターフェイスですが、僕のマシンはSnow Leopardですので、これを見た時には軽くビックリしました。
マウスだけでなく、指（タッチデバイス用）との両者の挙動を同じものにしようという狙いは、もう既に始まっているのです。このページング機能というのは、色々な機能がありますが、見て面白いと思った機能は以下の通りです。
・画面に収まらない情報を横スライド（フリック移動）で読むことが出来るCSSのモジュールである。
・1つの長文な<article>要素（記事）などをブラウザに収まるところで一旦区切り、次のページに自動的に配置してくれる。
つまり、自動的に長文をページに分けてくれるから、フリックスライドでページをずらして読むようなことができる、というもの。ブラウジングってものが変わっていくような気がします。
●PCに接続されたカメラで撮影
これが以前の記事内容よりさらに膨らんだ話題になります。ブラウザでカメラ撮影が出来る、これは今までAndroid版だけだったんですが、PC版でも公開ました。名前が「Opera Labs Camera and Pages」というアプリ名です。
公開されてすぐに試して、関西のHTML5コミュニティ「HTML5-WEST.jp」でも発表させてもらいました。スライドはこちらに上げています。
< http://www.slideshare.net/Hidetaro7/opera-labs-camera-and-pages
>
以下のような事が可能です。
◎HTML5とJavaScriptでカメラ撮影が可能。
◎カメラ映像はvideo要素に簡単に映し出す事ができる。
◎撮影した静止画はcanvas要素に描画する事ができる。〜Android版は出来なかったが、今回は可能な点〜
◎Android版はcanvasからPNGやJPEGなど画像に書き出すtoDataURLメソッドが実装されていなかったが、PC版は可能。
これにより、カメラで撮影したイメージソースを画像ファイルとして保存することも出来そう。
●HTMLと簡単なJavaScriptだけでカメラ動画をブラウザに映す
まずは、PCにつながれたWebカメラで撮影した映像を、ブラウザに映してみましょう。
【HTML】
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
"></script>
<script>
jQuery(function ($){
var video = $("video")[0]; // video取得 ----------------------- (1)
navigator.getUserMedia("video", function (s){
video.src = s; // カメラの取得に成功したらビデオに映像を流す ----------------------- (2)
});
});
</script>
<title>Opera Labs</title>
</head>
<body>
<video autoplay></video>
</body>
</html>
これだけです。jQueryを読み込んで使っているのは、単に楽だからです。
HTML自体はvideo要素だけです、autoplay属性を入れてください、自動的に動画を再生する機能です。
JavaScriptの内容は主に以下の流れとなります。
（1）は単にJavaScriptでvideo要素を取得する。
（2）は（1）で取得したvideo要素のソースにカメラから取得した映像を当てることによって、動画が再生された状態になる。
このHTMLファイルにして、Opera Labs Camera and Pagesで閲覧すると、カメラの映像がブラウザに映っています（もちろん、Webカメラが接続されていることは大前提です）。
●シャッターボタンを押すたびに静止画をどんどん配置する
上記のスクリプトを応用してみます。「撮影」ボタンを押すとその瞬間の静止画が溜まっていくというものです。以下のリンクのようなものを作ることができます。
< http://www.tumblr.com/photo/1280/11823553170/1/tumblr_ltj3g7uzOv1qc4z0z
>
さっそくソースを見てみましょう。
【HTML】
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
"></script>
<script>
jQuery(function ($){
var video = $("video")[0];
navigator.getUserMedia("video", function (s){
video.src = s;
$("#shutter").bind("click", function (){ // ----------------------------------------------------(1)
var canvas = $("<canvas width="+video.width+" />")[0]; // ------------(2)
var scale = video.width / video.videoWidth; // ----------------------------(3)
var ctx = canvas.getContext("2d");
ctx.setTransform(scale, 0, 0, scale, 0, 0); // -------------------------------(4)
ctx.drawImage(video, 0, 0); // --------------------------------------------------(5)
$("#shotted").append(canvas); // ---------------------------------------------(6)
});
});
});
</script>
<title>Opera Labs</title>
</head>
<body>
<p id="shutter">撮影</p>
<video autoplay width="200"></video>
<div id="shotted"></div>
</body>
</html>
HTML側では、撮影ボタンのp要素、そして、撮った画像を溜め込んでいくdiv要素が追加されました。(8)
video要素が大きいのでわざと小さく200pxの横幅にしています。
JavaScriptではp要素のクリックイベントを追加しました。(1)
クリックされると内部でcanvas要素を生成して、video要素と同じ200pxの大きさにします。(2)
(3)ですが、ちょっと注意が必要です。
videoとは、映像が持つ本来の大きさ（デフォルトは640pxでした）と、要素自体の大きさは別物です。
今回はvideo要素が200pxになっていて、canvasも200pxにしたいのですが、本来の映像は640pxだと、canvasに描画したとき元の大きさで描画されてしまいます。よって、videoの大きさを縮小しなければなりません、そこで縮小倍率を出すため、このような割り算をしています。
つまり、200px ÷ 640px = 0.3125
この倍率を、canvasに描画するときに縮小します。(4)
そのあとに、drawImageで縮小された画像をcanvasに描画するというわけです。(5)
最後に生成されたcanvas要素を<div id="shotted"></div>の中に追加していくというわけです。(6)
これも実行してみて、自分のカオとかでも映しながらボタンを押してどんどん連写してみてください。
さて、そんなわけで色々試してみると、面白いアプリがHTMLベースで作れそうですね。各ブラウザに実装されるのは、まだまだ先のようですが、こういったことも出来ると頭の中に入れておくのが大事かな？ と思っています。では、次は11月、またよろしくお願いします！
【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［292］Adobe Photoshop CS3/CS4/CS5編
テキストファイル内の文字を調整して配置し連番PSDで保存する
古籏一浩
< https://bn.dgcr.com/archives/20111024140200.html
>
───────────────────────────────────
今回は、テキストファイルを読み込みDVDなど映像のテロップ（字幕）で使用する、PSDファイルを生成するスクリプトです。ただし、今回は文字が表示範囲（DVサイズなら720×480、FullHDサイズなら1920）を超えた場合、自動的に指定された範囲内に収まるように調整して保存します。
前回と同様、スクリプトの実行前には基本となるPhotoshopファイルを作成しておく必要があります。テキストはエリアテキストでなく、ポイントテキストにしてください。
以下のスクリプトを実行すると、順番に使用するファイルや保存先を聞いてきます。選択するファイルを間違えると動作しませんので注意してください。
// テキストファイル内の文字を720ピクセル以内に収まるように配置し連番ファイルで保存する
(function(){
var psdFile = File.openDialog("基本となるPSDファイルを選択してください","*.psd");
if (!psdFile){ return; } // キャンセルされたら何もしない
var textFile = File.openDialog("配置するテキストファイルを選択してください","*.txt");
if (!textFile){ return; } // キャンセルされたら何もしない
var saveFolder = Folder.selectDialog("保存先のフォルダを選択してください");
if (!saveFolder){ return; } // キャンセルされたら何もしない
var count = 0; // ファイル番号
var maxSize = 720; // 最大ピクセル数
// PSD形式保存オプション
psdOpt = new PhotoshopSaveOptions();
psdOpt.alphaChannels = true;
psdOpt.annotations = true;
psdOpt.embedColorProfile = true;
psdOpt.layers = true;
psdOpt.spotColors = true;
var flag = textFile.open("r");
if (!flag){
alert("ファイルが読み込めません");
return;
}
while(!textFile.eof){
app.open(psdFile);
var text = textFile.readln(); // 1行読み込む
var layObj = app.activeDocument.layers[0]; // 一番上のレイヤーを指定
layObj.textItem.contents = text;
var x1 = layObj.bounds[0].value;
var x2 = layObj.bounds[2].value;
var d = x2 - x1;
if (d >= maxSize){ // オーバーフローしている
layObj.textItem.horizontalScale = 100 * (maxSize / d);
}
var saveFile = new File(saveFolder.fullName+"/telop"+count+".psd"); // telop番号.psdという名前で保存する
activeDocument.saveAs(saveFile, psdOpt, true, Extension.LOWERCASE);
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
count++;
}
})();
DVサイズではなくFullHDサイズにする場合は、以下のように数値を変更してください。4Kサイズでも同様に、以下の行の数値さえ変更すれば対応させることができます。文字の間隔などもあるので、実際にはより小さい値を指定した方がよいでしょう。
var maxSize = 720; // 最大ピクセル数
↓
var maxSize = 1920; // 最大ピクセル数
【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>
3Dカメラに搭載されているICは4Kに対応したものが多いので、そのうち家庭用でも4Kカメラが出るのかな。と思ったら、iPhone 4Sのカメラが4KのICチップ内蔵したものでした。やっぱり時代はスマートフォンということみたい。昔、釣りゲームで争っていたモバゲーとグリー。ようやく勝負がついたみたい。買ったのはモバゲー（DeNA）。「横浜球団をつり上げた！」
・jQuery Mobile 1.0RC2例文辞典
< http://www.openspc2.org/reibun/jQuery_Mobile/1.0RC2/
>
・CSS3（スタイルシート Level 3）例文辞典
< http://www.openspc2.org/reibun/CSS3/
>
・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199
>
・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184
>
・毎度おなじみASCII.jpの連載
「第10回 JavaScriptで作れるiPhone用ボイスレコーダー」
< http://ascii.jp/elem/000/000/640/640963/
>
・iPhone/iPad × HTML5アプリ制作
< http://www.amazon.co.jp/dp/4797362618
>
< http://bookpub.jp/books/bp/196
>（電子書籍版。★セール期間は今週末まで！）
・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>
・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■データ・デザインの地平［11］
設計者であるための、日々の心得
薬師寺 聖
< https://bn.dgcr.com/archives/20111024140100.html
>
───────────────────────────────────
●恐れの感情が、慎重さを生む
その昔、昭和半ばまでは、設計の対象は「データ」ではなく、回路や重機や鋼構造物といった「モノ」が中心でした。
それらの設計には、強度計算が必須です。巨大な構造物が風や波や地震に耐えるのも、それを作るための重機が安定を保つのも、適切な部材が使われ、適切な構造になるように、正確な計算がなされているからです。数学が安全を守っているのです。当時、まだパソコンはありませんでしたから、設計技師は頭の中でシミュレーションを行い、計算尺や電卓を使って強度を計算していました。
計算中に集中力が途切れたり、検算を一箇所でも誤れば、製造者や作業者の生命にかかわります。時折、ニュースでは、どこかで起こった惨事の生々しい映像が流れます。その原因が、設計以外の工程にあったとしても、悲惨な映像を見れば、ヒトの生命にかかわる仕事への恐れは強まります。そして、その恐れの感情は、高い倫理観につながっていたように思います。
ところが、設計の対象がモノではなくデータになると、ユーザーの生命にかかわる物騒な案件よりも、ユーザーの生活を便利にしたり豊かにする案件が増えてきます。そのような案件では、ユーザー獲得の機会損失や経済的損失が引き起こされるケースはあるかもしれませんが、生命が失われるケースはまず考えられません。データ設計が直接の原因で生命が失われたというニュースは、筆者は見聞きしたことがありません。
生命に直結しないがゆえに、データ設計者は、意識的に、設計責任の重さに対する恐れの感情を持ち続けなければなりません。その感情が自ずと作業を慎重に進めさせ、設計のクオリティを高めるからです。
●生活を顧みることが、仕事の姿勢に影響する
複数のソーシャルメディアを利用するユーザーが増え、全世界のサーバーに蓄積されるデータは加速度的に増えています。端末のスペックは向上し、膨大なデータを迅速に処理できるようになり、開発者もユーザーも以前ほどファイルサイズに頓着しなくなって、データ爆発へのカウントダウンは早まっています。
データの増加からは、2つの廃棄の問題が生じます。
ひとつは、データそのものの廃棄の問題です。設計者は、不要になったデータを削除しやすい構造を心がけなければなりません。
もうひとつは、ハード面の問題です。データが増えれば、それを格納するための設備や機器が必要になります。それらを製造するための過程では、多くの資源が使われ、多くの廃棄物が生じます。また、耐用年数が過ぎれば、設備や機器自体が廃棄物となります。
この問題は、メディアの小型化や、データ記録方法の技術革新では、解決しません。技術進化の後を追うように、さらにデータが肥大化するだけです。技術革新とデータ増加は、薬剤と薬剤耐性の関係に似ています。
どちらの問題についても言えることですが、データ設計者は、可能な限りデータ爆発に手を貸さないように、必要最小限のデータを蓄積する構造を工夫しなければなりません。
ハードウェアのスペックも通信速度も向上しているのだから、少々ファイルサイズが大きくなっても......などと自らを甘やかしてはいけないでしょう。
こういった問題を心に留めておくために、設計者は、自らの生活を顧みる必要があります。生活をないがしろにすると、廃棄方法など考えない、研究成果の生み出しっぱなし、新システムの作りっぱなしに、疑問を感じなくなる恐れがあるからです。
コンピュータ化を進めてきた、現在のデータ設計者よりもさらに上の世代では、男性は仕事、女性は家庭という作業分担が一般的でした。男性の多くは生活を女性に任せていました。たとえば、食事では男性は食べる工程の担当者であり、その前後の工程には我関せずでした。
こうした生活からの仕事の遊離が、設計の前に廃棄方法について考えることをしない風潮を作り上げたのではないでしょうか。生活を実践していれば、何かを生みだすよりも、廃棄する方が難しいということは分かるはずです。
蛇足ですが、宇宙にある機器や日本に数十基ある設備の廃棄方法の問題も、生活と仕事を遊離させた結果として起こったのではないかと思われてなりません。
●長期的視野が、構造への影響を防ぐ
アプリケーションの運用期間が長期にわたると、データを取り巻く環境は、データ設計時とは変わっていきます。
その変化の多くは、技術仕様には無関係なものです。たとえば、政治経済の動きや、法律の制定や廃止といった社会システム上の変化です。海外事情や景気や世論、投票結果などが、制度に影響を及ぼし、既存の制度に適合するよう設計されていたデータの土台が変わるということが起こりえます。
また、存在のデバイス化時代には、ニューロエシックス・再生医療・量子力学の発展による、「一意なもの」に対する社会的な承認の変化が考えられます（詳しくは、本連載の過去記事を参照してください）。
どのような変化があろうと、データ構造を見直さなければならなくなったために、実装にも影響が及ぶという事態は避けなければなりません。変化を吸収し、データ構造への影響を最小限にとどめる設計を目指さなければなりません。
それには、データの利用期間と利用範囲を予測し、その間の変化を事前に察知したうえで、設計にのぞむ必要があります。
こういった予測をする力は、コンピュータよりも、ヒトの方が優れています。ヒトは航空写真を俯瞰するように先の道を見ることができますが、コンピュータは走りながら目の前に現れる道や標識を順次見ていくことしかできません。
にもかかわらず、データ設計者は、コンピュータからの助言を信じがちです。なぜなら、データの裏付けがあると他者に説明しやすく納得してもらいやすいからです。が、データとは、データ化できた情報でしかありません。知るべきことは、データ化できないこと、語りえないことの側にあります。自分の俯瞰した結果の方がたしかだと信じられるなら、そのような変化があると見てよいでしょう。
こうした予測力を磨くには、技術に集中するのではなく、専門分野以外の本を読み、芸術を鑑賞し、異なる年代や立場の人たちと触れあうことが必要だと思います。
●設計の評価は、運用期間終了時に決まる
設計者は、設計工程を終えれば自分の作業は終了したと思い、実装後納品すれば案件は完了したと思いがちです。しかし、納品段階で、それが良い設計なのかどうか、評価することはできません。設計自体に破たんがないことは、良い設計の前提条件にすぎないのです。
前回、処理対象となるデータを入力する際のヒューマンエラーを減らすため、データ設計者は、ヒトを知る必要があると述べました。入力担当者のスキルとバックグラウンドを知り、ミスなく作業を遂行できるような構造を考えるのも、設計者の重要な仕事のひとつです。
また、設計者は、運用担当者の人となりを理解し、彼らが背伸びしなくても無理なく管理できるように設計しなければなりません。
そして、環境負荷を最小限にとどめるよう、データ増と、それに伴うモノの増加を抑制する構造を工夫しなければなりません。
さらには、データを取り巻く環境を予測し、その環境の変化がデータ構造に及ぼす影響を最小限にとどめなければなりません。
正しいデータが登録され、つつがなく運用され、無駄なデータを蓄積せず、システムがその役割を終え、一点の問題もなく、社会に役立ったと評価できたときに初めて、その設計は「良い設計であった」といえるのです。
●さいごに
私の父は、港湾構造物や造船用クレーンの強度計算と発明を手掛ける設計技師でした（父は昭和一桁には珍しく、生活を女性任せにしない人でした）。図面の中で育った私の幼稚園児の頃の夢は、ロケットのエンジンの設計者になることでした。アポロ11号が月面に着陸する数年前のことです。
ところが、小学生になり、父の仕事ぶりを間近で見ていると、父と違って集中力のとぎれることがある私が設計士を目指すなんぞは社会の迷惑にしかならないと思うようになりました。設計責任の重さに怖気づいてしまったのです。今なら、手計算ではなく、コンピュータによるシミュレーションが可能なので、もうすこし往生際が悪かったかもしれませんが。
長じて、設計士は目指さず、イラストレーターとして就職したはずが、XMLという変化を俯瞰してしまったために、蒼くなりながらヒトの生命にかかわる案件を手がけてきました。
私は、怖がりなので慎重に作業を進めます。環境問題を重視してシンプルな生活を心がけています。技術書だけでなく文学や科学の本やフリーペーパーを読み、音楽や絵や詩に触れ、20代から80代までいろいろな年代の人と話をします。この記事で述べたことを、読者に対して語るだけでなく、自ら実践する人であり続けるよう精進したいと思っています。
本連載では、11回にわたりデータ・デザインについて述べてきましたが、Windows Phoneの正式な開発環境も整いましたので、次回からは、RIAまわりの話題を取り上げていく予定です。
※今回の記事に関心を持たれた方は、こちらもどうぞ。「XML設計の心得」無料のPDFブックです。XML、XML Namespace、XML Schema、XPath、XQuery、XSLT、LINQ to XMLの基本知識を踏まえ、XMLデータ設計者の心得について述べています（本文236ページ、拡大図版PDF付き、2009年公開）。セミナーの教材として自由に印刷して利用できます。学習教材や、リファレンスとしても利用できるでしょう。
< http://2008r2.projectkyss.net/books_R2/Default.aspx
>
※ブログ「イメージ AndAlso ロジック」に、Windows Phone のサンプル、RIA宣伝用のキャラクター、SVG作成体験用の簡易なフリーツールなどを掲載しています。開発や宣伝にご利用ください。
< http://blogs.itmedia.co.jp/seindesign/
>
※2曲入りアルバム「Change The Brain」を、Amazon MP3（日、米、英、独）、Mora Win、着うたフル、ほかで発売中です。
< http://lyric.seindesign.net/info/ChangeTheBrain.htm
>
【薬師寺聖／個人事業所セイザインデザイン】
個人事業所 < http://www.seindesign.net/
>
ブログ < http://blogs.itmedia.co.jp/seindesign/
>
PROJECT KySS < http://www.projectkyss.net/
>
< infosei@seindesign.net >
ヴィジュアル、サウンド、テキスト、コードを扱う、四国の個人事業主。科学技術や医療・福祉分野のXML案件の企画デザインに実績があり、コラボレーションユニットPROJECT KySS名義で、XML、RIA、.NETに関する書籍や記事、多数。
Microsoft MVP for Development Platforms - Client App Dev
（Oct 2003-Sep 2011）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（10/24）
・40年も前、わたしは月刊「小型映画」という8ミリ映画雑誌の新米編集者だった。当時はまだ活版印刷の時代で、市ヶ谷の大日本印刷での出張校正が毎月の行事だった。出張校正室で待機し、組み上がって来る雑誌の校正刷り（ゲラ）に赤字を入れて戻し、あまりおいしくない弁当を食べ、再校正のゲラが出るのを待機し、という数日を送るのだ。いよいよ校了という段階で、副編集長が「あー、1ページ真っ白だ」と真っ青になった。台割（本作りの設計図）を書き間違えていて、記事の入らない1ページが発生したのだ。あいにくストック原稿がなく、スタッフ一同憮然としていたら、K編集長が「よし、僕が書くよ」と、さらさらっと一気に書き上げたのが「未来の写真」という原稿で、すぐに現場に回してことなきを得た。その後数十年を経て、「未来の写真」はひとつを残してすべてが実現した。残ったひとつとは、撮影後に焦点を変えられるカメラが発明されるからピンぼけ写真はなくなる、というものだった。それがとうとう実現したというニュースをネットで知り、革命的なカメラの理屈を理解した。K編集長はさすがにそこまでは書いていなかった（書いていたらとっくに発明されていたはずだ）。いまになって、本当に頭がいい人だったなと懐かしく思い出す。昭和45年（1970）11月25日、わたしたちが出張校正室で待機中、多数のヘリが上空を飛び交っていた。陸上自衛隊市ヶ谷駐屯地において三島由紀夫事件が起きた......。昭和は恐ろしい早さで遠くなっていく。（柴田）
< http://www.heartlogic.jp/archives/2011/10/lytro_camera.html
>
「ピント合わせ」の概念を変える新しいカメラ「Lytro camera」米国で発売決定。サンプル写真もあり（Heartlogic）
< http://japanese.engadget.com/2011/06/22/light-field/
>
撮影後に焦点を変えられるLight Field カメラ、年内に一般向け製品化へ（engadget）
< http://jp.techcrunch.com/archives/20110621lytro-launches-to-transform-photography-with-50m-in-venture-funds-tctv/
>
焦点は撮ったあとに（好きな位置に）合わせる─写真の概念をラジカルに変えるLytroのCEOにインタビュー（TechCrunch）
・生命にかかわる設計。考えたこともなかった。／格闘技イベント「STRIKER 4」に行って来た。キックとMMAの両ルールあり。家人の道場の人たちが出場するというので応援に。応援シートは売り切れで、RS席。チケットは当日引き換えだったのだが、まさかの2列目で、とてもよく見える。iPhoneでズーム無しで撮影しても大きくうつる迫力の近さ。両セコンドの声までよく聞こえる。三島☆ド根性ノ助さんが観客席にいらした。格闘技イベントは有名無名いくつか行った。一番しんどいのは空手の試合。朝からトーナメント形式で行われ、休憩時間などなく、夕方まで行われるもの。道場単位だから、次はあっちの面でやる、あの人とあの人は同じ時間になったから分かれて応援、となるし、試合会場での食事なんてもってのほかだから（たぶん。誰も食事はしない）、食べそびれることも。ワンマッチは試合数が少ない分、楽。昨日のは、入場に余計な時間はかけないし、延長戦すらなく、テンポよく進むし、見合ってばかりの試合もなし。アグレッシブで、判定よりTKOやKOの方が多い。17時スタートで、終わるのは早くて21時だろうと思っていたら、19時半には終わってしまった。メインだけを見に来た人たちが、メインすら見られずに帰っていったよ......。道場の人たちはみんな勝利して、我々は気持ちよく帰宅。どの試合も面白かったから、次のSTRIKERも観たいな。テレビや離れた席とは違い、痛さが想像できるリアル感。あの強い蹴りを何度も受けてよく立ってられるなぁ、ヤバい早くセコンド割って入れ、マウントからの顔への打撃は見てるのきついわ〜、などと思いつつ。あるセコンドが「距離が中途半端！！」と繰り返し言っていたのが印象に残ってるわ。UFCをリング近くで観たら凄いんだろうなぁ。ギーダの試合を近くで観てみたいわ。（hammer.mule）
< http://www.office-deepmountain.com/striker/
> STRIKER
< http://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%BB%E3%82%B0%E3%82%A4%E3%83%80
>
スタミナやスピードがチート処理なギーダ。
< http://ja.wikipedia.org/wiki/%E3%83%81%E3%83%BC%E3%83%88
> チート
■明日もデザインで食べていこう！［23］
Opera Labs Camera and Pagesを使ってみました
秋葉秀樹
< https://bn.dgcr.com/archives/20111024140300.html
>
───────────────────────────────────
秋葉です。こんにちは。先日、ホントに5日前とかなんですが、Operaブラウザのテストビルド（という言い方が正しいかどうかわかりませんが......）が発表されました。
Operaといえば、HTML5のフォームなど、私達デザイナーでも分かりやすいところで他のブラウザがあまり実装しない機能をいち早く実装したり、割と実験的かつ意欲的なところが好きだったりします（もちろん、何でも先行実装したらいいというわけではないのですが......）。
以前、このデジクリでもお伝えした「明日もデザインで食べていこう！［20］HTML5でつくるカメラ＆落書きアプリ（中国GTUGハッカソンで発表）」
< https://bn.dgcr.com/archives/20110829140300.html
>
ですが、この当時はブラウザからカメラにアクセスする機能はAndroid版OperaMobileの特殊なビルドだったんですが、やはりOpera、遂にPC版に実装してきました。
ここで注意。正式版ではありません、あくまでテストビルドのようなものですが、Mac版、Win版、Linax版、Android版があります。こちらから入手できます。
< http://labs.opera.com/news/2011/10/19/
>
このブラウザの大きな目玉は2つ。
●CSSのページング機能を実装
スクロールしようとするとわかりますが、実はこのOpera、画面をフリックしてスクロールようになっています。最近ではMac OSX Lionとかで採用されたインターフェイスですが、僕のマシンはSnow Leopardですので、これを見た時には軽くビックリしました。
マウスだけでなく、指（タッチデバイス用）との両者の挙動を同じものにしようという狙いは、もう既に始まっているのです。このページング機能というのは、色々な機能がありますが、見て面白いと思った機能は以下の通りです。
・画面に収まらない情報を横スライド（フリック移動）で読むことが出来るCSSのモジュールである。
・1つの長文な<article>要素（記事）などをブラウザに収まるところで一旦区切り、次のページに自動的に配置してくれる。
つまり、自動的に長文をページに分けてくれるから、フリックスライドでページをずらして読むようなことができる、というもの。ブラウジングってものが変わっていくような気がします。
●PCに接続されたカメラで撮影
これが以前の記事内容よりさらに膨らんだ話題になります。ブラウザでカメラ撮影が出来る、これは今までAndroid版だけだったんですが、PC版でも公開ました。名前が「Opera Labs Camera and Pages」というアプリ名です。
公開されてすぐに試して、関西のHTML5コミュニティ「HTML5-WEST.jp」でも発表させてもらいました。スライドはこちらに上げています。
< http://www.slideshare.net/Hidetaro7/opera-labs-camera-and-pages
>
以下のような事が可能です。
◎HTML5とJavaScriptでカメラ撮影が可能。
◎カメラ映像はvideo要素に簡単に映し出す事ができる。
◎撮影した静止画はcanvas要素に描画する事ができる。〜Android版は出来なかったが、今回は可能な点〜
◎Android版はcanvasからPNGやJPEGなど画像に書き出すtoDataURLメソッドが実装されていなかったが、PC版は可能。
これにより、カメラで撮影したイメージソースを画像ファイルとして保存することも出来そう。
●HTMLと簡単なJavaScriptだけでカメラ動画をブラウザに映す
まずは、PCにつながれたWebカメラで撮影した映像を、ブラウザに映してみましょう。
【HTML】
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
"></script>
<script>
jQuery(function ($){
var video = $("video")[0]; // video取得 ----------------------- (1)
navigator.getUserMedia("video", function (s){
video.src = s; // カメラの取得に成功したらビデオに映像を流す ----------------------- (2)
});
});
</script>
<title>Opera Labs</title>
</head>
<body>
<video autoplay></video>
</body>
</html>
これだけです。jQueryを読み込んで使っているのは、単に楽だからです。
HTML自体はvideo要素だけです、autoplay属性を入れてください、自動的に動画を再生する機能です。
JavaScriptの内容は主に以下の流れとなります。
（1）は単にJavaScriptでvideo要素を取得する。
（2）は（1）で取得したvideo要素のソースにカメラから取得した映像を当てることによって、動画が再生された状態になる。
このHTMLファイルにして、Opera Labs Camera and Pagesで閲覧すると、カメラの映像がブラウザに映っています（もちろん、Webカメラが接続されていることは大前提です）。
●シャッターボタンを押すたびに静止画をどんどん配置する
上記のスクリプトを応用してみます。「撮影」ボタンを押すとその瞬間の静止画が溜まっていくというものです。以下のリンクのようなものを作ることができます。
< http://www.tumblr.com/photo/1280/11823553170/1/tumblr_ltj3g7uzOv1qc4z0z
>
さっそくソースを見てみましょう。
【HTML】
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
"></script>
<script>
jQuery(function ($){
var video = $("video")[0];
navigator.getUserMedia("video", function (s){
video.src = s;
$("#shutter").bind("click", function (){ // ----------------------------------------------------(1)
var canvas = $("<canvas width="+video.width+" />")[0]; // ------------(2)
var scale = video.width / video.videoWidth; // ----------------------------(3)
var ctx = canvas.getContext("2d");
ctx.setTransform(scale, 0, 0, scale, 0, 0); // -------------------------------(4)
ctx.drawImage(video, 0, 0); // --------------------------------------------------(5)
$("#shotted").append(canvas); // ---------------------------------------------(6)
});
});
});
</script>
<title>Opera Labs</title>
</head>
<body>
<p id="shutter">撮影</p>
<video autoplay width="200"></video>
<div id="shotted"></div>
</body>
</html>
HTML側では、撮影ボタンのp要素、そして、撮った画像を溜め込んでいくdiv要素が追加されました。(8)
video要素が大きいのでわざと小さく200pxの横幅にしています。
JavaScriptではp要素のクリックイベントを追加しました。(1)
クリックされると内部でcanvas要素を生成して、video要素と同じ200pxの大きさにします。(2)
(3)ですが、ちょっと注意が必要です。
videoとは、映像が持つ本来の大きさ（デフォルトは640pxでした）と、要素自体の大きさは別物です。
今回はvideo要素が200pxになっていて、canvasも200pxにしたいのですが、本来の映像は640pxだと、canvasに描画したとき元の大きさで描画されてしまいます。よって、videoの大きさを縮小しなければなりません、そこで縮小倍率を出すため、このような割り算をしています。
つまり、200px ÷ 640px = 0.3125
この倍率を、canvasに描画するときに縮小します。(4)
そのあとに、drawImageで縮小された画像をcanvasに描画するというわけです。(5)
最後に生成されたcanvas要素を<div id="shotted"></div>の中に追加していくというわけです。(6)
これも実行してみて、自分のカオとかでも映しながらボタンを押してどんどん連写してみてください。
さて、そんなわけで色々試してみると、面白いアプリがHTMLベースで作れそうですね。各ブラウザに実装されるのは、まだまだ先のようですが、こういったことも出来ると頭の中に入れておくのが大事かな？ と思っています。では、次は11月、またよろしくお願いします！
【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>
テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［292］Adobe Photoshop CS3/CS4/CS5編
テキストファイル内の文字を調整して配置し連番PSDで保存する
古籏一浩
< https://bn.dgcr.com/archives/20111024140200.html
>
───────────────────────────────────
今回は、テキストファイルを読み込みDVDなど映像のテロップ（字幕）で使用する、PSDファイルを生成するスクリプトです。ただし、今回は文字が表示範囲（DVサイズなら720×480、FullHDサイズなら1920）を超えた場合、自動的に指定された範囲内に収まるように調整して保存します。
前回と同様、スクリプトの実行前には基本となるPhotoshopファイルを作成しておく必要があります。テキストはエリアテキストでなく、ポイントテキストにしてください。
以下のスクリプトを実行すると、順番に使用するファイルや保存先を聞いてきます。選択するファイルを間違えると動作しませんので注意してください。
// テキストファイル内の文字を720ピクセル以内に収まるように配置し連番ファイルで保存する
(function(){
var psdFile = File.openDialog("基本となるPSDファイルを選択してください","*.psd");
if (!psdFile){ return; } // キャンセルされたら何もしない
var textFile = File.openDialog("配置するテキストファイルを選択してください","*.txt");
if (!textFile){ return; } // キャンセルされたら何もしない
var saveFolder = Folder.selectDialog("保存先のフォルダを選択してください");
if (!saveFolder){ return; } // キャンセルされたら何もしない
var count = 0; // ファイル番号
var maxSize = 720; // 最大ピクセル数
// PSD形式保存オプション
psdOpt = new PhotoshopSaveOptions();
psdOpt.alphaChannels = true;
psdOpt.annotations = true;
psdOpt.embedColorProfile = true;
psdOpt.layers = true;
psdOpt.spotColors = true;
var flag = textFile.open("r");
if (!flag){
alert("ファイルが読み込めません");
return;
}
while(!textFile.eof){
app.open(psdFile);
var text = textFile.readln(); // 1行読み込む
var layObj = app.activeDocument.layers[0]; // 一番上のレイヤーを指定
layObj.textItem.contents = text;
var x1 = layObj.bounds[0].value;
var x2 = layObj.bounds[2].value;
var d = x2 - x1;
if (d >= maxSize){ // オーバーフローしている
layObj.textItem.horizontalScale = 100 * (maxSize / d);
}
var saveFile = new File(saveFolder.fullName+"/telop"+count+".psd"); // telop番号.psdという名前で保存する
activeDocument.saveAs(saveFile, psdOpt, true, Extension.LOWERCASE);
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
count++;
}
})();
DVサイズではなくFullHDサイズにする場合は、以下のように数値を変更してください。4Kサイズでも同様に、以下の行の数値さえ変更すれば対応させることができます。文字の間隔などもあるので、実際にはより小さい値を指定した方がよいでしょう。
var maxSize = 720; // 最大ピクセル数
↓
var maxSize = 1920; // 最大ピクセル数
【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>
3Dカメラに搭載されているICは4Kに対応したものが多いので、そのうち家庭用でも4Kカメラが出るのかな。と思ったら、iPhone 4Sのカメラが4KのICチップ内蔵したものでした。やっぱり時代はスマートフォンということみたい。昔、釣りゲームで争っていたモバゲーとグリー。ようやく勝負がついたみたい。買ったのはモバゲー（DeNA）。「横浜球団をつり上げた！」
・jQuery Mobile 1.0RC2例文辞典
< http://www.openspc2.org/reibun/jQuery_Mobile/1.0RC2/
>
・CSS3（スタイルシート Level 3）例文辞典
< http://www.openspc2.org/reibun/CSS3/
>
・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199
>
・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184
>
・毎度おなじみASCII.jpの連載
「第10回 JavaScriptで作れるiPhone用ボイスレコーダー」
< http://ascii.jp/elem/000/000/640/640963/
>
・iPhone/iPad × HTML5アプリ制作
< http://www.amazon.co.jp/dp/4797362618
>
< http://bookpub.jp/books/bp/196
>（電子書籍版。★セール期間は今週末まで！）
・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>
・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■データ・デザインの地平［11］
設計者であるための、日々の心得
薬師寺 聖
< https://bn.dgcr.com/archives/20111024140100.html
>
───────────────────────────────────
●恐れの感情が、慎重さを生む
その昔、昭和半ばまでは、設計の対象は「データ」ではなく、回路や重機や鋼構造物といった「モノ」が中心でした。
それらの設計には、強度計算が必須です。巨大な構造物が風や波や地震に耐えるのも、それを作るための重機が安定を保つのも、適切な部材が使われ、適切な構造になるように、正確な計算がなされているからです。数学が安全を守っているのです。当時、まだパソコンはありませんでしたから、設計技師は頭の中でシミュレーションを行い、計算尺や電卓を使って強度を計算していました。
計算中に集中力が途切れたり、検算を一箇所でも誤れば、製造者や作業者の生命にかかわります。時折、ニュースでは、どこかで起こった惨事の生々しい映像が流れます。その原因が、設計以外の工程にあったとしても、悲惨な映像を見れば、ヒトの生命にかかわる仕事への恐れは強まります。そして、その恐れの感情は、高い倫理観につながっていたように思います。
ところが、設計の対象がモノではなくデータになると、ユーザーの生命にかかわる物騒な案件よりも、ユーザーの生活を便利にしたり豊かにする案件が増えてきます。そのような案件では、ユーザー獲得の機会損失や経済的損失が引き起こされるケースはあるかもしれませんが、生命が失われるケースはまず考えられません。データ設計が直接の原因で生命が失われたというニュースは、筆者は見聞きしたことがありません。
生命に直結しないがゆえに、データ設計者は、意識的に、設計責任の重さに対する恐れの感情を持ち続けなければなりません。その感情が自ずと作業を慎重に進めさせ、設計のクオリティを高めるからです。
●生活を顧みることが、仕事の姿勢に影響する
複数のソーシャルメディアを利用するユーザーが増え、全世界のサーバーに蓄積されるデータは加速度的に増えています。端末のスペックは向上し、膨大なデータを迅速に処理できるようになり、開発者もユーザーも以前ほどファイルサイズに頓着しなくなって、データ爆発へのカウントダウンは早まっています。
データの増加からは、2つの廃棄の問題が生じます。
ひとつは、データそのものの廃棄の問題です。設計者は、不要になったデータを削除しやすい構造を心がけなければなりません。
もうひとつは、ハード面の問題です。データが増えれば、それを格納するための設備や機器が必要になります。それらを製造するための過程では、多くの資源が使われ、多くの廃棄物が生じます。また、耐用年数が過ぎれば、設備や機器自体が廃棄物となります。
この問題は、メディアの小型化や、データ記録方法の技術革新では、解決しません。技術進化の後を追うように、さらにデータが肥大化するだけです。技術革新とデータ増加は、薬剤と薬剤耐性の関係に似ています。
どちらの問題についても言えることですが、データ設計者は、可能な限りデータ爆発に手を貸さないように、必要最小限のデータを蓄積する構造を工夫しなければなりません。
ハードウェアのスペックも通信速度も向上しているのだから、少々ファイルサイズが大きくなっても......などと自らを甘やかしてはいけないでしょう。
こういった問題を心に留めておくために、設計者は、自らの生活を顧みる必要があります。生活をないがしろにすると、廃棄方法など考えない、研究成果の生み出しっぱなし、新システムの作りっぱなしに、疑問を感じなくなる恐れがあるからです。
コンピュータ化を進めてきた、現在のデータ設計者よりもさらに上の世代では、男性は仕事、女性は家庭という作業分担が一般的でした。男性の多くは生活を女性に任せていました。たとえば、食事では男性は食べる工程の担当者であり、その前後の工程には我関せずでした。
こうした生活からの仕事の遊離が、設計の前に廃棄方法について考えることをしない風潮を作り上げたのではないでしょうか。生活を実践していれば、何かを生みだすよりも、廃棄する方が難しいということは分かるはずです。
蛇足ですが、宇宙にある機器や日本に数十基ある設備の廃棄方法の問題も、生活と仕事を遊離させた結果として起こったのではないかと思われてなりません。
●長期的視野が、構造への影響を防ぐ
アプリケーションの運用期間が長期にわたると、データを取り巻く環境は、データ設計時とは変わっていきます。
その変化の多くは、技術仕様には無関係なものです。たとえば、政治経済の動きや、法律の制定や廃止といった社会システム上の変化です。海外事情や景気や世論、投票結果などが、制度に影響を及ぼし、既存の制度に適合するよう設計されていたデータの土台が変わるということが起こりえます。
また、存在のデバイス化時代には、ニューロエシックス・再生医療・量子力学の発展による、「一意なもの」に対する社会的な承認の変化が考えられます（詳しくは、本連載の過去記事を参照してください）。
どのような変化があろうと、データ構造を見直さなければならなくなったために、実装にも影響が及ぶという事態は避けなければなりません。変化を吸収し、データ構造への影響を最小限にとどめる設計を目指さなければなりません。
それには、データの利用期間と利用範囲を予測し、その間の変化を事前に察知したうえで、設計にのぞむ必要があります。
こういった予測をする力は、コンピュータよりも、ヒトの方が優れています。ヒトは航空写真を俯瞰するように先の道を見ることができますが、コンピュータは走りながら目の前に現れる道や標識を順次見ていくことしかできません。
にもかかわらず、データ設計者は、コンピュータからの助言を信じがちです。なぜなら、データの裏付けがあると他者に説明しやすく納得してもらいやすいからです。が、データとは、データ化できた情報でしかありません。知るべきことは、データ化できないこと、語りえないことの側にあります。自分の俯瞰した結果の方がたしかだと信じられるなら、そのような変化があると見てよいでしょう。
こうした予測力を磨くには、技術に集中するのではなく、専門分野以外の本を読み、芸術を鑑賞し、異なる年代や立場の人たちと触れあうことが必要だと思います。
●設計の評価は、運用期間終了時に決まる
設計者は、設計工程を終えれば自分の作業は終了したと思い、実装後納品すれば案件は完了したと思いがちです。しかし、納品段階で、それが良い設計なのかどうか、評価することはできません。設計自体に破たんがないことは、良い設計の前提条件にすぎないのです。
前回、処理対象となるデータを入力する際のヒューマンエラーを減らすため、データ設計者は、ヒトを知る必要があると述べました。入力担当者のスキルとバックグラウンドを知り、ミスなく作業を遂行できるような構造を考えるのも、設計者の重要な仕事のひとつです。
また、設計者は、運用担当者の人となりを理解し、彼らが背伸びしなくても無理なく管理できるように設計しなければなりません。
そして、環境負荷を最小限にとどめるよう、データ増と、それに伴うモノの増加を抑制する構造を工夫しなければなりません。
さらには、データを取り巻く環境を予測し、その環境の変化がデータ構造に及ぼす影響を最小限にとどめなければなりません。
正しいデータが登録され、つつがなく運用され、無駄なデータを蓄積せず、システムがその役割を終え、一点の問題もなく、社会に役立ったと評価できたときに初めて、その設計は「良い設計であった」といえるのです。
●さいごに
私の父は、港湾構造物や造船用クレーンの強度計算と発明を手掛ける設計技師でした（父は昭和一桁には珍しく、生活を女性任せにしない人でした）。図面の中で育った私の幼稚園児の頃の夢は、ロケットのエンジンの設計者になることでした。アポロ11号が月面に着陸する数年前のことです。
ところが、小学生になり、父の仕事ぶりを間近で見ていると、父と違って集中力のとぎれることがある私が設計士を目指すなんぞは社会の迷惑にしかならないと思うようになりました。設計責任の重さに怖気づいてしまったのです。今なら、手計算ではなく、コンピュータによるシミュレーションが可能なので、もうすこし往生際が悪かったかもしれませんが。
長じて、設計士は目指さず、イラストレーターとして就職したはずが、XMLという変化を俯瞰してしまったために、蒼くなりながらヒトの生命にかかわる案件を手がけてきました。
私は、怖がりなので慎重に作業を進めます。環境問題を重視してシンプルな生活を心がけています。技術書だけでなく文学や科学の本やフリーペーパーを読み、音楽や絵や詩に触れ、20代から80代までいろいろな年代の人と話をします。この記事で述べたことを、読者に対して語るだけでなく、自ら実践する人であり続けるよう精進したいと思っています。
本連載では、11回にわたりデータ・デザインについて述べてきましたが、Windows Phoneの正式な開発環境も整いましたので、次回からは、RIAまわりの話題を取り上げていく予定です。
※今回の記事に関心を持たれた方は、こちらもどうぞ。「XML設計の心得」無料のPDFブックです。XML、XML Namespace、XML Schema、XPath、XQuery、XSLT、LINQ to XMLの基本知識を踏まえ、XMLデータ設計者の心得について述べています（本文236ページ、拡大図版PDF付き、2009年公開）。セミナーの教材として自由に印刷して利用できます。学習教材や、リファレンスとしても利用できるでしょう。
< http://2008r2.projectkyss.net/books_R2/Default.aspx
>
※ブログ「イメージ AndAlso ロジック」に、Windows Phone のサンプル、RIA宣伝用のキャラクター、SVG作成体験用の簡易なフリーツールなどを掲載しています。開発や宣伝にご利用ください。
< http://blogs.itmedia.co.jp/seindesign/
>
※2曲入りアルバム「Change The Brain」を、Amazon MP3（日、米、英、独）、Mora Win、着うたフル、ほかで発売中です。
< http://lyric.seindesign.net/info/ChangeTheBrain.htm
>
【薬師寺聖／個人事業所セイザインデザイン】
個人事業所 < http://www.seindesign.net/
>
ブログ < http://blogs.itmedia.co.jp/seindesign/
>
PROJECT KySS < http://www.projectkyss.net/
>
< infosei@seindesign.net >
ヴィジュアル、サウンド、テキスト、コードを扱う、四国の個人事業主。科学技術や医療・福祉分野のXML案件の企画デザインに実績があり、コラボレーションユニットPROJECT KySS名義で、XML、RIA、.NETに関する書籍や記事、多数。
Microsoft MVP for Development Platforms - Client App Dev
（Oct 2003-Sep 2011）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（10/24）
・40年も前、わたしは月刊「小型映画」という8ミリ映画雑誌の新米編集者だった。当時はまだ活版印刷の時代で、市ヶ谷の大日本印刷での出張校正が毎月の行事だった。出張校正室で待機し、組み上がって来る雑誌の校正刷り（ゲラ）に赤字を入れて戻し、あまりおいしくない弁当を食べ、再校正のゲラが出るのを待機し、という数日を送るのだ。いよいよ校了という段階で、副編集長が「あー、1ページ真っ白だ」と真っ青になった。台割（本作りの設計図）を書き間違えていて、記事の入らない1ページが発生したのだ。あいにくストック原稿がなく、スタッフ一同憮然としていたら、K編集長が「よし、僕が書くよ」と、さらさらっと一気に書き上げたのが「未来の写真」という原稿で、すぐに現場に回してことなきを得た。その後数十年を経て、「未来の写真」はひとつを残してすべてが実現した。残ったひとつとは、撮影後に焦点を変えられるカメラが発明されるからピンぼけ写真はなくなる、というものだった。それがとうとう実現したというニュースをネットで知り、革命的なカメラの理屈を理解した。K編集長はさすがにそこまでは書いていなかった（書いていたらとっくに発明されていたはずだ）。いまになって、本当に頭がいい人だったなと懐かしく思い出す。昭和45年（1970）11月25日、わたしたちが出張校正室で待機中、多数のヘリが上空を飛び交っていた。陸上自衛隊市ヶ谷駐屯地において三島由紀夫事件が起きた......。昭和は恐ろしい早さで遠くなっていく。（柴田）
< http://www.heartlogic.jp/archives/2011/10/lytro_camera.html
>
「ピント合わせ」の概念を変える新しいカメラ「Lytro camera」米国で発売決定。サンプル写真もあり（Heartlogic）
< http://japanese.engadget.com/2011/06/22/light-field/
>
撮影後に焦点を変えられるLight Field カメラ、年内に一般向け製品化へ（engadget）
< http://jp.techcrunch.com/archives/20110621lytro-launches-to-transform-photography-with-50m-in-venture-funds-tctv/
>
焦点は撮ったあとに（好きな位置に）合わせる─写真の概念をラジカルに変えるLytroのCEOにインタビュー（TechCrunch）
・生命にかかわる設計。考えたこともなかった。／格闘技イベント「STRIKER 4」に行って来た。キックとMMAの両ルールあり。家人の道場の人たちが出場するというので応援に。応援シートは売り切れで、RS席。チケットは当日引き換えだったのだが、まさかの2列目で、とてもよく見える。iPhoneでズーム無しで撮影しても大きくうつる迫力の近さ。両セコンドの声までよく聞こえる。三島☆ド根性ノ助さんが観客席にいらした。格闘技イベントは有名無名いくつか行った。一番しんどいのは空手の試合。朝からトーナメント形式で行われ、休憩時間などなく、夕方まで行われるもの。道場単位だから、次はあっちの面でやる、あの人とあの人は同じ時間になったから分かれて応援、となるし、試合会場での食事なんてもってのほかだから（たぶん。誰も食事はしない）、食べそびれることも。ワンマッチは試合数が少ない分、楽。昨日のは、入場に余計な時間はかけないし、延長戦すらなく、テンポよく進むし、見合ってばかりの試合もなし。アグレッシブで、判定よりTKOやKOの方が多い。17時スタートで、終わるのは早くて21時だろうと思っていたら、19時半には終わってしまった。メインだけを見に来た人たちが、メインすら見られずに帰っていったよ......。道場の人たちはみんな勝利して、我々は気持ちよく帰宅。どの試合も面白かったから、次のSTRIKERも観たいな。テレビや離れた席とは違い、痛さが想像できるリアル感。あの強い蹴りを何度も受けてよく立ってられるなぁ、ヤバい早くセコンド割って入れ、マウントからの顔への打撃は見てるのきついわ〜、などと思いつつ。あるセコンドが「距離が中途半端！！」と繰り返し言っていたのが印象に残ってるわ。UFCをリング近くで観たら凄いんだろうなぁ。ギーダの試合を近くで観てみたいわ。（hammer.mule）
< http://www.office-deepmountain.com/striker/
> STRIKER
< http://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%BB%E3%82%B0%E3%82%A4%E3%83%80
>
スタミナやスピードがチート処理なギーダ。
< http://ja.wikipedia.org/wiki/%E3%83%81%E3%83%BC%E3%83%88
> チート