みなさん、クリスマスプレゼントはもう開けてみましたか？ 実家には煙突もなく、靴下に入り切らないものばかり欲しがっていたのに、小学5年生までサンタさんを信じていたおでっせいです。こんにちは。

 今日は、12月25日。1日からはじまった WordPress Advent Calendar 2011 の最終日になります。何を書こうかとてもとても悩み、Evernote （ネタ帳）に書きためていたら、@rie05 さんや @Webourgeon_com さん、 @mypacecreator さんに先を越されてしまいまして（ぼくが書くよりもずっとステキな内容だったから、ま、いいけどね｡･ﾟ･(ﾉ∀`)･ﾟ･｡）、イヴ前日担当の星野さん（ @khoshino ）と談合して、最後はカスタマイズ TIPS ではなく、WordPress ユーザーライフを豊かにする内容で〆ようということになりました。

先日の WordCamp Tokyo で Nao さん（ @naokomc ）が WordPress は出会い系と言ったとか言わないとか（どっちや）。ぼくをはじめとする WordPress 6年生の間では、日本最初の WordPress 本のタイトルになぞらえて、「WordPress でつくる！最強の出会い系サイト」というネタをよく使っていたりするのですが、出会い系サイト的なものがどんどんシュリンクしていくのに対して、WordPress のコミュニティはどんどん広がっていってるように思います。それはつまり、きちんと出会えているからでしょう。

WordBench をはじめとする勉強会や集まりでは懇親会が付き物ですし、WordCamp Tokyo では懇親会が本番だと数多くの酔っぱらいが言うくらい、学びの時間だけでなく出会いや交流の時間も重要だということなのですが、でも懇親会とか交流会苦手なんだ、という声もよく耳にします。本を書いていらっしゃるような著名な方ですら講演した後の懇親会でボッチになることがあるそうです。もしかして悩んでいる人は多いのかも？

このエントリは人見知りのくせに、WordPress コミュニティで伴侶を見つけ、子供まで授かった僕が、「懇親会どうしたらいいのよ、営業でも人好きでもないのよ」ってなあなたにお送りする WordPress 懇親会攻略ライフハックです。

怪物を友人へと変えよう

人好きな人に言わせると懇親会のような場はまったく怖くないそうですが、むしろ苦手というあなた、なんとなく怖かったり不安だったりしませんか？

懇親会だけではありません。思い返してみると、学校に入学したとき、クラス替えがあったとき、就職したとき、部署を異動したとき、その時々のなんとなく怖い、なんとなく不安だ、という気持ちは懇親会のときの気持ちに通じるものがあったりしませんか？

これはつまり見ず知らずの他人が怖いということに他なりません。でも重要なのは、怖いのはあなただけじゃないってことです。（あまり難しいことを書くつもりはありませんが）心理学では他人が怪物に見えるとき、他人からもあなたのことが怪物に見えている、のだそうです。

では、怪物を友人に変えるにはどうすればよいのか。それは相手のことを知ることです。では、相手のことを手っ取り早く知るには？それは共通項を見つけること。一度共通の話題で話をしておくと、人間関係の障壁が（お互いに）ぐっと下がる、と言われています。幽霊の正体見たり枯れ尾花、ではありませんが、怪物と話してしまえば、共通点のある同じ人間だった、というわけです。

共通項はきっとある。同じユーザーだもの。　おでこ

WordPress に関する懇親会・交流会に参加しているのですから、少なくとも同じ WordPress ユーザー（のはず）。まずは、「なぜこの会に参加されたんですか？」とか「WordPress はどのように使われているんですか？」といった質問でジャブを打ってみます。

お客さんに納品してて…とか、会社のウェブサイトを WordPress で更新してて…とか、趣味のホームページを…などと返事が返ってくればシメたもの。そこから「わー、URL 教えてください！」とつながえていけば、かなり相手を知ることができるはず。

相手を観察せよ！

しっかし、困ったことに中にはたまたま告知を Twitter で見つけただけで…とか、WordPress はまだ使ったことがなくて…とか、ペットのジョゼフィーヌが行けというから…といった人もいたりします。いやいや、これは困る。WordPress の話ならとりあえずできたのに…。

だからといって「そうですか」と話を終わらせるのも気まずいもの。戦略を立てなおして、次の作戦発動。そう、人間観察です。 人間観察といっても、外見からその人の人となりを探るような高度なスキルは必要ありません。

あ、この人のケータイのストラップ、『アイルー』だなー、『モンハン』好きなのかなー、くらいで十分。相手の持ち物、服装、外見、すべてを駆使して自分との共通項を探します。意外と見つかるものだし、もらった名刺に書かれたことについて質問するよりずっと距離を深めることができます。

最後は人に頼る！

懇親会に友人や知り合いが参加しているなら、群れる…という手もあります。友人同志の女の子たちが固まっていることがよくありますが、一人だったら恥ずかしい。でも3人いれば、恥ずかしさも分け合える、というわけです。

でももっと良いのは、その友人を通じて誰か別の人を紹介してもらうこと。文字通り『友達の輪』を広げる。WordPress フォーラムで助けてもらったり、Twitter では話したことがあるけど、まだリアルでは対面したことがない人、きっといると思います。そういう人に出会えるのも、WordPress の交流の機会です。ぼくもよく友人に、「@○○さんってどなた？」と紹介してもらっています。

3人の新しい友人を作れ！

WordPress の創始者 Matt くんが WordCamp Tokyo 2009 で日本を訪れた際に、懇親会では（知り合いとばかり話をしていないで）新しい人3人と知り合いになるとよい、と言っていました。10人だとちょっと苦しいけど、3人ならがんばれるかも…という程よい難易度設定ですね（笑） WordCamp 以後、WordPress コミュニティの懇親会ではこの『3人ルール』が伝統（恒例？）になっています。

先にも述べたように WordPress のコミュニティはとてもとても大きくなりました。その中にはほんとうに様々な人がいて、同じ会社に勤めていた人と隣同士の席になったり、茨城まで写真を撮りに行く社外の友人が出来たり、福岡までモンハンしに行ったり、兼業農家の方からお米を分けて戴いたり、仕事でもないのに人様の会社に遊びに行ったり、大学の隣のクラスにいた（はずの）人と知り合ったり、伴侶となる人と出会ったりできるかも。ぼくのように。

WordPress のような機能をもつ CMS、WordPress よりも便利な CMS は今もあるかもしれないし、今後きっと出てくることでしょう。でも、他の CMS が一朝一夕に実装できない（真似できない）のは、このすばらしいコミュニティに他なりません。このコミュニティでの出会いを通して得られるものは WordPress の知識やテクニックだけではない、もっともっとかけがえなのないものだと思っています。ぜひ、"WordPress で出会い"ましょう。

これをもって WordPress Advent Calendar 最終日のエントリと代えさせて頂きます。週末はお近くの WordBench で！

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

麹町にある KDDI ウェブコミュニケーションズさんの会場をお借りして、WordBench 東京勉強会を開催しました。コーディネートは星野さんや大曲さん、micc さんにおまかせだったのですが、セッションのトップバッターで「一番いいのを頼む」とのことだったので、『Twenty Eleven でレスポンシブサイトをつくろう、そうしよう』というタイトルでもってお話させていただきました。

このエントリーは、そのときのスライドを用いながら、セッションを再構成したものになります。直に動画も公開されると思いますので、あわせてご活動いただけたら幸いです。

というわけで自己紹介をしました。質問があったのでここで答えますが、実はサラリーマンのレベルは毎年1つずつあがっています。サラリーマン10年目なので今はレベル10、来年は11になる予定です。←非常にどうでもいい話。

で、言わずもがななのですが、8bitOdyssey.com というサイトでブログをやっており、このサイトのデザインがこの日お話ししたことを通じてできあがったものでした。

まったくもって私事ですが、この日の前日、息子が誕生しまして、パパになりました。写真は息子が、WordPress の "W" マーク風にしてくれたところを撮影してみたものです。

というわけで、『おやバカ』に転職してレベル1からがんばりたいと思います。

自己紹介はこのあたりにして、では行ってみましょう。

ウェブとデバイスの歴史を振り返る

少し時計の針を戻して、ウェブとデバイスの歴史を振り返ってみましょう。

1998年には、ブラウザは Internet Explorer と Netscape とありましたが、ウェブ…ホームページのほうが一般的な呼び名でしたが…を見るものといったらブラウザでした。「インターネット」というアイコンをクリックして見る、といっていた人もいましたね。

これが翌年、iモードサービスがはじまることで携帯電話というデバイスが登場します。ただ、まだこの年には携帯電話用のサイトといえば公式サイトが中心で、いわゆる勝手サイトというものはまだまだ少数でした。

これが2003年になると、各社バラバラの仕様に対して、専用の携帯サイトが作られるようになります。ブラウザのほうはというと、WordPress が登場したのがこの年になります。

2007年になると、ケータイに対して素晴らしい救世主が登場します。WordPress に Ktai Style プラグインをインストールしておけば、とりあえずなんとかなってしまう、という優れもの。

しかし翌年さらなる黒船がやってきます。スマートフォン、iPhone の登場です（注：日本ではじめて発売された年、としています）

翌年にはさらに、Android ケータイと BlackBerry が加わります。

さらに翌年、iPad と Galaxy Tab という2つのタブレットが登場し、スマートフォンカテゴリがさらに賑やかに。

そして、今年。Windows Phone が加わり、もうごちゃごちゃに。

つまり、手間が増えているということです。あきらめるわけにもいかないし、手間と時間は無限じゃないし…。

がんばってスマホ対応したらしたで、あなたのサイトこう思われてませんか？

Facebook とかね(笑)

今日のお話はブラウザーとスマートフォン、タブレットをまとめてなんとかしてみよう、というお話です。

本日のアジェンダ

何を話していくか整理しておくために、本日のアジェンダを用意しました。

この順番でお話ししていきたいと思います。

レスポンシブ・サイトとは？

ここで、Twenty Eleven を画面に表示して、ブラウザ幅をググっと縮めてブラウザにフィットする様子をお見せしました。これだけだとただのリキッドレイアウトですが、レスポンシブと言われる所以を以下でご説明。

ではレスポンシブ・ウェブデザインとは？

HTML と CSS は主に、HTML 5とCSS 3になります。PC サイトには PC サイト用の HTML と CSS、ケータイサイトにはケータイサイト用の HTML と CSS…ではなくて、PC サイトも、ケータイサイトも、ひとつのページに対してはひとつの HTML とCSS になります。

今後登場するデバイスが、HTML 5 と CSS 3 に対応していれば大丈夫。もちろん WordPress もです。

逆にデメリットも。

CSS 3 未対応のデバイスでは「難しい」。「できない」と書いてないのは、JavaScript をかましたりすればなんとかなるからなんですが。

そして、これはどの携帯電話会社にも言えることですが、スマートフォンが登場してから通信量は飛躍的に増えています。ご自宅や会社では光ファイバーや ADSL でそれこそ50メガ100メガの回線を独り占め、なんて方もいるかと思いますが、スマートフォンでは、多くても14メガとか7メガをみんなで共有するため、通信速度は遅くなりがちです。レスポンシブ・ウェブデザインはそんな回線の遅い（細い）スマートフォンに、320px の横幅があれば十分なデバイスに、PC 用の1000 px のような大きな画像を読みこませる、という手法になります。

そして、最後。自分で作るときっと気が狂う、ということです。この後にも出てきますが、長さの指定や条件分岐など作り込みには非常に気を使います。Twenty Eleven の開発スタッフたちも、涙なしには語れないと言っていました。

つまり、

レスポンシブ・ウェブデザインは自分で作るもんじゃない。インスパイアするものだ！と僕は思っています。

でも、それはあなたのサイトをレスポンシブ・ウェブデザインにするのが大変なのではありません。

そう、WordPressならね。そこで、Twenty Eleven の出番です。

Twenty Eleven

これは Twenty Eleven テーマを適用して、PC で表示した時。

こちらは、iPad で表示した時です。

Twenty Eleven は WordPress 3.2 からのデフォルトテーマ。WordPress 3.3 にももちろん同梱され、Beta 3 でも問題なく動作しています。

テーマ機能の見本市になっていて、テーマ作成者の方は参考にすると良い機能がたくさん盛り込まれています。このあたりは、7月の WordBench 東京勉強会でお話しした内容を公開していますので、ご参照ください。

そしてもちろん、レスポンシブ・ウェブデザインです。

どのように実現しているの？

ここからちょっとソースコードや細かい数値が出てきますが、そうした部分にはとらわれず、エッセンスをつかんでもらえればと思います。

  長さ・高さの指定は % あるいは em で指定しています。

これは、Twenty Eleven の style.css の68行目からを引用したものです。

この中に #page というボックスの指定があって、よくサイト全体を囲うボックスに wrapper とか container とか名前をつけると思いますが、それと同じ役割をしています。

ここでは、#page ボックスに上下 2em 左右オートのマージン、ブラウザ幅が 1000px 以上の時に、長さの最大値 1000px が指定されています。

#page ボックスの中の要素の長さ・高さはすべて、この #page を基準に決まります。

#page の中には #primary と #secondary というボックスがあって、それぞれブログの記事部分とサイドバーの役割になっています。

#primary には float: left が指定されているので左に、#secondary には float: right が指定されているので、右になっています。

#primary は長さ100%ですが、右側に26.4%のネガティブマージンが指定されているので、右側には 1000px の 26.4%、つまり 264px 分の空白ができます。この空間に、#secondary が入ります。

#secondary にも右側に 7.6%、つまり 76px のマージンがあり、長さは 18.8% = 188px という指定なので、右図のようになります。

これが、長さが決まる基本になります。

続いて、CSS 3 Media Queries。

CSS でも条件分岐できる、ということですが、JavaScript なんて要らない！ということでは（残念ながら）ありません。

非対応ブラウザは、JavaScript で対応します。

css3-mediaqueries-js - css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library) - Google Project Hosting

上記は style.css の2240行目以降を（わかりやすく）抜粋したものです。

これが通常適用される CSS。

これがブラウザ幅が 800px 以下の時に適用される CSS。実際には、@media (max-width: 800px) 以下で指定を上書きすることになりますので、ここの指定が優先されます。

最後に、こちらがスクリーン型の媒体でかつデバイス幅が 320px 以上 480px 未満の時に適用される指定になります。これは主に、iPhone や Android などのスマートフォンに対して適用されます。

では、どのように上書きされるのか、ブラウザの幅が 1000px 以上あるときと、800px 以下のときとを比較して説明します。

ブラウザ幅が 1000px 以上の時、#primary の中には、#content というボックスがあり、長さは58.4% = 584px、右に34%=340px・左に7.6%=76pxのマージンがあります。

ブラウザ幅が800px以下のとき（※未満となっていますが、以下と訂正いたします）、#content ボックスの長さは自動となり、右のマージンが34%から7.6%へと上書きされています。

#secondary ボックスは float: right から float: none となり、#content の真下に来るようになり、左にも 7.6%のマージンができるようになり、上述のようになります。

このようにしてサイドバーの位置を変えるようにあらかじめ指定してあるのです。

最後に画像もフレキシブルに。

このように、画像に対して親要素の97.5%になるような指定がされています。

さきほども説明した通り、親要素の #content ボックスはブラウザの幅に合わせて拡縮するので、画像もそれに沿って大きさが変わります。

ウェブサイトを作り始めた頃、大きなサイズの画像を用意して HTML や CSS の指定で縮めたりしないように言われたことがあるかもしれませんが、レスポンシブ・ウェブデザインではそういったことをあえてやっている、ということです。

子テーマのつくり方をおさらい

では、ここまでの内容を踏まえて、自分のサイトを Twenty Eleven を使ってレスポンシブにしてみましょう。既存のテーマを使ってサイトをつくるときには、子テーマの利用をお勧めしています。

実はぼく、自称子テーマのエヴァンジェリストでして、ここでお伝えする内容は、2010年の WordCamp Fukuoka でもお話しした内容の抜粋版になります。

親テーマの良いところはそのまま、変更したいところだけ変更できる、というのが子テーマのメリットです。

現行の WordPress では本体も、テーマもプラグインも、更新というボタンを押すと、最新のファイルになりますよね。あれはとても便利ですが、本体・テーマ・プラグイン、いずれにおいてもそれに加えた改変もクリアされてしまいます。

ところが、子テーマを作って子テーマをカスタマイズしておけば、親テーマに更新があっても、親テーマだけが最新のファイルとなり、子テーマはそのまま残すことができます。

さて、子テーマのつくり方です。超濃縮版でお届けします。

まずは、親テーマと同じ階層に子テーマのディレクトリを作成します。

今回は Twenty Eleven を使うので、そこに子テーマのディレクトリを、その中に子テーマの style.css となるファイルを作成します。

次に子テーマの style.css の先頭のコメント部分に、「Theme Name: なんたら子テーマ」と、「Template: かんたら親テーマ名」を記載します。

これで、WordPress はこのテーマを子テーマとして認識してくれます。

で、子テーマとしてカスタマイズしていくには、style.css でスタイルを指定していきます。親テーマの style.css をあらかじめインポートしておいて、それを上書きする形で仕上げていくのが一般的。

@import だとスピードが…と気にしちゃうビンカンなあなたは、子テーマの header.php を用意して、head タグの中で link 要素に style.css を指定するよろし。

では、テンプレートファイル、たとえば header.php を変更したい場合はどうするか。

親テーマから header.php をコピーしてきて、子テーマのディレクトリに配置しましょう。これで header.php を好きなように変更すれば、親テーマのではなく、子テーマの header.php が読み込まれるようになります。

子テーマカスタマイズのコツ

皆さんテーマ作成というと、スクラッチからテーマを作成したり、親テーマそのものを改変することが多いからか、子テーマでの作成をおすすめすると難しいとか勘所が分からない、という声をもらいます。そこで、ここからは僕が子テーマをカスタマイズする際に気をつけていることをお話しします。

一つ目は親テーマと目指すべきデザインを見比べて、どう変更したら近づけられるかを考える、ということ。

両者を見比べて、header の横幅を変えれば対応できそうだ、とかコメント数の背景を吹き出しの画像に変えれば…といったように、どのようにスタイルを書くか、という考えから、どのように変更するか（さらに言えば、どのようにすれば一番最小限の工数で実現できるか）という発想へと転換して、進めるようにすると良いと思います。

2つ目はワイヤーフレームを書いて、狙い所を確認するということ。1からテーマを作る際にもワイヤーフレームを書くことが多いかと思いますが、親テーマが他人のつくったものであるなら、なおさらワイヤーフレームを書いたほうがよいと思います。

といっても面倒でしょうから、Twenty Eleven に関してはワイヤーフレームを書いて見ました。

3つ目はすでになさっている方も多いかと思いますが、スタイルの現状把握をするときは style.css だけでなく開発ツールを使ったほうがよいと思います。

Chrome ですとデベロッパーツールがプリインストールされていますし、Firefox であれば Firebug などの拡張機能ですね。

このように、要素を指定するとその要素に対するマージンがオレンジ、パディングがグリーンで表示されます。構造が把握しやすくなりますし、実際の値は右下のところでプロパティを確認することができます。

そして、この Twenty Eleven もそうですが、HTML 5 のテーマを扱う場合には次のことも気をつけておくとよいかもしれません。

これはつまり、こういうことです。

タグではなくて、ID や クラスを駆使する。

これはなぜかというと、消滅して、復活した <time>要素というニュースが先日もありました。

HTML 5 のタグも仕様も変わる可能性がある、またテーマも開発を重ね変わる可能性があるからです。

また、Twenty Eleven についてはファイルが多すぎてよくわからない、どれが何の役割なのかわからない、という声もありました。

そこで、先日 Twenty Eleven のファイルを分類してみました。

8bitOdyssey を作るにあたって僕が変更したこと

最後に、実際に僕が変更したことです。もちろん、背景画像を指定したりロゴを書いたりといったことはしたのですが、レスポンシブ・デザインに関わる所としては、これだけです。

左が Twenty Eleven をそのまま引き継いだ場合。右が理想の形です。左のままでもなかなかですが、細かく見るとロゴが右端で切れてしまっていたり、検索フォームがメニューの文字にかかってしまっていたり。

これは直したい。

というわけで、このように指定しました。

iPhone で表示。うまくいっています。

iPad で縦表示。

iPad で横表示。

One more thing...

さきほどお見せした iPhone の画像では adsense の広告がモバイル版になっていました。パソコンや iPad では 468px の広告になっています。

もし iPhone で 468px の広告が表示されてしまったら、当然その画像に引きづられて、レスポンシブどころか不恰好なデザインになってしまいます。これはなんとかしたい。

このように $is_iphone という関数が用意されているので、これを使うことでモバイル用の adsense コードと、通常の adsense コードとを条件分岐することができます。

これはモテる！

というわけで以上。

ご清聴ありがとうございました。

公開しました！全部まとめてみたいよーっていう方は以下の SlideShare をご活用ください。

[slideshare id=10333988&doc=20111126wordbenchtokyo-111126010702-phpapp01]

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

８月27日～２８日と、WordBench Nagoya 主催のイベント "WordBeach Nagoya 2011" が開催されたので参加してきました。開催スタッフの情報連絡用 Cybozulive にも誘っていただいていたのですが、当日朝に「一日を楽しむ！」というタスクを作ったくらいのサボりっぷりで、好き勝手に写真を撮りつつ、大半は Katz さんの Ustream スタジオ放送に出演するという半ゲスト半スタッフという感じで楽しく過ごさせてもらいました。そんな僕目線で WordBeach レポートをお届けします。

WordBeach の会場は愛知県知多市にある新舞子 まなビレッジ南浜荘。結構遠いなー、と思っていたら南知多よりも全然北でした(; ･`ω･´)

こちらは今晩 Pillow Fight (=まくら投げ)の会場になる予定だった宿泊施設です。

ぼくらも含めて東京からも続々と参戦。こちらはプライムストラテジーさんの WordPress が大好キーズ。

小野委員長のかけ声とともに、スタッフ一同、設営準備に向かいます。

Ust 準備中の mikage さん。

セッション準備の Nao さんと yuriko さん。

設営準備中の受付。

今回のために、ノボリも作られたそう。さすが東海共同印刷さん！（でいいのかな）

よーく見ると、実は WordBeach ではなく、WordBench になってます。汎用性、大事( ･`ω･´)b

心地よい海風にふかれてノボリの字が見えなくなっちゃうので、webnist さんにおさえてもらいました。ちょっと幕末風（笑）

たぶん kz さんデザインのエロかっこいいフライヤー。受付に貼ってありました。

今回はセミナー部分は入場無料で、懇親会、宿泊のみ実費、となっていたので、お金のやり取りがない分、楽に見えました。…そうすると、フライヤーの金額もいらないのか…(; ･`ω･´)？ まぁまぁ、見た目は大事です。

とはいいつつも、きちんと来場者のアカウントを確認してチェックを されてたので、受付には行列が。気分が高まりますねー。ぼくもちゃんとゲストの皆さんと一緒に並んで受付してもらったら、スタッフ用のリストに紛れてて意味ナッシング。すいません、すいません…。

こちらは初級者向けの教室。

こちらは中上級者向けの教室。そう、こちらには初級者向け教室にあった暗幕がなく、スライドを写すと逆光に(; ･`ω･´) スピーカーがスライドをウェブにアップして閲覧してもらうなど、見事な連携プレーでカバーをしていました。

続いてスポンサーブースへ。

Microsoft の武田さんです。WebMatrix マンを東京から持ってきたんですか⁉ すごい!!

こちらはプライム・ストラテジーブース。WordPress が大好きです、はスクリーンセーバーにもなってるらしいです。

WordBeach 開幕

いやいよ、小野委員長の挨拶でイベントスタートです。

初級者教室は Nao さんの「WordPress のよくある疑問と誤解を解決します！」からスタート。WordPress 事情には結構詳しいつもりのぼくですが、Nao さんのスピーチには毎回知らないことがあるので、見逃せ…いやいや、聞き逃せません。

皆さん真剣な眼差しで耳を傾けてます。

こちらは小野委員長によるデスマワークショップ。武田さんがサポート。かなり濃い内容で、参加者に熱い絆が生まれた模様です。

hokori さんによる、「WordPress 3.2の新機能＆新デフォルトテーマ Twenty Eleven 大解剖！」。ぼくのブログ記事をいっぱい参考文献にあげていただいているので、ぜひスライドを見てみるといいよ！

Katz さんのスタジオ放送では、@Rie05 さんと @hissyNC さんが WordCamp Kobe を宣伝。ほんとにピンクだ～と心のなかで思っていたことは言うまでもありません。

プライム・ストラテジーのシャッチョさんにして、我らが漆黒の黄色い弾丸ことダース・マーガリンの上司、中村けん牛さんの「日本語環境における WordPress の高速化」。とても興味深い内容なのでぜひスライドを見ていただきたいのですが、重要なのはどういう方法でもって高速化しているか、ではなくて、それぞれ効果が出るかどうかきちんと判断をしている、という点です。すべてのサーバーでこの結果になるわけではありません。ココ大事( ･`ω･´)b！

このセッションを聞いて、ぼくもこのブログのサーバに APC と 001 Prime Strategy Translate Accelerator を入れてみたよ～！かなり高速になってるはず。

あと、けん牛社長は30年来のマイコン少年だそうなので、きっとべーしっ君読んでたに違いない。

yuriko さんの「セキュアな WordPress プラグインの作り方」。このセッションの中で屋号や wp- をプラグイン名につけないほうがいい、的なことをおっしゃられてたらしいのですが、僕はこの写真を撮ってすぐに Katz さんの Ustream スタジオ放送に呼ばれてしまったので、すいません、まったく聞けてません。

photo credit: lilyfan

photo dropper はもう少しましな UI というか、せめて URL を指定できるようにならんかー！と思いながら yuriko さんの写真を借用！yuriko さん、ありがとう！

Ustream スタジオ放送はこんな感じで、Nao さん、まがりん、webnist さんと出演しました。WordPress ME 時代の話をはじめ、かなり WordPress 黎明期の話が出てきましたね。Nao さんが自動車会社で派遣さんをしてたというのも衝撃の事実！ｗ

Katz さんに「なんでおでさん、そこまで WordPress のことやってんの？」と鋭く切りこまれましたが、なんででしょうね。自分でもよくわかりませんし、放送中では「こうして旅行しておいしいもの食べれるし…」などと答えていますが、レーゾンデートルがそのひとつでしょうね。やっぱり必要としてもらえるというのはうれしいものですよ。

こちらは南浜荘で割り当てていただいたお部屋。お腹が大きくなってきて、疲れていたてぃあ子を安心して休めることが出来ました。会場スタッフの皆様、ありがとうございました。

Ustream 放送はさらにさらに続きます。

石川さんの「カスタム投稿タイプ・カスタム分類・カスタムフィールドを 活用したサイト構築例」。初級者教室でここまでやるかぁという感じ（いい意味でね）。Ustream のアーカイブ聞かなくちゃ！

これでセッションが終了し（結局、Ustream スタジオにいたので、当日ほとんどセッションは聞けませんでした）、ライトニングトークへと移行します。

ライトニングトーク

プライム・ストラテジー土肥さんによる「企業向け CMS のカスタムフィールドテンプレート活用法」。ぼくはわりとガリガリ記事書いちゃう人なので、カスタムフィールドはほとんど使っていないんですけど、この発表を聞いてると使おうかなーと思っちゃいました。

そんな部下の働きに大曲マネージャーもご満悦の様子。

浅井さんによる Cybozulive のご紹介。グループウェアっていくつか使ったことあるんですけど、Cybozulive は結構使いやすいですね。メンバー制限はあるものの無料で使えるということもありがたいところ。

ちなみにぼくの Gmail はこの時期名古屋スタッフから届く Cybozulive の更新通知ですべて埋まっていました……。

Microsoft 武田さんによる WebMatrix のご紹介。WordPress も含めてローカル環境というと XAMPP や MAPP を使うことが多いと思いますが、WebMatrix もかなりいいですよ。

ぼくが一番気に入ってるのは、データベースを書き換えるのがとても容易な点。MySQL コマンドなんて知らんよ、とか phpmyadmin だとどこを押せばよいのか…なんて人でも Excel ライクな画面で書き換えたいところをクリックするだけ、というのはとても良いです。

星野さんによる WordPress と WebAPI 連携。これもいいなーって思うのですが、API で外部サイトからデータを引っ張ると何かと重くなりがちなのが悩みどころ。

ところで、今回の星野さん、とても淀みなくプレゼンしてましたが、もしかしてばっちり練習しました？ｗ

webnist さんによるめ組テーマ「大名行列」秘伝の書の紹介プレゼン。セッション全般で宣伝禁止（？）だったらしく、秘伝の書の値段をまるごと消している上、全編「ん！」によるしゃべらないプレゼンスタイルだったので、どこまで伝わったかわかりませんが、このテーマもすごいですよ。

ぼくも「大名行列」の子テーマを作る予定です。予定は未定ですが。特にリリース時期。

さてさて、WordBeach セッションは大団円にて終了。

確認さんこと@horike37さんによる 「WordCamp 神戸のお知らせ」。webnist さんの後だったので、「ん！」という出だしの演出がニクい（笑）

神戸はぼくもいきますよ！行かれる方いましたら、現地で会いましょう！

窓から空を見上げるととても美しい夕暮れになっていました。

懇親会

懇親会模様。シェフは８０人分の料理をお一人で作られたそうです。普段は50人分が限度だそうで、80人と聞いてシェフの顔がひきつっていたそうですが…(; ･`ω･´)

魚の活き造りです。写りたそうにしていた人たちがいっぱいいたので、背景でボケてもらいました(^m^)

石川さんの挨拶。

かんぱ〜い！

名古屋恒例のビンゴ大会。今年も全然あたりが出ませんでした。

昨年は堂々の早上がりで WordPress マグをもらったわけですが、今回は全然数字があいませんでした。それでもなんとかアタリ枠に入ることはでき、例のノボリ（ミニサイズ）をゲット(σ・∀・)σｹﾞｯﾂ!! モニタの横にかざろうっと。

Pillow Fight …？

お風呂に入った後は Pillow Fight …こと枕投げ…なのかと思っていたのですが、Nao さんは眠かったようで早々に寝てしまい、名古屋スタッフの方の多くは Katz さんの Ust へ。そして、遠方から来たメンバーノ多くは、一つの部屋に集まって即席もくもく部へ突入です。

photo credit: lilyfan

それぞれまったく別の作業をしたり、分からないところを聞いたり教えたり、人の作業を興味深く眺めたりと思い思いの時間を過ごしました。これぞ関東が誇るもくもく部です。名古屋や神戸の人にも紹介できてよかった！（…とひとり満足）

僕はというと、上述した 001 Prime Strategy Translate Accelerator の英語になんとなく違和感があったので、翻訳作業を開始。

yorozu さんと二人で頭をひねっていたのですが、どうにもいい表現が出てこず、たまたまやってきたスロバキア人のミカルさんを巻き込み、なんとか英語らしい po ファイルを勝手に完成させて、まがりんに送りつけました。まがりーん、あれプラグインに反映してね～( ･`ω･´)v

yorozu さん、ミカルさん、ありがとうございました。

…午前3時で力尽きて、ぼくはお部屋へ。入れ替わりで Nao さんが奇跡の復活。

…

そしてねぼすけの割りには7時に目が覚め、外を見ると何やら見たことのある人たち(=もくもく部メンバー)が歩いている。行かねば…！

WordBeach を目指して

聞くと、WordBeach というイベントなのに、まだ海岸に行ってないじゃないか、とみんなで海岸を目指すらしい。海岸はどこだ。

海岸はどこだ。まがりんはしゃぎ過ぎ。

しかし　海岸は見つからなかった……。お疲れのみんな。

First Element 宮澤さんのインテグラで、朝食の買い出し。その後、近くの海岸へ。

海岸到着！WordBeach だー！

はしゃぐ、Wボーイズ（WordPress の W マークを作ってるつもりです）

これにて WordBeach 終了です。おつかれさまでした。

photo credit: lilyfan

WordPress は元気もパブリッシュしてくれる

こんな感じでいっぱい疲れましたが、充実感と元気でいっぱいです。

そう、WordPress は投稿やページをパブリッシュして届けてくれるだけじゃないんだよ。元気もパブリッシュしてくれるんです。

参加しようかどうしようか迷ってる人、ブロガー仲間が欲しい人、仕事に疲れた人はぜひ WordBench に参加するといいよ！

ここでご紹介しきれなかったたくさんの写真はこちらからどうぞ→WordBeach - a set on Flickr

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

去る7月30日、品川にあるマイクロソフトさんのセミナールームにて WordBench 東京勉強会 & WordPress 3.2 リリースパーティを開催しました。勉強会から100人以上の人が集まる盛況ぶりで、忙しい中勉強会資料を作ったかいがありました。簡単ではありますが、当日の模様をレポートしたいと思います。

WordBench 東京勉強会への道（準備編）

勉強会への道と言いながら、実は勉強会の午前中は WeeklyCMS の放送がありまして、当日10時眠い目をこすりながらマイクロソフトさんのエントランスに集合しました。

実はリリースパーティや二次会含め、スタッフも手弁当のため、受付を済ませました（勉強会のお金でウハウハとかじゃ全然ないのよ）。

マイクロソフトさんにお邪魔するのは2回目になりますが、このセミナールームははじめて。ほんとに会議室すてきですねぇ。うちの会社とは大違いだわ。スタッフ席の最前列に荷物を置いて、準備開始です。

じゅｎ……もとい、WordPress の日本公式キャラクター（名前はただいま投票中）のステッカーです。世界ではじめて Android にはった人の称号をいただきました（笑）。

マイクロソフトさんの WebMatrix ウェットティッシュも。 ところで、WebMatrix と Web Platform Installer ってどこが違うんだろう。教えて、武田さん！←当日聞き忘れた

そんなこんなで、WeeklyCMS 放送開始。 写真は Nao さんによる「WordPress アップグレードについて知っておくこと」。

とても良い内容で、勉強会本編でやっていただいてよかったんじゃないかというくらい（実は当日まで Nao さんがこのプレゼンを用意されていたのを知らなくてですね…ｗ）。内容が気になる方はアーカイブを見てみてくださいね。

かくいう僕も、WordPress 3.2 へのアップグレードの際に失敗しまして。WordPress のアップグレードは Subversion を使って、Automattic のサーバから最新のコアファイルをチェックアウトしているのですが、何が悪かったのか WordPress の動作はおかしいし、wp-content は違う階層に行っちゃうしとおかしなことに。 wp-content はもとに戻し、自分で作った WordPress 3.2 日本語版を FTP でアップロードし、事無きを得ていたのでした(_ _;) Nao さんの資料を読みこめばみんな安心できますよってことで！

放送の中で、WordPress 日本語版作成チームに関する質問も出ていたので、少しコメントさせていただきましたが、改めて。日本語版作成チームに必要なのは英語力だけではありません。WordPress の挙動を理解するためのプログラムの知識だけでもありません。 一番大事なのはやはり、日本語力だと思っています。

WordPress を使う人はもはやコンピューターに詳しい人ばかりではありませんから、なるべく多くの人にわかりやすいものにしたいと思いますし、より自然な日本語にしたいものです。そんなときに必要になるのが日本語力なのです。

Twenty Eleven の機能の一つ「短冊ウィジェット」も日本語版作成チームが「Ephemera（カゲロウの意）」を翻訳したもので、成果の一つだと思っています。まだまだわかりにくい部分やしっくりきていない訳語などありますから、日本語版作成チームは新たな仲間を募集しています！

接続確認中のえりさん。

笑顔ですが、プロジェクターにはプレゼンテーションを映し、Mac のディスプレイには原稿を映すという設定に非常に苦労されてました（笑）

プロジェクターだけ見ると普通ですが、今回のぼくのプレゼン、結構工夫して作ってますので、後ほど詳しくまとめてみますね。

WordBench 勉強会

僕の担当分は WordPress 3.2 の新機能と、Twenty Eleven のコードについて話してほしいということでしたので、「Hello WordPress 3.2 and Twenty Eleven」と題してお話させていただきました。

機材トラブルで音声がダメだったそうなので、アップしたスライド資料をご確認ください。 マイクロソフトさんのプロジェクターの性能が良すぎて、低解像度のスライドを作ってしまいましたので、当日より見やすいかと思います(_ _;)

3.2 の新機能や Twnety Eleven の魅力について、うまく伝わっていればよいのですが。 実は、このプレゼン、準備期間中は「気になるあの子のハートをゲットする Twenty Eleven で夏恋徹底攻略」というタイトルでした（マジで。

「WordPress が大好きです。」シャツのまがりん☆。わざわざ作ったらしい。この人マジやで。

えりさん & えり本のご紹介。かわいいは正義（違）

ぼくもわかんない！

えりさんのお話で興味深かったのは DreamWeaver のスニペットですね。調べてみると、説明まで含めて英語の WordPress スニペットは結構あるみたいですが、日本語のものは見当たりませんでした。基本コピペでプログラム書いてるぼくみたいな人間にはとても便利そうです。

休憩中のセミナールームをパシャリ。Mac 率高い…。 このあとは安定の星野さん、この日はかみまくりのまがりん☆とプレゼンが続きました。

写真はえり本、Toru本をめぐるじゃんけん大会。かなり盛り上がりましたね。

WordPress 3.2 リリースパーティ

続いて、WordPress 3.2 リリースパーティ。今回はケータリングと持ち寄りです。アラビアータ（だと思う）パスタが辛くておいしかったです。

glatyou さんが WordPress アイコンクッキーを作ってきてくださっていたので、さっそくかじるといったらこの人、杉本さんにモデルになってもらいました。

恒例（？）になってきたケーキ。今回はリリース記念、ということでじゅｎ…キャラクターが描かれています。3.2 のリリースリーダーを務めたということで、ケーキカットと取り分けまでさせていただきました。ケーキカットしてるところは誰かがアップする気がするので、そちらでお願いします（笑）

ケーキに群がる報道陣（違）

ケーキを切ったナイフ。アイルーの剣か！これで切れるわけないって！ｗ

リリースパーティのあとはプロントを貸しきって2次会。23時までがっつり楽しませていただきました。

たまたま 3.2 のリリースリーダーを務めたわけですが、このようなリリースパーティは日本語版としてははじめてのこと。ありがたかったです。100人規模というと、日本初の WordCamp Tokyo 2008 よりも多いんですよ。思えば遠くへ来たもんだ、って感じですが、普段はオンラインでのやり取りが多い日本語版作成チームとしてもこういった機会で顔を合わせられるのもよかったです。またやりたいですね。

最後に、今回の MVP のうえつんと西川さん、裏方に徹して色々手配をいただいたゆりこさん、快く会場を貸してくださった武田さん、ありがとうございました。おつかれさまでした！

すべての写真はこちらから：WordPress-3.2-Release-Party - a set on Flickr ライセンスは CC by SA にしていますので、Odysseygate.com と明示していただければ適当に使ってくださってかまいません。

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

[slideshare id=8730862&doc=20110730wordbenchtokyo-110730020858-phpapp02]

WordBench 東京勉強会でお話ししたプレゼン資料をさっそくアップロードしました。 Ustream 放送でも中継されていたようなのですが、機材トラブルで音声が聞こえなかったようですし、なかなか画面の細かいところまでは見えないかと思いますので、こちらでスライドをご確認くださいな〜。

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

またまただいぶ相当遅くなってしまいましたが、5月28日に収録放送された weeklycms （今回からアンダースコアなし！）に参加してきました。今回は収録場所が品川にあるマイクロソフトさんの日本本社ということで最先端の IT の香り（どちらかというと新社屋な香り）漂う会議室からお届けしていました。あわせて、Nao さん & WordPress のお誕生日のお祝いもレポートしたいと思います。

というわけで今日の本題は OpenID Connect と OAuth（おぅおーす、と読みます。おいーっすじゃないので念のため）でした。

OpenID は複数のサイトに複数のパスワードでログインすることはリスクが増すということで、ID があれば複数の OpenID 対応サイトを利用出来るようにしたというものですね。ひとつパスワードがバレたら全部使われるやんか、とか言い出すと宗教戦争が勃発するので言いませんが、あのオバマ政権も国の機関のサイトに民間の OpenID でログイン出来るようにすることを推進してるといいますから、まぁ大丈夫ということなんでしょう。

こちらが参加者模様。手前は Nao さんの後ろ姿。「Nao さん、カワユス」と代わりに言っておきます、ひろまささんがいないので。

うちの会社と同じシステムが導入されていたのでおもわず嬉しくなって写真を撮ってしまいました。これは、テレビ会議システムになります。「ｓｈｕｔｄｏｗｎ」と全角なのがマイクロソフトらしい…！

ちょうど Nao さんのお誕生日と WordPress の8周年記念の日が近かったということで、お祝いのケーキが用意されました。おめでとう、おめでとう！

8周年ということでロウソクも8本。Nao さんはｓ…うわまてなにをｓ

ケーキの箱がでか過ぎて冷蔵庫に入らなかったそうです（笑）ケーキはおいしくいただきました！！

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

毎週土曜日11時から Ustream で放送されている「Weekly CMS」。いつもはまどろんでいたり、出かけていたりで Twitter で盛り上がっているのを見ていたのですが、 shokun さんがひがんでいたのでケータイ対応特集ということで、初参戦してきました！

というわけで、WordBench 的にいうと常連メンバーな感じですが、ゆりこさんと僕が初参加。Nao さんが持ってるのは白いバスタブです。

この日はブルームーンの酒井さんオフィスから放送。

WordBench 川崎ではおなじみのケータイタワーですが、今回はいつもより余分に積み上がっております！

どんな話題が展開されたかは Ust のほうを参照していただくとよいかと思いますが、ケータイ表示の歴史は1ページの容量と文字コード、絵文字の表示処理との戦いの歴史でもあり、ツワモノプログラマーたちの熱い議論が展開されました。

これは私見ですが、おそらく今年中に1,500万近いユーザがスマートフォンを手にすることになるでしょう。アクティブユーザの多くがスマートフォンのブラウザを通して見ることになるわけで、ケータイ（ガラケー）最適化は過渡期を迎えているのかなと思っています。

おいしいピザをいただいて、今日はおしまい！

帰り道にみかけたこの看板。「NIKON 光学通り」とな！

大井になった旧日本光学本社（現・ニコン大井製作所）に続いていたので、この名前がついているそうです。NIKON 使いとしては撮らずにいられませんでしたが、傍から見たらさぞかし変な人に見えたことでしょう…。

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

4月29日にネスト赤羽で開催された WordBench 東京 もくもく部に参加してきました。午前中映画を見てからの遅れての参加でしたが、ぼくも含めて12名超がもくもくと勉強/作業。驚いたことにもくもく史上一番にぎやかでした。

地震だなんだといろいろあったので、考えてみるとこの日は久しぶりの WordBench でした。

この日の僕はというと、自宅とモバイル PC のローカル環境を同期できないかと一生懸命 MacBook Air の設定をしていました。このあたりはいずれ記事にしてみますね。

ほかにも自社サイトを構築する人、プラグイン／テーマ作成に勤しむ人、Twitter の壁紙を作る人などなどみなさん思い思いの作業をしていました。

この日はちょうど先週誕生日を迎えた webnist さんも参加することになっていたので、日頃のご愛顧の感謝も込めてうちら夫婦からプレゼントを用意してきたので、さっそくお渡ししました。

どうですか、「作務衣 webnist」。

事前に megane さんにサイズを聞いておいただけあって、ぴったり～！番傘とセットにしてくれれば完璧でしょう！

うしろに「め」って貼っておいてくださいｗ

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

随分と前のことになってしまいますが、WordCrab Fukui 2011 の午前中に永平寺へ、翌日に自殺の名所として名高い東尋坊に行ってきました。凛とした世界をお楽しみください。

というわけで、この日の福井は近年稀に見る大雪の年の中でも一際雪の降った日。雪深い永平寺にこれでもかとフロストシュガーが降りかかります。

歩いて見てまわるものかと思っていたら、お寺の外観が撮れるのは入り口のところまで。拝観料を払ったと思ったら、続きは建物の中を見て回るようになっていました。

修行中の御坊様は撮影しないように、とのことだったので、被写体は自然と建物になりました。

最初にあったのが傘松閣と呼ばれる建物の中のホール。

天井の絵柄もすばらしく、花や鳥が描かれていました。しっかし予想通り、ここ結構暗いんだな。5年前のカメラのISOでは、かなりの限界撮影。少しでもノイズが入りませんようにと祈りながら撮影。

なんていうのか分からないけど、梁の部分についていた、素敵な文様のオブジェ。

お寺が山に面しているので、このようになんども階段を昇り降りして、お寺の中を行き来します。

建物の中から中雀門と思われる門を見ることが出来ました。しかし、雪のせいで痛みが激しいようで、補修中の残念な姿。ま、見えただけでも良しとします。

仏殿の様子。

廊下の途中に鬼が使うかのような巨大なすりこぎのような棒がつるされていて、そのひび割れた木の隙間に小銭が埋めこまれていました。

法堂の様子。

廊下の途中から見えた外の風景。やはり雪深い。っていうか、雪多すぎ！

もはやなんて呼ぶのかすらわからない豪華絢爛なオブジェ。

つららがかなり長いですね。

永平寺はそれなりに山奥にあるため、後から聞いたところ、こんな雪の日に行くなんて危ないよ、と言われてしまいました。なんだってーー！

地平の果て 東尋坊へ

前日の永平寺に続いて、東尋坊も相変わらずのこの天気。もうね、吹雪いててちょっと先も見えないわけですよ。

東尋坊自体は、このようにお土産物屋さんとお食事処が商店街みたいになっていて、全然自殺の名所っぽくない。この吹雪の中でさえ「寒いから温まってってくださいね～！」「うちにいらっしゃいよ！」「ちょっと押さないでったら」などという声が賑やかに飛び交う中で自殺する気には……ならないでしょうねぇ、たぶん。

※どうも東尋坊タワーのほうに向かうと、最後の電話と呼ばれる公衆電話があったそうなんですが、どうせ東尋坊タワーに上ってもこの吹雪じゃ何も見えないよね、と思ってそちらには行かなかったんですよねぇ。残念。

そんなわけで、観光地としての東尋坊です。はい。

写真の中央、かなりの荒波になっていますが、普段はここから遊覧船に乗るんだそうで。

この崖から飛び降りてもなかなか死ねないと言われる東尋坊だそうですが、これだけの荒波なら落ちたらただでは済まなそうですね。ぶるる。

あわわ。星野さん、今井さん、落ちないでくださいね、ほんとに(笑)

残念なことに天候が回復しないまま、東尋坊を後に。

最後に有名なヨーロッパ軒のカツ丼を食べて帰ってきました。大盛りでもないのにお肉多すぎ！

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

「投稿フォーマットを使ってみた」スライド

WordCrab!!

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。