デジハリ：「NARUTO」「銀魂」のプロデューサーが語る

20時より、デジハリ大学の特別講義に参加。

新しい学習指導要領では、情報の専門教科にコンテンツ制作関係が盛り込まれている。長い目で予習を兼ねて伺った。

タイトルは、『「銀魂」「NARUTO」のアニメプロデューサーが語るテレビアニメ制作の舞台裏～』。講師はテレビ東京のアニメプロデューサー東不可止（ふかし）氏。『映画「おくりびと」が出来るまで』と同様に、高橋光輝学長補佐がモデレーターを務める。

「アニメは民放で流す限りは芸術ではなく、裏にビジネスがある」という言葉が印象に残った。テレビアニメが減少し、テレビ東京とテレビ朝日以外は撤退の様子らしい。その中でも、テレビ東京の「NARUTO」と「銀魂」は人気番組という。このあたりの事情は全く分かっていなかったので、Webで番組の予習をして参加した。

会場は若手ばかりで200人はいただろうか。アニメの街秋葉を感じさせた。

講義終了後、「銀魂」のエンディングテーマを歌うグループ「PENGIN」が生で歌う。入り口では、学長も写真を撮ったり、手拍子を打って盛り上がっていた。

次にデジハリに伺うのは、6月20日の特別体験授業。

デジハリ：映画「おくりびと」が出来るまで

19時～21時、秋葉原のデジタルハリウッド大学院の特別公開授業に参加

同大学院の高橋光輝准教授の授業『現代における映画製作概論』の第一弾特別公開講座で、タイトルは
～第８１回アカデミー賞外国語映画賞受賞記念～
エグゼクティブプロデューサーが語る、映画「おくりびと」が出来るまで

高橋准教授と、「おくりびと」のエグゼクティブプロデューサー間瀬泰宏氏がインタビュー形式で講義を行なう。参加者は大学院生以外、満員の50名。参加条件は「おくりびと」を鑑賞していること。

まず最初に、この授業は大学院の基礎科目で、『映画の誕生から現在までの映画の変容を辿りながら、映画とは何か？を常に各自が問いながら、今後の映画製作のありかたやスタッフの役割、規範などビジネスモデルの変化もあわせて多くのケーススタディを通じて指導している』という説明。

間瀬氏は、TBS入社後、「筑紫哲也NEWS23」のプロデューサーなど報道関係で17年、98年より映画事業に携わるようになった。「おくりびと」もTBSの作品で、配信が松竹。

この授業のコンセプトに従ったインタビューで、公式サイトのプロダクションノートをさらに突っ込んで解説していただいた。例えば、

本木（主役）の発案から、脚本、助演男優、監督、助演女優、音楽と、スタッフが決まっていったいきさつ。
CG一切なしで作る予定だったが、後に死体役の頚動脈やまつ毛の動きを消すためにCG化したこと、ふぐの白子のシズル感を出すために、湯気はCGにしたこと。
多忙な久石譲が音楽を引き受けたいきさつ。
撮影地の山形県酒田市住民からの指摘。
新宿ピカデリーが完成するまで、１年間公開を待ち、その間に10万人の事前試写会など異例の宣伝戦略を展開したこと。
松竹とは海外に出すことを条件に配信契約し、カンヌ、ベネチアがダメでモントリオールでグランプリを取ったこと。アメリカでアカデミー賞にノミネートされてから受賞するまでのエピソードなど。

２時間があっという間に終了。
もう一度「おくりびと」を見よう。１０倍楽しく見れそうだ。

特別公開授業第二弾は、７月６日という予告。WEBでチェックしないと。

ICTEセミナー：第2回映像コミュニケーション講習会

職場から中抜けして、標記セミナーに参加

会場は秋葉原駅前のデジタルハリウッド大学。テーマは「プロから学ぶ 撮影・編集のワンポイントテクニック！」、講義と実習で３時間の内容。

前半は、アーツエイハンの飯塚吉純氏、板坂勇児に寄る講義。人物の撮影を中心に，具体的な撮影技術を紹介していただく。参考書籍を質問した先生がいらしたが、CGクリエイター検定2級のテキストディジタル映像表現がちょうど良いかと思います。

　

水平レベルの付いた三脚の操作とカメラワークを体験させていただいた。やはり、普段使っている三脚とは質感も安定感も全然違った。

後半はサードキャンパスに移動して、Premiereを使った編集の実習。用意された動画素材から、トリミングしてつなぎ合わせ、タイトルを入れるという作業。トランシジョンやBGMの扱いはしないが、初めての先生も多いのでこれで十分な講座。
授業ではAfterEffectsを多く使うので、Premiereの教え方を勉強させていだきました。

終了後、職場に戻って体育祭の応援練習をする生徒の付き添い。水曜日まで天気が持って欲しいものだ。

DTP活用：今年度最後の授業にて

期末試験がおわり、本日からの時間割りでは１回の授業で終了となる科目が多い。

先週のプレゼン試験の評価票を返却。作品を相互閲覧、作品の電子データを提出。その後、私と講師の先生からのメッセージを伝え、生徒一人ひとりの感想や今後の抱負を述べる。14人というファミリー的な環境での授業ゆえ、皆の言葉にも重みがある。

　

私からは、この学校に赴任してから、DTPの科目を担当することになり、技術を身につけるためにクリエイティブスクールに通った話をした。毎週土曜日に半年の授業でいくらかと尋ねると、「５万円」という回答が。講師の先生も笑っていたが、実は60万円を超える額。その他にMacを買ったり、ソフトを揃えたりと100万円は費やしている。オプションのクラスに通ったり、Web、ムービーの講座を受けたこと等をあわせると、その数倍となる。デジハリにはかなり貢献しているが、通わなかったらけして技術は身につかなかっただろう。

費やした額は、生徒のニーズにあった科目開発と授業の質を高めたことで自己実現をし、元は取れたと考えている。

■お世話になったデジタルハリウッド横浜校。昨日、９月に校舎閉校という知らせが届いた。

ICTE東京支部：映像コミュ二ケーション講習会

14時より、秋葉原のデジハリ大にて標記講習会に参加

13:30に、昨春デジハリ大に進学した卒業生と待ち合わせる。大学の様子を聞きながら、第１回デジタルハリウッド大学卒業制作展を一緒に見学した。クリエイト関係の勉強は、横浜清陵総合高校での授業「DTP活用」「図形と画像の処理」「映像メディア表現」で習ったことを、本格的なソフトを用いて行なっている様子。Mayaに慣れるのが一番大変だったという。

14:10からの講習会の１部は、この卒業制作展の見学なので、彼と同行しながら作品を見た。第１回だからか、他の展示会ほどの派手さは無かった。

　

卒業生と別れて、第２部の会場である富士ソフトのビルに移動。このビルの中にもデジハリ大の教室があるが、セキュリティが厳しいため、出入りのたびに職員がカードで開けてくれた。

アーツエイハンの飯塚吉純氏と板坂勇児氏の講義は

　１．映像制作の歴史といま
　２．プロが語る映像制作のノウハウ
　３．映像制作で知っておいたほうがよい事
　４．学校紹介ビデオ講評，意見交換

という内容で、中央モニターに映しながら説明してくださった。勉強して知っている部分は少し眠くなったが、後半はなかなかためになった。
総合学科に勤務しているためか、現場の方から話を伺える機会を大事にしている。企画していただいた幹事の皆様、ご苦労さまでした。

明日の準備などがあり、急いで職場に戻った。
予定していた懇親会に出れなかったのは残念。

デジハリ081227

デジハリ横浜校Webデザイナー専攻４月生の卒業制作発表会

仕事納めをして、職場から車で直行。18時30分の開始直前に滑り込む。

デジハリ横浜校のセミナールームにて開催。受講生が卒業作品のプレゼンをし、講師から講評を受ける。2名が提出できず、発表会を欠席だった。フルフラッシュサイトやテキストをCSSできれいに整えたサイト、どれも個性豊かな力作だった。転職を考えている受講生が多く、そのモチベーションがクオリティに表れている。

私は転職のためではなく、情報科教員としてのスキルを身につけるために受講している。３年前に同コースを卒業していることと、年末に向けての仕事との兼ね合いもあって、早くから講師にも相談をし、参考作品としての発表をさせていただいた。

納得はしているが、皆と同じように卒業証書を受け取れないのは残念だし、悔しかったな。

ICTE東京支部：第３回Webデザイン講習会

バレーボールで有名な東亜学園にて、標記講習会に参加

午前中の会合から直行したが、30分ほど遅刻。30名ほどが参加していた。

　

サブタイトルが「ちょっと体験してみる業界のWeb制作」ということで、デジハリ大の講師でもあり、Web制作会社ウェブマックスの代表取締役社長でもある渡辺康一氏が講師。アシスタントにデジハリの職員の方がついてくださった。

内容は、イラストレータ、フォトショップ、ファイアーワークス、ドリームウィーバーという業界スタンダードのソフトがどのように使われているかの「さわり」の説明。時間的に無理があるので、体験というほどの内容ではない。デジハリの授業の紹介のようなもの。

ちょうど、私が受講したWebデザイナー専攻の授業から、対応する内容を紹介する。
・イラストレータで道路を作成
・フォトショップでマスク処理（この操作方法は初めて知った）
・ファイアーワークスでスライス
・ドリームウィーバーでCSS

16時より、新井薬師駅前の居酒屋で懇親会。

Squeakによるプログラミング教育を実践している、東亜学園の北原先生、都立練馬高校の吉岡先生と情報交換を行なった。武蔵工大の小池ゼミがSqueakの学習環境の整備をしているが、我々が高校で実践をして、その成果を学生がまとめあげることになる。連絡を取り合って、情報交換の場を設定することができた価値は大きかった。

デジハリ081115

昨晩、19時～21時。PHP講座第11回目。

情報デザインフォーラムの懇親会を中座させていただき、元町駅からみなとみらい線で横浜に向かう。

本日の内容は、ショッピングカートで［注文確定］を押したときのトランザクション。［注文確定］すると、購入テーブルと購入詳細テーブルが更新される仕組みになっているが、もし、後処理のデータベース操作にミスが出た場合、２つのテーブルの整合性が取れなくなってしまう。

これは成功した場合に遷移する画面。実際に、後処理のSQL文を意図的にスペルミスして実行すると、エラー画面（error.php）に遷移し、phpMyAdminでデータベースを表示すると、前処理の分だけ更新処理が行なわれていた。これを防ぐ機能の実習をした。

すでに３分の１の受講生がドロップアウトしている。分かりやすさと時間短縮のため、今回は、用意したソースコードに工夫をしてあった。トランザクション処理を行なうSQL文「bigin/rollback/commit」を空白にして、いずれかが入るとコメントをつけている。

もちろん、最初に入るのが「begin」。

途中の条件分岐の中に幾度と出る、エラーの場合の「rollback」。

問題がなければ確定するために「commit」。

次回が最終回。

管理画面から、特定のメンバーの特定の月のデータを表示させて、このECサイトを終える。
そして、レンタルサーバでPHP＋MySQLの環境を実現するための注意、という予告。

デジハリ081108

19時～21時。PHP講座第10回目。

ECサイトの会員登録での登録と更新、ログイン後の画面遷移に対応するセッション管理を学ぶ。

まず、画像のようにログインしているときは、登録は「更新」、ログインしていなければ「新規登録」と判断でき、
　更新：update文
　新規登録：insert文
のSQLを実行すればよい。これを、条件分岐せずに行なうために、
　ログイン済み：delete文で　会員のレコードを削除
　いずれにせよ：insert文で　登録
とすることでコーディングがシンプルになる。

PHPはPerlのように連想配列を使えるので、セッション関数を扱うのも楽。PHPは使いやすいという理由の一つだ。

次回は、ショッピングカートの注文確定ボタンに関する機能という予告。

デジハリ081101

19時よりPHP講座第9回目。

後夜祭のビデオを取り込んでから、デジハリ横浜校に急ぐ。本日は校舎の見回りなどがあり、19:30までが勤務時間だが、１時間の有給休暇をとらせていただいた。

今日は、インクルードを使って効率のよいコーディングをすること、セッション管理をして画面が遷移しても情報を保ち続けることなど。項目の予習はしているが、少し高度な内容なので、どのように教えてくれるか楽しみにしていた。

しかし、作業中に予想以上に文字化けがおきて、授業の流れが定まらない。無駄にする時間が多かったので、授業後のアンケートフォームには辛口のコメントを記入。残すところ３回のPHP講座は、正規には１回２時間あたり１万円を超える受講料だ。

デジハリ081025

昨日19時よりPHP講座第8回目。いよいよ応用編

第12回の最終回まで、ECサイトを構築しながらPHP＋DataBaseを学んでいく。

とはいっても、デザイン部分から始めていては時間が足りない。このPHP講座の受講生のほとんどがデジハリWebデザイナー専攻なので、HTMLとCSSは理解している。

そこで、TAがHTMLのみで作成したこのページを、PHPで書き直すという実践的な方法で学ぶ。市販の書籍では完成したPHPのソースを解説しているが、今回学ぶ方法は実際の現場で使われる方法だという。なるほど、WebデザイナーとPHPプログラマの分業が理解できた。

このテーブルのダンプが用意されていて、phpMyAdmin上で実行する。

昨日は、全てHTMLで書き並べた商品表示部分を、PHPのループでデータベース（商品マスタテーブル）から読み込むように加工していった。また、商品名の部分一致検索と商品カテゴリのチェック検索を同時に実現する。

自宅でPHPを書き加えた部分を復習した。定型のソースを組み合わせて部分修正する。

結構コードが読めるようになってきたが、これからが正念場。顧客マスタや購入履歴マスタ、購入明細マスタなども絡めて、本格的なECサイトを構築していく。

デジハリ081011

デジハリ横浜校、総合ProコースWebデザイナー専攻。第22回目の授業。

エントリは遅れたが、11日で実習は終了。Flashで音の扱いとフルフラッシュサイトの作り方を学んだ。要点をメモしておく。

■ボタンの効果音
ボタンのオーバーとダウンのキーフレームで、ライブラリに読み込んだ音源をステージにドラッグするだけ。

マウスカーソルがボタンにのったときとクリックしたときの効果音を設定。まず、２つの効果音を読み込んでおく。ボタンシンボルの編集画面で、オーバーのタイムライン上、ダウンのタイムライン上にそれぞれ、ライブラリから音をドラッグ＆ドロップするだけ。

■BGMの設定
シーンのステージにループ音楽を配置し、先のボタンでスタート／ストップを制御する。プロパティパネルで行なう音の再生の設定がミソ。同期のデフォルトの「イベント」ではダメ。

下のレイヤーは1フレームのキーフレームに（12フレームまで）BGMをタイムラインに配置し、13フレームは空のキーフレーム。同じ位置にボタンがあり、1フレーム目のボタンと、13フレーム目のボタンには互いのフレームにジャンプするように記述する。

最上位のレイヤーはActionScript用。12フレーム目には1フレーム目へのジャンプを記述。つまり、ここでループ再生を実現する。13フレーム目は stop();を記述し、音が止まった状態を作る。

■フルフラッシュサイトの作り方とFlashでのプルダウンメニューの作り方
プルダウンメニューをクリックすると、メイン部分に他のSWFデータをLoadMovieで読み込むという設定。４ページ分のSWFは加工したPNG画像を配置しただけで済ます。

問題はどのようにプルダウンメニューを表現するか。ロールオーバーを設定したボタンを複製し、４つ縦列して１つのムービークリップで包む。さらにムービークリップで包み、上から下へのイーズアウト付きのモーショントゥイーンを設定して、インスタンス名をmenuanimeとする。

1フレーム目と12フレーム目には stop(); を記述。

最初から表示されるスタート用のボタンには、このアニメーションを2フレーム目にジャンプする命令。そして、最も重要なのが、このアニメーションが見えて欲しい部分にマスクをかけること。下のブルーの矩形がアニメーションを配置したレイヤーをマスクする。

ムービークリップの中の一つひとつのボタンには、対応するSWFを読み込むためのActionScriptを記述。dummyという空のムービークリップインスタンスがメイン部分の左上に配置してある。

■からくりが分かれば簡単なことだった。しかし、講師の佐藤先生のおっしゃるように、基本的なことをどのように組み合わせて実現するかがミソ。講義の中で、制作のヒントになることをいっぱい伝えてくださったことに感謝している。

本日で実習の部は全て終了。以後は卒業制作の期間となる。

デジハリセミナー：「アメリカの３DCG・VFX最前線」レポート

デジハリ横浜校にて、14:30より標記の無料セミナーに参加

８月に行われた『Siggraph2008』を訪れたデジタルハリウッド大学院/大学講師の小倉以索先生が、日本では未公開のVFX・CG/アニメのPVやメイキングビデオを交えて、CGの最新事情をわかりやすく解説してくださった。詳細はデジハリ横浜校ブログでどうぞ。

参加の大半は、デジハリ横浜校のVFXやCGの受講者と思われる。この分野の修行は好きであっても大変そうだが、このようなセミナーをひらくことで夢に向かってモチベーションを高めている。

今年度から『SIIGRAPH　ASIA』が開催されるという。第一回は12月にシンガポールで、来年度は横浜で開催が決定という。これは楽しみだ！

デジハリ081004

デジハリ横浜校、総合ProコースWebデザイナー専攻。第21回目の授業。
＋（19時より）PHP講座第6回目

【Webデザイナー専攻の授業】
Flashの授業５回目。実際のフラッシュサイトに使えそうなネタ集。

ネタ本にもよく載っているが、シンボルの作り方やActionScriptのパスの通し方などは、実習で習うことでよく理解でき、応用できる。

■乱数とフレームジャンプをつかったおみくじ

5フレームに共通のボタンにActionScriptを書く。1フレーム目は「なにが出るかな？」の表示。1～5の乱数によって2フレームから5フレームの「大吉」「吉」「凶」「大凶」にジャンプさせる。この設定では、「大吉」の確立が高く、「大凶」が低くなる。

このままでは1フレームから5フレームへのパラパラアニメになってしまうので、ActionScript用のレイヤーを作り、1フレーム目で止まらせる。

■深度の変更（swapDepths）
複数のウィンドウが並んでいるとき、クリックしたウィンドウは他のウィンドウの前面に出て、移動もできる。これをムービークリップ同士で実現する。

マウスでプレスしたことで判定するので、ボタンシンボルであることが必要。ボタンを中身とするムービークリップを作り、内側のボタンに外側のムービークリップのインスタンス名あての命令を記述する。

ムービークリップが３個以上の場合は各自で考えよという指示。
top=4という変数を設定して、それぞれのボタンに次のように記述してみた。

■マスクコントロール
レイヤーマスクよりも応用が利くsetMaskを利用。

インスタンス名がmaruという円がガイドラインに沿って動くアニメーションを作成。背景レイヤーには画像をムービークリップ（インスタンス名bg）を置く。
あとは、1フレーム目にsetMaskを書くだけで、次のアニメができる。

■ダウンローディング（プログレスバー）

レイヤー１の２フレーム目には重めの画像を複数配置してある。つまり、この読み込みにかかる間のプログレスバーを表現する。
まずバーのムービークリップが読み込まれたときにでmovebarという関数を定義。読み込んだ割合Percentを受け取り、バー自身のｘ軸方向の拡大率に渡す。また、「％」の前のダイナミックテキストには変数Percentを当ててあるので、ここに数値が表示される。

ASレイヤーの1フレームには、読み込みが終わるまで、読み込む量と読み込み済みの量からPercentを計算してバーの拡大率を変えていく。
ちなみに、ASレイヤーの2フレームには、gotoAndPlay(1);と記述する。
ループしながら1フレームを通るたびにバーを書き換えることでアニメーションとなる。

ムービープレビューすると、ローカルで動いているので一瞬でダウンロードが終了してしまう。図のように、Web環境でのダウンロードをシミュレートする機能がある。

【PHP講座】
先週に続き、phpMyAdminでデータベース操作に慣れ、PHPからデータベースを操作する。

この２週間、データベース操作でおきる文字化けについて悩んでいた。どうやらMySQLクライアントは内部でEUCに変換して扱うようだ。

講師に相談し、学習の進行上役にたつコマンドを教えてもらった。実務では他の方法を使うという。Shift-JISで記述したデータベースなので、set names sjis を実行するとOK。試しに set names utf8 や set names ujis は受け付けたが、set names euc はエラーだった。

データベースもPHPもSJISで記述している。ソースの29行目と30行目が文字化け対策。

ググるとPHPの中に書くとSQLインジェクションの危険が増すというが、とりあえず、ローカルで実習を積み重ねていくためには仕方がない。phpinfoの見方もだんだん分かってきたので、いずれ対処できるようになるだろう。

デジハリ080927

デジハリ横浜校、総合ProコースWebデザイナー専攻。第20回目の授業。
＋（19時より）PHP講座第5回目

【Webデザイナー専攻の授業】
Flashの授業４回目。市販の入門書には載っていない内容も入ってきた。

■ムービークリップシンボルとグラフィックシンボルの違い

同じ「素材」ムービークリップをムービークリップシンボル「MC」と、グラフィックシンボル「GR」としてシンボル化し、どちらにも1秒間に1回転するモーショントゥイーンを設定する。この２種類のインスタンスを１フレームでは左端に並べ、36フレームでは右端に移動するというモーショントゥイーンを設定した図。

オニオンスキンを表示してあるので、単にシーン１のタイムラインに start() させても「MC」は回転しないことが分かる。これは、ムービークリップではシーン１とは独立したタイムラインを持つためであり、「回転開始」ボタンには、このインスタンス（shikaku）に対して play() をピンポイントで送り込むActionScriptを書いてある。

逆にグラフィックシンボルは置かれているシーン１と連動したタイムラインを持つので、この操作は必要ない。さらに、グラフィックシンボルはインスタンス名を持てないので、ActionScriptで命令を送り込むことができない。

■外部のテキストファイルを読み込み、スクロールさせる。

ダイナミックテキストのテキストボックスには、次のファイル「text2.txt」から変数「text2」の値が読み込まれる。
改行の「%0D」と、デジハリへのリンクの周りに注意。

ダイナミックテキストをくるんだムービークリップに書き込むActionScript
２行目は文字化け対策。読み込むファイルの文字コードにエンコードを合わせる。

スクロール用の上向きと下向きの三角ボタンに書き込むActionScript
　

■ロードムービー：レベルとターゲットの２つの方法

files1.swf と files2.swf という、シーンと同じサイズで右上、右下に矩形（とファイル名）を表示するSWFデータを書き出す。これらを、レベル１とレベル２に読み込み、消すためのボタンが上の３段に用意してある。

　

on(release){loadMovieNum("file1.swf",1);}　//file1.swfをレベル１に読み込む
on(release){unloadMovieNum(1);}　 //レベル1を消す

三角形が動くアニメーションを小さなサイズのSWFデータ files3.swf で書き出す。カラのムービークリップをターゲットとしてシーンに配置し、インスタンス名を dummy とする。この dummy に files3.swf を読み込む。file3.swfはdummyの位置に左上を合わせて表示される。ちなみに、これはボタンと同じレベル0に読み込まれている。
さらに、dummy に対して play() と stop() の命令を送り込むボタンを用意した。

on(release){loadMovie("file3.swf",this.dummy); }　//ターゲットに読み込む
on(release){unloadMovie(this.dummy);}　//ターゲットから消す
on(release){this.dummy.play();} 　//dummyに向かって動け

【PHP講座】
本日と次回でMySQLを使ったデータベースとテーブルの作成、データの登録／表示／追加／削除／更新を学ぶことになっていたが、本日だけで予定はほぼ終了した。DOS窓はデモンストレーションで見せただけで、最初からｐｈｐMyAdminでの操作で教えたためで、初めての受講生もまあなんとかできちゃったという感じ。

SQL文は配布されたPDFのデータからコピペで使用したので、簡単だったが受講生の理解は浅い。

PHPの学習環境(3)

デジハリのPHP講座では、次回５週目からデータベースとSQLに入るという予告。

毎回、副教材改訂版基礎PHPで予習ページが示される。幸い、自宅での学習環境が整ってきたので、時間さえあればなんとかなる。昨日は午後から時間が取れたので、DOS窓でのSQLを復習し、副教材のコラムにあるｐｈｐMyAdminの操作にも挑戦した。

昨日のエントリのように、情報科学専門学校の先生とは、総合学科合同Webサイト構築のために担当者として打ち合わせをする。一昨日の打ち合わせでは、PHPの話で盛り上がり、授業で使われているプリント資料をいただいてきた。しばらく前に触ったときは分からなかったｐｈｐMyAdminの機能が丁寧に説明されていたので、実にタイムリー。スイスイと勉強することができた。杉本先生に感謝！

日本語なので、WinMySQLAdminよりも使いやすい。デジハリの授業でもDOS窓の体験はするだろうが、受講者の様子を見る限り、ｐｈｐMyAdminを利用した方がよいだろう。（デジハリの講師にも連絡したところ、同じ考えのようだ。）実行したSQLのPHPコードもコピーできるし。XAMPPをインストールした場合、phpMyAdminも同胞されているので、config.inc.phpをエディタで開いてパスワードとauth_typeの書き換えを行なえばすぐ使える。

図はphpMyAdminの表示の一部。上のテーブル「sales」と左のテーブル「goods」に対して、基本的なSQLを書きながら実習した。初級シスアドを受けた７年前、データベースの勉強は架空のものだったなぁ。

SQLの勉強が終わったら、PHPでMySQLを操作することになるだろう。手元には４冊の本があるが、「クラス」を扱わないものから、すぐに「PEAR」や「Smarty」を使い始めるものと、レベルが様々だ。どの本もWebアプリを構築しているが、ブログはまだしも、ショッピングサイトを構築するものは、必ずPEAR、Smartyを使っている。PEARは様々なクラスのライブラリ。単独のインストールは手間がかかりそうだが、XAMPPには同胞されていた。HTMLデザインのテンプレートシステムであるSmartyはダウンロードしたフォルダをコピーするだけなので簡単だった。つまり、学習の環境は全てそろったことになる。

PHPを使って高度なWebアプリを作るには、PEARとSmartyを避けられないようだ。色気を出してPEARを使ったデータベースへの接続方法を勉強しはじめた。しかし、本で勉強すると、コード中にブラックボックスが多すぎて分からない、眠くなる。打ち込むだけの勉強は嫌だ。どうやら、これらが使えるかどうかが初級者と中級者の境のようだ。

学習の方針が定まった。まずは初心者から初級者のレベルを確実にしていこう。

デジハリ080920

デジハリ横浜校、総合ProコースWebデザイナー専攻。第19回目の授業。
＋(17時より）サイトリニューアル企画のグループ発表
＋（19時より）PHP講座第3回目

新横浜の出張から戻ってデジハリ横浜校。早朝からビッシリ詰まったスケジュール。
（このエントリは昨日の内容）

【Webデザイナー専攻の授業】
Flashの授業３回目。まだ基本だが、図とメモをまとめておく。

■ActionScriptでダイナミックテキストの変数を扱って「電卓」を作る。
上の２つのテキストボックスは「テキスト入力」、変数num1とnum2を設定。下のテキストボックスは「ダイナミックテキスト」で、２つの変数から、押したボタンによって計算値を表示する。

文字化け対策として、演算記号はグラフィックに、表示する数値のフォント（0～9の数字とマイナス）は埋め込む。
当然、割り算のボタンには一工夫を。

■ウィンドウの壁にぶつかると跳ね返るアニメーション
定番のアルゴリズムだが、Flash独特のクセがある。ActionScriptは正方形のムービークリップに書く。
標準の550×400pxのウィンドウ内を、縦横50pxで基準点が中央の正方形が動きまわる。ｘ座標、y座標が指定の範囲を出たら座標の増分の正負を変える。この判定は、繰り返し行なうので onClipEvent(enterFrame) で。
移動の増分の初期値は１度だけ読み込めばよいので、onClipEvent(load)で。

■マウスカーソルをゆっくりと追跡するチェイスカーソル
　
ムービークリップにActionScriptを書く。「this.」の省略とその指すものについての解説。

■ドラッグムービー：ウィンドウ内をドラッグで自由に移動

550×400のウィンドウ内を、150×60のムービークリップをはみ出さないようにドラッグできる。マウスを押すことを判定するのはボタンクリップなので、ActionScriptはボタンシンボルに書く。このボタンシンボルをくるんだムービークリップに対して startDrag と stopDrag のメソッドを送る。

　
ボタンからムービークリップを正確に指定するために「ターゲットパス」の機能を使った。相対表示と絶対表示を選ぶことができる。この図からも、ボタンシシンボルをムービークリップで包んでいることが分かる。

【グループワーク：サイトリニューアル企画の発表】

４グループに分かれて上記の企画をプレゼンする。我々５人のチームは、昨晩集まって分担を統合し、本日を迎えた。昼休みに１度通しで読み合わせ、直前の２時間に３回リハーサルして改善をした。

我々のグループはあるカフェのサイトをターゲットにし、構造の組み直しとトップページのデザイン案を示しながら、ファンの確保と集客率を高める提案をした。

【PHP講座】
宿題の解説から。下の私の解答も例示された。うるう年の判定問題だった。

問、ある年がうるう年かどうかをPHPで判定せよ。
・基本的に、4で割り切れる年は、うるう年である。
・ただし、100で割り切れる年は、うるう年ではない。
・ただし、400で割り切れる年は、うるう年である。

ベン図を描けば簡単だが、IF文の入れ子にしている人が多かったようだ。

授業は急にレベルが上がった。HTMLのフォームからの送信をPHPで受信して表示、そしてファイルに出力する実習。ログ機能の説明。
■formタグのメソッド POST と GET の違い。どちらも $_REQUEST 変数で受け取れる。
■fopen 命令の上書きモードと追記モード。fputs, fclose 命令。

ここでPHPからしばらく離れ、次回はSQLという予告。

PHPの学習環境(2)

PHP＋MySQLの学習に励む一方、その学習環境にも興味がある。

何かコンテンツを作るだけでなく、いずれ学校の授業でも取り入れたいもの。1年後か、延長して２年後にリース切れになるマルチメディア教室のPCの払い下げに期待している。イントラでWebサーバの環境を設定すれば、Webに特化したおもしろい授業ができるだろうともくろんでいる。

エディタとしては、サイト管理機能だけでなく常に新しい技術をサポートしているDreamweaverを使いたい。PHPの学習に伴って、（HTMLではなく）サーバーサイドプログラムのファイルのブラウザプレビューの設定をし、動作確認している。

DreamweavaerでHTMLを編集する人は、便利なブラウザプレビュー機能を利用するだろう。F12キーを押すと編集中のHTMLがブラウジングされる。

HTMLやJavaScriptならば、デフォルトでもIEなどのブラウザで表示される。しかし、そのマシン上でWebサーバーが立ち上がっていても、そのままでは、PHPのようなサーバーテクノロジーを利用するファイルをブラウジングすることはできない。事前に、ドキュメントルートと使用するサーバーテクノロジーなどを設定しておく必要がある。そこで、

DreamweaverでPHPを学習するためのサイト管理の設定についてまとめておく

■2週間前設定した、XAMPPでデフォルトのドキュメントルート　C\xammp\htdocs\　に作業フォルダ　08phptry を作り、その中にPHPファイルを保存しているという環境。この作業フォルダを「サイト管理」の対象に設定していく。

［サイト］メニュー、または［サイトの管理］から、[新規]＞[サイト]　を選ぶ

ここでは、すでに定義してあるサイトを選択することができる。便利な機能だ。

サイト定義ダイアログでは、[詳細設定]タブに入り、上から３つの項目を設定する。
・[ローカル情報]
・[リモート情報]
・[テストサーバー]

[ローカル情報]では、[サイト名]に任意の名前。[ローカルルートフォルダ]に、ドキュメントルートの下の作業フォルダ。［HTTPアドレス］には、http://localhosｔ/ に続き、作業フォルダ名 08phptry/ を入力。

［初期設定イメージフォルダ］を作業フォルダ内に作り、ここで指定しておくと、画像を扱うときに非常に便利。作業フォルダ外の画像を使う場合は、自動的にこのイメージフォルダにコピーし、URL指定してくれる。当面のPHPの学習には不要だろう。

［リモート情報］には上記の設定

［テストサーバー］には上記の設定。Webサーバを通してブラウジングするための重要な設定。

以上の設定が終わると、サイトがDreamweaverのファイルパネルに表示され、作業効率が高くなる。

なお、図の作業フォルダには、サイトの定義を書き出して保存してある。

PHPの学習

現在、PHPの学習にはまっている。

過去に勉強（最後の方はやっただけ）したPHP4の２冊、デジハリのPHP５の副教材、この合計３冊を並行して自習している。学習の手間がかかり、時間的ロスも大きいが、概念をしっかりつかむためには有効だと思う。

PHP４からPHP５になってオブジェクト指向化が進み、いくつかの変更があるようだ。PHP５ではコンストラクタの表記方法が変わり、デストラクタという新しい機能が追加。また、オブジェクトが参照渡しになったという。さっそく、XAMPPに付属のPHPSwitchを使ってそれぞれの環境で動作確認してみた。

コマンドプロンプトが起動して、「４」を入力すればPHP4に、「×」でキャンセルという説明。PHP４が起動しているときは、PHP5への変更ができる。学習する身だけでなく、PHPプログラマーとして働いている方にも重宝されていることだろう。

JAVAでもクラスを使ったプログラミングをかじっているが、必要に追われてプログラミングすることがないので、はっきり言ってモノになっていない。おそらく一番簡単であり、具体的にWebコンテンツを作れるPHPならば、仕事で使える成果物を作れるだろうと考える。

しかし、書店で見て回ってもPHPとCSSのセットをタイトルにした本は無さそうだ。まだ、プログラマー側のPHPとデザイナー側のCSSをミックスして教える人材がいないのだろうか？

本を参考に、アクセスした日のタイムスタンプから、その月のカレンダーを表示させるHTMLソースを書き出すプログラム。色の飾りはCSSで工夫。土日の日付（クラスセレクタ使用）とアクセスした日のセル（IDセレクタ使用）に色をつけてみた。こんなのはまだ初歩の初歩だが。。。

デジハリ080913

デジハリ横浜校、総合ProコースWebデザイナー専攻。第18回目の授業。
＋（19時より）PHP講座第3回目

■Webデザイナーの授業

午前・午後ともひたすらFlash。アニメーションとボタンシンボルの作り方、ボタンへのActionScriptの書き方を学ぶ。

モーショントゥイーンでは、
　・振り子
　・プロペラ（連続再生にタイミングのずれが起きない工夫）
　・ガイドラインに沿った曲線的なアニメ
　・マスクアニメーション（サーチライト風）
シェイプトゥイーンでは、
　・シェイプヒントの扱い方
　・文字から文字へのシェイプトゥイーン（モーフィング風）

ボタンについては、
　・ボタンシンボルのアップ／オーバー／ダウン／ヒットの説明
　・ボタンにActionScriptを書いて、アニメーションの動作を制御
　・「this」の解説

次回は、ウィンドウ内で衝突判定をして向きを変えるという「定番」のコントロールを行なう。

15時20分に授業は終了。ある検定試験の作問会議が行なわれている関内に急ぐ。年内の会議はこれで終了。18:30にデジハリに戻る。

■PHP講座の授業

今回は条件分岐と繰り返し。foreach文があるPHPは配列の操作が楽。

授業では、テキストエディタとしてDreamweaverを使うようになった。次回はフォームからのデータ受け取りと、ファイルの読み書きという予告。
Dreamweaverはフォーム作成で威力を発揮するだけでなく、先に扱うSQLでも便利な機能を持っている。

デジハリ080906

デジハリ横浜校、総合ProコースWebデザイナー専攻。第17回目の授業。
＋（19時より）PHP講座第2回目

本日よりFlashを扱う。

【午前中】
■Illustratorとの比較をしながら、Flashの描画の特徴を解説。特徴を理解すると、Illustratorでは描きにくい描画もできる。

• Flashはレベルで管理している。単に描画しただけでは同レベルゆえに、他の図形の「切り抜き」がおきる。グループ化してレベルを上げることで「切り抜き」がおきなくなる。
• Flashでは「塗り」と「線」が個別に存在する。鉛筆ツールでは「線」のみの描画、ブラシツールでは「塗り」のみの描画。インクボトルツールは「線」の追加、バケツツールは「塗り」の追加を担当する。
• あくまでもベクターデータだが、Photoshopのようなビットマップデータの操作性も兼ね備えている。

■「静止テキスト」の文字化け対策
Illustarorでは文字のアウトライン化で一発。
Flashではテキストに対して「修正＞分解」。このままでは１文字づつが文字情報を持っているので、再度「修正＞分解」。これらをグループ化することで扱いやすくなる。

■Flashのアニメーションの種類
・フレームアニメーション
・モーショントゥイーンアニメーション（8～9割）
・シェイプトゥイーンアニメーション（1割）
という使用頻度。午後はモーショントゥイーンで必須の「シンボル」の説明。

【午後】
■アニメーション用のシンボル作成
・ボタンはアニメーションに不向き。
・グラフィックはActionScriptによるコントロールができない。
・アニメーションにはムービークリップが良い。
シンボルとインスタンスは分身。１つを加工すると反映される。

■モーショントゥイーンの作成のポイント
　

【夕方】
グループワークの実習。あるカフェのサイトのリニューアル計画について、意見交換をしながら意思統一を図る。トップページのデザインをする者と、階層構造の見直しをする者に分かれて作業。各自、来週までの宿題を持ち帰る。

【PHP講座】
第２回目だが、まだゆっくり目の授業。PHPをはじめてどころか、Webサーバーの概念が分からない受講生もいる。今日は、変数と配列、連想配列の基本をやっただけで終了。先の応用的な段階になってからの駆け込み・詰め込みが予想されるので、何とか手を打っていただきたい。

PHPの学習環境

昨日のPHP講座を受け、早速PHPの学習環境を設定

夏休み中の短期集中講座「DTP基礎」と、金曜日が中間論文の提出締め切りだった「探求（課題研究）」。昼から出勤し、この２科目の前期の評価活動を終える。来週金曜日から期末試験が始まるので、問題作成の前に片付けておきたかった。

仕事の合間にインターネットでPHPの開発環境を調べると、Apache、MySQL、PHP、Perlの頭文字をつなげたXAMPP（ザンプ・エグザンプ）という、一括インストール/アンインストールのアプリケーションの存在を知った。過去には、個別にインストールしたことと、XAMPPと同類のＰＨＰＤｅｖを利用したことがあるが、ＰＨＰ４とＰＨＰ５が同居して自由に切り替えられるということに魅力を感じた。もちろん無料だし、今までの書籍や資料が全て使えるからだ。

帰宅してＥＸＸＡＸＯＮとphpspotの２つのサイトを参考にしながら、インストール。いくつかのファイルを書き換え、MySQLのrootのパスワードを設定。なんと、15分で学習環境が整った。簡単なコントロールパネルも日本語の管理ツールも嬉しい。

SQL操作はしばらく先だが、次にDreamweaverで「.sql」ファイルをコードビューで開けるように環境設定。

まずは、PHPのソースを打ち込んだり、改造したりで勘を取り戻した。

デジハリ080830

デジハリ横浜校、総合ProコースWebデザイナー専攻。第16回目の授業。
＋（19時より）PHP講座第１回目

■CSSの４回目。まず前回の演習課題の解説で１時間。

次の演習課題が与えられる。イラストレータで完成画像と仕様が書かれている。

１時間半ほどで完成するが、IE（左）とFireFox（右）では表示が異なる。
親要素の背景色に設定した白がFFでは表示されていない。

　

ここまでできた者は、「clearfix」を検索して対策しなさいという指示。
何通りかの記述方法があるが、CSSに追加記述、XHTMLで親要素にclieafixのクラスを設定するだけでOK。FFもIEと同じ表示になった。

.clearfix:after {
content: "."; 　　　 /* ドットという新しいオブジェクトを作る */
display: block; 　　　/* ブロックレベル要素に変更 */
clear: both;　　　　 /* 他のフロートの影響を断ち切る */
height: 0;　　　　　 /* 高さを０とする */
visibility: hidden;　/* 非表示にする */
}

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

上から、モダンブラウザ用（IE以外）、IE7以上、IE6以前のブラウザ用。
特に今回はFFでの確認をしたので、一番上のCSSの解説があった。

この現象は、親要素の中に、高さの異なる３つのフロートが入ったために「高さ」が不明確となり、ブラウザが背景色を表示する範囲が確定できなくなっている。つまり、無理やり「高さ」を作ってあげることで、背景色を塗る領域を確定させている。
コードにコメントを書いたように、ドットというオブジェクトをつくり、ブロック要素に変換して、他のフローとの影響を断ち切り、高さを0とし、非表示にする。これによって、構造に手を加えずに他のフロートの存在をクリアーさせている。ということ。

□以上でCSSは終了。次回からFlashという予告。

■16時～18時。不定期に講義形式の授業を行っている。

今回はグループワークで、あるサイトのリニューアル企画を提案することに。サイトは各班で選び、リニューアルにかかる費用や納期、もちろん、効果なども含めたプレゼンを行う。発表は9月30日。
私たちの班では、ターゲットになるサイトを各自が探し、その中から決定。各自が改善点と比較・競合サイトを調べることを宿題にし、来週、作業の絞込みと分担を考えていく。

情報デザインに関わってきたからか、こういうワークショップ的なことが楽しく思えるようになってきた。

■19時～21時。本日から12回のPHP講座が始まった。

過去２回、自力でPHP＋MySQLに挑戦したことがあったが、結局身についていない。データベースの概念は分かっているのだが、実用する場がないまま。今回の講座には、職場で使えるものをひとつは作ろうと考えて参加した。

第１回目はAjax講座のような場面もあったが、WebサーバーとPHPの概念の説明。
一応、参考テキストとしてインプレスジャパンの改定新版基礎PHPが配布されるが、授業内では扱わないという。とにかく最初の６回でつまずかないように、と念を押された。

冬休みには何か作りたい。この講座をペースメーカーにして、頑張ってみよう。

デジハリ080823

デジハリ横浜校、総合ProコースWebデザイナー専攻。第15回目の授業。

CSSの第３回目。まず、前回残っていた３番目の例題を完成する。
XHTMLソースでは、メニューの外部リンクの情報を、音声ブラウザ対策で、最後においてある。これをフロートを使って、整形していく。

この例題で学んだ、２つの重要ポイントをメモ。リンクのテクニックは応用が利く。

■３つの画像を等間隔に並べる
フロートはブロック要素（必ず改行される）にしかかけられない。インライン要素にはフロートがかけられず、横にならぶ。画像は、通常横にならぶが、このブロック要素とインライン要素の中間の性質で、フロートをかけられる。
周囲の隙間と左のフロートをクラスで設定し、３つの画像に適用する。

■サイドナビのボタンとなる画像
リストで作ったテキストのリンクに対し、ＣＳＳで背景画像を設定。さらにブレット表示をなし、リンクのアンダーラインをなし、テキストを非表示にする。
これだけでは、マウスカーソルが反応する領域は、（非表示の）テキストの部分だけ。画像のサイズにヒット領域を広げる必要がある。
テキスト部分はインライン要素なので、幅や高さの概念がない。そこで、インライン要素のaタグを、ブロック要素に変えて、ボックスの幅と高さを画像と一致させる。

午後は演習課題。HTMLにDIVタグを追加し、CSSを設定して指定された形に仕上げる。

タグの再定義でいくか、IDと子孫セレクタでいくか、クラスでいくか。考えながら、DIVタグを設定。

ボーダーの幅をボックスの幅と高さから減じて設定して完成。

授業後、16時より中間課題発表会。
昨日までの全国大会の準備と、やはり昨日まで３週間のインターンシップ受入れのため、構想していた課題を作成することができなかった。みなが頑張っているのに、水を差して申し訳ない。校内Webで作成したものを発表会後に紹介させていただいた。

デジハリ080809

デジハリ横浜校、総合ProコースWebデザイナー専攻。第14回目の授業。

CSSの第２回目。今回は、XHTML＋CSS2.0という扱いになる。

まずは、「XML宣言」「文書型宣言」「名前空間」の説明。「XML宣言」はXHTMLをXMLに準拠させるが、ブラウザによって処理のされ方が異なるので、授業では削除する。

・XMLは、タグで囲まれた情報のみのデータ
・HTMLはページレイアウトも情報も扱う
・XHTMLはタグはHTMLで、XMLに準拠し情報のみにしたもの

という概略を説明。具体的に、３つのソースに対してXHTML化し、Dreamweaverの機能でCSSを設定していく。

１つ目は、見出しを設定し、タグの再定義とクラスで見栄えを設定する例題

中央揃えについてのFireFox対策、各項目のアキの確保など細かい設定の解説がある。

２つ目は、フロートの設定と、子孫セレクタの設定を目的とした例題

padding、border、marginの構造に注意した設定の解説など。

３つ目は、リストのボタン化を含む本格的な例題。今回は途中まで。

■16時～18時、プレゼンテーション概論の講義
業界で通用するためのプレゼンのテクニックとして、一番いいたいことを言わずに、「知りたい」という気にさせるように仕組むことをあげていた。何でも説明してしまうのはダメだという。

確かに良くしゃべることができる講師だが、一方的な講義で、ノンバーバルの技術やハンドアウトの作り方など、知りたいことを聞けなかった。質問時間もなく帰ってしまったし。

デジハリ080802

デジハリ横浜校、総合ProコースWebデザイナー専攻。第13回目の授業。

前回のJavaScriptの授業で作った数当てゲームの解説で30分ほど。以後は、CSSを基本から説明。

午後からはDreamweaverでCSSの実装。まだCSS2.0の使い方ではなく、HTMLである程度レイアウトされたものに、タグの再定義とクラスの設定と適用を施す。授業のペースが速くなってきたので、CSS自体と、DreamweaverでのCSS設定が初めての受講生は、かなり戸惑っただろう。JavaScriptに続き、プログラミングの初心者にはつらい所だ。

次回はIDセレクタやフロートを活用していくとの予告。

デジハリ080726

デジハリ横浜校、総合ProコースWebデザイナー専攻。第12回目の授業。

３日出張が続いたので、メールチェックのため職場に寄ってから向かう。
本日から講座の後半として、応用範囲になる。今日はJavaScriptを学ぶ。

【午前】
JavaScriptの説明と基本の実習。
・オブジェクト指向でドットシンタックスによる記述
・オブジェクトの階層構造（windowは省略可）
・コメントアウト
・変数/演算子/if文/else if

【午後】
・for文、while文
・インクリメントとデクリメント
・関数
・数当てゲーム（0～9の整数を３回以内に当てる）

次回からCSSという予告。ActionScript3.0の教材が配布された。

デジハリ080719

デジハリ横浜校、総合ProコースWebデザイナー専攻。第11回目の授業。

Dreamweaver の第４回目。今まで使ったソフトを統合したワークフローも扱う。

【午前】
テーブルを使ったレイアウトの例として、フォームによるアンケートページのレイアウト。文字の装飾にはCSSを使った。

【午後】
デジハリの架空オンラインショップのトップページの作成。スワップイメージを使うため、差し替える画像をPhotoshpで作成し、ページをレイアウトしたIllustrator上で、差し替え画像にクリッピングマスクを施してレイヤー管理。これをFireworks用にPNG形式で書き出し、Fireworksでスライスとスワップイメージを設定してHTMLに書き出す。最終的にはDreamweaverでページプロパティの設定と、アンケートページへのリンクを作る。

　Photoshopでレイヤー別にデザインし、差し替え画像として別名保存

　Illustratorでクリップしてターゲットになる位置に重ねて配置

　Fireworksでスライスとスワップイメージの設定をしてHTMLの書き出し

実習授業を１時間延長し、そのまま16時～18時のWeb概論の講義に突入した。

デジハリ080712

デジハリ横浜校、総合ProコースWebデザイナー専攻。第10回目の授業。

Dreamweaver の第３回目。

【午前中】
キチッとしたレイアウトを作るためには、CSSだけでなく、まだHTMLとテーブルも現役。レイアウトを設計してはテーブルでくみ上げていくための手法を学ぶ。

【午後】
現在は推奨されないがフレームセットの技術も知識として学ぶ。_topと_parentの違いなどは具体的な教材で理解する。その後、テーブルレイアウトの練習としてフォームによるアンケートページの外形を作成。

次回は、アンケートページの完成と、その親となるページを作成する。Photoshop、Illustrator、Fireworks、Dreamweaverを使ったワークフローを学ぶことになる。

終了後、中間課題のテーマのチェック。お店または場所を紹介するWebサイトの制作が課題である。
私は教材作成で代替させていただく。

デジハリ080705

デジハリ横浜校、総合ProコースWebデザイナー専攻。第9回目の授業。

前回から入った、DreamWeaverによるHTMLの作成。

【午前中】
・サイトの定義の復習
　HD復元ソフトが入っているので、毎回設定する。「初期画像フォルダ」の設定。
　まだHTML4.01で練習するので、CSSを使わないように設定。
・テキストの入力について。
　見出し、フォントサイズ、リストの作り方と各種設定、インデント。
・画像の配置
　DWの機能でサイト外の画像を挿入すると、「初期画像フォルダ」にコピーされる。
　画像の周囲の余白は現段階では hspace、vspace で設定。

【午後】
・画像の各種属性
　ボーダー、行揃え、整列の各種
・リンクの設定
　絶対リンク、相対リンク、メールリンク、同一ページ内リンク
・ホットスポットの設定
　クリッカブルマップ・イメージマップとも呼ぶ。スライスとの違いの説明。

まとめて操作を行ったので、DreamWeaverのインターフェースが改めてわかった。

デジハリ080628

デジハリ横浜校、総合ProコースWebデザイナー専攻。第８回目の授業。

前回に続きFireｗorks、そしてDreamweaverに入る。

【午前】
Fireworksの特技であるスライス機能とビヘイビアを利用したシンプルロールオーバーの設定。図は、スライスが終わってロールオーバーを設定する場面と、完成したWebページのイメージ。

　

レイアウトをデザインした一枚の画像を使って、スライス作業のコツを学ぶ。写真やボタンとなる部分・テキストを入れる部分を意識しながらスライスし、テーブルが複雑にならないよう修正していく作業。パーツごとに画像処理は最適化する。

シンプルロールオーバーは、マウスが乗った状態でフレーム２に用意する画像に入れ替わる。これは、選択したスライスパーツにビヘイビアで「ロールオーバー機能」を追加するだけで実現する。JavaScriptを知らなくても簡単！
Fireworksでロールオーバーを作成する場合、フレーム１～４の画像は、順にUp/Over/Down/OverDownの役割を果たす。

【午後】
午後前半は、FireworksのGIFアニメーション作成機能。昔なつかしのインベーダの画像を移動させる。２通りの方法を学ぶ。モーションパスや拡大・縮小、回転や不透明度の変化なども設定できるが、今回の実習では簡単なところだけ。

インベーダのGIFアニメを見る

（１）手動による方法
まずは、キャラクタを配置したフレームを複製し、それぞれでキャラの位置を手作業でずらす。オニオンスキン表示を利用して動作を確認していく。各フレームの表示時間を変更して、スピードを調整。イメージプレビューでGIFアニメ形式で、ループを設定して書き出す。

（２）Fireworksの機能による方法
キャラをシンボル化して、１つのフレームにスタート位置とゴール位置にインスタンスを配置。「インスタンスのトゥイーン」機能で途中を補完させてフレームに配分する。この方法はFlashと同じだ。

【午後後半】
Dreamweaverの最大の機能であるサイト管理の説明で１時間弱。

今までにWebページを作ってサーバにアップした経験がある方には、良く理解できるありがたい機能だ。しかし、まだ未経験の方には理解できなかっただろうなぁ。

その他、
・環境設定で「HTMLの代わりにCSSを使う」のチェックをはずすこと
・新規作成したページのページプロパティの設定の説明

中間課題の告知があって本日の授業は終了。
16時より、半年前のクラスの卒業制作発表会があり、希望者は参加する。
（残念だが、校務のため職場に直行）

■今までもDreamweaverは愛用している。サイト管理機能により、ファイル名の変更や移動によるリンク切れが無くなり、使っていないファイルの発見もラクだ。もう一つ役に立つのが、前バージョンから充実したCSS設定の機能。タグインスペクタも編集の効率を上げるのに役にたつ。実際にはデザインビューよりもコードビューばかりで、ほとんどテキストエディタとして使っている。

一方、ホームページ○○○ーは本格的なWebページ作成ソフトとして全く評価していない。余分な機能が多く、じっくりと自分の設計をすることができない。しかも機能を利用して作成したものはコードが読みにくいので、後から編集しにくい。DWとは使用目的が違うものと理解している。

デジハリ080621

デジハリ横浜校、総合ProコースWebデザイナー専攻。第７回目の授業。

職場で校務アドレスのメールチェックをしてからデジハリへ。京急を使って4駅、30分かからない。

本日は、Fireworksの授業。イラレやホトショでデザインした後の工程、つまり、イラレなどで作ったデザイン画をFWからスライスして書き出し、Drewmweaverと連携してWebページを作成していくための準備。

【午前中】
・FWの画面の説明
・ツールでベクター画像を描き、塗り・線ともに、様々な設定の実習
・グラデーション・パターン・Webディザの設定
・Webディザを使った半透明画像（文字の下地用）
・テクスチャの効果。透明も扱う。
・ビットマップモードでの操作方法。選択ツールとフィルタ（色調補正など）

【午後】
・テキストツール。小さな文字はアンチエイリアスを弱めか、かけない。
・文字化け対策。文字のアウトライン化
・アウトライン化後のグループ解除と修正加工。イラレの複合パスの説明。

・Web用の画像の特徴
・GIF形式への書き出し。WebSnapアダプティブと色数、ロス圧縮、ディザ。
・JPEG形式への書き出し。圧縮によるブロックノイズ・モスキートノイズ。
・圧縮によって耐えられるレベルを判断する
・インターレース表示とプログレッシブ表示の解説

次回は、FWでスライスして書き出し、DWで完成する練習。

デジハリ体験講座：撮影・CG合成実習

19時より、デジハリ東京本校にて。『撮影・CG合成実習』の体験講座

デジハリでは、カリキュラムの一新に先立ち、【新デジ体験キャンペーン】を展開している。その一環としての体験講座に参加した。参加者は8名に対し、講師１名、TA３名という恵まれた環境が無料。

使用するアプリケーションは、AfterEffectsCS3。まずは、用意されたCGムービーと、ブルーバックでの実写を合成する。Keylightを使い、背景と色味を合わせるために色調補正。携帯で使えるように、160ｘ120のサイズでMpeg4の書き出し。この流れが、本番の予告になる。

本番は、背景の素材（静止画像）を選び、合成する実写ムービーを撮影。各自がブルースクリーンの前で10秒ほどの演技を撮る。Keylightのほか、マット（チョークマット）で人物の周囲を整える。

　

個人的に、レイヤーを複製してマスクをかけたりして遊ぶ。TAの一人は以前デジハリ横浜校で一緒に「デジタルムービー講座」を受講したデジハリ職員。笑って見過ごしてくれた。

最終的にはMpeg4で160ｘ120のサイズで書き出す。Webメールから携帯に添付ファイルで送り、携帯で閲覧されている方も多い。今回の講座自体は基本の復習であったが、携帯に転送して閲覧するというネタはおもしろい。「図形と画像の処理」の最終課題に適している。今年も楽しみだ。

この手の講座は時間が経つのが速い。あっというまに2時間30分。

デジハリ080614

デジハリ横浜校、総合ProコースWebデザイナー専攻。第６回目の授業。

先週土曜は、午前中が総合学科の会合、午後が情報の全国大会の会合だった。Photoshopのマスク・アルファチャンネルを使った加工技術がメイン。欠席した分は別の日の講座に振り替えて受けた。講師が違うと、教えるポイントが異なるのでそれもまた勉強になった。羨ましいのはそのクラスでは毎回宿題が出ていること。時間的に余裕のあるうちに引っ張っていただくと後の課題が楽になるだろう。

おぉ！デジハリ渋谷校の同じコースに通っている情報科教員の卵のブログにも宿題のことが書かれている。きっと鍛えられていることだろう。

本日の授業はHTML。初心者もいるので全くの基礎から。いずれXHTMLとCSSを学ぶ予定が組まれているが、説明の端はしでその違いを意識していることがわかる。

午後はCSSに移行しても、当分は必要であろうテーブルの実習。一つのページをタグ打ちで作り上げるのだが、様々な要素が盛り込まれていて、さすが練られた教材だなと感動した。

15時30分にデジハリを出て、その足で職場に向かう。昨日休んだのでメールチェックと返信作業のため。いくつかのプロジェクト企画に携わっているので、それだけで機械警備の時間になってしまった。。。

デジハリ080531

デジハリ横浜校、総合ProコースWebデザイナー専攻。第４回目の授業。

午前、午後の前半まで、Photoshopの選択範囲と色調補正のテクニックを学ぶ。

配布された素材で作業する。左が補正前、右が補正後

　

選択の手法として、長方形選択ツール・楕円形選択ツール、自動選択ツール、投げ縄ツール、クイックマスク、パスから作る選択範囲。選択範囲の追加と削除方法。抽出機能。

色調補正の手法として、色相・彩度、カラーバランス、グラデーションマップ、バリエーション、特定色域の選択。

【午後後半】
講義形式
・解像度の解説、DTPで使われるdpiとWebで使われるppi
・ジャギーとアンチエイリアス
・色光の三原色（加法混色）、色料の三原色（減法混色）
・RGBで24ビット、選択範囲（アルファチャンネル）で8ビット
・解像度を変更する実験

次回の予告：アルファチャンネルを利用して、画像合成を行う。さらに文字。バナー広告の作成。
（私は総合学科の会議と、全国大会の会議のため欠席。。。）

デジハリ：先端色彩講座プレ授業

19:30より、デジハリ渋谷校にて標記の講座に参加

講師はデジハリ大学の講師でもある南雲治嘉氏。7月3日から始まる「先端色彩講座」の広報の２回目になる。参加者は80名ほどで満席。

漫才のように話はおもしろく、２時間があっという間に終わる。授業の本質的な内容の説明は少しだが、イッテンの色彩論の翻訳者である叔父との関係、ガーナチョコレートのパッケージデザインのエピソード、アサヒビールが赤を戦略的に使ったことなど、雑学としても十分に楽しめた。

「先端色彩」とは、根拠のある色彩、科学的な色彩のことを意味しており、マンセルやＰＣＣＳ、オストワルドの色立体のような色彩体系にたよらず、光の物理的性質や、生物学的な視覚機能などを根拠に、色彩を表現に生かすためのものという。現在、この分野では講師の南雲氏がリードされているそうだ。

先端色彩講座：7月3日から木曜日19:00～22;00を３ヶ月。一般147,000円、在／卒業生115,500円也。

デジハリ080524

デジハリ横浜校、Webデザイナー専攻。第３回目の授業。

【午前】
・パスの連結（手動とイラレの機能で）と切断（はさみツール・ナイフツール）
・文字の扱い（文字組み、エリア内・パス上文字ツールとその操作）
・文字のアウトライン化

【午後】
・地図の作成

※以前WAO！クリエイティブスクールで、YDA山本デザイン研究所の山本俊治先生より習ったことを思い出した。長丸四角にアンカーポイントを３点追加して噴出しを作るとき、３点の中央のアンカーポイントは最後に打つべし！その直後はそのアンカーポイントが選択されているので、矢印キーを操作すれば噴出しの先端を作ることができる。効率よい操作手順を日頃から考えよと教わった。

Illustratorは合計９時間の実習だった。名刺作成の宿題が出る。

■Photoshopの基本操作に入る
・イラレとの違い
・選択範囲とはなんぞや
・描画色と背景色の意味、移動ツールで残る色は背景色。

デジハリ：デジハリ大の特別講義に参加

19:30～22:00、秋葉原駅前のデジハリ大で特別講義を受ける

カナバングラフィックの富岡氏による「3Dショートアニメウサビッチが出来るまで」という講義。ウサビッチ完成までにあった様々なストーリ、裏話を紹介という案内に誘われて申し込んだ。具体的には、ウサビッチの第１集、第２集の上映をはさみながら、制作過程での絵コンテの書き方・企画の作り方・モデリングの仕方、プロデューサーとの交渉、消えたボツキャラ・ラフスケッチ数々、テクスチャ画像、ビデオコンテの紹介など、２時間を越えてたっぷりと講義していただいた。このように完成品と技術のハイライトを紹介するメイキング話はいつも面白いし、情報の授業で役にたつネタがたくさん仕入れられる。

３教室の間仕切りをはずして、150名を超える参加者。ほとんどがデジハリ生であり、私のような一般人と学生服の高校生がそれぞれ数名。実は１０月の学園祭に向けてのプレプレイベントであったようだ。学園祭の実行委員が受付、司会など運営に携わっていた。開始前に本校の卒業生に合ったが、チケットが取れなかったようで、残念そうに帰宅していった。

私は、デジハリのMLによって情報を得ることができるので、いち早く予約していた。来週もデジハリ渋谷校の「先端色彩講座プレ授業」に申し込んである。デジハリにはいつもいい勉強をさせていただいている。

デジハリ080517

デジハリ横浜校、Webデザイナー専攻。第2回目の授業。

【午前中】
イラレの変形に関するツールの操作方法について。
■拡大縮小ツール■回転ツール■シアーツール■リフレクトツールについて、基準点の操作と数値入力による制御。基本的なことだが、あらためて整理して学ぶとツールとしてのデキを納得する。頻繁に使うツールではないが、リシェイプツールもあらてめて便利さを感じた。

ワープツールやフィルタのパスの変形の類は偶然形ができるようなものだが、一通り説明を受ける。
変形パレットの説明も。座標や倍率には演算入力ができるのだが、この説明はなかった。

【午後】
ベジエ曲線の理論、ペンツールの操作方法、パスの修正方法など。トレースの課題も与えられる。

操作の効率を高めるために、ペンツールのまま、アンカーポイントの追加と削除、コーナーの切り替えを行う方法を学ぶ。練習として、正円をハートに変形する練習。

特に新しい技術は出てこなかったが、授業の指導方法として勉強になることが多かった。これが一番の収穫。

【夕方】
今日は16時から講義もある日。「Web概論(1)サイト制作の流れ」

まずは、導入としてDNSの仕組み、Webページが表示されるまでの説明。その後、以下の項目について説明があった。

　・Webの推移と現状
　・Webの利点
　・大規模なWeb制作の体制
　・Webディレクターをは
　・Webデザイナーとは
　・Web制作の流れ

テキストにCG-ARTS協会の「Webデザイン～コンセプトメイキングから運用まで～」が配布される。以前エントリしたが、この本をデジハリに紹介した経緯がある。今回の講義も、この本を読み込むための導入だったと考える。

探求：デジハリ横浜校に生徒を引率

「探求（課題研究）」のフィールドワークとして、デジハリ横浜校の石川氏を訪問した。

石川氏はデジハリの本科を卒業後、テレビ局の子会社にて報道関係の映像編集・番組制作などをされた経験をもつ。テレビの番組制作に興味をもって課題研究を進めている生徒１名が、業界の話を聞きたいということで連絡したところ、快く引き受けてくださった。

17:30から２時間弱。番組制作業界の仕事分担とワークフローをスライド使って分かりやすく説明してくださった。体験談を交えての説明は、Webの情報とは比べ物にならない説得力がある。スライドは、てっきりデジハリの入学相談のために作ったものかと思ったが、この訪問のために用意してくださったという。生徒だけでなく、私も大変良い勉強をさせていただいた。本当にありがとうございました。

対談の様子を客観的に見て、生徒の話の聞き方が良かったことに驚いた。科目「コミュニケーション」でインタビュー実習を行っているので、その成果を確認することができた。そろそろ予定の１時間と思ったところ、かなり超過してしまったのは、コミュニケーションが上手くいった証拠か。

■大師高校・金沢総合高校と同じ時間帯に課題研究が設定されている。昨年度も、発表会への相互参加など、いろいろな連携活動をしながら生徒の研究活動の意欲を高めてきた。
その他、昨年の６月１日にも、デジハリ横浜校のご協力で、交流を深めたこともある。

本日デジハリに行った生徒は、来週金曜の「探求」の時間帯に新橋の日本テレビに見学に行く。見学の予約が取れたので、両校の課題研究担当者に連絡したところ、大師高校で関連する研究テーマを持つ生徒も一緒に参加することになった。本来ならば指導担当の私が引率するのだが、ちょうどこの日は、情報部会の研究大会。他の情報科学系列の先生に引率を依頼してある。

デジハリ080510

デジハリ横浜校、Webデザイナー専攻。第一回目の授業。

【午前中】
必須のツールであるIllustratorとPhotoshopの特徴を説明。その後、Illustratorの基本操作の実習。
CS３になって、パレットの扱いが楽になった。
初めて操作する場合はどこにどの機能があるか分かりにくいだろう。と思ったが、ウィンドウ＞ワークスペースで、パレットの表示を制御できるようになり、保存もできるようになっていた。
頻繁なバージョンアップはデータ互換性の面で困っているが、確かにユーザビリティは向上している。

まずは、図形ツールと塗りと色、カラーピッカー、スウォッチ、グラデーションの説明。

基本機能の説明を聞きながら、情報Bの授業で使うための素材画像を作成した。

３色のスポットライトに見立てた図。今まではPOV-Rayで描いた図を使って実験していた。
これを、IrfanViewの色調補正で赤、緑、青の色を落とし、観察しながら理解を深める。

【午後】
各種図形ツールの特徴、ダイレクト選択ツール、ポイントにスナップの機能など。

立方体の面に配色する際、新しいカラーガイドというパレットが役にたった。

■１６名の受講生に、３名のTA。初日は質問が出るほどの難易度ではなかった。

授業の最後に、イラストレータの作品例として、Vecteezyのサイトを紹介。どのように作られたか、研究用教材としてダウンロードすることもできる。

デジハリ080426

修行のために、またデジハリ横浜校に通うことになった

夜、5月10日から授業が始まる総合ProコースWebデザイナー専攻のオリエンテーションに出席。横浜校10周年記念のキャンペーンと卒業生の割引が効くので再受講を決めた。暇があって通うのではない、強制的に学習環境を確保しないと、知識は増えないし、技術も廃れてしまうからだ。受講生は今のところ17名ぐらい。出席者全員と講師の佐藤先生で自己紹介を行った。

プログラマーが数名、会社のサイトを作っていた方、多少のWeb制作経験のある方、まったく初めての方、と様々。なんと高校３年生もいた。聞くと、情報の免許講習会で一緒に学んだK先生に情報Cを習ったという。

その他、教室のネットワーク環境と実習の進め方の説明を説明。良いサイトを多く見ておくようにと、ikesai.comとあんじょうできてはるの２つのリンク集サイトを紹介された。

テキストが配布されるので大き目の袋を持ってくるよう予告されていたが、授業の初日にまず１冊が配られるとアナウンス。GWを控えて予習したかった方も多いだろう。

デジハリ：東京校オープンスクールに参加

テーマは、『ユビキタス時代のユーザインタフェース！
　　　　　　～実世界指向インタフェース研究動向～』

18時よりデジハリ東京本校にて。講師に、東京大学大学院情報学環教授 (兼ソニーコンピュータサイエンス研究所)の暦本純一氏を迎える。PlayStationのインタフェース開発などにも携わっておられる。

デジタル情報と現実とのギャップを埋めることによって、コンピューターを意識することなく活用する、「実世界指向インタフェース」の研究成果の事例を、サイト上の画像や動画を使って分かりやすく紹介していただいた。素人でも興奮する内容だった。

■複数のPC間や机上・壁面間でのファイル操作を実現するシステムPick＆Drop。

■電界の変化で手の位置や遠近をセンシングするシステムSmartSkin。

■PERCEPTIVE PIXELも遠い未来のものではないだろう。

■特に興味を引いたのは、WiFiを使った位置情報システムPlace Engine。都心部など無線LANのアクセスポイントが無数にある場所ではGPSよりも精度が高いという。実用例として地図への応用も紹介された。

■LifeTagというハードウェアは、その位置情報を記憶することができ、正に人生にブックマークをするというもの。ソニーのデジカメ、サイバーショットDSC-G1では、写真のEXIF情報に緯度・経度を記録する。

参加者は40名弱だが、参加者の層がいつもと違う。終了後の質問もアカデミック。デジハリのスクール生よりも、デジハリ大や大学院生、研究職の社会人が多いという様子。

昔のインターフェースの紹介として、木のマウス第１号の写真が紹介された。1964年頃というが、縦方向と横方向の滑車から位置情報を得るという機能を実現していた。

デジハリ：デジタルムービー体験講座

19:30よりデジハリ渋谷校にて、標記の体験講座に参加

２日間学校を空けたので仕事が山積だが、18時で切り上げる。このような体験講座からは、時代の流れを知るだけでなく、教え方も学ぶことができるので、貴重な機会だ。

内容は、５月からスタートする講座のプレ授業。すでに横浜校で学んだ講座であるが、AfterEffectsのCS3版を体験できるという期待もある。高橋篤史講師の天才的職人意識にも引き付けられる。デジハリ渋谷校のブログで紹介されている。

昨年４月の横浜校での体験講座、５月の第２回体験講座と素材は同じだったが、教え方を学ぶという観点からは期待以上に得るものがあった。新年度は、Adobeソフトを駆使したクリエイト分野を期待されて、パソコン部の顧問を依頼されている。「図形と画像の処理」の授業、総合学科合同Web作成委員会の他にも、校内に技術が広がっていくことを期待している。

デジハリ：Making of 『L change the WorLd』

メイキング・オブ・『Ｌ change the WorLd』 ＶＦＸ＆特殊メイク セミナー　に参加
13時～16時、デジハリ東京校（お茶の水）にて

おととしの11月にMaking of DEATH NOTE セミナーに参加し、CGを駆使したVFXに興味を持ちはじめた。今回は、最新の特殊効果映像の世界がどのように作られているのか、公開中の映画のワンシーンをもとに「ＶＦＸ」「特殊メイク」のメイキングを解説するセミナー。

■VFXのメイキング：村が爆発するシーン

VFXを解説する講師は、前回同様にVFXを担当したデジタルフロンティアの前川英章氏、そして特撮監督の神谷誠氏。最近は仕事が減ったという特殊撮影とCGの合成による制作過程とその技術を紹介。

村が爆発するシーンでは、村のミニチュアセットを作って実際に爆発させ、ハイスピードカメラで実写する。この画像からゴミを取ったり、グリーンバックで撮影した人が吹き飛ぶシーンを合成する。撮影現場の写真はとても参考になった。

上空から爆発を写すシーンでは、森も村もCG。爆発の炎は実写し、合成してなじませていく。

　

■特殊メイク：運転中、顔が見る間に発症していくシーン

こちらの講師は、前川氏と、特殊メイクを担当した西村映造の西村善廣氏。VFXのメイキングの説明中に、西村氏はデジハリ生をモデルに顔中が発症して血がにじみ出てくるメイクの実演。20分ほどで完成。

発症の度合いを変えて、グリーンバックで運転シーンを繰り返し撮影。レイヤーに重ねて位置とタイミングを合わせ、マスクをうまく使いながら徐々に発症していくシーンを作る。さらに車窓の映像と合成し、陰影などを調整していく。

講師には、さらに、映像の中のテレビ画面（モニタデザイン）を担当したデジハリ大学院教授の井上英俊氏。最後は４名の講師から業界の様子を紹介した。司会と４名の講師の息のあった、楽しいセミナーだった。また授業で使えるネタを得た。

デジハリ：XHTML×CSS体験講座

昨晩19:30～21:30、デジハリ渋谷校にて標記の体験講座に参加

横浜校の初回の同講座を受講している。12回の一連の講座では、DreamweaverのCSSパネルの機能を利用して、ボックス構造のレイアウトを中心に学んだ。Web技術は進化し続けているので、あらためてこの体験講座に参加した。
体験講座でも、時期・講師が違えば内容も異なっていた。今回の体験講座の内容は、Yahooサイトや企業サイトでも多用されている、文字サイズの切り替え機能。jQueryというJavaScriptのライブラリを使って、Class属性を書き換えるという手法。

まずは、Web標準化について10分ほどの説明。
■Web標準化の基礎は、文書構造（HTML）と視覚表現（CSS）の分離
■Web標準化のメリット
　１．ファイルサイズの軽量化　～表示スピードUP
　２．メンテナンス性の向上　～作業効率の向上
　３．アクセシビリティの確保　～ユーザ満足度の向上
　４．検索エンジン最適化（SEO)

JQueryのサイトの紹介の後、実習。最終的にはこのように仕上がる。

　

しかし、ページを更新すると文字サイズがデフォルトに戻ってしまう。この対策は本講座の中で説明するという。体験講座として上手くできている。

■家で復習したので、備忘録として残しておく。

　

文字の「大」「中」「小」をクリックしたときの仕込み。クリックすると、body のclassを削除して、新たに書き加えるというjQueryの関数を利用する。index.htmlのこの部分とfont.cssは打ち込んだ。

　

左はダウンロードしたjquery.jsと作成したfont.jsの読み込み。bodyのclassの初期設定「font-M」、これがfont.jsとjquery.jsによって書き換えられえることになる。
右はライブラリjquery.jsの中身の一部。

　

この部分も打ち込んだ。左は、三種類の文字サイズの設定。右は、クリックされた「大」「中」「小」の背景色とリンクの下線の消去の設定。

デジハリ：MovableTypeプレ講座

昨日16:30～20:30、デジハリ渋谷校にて標記の体験講座に参加

直前まで、ICTEの研修会でWebデザインの進化について勉強をさせていただいたばかり。ちょうど内容も一致しているが、CMSを使ったWebデザインのひとつであるブログを構築する実習。来月から開講する講座の体験授業で、前回のプレ講座ではキャンセル待ちとなり、この追加講座に参加することになった。前回の様子は、講師の矢野氏のブログで紹介されている。20名の参加者のほとんどは、デジハリ生または卒業生のようだ。体験講座といっても今回は有料なので、TAもついて活気あるものだった。

■まずブログとCMSの基礎知識、およびMovableType（以下、MT）の概要の説明。個人利用では無料であり、バージョン４になって使い勝手がよくなったそうだ。このMTを使いこなすことで、Webサイトを簡単に運用することができ、その技術を教えるための講座が開設される訳だ。Webシステムの進化は、Web制作者泣かせだが、デジハリには富をもたらす！

2007年の発表では、ブログ検索エンジンTechnoratiが追跡しているブログの数は全国で7000万で、そのうち日本語で投稿された記事数は全体の37%で英語圏を抜いて１位だそうだ。

■次に、MTの利用例としていくつかのサイトの紹介があった。
ショッピングサイトベネトン・ジャパンでは、ブログとは思えないようなレイアウト。そして、ECKitというMTと連動できるECパッケージを利用している。

幼稚園から大学までを持つ和光学園のサイト。この中の中学と高校のページはMTで作り、担当教員が更新しやすくしている。

デジハリのサイトも。サイト全体はMTで、各校ごとのブログはTypePadを利用しているという。ちなみに、デジハリ生はNEXUSというSNSに参加するが、これはOpenPNEだろう。

2008年春に関西の初店舗となるIKEAポートアイランドを開店する。このポートアイランド店が「できるまで」の様子を追うという異色のIKEAのサイト。

■ブログを運用していない受講者もいるので、MTがどんなアプリケーションであるかを、講師がデモンストレーションする。更新作業やデザインを変える、投稿する画像をドラッグで位置やサイズを変えたりした。

■いよいよ実習の開始。まず、サーバスペースを用意する。レンタルサーバサービスヘテムルの利用登録をする。登録後15日間の無料お試し期間がある。さらにヘテムルのコントロールパネルにログインして、データベースを作成する。

■本来ならばSixApart社からダウンロードするが、トレーニングライセンスで入手してあるMTのアーカイブを解凍する。IEのFTP機能を使ってサーバにアップロードし、CGIファイルのパーミッションを設定。

■MT４のインストール作業はすべてブラウザ上で行うことができる。
　

インストール直後のページ。さらにキャプチャ認証機能を設定。

　

StyleCatcherを使った簡単なデザイン変更や、テンプレートタグの編集。ブログは複数設定することもできる。
　

隣の席の人と、コメントやトラックバックの練習。ブログを使っている人でも、トラックバック機能を知らない人が多かったのには驚いた。

この日は一日CMS漬けだった。