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\htdocsずC:\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を、httpかcookieに倉曎。 phpMyAdminにアクセスした時にナヌザ名ずパスワヌドを聞かれるようになる。ナヌザ名はroot、パスワヌドはStep9で蚭定したもの。

  12. MTをむンストヌル
    C:\xampp\htdocsにmtフォルダを䜜り、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 Service ずAnother 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 りェブマスタヌツヌルなどで芋おも、ただその圱響は珟れおいないようですが。