以下、私が参加したセッションの感想を簡単にまとめます。

WordPress プラグインを作って世界と交流しようぜ！

宮内 隆行 氏

WP Total Hacks プラグインの作者である宮内氏による、WordPress公式ディレクトリ登録のメリット解説でした。
公式ディレクトリは無料で使えるオンラインストレージで、実質容量は無制限、バージョン管理システムも付いているとのこと。これだけでもとりあえず使ってみる価値はありそうですね。
あとは誰もが知りたい「儲かってるの？」という話もありましたが、販売で収益を上げるのはいろいろ難しいそうで、やはり受託開発でペイしているとのことです。

WordPress の動作原理詳説

プライム・ストラテジー株式会社 大曲 仁 氏

WordPressが閲覧者からのリクエストに応えてページを出力するまでの過程を、下記の4つのフェイズで解説されていました。

1. 起動
2. リクエスト解析
3. データベースリクエスト
4. 表示

WordPressには動作プロセスの随所に「フック」と呼ばれる仕掛けが用意されており、それを活用してデータベースの検索条件を変更したり、出力されるHTMLに情報を追加したりできるんですね。
何か不便を感じた時に、WordPress本体に変更を加えることなくプラグインでカスタマイズできる。
しかもそのプラグインを配布したりバージョン管理を行ったりするバックエンドのシステムも充実している。
これがWordPressの優位性であり人気の秘密なんだと思います。

WordPress の現在とこれから

マクラケン直子 氏

WordPressで作られた有名サイトの実例を多数見ることができました。
あとは懐かしい旧バージョンの管理画面や、設計思想の話も。
WordPressは単にWebサイトを作るツールというだけでなく、それを使う人ライフスタイルにまで及ぶような思想が含まれている「何か」のような気がします。うまく表現できませんけど。
WordPress関連のイベントに行くと、規模の大小にかかわらず「WordPressらしさ」を感じますし、コミュニティを運営している人たちにすごく一体感があるんですよね。
そのあたりを理解できるのが、真のWordPressユーザーということなのかもしれません。

未来を見据えたレスポンシブ・パブリッシング

こもりまさあき 氏

デバイスの多様化により、これまでのPCサイト、携帯サイトという括りでは対応しきれなくなってきたWebサイト制作の現状、さらに電子出版についても分かりやすく説明していただきました。
電子書籍に使われるePubというのはHTMLやCSSをZip圧縮したものだそうです。
先日の中川 直樹 氏の講演とも関連しますが、今後あらゆるメディアがWebの技術をベースに置き換わっていくことは間違いなさそうですね。

たった一人の反乱〜WordPressで電子書籍を売る〜

小説家兼株式会社破滅派代表取締役 高橋 文樹 氏

すごく大雑把に要約してしまうと、出版社に取り上げてもらえない小説を発表するために電子書籍を出版することを思い立ち、それをWordPressで実現するためのプラグインを自力で開発し、さらに法人化までしてしまった人の経験談です。
とにかくエネルギッシュな方でした。
おそらく私のような凡百には想像もつかない苦労もされていると思いますが、笑い話にしてしまえるところに強さを感じました。
他のプレゼンターの方々もそうですが、皆さん喋りがうまく人間として魅力的ですね。

百式ブログの毎日更新を10年+続けてわかったことと、これからの展望

田口 元 氏

「百年後の人がGoogleで検索した時に自分の情報がどんな風に見えて、どういう風に思うか」など、新鮮な視点をいくつか与えていただきました。
ネット上に顔をさらさないポリシーをお持ちで、今回初めて本人の姿を拝見しましたが、秀逸なプレゼンとマシンガントークに魅了されました。
紹介された書籍もさっそく購入して読んでみます！
すごい会議－短期間で会社が劇的に変わる！
絶対ブレない「軸」のつくり方
運のいい人、悪い人―運を鍛える四つの法則

パネルディスカッション「ブロガーが語るブログ運営のコツ」

堀正岳 氏、五藤 隆介 氏、麦酒男・タカバシ 氏

堀氏と後藤氏の名前はEvernote関連の書籍で知っていましたが、お三方とも初めて拝見しました。
一様に、ブログに真剣に取り組んだことでものの見方や人付き合いがガラリと変わったと語られていました。
確か後藤氏の発言だったと思いますが、「自分の部分、人間臭さを加味することを恐れない」という言葉が響きました。
堀氏のいかにも誠実で思慮深そうな語り口が印象的でした。

2011-11-30 追記
WordCamp Tokyo 2011 タイムテーブルのページにビデオやスライドが公開されました。
当日行けなかった方には嬉しいですね。
私も裏番組になってしまって観られなかった 星野 邦敏 氏 や 長谷川 恭久 氏 のセッションなどをチェックしてみようと思います！

去る2011年11月17日、アップルストア銀座で開催された CSS Nite in Ginza, Vol.60 に参加してきました。

今回は株式会社アンティー・ファクトリー代表取締役の 中川 直樹 氏による「Web Creators Pride 2011」という講演でした。

仕事ををする上でのマインドの持ち方とか、ビジネスのアイディアに関する話題が中心で、「Webクリエイターの仕事には未来がある！プライドを持って頑張っていこうぜ！」というメッセージが繰り返し語られる熱いセッションでした。

以下、講演メモを箇条書きで。

• デザインとは何かということを突き詰めると、何でもデザインになる
• Webクリエイターのできる領域はすごく広い、それ故、社会に対する責任がある
• 持続可能な社会づくりという課題に対して我々に何ができるかを考える必要がある
• 現代社会の抱える問題を解決することのデザイン（ソーシャルデザイン）を通じて次世代のスタンダードをつくることが我々の仕事

• Microsoft Productivity Future Vision のような世界を実現するための技術はすでに準備されつつある
• ソフトウェア思考ではなくヒューマンウェア思考でサービスをつくる
• ソフトウェアを触っていると感じさせないことが重要
• 「モノ」を売るのではなく「コト」を提供する
• 複数の技術を組み合わせて相乗効果を生み出す
• 技術屋的な発想で既存の技術をいくつか詰め込んでも革新的な製品にはならない
• 何があったら便利だろう？から考え、それを実現するために既存の技術を組み合わせる

• スマートフォンの本格的な普及は3年～5年後
• サービス提供のタイミングをイノベータ理論におけるアーリーマジョリティに合致させる
• デザインの原則は新しい技術にも適用できる（ユニバーサルデザイン7原則、グッドデザイン10原則）

帰ってからすぐ使えるTips的なものはありませんでしたが、こういう意識を持ち続けることで今後じわじわ効いてきそうな気はします。

1. 横スクロールバーが表示されるまでウィンドウ幅を縮める
2. 画面の外に隠れた領域を見るために横スクロールバーをドラッグする
3. すると、画面の外に隠れていた領域の背景がなくなる

背景色や背景画像を設定したヘッダやフッタをウィンドウ幅いっぱいに表示している場合にこの現象が発生します。

解決策は、width:100% を指定したボックス要素に min-width の指定を追加することです。

#footer {
  width: 100%;
  min-width: 1060px;
  /* （以下略） */
}

なお、IE6は min-width に対応していませんが、私の確認した限りIE6では上記の現象が発生しないため問題なさそうです。

こちらのサイトに動作デモと解決法が簡潔に記されていました。

• ブラウザの横スクロールしたら背景100%のヘッダやフッタが切れてしまう – DEPTHCODE

この方法が有効な理由については、こちらのサイトの説明が分かりやすかったです。

• CSSサンプルプログ: 横いっぱいに伸びる背景について

今回のテーマは『ウェブデザインコーディネートカタログ』 を作って見えてきた、2011年の デザイントレンド考察ということで、新刊書籍の執筆陣による内容の掘り下げが主な内容でしたが、その他にも許諾の関係で掲載に至らなかった没ネタの紹介もあり、有意義なセミナーでした。
以下、セッションで紹介されたサイトを列記します。書籍に掲載されたカテゴライズとは違った切り口になっているとのことで、これは書籍のほうも読んでみないといけませんね！

断片化された情報の集積

• D&DEPARTMENT PROJECT
• 大阪人間科学大学
• キャラリー
• Messages for Japan

アプリっぽい（デザイン・動き）

• Tiny Fluid Grid
• おはし吉膳
• level0
• A4折形
• AppArt
• Momento

質感・素材感

• つくるひと
• 暮らしと、写真と。refocus[+]
• SIGNATURE FLOWER
• 私の森.jp
• Discover Shiretoko

機能的なわかりやすさ

• 東日製作所
• 明治地所株式会社
• 貝塚市ホームページ
• ミスターマックス

ガーリー・女の子

• 大阪薫英女子短期大学
• おうちカクテルワークショップ（注：現在公開中のデザインとは違うようです）
• プーペガール

以下、自分なりに理解した概要を要約してみます。というか自分の主観が入りまくっているのでただの感想ですね（汗）

最近のWebデザインのトレンドは、グローバルナビ以外にページの下方に大きめのパネル状のパーツを並べるのが流行りだそうです。
（ビルボード＋ピックアップバナーという表現で説明されていたと思います。）

また、ソーシャルメディアの影響により、ストーリーや読ませ方といったサイト側からの主張を極力なくした形で、断片化されたたくさんの情報を一覧できるようなスタイルを取るサイトも増えているとのこと。
その表現手法として、細かく仕切られたコンテンツがウィンドウ幅に応じてグニャグニャ移動する「多段グリッド」という手法が紹介されていました。

アプリからの影響でWebが変わった例も紹介されていました。
確かに、iPhoneアプリのような「単純化されたリアリティ」とでも言うべき外観がもてはやされていますね。
それだけでなく、画面エフェクトや機能の面でもアプリっぽさを追求したサイトが増えてきています。
アプリの公式サイトで特にこうした傾向が見られるようです。

行政関連サイトでは、貝塚市ホームページが絶賛されていました。
ピクトグラムの使い方、機能ごとのボタンやリンクのカテゴライズの仕方が群を抜いている、とのことです。
今の自分の仕事に比較的近い分野なので、あらためてよく見ておこうと思いました。

追記
今回、事前予約していたのですが、道に迷って少し遅れて行ったらすでに満席で、会場の隅っこで小さくなって体操座りしながらの傍聴となりました。
次回はちゃんと道順を確認してから行こう！

唯一の注意点は、Windows7のエディションです。
Microsoftの日本語ページによると、XP Mode が利用可能な Windows 7 のエディションは、Professional、Ultimate、Enterprise のみとなっています。
私はProfessionalの32bit版と64bit版で動作確認しました。
以下、導入手順のおさらいです。

まずはこちらのWindows XP Mode ダウンロードページからインストーラを入手しましょう。MicrosoftのサイトですがIE以外のブラウザでもダウンロードは可能です。というか、IEだとダウンロードに失敗したとき萎えるのでFirefoxやOperaなどを使いましょう。
お使いのWindows7エディションと言語を選択して、その下に3つ並んだダウンロードボタンをぽちぽちっと押します。一番左のは数百メガバイトの巨大ファイルなので、少々時間がかかります。
あとはダウンロードしたインストーラを順番に実行していきます。2つ目と3つ目のインストーラ実行の後に再起動が必要です。

インストール完了後、スタートメニューから「すべてのプログラム – Windows Virtual PC – Windows XP Mode」とたどって Windows XP バーチャルマシンを起動します。

初回起動時のみ、Windows XP アカウント用パスワードなどの設定画面が表示されますが、2回目からは表示されません。

で、無事 Windows XP のデスクトップ画面が立ち上がったら、すぐさま Internet Explorer のアイコンを右クリックして、ショートカットを作成します。

ショートカットの名前は適宜変更してください。私は「IE6」にしました。

次に、Windowsエクスプローラを起動します。スタートメニューから「マイ コンピュータ」を選ぶのが一番分かりやすいですかね。

Windowsエクスプローラが起動したら、「ローカル ディスク (C:)」のアイコンをダブルクリックします。

警告っぽい画面が出るかもしれませんが、かまわずCドライブの中へ入っちゃってください。
その後は、「Documents and Settings – All Users – スタートメニュー」と順番にフォルダをたどっていきます。

次に、先ほどデスクトップ上に作成したIE6のショートカットを、このスタートメニューの中にドラッグして移動させます。

この場所にショートカットを置いておくと、Windows XP 用のプログラムを Windows 7 のスタートメニューから直接起動できるようになるというわけです。

あとはスタートメニューからログオフして、 Windows XP バーチャルマシンでの作業は完了です。
ここでWindows7側のスタートメニューを確認してみましょう。「すべてのプログラム – Windows Virtual PC – Windows XP Mode アプリケーション」とたどっていくと、先ほど作成したIE6のショートカットがあるはずです。起動してみましょう。

いくつか画面が現れたり消えたりしますが、気にせず待っているとIE6が単体のアプリケーションのように起動します。
Windows 7 のデスクトップ上に Windows XP スタイルのウィンドウが突如出現するので、気になり始めるとかなり奇妙な光景だと思います。
ちなみにバージョン確認画面はこんな感じでした。

IE6を使うという目的に限れば、最初の設定をした後、Windows XP バーチャルマシンの画面を開く必要はなさそうです。
ちなみに、スタートメニューの中のプログラム名をマウス右クリックしながらデスクトップへドラッグすると、ショートカットを作成することができます。
スタートメニューから起動すると少し階層が深いので面倒ですが、こうすればほとんど他のWindowsアプリケーションと同じ感覚で使えます。
これはIE6検証環境の決定版かもしれない。なにせ本物ですから。

2011-11-18 追記
Windows XP バーチャルマシン上のIE6を何回か使っているうちに、エラーダイアログが出て単体で立ち上げることができない場合があります。
その場合は「すべてのプログラム – Windows Virtual PC – Windows XP Mode」でWindows XPの画面を出して、その中で普通にInternet Explorerを起動させています。
詳しいことはよく分かりませんが、どうもバーチャルマシン上でWindwos Updateやその他更新プログラムが走っている場合にこうなることが多いみたいです。

参考：

• Qaplaの覚書・メモ・備忘録・独言 SSH接続がすぐに切れてしまう

私は普段IE6の検証をIE Testerで簡易的に行っています。
Firebugのような便利なツールに慣れると、IE6でだけ表示が変だ！という場合に焦りますね。
みんなどうやってデバッグしてるんだろう。というわけで調べてみました。

DebugBar
IE Testerの画面上で「開発ツール」を使おうとするとダウンロードページが開きます。

IE Testerと一体化しているので一番安定したツールですが、Firebugと比較すると直感的にCSSの適用状態を把握しにくいのが難点。

そこで、ありましたよ。IEで使えるFirebugが！

Firebug Lite
ブックマークレットですので、IEのお気に入りにあらかじめ登録しておいて、お気に入りメニューから呼び出します。

Installという項目の「Firebug Lite」というリンクを右クリックするか、お気に入りウィンドウにドラッグして登録してください。
一部機能の制限はありますが、びっくりするぐらいFirebugが再現されています。
ただ、IE Tester上でページをリロードしたり、Firebug Liteのパネルを閉じたりすると再度Firebug Liteを呼び出すことができませんでした。その場合はIE Testerを再起動すればまた使えます。
本来はIE Testerで使うために作られたツールではないのでしょうがないですね。

同じくブックマークレットですが、簡易的にブロック要素のサイズなどを確認するのに非常に便利なものがありました。

XRAY

これもFirebug Liteと同様に、IEのお気に入りにあらかじめ登録しておいて、お気に入りメニューから呼び出します。
一度使用を中断すると再度呼び出すことができない問題があるのもFirebug Liteと同様です。
まあ、IE Tester上でも動いたというだけで恩の字です。何度でも再起動しちゃいますよ！

IE Tester以外の検証環境もないかなーと思って探してみました。
Microsoft Expression Web SuperPreviewというのが便利そうなのですが、Basic認証をかけているテストサイトを表示しようとするとエラー画面になってしまうので使用を断念しました。

結論として、今のところIE6の検証は、IE Tester上でDebugBarをメインに使いつつ、ここぞというところはFirebug Liteで確認というスタイルがおすすめかな？もちろん最終的に実機での確認も必要ですけど。（アップデートしてない型落ちの端末を探してくるのが手間だったりする・・・）

参考

• Firebugで始めるCSSデバッグ[to-R]
• 便利なCSSデバッグツール「XRAY」 | バシャログ。

2011-11-18 追記
Windows XP ModeでIE6を起動できることを知ってから、IE Testerはまったく使わなくなりましたが、ここで紹介したブックマークレットは引き続き大活躍しています。
こんな苦労が遠い思い出話として語れる日が一刻も早く訪れることを願っています。

Vimを再学習中です。
遠い昔、telnet でログインしてサーバ上でC言語のソースを書いてコンパイルとか当たり前にやってた時代もあったんですけどねぇ。。

Vimのカーソル移動についてちょっとウンチク。

行末へ移動：「$」
対応するカッコへ移動：「%」
行頭へ移動のキー：「^」

なんでこんな割り当てなのか、疑問に思ったことはありませんか？
これらのキーは、実は英語配列(US)キーボードでは横一列に隣り合って並んでいます。
もちろんこれだけが原因ではありませんが、プログラマやSEの方に英語配列キーボードの利用者が多いのも納得いただけるかと。

参考

• Vim 基本操作まとめ – Archiva

<%if false%>
コメントアウトしたい部分
<%end%>

いろいろ書き方はあるようですが、とりあえずこれだけ覚えておけば大丈夫そうです。

参考：Ruby On Rails ピチカート街道 – ERB でのコメントアウト -:

C:\Users\YOURNAME\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\Commands\ZenCoding

YOURNAMEはご自分のWindowsユーザー名に置き換えてください。
Windowsエクスプローラで順番にたどる場合は隠しフォルダを表示する設定にしておいてください。

Zen-Coding便利ですねぇ。
秀丸マクロでZen-Codingもオススメです。