WordPress Experiment

「ブログを書くまでが 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 のブログリレー WordPress Advent で @hirohiro1872 さんのバトンを受けて15日を担当する @MakeGoodTime です。

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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 が使えない」という冗談のような本当の話。笑えませんが、たしかにそうですね（汗）

それではクラウドが実際にもたらすものは何なのか？
続きを読む→

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

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

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

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

WordPressで作るスマートフォンサイト　瀬口理恵さん（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%;
}

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

続きを読む→

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



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



続きを読む→

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

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

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





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



続きを読む→

8月27日に名古屋で WordPress のイベント WordBeach がありましたので行ってきました。

ひとことで言えば、主催者から参加者、スポンサーまでみんなが仲良くエンジョイできるとてもステキなイベントでした。今回は宿泊でしたので、まるで学生時代の修学旅行のように徹夜で盛り上がりっていました。


もくもくで作ったプラグインの公開
今回は徹夜でもくもくプラグインを作成するイベントがあり、私もカラーマネジメントをおこなうプラグインをβ版として公開しました。このサイトもこのプラグインを使ってイメージチェンジしました。背景色から背景画像、テクスチャ、影、角丸と豊富な機能が搭載されているので、よかったら使ってみて下さい。また、よかったらユーザビリティやコードで改善や向上にもご協力下さいね。
プラグインはこちらで公開 ⇒ WordPress プラグイン「WP-Color-Manager」を公開します

WordBeachの会場
日長駅につくとそこは緑豊かな南国の田舎といったところでした。日長駅から新舞子 まなビレッジ南浜荘まで１km の道のりを歩く。ようやく到着して会場で受付をすませて、カンファレンス中上級者向会場へ。



続きを読む→

昨月、赤羽IT勉強会で「WordPress カスタマイズ中級編 ＆ PHP初級編」 と銘打ってお話をさせていただきましたので、大変遅くなりましたがご紹介させていただきます。

赤羽IT勉強会では以下のように、前半は「テーマのカスタマイズ」、後半は「ウィジェットやフックの紹介」という構成でお話させていただきました。
発表資料は赤羽IT勉強会 2011.06.10からダウンロードいただけます。
当日の様子はネスト赤羽IT勉強会　第２４回からご覧いただけます。

１．テーマのカスタマイズ
　　・ 子テーマの活用
　　・ テンプレートのカスタマイズ
　　・ ＰＨＰファイルの編集
　　・ 条件分岐、ループ
　　・ 投稿の取得と表示
　　・ CSS / JavaScript の活用

２．ウィジェットやフックの紹介
　　・ ウィジェットエリアの設置
　　・ ウィジェットの作成
　　・ アクションフックの作成
　　・ フィルターフックの作成
　　・ 管理画面のカスタマイズ

しばらく、このサイトの新しい投稿をお休みさせていただきましたが、
管理画面系のカスタマイズなどの公開できるネタは積み上がっていて、
また WordPress3.2 がリリースされたことから、また更新していきたいと思います。

オープンソースカンファレンス 2011 Tokyp / Spring に参加してきました。3月4日（金）はWordPressブースの出展、3月5日（土）はセミナーでの発表をおこないました！！セミナーの発表や出展ブースでの訪ねて下さった方への対応はもちろん、まわりの CMS や EC な方々とワイワイお話したりして、学園祭のような楽しいイベントでした。

１．OSC Tokyo セミナー 「WordPress とそのコミュニティの魅力」

OSC Tokyo ２日目の１０時からのセミナーで、@naokomc さんと @miccwebさんの三人で分担してWordPressの紹介をしました。
朝１０時からにも関わらず、とても多くの方にお越しいただいき、本当にありがとうございました。
OSC Tokyo 2011 WordPress3.1


続きを読む→

福岡（九州産業大学）で開催された WordCamp Fukuoka 2011 に参加してきました。関東の WordBench に参加しているメンバーからも 10名あまりの参加がありました。
今回はスタッフ含め400人近くが参加したということで日本で過去最大の WordCamp となりました。アンカンファレンスから午後のセッション、懇親会、二次会まで本当に多くの方とお話することができて、とても貴重な１日となりました。


講演者のスライドやZENPREによるアーカイブ

福岡ではデザイナーさんや他のＣＭＳユーザさん、映像関連の方々まで WordPress という垣根をこえたコミュニティがあり、とても和気あいあいとしていると聞いていたので、「福岡のコミュニティ」と「デザイン」を中心にセッションに参加してきました。

１．WordPress 日本公式キャラクター登場

さて、最初はマクラケン直子さんの「パブリッシングツール WordPress のこれから」です。こちらでは WordPress の状況が紹介されました。そして、WordPress の日本公式キャラクターが発表されました。デザインした金内和子さんからもキャラクターについて説明がありました。 WordPress 日本公式キャラクターが登場

◆ WordPress日本公式キャラクターの発表
続きを読む→

今回は WordPress で時刻起動させる方法についてのお話です。

WordPress には時刻起動させる仕組みがあり、 wp_schedule_single_event で登録できるそうです。しかし、 wp_schedule_single_event にもある通り、以下の条件が付きます。

これでは必ずしも、時間通りに処理が起動されるとは限りません・・・。
そこで今回はレンタルサーバの CRON を使って呼び出す方法を試してみたのでご紹介します。

今回私の試した方法は以下の通りです。
(1) 該当する処理をページテンプレートに組み込んで新規ページを作成する
(2) 作成したページに CRONでアクセスして、決められた時刻に処理を起動する

続きを読む→

先日、広尾の地域コミュニティサイトを作成したいと思い、I live in Hiroo β版 を公開しました。まだβ版で、土台となる最低限の機能をリリースした段階ですが、これからコミュニティ機能を順次実装していきたいなと思っています。
さて、今回はこのサイトで採用した WordPress によるダッシュボードを利用しない管理画面をご紹介します。

1. ログインしたときに表示する画面を指定
   ログインした際にどのURLを表示するかは「redirect_to」で設定できます。
   例えばトップ画面を表示したいなら、ログインフォームで次のような値を hidden 要素を加えると、ログインするとトップページにリダイレクトされます。
   <input type="hidden" name="redirect_to" value="/" />
   

2. 管理画面をウィジェットで用意する
   ダッシュボードを使用しないかわりに、ウィジェットと使ってサイドバーに提供する機能のメニューを表示します。
   I live in Hiroo では投稿やメディアといった機能をカスタマイズして提供しています

3. ダッシュボードへのアクセスを禁止する
   ダッシュボードを使わないようにするなら、ダッシュボードへのアクセスを他の画面にリダイレクトしたほうがよいですね。
   例えば以下のようなコードを functions.php に加えると、ダッシュボードにアクセスがあると post-new.php、post.php、profile.php を除いてトップページにリダイレクトされるようになります。

function redirect_dashiboard() {
	global $current_user;
	get_currentuserinfo();
	if ( !current_user_can('Super Admin') ) {
		if ( preg_match('/^(\/wp-admin\/post-new.php)/',  $_SERVER, $url) ) {
		}elseif ( preg_match('/^(\/wp-admin\/post.php)/',  $_SERVER, $url) ) {
		}elseif ( preg_match('/^(\/wp-admin\/profile.php)/',  $_SERVER, $url) ) {
		}elseif ( preg_match('/^(\/wp-admin\/)/',  $_SERVER, $url) ) {
				$redirect_url = '/';
				wp_redirect( $redirect_url );
				exit;
		}
	}
}
add_action( 'init', 'redirect_dashiboard' );

（参考） http://ja.forums.wordpress.org/topic/4024

4. thickbox でカスタマイズした機能を呼び出す

サイドバーに用意したメニューから選択された画面を表示する必要がありますが、ダッシュボードには遷移しないようにします。このために、今回は thickbox を使ってライトボックス風に表示するようにしてみました。
WordPressでのthickboxの使い方

5. ダッシュボードメニューを消す

thickbox を使ってライトボックス風に例えば投稿画面を表示すると、左側に本来のダッシュボードメニューが表示されてしまいます。これらのメニューはアクセスできないようにしているので非表示にする必要がありますね。もちろんCSS設定で非表示にすることもできますが、今回はそもそも表示しないようにしてみます。
以下のコードを functions.php に追記するとメニューが表示されなくなります。

function remove_add_menu_classes( $menu ) {
	global $current_user;
	get_currentuserinfo();
	if ( !current_user_can('Super Admin') ) {
		return array();
	} else {
		return $menu;
	}
}
add_filter( 'add_menu_classes', 'remove_add_menu_classes' );

さて、いかがでしたでしょうか。興味がありましたらぜひ試してみて下さいね。

WordPress3.0 では投稿画面で「画像を追加」ボタンを押すと、同一画面上に「画像を追加」する画面が表示されますよね（右図）。

この仕組みを使おうと調べてみました。

WordPress ではコードをみると、このLightBox風の機能を thickbox というプラグインで実装しているようです。使い方も試してみたところ至って簡単です。
続きを読む→