Webファクトリー計画

原稿を書いたら、デスクトップ上のフォルダに入れておく。メニューから実行したい”作業”を選択すると、自動処理が始まる。
テキストファイルが自動的に開き、原稿内容をコピー、CONTRIBUTEを起動して認証、デザインされたページが表示され編集可能となる。テキストは編集可能領域に挿入され、そのまま公開される。
ページレイアウトから公開までの工程がすべて自動処理された。

●原稿執筆に「CONTRIBUTE 2」を活用する

●原稿（テキスト）をWebページに自動挿入してくれる

●ページ公開までの自動処理は「Quickeys」を使用する

●自動操作のストーリーはマウスで指定していくだけ

新しい本の執筆が始まる

昨日、「本が発売されたのに（作業が終了しているのに）なぜ、このメイキング・ブログを用意したか？」について書く予定だったが、すっかり忘れていた。実は、これから新しい本を執筆するのだが、内容がWebデザインに関するものなのだ。特定のアプリケーションをターゲットにした解説本ではなく、Webデザイン全般に関わるものである。

しかも1冊ではなく、3冊同時執筆となる。多分、1冊はかなり先の作業になると思うので、完璧に平行作業となるのは、2冊。出版社は、A社、B社、C社としておこう。発売は、意外に早い。3冊ともWebデザイン関連書だが、切り口が異なる。商品として食い合いにならないのでホッとしている。

制作スケジュールとしては、それほど厳しい状態ではないので、このブログで制作日記を公開していくことが可能だと思っている。もちろん公表できない情報は、ぼかして書くことになるのだが、コラムなどを入れながら（毎日更新は難しいかもしれないが）持続していきたい。

さて、Flash 本のメイキング・ブログで何度も書いてきたが、私は”落ち着きのない人間”である。あちこち移動しながら仕事をしている。作業を成立させているのは、携帯電話、携帯ワープロ（ハンドヘルドPC）、ノートパソコン、執筆用に構築したサイトである。今回は、2冊同時執筆ということで、新しいワークスタイルを導入している。

金曜日、家電量販店で「Macromedia CONTRIBUTE 2」を買ってきた。11,340円也。このソフトが、執筆作業において、重要な役割を果たすのだ。
続きは明日‥

ページ記述言語の衝撃

過去、影響を受けた人物はたくさんいる。「アンロック・バージョン」で書いたMarc Canter氏は、Director の開発者であり、MacroMind（現在 Macromedia）の創設者である。”オーサリング”の概念をわかりやすい形で持ち込んだことに共感した。

Adobe 社を創設したJohn Warnock 氏にも影響を受けた。PostScript の開発者としても有名だ。Illustrator 88 が日本でリリースされた頃、Apple（森ビル）で勉強会がおこなわれた。このときの衝撃は今でも忘れていない。PostScript で記述したロゴデザインをレーザープリンタで印刷するデモには驚いた。「スクリプトを書いただけで、版下が出来てしまった！」と大騒ぎ。（16年前の話なのでご了承を‥）

この頃、MdN を立ち上げる前の猪股さんが、

エバンジェリストとして活躍されていた。私は学校でのデジタルデザイン授業の構築でずいぶんお世話になった。Mac をデザインに利用して授業を運営している学校は、まだ日本になかったのだ。（多摩美の二部が少し前にMac IIを導入していたので、参考にさせていただいた。）新しいテクノロジーを普及させるには、積極的に啓蒙活動する人が必要だと痛感したのも、この時期である。

Illustrator のツールとしての凄味は、PostScript を書かなくても図形やテキストを出力できることにあった。アプリケーション・ソフトウェアのダイナミズムである。作業が一変してしまうから恐ろしい。当時、Adobe主催の勉強会が定期的におこなわれていた。John Warnock 氏も来日して、ピザを食べながらワイワイガヤガヤ雑談する。クリエーターの皆さんは、新しい技法を公開したり、なかなか有意義な時間であった。

Marc Canter氏の”オーサリング概念”やJohn Warnock 氏の”ページ記述言語”のように、革新的な技術や概念は毎日のように登場してきたが、時代に受け入れられず消えてしまったものが多い。新しいテクノロジーを育てるには、地道な活動が必要だ。イノベーターを集めた勉強会やエバンジェリストの活動支援などは、とても重要。特に、アプリケーションの開発者とクリエーターが気軽に雑談できる場があればよいと思う。

Flash の未来を考えた時、商品ブランドでどこまで引っぱることができるのか興味がある。”何でもできる”Flash のアドバンテージをどう絞り込むか。ブロードバンド環境の加速、ビデオフォーマット、映像に埋め込むメタデータなど、気になるキーワードを重ねながら考えてみたい。

参考：
1995年6月発行のWIREDに掲載されているJohn Warnock 氏のインタビュー「情報伝達のパラダイム・シフト」は、今でも参考になる内容。興味のある方は‥
どうすればいいのだろう？　BOOK OFF などを探すしかないのかも‥

契約書と書店巡り

水曜日、出版契約書が届いた。この契約書を返送して、完全に作業が完了するのだ。市場に商品が出た後は、売れるかどうかである。業界で評価を得たとしても、売れなければ（ビジネスとしては）失敗なのだ。しかも、アプリケーション本の賞味期限は短いので、じわじわ売れるにしても限界がある。

木曜日、郊外にあるショッピングモールの書籍売り場へ。コンピュータ関連書のコーナーは広くなかったので１冊あればいいかな、と思ったが多めに置かれていた。大きな書店や家電量販店とは違って、こういう小さな売り場の方が感動してしまう。

今まで訪れた書店で一番感動したのは、神保町の三省堂書店である。手作りPOPが作られていたのである。思わずケータイで撮ろうと思ったが、（ちょっと前に見た）デジタル万引きの警告ポスターを思い出し、止めてしまった。カシャ！というシャッター音に気付いた店員に睨まれるのも、日記ネタとしては面白いが、このPOPを作ってくれた店員さんだったら洒落にならない。（まぁ、それもネタとしては楽しいのだが‥）

JavaScript でFlashアニメーション制作を自動化

以前、Flashアニメーションの作業を効率化するために「Adobe Illustrator」を活用しているという記事を書いた。その補足として、JavaScript を使った自動化について触れてみたい。

ご存じのようにAdobe Illustrator 10 およびCS は、JavaScriptで制御できる。（Photoshop 7, CS やAfterEffects 6、InDesign CSなども同様。）操作手順を記述して、Illustrator 上で実行するだけなので、とても簡単なのだ。

例えば、以下のスクリプトを実行すると、図版の中に使われているテキストだけ新規ドキュメントの「targetLayer」レイヤーにコピーされる。テキストのコピーや新規ドキュメントの作成、新レイヤーの作成、レイヤー名の変更などが自動処理される。数行プラスすれば、

10ファイルでも100ファイルでも‥新レイヤーを作成して同じテキストを配置するとができる。

sourceDoc = activeDocument;
targetDoc = documents.add();
targetLayer = targetDoc.layers.add();
targetLayer.name = "targetLayer";
//
sourcePageRef = sourceDoc.pageItems[0];
dupRef = sourcePageRef.duplicate();
//
dupRef.moveToBeginning (targetLayer);

［引用：Adobe Illustrator に付属しているMoveText.js］

JavaScriptは、テキストエディタで記述して保存しておくだけ。ファイルメニューの［スクリプト］から実行することができる。メニューの項目として登録することも可能。

以下は、SWFファイルに書き出すスクリプトである。フレームレートとHTMLファイル生成の有無しか設定していないが、曲線のクオリティや画質、アニメーションのループ、解像度なども設定できる。

swfOpt = new ExportOptionsFlash();
swfOpt.generateHTML = false;
swfOpt.frameRate = 30;
fileRef = new File("/flatmotion.swf");
activeDocument.exportFile(fileRef, ExportType.FLASH, swfOpt);

キャラクターの各パーツをレイヤー分けしたファイルに対して、JavaScriptでアニメートする等、バンク方式の範疇であれば十分、自動化できるのである。WebDesign MAKING BOOKS ブログでも書いたが、「Macromedia CONTRIBUTE」で自動更新をおこなっている。（Quickeysというユーティリティで自動制御している。）例えば、決められたフォルダにキャラクターのファイル（Illustratorファイル）を入れておけば、自動的に定義されたアニメーションが設定される。さらにSWFファイルで書き出され、CONTRIBUTE でWebページに挿入、公開できるのだ。ついでに作業完了のメールを自分宛に送信できる。ぜんぶ自動操作だ。

どういう場面で役に立つのか、後日、書きたいと思っている。個人がFlashアニメのバリエーションを100作成しなければならない‥時など、すごく役に立つのだ。（そんな場面は滅多にないと思うが‥）

もちろん、Flash MX 2004 もJavaScript による制御が可能だ。JSFL（JavaScript Flash Language）である。但し、Illustrator を制御するように簡単ではない。日本語文献が極端に少ないのも問題‥。大まかに知りたい人は、「Macromedia Flash を拡張: 作業プロセスをカスタマイズ、簡素化」が（ちょっとだけ‥）参考になるかもしれない。

すぐに利用できる「JSFL Extensions」はMacromedia サイトから入手できる。

PCの慣例と実社会のメタファ

デジタルマガジンを制作するための「Digital Magazine Maker」が、10月1日発売される。（販売：ライブドア／価格：10,290円（本体9,800円））Flashムービー（SWF）として書き出せる。

”読ませる”コンテンツにおける”ページめくり”のインターフェースは、昔から賛否両論があって、用途が限られていた。実際の本のようにパラパラめくることが可能なら、軽快さが好まれる場合もある。但し、一覧性の向上とはならず、なかなか難しい。大衆指向と捉えるにはまだ難がある。（イベントサイトなど、

期間限定でみせる見本などには面白いかもしれない。）

こちらは、ブログ+アフェリエイトという定番メニューを”本棚”の視覚化という切り口で展開したもの。「ブクログ -WEB本棚サービス-」である。

Flash ではなく、JavaScriptで制御している。動作はとても軽快。コレクションのインターフェースモデルとしては楽しいが、閲覧者にとっては本の表紙を縮小表示してもらった方が有り難い。ザッと見渡せる（一覧できる）からだ。‥と言ってしまうと身も蓋もないのだが。

頻繁に更新、閲覧されるブログなどのコンテンツは、Less is more、Simple is best だと思っているので、使いやすさ‥つまり機能主義的に考える。ただ、エクスペリエンスの要素を定期的に取り入れるのは楽しい。レンタルビデオ店の棚替え（商品の置き場所を入れ替える）みたいな変化は時々あってもいいと思う。期間限定なら”ページをめくる”とか”本棚におさめる”といった実社会のメタファを採用してもよいのでは。

Web Design MAKING BOOKS

このブログは、Flash本の制作日記だったが、本が発売された後、Dreamweaver やWebデザイン全般の記事も掲載されるようになってしまった。ブログ名にFlash と付いているのだから、テーマを絞る必要がある。
そこで、Webデザインに関する記事（書籍執筆やコラムなど）は、新しいブログに投稿する。早速、立ち上げた。

［Web Design MAKING BOOKS］

まだ、テスト投稿しかアップされていないが、週末から記事を書いていきたいと思っている。（現在、サイドバーなどのリンクに多少の不備あり。）

FLASH BASIC 韓国・中国語版

Flash は、世界中のクリエーターに使われている。他国から届くメールを見て、ほんとに痛感する。残念なのは、海外からのスパムメールと一緒に振り分けられ、かなりの数が削除されてしまっていることだ。毎日届く300通以上のメールを１つひとつ確認することは難しい。

そこそこ要望も集まってきたので、FLASH BASIC blog の韓国語版、中国語版を公開することにした。（有料の機械翻訳で手早くおこっているが、アプリケーションの手順操作が大半なので大きな問題はないようだ。）韓国語、中国語版のサイトの方がアクセス増になると思うので、サーバーは変えている。

韓国のクリエーターや学生の作成したFlash作品を見て感じるのは、Webにおけるアニメーションの小技が利いていること。どうやらWebアニメーションについて学べる環境も整っているようだ。韓国は、

ソウル五輪から国策としてキャラクタービジネスに力を入れており、体系的に学べる教育機関も多いのだ。

インターネットでブレイクしたキャラクターといえば、世界的ヒットとなった韓国の「マシマロ」が有名。大学のアニメ学科にいた学生がネットで公開したFlashアニメーションである。同じく韓国発の人気キャラクター「PUCCA & GARU」は、アジア市場を意識して企画された。このキャラクターを生み出したブーズ社は、毎年３倍以上の売り上げを伸ばしている。

世界中のFlashクリエーターが見ている［Puccaclub］、Flashアニメの最高技術を持つ［vooz］

ネットでブレイクした人気キャラクター［mashimaro］

デジタルコミックなどのWebコンテンツも多い

さて、FLASH BASIC blog だが‥更新作業は現在も進行中。実は、まだ書けないことも多々あり、だらだらと公開をのばしている状態、早くなんとかしたいと思っている。

講座アーカイブ

FLASH BASIC blog の講座アーカイブをやっと‥開設。（※ID、パスワード必要）
本日は、Flash Live !!（2004.5.24、2004.9.12）のFLAデータをアップロード。随時、講座のサンプルなどを置く予定。

※利用希望メールを送信して、まだ返信メールが届いていない方は、再度送信してみてください。（サーバーメンテナンスの時期がありましたので。）

Flash Organic Animation [9]

今回のFlash Live !!は、1本の線を描き、生命を誕生させ進化させていくという壮大な試みであった。非定型（irregular form）かつ抽象形体（abstract form）を意識しながらシンプルに表現しなければならない。
技法的には、モーショントゥイーン、シェイプトゥイーン、モーションパスを駆使したデモンストレーションである。15分とか30分という制作時間で実演したのは、トゥイーン機能の威力を示すことにあったのだ。（以下のアニメーションは失敗作で捨てたものだ。かなり複雑に構造化しているが制作時間は30分である。）

[アニメーションを見る]（12KB）

Flash で「ドリッピング」技法を試みたときにも書いたが、身に付けたいのは基礎デザイン力である。形、色、質感それぞれを常に意識して、創作することが重要なのだ。Flash Live !! というのは、基礎デザインの重要性を考えてもらう手段である。空手で言えば、氷を割ったり、バットを折るなどの派手なイベントに近い。
次回は、デザインソースとしての自然風景をテーマにしてみたい。

今回作成したFlashムービーのFLAデータ（1～8）は、FLASH BASIC blog の講座アーカイブに置く予定。興味のある方は、ダウンロードしてみてほしい。（難しいことは何一つしていないが‥）

Flash Organic Animation [8]

※この記事は「Flash Organic Animation」のプロセス８である。プロセス１から閲覧することをお奨めしたい。（完成ムービーの動きが”気持ち悪い”という評判？だったので、最初から見た方が安全。）

１．最初に描いた線の色を変更する。６つのシンボルを各々開き、色（明度）を設定していく。

２．背景色を濃いグレー変更する。

[アニメーションを見る]（7KB）

Flash Live !!「１本の線を生命体に」、とりあえず一段落。（完成ではないが、このムービーはここまでにしておく。）ルールをもう一度、確認。

テーマ：Organic
エレメント：１本の線のみ
制作時間：15分以内
データサイズ：10KB以内

制作に要した時間は、ギリギリ15分。データサイズは、7KBでセーフ。トゥイーンとモーションパスを組み合わせると、オーガニックなアニメーションを容易に作成できる。試行錯誤しながら動作をメモすることが重要だ。「どう構築すれば、偶発的な面白さが表現できるか」というコツがわかってくる。

Flash Organic Animation [7]

１．最新のムービークリップをステージに２つ配置する。配置するレイヤーは分ける。インスタンスの明度を各々変更する。（下のインスタンスの方を濃く設定しておく。）

[アニメーションを見る]（7KB）

ここまでの制作時間は、13分ほど。データサイズは、7KBである。

Flash Organic Animation [6]

１．空のムービークリップを作成。パスに沿って回転するムービークリップ（インスタンス）を配置、モーショントゥイーンを設定。新しいレイヤーを作成して、線を描く。（この線がモーションパスになる。）モーションパスのレイヤーをガイドレイヤーに変更する。インスタンスをパスに合わせる。

２．同様の方法で逆の動きを作る。このプロセスのポイントは、モーションパスの描き方である。ここでは、描いた線を変形させている。さらにイージングを設定しているので、動きにノイズが入り生命力、躍動感を表現。データサイズは、6KBになった。

[アニメーションを見る]（6KB）

Flash Organic Animation [5]

１．空のムービークリップを作成。３種類の動きを組み合わせたムービークリップ（インスタンス）を配置、モーショントゥイーンを設定。新しいレイヤーを作成して、楕円を描く。（この楕円がモーションパスになる。）

２．楕円（モーションパス）のレイヤーをガイドレイヤーに変更する。インスタンスをパスに合わせる。[パスに沿って回転させる]をチェックしておく。

[アニメーションを見る]（4KB）

Flash Organic Animation [4]

１．空のムービークリップを作成して、３つのムービークリップ（キーフレームのみ、シェイプトゥイーン、シェイプヒントで調整）をランダムに配置する。

２．ムービークリップをステージ中央に配置する。３種類の動きを組み合わせたアニメーション。データサイズはまだ2KBである。

[アニメーションを見る]（2KB）

Flash Organic Animation [3]

１．ムービークリップを複製する。シェイプヒントを追加して、Accidental Form（偶発的形体）を無くす。ムービークリップ（シェイプヒントを追加したもの）をステージ中央に配置する。動きにエラーが無くなり、正しく滑らかにアニメーションする。

[アニメーションを見る]（1KB）

Flash Organic Animation [2]

１．ムービークリップを複製する。フレームを追加して、シェイプトゥイーンを設定する。

２．ムービークリップ（シェイプトゥイーン）をステージ中央に配置する。

[アニメーションを見る]（1KB）

このプロセスでAccidental Form（偶発的形体）を創り出す。糸が絡んだようなメタモルフォーゼのエラーをそのまま使用する。

Flash Organic Animation [1]

Flash Live !! の記録を掲載。今回のテーマは「１本の線を生命体に」である。たった１本の線でもFlashのトゥイーンアニメーションを使えば、生命を感じさせることができる、という実践。

テーマ：Organic
エレメント：１本の線のみ
制作時間：15分以内
データサイズ：10KB以内

制作時間は、15分以内とする。あまり複雑な構造にすると時間がかかってしまうので、トゥイーンとモーションパスを駆使してシンプルなムービーにする。

１．線を描く。この１本の線から発想していく。

２．線を変形させて６つのバリエーションを作る。各々をシンボルに変換する。

３．空のムービークリップにインスタンスを配置する。

４．ムービークリップをステージ中央に配置する。

[アニメーションを見る]（1KB）

FLASH BASIC blog UP15

5月24日におこなったFlash Live!! のアーカイブを[fb1-015]として掲載。FLAデータは、講座アーカイブに保管される。

Dreamweaverの本、22日発売

Dreamweaver 本の発売日が決まった。今月の22日（水）、本屋さんの店頭に並ぶ予定である。

本作りに関しては、このブログに時々書いてきた。アイディアから原稿書きのプロセスは、あちこち移動しながらのモバイルスタイル、主にカフェで作業してきたことは、以前お伝えした。
私の昔からのワークスタイルは、本や雑誌記事を書く際、必ず専用のサイトを立ち上げることだ。Flash 本のときに書いた「Flash 本の作業プロセス」と「Flash本の原稿と動画メモ」を参照していただけるとイメージがわかると思う。

本のための専用サイトは、前々回からDreamweaverで構築していて、必要な情報（テキスト、サンプル資料、サンプル画像、サンプル動画など）が日々蓄積される。文章の言い回しを直したり、サンプル画像を入れ替えたり、いろいろな部分を細かく修正していくが、同期ボタン１つで専用サイトが更新される。作業パソコンとサーバーの同期が、とても有難い。

ケータイやシグマリオン（←丸2日くらいバッテリーが切れないのでワープロとして持ち歩いている）、小型ノートパソコンなどで書いた原稿の断片は、専用のメールで自分宛に送信され、

スタジオで作業する際、まとめてDreamweaver に放り投げていく。あとは、[ファイル]パネルを使って切り貼り、編集、同期させ専用サイトを更新するのだ。

[サイトに日々アップされた原稿を見る]
※これは専用サイトから抜き出し、リンクなどを外したコピー。

本の作業が終わると、専用サイトはサーバーから削除されるが、パソコンには残してある。これも以前から書いてきたことだが、この専用サイトこそ、次回本につながる財産になっているのだ。というのは、原稿だけではなく、そこで利用した資料やWeb上の参照サイトなどの情報が全て入っている。キーワードなどを書き出したメモなどもリンクされているので、後で閲覧しやすいのだ。

これが、単にハードディスクに保存しているデータだったら、後で見直す気にならない。まして紙だったら、閲覧どころか保管するのも大変である。通常のWebサイトのように構造化されているからこそ、次の仕事などで閲覧することができる。

例えば、書籍のネタで使わなかったものを雑誌記事用に再編集することも簡単だ。なにより同じ作業の繰り返しがなくなる。ただの流用ではないから、練り直して、さらに良い記事になる可能性が高いのだ。
極力、電話やFAXを使わず、専用サイトをベースにメールのやり取り中心にさせていただいているのは、まさにアーカイブの利を実感しているから。そろそろ、ブログ（というよりCMS）も本の作業に活用しようと考えている。

書籍の予定

2年前に出版したWebデザイン基礎の改訂新版、発売決まる。今日、スケジュールの打ち合わせ。Web業界もずいぶん変わってしまったので、2年先を見据えて執筆しようと思っている。CSS デザインに関しては、リッチな段組レイアウトを徹底解説したい。この本は、年内作業だ。進捗は、ブログに書いていく予定。

あと、FLASH GROOVE の書籍化について数社と意見交換させていただくので、もしかしたら実現するかもしれない。（出版不況であることを前提に可能性を探ってみたい。）
インターネット日記学の方は、いまだマイペース‥執筆中。

FLASH blog 週末更新

FLASH BASIC blog 新規分を含めて、週末に更新。FLASH GROOVE 3 で非公開になっていたコンテンツを若干流用する予定。

10年前の業界

台風の影響で、激しい雨が降ったり、晴れているのに雷が鳴ったり、非常に不安定。1日平均8件の打ち合わせ（といっても半分は意見交換）が本日で終了した。さまざまな立場の人と会えて、大変勉強になった。私のように組織に深く属していない人間は、定期的にこういうことを実行しないと、業界を俯瞰できない。

午後、年内発売のWebデザイン本（Webリフォーム）の構成案を作り始める。今後重要になってくるテーマを中心に構成。アプリケーションの解説本ではないので、3年くらいは使える本にしたいと思っている。この本の作業に関しては、ブログで紹介していくことが可能かもしれない。

夕方から、雑誌記事２つ、キーワードをノートに書き出す。１つはデザイン系の雑誌、締切は明日。急いで、手書きの原稿をワープロでデジタル化しないといけない。（最初からパソコンで書けばよいのだが、長年のスタイル‥この方がアイディアをまとめやすいのだ。）

夜、企画書を２つ作成。１つは依頼ではなく、提案用だ。まったく新しいアプローチのWebデザイン・マガジンの企画である。資料として10年前の雑誌を集めてきた。10年前に語られていたことが、

現在どうなっているのか？
現在のWebクリエーターの多くは、当時のマルチメディアクリエーターである。3年後、Webクリエーターという職がどう細分化されるのか興味深い。

思わず、当時の雑誌を読み込んでしまい、作業中断。

10年前、NeXTのスティーブ・ジョブスは「オブジェクト指向が理解されるまで、こんなに時間がかかるとは思わなかった」と語っている。現在‥この頃、やろうとしていたことをAppleで実行している。
ASAHIネットは、まだテキストベースのWWWサービスだった。1995年1月からダイヤルアップIP接続によるインターネット接続サービスを開始。当時の大きなニュースになっている。それにしても現在のブロードバンド環境の驚異的な普及スピードに驚かされる。（ソフトバンクの功績？）
GAINAX が、FM-TOWNS 版のゲーム用にアニメーションとCGを融合させた映像を制作。大きな話題となり、取り上げられている。アニメーションとCGを融合するノウハウをここで確立しておきたい、と言っているのだ。今では当たり前の技術なので理解しにくいと思うが、実は驚くべきこと。パソコン通信を利用したイベント事業の実験もスタートさせている。（この後、インターネットの普及が始まる。）

さて、調査の目的だったWebデザインに関する現在までの動きだが、これが実に歪である。と同時に、削ぎ落とされてきたベーシックなテクニックを再確認することができた。早々、企画書に盛り込むつもりだ。

調整中

本日(水曜)、日曜と月曜の記事が埋まります‥

ブログの再利用

このブログは、Flash MX 2004の本を執筆中（正確に言うと作業終了間近、5月5日）に立ち上げた。目的は、本が作られて書店に並べられるまでをレポートすることにあった。もちろん、直接的ではないが本のプロモーションも兼ねていたのだ。（そのわりに出版社へのリンクがなかったりして、広報機能は低いのだが‥）

本はすでに発売されているので、その役割は終わっているはずだが、更新は続いている。もはや「FLASH MX 2004 MAKING BOOKS」というブログ名では違和感が出てきた。そろそろ、整理したいと思っている。例えば、Flash とWebデザインを分けて各々独立したブログにする等、内容を絞り込みたいのだ。

ブログの中身を覗きながら再編集

ブログに蓄積されている記事をカテゴリ別に再構築するように、分割していきたいのだが、

なかなか難しい。ブログサービスには、そういう機能がないのだ。しかたないので、（応急処置として‥）ある段階でデータを強引にダウンロードして、自前サイトにアーカイブすることにした。このブログは、そのままFlash 関連のブログとして生かす。

ブログに蓄積されている画像（一部）
[拡大表示]

とりあえず、Flash（メイキングブックを含む）、Webデザイン（メイキングブックを含む）、クリエーターコラムの３つのブログを用意する予定。

キャラクターセット

Flashアニメーション・クリップ集の一部を公開中。（※この記事は関係者向け）

スクイークに学ぶ「Flash おもちゃ箱」のアイディア

昨日は、Flash で制作するコンストラクション系Webアプリケーションについての勉強会。
講座でも紹介したコンストラクションツール「Flashcan Animator」が話題になる。このFlashムービーは、用意されているクリップをタイムラインに配置してアニメーションを編集、完成したらメールを送信、すぐにアニメーション公開用のURLが届くという仕組みだ。

同じような仕組みのコンストラクション系のアプリケーションは多いが、携帯電話向けのサービスも出てきそうだ。ケータイ上に（ぱたぱたアニメ、簡単なセリフなどの）ミニアイコンを表示して、それを好きな順番に並べるというシンプルなもの。完成（送信）ボタンを押すと、URLが届く。Flash アニメーションなので、機種が限定されるがテーマ次第では面白いサービスになる可能性がある。

そして、私がFlash おもちゃ箱の参考事例として取り上げたのが、

squeak（スクイーク）である。
昨年、アラン・ケイが「squeak」を使って、子供たちにインタラクティブなアニメーション制作を教えるという番組があった。マウスだけで、条件分岐などの複雑な仕組みを実現するのだ。この番組でやっていたのは、Squeak Toys（タイルプログラミングのこと）。
以下のように、プログラムのまとまりをカードのように扱い、マウスでぺたぺた貼っていく。

1. squeak を起動して作品（自分専用のデスクトップ）を作成

2. オブジェクトを描く（絵や写真をsqueakデスクトップにドラッグして読み込んでもよい）

3. オブジェクトに組み込みたいスクリプトをドラッグしていく

4. スクリプターの中に命令が書き込まれていく（作業中、オブジェクトのまわりには「halo（ハロ）」という小さなツールアイコンが表示される）

5. 複雑な衝突判定なども視覚的にプログラミング（スクリプトに触れる必要はない、すべてマウスを使った切り貼りで作業できる）

squeak は、Apple が開発した（Smalltalk という言語をベースにした）開発環境である。フリーウェアなので、ダウンロードして誰でも自由に使用することができる。ご興味のある方は、日本語版が用意されている「多言語化Squeakホームページ」へ。バーチャルマシンなのでWindows、Mac、Linux などOSを限定しない。

面白いのは、Nebraska というツールを使えば、他人のsqueak を操作できること。例えば、東京の小学校にあるパソコンで起動しているsqueak を北海道の学校にあるパソコンで操作することができるのだ。東京の小学生が、北海道の先生に操作を教えてもらうことも可能だし、学生同士の合作もできる。

「Flash おもちゃ箱」の提案というのは、バーチャルマシン（といってもFlashだから疑似）のようにデザインして、部品オブジェクトやタイル（スクリプト）をマウスで組み合わせていくというスタイル。そして、複数の人が参加できるコラボレーションワークという楽しみも提供できるコンテンツのプランニングである。
私にはとても作れないが‥せっかくFlashもここまで進化してきたので、アイディアソースとして公開していこうと思っており、（簡単なプロトタイプを付録にする）本の企画としても準備している。

Adobe PageMill から得たもの

「Webリフォーム」コンセプトの新しい本、今日から構成の作業に入る。部分的に執筆もスタートする。（取材も始めようと思っている。）
現状把握のため、Webデザインの歴史についても触れていく必要がある。本のなかで是非とも紹介しておきたいのが「PageMill」というアプリケーションソフトである。今日は、少しだけ‥この話題を。

PageMill が登場するまでは、1ページ15,000〜20,000円が相場。これは基本ページの価格。（１ページの基準というのは紙ベースの考え方だったのだ。）作業は、原稿をテキスト入力してタグをマークアップするだけ。挿入されるイメージは、画像処理の別料金。テキストを流し込んだだけのHTMLファイル、

100ページこなせば150万円である。3日間ほどの売り上げだ。トップタイトルのGIFアニメーションに10万円〜という価格設定をしている制作会社もあった。

バブリーな時期はしばらく続いたが、1996年12月に「Adobe PageMill 2.0」がリリースされてから状況が変わってきたと記憶している。「Adobe SiteMill 1.0」のリリースも大きく影響した。SiteMill というのは、サイト管理ツールである。Dreamweaver の［ファイル］パネル（［サイト］パネル）をイメージしていただきたい。

安価なPageMill とSiteMill を導入して、ページデザインを安く受注する制作会社が増えてきたのだ。（当時、業務用のHTMLオーサリングツールは高額だった。）テンプレートにテキストを流し込んでレイアウトする作業などは、仕様書があれば学生アルバイトでも可能となり、プロのデザイナーはサイト全体のデザインにじっくり取り組めるようになった。この頃はまだ、Webデザイナー、Webクリエーターという肩書きで仕事している人は少なかったが、サイトの構造デザインへ移行した人は、Webプロデューサーと名乗っていたような気がする。
グラフィックデザイナーだけではなく、プランナーやプログラマ、カメラマンなどからWebプロデューサーという職へ移行した方々もいた。

プロジェクトで作業が進むようになって、Webサイトの仕様書、スタイルガイドなどを用意するようになった。例えば、行揃えで使用するタグを統一したり、カラーライブラリやグローバルパーツなどを専用ツールで管理して共有化するようになったのだ。また、CGIで新着情報を自動更新できる仕組みをクライアントに提供する制作会社もあった。（Macromedia のContribute のような自作ツールを提供して、Webに詳しくない担当者であってもページ更新を可能にしていたのだ。）

とにかく、Webデザインに携わるクリエーターは、泳ぎ続けないと死んでしまうサメのように、日進月歩で進化するWebテクノロジーを追いかけ、既存のデザイン技法を当てはめ、試行錯誤を続けながら、実践（仕事）するしかなかった。デザインが商売だから、仕事をして生活費を稼ぎながら勉強するのである。逆の見方をすれば、勉強しながら仕事している人ばかり、要するにベテランが存在しない業界だったのだ。

7、8年経った現在、当時、徹夜続きで寝袋を必需品としていたデザイナーの多くは、制作会社の経営者である。まだまだ若い業界だが、それでも‥ゆっくりと世代交代が進み、Webデザイナーを育成する立場でがんばっているのだ。

FLASH POCKET

「Flash おもちゃ箱」POCKET ANIMATION バージョンの記録。ミニアニメーションとミニ絵本を同時制作。角丸の飴缶パッケージに埋め込んだPDAで見るFlashアニメ玩具。