WordPress Experiment

WordCamp Tokyo 2011 にスタッフとして参加しました

tester — Sat, 31 Dec 2011 14:00:57 +0000

「ブログを書くまでが WordCamp」ということで大晦日になりましたがブログを書きます。WordCamp Tokyo 2011 ではスタッフとして参加させていただきました。WordCamp には 2010 年の横浜以降、2011 年の福岡、名古屋、神戸と参加してきましたが、スタッフとしては初めての参加で、やはり参加者とはひと味もふた味も違い、本当に楽しいイベントとなりました。

photo by odysseygateちょうど開催が決まり、「WordCamp Tokyo 2011 の開催日が11月27日に決定！」という記事がアップされた 9月23日に、公式サイトのコンテンツ作成の担当としてスタッフに加わりました。このときすでに開催の11月27日まで約２ヶ月、今あらためて思い返しても、800人規模のイベントをたった２ヶ月で成功させることができたのは本当にすごいなと思います。個人的には各地に出張していたため、なかなか後半のオフラインミーティングに参加できなかったのはとても寂しかったです（涙）

WordCamp Tokyo 2011 の運営やマネジメントについて

@odyssey さんから「WordCamp Tokyo 2011 を経て思うこと」で WordCamp の運営に関して問題提起がありましたが、WordCamp Tokyo 2011 は短い期間で開催にこぎつけるため、たしかに「あーでもない、こーでもない」と創意工夫する余裕はあまりなかったですが、ひとつの目標に向けてみんなが力を合わせて頑張ることの達成感はとても楽しいものでした。

私は SIベンダーでウォーターフォール型システム構築のプロジェクトマネージャーをしていたので、アジャイルによるマネジメントはとても勉強になりました。アジャイルでのマネジメントにおける、アジャイルにも大規模イベントに詳しい @daipresents さんやコミュニケーションをガンガンとってくれる @shinichiN のような方の大切さと、逆にそういった方がそろっている場合はウォーターフォール型で時間をかけてじっくり計画を練るよりも柔軟に運営やマネジメントできる点は、とても新鮮な発見で、とても勉強になりました。お二人のブログはとても参考になるので、このようなイベントを開催したいと思う際はぜひ一読するとよいかと思います。

@shinichiN WordCampTokyoの運営もオープンソースにする
@daipresents WordCamp Tokyo 2011 スタッフの歌声よ響け！、 500人から1000人ぐらいのIT系大規模勉強会を支える技術

当日は 800 人を超える参加者に来場いただきました！！

公式サイトの開催概要や記事でお知らせしていたものの、当日に会場を間違えたり道に迷ったりしないか不安でしたが、開催挨拶直後の下野さんのセッション（下写真）がほぼ満席だった通り、みなさん朝から問題なく来てくださいました。

ユーザー／ブロガートラック、デザイナートラック、テクニカルトラック、ハンズオンの４箇所に分かれてセッションをおこないましたが、やはりデザイナートラックは人気で常に満席でしたが、会場からあふれて見られないといった心配も杞憂に終わり本当によかったです。スライドや Ustream がタイムテーブルにまとめられているので、興味がありましたらそちらもご活用ください。

ランチでは混乱も予想されて心配していましたが、８００人が来場してくださり限られた席数のなか相席してくださったり、お弁当引き換えの列にきちんと並んでくれたりなど、来場してくださったみなさんがご協力してくださったおかげで、なんとか滞りなくいってほっとしました。

そして、懇親会ではスタッフもやっと責務から解放されて盛り上がりました。さらにスタッフのみんなで２次会に。本当に楽しかった！！みなさん、ありがとうございました。

今回は 1000 人を超える申込をいただき、希望するみなさん全員が WordCamp Tokyo 2011 に参加していただき、満席で見れないセッションもなく、会場誘導もなんとかなり、ゲストカードの紛失もなく会場を提供してくださった楽天のみなさんにもご迷惑をおかけしなくて済んで、本当によかったと思います。 800 人もの来場者を１フロアで受け入れられる会場を提供して、イベントの開催に運営スタッフとして協力してくださった楽天のみなさんには本当に感謝です。

WordCamp Tokyo 2011 非公式忘年会に参加してきました！！

12月23日には @nya1122 さん、@andante0727 さん、@xxeimixx さん、@anticyborg さんは会場で仲良くなったそうで（下記ブログにその経緯などがあります）、 WordCamp Tokyo 2011 非公式忘年会まで開催してくださっていたので、スタッフのみんなとそちらにも参加してきました！！関東だけでなく福岡、名古屋、静岡から集まっていてビックリでしたが、WordCamp Tokyo 2011 がこのような場となったことも、とても嬉しかったです。

@anticyborg さん WordCamp Tokyo 2011 に参加してきたよ #wctokyo
@andante0727 さん WordCamp Tokyo 2011参加してきました！ #wctokyo
@xxeimixx さん WordCamp Tokyo 2011に初参戦してきました。

それではみなさん、来年もよろしくお願い致します。

WordPress をはじめるときに知っていると役立つこと

tester — Wed, 14 Dec 2011 15:24:20 +0000

WordPress のブログリレー WordPress Advent で @hirohiro1872 さんのバトンを受けて15日を担当する @MakeGoodTime です。

WordCamp Tokyo 2011 ではスタッフとして参加しましたが、やはりデザインと初心者向けセッションが人気があるようでしたので、あらためて「WordPress をはじめるときの流れや気をつけること」を書いてみます。

１．WordPress をインストールしてできること

WordPress はかんたんに始められて、とても強力なパブリッシングプラットフォームです。WordPress は多くのレンタルサーバーで簡単インストール機能が用意されていて、様々なメリットがあります。例えば、

TwentyEleven をはじめとする優れた 世界中の多くのテーマ を使うことができます
ウィジェット や メニュー などの機能を使い、かんたんにサイトを変更することができます
プラグインを導入すれば、様々な機能を思いのままに追加することができます
投稿や 固定ページ から、かんたんにコンテンツの作成できます

これだけでも、立派なサイトの完成ですが、 WordPress は世界的に高いシェアを誇ることもあり、どうしても似通ったサイトになってしまいます。そこで、オリジナリティをだすには、どうすればよいでしょうか。

２．WordPress はどこをカスタマイズすればいいか

WordPress はコアファイルとテーマ、プラグインで構成されて、コアファイルは変更しないようにしてください。

WordPress のファイル構成は右図のようになっています。
wp-contents 配下の plugins（プラグインを配置します）や themes（テーマを配置します）をカスタマイズします。

３．プラグインは利用する

オリジナルのプラグインを作成するのは中上級者向けです。プラグインは世界中の優れたエンジニアが開発しているので、それを利用することをお薦めします。 WordCamp Tokyo 2011 で @khoshino さんが「WordCamp Tokyo スタッフおすすめ! WordPress の面白いプラグインやテーマカスタマイズ」でプラグインを紹介してくれているので、ぜひ参考にしてみてください。

それでは、まずはテーマをカスタマイズしてオリジナルのサイトにするところから始めます。

４．テーマをカスタマイズする｜子テーマを活用する

さて、テーマのカスタマイズを始めるにあたっては、慣れてくればオリジナルテーマを作成することもできますが、最初は公式テーマから気にいったものをカスタマイズすることから始めること、そして下記の理由から子テーマという機能を活用することをお薦めします。

公式テーマは不具合修正や機能強化などのアップデートがあり、実行するとテーマは新しいものに上書きされ、直接おこなったカスタマイズは消えてします恐れがあります。そこで子テーマを活用すると、親テーマを全て引き継ぐことができ、変更したいファイルだけ子テーマで書き換えることができるので便利です。子テーマの詳細については WordPress Codex 日本語版「子テーマ」をご覧ください。

５．テーマをカスタマイズする｜テーマの構成を理解する

テーマについては WordPress Codex 日本語版「テーマの作成」に詳しく書いてあり、WordPress テーマは、画像を除くと、大きく分けて次の3種類のファイルから構成されています。

style.css
テーマの定義および CSS を設定するファイル
functions.php
テーマに必要な関数を記載するファイル
テンプレートファイル
テンプレート階層にしたがいウェブページを表示するファイル

まずは、style.css で CSS の設定を変更してみてください。 CSS だけでもサイトデザインを大きく変えることができます。functions.php は関数を定義するファイルです。PHP に慣れてきたら、ぜひカスタマイズに挑戦してみてください。

６．テーマをカスタマイズする｜テンプレート階層を理解する

テーマをみると style.css や functions.php 以外にたくさんの PHP ファイルがあることに気づくと思います。これらはテンプレートファイルです。WordPress で投稿した記事はもちろん、投稿すると自動的に作成されるアーカイブやカテゴリーページを表示してくれているのがテンプレートファイルです。例えば、

single.php
投稿した記事をひとつ表示する
page.php
固定ページを表示する
category.php
カテゴリーページを表示する
archive.php
アーカイブページを表示する

テーマをカスタマイズする前に、WordPress テンプレート階層構造図でカスタマイズしたいページが、どのファイルで表示されているかを確認してみてください。

テンプレート階層構造図にも掲載されていないのは、ページの一部を表示するファイルで、ヘッダーやサイドバーを表示する header.php、sidebar.php や投稿データを表示する content.php などがあります（ TwentyEleven の場合。TwentyTen では loop.php ）。

７．テーマをカスタマイズする｜PHP ファイルを変更する

カスタマイズしたいページを表示しているファイルが見つかったら、変更します。WordPress では例えば、 single.php を変更すれば、全ての記事に反映されます。

PHP ファイルはで囲まれたところは PHP によるプログラムですが、それ以外は HTML ですのでかんたんに変更することができます。 CSS と HTML がカスタマイズできるようになれば、サイトを大幅に変更することができるようになります。

CSS のカスタマイズなら @Webourgeon_com さんの『CSSだけでも結構イケル』テーマのカスタマイズとオリジナルテーマ作成への第一歩が参考になります。

８．テーマをカスタマイズする｜テンプレートタグを使う

HTML を変更するようになると、色々と欲しい機能が出てくると思います。それらを助けてくれるのがテンプレートタグです。例えば、投稿データを表示する content.php のカスタマイズで記事タイトルを表示したいと思ったら the_title(); ?> 、ブログのタイトル（設定で登録します）を表示したかったら bloginfo( ‘name’ ); ?> というようにテンプレートタグを追加して表示させてみてください。

ここまで来たら、もっと色々なことをしたいと思ったのではないでしょうか。PHP の条件分岐やループなどを使うことができるようになると、さらにカスタマイズの幅が広がります。例えば TwentyEleven のテーマには参考に（コピー＆ペースト）できるコードがたくさんあるので、カスタマイズしているうちに少しずつ理解できるようになっていくと思います。ぜひ、WordPress に挑戦してみてくださいね！

それでは WordPress のブログリレーのバトンを @Webourgeon_com さんにお渡しします。

WordCamp Tokyo 2011 で写真を撮ること

tester — Sun, 20 Nov 2011 15:00:24 +0000

WordCamp Tokyo 2011 が 11月27日（日）に開催されます。WordCamp Tokyo 2011 のスタッフリレーブログに参加させていただき、WordCamp や WordPress コミュニティでの「写真を撮る楽しさ」を写真で紹介します。WordCamp Tokyo 2011 の参加登録がまだの方はこちらから急いで登録してくださいね。

魅力的な講演者の真剣なスピーチの様子、真剣にそしてときおり笑いをまじえて聴き入る参加者、あわただしいスタッフ。みんなの楽しそうな姿を写真におさめることができる、またとない機会が WordCamp です。以下の WordCamp の写真をみているだけで、WordCamp の楽しさが伝わってきませんか？

WordCamp Fukuoka 2011 基調講演
photo by yorozu2009

WordCamp Fukuoka 2011 ライトニングトークにて
photo by MakeGoodTime

WordCamp Fukuoka 2011 懇親会投稿フォームコンビ
photo by waviaei

WordCamp Kobe 2011 アンカンファレンスの進行
photo by mamy315

WordCamp Kobe 2011 懇親会受付
photo by Odysseygate

WordCamp Kobe 2011 懇親会の乾杯挨拶
photo by MakeGoodTime

WordCamp Yokohama 2010 スタッフ記念写真
photo by Odysseygate

会場のルールにしたがい、一言声をかけたりなど気配りしながら写真の撮影を楽しんでくださいね。

ボーイング７８７ドリームライナー

tester — Sat, 19 Nov 2011 22:10:01 +0000

ボーイング社の最新中型旅客機 ボーイング７８７ が羽田―岡山で就航し、出張帰りに搭乗したのでレポートします。当日は日本を低気圧がおおい、東京も岡山もあいにくの雨でした。新幹線や日本航空（ＪＡＬ）を利用することが多いので、ひさしぶりの全日空（ＡＮＡ）でした。１度は乱気流で急降下が何度かあり到着寸前で急上昇するなどハラハラドキドキもありましたが、ボーイング７８７はゆったりとした非常に静かな旅客機でとても満足でした。

岡山空港にて搭乗
搭乗口からみた B787 は、デザインが濃紺に流線形のような模様が入ったものに変わってはいるものの、そこまで大きく違うという印象はありませんでした。

ボーイング787 の座席
座席は幅が広く感じたのは、全幅がｙ６０.１m と広いのに２席－４席－２席とゆったりした配置だからでしょうか。ゆるやかな曲線の天井とＬＥＤの青い間接照明もスペースを広く感じさせるのかも知れません。座席のテーブルはとても広いので、飲食だけでなくＰＣを広げて作業するのにも適していますね。カップホルダーを使うとカップが倒れる恐れがないので、テーブルを開いたときと閉じたときの２ヶ所についていて親切ですね。

ボーイング787 の窓
窓はボタンを押すとゆっくりと透明から青くなり遮光できます。ただし、最大まで遮光しても翼は見えます。斜め前のエンジンは、排出口がのこぎりの歯状になっているのは騒音を低減するためで、シェブロンノズルと呼ばれているそうです。たしかにとても機内はとても静かでした。

ボーイング787 の画面
搭乗して座席につくとWii のようなリモコンと画面があり、スカイチャネル、イノベーティブチャネル、通信・接続、キッズ、お知らせ、マップが選択できます。スカイチャネルやキッズのなかでも映画やビデオ、ニュース、ゲームなど選択肢は多いものの、映画とゲームは選択しても「現在このサービスはご利用いただけません」という表示で残念。これは乗っている時間の短い国内線だからでしょうか。その代わりにビデオに「ボーイング７８７世界初就航までの軌跡」があったのでこちらを視聴、単なるＰＲビデオではなく非常に完成度の高い面白い内容にまとまっていてお薦めです。

ＵＳＢメディアプレイヤー
搭乗して初めて知ったのはＵＳＢメディアプレイヤーがあること。準備をしていなかったので使えなかったが、iPhone を USB 経由で充電することもできてこれはとても便利ですね！

フライト情報とマップ
フライト情報やマップを見ることもできて、飛行ルート、世界地図、高解像度、方位表示など色々用意されていました。方位表示はどの都市がどの方角と距離にあるかが表示されます。距離がマイルなのはポイントカードを含めて航空業界の慣行なのでしょうか。また個人的には前方や眼下の景色も見れたらいいのになと思います。

ボーイング787 のトイレ
この日は低気圧におおわれ大気が非常に不安定なためでしょうか、ドリンクはセルフサービスでトイレも早めにすませすようにアナウンスがある状況でした。トイレはとても広くて綺麗で、子供を寝かせる十分なスペースがありました。また前後に大きな鏡があるので女性のお化粧直しもできそうですね。

１度目の着陸態勢
この日は終始厚い雲におおわれていましたが、着陸に向けて高度を下げたために雲の下の景色が見えてきました。このまま、着陸態勢に入りすんなり到着かと思いきや、２度３度とたたきつけられるような急降下を繰り返して空港が眼下に見えてきたと思ったら急上昇して再び厚い雲の上に。

無事に到着
乱気流による警報が出たためと機長からアナウンスがあり再度着陸を試みるとのこと。２度目はハラハラドキドキしましたが着陸態勢に入った直後に１度急降下しただけで、あとはスムーズに着陸することができました。羽田空港まできて引き返した経路がマップからも分かりますね。到着すると天井のＬＥＤ照明は虹色に。

スマートフォンの最適化｜バリューコマース EXPO 2011

tester — Sat, 08 Oct 2011 04:25:36 +0000

10月5日にApple が発表したのは iPhone4S でした。 iPhone5 への期待や au からの発売が漏れていたこと、ジョブズの不在などから、盛り上がりに欠けたとの意見も Twitter 上では多く見受けら、Apple の株価は失望売りで下落してしまいましたね。そして 10月6日にはスティーブ・ジョブズ死去とのニュースがとびこんできました。

この記事ではアップルの iPhone をはじめとするスマートフォンというデバイスについて、10月1日に開催されたバリューコマース EXPO 2011 のふたつの講演を取り上げます。
・新しい時代へ！スマートフォン＆ソーシャルメディア最新事情｜夏野　剛氏
 ・WordPressを使って、Web API連携＆スマートフォン最適化をしてみよう！｜星野邦敏氏

新しい時代へ！スマートフォン＆ソーシャルメディア最新事情

※バリューコマースEXPO2011 担当者に了承いただいて撮影し掲載しています

NTT Docomo で iモードの開発に携わったことで有名な夏野さんの発表は、震災後の「インターネットの情報発信能力」からはじまりました。政府は3月21日パニックを恐れて発表しなかった放射能情報が確認されている根拠ある情報が１２日時点で Twitter でツイートされていて、このような情報収集をツールとして実現しているのが携帯やスマートフォンであり、クラウドであるというものでした。

クラウド革命とは
クラウド革命は誤解が多い言葉で、それを端的にあらわすのが「クラウドサービスをとなえている会社ほど社内で Gmail が使えない」という冗談のような本当の話。笑えませんが、たしかにそうですね（汗）

それではクラウドが実際にもたらすものは何なのか？

・パッケージソフトは不要に
・個有型から共有型が前提に
・複雑系的知識ネットワークの現実化
・管理型ネットワークからオープン型へ
・セキュリティでクローズ型 → 知識革命に乗り遅れる

クラウド革命は何を意味するのか？

・デバイスフリー（複数の異なるデバイスからアクセス）
　－ iPad は使った方がいい｜iPhone は電池の持ちが悪すぎる
　－ガラケーもスマフォもＰＣも全て持っている｜スマフォだけのユーザはヘビーユーザではない
　－デバイス固有のソフトウェアがなくなる
・コンテンツの Convergence が加速
・接続端末に特化したサービスは衰退

スマートフォンとは何か？

・タッチパネル（ユーザーインターフェース革命、ガラケーのタッチパネルはよけいに使いにくい）
・汎用ＯＳ（iOS は汎用とは言えない、iPhone は究極のガラケーで Android とは全く違う）
　－みんなスマートフォンを語るとき iPhone を思い浮かべながら Android について語る
・アプリ（アプリの原点は iアプリ）
・ネット接続が主機能、ＰＣの延長線上（ガラケーは電源が少なくなるとアプリを使えなくする）
・スマートフォンはユーザー責任（ Android は開発の自由度を大きくしていて、カレログも登場）
・スマートフォンの前提条件は高速回線（通信回線が逼迫している）
・インターネット接続可能なケータイ（日本はガラケーで実現していた）

夏野さんはご自身が開発に携わった日本の携帯を「ガラケー」と揶揄しながらも、自分の開発した i アプリには誇りを持っているんだなということが伝わる説明でした。実際 i モードは本当に画期的で間違いなく世界をリードしていただけに、完全に Apple と Google にひっくり返された今の状況は非常に皮肉ですね。

また、日本で携帯各社から発売された Android 端末を指して「ガラスマ」と呼ばれていました。これには私も同意で、端末ごとのスペック差が解消されない日本の多くの Android スマートフォンは「ガラケー」と大差ないと感じてしまいますね。

そして、競い合っている iPhone と Android は実は競合していないことを ビジネスモデル から読み解いたのが上の図です。Google は広告収入で、Apple は消費者を囲い込むことで、そして日本（キャリア）では通信費で収益を最大化させようとしていて、たしかに直接は競合していませんね（実際には多大な影響を及ぼしあっているのですが・・・）。

クラウドとスマートフォンで大きく状況は変わりました

・業界進化は通信業界からネット業界主導へ
・ユーザー利益の最大化
・水平分業（日本）から垂直統合ビジネスモデル（世界）

個人的には「クラウドとスマートフォン」が登場して大きく状況が変わったのではなく逆で、 携帯通信環境が普及｜コモディティ化 したためにクラウドとスマートフォンが登場したが正しいかなと思っています。

・モバイルとＰＣの実質上完全融合
・デバイスの主役はソフトからブラウザーへ
・通信キャリアはドカン化

これまでの閉鎖的だったモバイル市場は、オープンでグローバルなインターネット市場になるとの結論でした。ハードが普及するとソフトウェア、コンテンツと戦場が移っていくのは、まるでインターネットバブルの焼き直しのようですね。ただし、これまでインターネット市場で培ったノウハウがモバイルに適用できるようになるのは個人的には大歓迎です。

WordPressを使って、Web API連携＆スマートフォン最適化をしてみよう！

続いては WordPress コミュニティでよくご一緒させていただく星野さんの発表です。これまでのWeb API 連携に、スマートフォンによる最適化まで加えたスライド約２百枚の盛りだくさんの内容です。

スライドはこちら（星野さんのサイト）からダウンロードできます。

WordPress でスマートフォンに対応する３つの方法

WordPress を使ってスマートフォンに対応する方法はスライドの１２８ページからです。スライドではその方法を大きく３つに分けています。

(a) スマートフォンに自動対応するプラグイン
　　・プラグイン「WPtouch」をインストールして有効化する
(b) Media Query を使ってテーマで対応
　　・Twenty Eleven、Whiteboard テーマなど Media Query 対応テーマをカスタマイズする
(c) ユーザーエージェントで振り分ける
　　・WPtouch、MobilePress プラグインを使う or カスタマイズする
　　・KtaiStyle プラグインを使いスマートフォン専用テーマをカスタマイズする
　　・iPhone theme switcher などユーザーエージェントで振り分けるプラグインを使う
　　・is_iphone 関数で条件分岐させる
　　※Ktai Style プラグインはパケット量節約や画像自動縮小など、日本のガラケー独特の仕様に対応

ユーザーエージェントで振り分けるメリットは「同一URLでPCサイト、スマートフォンサイト、ガラケー（携帯）サイトの振り分けを自動で実現」できることです。例えばプラグイン「Ktai Style」をインストールして有効化すると、管理画面のKtai Styleの［テーマ］をクリックして「各端末ごとで使うテーマを振り分ける」ことができます。

星野さんのサイト「水族館コミュニティ」による具体的カスタマイズ例

星野さんは自身で作成した「水族館コミュニティ」というサイトを例に、具体的に説明してくださいました。水族館コミュニティでは「Ktai Style」プラグインを使いユーザーエージェントで振り分けしていて、ＰＣサイト、スマートフォン、携帯サイトと３種類のテーマを作成して最適化しています
水族館コミュニティ www.japan-aquarium.com

・ＰＣサイト

　Twenty Ten の子テーマ

・スマートフォン

　jQuery Mobile を使ったテーマ

・携帯サイト

　Ktai Style のテーマをカスタマイズ

jQuery Mobile

スマートフォン向けのサイトでは、jQuery Mobile を使用しているそうです。jQuery Mobile ではテンプレートやパーツが用意されていて、とても簡単にスマートフォンサイトらしいデザインを構築することができます。

jQuery

http://jquery.com/

jQuery Mobile

http://jquerymobile.com/

Designs | jQuery Mobile

http://jquerymobile.com/designs/

（１）テーマの色もタグだけで実現
（２）アイコンもタグだけで実現
（３）リストビューもタグだけで実現
（４）折り畳みもタグだけで実現
（５）フッターナビゲーションもタグだけで実現

アフィリエイトのスマートフォン／携帯対応

アフィリエイトではそもそも、ＰＣ用アフィリエイトリンクとモバイル用アフィリエイトリンクに分かれていて、以下のような対応方法があります。
(1) ＰＣ用サイトとモバイル用サイトを分ける
　　問題点：手間がかかる、被リンクが分散する、最悪ミラーサイトと判定される恐れまであります。
(2) ＰＣ用アフィリエイトリンクと、モバイル用アフィリエイトリンクを両方用意する
　　問題点：ＰＣ用、モバイル用の２種類リンクを用意する必要があるうえ、リンクしてもらえるとは限らないため機会損失が発生します。
(3) 同一ＵＲＬでユーザーエージェントで振り分ける
　　良い点：ＰＣサイトではＰＣリンクと、モバイルサイトではモバイルリンクを用意できる。
(4) プラグイン「Ktai Style 2.1 β版」では pc-only や mobile-only といったショートコードで切り替えることも可能になるそうです。これは便利！！

さらにスマートフォン専用バナーも登場していたり（スマートフォンを使っているとたまに見かけます）、成果報酬の発生条件が異なる（こともあるそうで、アフィリエイトにおいてもスマートフォンに対応することによるメリットが多いようです。

星野さんのインターネットやウェブサイトの技術やテクニックに関する知識の幅広さと、それぞれのメリット・デメリットをきちっと抑えているところに脱帽でした。会場は立ち見が部屋の外まで続くほどの満員で、みなさん熱心にメモを取っておられるなど非常に熱気を感じられました。

スマートフォン対応はこれからも、インターネットやウェブサイトにかかわるうえで欠かせないどころか重要度は増すばかりの分野です。バリューコマース EXPO 2011 はスマートフォンの動向と対応方法についての発表が聞けるとてもよい場となりました。

Smashing WordPress｜下北沢オープンソースカフェ図書室

tester — Wed, 28 Sep 2011 15:39:50 +0000

下北沢オープンソースCafe – パソコン記念日 Jelly! #25

下北沢にあるコワーキングスペース「下北沢オープンソースCafe」で開催されたパソコン記念日 Jelly! #25に参加してきました。パソコン記念日 Jelly! は古いパソコンを動かしてみせるものでした。MSX を動作してそれを大型ディスプレイに表示しながら、なつかしんだり操作方法を思いだしたり（写真）。そして、Jelly の案内にあった図書室の新刊 Smashing Magazin の書籍「Smashing WordPress: Beyond the Blog」を読ませてもらいました。

Smashing Magazin｜米国の有名マガジンサイト

Smashing Magazin は「Coding」「UX Design」「WordPress」の３つカテゴリーからなる、米国の有名なウェブに関するマガジンサイトです。Twenty Eleven テーマをデザインしたサラさんもお薦めするレスポンシブ・ウェブデザインの紹介ページ「Responsive Web Design Techniques, Tools and Design Strategies」などがあります。

Smashing WordPres: Beyond the Blog
日本でも数多く出版されている WordPress の書籍は初級、中上級、カスタマイズ、デザインなどテーマに焦点をあてて掘り下げています。一方、Smashing WordPress はテーマを絞らず全てを浅く広く取り上げた構成にしています。まさに Smashing Managin の記事のように網羅的に紹介するので、WordPress全体を俯瞰したりキーワードを押さえるにはよい書籍でしょう（ただし英語です）。

お薦めいただいた Web Standard についての書籍

そしてオーナーの河村さん、WordPress の直子さんお薦めしてもらった本も紹介しておきます。どちらもウェブ標準に関する本でずいぶん前に読まれたそうですが、その内容は普遍的で必読だそうです（ただし、これも英語です）。
・Designing with Web Standards (3rd Edition) (Voices That Matter)
・Web Standards Solutions: The Markup and Style Handbook

tipshare.info｜CakePHPで開発されたTIPS集
CakePHP のエンジニアが来られていて自身で構築されたウェブサービス tipshare.info を紹介がありました。WordPress ではをかもとさんの「メモとか」や大曲さんのブログ「Simple Colors」、そして WordPress|日本語フォーラムが TIPS の宝庫として有名です。 tipshare.info で WordPress のブログとの連携機能や、TIPSを分類・整理できる機能が搭載され TIPSが蓄積されると、とても便利になるなと思います。

オーナー河村さんの HAPPY BIRTHDAY !!!
この日一番もりあがったのは下北沢オープンソースCafe オーナー河村さんの HAPPY BIRTHDAY !!! です。横浜でコワーキングスペース「タネマキ」を計画しているウエツハラさんが河村さんに秘密裏に企画してくれたのでした、サスガ!! そして河村さんおめでとうございました!!

下北沢オープンソースカフェの図書室には、他にも面白そうな本が満載なのでまた読みにいかないと。そして河村さんによると１日店長を絶賛募集中だそうで希望者はぜひ！！

WordPress によるレスポンシブ・ウェブデザイン

tester — Sun, 18 Sep 2011 05:57:45 +0000

スマートフォンの浸透にともない、ホームページ（サイト）も対応をせまられています。そのひとつの形として注目を集めているのが「レスポンシブ・ウェブデザイン」です。

WordPress でも WordPress 3.2 からデフォルトテーマ「Twenty Eleven」がレスポンシブ・ウェブデザインになりました。今回はその概要について取り上げてみたいと思います。

A. スマートフォン対応の方法

・ iPhone や Android のアプリを作成する
・ jQuery Mobile を使う
・ JavaScript で PCとMobileのサイトを切り替える
　－プラグイン「WPtouch」
　－プラグイン「Ktai Style」
　－プラグイン「MobilePress」
・レスポンシブ・ウェブデザインを使う
　－テーマ「Twenty Eleven」
　－テーマ「Whiteboard」

WordPressで作るスマートフォンサイト　瀬口理恵さん（rie05）

WordPressで作るスマートフォンサイト

View more presentations from rie05

B. レスポンシブ・ウェブデザインを実現する方法

レスポンシブ・ウェブデザインのテーマである「Twenty Eleven」を例に、その実現方法をご紹介します。

１．フレキシブルグリッド（フレキシブルレイアウト、リキッドレイアウト）にする

ブラウザの大きさにあわせてシームレスに要素や画像の大きさがシームレスに変化する
・大きさを auto にする（ピクセルなど固定で指定しない）、もしくは％で指定する
・大きさの最小や最大の設定をおこなう

(例) Twenty Eleven の style.css ファイルの該当箇所
body {
      padding: 0 2em;
      （width: auto; は省略されています）
}
#page {
      margin: 2em auto;
      max-width: 1000px;
}
#primary {
      float: left;
      margin: 0 -26.4% 0 0;
      width: 100%;
}
#content {
      margin: 0 34% 0 7.6%;
      width: 58.4%;
}

２．フレキシブルイメージ、フレキシブルメディアにする

(1) 画像をフレキシブルイメージにする
#branding img {
      height: auto;
      margin-bottom: -7px;
      width: 100%;
}

(2) 背景画像をフレキシブルイメージにする
#background-image {
      background-size:cover;
}

(3) フレキシブルメディアにする
embed,
object {
      max-width: 100%;
}

３．メディアクエリーを指定する

CSS3 ではブラウザ幅やデバイス幅を指定して、CSSの読み込み判定をおこなうことができる「メディアクエリー」という機能があります。このメディアクエリーの設定をおこないます。

(1) link タグで HTMLファイルから CSSファイルを読み込む

(2) @import で CSSファイルから CSSファイルを読み込む
@import url(smartphone.css) only screen and (max-width : 650px);

(3) @media で CSSファイル内で切り替える
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { }

設定できる条件
・ (min-device-width: 320px) and (max-device-width: 480px) ブラウザの画面サイズ
・ (orientation:portrait) デバイスの向き（縦）
・ (orientation:landscape) デバイスの向き（横）
・ only screen 、 print 、all etc メディアタイプ

４．メディアクエリーに CSS を設定する

(1) カラムを変更する（サイドバーを横から下に変更して表示するなど）
#main #secondary {
      float: none;
      margin: 0 7.6%;
      width: auto;
}

(2) フォントの変更を変更する
@media (max-width: 650px) {
body, input, textarea {
      font-size: 13px;
}
#site-title a {
      font-size: 24px;
}

C. Twenty Eleven によるレスポンシブ・ウェブデザイン

Twenty Eleven のメディアクエリーは下図の構成で、ブラウザ幅が以下のように適用されます。
・ 800px 以下では（Ａ）（Ｂ）
・ 650px 以下では（Ａ）（Ｂ）（Ｃ）
・ 450px 以下では（Ａ）（Ｂ）（Ｃ）（Ｄ）
iphone などデバイス幅が 320px 以上 480px 以下では上記に加えて（Ｅ）が、
印刷画面では加えて（Ｆ）が適用されます。

・The Twenty Eleven Theme （Twenty Eleven のデモサイト）

       （Ａ）・・・
@media (max-width: 800px) {
       （Ｂ）・・・
}
@media (max-width: 650px) {
       （Ｃ）・・・
}
@media (max-width: 450px) {
       （Ｄ）・・・
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       （Ｅ）・・・
}
@media print {
       （Ｆ）・・・
}

WordPress のデフォルトテーマ「Twenty Eleven」を例にした、レスポンシブ・ウェブデザインの概要は以上となります。次は「Twenty Eleven」をデザインしたサラさんが旅行で来日して説明してくれた、WordCamp SF で発表した「WordPress とレスポンシブ・ウェブ・デザイン」の話です。

D. サラ・キャノンさんの「WordPress とレスポンシブ・ウェブ・デザイン」の紹介

WordPress3.2のデフォルトテーマ「Twenty Eleven」を担当したサラさんが「WordPress とレスポンシブ・ウェブ・デザイン」について説明してくださる機会が 8月19日にあったので行ってきました。サラさんのスライドは必見なのでぜひご覧ください。といっても英語のスライドですし、当日のプレゼンテーションを聞いて見ておくべき点をピックアップしましたのでそちらも参考にしてください。

・サラ・キャノンさんの「WordPress とレスポンシブ・ウェブ・デザイン」
・Responsive Web Design – WordCamp San Francisco （スライド）

Responsive Web Design – WordCamp San Francisco

View more presentations from Sara Cannon

サラさんの「WordPress とレスポンシブ・ウェブ・デザイン」における要点
P.23 HOW DO WE BECOME RESPONSIVE　レスポンシブウェブデザインにする手順
・ adaptive grid system & images　フレキシブルレイアウト、フレキシブルイメージ
・ media queries　メディアクエリー
・ lots of finagling and crying 泣きながらたくさん試行錯誤する

P.28 – 33 flexible grids
・％ target ÷ context = result
　flexible grids は % で指定することでシームレスにサイズ変更する。
　※小数点以下もできるだけ表示する（76.5957447% というように）。

P.38 – 42 flexible images 、flexible media
・ width: auto; max-width: 97.5%; height: auto;
　不特定多数の画像はこちらの方が安心
・ width: 100%
　特定の画像でレイアウト崩れなどの恐れがない場合

P44 – 49 media queries
・ w3.org/TR/css3-mediaqueries
　メディアクエリーの仕様や例文は w3.org にて

P50 – 57 レスポンシブ・ウェブデザインのサイト紹介
・ mediaqueri.es
　メディアクエリーでデザインされたサイトを紹介するサイト
・ smashingmagazine.com
　スマッシングマガジンは WordPress の紹介記事も多い有名なマガジンサイト。

P58 – 65 レスポンシブ・ウェブデザインの WordPress.com のテーマ
・ Twenty Eleven
twentyelevendemo.wordpress.com
・ Chateau
chateaudemo.wordpress.com
・ Quintus
quintusdemo.wordpress.com
　etc…

以上でレスポンシブ・ウェブデザインにできるそうですが、実際にレスポンシブ・ウェブデザインに対応させていくとなると、「 lots of finagling and crying （泣きながらたくさん試行錯誤する）」 ことになるそうです・・・。

（参考） CSS Nite GINZA No.59
レスポンシブ・ウェブデザインの欠点が、携帯のような画面が小さく通信も遅いデバイスでも、大きな画像を読み込むことになる点です。これの解決策のひとつとして CSS Nite GINZA No.59 では、レスポンシブイメージを挙げていました。
・レスポンシブイメージ JavaScript + .htaccess

E. レスポンシブ・ウェブデザイン対応実践してみました

このサイトも突貫工事でレスポンシブ・ウェブデザインにしてみましたので紹介します。

(1) ピクセル指定していた要素を、max-width と width:100% で指定しなおしました。
　・ margin 指定している場合は width:auto; にしました
　・ width:auto で崩れるところは display: block; にしました（display: inline-block では崩れることも）
　以下は当サイトでの修正例。

＜修正前＞
#main, #wrapper {
width: 1020px;
・・・
}

＜修正後＞
#main, #wrapper {
    max-width: 1020px;
    width: 100%;
     ・・・
}

(2) コンテンツエリアの画像をフレキシブルイメージにしました。
　・ max-width でコンテンツエリアからはみだすことを防ぐようにしました。
　・高さは height=”XXpx” と指定されていることも多いので height: auto !important; としました。

#content .entry-content img {
    max-width: 100%;
    height: auto !important;
}

(3) メディアクエリーを使ってカラム変更やフォント変更をおこないました。
　・ float: none; width: 100% をサイドバーに適用して１カラム構成に変更します。
　・ margin: 0 0 5px 0 !important; でサイドバーのためのマージンを取り除きます。
　・タイトルのフォントサイズを 200% から 160% に変更します。

@media only screen and ( max-width:800px ) {
    #sidebar-right, #sidebar-left {
        float: none;
        width: 100%;
    }
    #container, #content {
        margin: 0 0 5px 0 !important;
    }
    #wrapper h1 a, #site-title a {
        font-size: 160%;
    }
}

(4) JavaScript （jQuery）によるスライドショーはフレキシブルになりませんでした。

・ jQuery Cycle を使ったヘッダー画像のスライドショーは JavaScript によるピクセル指定があるため、残念ながらフレキシブルイメージとはなりませんでした・・・。

コワーキングスペース＆Jelly を１週間でまわってみたまとめ

tester — Sat, 17 Sep 2011 10:47:35 +0000

WordCamp Kobe 2011 の懇親会で関西のコワーキングスペースの紹介があったので、神戸にあるコワーキングスペース「カフーツ」に（株）コミュニティコムの星野さんと訪問しました。そして、カフーツを運営している伊藤さんから教えてもらったコワーキングスペースや Jelly の歴史が面白くて、そのまま１週間色々な場所のコワーキングスペースに行ってきましたので紹介します。

WordCamp Kobe 2011　０日目（9月11日）
WordCamp Kobe 2011 は WordPress のお祭りのようなイベントで、日本では過去最高の 573人の参加がありました。懇親会にも100人を超える参加があり、深沢さん、菱川さんからコワーキングスペースの紹介があったのが、今回のそもそも発端です。
・WordCamp Kobe 2011 WordCamp Kobe 2011 の公式サイト
・WordCamp KOBE 2011を振り返ってコワーキングスペースを紹介した話がある菱川さんの記事

カフーツ　１日目（9月12日）
神戸駅近くにある「カフーツ」は日本初の「コワーキングスペース」だそうで、主宰者の伊藤さんからコワーキングの歴史について詳しくおうかがいしました。カフーツは１０名くらい入れそうなフロアで、料金は１日１０００円で、このような立ち寄りの利用をドロップインというそうです。
・カフーツ～コ・ワーキング＠神戸～ CoWorkingとは

カフーツは日本初のコワーキングスペースだそうですが、その開設は以下のような順番だそうです。
　・Cahootz カフーツ 2010年5月
　・Pax Coworking 2010年8月
　・JUSO CoWorking 2010年12月

私はコワーキングスペースと Jelly を同じような意味でとらえていたのですが実際には、「コワーキングスペース」とは一緒に仕事をするコミュニティとしての場であるのに対し、「Jelly」は一緒に仕事をするイベント（場所は決まっていなくてよい）だそうです。

伊藤さんはエコライブオフィス品川でおこなわれた『New Yorkのコワーキング・スペース「New Work City」創業者と語る新しい働き方の可能性』にも参加されたそうで、下図は NewYork の有名なコワーキングスペース New Work City の共同創業者である Tony さんの提唱するトニーの労働ピラミッドだそうです。

New Yorkのコワーキング・スペース「New Work City」創業者と語る新しい働き方の可能性の様子
・NY のコワーキングスペース「New Work City」創業者来日イベントレポート【前編】
・NY のコワーキングスペース「New Work City」創業者来日イベントレポート【後編】

トニーの労働ピラミッドについての参考となるレポート
・コワーキングから見えてくる、従来の労働を超えた幸せをコントロールする働き方とは

ちなみにカフーツ近くの洋食・とんかつたちばなで夕食をとったのですが、ご飯の量がはんぱありませんでした（写真は中盛りで、小の小でもふつうの店なら大盛りです）。そして食事を終えて店を出た１８時過ぎには「本日の営業は終わりました」の看板が・・・。

JUSO CoWorking　２日目（9月13日）
翌日は大阪の十三駅近くにある JUSO CoWorking に行ってきました。こちらはウェブデザイン事務所「水交デザインオフィス」の深沢さん夫妻が運営されていて、４階で受付をして３階がコワーキングスペースとなります。JUSO CoWorking は５名席くらいが入れる大きさのフロアで、奥はブースプランの専有ブースになっています。当日はドロップインで１日１０５０円で利用させていただきました。

この日は、ブースプランを使用されている eBookworm大阪の方もおられたので、裁断にあたっては２枚目の写真にある A～C の幅に調整するなどの細かなノウハウなど自炊の色々な面白いお話をうかがいました。

下北沢オープンソースカフェ　３日目（9月14日）
下北沢で河村さんが開いている下北沢オープンソース・カフェ。１日利用で１０００円ワンドリンク付きだそうですが、この日はカフェの営業を開始した週だったからかドリンク飲み放題で、カフェラテをいただきました。２枚目の写真は当日届いた営業許可書を持つオーナーの河村さんです。

水曜日はJelly!の日ということで、ＮＰＯカプラーの松村さんが世田谷ソーシャルビジネスコンテストのＰＲにこられていました。

下北沢オープンソース・カフェは２つのエリアに分かれていて、こちらは図書館のようになっています。本棚にはよさそうだと思っていた「jQuery デザインブック」があり、執筆者のひとりが河村さんで２冊あるということで１冊をお借りして帰りました。

Jelly Jelly Cafe　４日目（9月15日）
渋谷の東急ハンズ近くにある Jelly Jelly Cafe におじゃましました。西川さんがおられたので WordPress について情報交換しながらコワーキングです。こちらには初日のレセプションパーティーのときにも来て、そのとき開発し始めた「Facebook ページをWordPressでかんたんにつくれるプラグイン」が完成して無事公開することができました。
・Facebook ページをWordPressでかんたんにつくれるプラグインを公開しました

Jelly Jelly Cafe ですごいのは、渋谷という様々な人が立ち寄れる立地もさることながら、18時から Bar タイムにしたり、日曜日にはボードゲームカフェにしたりと、コワーキングスペース以上のコミュニティスペースになりそうなところです。詳しく知りたい方はこちらの記事がよいかも。
・ノマドワーキングのさらに先へ――新生ビットバレー流は“Coworking”

Jelly Jelly Cafe では CAMPFIRE で「Save Our ASS 〜ノマドワーカーのお尻を守れ！〜」と題してトイレ（下写真がトイレとポスター）のウォシュレット化資金を募集してしまうなど、そのパブリシティやＰＲの多彩さもすごい。私も初めて CAMPFIRE でパトロンになりました。

コワーキングスペース恵比寿　５日目（9月16日）

コワーキングスペース恵比寿は恵比寿駅すぐ近くの好立地で（下図の奥に見えるのが恵比寿駅）、大小ふたつの机で６名くらいのスペースです。こちらはFacebookページ「コワーキングスペース恵比寿」に営業日時やイベントが掲載されています。利用料金はスペースの利用料金はなく、１ドリンク５００円となっています。写真２枚目が注文したジンジャーエール。

コワーキングスペース恵比寿の特徴はなんといっても、オーナーが音楽関係で管理人が照明関係のビジネスをされていることから、おしゃれな小物の多いアーティスティックな空間とイベントの多さではないでしょうか。おうかがいした当日は、午後から Xoops Cube セミナーがおこなわれていました。写真は第一部が終了して機材を撤去しているところ。

夜からはＤＪイベントが。オーナーが音楽関係の方だからでしょうか、照明や撮影のプロフェッショナルが集まって本格的なイベントでした。写真は照明や撮影器具の設置したり、ＤＪ機器を調整しているところ。

THE TERMINAL　６日目（9月17日）
最後は原宿の THE TERMINAL。こちらは正確にはコワーキングスペースではないのでしょうが、ノマドワーカーにはとても便利なスペースで、前々から行きたいなと思っていて、表参道に用事もあったのでうかがってみました。

THE TERMINAL は20人ほど座れる大きな机が中央にあり、サイドにソファ席、奥にはiMacのある席といった配置での広々としたスペースで、当日はほぼ満員の盛況でした。

こちらはなるほど、このスペースに集った人たちのコミュニティがある訳でもなくコワーキングスペースという形ではありませんが、むしろそのような運営にして、気軽に利用できるスペースにしているのかも知れません。実際、通常料金も30分190円からということもあり、ふらりと来てすぐに帰るといった方も多く見受けられました（下は20時頃になってやっと空いてきたので撮った中央スペースの写真）。

原宿という立地にあわせて、おしゃれなスペースで気軽に入れる THE TERMINAL のこのようなスペースもノマドワーカーに適したひとつのかたちなのかも知れません。

PAX Coworking　番外編（9月24日）
今回は立ち寄りできなかった世田谷区経堂にあるコワーキングスペース PAX Coworking に「PAX Jelly chapter 23」があったので参加してきましたので追記します。
・PAX Coworking | 空間と成果をシェアするアントレプレナーのためのオフィス

PAX Coworking はカフーツに次いで開設されたコワーキングスペースで、私はドロップインで利用させていただきましたが、コアメンバーとして利用されている方も多くおられることもこの PAX Coworking の特徴でしょう。Jelly に参加された方はみんなとても熱い方ばかりで「Jelly Saiko!! 」とみんなで叫んでいました。

「PAX Jelly chapter 23」は佐谷さんが参加されたメドックマラソンの報告会で、仮装して道中２９杯のワインを飲みながら６時間半弱で完走した話を写真をみながら紹介いただきました。

Jelly のあとは同じく佐谷さんが経営されているパクチーハウスで懇親会と行きたいところでしたが、あいにく満員だったため入口で乾杯！！メガジョッキ（生中２.５杯）をなんとか飲み干しました。

コワーキングスペースはメトロミニッツ（metro min.）１０月号でも『未来のワーキングスタイルが体感できる「コワーキングスペース」に行ってみよう！』というテーマで取り上げられています。ぜひ、こちらも手にとってご覧ください。

今回は WordCamp Kobe の懇親会でのコワーキングスペースの紹介から始まりましたが、このような WordPress のコミュニティの素晴らしさを体験すると、コワーキングやJellyによるコミュニティの将来に向けた魅力と可能性をひしひしと感じます。

強い会社には組織としてのノウハウが蓄積され、それはなかにひる人が変わっても受け継がれていきます。コワーキングスペースやJelly が、そのような強い会社組織にひけをとらない人材が育つ土壌へとなっていくように感じています。

WordCamp Kobe 2011 ＬＴ＆懇親会レポート

tester — Thu, 15 Sep 2011 14:59:24 +0000

WordCamp Kobe 2011 ライトニングトーク
WordCamp Kobe 2011 のセッションは「WordCamp Kobe 2011 カンファレンスレポート」の記事で紹介しましたが長すぎて掲載できなかったライトニングトークと懇親会を紹介します。WordCamp のライトニングトークでは個性的なみんなから WordPress のコミュニティやプラグイン、サービスについての熱い思いが語られました。こちらはその準備の様子。

西村州平さん
ライトニングトークは WordBench 鹿児島をたちあげた西村さんによる、アントニオ猪木の「元気ですか？」からスタート。WordBench Kagoshima のみならず来年度は WordCamp Kagoshima が開催されることを楽しみにしています！！

森川徹志さん
レオ社長からは満員御礼になった WordClub （WordBench福井）の紹介。大雪のなか東京からも２台の車で大挙して参加してました。雪をも溶かしそうな WordPress と蟹への熱い想いｗ



板垣宏明さん
アクセシビリティのお話で、「WordPress とアクセスビリティが共存しみんながアクセスできるＷＥＢにする」ことの大切さをあらためて意識しました。 Alt 設定をつけ忘れないようにしたりなど地道な頑張りが大切そう。

池田百合子さん
池田百合子さんはセキュリティのお話。KtaiStyle という有名プラグインの開発者でもありセキュリティにはとても造詣が深いので、とても参考になりました。百合子さんに怒られないようなプラグインをつくらないと＞＜

カイ士伝さん
カイ士伝さんからは写真の大切さと、Flickr2Tag というサービスの紹介。この記事でも使っていますが、とても便利でお薦めです。作者にお願いして chrome拡張まで作ってもらったそうなのでぜひ使ってみて下さい。
愛用中のFlickr連携サービス「Flickr2Tag」がChrome拡張機能化！

星野邦敏さん
星野さんから WordBench川崎のもくもく部で作ったプラグイン「Hallo Wapuu」の紹介。管理画面に Wapuu が表示され、投稿の間隔によってメッセージが異なるそうで、メール通知やメッセージ変更機能も追加予定だそうです。

西川伸一さん
西川さんからは管理画面をかわいくカスタマイズする話と、新しいサービス「ころぐ」の紹介です。ころぐの管理画面たしかにかわいいです（下２枚目の写真）。

小賀浩通さん
デジタルキューブの小賀社長によるライトニングトークは WordPress を大企業に導入してもらうまでの道のりと、そのためにＣＭＳとしての信用を高めるサービス「用心棒」の紹介。WordPress のさらなる浸透を目指した視点の高いお話ですごいなと思いました。そして、そのまま小賀社長からの閉会の挨拶となりました。

WordCamp Kobe 懇親会
WordCamp 懇親会は三宮に場所を移しての開催でした。この懇親会… 当初は100人の枠が募集開始して数日で満員になってしまい、参加できないかと思っていました。幸いにも 160人まで増員されたおかげで参加することができました、よかった。

会場は奥に中二階のようなフロアがありましたが、満員でぎゅうぎゅうでした。乾杯は堀家さんから！！

そして、懇親会でもライトニングトーク。最初は WordBench を創設した Contact Form 7 の作成者でもある世界の三好さん。新しい会社 Rock Lobster, LLC. を設立して活動されるそうです。

TORU さん（@waviaei ）からは自身が執筆された「WordPress 逆引きデザイン事典PLUS ［3.x対応］」の紹介です。もうひとつ重要な発表が、それは「WordCamp Tokyo」が１１月最終週に開催予定（wordcamp.org の承認待ち）とうことです、これは本当に楽しみ。

池田百合子さんからは「WPでつくるえっちサイト」。ネタかと思ったら、法的なところから技術的な面まで考慮したスライドも用意された完成度の高い発表で必見です。

大曲さんは WordPress について博識でみんなから頼りにされていて、WordPress 日本語版のフォーラムの常連回答者でもあります。

カイ士伝さんからは自身が初めて執筆されたアンドロイドについての本の紹介がありました。
できるポケット＋ Androidスマートフォン仕事術 (できるポケット+)

WordCamp Kobe 2011 サイトをデザインした瀬口さん（@Rie05）からはデザインの意図や裏話の紹介がありました。

深沢さんと菱川さんからはコワーキングスペースの紹介がありました。紹介のあったカフーツとJUSO CoWorking に行ってきたので、こちらは別途ブログでご報告したいなと思います。

ネッドさんは三好さんから話のあった Rock Lobster のメンバーで、CouchSurfing の紹介がありました。こちらを使って宿を確保そうです。

菱川さんから締めの挨拶があって終了し、２次会へと突入したのでした。

WordCamp Kobe 2011 のイベントの紹介は以上となります。ながい記事におつきあいいただきありがとうございました。

WordCamp Kobe 2011 カンファレンスレポート

tester — Mon, 12 Sep 2011 14:45:23 +0000

2011年9月11日に神戸開催された WordPress のイベント WordCamp Kobe に参加してきました。過去最高の 593人の参加ということで WordPress の広がりを実感するイベントでした。

カイ士伝さんが WordCamp Kobe のライトニングトークで Flickr2Tag という Flickr の画像を簡単に記事に挿入するサービスを紹介されていたので、これを使って記事を作成しています。
・カイ士伝「愛用中のFlickr連携サービス「Flickr2Tag」がChrome拡張機能化！」

会場までの道のり
さて、今回の WordCamp Kobe は神戸芸術工科大学で開催されました。@horike37 さんの道順案内ページと看板（下図）で迷うことなく到着しました。が、実は今回は直子さんの基調講演には間に合わず、６会場に分かれてのセッションからの参加でした。

懇親会受付のみなさん
そしてさわやかな笑顔の WordCamp Kobe のスタッフのみなさんに懇親会受付をしてもらいます。

展示ブースの武田さん、大曲さん
展示ブースにはマイクロソフト（WebMatrix）の武田さんやプライムストラテジーの大曲さん（@jim0912）が展示して商品やサービスをアピールされてました。今回は複数のセッションが並行でおこなわれていたこともあり、あまり展示ブースで時間を過ごすことはできませんでした。

Designer’s Cafe
WordCamp Kobe では６つのセッション（Cafe）に分かれていました。その中でも一番人気があったのがこの Designer’s Cafe ではないでしょうか。WordCamp Kobe の参加者が 593人に達したのも、WordPress に興味がある・これから始めようというデザイナーさんが多く参加してくれたからだと思います。

菱川さんのセッションは「光速テーマ開発のコツ」。高速ではなく光の速さなのがスゴイですね。WordPress の子テーマやループ、条件分岐のイメージをデザイナーさんに分かりやすく説明するというものでした。さすが @HissyNC さん。
・WordCamp KOBE 2011のセッションでお話ししました



WordCamp Kobe のデザインをおこない Great WordCamp Website Design でも紹介された理恵さんによる「WordPressで作るスマートフォンサイト」。WordPress でスマートフォンに対応することができる様々な選択肢を紹介。どれを選んぶかがむずかしいところ＞＜ PDF。

坂本さんによる「CMS案件の色彩設計」。ウェブ配色コーディネートカタログ持ってます (^o^)／今回の発表は~~どうやって配色するか~~ではなく、サイト運営においてどうやって制限するかでした。ユーザさんとルールを決めて配色を管理するという面白い視点のお話でした。 PDF

杉山さんは「具体的な制作事例から見るWordPressの構築・運用例」の発表。最後はを提供された景品をかけたじゃんけん大会。

User’s Cafe
WordCamp Kobe では WordPress の開発者やデザイナーだけでなく、ユーザの立場のセッションもありました。写真は細谷さんによるNPO法人へのWordPressの導入事例、そして一枚目の写真で身をのりだしているのがWordBench八王子の管理人でもある今井さん（@ryo_apejp）です。今回も関東から大挙して WordCamp Kobe に参加していました。

Developer’s Cafe
こちらはプラグイン開発やＰＨＰプログラミング、チューニングまでの開発者向けの非常に内容の濃いセッションでした。トップバッターは確認画面付きコンタクトフォームプラグインを作成して確認さんの愛称の堀家さん。プラグインの名前はオリジナリティがあって分かりやすいことが大切（左記のプラグインの名前も変更したいそうです）といった、プラグイン開発における重要な点を紹介してくれました。 PDF

WP Total Hack で有名な宮内さんの「WP Total Hack で制作するクライアント向けサイト」 WP Total Hack は公開３か月ですでに７ヵ国語に翻訳されてダウンロードも９千を超えるという、スゴイ！！

増永さんによる「これからのPHPの話をしよう」。これはやはりマイケル・サンデル教授のこれからの「正義」の話をしようをインスパイアされたタイトルなのでしょう。発表で気になったのは紹介されていた Pagoda Box という Scalable Cloud PHP Platform as a Service というサービス、今度試してみてこのブログでレポートを書きたいなと思います。
増永さんのPHPの話を最後方から見ているのは関東からきたスーパーヘビー級プログラマーのぶーりん（@boorinotyahuita）

宮下裕章さんのCustom Field Template プラグインの実例紹介。不動産のサンプルサイトを例に宮下さんが作成したカスタムフィールドを使い尽くすには欠かせない「Custom Field Template」の使い方を説明。WP-GOGO で有料プラグインの販売をおこなっていることも紹介されていました。今回の発表にあった「Custom Field Template」の使い方は必見の内容で、ぜひ試してみたいと思います。

をかもとさんによる WordPress ハイパフォーマンスチューニングは発表も超高速でした！！その内容は高速化に王道なしとおっしゃる通り、PHP、MySQL、キャッシュ、そしてWEBサーバまで広い分野に渡るため dogmap での復習が必須です。非常に貴重な内容なのでぜひ、をかもとさんのサイト dogmap で復習してください、私もします。
・ハイパフォーマンス WordPress サイト入門



Central Cafe
Central Cafe はWordCamp Kobe の最も大きなメインホールで、様々なジャンルの発表がありました。

スマートスタイルの森岡さんからは MySQL のパフォーマンスチューニングについての発表がありました。チューニングは Developer’s Cafe でのをかもとさんの発表とこちらの２つだけでとても貴重な内容でした。 PHP5.1 のドキュメントでは、「ENGINE か　TYPE オプションを省略すると、デフォルトのストレージエンジンが利用されます。通常、これは MyISAMです」とのことですが、InnoDB を選択すると、ロック待ちの軽減や、検索処理とデータアクセスの高速化が図れるそうでした。そして、クエリキャッシュは効果が大きいことと適用する場合の注意点について紹介がありました。高度な内容でしたが VPS を活用する方が増えていることからとても大切な内容ではないかと思います。

マイクロソフト武田さんから WebMatrix の紹介です。WebMatrix は xampp や mampp のような簡単にローカル開発環境を作成できる仕組みです。武田さんには WordPress3.2 リリースパーティーの会場をお借りして、 WordBeach と WordCamp Kobe ではスポンサーになっていただき、代々木公園での WordBench 横浜主催イベントの素麺流しにも来ていただくなど、WordPress の活動で本当にお世話になっています。本当にありがとうございます。

Genius Cafe
Genius Cafe では中本さんや直子さんによるハンズオンや Bar CAMP という一般参加者の飛び込みセッション（下３枚目の掲示板）、Genius Bar （エキスパートからが個別に教えてくれる）がおこなわれていました。

開会式の直後に「WordPressの最新事情」を発表した直子さんによるハンズオンは WordPress.com の使い方の紹介で、実際にプロジェクタで使ってみせながら、参加してくださった方々に実際に WordPress.com を試してもらっていました。

一般参加者の飛び込みセッション Bar CAMP も行きたかった。

Cafe の司会者は豪華メンバー
司会者は、まず発表者と相談して、発表者と発表内容を紹介して、発表者にバトンを渡します。今回は関東のWordPressコミュニティからも多く参加しているのでご紹介します。

WordPress 日本語チームのリーダーでもあるおでさん（@odyssey）は Central Cafe の司会。

User’s Cafe で司会の WordBench横浜を主催しているじゅんさん（@understandard ）。

Designer’s Cafe の司会は有料検索プラグインFE Advanced Searchでも有名な First Element の宮澤さん。

Contact Form 7 の作成者である世界の三好さんは Developer’s Cafe の司会者。

WordCamp Kobe は関西における WordPress を取り巻く熱気を感じられるとても楽しいイベントでした。 WordCamp Kobe を開催してくださったスタッフのみなさんに感謝です！！！

開閉会式やライトニングトークと懇親会は次回レポートしたいと思います。

WordPress Experiment

WordCamp Tokyo 2011 にスタッフとして参加しました

WordCamp Tokyo 2011 の運営やマネジメントについて

当日は 800 人を超える参加者に来場いただきました！！

WordCamp Tokyo 2011 非公式忘年会に参加してきました！！

WordPress をはじめるときに知っていると役立つこと

１．WordPress をインストールしてできること

２．WordPress はどこをカスタマイズすればいいか

３．プラグインは利用する

４．テーマをカスタマイズする｜子テーマを活用する

５．テーマをカスタマイズする｜テーマの構成を理解する

６．テーマをカスタマイズする｜テンプレート階層を理解する

７．テーマをカスタマイズする｜PHP ファイルを変更する

８．テーマをカスタマイズする｜テンプレートタグを使う

WordCamp Tokyo 2011 で写真を撮ること

ボーイング７８７ ドリームライナー

スマートフォンの最適化｜バリューコマース EXPO 2011

新しい時代へ！スマートフォン＆ソーシャルメディア最新事情

WordPressを使って、Web API連携 ＆ スマートフォン最適化をしてみよう！

WordPress でスマートフォンに対応する３つの方法

星野さんのサイト「水族館コミュニティ」による具体的カスタマイズ例

jQuery Mobile

アフィリエイトのスマートフォン／携帯対応

Smashing WordPress｜下北沢オープンソースカフェ図書室

下北沢オープンソースCafe – パソコン記念日 Jelly! #25

Smashing Magazin｜米国の有名マガジンサイト

WordPress によるレスポンシブ・ウェブデザイン

A. スマートフォン対応の方法

B. レスポンシブ・ウェブデザイン を実現する方法

１．フレキシブルグリッド（フレキシブルレイアウト、リキッドレイアウト）にする

２．フレキシブルイメージ、フレキシブルメディアにする

３．メディアクエリーを指定する

４．メディアクエリーに CSS を設定する

C. Twenty Eleven によるレスポンシブ・ウェブデザイン

D. サラ・キャノンさんの「WordPress とレスポンシブ・ウェブ・デザイン」 の紹介

E. レスポンシブ・ウェブデザイン対応 実践してみました

コワーキングスペース＆Jelly を１週間でまわってみたまとめ

WordCamp Kobe 2011 ＬＴ＆懇親会レポート

WordCamp Kobe 2011 カンファレンスレポート

ボーイング７８７ドリームライナー

WordPressを使って、Web API連携＆スマートフォン最適化をしてみよう！

B. レスポンシブ・ウェブデザインを実現する方法

D. サラ・キャノンさんの「WordPress とレスポンシブ・ウェブ・デザイン」の紹介

E. レスポンシブ・ウェブデザイン対応実践してみました