hirax.net::Keywords::「設計」のブログ

■食玩「フィンガー・ベル」の生産技術　

　モノを大量に安く生産する技術には、驚かされることが本当に多い。たとえば雑誌の付録、たとえば「学研の科学の付録」「学研の大人の科学の付録」にいつも驚かされるように、上手く手抜きをし、大量生産を可能にし、安く大量にモノを作り上げる技術にはいつだって驚かされる。数年前の食玩を見直して、そんなコスト・エンジニアリング技術の素晴らしさを今更ながらに感じさせられた。

　下の写真は、ペットボトルのコーラに付いていた食玩のハンド・ベルだ。スヌーピーのキャラクタが付いた「ハンド・ベル」、いや実際には手で持つというより指でつまむくらいの大きさなので、「フィンガー・ベル」とでも言うべきこのベルは、それでも一つ一つきちんと違う音階を奏でる。

　「フィンガー・ベル」が奏でる音の高さを変えようとしたとき、まず思いつくのは、ベルの大きさを変えるということだろう。あるいは、ベルを形づくる金属の厚みを変える、という辺りだろう。しかし、この食玩の場合、大きさはどれも同じだし、「ベルの金属の厚み」を変えるというのも、生産時の精度バラツキを考えれば、とても大量生産にはそぐわないように思える。

　そこで、この「フィンガー・ベル」をよくよく見直してみると、「低い音」と「高い音」を奏でるベルの形状が違うことに気づかされる。低い音を発するベルは、確かに低い周波数で共振しそうな剛性の低そうな「まあるい」形をしている。そして、高い音を発するベルの方は、いかにも「角度を持ち」鋭角な形で固い剛性を持っている形に見える。

　厚みなどで音の高さを変えるのではなく、ベルの形で音の高さを変えているのだと思うと、こんな小さな食玩の中に構造設計のエキスが詰まっているような気がして、とても楽しく面白く感じる。

■「ミンティア」の秘密　

　ミンティア (MINTIA) という清涼菓子がある。似たようなタブレット菓子のフリスク(FRISK)に比べて半分ほどの値段であることと、甘くフルーティな味であることなどから、私の周りでも愛好者がとても多い。

　このミンティアのケースには、実は、結構面白い秘密が隠されている。タブレットを出す部分・蓋内部の経常を眺めてみれば、少し不思議な形状であることに気づくはずだ。特に説明文などがケースに書かれているわけではないけれど、この蓋形状は、タブレットを「一回に一粒だけ取り出す」ためのものである。タブレット菓子をケースから出そうとすると、一度に何粒も出てしまい困ることがある。しかし、ミンティアの場合、そういったことは起きない。

　その仕組みはこうだ。ミンティアのケースを軽く振ると、出口の蓋内側にタブレットが一個はまる。そして、蓋を開けると、蓋の回転に合わせてミンティアのタブレットが一個「ケース内部から差し出される」というわけだ。清涼菓子ひとつひとつに、こういった細かい気遣いがされた容器設計がされているのだろう。そんな差別化の積み重ねが商品棚に並んでいると想像すると、色んな清涼菓子を買いたくなる。

■「道具」と「文化」　

「道具」は「文化」の要素の一つだ。しかも、それは比較的大きな要素である。「2001年宇宙の旅」で棒という道具を手にした猿が、その棒をついには宇宙ステーションという道具に変えたシーンが象徴的であるように、道具は人の生活スタイルに大きな影響を与え、そしてその生活スタイルは考え方・感じ方にさらに大きな影響を与える。つまり、道具は文化に影響を与える。

　「フレームワークと異文化論」が面白い。

「Railsって一本道のイメージなんでしょうか。これにそって作ればWebアプリケーションが不安定にならずに完成するんでしょうか」

「私にとって“レイルズ”のイメージはこれなんです」といいながら、東京近郊の複雑な路線図を大写しにすると、会場は大爆笑に包まれた。

この会場に来るためにどの路線を使ったら良いのかを考えたときに、さまざまな選択肢があったと思います。……そんなにレイルに縛られなくてもいいんじゃないでしょうか

　「線路」と「人生の方程式」ではないけれど、レール(線路)なんか一本じゃないし、だいたい設計した線路は実際の線路とは全然違ったりする。それが人生ではとても普通のよくあることで、それが大変さでもあるし、楽しさでもある。

　多少なりとも他の文化を知らないと、ひとつの文化の姿を実感することはできない。他のものとの差異を見て、初めて自身の特徴が見えてきたりするからだ。道具の特徴を知るためには他の道具を知ることが役立ち、道具が文化に強く影響を与えるのだとしたら、そして文化が人の生活そのものだとしたら、（一つの道具を使えるようになった上で）他の道具を眺めてみることは、人の生活に大きな影響・大きな広がりを与えるに違いない。

■画像処理WEBアプリを簡単作成用「ビジュアル言語」を作る　

　「ビジュアル言語」風の画像処理WEBアプリの叩き台を作ってみました。 いえ、正確に言えば、そんな「ビジュアル言語」環境を作ってみました。つまり、画像処理WEBアプリを簡単に作れる!?「ビジュアル言語」を作ってみた、ということになります。

　ここで言う「ビジュアル言語」という言葉には、３つの意味合い・特徴があります。

1. 処理構造をグラフィカルな部品・ワイヤーで表現・作成すること
2. 各場所で処理されている「データが見える」こと
3. 部品・ワイヤーを並べ終わった画面そのものが「アプリケーション」のGUI画面となっていること

　1,2番目の項目だけでなく、この3番目の点を意識しながら作ってみました。といっても、「叩き台」なので、デザインはいかにも開発時用（デバッグ用のデータ構造が見えたりする）など、イマイチな部分はありますが、イメージを掴むことはできるだろう、と思います。

　ブラウザ上の操作感は（UI周りはWireItライブラリを使っていて）YahooPipesを模範にしています。また、処理データ構造は（YahooPipesを意識した）ImagePipesに準拠するようになっていて（つまりある程度緩い規約にもとづいたJSONになっていて）、 「オブジェクト」に対してユーザが何かしたり、あるいは、入力部に他の部品からメッセージを受けた時に、Javascriptでクライアント内部で処理をしたり、あるいは、サーバに対して同期リクエストを送ることで、出力結果を生成し、そして出力ポートの先にある他部品に結果メッセージを送信する、という作りになっています。

　下の動画がその「叩き台」アプリケーションの動作動画です(高解像度画像もここに置いておきます)。この動画が「何をしているか」を箇条書きすると、

1. 「画像をアップロードするフォームパーツ」を作り（出力はアップロードされた画像情報を示すJSON）
2. 入力を２出力に分岐する（JavaScriptで書いた）部品を配置し
3. 入力された(JSONで表現されている)画像を表示する部品を置いて
4. 部品間をワイヤーをつなぐ

これで、「画像アップロード＋いくつかの処理＋画像表示」WEBアプリケーションのコード実装や画面設計が終了した……ということになります。というわけで、画像処理WEBアプリを簡単に作れる!?「ビジュアル言語」を作ってみたのです。「画像処理ジェネレータを作るジェネレータ」みたいなものの高機能版を、「ビジュアル言語」で作ってみたわけです。

　WireItがYahooUIライブラリに実装された折にでも、適当にサービスを立ち上げてみたいな、と思っています。

■続 WEBベース「ビジュアル言語」を作る　

　『画像処理WEBアプリを簡単作成用「ビジュアル言語」を作る』で作成した叩き台のイメージは、「データ処理フローを並べ終わった瞬間に、基本的にはアプリケーション作成（と簡単なテスト）が終わっている」というものです。「並べること」が「 プログラミング」「画面デザイン」「初期テスト」のすべてを兼ねていること、が大切で、そういう「ビジュアル言語」を作ってみたかったのです。「アイコンを並べたあとに "RUN" ボタンを押してプログラムを走らせる」とか「アイコンを並べコーディングをした後に、今度は画面デザインを別画面で設定する」なんて面倒なことはしたくない、と思ったのです。

　そういう作りをイメージした理由の一つは、画像処理アプリケーション（おそらく多くのデータ処理アプリケーション）は、「画像アップロード（データ入力）部」「スライダーやテキスト入力による数値入力部」「データ選択」「フィルタ（演算）処理」「種々の特性の表示部」といったせいぜい数種の比較的限られた機能を並べることで作られていることが多い、ということです。その並べ方にアプリケーションの特徴があったりするわけです。

　また、それぞれの基本パーツはどれもJavaScriptで覆われていることで機能拡張を楽にしたい、という構想設計ならぬ妄想設計に基づいています。5,6種類の数少ない機能を持つ基本パーツを作ってしまえば、あとはいかようにでもできるだろう、というイメージです。

　たとえば、「フィルタ（演算）処理」なんかは、JavaScript中のSJAX先アドレスを変えるだけで（それらアドレスに応じたサーバ側コードは当然用意するとして）、色んな画像処理フィルタを自由に作ることができるわけです。そういう風に基本パーツを継承した派生パーツを作っても良いし、あるいはパーツの組み合わせでさらに新しいパーツ（関数）を作っても良いわけです。以前 Imagenerator でもやったように、いくつかの簡単な機能を組み合わせたものを、さらに一個のパーツ（関数）として保存できるようにしておけば、機能を増やすことも簡単にできるだろう、ということになります。

　……と書くより、ひとことで言ってしまえば「何だかそれって面白いな」と自分で思えるものを作って遊んでみたかった、ということですね。
　データの送受信が、(下の動画（高解像度版）のように)グニュグニュと揺れ動く振動や画像の変化で実感・体感できたり、それがJavaScriptでラップされている設計構造とか「何だかそれって面白い・楽しいかも」と遊んでみたかっただけ、なんですよね。ひとことで書いてしまえば。