WordCamp Tokyo 2013に参加してきました

WordPress WordCamp

WordCamp Tokyoに行ってきました。
WordCamp Tokyo 2013

関東で開催されるWordCampは2010年に行われたWordCamp Yokohamaに続いて２回目。
今回も前回と同じく始発から神戸を出発して、開会に間に合うように会場入りする計画でした。
（新幹線をそれに間に合うように、「こんな感じの時間でいいだろう」と指定席の予約とったら実は出発乗り換えが始発でもギリギリでかなり焦った・・・）
一応最も心配だった朝の早起きはなんとか成功し、電車に飛び乗って無事京急蒲田についたまではよかったんですが、
会場入り口にてなぜかスポンサー受付に通されてしまい受付の人も僕も？？みたいな感じになってしまいました（笑
時計みたら９時３０分。
早く着きすぎましたね！
どうやら開場は9時45分で、中はどう見てもブースとか含め設営中で明らかに「ようこそいらっしゃいました！開会までの間どうぞごらんください！！」といった状態ではなかったです（笑
でもなんでか会場入りしちゃったぼくは仕方なく設営中の会場を邪魔にならないようにぶらぶらしたりMacの準備をしたり。
（そういえば今回はひっしーさんのブース行けなかったなぁ・・・）
そうそう、今回は結構大きなメイン会場であるにも関わらず、PHPカンファレンス側で無線LANがあったことが非常に助かりました！
メモを取りながらリアルタイムでツイートを追うみたいなことを、今までMacとiPhoneの２重デバイスでやってたんですが、今回はMBAさんだけで解決できてしまったため、セッションの話を聞きながらっていうのがかなりはかどったかなーと思います。
（個人でWiFIくらい契約しとけよっていう突っ込みはまぁ・・・iPhone5Sにしたら解決しそうですしおすし）

今回参加したのは以下のセッション
①PHP カンファレンス基調講演
②アンカンファレンス
③Automattic社セッション
④テクニカルセッション
⑤お昼ご飯でちょっと抜けてセキュリティセッション
⑥Googleの中の人に色々聞いちゃうセッション
⑦LT
その他色々なミニゲーム（の観戦）や質問ボードへの書き込みとかしてみたり。
今回はチェックしてなかったんですが、PHPカンファレンス側のイベントも盛りだくさんで、単一イベントとしてはめちゃくちゃ充実していたため、現地会場に入ってじっくりプログラムを眺めてたらなんだかすごく迷ってしまったのですが、とりあえず当初の予定通りで参加することに。
WordCamp側のイベントは今回はちょっと趣向が変わっていて、今までおそらく主流だった「発表者によるスライドセッション」形式ではなく、登壇者複数名でいくつかのお題に対して意見を出し合おうというパネルディスカッション形式と、その登壇者と引き続き開場裏の畳みエリアで輪になって質問したりツッコミ入れたりできる座談会形式のイベントが引き続き行われるという、今までほとんどは聞くだけな場合が多かった参加者の方も、もっと「参加」できる形で行われました。
アンカンファレンスも最初から終盤までずっと行われていたのも特徴です。
（最初から最後の方までアンカンファレンスをプログラムとして配置するイベントはそうそうないのでは・・・？）
ただ、僕が参加したアンカンファレンスではやや人の入りが少なかったのが残念でしたが（笑
それでも、「今のWordPressは何が足りない！」とか、「こうしたいけどどうしたらよいのか」といった、話題の意見交換などができて楽しかったです。

セッション自体はパネルディスカッションメインということで、かなり深いところまで踏み込んだお話というものはあまり聞けなかった印象ではありますが、それぞれ登壇者さんが普段から気をつけていることや、感じていることなど、「お、これはなにげにめちゃくちゃ重要だぞ・・・」という言葉がちらりちらりと出てきたりして、このパネルディスカッション形式のセッションも方法としてはかなりいいなと思います。
ただ、スライドなどがほとんどなかったため、帰ってから復習したくなってもさくっと見れるものがないのがちょっとアレかなと。
セッションの動画とか、公開されるのでしょうか？
デザイナーセッションとか参加できなかったプログラムもあるので、もし公開されるようでしたらほかのプログラムの復習もかねて見たいと思います。

個人的に今回参加してよかったなと思ったセッションは、Googleの中の人に普段から疑問に思っていることを聞いちゃうセッションでした。
このお話はWordPressに限らずーーといったところなんですけども、かなり興味深い内容でした。
Googleは検索エンジンを通して、Webとはこうあるべきだという道しるべを作ろうとしているということも分かりましたし、それに我々はどう参加していけばよいのかということもよくわかりました。
そして、我々がよく話題にしている「SEO対策」も本当に間違いだらけだということも（笑
そりゃーいくらやっても検索エンジンの結果なんてあがる訳がないわー。
やっぱり大事なことは行き着くところは「アレ」になっちゃうわけですね！
いやー勉強になりました！

そういえば、お昼過ぎから開場にレッドブルカーが突入してきてレッドブルを配ってくれたのは個人的にすごく助かりました（笑
始発から神戸を出てきた身としては午後からのセッションは疲れがどっと出てきててどうにもお話に集中できなかったため、これをくいーっとやって元気１．２倍くらいには復活できました！

プログラムの最後のLT、今回は時間３分という普段よりも短い時間のなかで、みなさん精一杯にアピールをされておられました。
今回のLTの中で出てきた名言としては、やはり委員長メガネさんの
「成功したらおれのおかげ
　失敗したらみんなのせい」
だと思います！（笑
あと、LT前にビールなどのアルコールやソフトドリンクを振る舞うという大盤振る舞いもありましたが、その後「余ってるからどんどん飲んじゃってください！」というアナウンスもあり、懇親会控えてるのにそんなに飲ませて大丈夫なのかよ・・・と心配する一幕も（笑
（このタイミングのアルコール、やっぱりWCKobeの懇親会中のLTを見ての決定だったのかなーともちょっと思いつつ）
しかしながら本当にのどが乾いてるタイミングだったし、笑いながら見られるLTという性質上、アルコールとの相性がいいのは間違いはないかと思いますけどね（笑
マスクドレガシーさんのLTには頷ける部分が多くて大変面白かったです！

ところでLTのステージに立たれていたドラレスラーさん、あれどう見ても・・・

いくらか心残りなことも
①わぷーステッカー入手できなかった！
②アンカンファレンスとか座談会いっぱいあったけど、ちょっとタイミングがあわなかったかも・・・
③というか、名刺まだ発注してなくてちゃんとした名刺なかっt
④おもてなしページに紹介されていたランチ屋さん、行ってみようと思って行ってみたら土曜日休みじゃないですかやだーーー！でもタンメン屋さんに行けたからおっけー！
⑤展示ブースまわってなくね・・・
⑥PHPカンファレンスセッションもよさげなの多くてききたかったかもーー（こちらはスライドが公開され始めてるのであとでみます）

いやーでもまぁ心残りあるといいつつも、神戸から参加できてほんとうによかったです。
なんだかんだと楽しかったですし、今回も非常にためになるお話をいくつもきけました。
噂をきくに、裏方のほうでは色々あったらしいみたいなこともちらほらあったりしたみたいですが、今回も参加できてよかったと思いました。
また行きます！
次はどこらへんになるんでしょうかねー。
英語力身につけて、海外のWordCampにも行ってみたいなぁー・・・。
しかしあっちこっち飛び回るにはそろそろ僕の懐が辛いんですけどみなさんどうやってやりくりされてはるんでしょう？（＞＜；

WordCamp Kobe 2013に参加してきました

WordPress WordCamp


今回は神戸で２度目、私にとっては数えて４度目のWordCampです。
当日は様々なセッションが開かれましたが、私が参加したのは以下のセッションです。

  1. 開会式・基調講演
  2. アンカンファレンス（第一部）
  3. アンカンファレンス（第二部）
  4. AWSを利用したエンタープライズ向けWordPress環境の構築と運用
  5. What’s new! TwentyThirteen + WordPress3.6
  6. 知っておくべきWordPressのCSSセオリー
  7. 閉会式

今回も非常にWordPressの理解が深まる内容の充実したセッションばかりでしたが、やはり一番印象に残ったのはアンカンファレンス！
前回の神戸で開かれたアンカンファレンスが非常に面白く、色々な参加者の皆様との意見交換が出来たのがすごく楽しかったため、今回は２つに分かれたアンカンファレンスの両方に参加しました。
（これのためにWCKobeに参加したといっても過言ではありません・・・！（ぉ　）
アンカンファレンスのテーマはそれぞれ、バックアップやお引っ越しに関すること（第一部）と、使ってよかったプラグインに関すること（第二部）です。

前半のバックアップについての話題で、僕は「直接DBをごにょごにょしてバックアップや移行する」ということをお話しましたが、意外なことに（？）そうではなくプラグインなどに依存している方も結構多いということを実感しました。
中には黒い画面が怖いという人もいたりと、このあたりの敷居は意外と高いのかなとも。
自動的にバックアップを組んでくれるプラグインもあるにはあるのですが、これだとセキュリティ的にも不安があるという指摘もあり、なかなかこのあたりに関しては難しそうな感じです。
逆に考えれば、そのへんについての話題はまだまだ需要があるということで、今後のコミュニティ界隈での課題にもなるんではないかなーという実感も。

後半のプラグインに関するお話では、最近色々お世話になっているJetpackのお話をしました。
他の方の発表も聞いてみると、使ってよかったプラグインとしては多機能統合系プラグインとスライドギャラリーまわりのプラグインが中心となった感じです。
contactform7がなかなか話題に出てこなかったのはもはや常識すぎて「あって当然」みたいな感じだったのでしょうか？（笑
逆に苦虫を噛むような感じで出てきたのは「All in one SEO Pack」
これはまぁ、うん、あれですね（ごにょ
個人的にはアンカンファレンスが終わる最後まで誰も口に出さなかったWP Multibyte Patchが不憫でなりませんでしたが（笑

そうそう、お昼休みはカレーを食べに行きました。
センター街には色々なカレー屋さんがあるのですが、今回は神戸カレー浪漫という店に・・・あーー写真撮るの忘れてた！！！！！！！！！
あーーーーーーーーーーー
美味しかったです！


ところで、基調講演にて言及された「ワールドプレス」検索事例。
これはちょっと無視できないなーという印象。
それだけ認識されているし、興味を持たれているということだし、でもそういう人たちの受け皿って、実は今思ったより少ないんじゃないかなーってちょっと思ったりも。
WordPressも10周年。
認知度も高まり、よりいっそうの様々な人たちがこれからWordPressの世界に足を踏み入れようとしているということで、こういった裾野の広がりをよりWordPressの発展に結びつけて行くための、新たなスタートラインにたった瞬間であるとも考えられるのではないかなー

みたいなことを考えながらなおこさんのお話を聞いてました。


話は変わって夕方からは懇親会に参加してきました。
今までいろんなイベントに参加してきましたが、懇親会なるものは実は初体験だったりします！
飲んで騒いで委員長のチャイナドレス姿で多いに笑って、酒の混じったLTでこれまた盛り上がってと、これがWordCampの懇親会なのかと唸らされました（笑
あとなおこさんから日本語訳について色々教えてもらいました。
どうやら、「あの翻訳」は原文ママだったそうですよ！（誰に向かって


さて最後に
何気に今回のWordCamp、チケットナンバーがなんと１番！
一番最初の申込者でした！（笑
ブレンさんにご挨拶した際にその事を伝えたところ、やや悔しがられておりました（笑
チェキ写真を２枚ほどとっていただきました。
（１枚はアンカンファレンスの時にお世話になったひらたさんとボードに貼られた一問一答を見ながら話していた時、もう１枚はmamyさんと）
その両方、真っ黒な写真に仕上がっていたのは何かの呪いなのでしょうか（笑
僕が雨男だからか！（ぉ
↓

Jetpack Infinite Scroll + isotope

WordPress javascript

WordPressには様々なプラグインがありますが、かのautomatticがリリースしている「JetPack」プラグインを使って現在サイトを構築しています。
JetPackプラグインについては以下のリンク先を参照していただければと思うのですが、
（http://jetpack.me/）
最初はFacebook連携とかできればいいなーくらいに思っていたのですが、中を見てるとなかなか面白そうな機能、具体的に言うと「Infinite Scroll」機能とかあって、色々できそうな感じだったので
「せっかくだから使ってみよう」
という感じで組み込みを始めたのですが、これがどうしてなかなか偉い苦戦したので今回ここにうまくいった例を書いておこうかなと思います。

まずInfiniteScrollはテーマに対して組み込みをしないと動きません。
functions.phpに設定を書き込みますが、公式の英語があんまり読めなかった私にはなんのことやらだったため、
あれこれ試行錯誤した結果

    function initThemeSupport() {
        add_theme_support("infinite-scroll",
              array("container" => "content-list"
                   ,"type" => "scroll"
                   ,"render" => "setInfiniteScroll"
                   ,"posts_per_page" => 10
                   ,"footer"=> "footer")    
        );
    }
    
    add_action("after_setup_theme","initThemeSupport");

    function setInfiniteScroll() {
        get_template_part('content-index');
    }

initThemeSupport関数を定義して、その中にinifinite-scrollの設定をしています。
containerにはelementsを直接追加するelementのIDを入れて、renderにはコード下の方のsetInfiniteScoll関数を指定しています。
ヘルプを呼んでるとtwenty-twelveらへん前提で書かれててこの辺がサンプルとして書かれていなかったので混乱してたのですが、過去の公式テンプレート例がちゃんと書かれていて、これを参考にした感じです。
忘れずにafter_setup_themeにフックしておきます。
（これinitでもいいっぽいんだけど、どっちがいいんだろう？）
get_template_partはWordPressのレンダリングの際に指定のテンプレートを読み込んでくれる便利関数で、今回はこの中に書かれたテンプレートを使って動的に書き出すようにしました。
で、content-index.phpを作成して

if (have_posts()) : 
    while (have_posts()) : the_post(); 
        //表示処理
    end while;
end if;

といった感じでループ一式を入れておきます。
うっかり最初のifを忘れると無限ループになりますが一度は見ておくと面白いかと思います（待

これでjetpackの利用準備が整いました。
次はisotopeです。
isotopeとは、グリッドレイアウトを超絶イカす感じでやってくれるjqueryプラグインです。
公式を見てもらえばわかると思いますが、超イカしてます。
isotope
isotopeには別の「infinite scroll」との連携機能がありますが、今回はそれを使っていないので、自前でやらないといけません。
JavaScriptに以下のように設定します。

$(function() {
    var infinite_count = 0;
    $( document.body ).on( 'post-load', function () {
        infinite_count = infinite_count +1;
        var $selector = $("#infinite-view-" + infinite_count);
        var $element = $selector.find(".item");
        $("#content-list").isotope("appended",$element);
    } );
});

これはみたまんまなのでアレですが、JetPackのpost-loadイベントにひっかけてisotopeに表示処理を行わせています。
画面ソースをよくよく見てみると、取得してきたデータはinfinite-view-（連番）といった形のIDでふられてますので、
ここからdom要素を頂いて、それをisotopeにappendしていくという流れとなっております。

たったこれだけの処理なのにまる１日くらいかかってしまいました（笑
以外とjetpackはまだはやってないっぽいし、isotopeとかじゃなくてmasonryとか使ってる人ばっかな気もするしでなかなか気がつけないことが多かったです。
公式もよく読むべきだったなーと今回は反省多め。
あと英語やっぱ勉強しよう（笑

Yeomanを使ってフロントエンド開発のめんどくさいところを自動化してみたい

IT

HTML5など勉強会で知ったYeomanを使ってみようと思いました。

まずはYeoman（ヨーマン）とは何か。
簡単に言うと、色々めんどくさいことを適当にこなしてくれる便利なおっさんです。
Webアプリ開発を行うにあたって、まぁまぁめんどくちゃいこと、色々ありますよね。
やれJSライブラリをなんちゃらやらCSSをなんちゃらやら、テンプレート的に毎回おんなじこと書いてるのなんとかしたいとか、そういうのを適当にこなしてくれるそうです。

早速使ってみようと思います。
公式サイトはこちら

上記サイトにも書いてありますが、手順は以下の通り

まずMacを用意します
node.jsと、ruby、あとcompassをインストールしときます
次に、以下のコマンドをうちます

$ sudo npm install -g yo grunt-cli bower

とりあえずWebアプリケーションを組みたいので

$ yo webapp


おっさんが語りかけてくるので、返事を適当に返すと以下のコマンドを実行するように言われるので実行します。

$ npm install && bower install

プロジェクトの作成がはじまります。
200MBくらいのファイルを落としてくるため、結構時間がかかります。
紅茶でもいれながら待ちましょう。

ところでシムシティ、最近はまってます。
Macを用意したついでに購入しておくといいと思います。
アジアサーバのジャスパーっていう地域、土地あいてますよーー
公害だらけなので誰かたすけてください

終わりましたね。
ここでいったんビルドしてみましょう。

$ grunt

成功すると、ディレクトリにdistというフォルダができ、そこにファイルが出力されます。

こんな感じのファイルがビルドされて出てきました。
ログを見てるとなんとなく分かりますが、JSのテストとかしてくれたり、Coffeeのコンパイルとか画像の最適化とかcssとかjsの圧縮とかもやってくれて、めんどくさい繰り返し処理をすべて自動化してくれるのがわかりますね。

ところでちょっとものたりないので。。。

$ bower install underscore

でunderscoreをいれてみます。
で、ビルドしてみると

反映されました！

もうご想像の通り

$ bower install jquery

とかすると、最新版のjqueryをgithubから検索して入れてくれたりします。
なんだか胸がキュンキュンしてきますね！

Yeoman、ローカルサーバ立ち上げてリアルタイム編集監視とかもしてくれるらしいんだけど、どうも僕の環境だとうまいこと動いてくれなくてちょっと？？状態です。
もうちょっと触ってみて、面白そうな事が分かればまた書きたいと思います！

今週のカレー

カレー


大阪駅前第２ビル　地下２階にある野菜カレーのお店「ベジ・ベジ」さんのカレーです。
写真は「一日分の野菜がのったベジタブルキーマ」＋ライス大

こちらのお店では、野菜がたっぷりと乗った美味しいカレーを頂けます。
ご飯のサイズは小・中・大から選べ、サイズ変更は無料です。
写真のベジタブルキーマ以外にもハヤシライスやチキンバターカレーなどがあります。
（チキンバターカレーはサラダ付きで、このサラダをたっぷり野菜に変更することもできます）

カレーのお味はかなりしっかりしたもので、非常に香ばしい香りが特徴的な味わい深いルーです。
野菜もいっぱいのっており、野菜とルーとご飯との相性が抜群！
ついつい口が次の一口を求めているような、そんな感じでスプーンが進みます。
テーブルにはウスターソースとフライドオニオンが備えてあり、お好みで振りかけて味をさらに広げるのもいいでしょう。

オプションでチーズをお願いすると、野菜の上にどばっとチーズをかけて、それをバーナーであぶってくれます。
チーズの豊かな味わいと、香ばしさが相まってさらに美味しくなるので、こちらもあわせて注文するといいと思います。

しかしながら、私がこっそりオススメしたいのは、このお店で１日５食しか出さないというまるごとタマネギがのったカレー！
カレーの上にタマネギがずどんと乗せられ、それにチーズをかけてやはりバーナーであぶってから出てきます。
ナイフとフォークを使って食べるというなかなかのボリュームカレーですが、これも非常に美味しいです！

大阪駅前第nビルの飲食街ではどうしても野菜分が足りなくなってしまいがち（私はここらへんの食事を「おっさん飯」と呼んでいます。。。）ですが、そんな中でしっかりとお野菜がいただけるカレー屋さんというということでなかなか貴重なお店なのではないかなーと思っております。
是非是非みなさん一度足を運んでみてはいかがでしょうか。

夜のメニューもどうやらあるみたいなので、機会があればいってみたいともくろんでます（笑
ベジ・ベジさんは大阪駅から歩いて行ける範囲では僕一番のオススメカレー店です。

Windows版FirefoxのJS実装がなんかおかしい？

javascript

先日仕事場で寝ぼけながらJS書いてると、
現場の偉い人から
「IEでエラーになるからなおしといて」
って言われて
「えーでもFirefoxじゃなんもいわれねーっすよこれだからIEは！
みたいなこといいつつ自分で書いたソースを見てみると

function foo(bar = "aa") {
 ...
}

みたいな無茶な実装をしてしまっていたわけなんですが・・・

Javascriptは確か関数の引数初期化は

if(bar === undefined) {
 bar = "tingisu";
}

みたいな方法でやるのが一般的だったはずで、そもそも変数初期化の記述は構文エラーになるはず。
少なくともIEではエラーが出ている。
なんで！？Firefoxxxxx！


というわけで、まずは以下のような簡単なコード。

foo();

function foo(bar = "aa") {
 alert(bar);
}

OS X Chrome

OS X Firefox

OS X Opera

IE9

Win Chrome

Win Firefox

なんかでた


どういうことなんだろうこれ？
次世代への布石みたいな何かなんだろうか？
よくわからないんだけど、とりあえず僕が結構寝ぼけていたというお話でした。

本日のカレー

カレー


せんば自由軒さんのインディアンカレーです！

本町の某所に買い物に行くことになり、ふとしたカレーの話題から
「近くに自由軒という美味しいお店があるから行ってみよう！」
ということになり行ってきました。
場所は本町から堺筋本町にまたがる、昭和香る「船場センタービル」の９号館地下２階にあります。
こちらの名物はなんといっても上記写真のインディアンカレー！
ご飯に各種スパイスとルーをフライパン上で混ぜ合わせ、その上から卵を落とすという割とシンプルなメニューです。
食べる際には、一緒に出してくれるソースをかけて、混ぜ合わせていただきます。

お味の方は出てきたそのままで頂くと比較的シンプルというか、まぁ見た目通りのお味なのですが、ソースをかける量によってかなり化けてきます。
「カレーにソースはちょっとなー」とちょっと抵抗があった私は最初は恐る恐る少量をかけて食べてみたのですが、意外や意外、ソースの味がカレーの味の邪魔をせず、むしろお互いの味を引き立て合い、かなり絶妙なお味になってるではありませんか。
（おっ）っと思いつつ、もう少し食べてみると少しずつ物足りなさを感じるようになり、ソースの追加をしてしっかりと混ぜ合わせてみるとこれがなかなかに美味しくなるではありませんか。
（ソースの種類までしっかりと見定める事ができなかったのですが、ウスターソースの類いではないかと思います）
カレーにソースという文化に抵抗を感じていた私ですが、こちらのカレーならば違和感なく食べられました。
写真のカレーは大盛りサイズなのですが、あっという間に平らげてしまい、最後の方になると１口１口が名残惜しくすら思えてくる始末（笑
いやぁ、噂に違わぬこのインディアンカレー、さすが名物として売ってるだけのことはあります。
「カレーにソース」に同じく抵抗を覚えてはるという方はぜひ一度こちらのインディアンカレーを試してみてはいかがでしょうか！
僕は違うお店でも試してみようかなーとちょっと思ってます（笑
もちろん、普通のカレーメニューやカレー以外の定食メニューも豊富ですので、普通のカレーが食べたいという方にもオススメだと思います。
（定食メニューは遠目に見てると量が結構多めに見えたので女性の方は注意したほうがいいかもしれません）

なお、この自由軒さんは夜のメニューも豊富で、夜は居酒屋としても営業しているみたいです。
（お店にはボトルキープの焼酎がいっぱいならんでいました）
このお店でカレー飲み会とかもいいんではないかなーとちょっと思ってたりします。
機会があればやってみたいですね！
カレーメインの飲み会なんてやったことありませんし、きっと美味し楽しいに違いないですよ。

せんば自由軒
http://www.senba-jiyuuken.co.jp/