一体これは誰のための仕事(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 ウェブマスターツールなどで見ても、まだその影響は現れていないようですが。

職場用にキーボードを購入

写真: 先日買ったばかりのキーボード "MajestouchMini日本語100キーボードかなあり黒  FKB100M/JB" 先日、秋葉原でキーボードを買いました。メカニカルタイプのの日本語キーボードです。職場での DELL のキーボードがそろそろヘタってきて引っかかりを感じるキーが出てきていたため、これを機会に個人的に目を付けていたキーボードを買ったというわけです。
買ったキーボードはこちら。 MajestouchMini日本語100キーボードかなあり黒 FKB100M/JB

メカニカルタイプは初めて使うのですが、パンタグラフタイプよりは明らかに打鍵音が大きいので職場で使う私はちょっと気になるかなぁ・・・と思っていたりはします。。しかしとにかくキータッチの感触が良い!ここに惚れ込みました。硬すぎない、スムーズなキータッチなのに、かっちりとした安定感があるんです。 Majestouch (マジェスタッチ)と名乗っているだけありますね。Majestic (威厳のある とか、堂々とした という意)という単語からのネーミングだと思われます。

中に鉄板でも入っているのかずっしりと適度な重量があり、またデスク設置面に大きめのゴムが付いているので、デスク上での安定感は抜群です。ちょっとやそっとじゃずれません。

ただ、私の購入したのはミニタイプであるため、キー配列が少し特殊です。省スペースタイプのキー配列に多少無理があるのは承知の上なのですが、本製品のキー配列で勘弁してほしいのが、右シフトキーの左隣が「↑」キーであること。右シフトキーの隣は「\ / _ / ろ」でないと、「_(アンダースコア)」をタイプする時に不便なのです。これは実際使ってみないと分からないところですね。。省スペースじゃない方を買っておけば良かった!!とちょっと後悔しました(泣) 慣れでなんとかなるとは思いますが・・・。

そして最後に・・・ Amazon で買った方が安かった(爆)

『Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト』

写真: 『Web標準の教科書』 CYBER@GARDEN の益子貴寛氏が執筆した XHTML + CSS リファレンス本。2005年7月20日、第1版第1刷発行。

仕様に従った XHTML + CSS のコーディング、つまり Web 標準的なコーディングの大切さを教えてくれた本書は、コーダーとしての私のバイブルとなっています。

ブラウザで見る際の視覚的な結果からマークアップする要素を決定するのではなく、文章構造上妥当である要素を選択しマークアップしていくという考え方。今の日本の Web 業界にこういった Web 標準的な考え方を一般化するにあたり、本書はその一翼を担っていると私は確信しています。私はもし本書に出会わなかったら、コーダーになっていなかったかもしれません。

本書の内容では特に CSS のリファレンスが素晴らしく、各プロパティごとに「値・規定値・適用対象要素・継承するかしないか・パーセンテージ・メディア・未対応ブラウザ」といった項目が表にまとめられ、分かりやすい例を挙げながら解説されています。
XHTML の方も要素ごとに「書くことができる属性・含むことができる要素」などを詳しくまとめてあったらなお良いのでは・・・と思ってはいますが、要素ごとのマークアップ例は秀逸で、非常に参考になります。

600ページを越える書籍であるだけに、私は全てのページに目を通したわけではないのですが、必要となった時に必要とする項目だけを索引から引くという、辞書的な使い方をしています。コーディングをする上で手放せないものとなっていますので、会社用と自宅用で2冊持っていたりします。コーダー必携の1冊と言えるでしょう。