Web標準の日々に参加しました

先の連休にはWeb業界のフジロックとまで呼ばれる、Web標準の日々に参加してきました。

個人的には前回参加したCSS Nite LP, Disk 3 "Coder’s High"で燃え尽きた感があったので、今回のイベントはあまり乗り気ではなかったのですが・・・。これだけ豪華な内容で、かつ参加費も昨年のWeb標準の日に比べると格安ときた。しかしなんといってもこの"祭り"に乗り遅れるわけには行きません!というわけで2日券を購入して参加しました。

セッション登録申し込みが遅れたせいか、本命と睨むセッションには登録ができませんでしたが、当日に並んでみると意外にすんなり入場できてしまったり。そんなわけで、立ち見したものも含め、結果的に私が参加したセッションは下記になりました。

7月15日(日曜日)
A1: WCAG 2.0: 見えてきたアクセシビリティの新基準(植木 真 氏)
Z2: W3Cのこと、本当にご存知ですか?(萩野 達也 氏)
A2: スクリーンリーダー開発者が明かすコンテンツ制作のツボ(大塚 雅永 氏)
V3: デザイナーズ・ハイ デザインタイトルマッチ!(矢野 りん 氏)
X4: 転ばぬ先のプロジェクトデザイン(木達 一仁 氏)
7月16日(月曜日)
X5: 複合文書から見たXHTML+CSSとスキーマ活用(石川 雅康 氏)
D6: Web制作におけるアートディレクションとテクニカルディレクション(神森 勉 氏、佐分利 仁 氏)
D7: ビジネス・アーキテクツのコミュニケーションデザイン(森田 雄 氏)
J8: DOMから始めるJavaScriptモダンスクリプティングの基礎

初日の木達さんのセッション(X4)だけは絶対に受講したかったので、セッション登録していないにも関わらず並んで受講しました。ここで意外と余裕に座れてしまったのと、木達さんのお話が素晴らしかったので「二日目はディレクションだな」とここで頭を切り替えることができました。

二日目は「セッション登録なしでもなんとかなる」と、アンカーテクノロジーのお二人のD6、ビジネス・アーキテクツ森田さんのD7を続けて立ち見で受講。両セッションとも「分かる人には分かる」内容だったなぁ・・・という感想を持ちつつ、他ではとても聞くことができない大変に有難いお話でした。
そして何よりもこれらのセッションでは「よい仕事がしたい」という熱意が、会場中を満たしていた気がします。そこがよかった。具体的な内容については、ここでは言及しません。

そして最後に羽田野さんのJavaScriptのセッションを受講。"Web標準の日々"にふさわしく「JavaScriptは主役になってはいけない」・「JavaScriptが無効でもコンテンツの内容がきちんと伝わるHTMLを書く」という主張が軸となる、非常にテンポの良いセッションでした。内容もタメになったし、言うことなしです。今度、羽田野さんのDOMの本でも買おう。

受講したセッションの中で、自分的にナンバーワンだったのは木達さんのセッションでした。これだけは復習も兼ねて後でまとめを記事に書こうと思っています。今度の休日にでも。

とにかく関係者の方々も参加者の方々も、大変にお疲れ様でした!皆様にこの場をもってお伝えしたいことは、「とても楽しめました」という感謝の気持ちです。本当にありがとうございました!

WinXPローカルでXAMPPを使ってMovableTypeを動かす

追記 – 2010-03-14

2010年3月時点では、この記事の情報は正確でなくなっている可能性があります。現在の情報で当記事を書き直しましたので、よろしければそちらをご覧ください。

  1. XAMPPのインストール、Apacheの設定
  2. ActivePerlのインストールと設定、MySQLの設定
  3. ImageMagickのインストール、Movable Typeのインストール

ローカルでMTが動かしたくて数日格闘した結果、無事動かすことができました。せっかくなのでここにやり方をまとめます。

環境と準備

  • OSはWinXP SP2
  • XAMPPは2007年5月30日時点の最新版(version 1.6.2)
  • XAMPP Perlアドオンは2007年5月30日時点の最新版(version 5.8.8-2.2.4)
  • DBはMySQL
  • xamppをインストールするディレクトリはC:\xampp(デフォルトでそうなってる)

まずはXAMPPをダウンロード。ここでは[ベーシックパッケージ]のインストーラ版を使用。

それからPerlアドオンもダウンロードしておく。同ページからDL可能。ここではインストーラ版を使用。

ローカルでMTが動くまで

  1. XAMPPのインスーラを実行。
    インストールの途中apache、MySQLはサービスとしてインストールしておく(自動起動になる)。他の設定はここでは全てデフォルトに。C:\xamppにインストールされる。ファイルがそれなりに多いのでちょっぴり時間かかる。
  2. Perlアドオンもインストール。インストール設定はデフォルトでOK。ファイルがそれなりに多いのでこちらちょっぴり時間がかかる。
  3. Apacheの再起動(アドオンを有効にするため)
  4. http://localhost/ にアクセスする。最初に言語選択画面が出るので「日本語」を選択。その後「XAMPP Windows版へようこそ Version 1.6.2 !」と表示された画面が出るはず。ステータスをチェック。
  5. CGIファイルの関連付けを変える。
    拡張子が「.cgi」のファイルを右クリック→プロパティ→プログラムの変更→参照ボタン→C:\xampp\perl\bin\perl.exeを選択してOK。
  6. C:\xampp\apache\conf\http.confの設定。
    エディタで開いて、372行目、#ScriptInterpreterSource registry#を外す。これでファイルの関連付けに基づいてPerlのパスが処理されるようになる。保存してApachの再起動
  7. DBの準備
    http://localhost/phpmyadmin/にアクセス
  8. 「新規データベースを作成する」に「movabletype」(DB名)と入力して「作成」ボタンを押す
  9. セキュリティ対策 (1)

    • メニューの「特権」をクリックして「root」ユーザの「操作」のアイコンを押す
    • 「パスワードを変更する」でパスワードを入力。「実行」ボタンを押す。するとphpMyAdminにアクセスできなくなる。
    • C:\xampp\phpMyAdmin\config.inc.phpをエディタで開き、81行目のpasswordの値に先ほど設定したパスワードを入力して保存。するとphpMyAdminにアクセスできるようになる。(※ セキュリティ対策(3)を先に実施すればこの設定は不要…?)
  10. セキュリティ対策(2)

    C:\xampp\htdocsC:\xampp\htdocs\xampp.htaccessファイルを設置して、外部からのアクセスを遮断。

    ファイルの内容は

    order deny,allow
    deny from all
    allow from localhost
    allow from 127.0.0.1

    とかでいいはず。
    よく分からない人は.htaccess Editorとかで作りましょう。かく言う私もよく分かっていません。 ちなみに.htaccessファイルはBOM付きのUTF-8で作るとエラーになるので、Shift_JISとかで作っとくのが無難です。

  11. セキュリティ対策(3)

    C:\xampp\phpMyAdmin\config.inc.phpの68行目の値configを、httpcookieに変更。 phpMyAdminにアクセスした時にユーザ名とパスワードを聞かれるようになる。ユーザ名はroot、パスワードはStep9で設定したもの。

  12. MTをインストール
    C:\xampp\htdocsmtフォルダを作り、MTのファイルをコピー。 http://localhost/mt/でアクセスしてみる。 http://localhost/mt/mt-check.cgiを実行し、一番下の方に「準備が整いました(略)」と出ていればOK。
  13. http://localhost/mt/mt.cgiにアクセスするとMTの設定ウィザードになる。 (C:\xampp\htdocs\mt\mt-config.cgiをいじってもいいけど、こっちのが簡単)
    1. ステップ1/3

      見つからないパッケージが一覧で出てくるが、今回は無視。使うならお好みで調べてみてくださいー。

      • Image::Magick → 今回は無視。使うならお好みでー。
      • Crypt::DSA → 今回は無視。使うならお好みでー。
      • DB_File → Berkley DBを使わないので必要ない。
      • DBIとDBD::Pg → PostgreSQLを使わないので必要ない。
    2. ステップ2/3

      データベース → 「MySQL Database」

      • データベース名 → movabletype
      • ログイン名 → root
      • パスワード → セキュリティ対策(1)か(3)で設定したパスワード。未設定なら空白。
      • データベースサーバー → localhost
      • データベースのポート → 空白
      • データベースのソケット → 空白

      「接続のテスト」ボタンを押す → 「データベース設定を完了しました。次へボタンをクリックしてメールの設定をしてください。」と出たら「次へ」

    3. ステップ3/3

      ここではしません。「次へ」。これで「mt-config.cgi」が生成される。

    「Movable Type Publishing Platform 3.35の構成が終了しました。」と出る。「インストール」ボタンを押す。
  14. あとはレンタルサーバーなどにインストールするのと同じように、ログイン名とかの設定をフツーにしていけばOK。

Continue reading

一体これは誰のための仕事(Webサイト)か

自分は良かれと思って制作したものなのに、クライアントに、上司に、チームメンバーにそれを理解してもらえないことがあります。この問題は、Web制作の仕事をしていると誰しも必ずぶち当たると思います。

自分がその状況に陥った時、頭の中には「一体これは誰のための仕事(Webサイト)か」という問いがいつも浮かんできます。

(1) クライアントのための仕事(Webサイト)である

正しい。お客様は神様です。
この仕事に対してお金を払っているのはクライアントです。そしてクライアントが利益を上げるためにあるのがこの仕事(Webサイト)であり、それを第一に本気で考えているのはクライアントのはずです。
この仕事(Webサイト)はクライアントのものだという事実を忘れてはいけないのです。

(2) ユーザーのための仕事(Webサイト)である

正しい。どんなサービスでもユーザーに使ってもらえなければ全く意味がありません。
クライアントである企業が提供するサービスは、ユーザーに使ってもらうことにより初めて利益をあげることができます。かつ、利益をあげられる素晴らしいサービスを提供することは、それ自体が社会への貢献です。Webに関して言えば、それがWWWの繁栄に貢献することに他なりません。

どういう手法を用いればユーザーのための仕事(Webサイト)になるのか、クライアントサイドに知恵が乏しい場合、制作者である我々が正しい方向に導かなければなりません。これはプロフェッショナルとしての義務です。

結論を言えば「どちらも正しい」わけで、どちらか一方に傾き過ぎるのは危険だということです。このパワーバランスが崩れて仕事がうまく行かなくなる原因は、一方はクライアントサイドのエゴであり、一方は制作サイドのエゴでしかないからです。
この仕事(Webサイト)はクライアントのものであり、かつ社会の大きな資源(WWW)の一部であるという事実。
うまく中庸をとり、最も自分が貢献できる方法を考えることはゴールへの近道だと思います。

私の場合、その方法とはとにかく手を動かすことだと思っています。とにかくやってみる。時には妥協し、そして時には挫折する。そんな日々です。

CSS Nite LP, Disc3 参加レポート

写真:セッションの様子 CSS Nite LP, Disc 3 -Coder’s High- に参加しました!
コーダー祭りということもあって、非常に盛り上がったイベントでした。300人以上の方が参加されたようです。スゲー。
会場のスクリーンはダブルスクリーンで、左側は Twitter での実況中継、右側はプレゼンのスライドが映し出されていました。

以下、各セッションの内容を簡単にレビューします。プレゼンター名は敬称略です。
写真が見たい人は公式サイトのフォトギャラリーでどうぞっ

ザ・コーディングの美学 – 益子 貴寛

  • 「コーディングの真・善・美」がメインテーマ。「真→論理 / 善→倫理 / 美→芸術」。
  • 真は様式美であり、善は機能美である。全てはに集約される。
  • &芸 → を磨くことが大切。

綺麗で読みやすいコードを書くことによってメリットを、ロジカルに分かりやすく説明するプレゼンテーションでした。
とてもテンポが良く、トップバッターとしての役割をばっちり果たされていたと思います。

後に公式サイトでスライドが公開されると思いますので、参加されなかった方は是非ご覧になることをお勧めします。

フィロソフィー・オブ・コーディング – 小久保 浩大郎

  • Web だけが唯一ユニバーサルデザインの可能性を秘めたメディアである。それは「情報のマテリアル」が「形を持った表現」になる場所が従来のメディアと異なり、「受け手」側にあるから。「情報のマテリアル」を伝えるのは言うまでもなく、コードである。
  • Web 標準の正体は「HTML をクリーンに保つこと」が唯一の目的。「Web 標準」という言葉の定義をめぐっての議論はナンセンス。
  • 環境の価値を高めることにより、自分の価値も高める。まさにあなたの書くコードが Web という環境を作っている。

Web 業界全体という広い視点で、HTML のコーディングがいかに大切か。図表などがうまく駆使されたスライドで、抽象的な内容を扱っているにも関わらずとてもわかりやすかったです。コーダーという仕事に希望を持てるような、そんな気持ちになるセッションでした。

Dreamweaver の機能再点検 – 鷹野 雅弘

プレゼンター鷹野さんが ITpro にて連載されている「作業効率を高めるDreamweaverの小技」の総集編とも言える内容でした。

短い時間の中での、テキパキとテンポのよいプレゼンテーションは流石、としか言いようがありません。

LIVE コーディング(A) – 神森 勉

本イベントの目玉 Live コーディングの“その1”です。

ブラウザチェックのタイミングについて。全て作り終わってからチェックするのではなく、要所要所でチェックをしてやる。これにより後に大修正、といった事態を防ぐ。

Dreamweaver CS3 でのコーディングなのですが、コードビューをほとんど使わず、デザインビューやダイアログを使いこなして作業されていました。Dreamweaver がどういったコードを吐き出すのが、ほぼ完璧に理解していないとできない芸当です。ここまできっちり Dreamweaver を使い倒す人がいるのか・・・と思わず目を丸くしたセッションでした。

Microformats で上質コーディング – 長谷川 恭久

「今日の僕は Microformats のセールスマンです」というプレゼンター長谷川さんのお言葉通り、Microformats のメリットや利用状況、今後の展望などを紹介するセッションでした。

Firefox バージョン3では Microformats を最初から利用できる環境になっているのだそうです。ブラウザベンダーは Microformats を有望な存在として見ているとみなしてよいとのこと。将来性があるということですね。僕も Microformats に取り組んでみようっと!

プロはこう使う! Another HTML-lint 徹底活用術 – 太田 良典

  • the W3C Markup Validation ServiceAnother HTML-lint の違いを解説。
  • Another HTML-lint の点数は目安でしかない。何のためのチェックなのかよく考える。100点を取るための修正は愚かしい。
  • 文書型が不適切な場合はエラーが多発…Strictにするメリットは?
  • 判定について意見や不満があれば、作者のK16さんにメールをするとすぐに修正される。
  • Another HTML-lint は営利目的では有料

プレゼンター太田さんの話術が巧みで、一番笑いのあるセッションでした。ホントに楽しかった。またお話聞きたいです!

LIVE コーディング(B) – 河内 正紀

本イベントの目玉 Live コーディングの“その2”です。

こちらも Dreamweaver CS3 を使ったコーディングでしたが、Live コーディング(A)の神森さんとは対照的に、デザインビューを全く使わず、コードビューでコードヒントをフルに使ったコーディングでした。私も河内さんがサイトで配布されているカスタマイズ版コードヒントを使用させていただいているので、作った人がどうやって使いこなしているのか実際に見ることができて感激です。参考になるコードがいくつかありました。おそらく河内さんのご作品も後に公開されると思いますので、興味のある方はそちらを見てみると良いでしょう。

河内さんご本人もブログに書かれていますが、机の両隣を bA の小久保さん・太田さんが挟み、適宜解説が入りながらの作業でしたので、大変なプレッシャーだったようです。本当にお疲れ様でした…

最後に、コーディングコンテストの結果発表がありました。私も応募していたので、少しは期待していたのですが…入賞はならず、改めて上には上がいるものだ、と痛感しました。最優秀賞のご作品は、審査員全会一致でダントツトップだったそうです。そこまでの“差”とは何なのか非常に興味深く、ソースコードが公開されるのが楽しみです。
また、自分の応募した作品について、記事で取り上げて言及しようと思っていたのですが、今ではなんだか恥ずかしくなってしまったのでやめます(苦笑)

イベントが終了した後には懇親会にも参加し、プレゼンターの方々や参加者の方々、たくさんの人とお話できました。こちらも含め大変に充実したイベントであり、Web 屋としての自分にとって大変刺激になりました。関係者&参加者の皆様、本当にありがとうございました!

アーカイブ一覧をJavaScriptで書き出すMTテンプレート

エントリーを新規投稿する度に、全てのページにあるアーカイブ一覧やタグクラウドをいちいち再構築させるのはだるい、と思い JavaScript で書き出すことにしました。SSI や PHP でやった方がスマートだと思いますが、サーバーサイドはいまいちよく分からないので・・・という軟弱な理由で今回は不採用。

MT テンプレートにして自動更新されるようにしたので、せっかくだからテンプレートを公開してみます。恥ずかしいくらいシンプルなシロモノですけれども。

アーカイブ一覧を書き出す JavaScript のテンプレート(txt形式)

「月別アーカイブ」・「カテゴリーアーカイブ」・「直近の10記事」・「タグクラウド」を書き出す命令を function に突っ込んでいるだけです。書き出す XHTML も各項目が li 要素でマークアップされているだけのシンプルなリストです。実際にこのサイトでテンプレートから構築された後の JavaScript はこうなっています(他のスクリプトも多少混在してますが)。

XHTML 側では下記のように関数を呼んであげればいいだけ。

<script type="text/javascript">
recentEntries();
categoryArchives();
tagCloud();
monthlyArchives();
</script>

ただし、当然 JavaScript が無効な環境ではなんにも表示されなくなりますのでご注意を。JS オフな環境を考慮して、トップページのみはこの方式のインクルードを採用せず、普通に XHTML で書いてます。また JS オフだとその旨を通知するメッセージが出るようにしました。いずれも 2xup さんのアイデアを参考にさせていただきました。でも 2xup さんのスクリプトの方が100倍はカッコいいので、間違っても比較しないように。。

またデメリットとして、動的に書き出すコンテンツは静的なコンテンツより一般的に SEO が弱いと言われている点ですね。だから内部リンクは弱くなるのではないかなぁとか思います。施策したばかりなので、Google ウェブマスターツールなどで見ても、まだその影響は現れていないようですが。