Technote

<!– more –>これまで確認画面を出すだけのものや、入力チェックだけをするものはプラグインとして出ていたのですが、どうも組み合わせて使おうとすると不便なことが多かったので、プラグインを自作してみました。

ダウンロード：

ソースコードは以下のgithubで公開しています。

https://github.com/sizuhiko/confirmForm

デモ：

まずどのような動作をするのか、デモページで確認したほうがわかりやすいと思います。以下のURLから操作してみてください。

/demo/confirmForm/demo/index.html

デモサイトでは入力チェックにex-valudationプラグインを使っています。

必須条件：

• jQuery本体 (1.4.2以上を推奨）
• jqModalプラグイン

特徴：

• 確認画面を出すかどうかは自分で判断します
• 確認画面でOKが選択されるまでフォームはSubmitされません
• 一般的なフォームの形式であれば、ほとんどカスタマイズ（オプションで指定する）の必要なし

一般的なフォームって？

このプラグインでは以下のような構造のHTMLフォームが利用されることを想定しています。

<form action="posted.html" method="get" id="inputForm">
  <div>
    <label for="user_id">ID:</label>
    <input type="text" name="id" id="user_id" value=""><span class="required">*</span>
  </div>
  <div>
    <label for="user_name">Name:</label>
    <input type="text" name="name" id="user_name" value=""><span class="required">*</span>
  </div>
  <div>
    <label for="user_sex">Sex:</label>
    <fieldset id="user_sex">
      <input type="radio" name="sex" id="user_sex_male" value="1"><label for="user_sex_male">Male</label>
      <input type="radio" name="sex" id="user_sex_female" value="2"><label for="user_sex_female">Female</label>
      <span class="required">*</span>
    </fieldset>
  </div>
  <div>
    <label for="user_lang">Language:</label>
    <select name="lang" id="user_lang">
      <option value="">-- please select --</option><option value="jp">Japanese</option><option value="en">English</option>
    </select><span class="required">*</span>
  </div>
  <div>
    <label for="user_receive_news">Receive News Mail:</label>
    <fieldset id="user_receive_news">
      <input type="checkbox" name="news" id="user_reveive_news_sports" value="1"><label for="user_receive_news_sports">Sports</label>
      <input type="checkbox" name="news" id="user_reveive_news_music" value="2"><label for="user_receive_news_music">Music</label>
      <input type="checkbox" name="news" id="user_reveive_news_computer" value="3"><label for="user_receive_news_computer">Computer</label>
    </fieldset>
  </div>
  <div class="buttons">
    <input type="submit" value="next" id="submit_ok">
  </div>
</form>

これはデモページのフォーム部分そのものなのですが、項目をdivタグで囲い、その中の項目名はlabelで入力フィールドはinputやselectを使うようなデザインです。

プラグインで必要になる記述

javascriptファイルをロードします。 jqModelプラグインを使っているので、jqModal、もちろんjqueryもロードしてください。

<script charset="utf-8" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script charset="utf-8" type="text/javascript" src="http://dev.iceburg.net/jquery/jqModal/jqModal.js"></script>
<script src="../src/confirmform.js"></script>

jqModalのスタイルシートが必要になります。また、jqModalのexampleで記述されているConfirmサンプルのスタイル定義を利用しているので、サンプルHTML上から切り出したスタイルシートをvendorディレクトリに用意しました。これを使うと簡単に利用を開始することができます。

<link charset="utf-8" href="../vendor/jqModal/jqmConfirm.css" type="text/css" rel="stylesheet"></link>
<link charset="utf-8" href="http://dev.iceburg.net/jquery/jqModal/jqModal.css" type="text/css" rel="stylesheet"></link>

プラグインの初期化

プラグインを利用するためには、HTML上に１つ確認画面用の空エレメントを追加する必要があります。場所はbody内であればどこでもかまいません。

<div id="confirmForm"></div>

idの値も特に意味はありません。ここではconfirmFormという値にしておきます。

プラグインのインスタンスを初期化するには、$(“入力フォームのセレクタ”).confirmForm(“確認画面用のセレクタ”, オプション) を使います。

$(document).ready(function(){
  ...
  $("#inputForm").confirmForm("#confirmForm", {});
  ...
}

ひとまず、このようにシンプルな宣言で動作します。実際に利用する場面では、入力フォームでselectボックスやcheckbox,radioボタンなどを利用していると思います。デフォルトの挙動では値をinputのvalueから取り出して表示するだけなので、コード値を名前に変換する必要があるかもしれません。このあたりのカスタマイズは、オプション節で解説します。

確認画面を表示する

このプラグインでは確認画面は自分で表示する必要があります。たとえばバリデーションプラグインの成功時コールバックで呼び出すようなイメージです。

$("#inputForm").confirmShow();

これはとてもシンプルで、confirmShow関数を呼び出すだけです。

OKが押されたかどうかチェックする

このプラグインでは、確認画面でOKが選択されたらもう一度入力フォームでSubmitを実行します。そのため入力チェックが再実行されて、コールバックが呼び出されるかもしれません。そのためにOKが既に選択されていたらそのままreturnするような実装にすることになると思います。

validCallback:function() {
  if($("#inputForm").isConfirmed()) {
    return;
  }
  $("#inputForm").confirmShow();
}

確認済みかどうかはisConfirmed関数を呼び出すだけです。入力内容が問題ないときのコールバックがvalidCallbackだったとすると、上記のような実装になります。

オプション

実際に利用する場面では、必ずしもinputのvalue値が確認画面に出れば良い訳ではありません。また、タイトルを変更したりボタンのラベルを変更したりもしたいでしょう。そのためにプラグイン初期化時にオプションを指定できるようにしてあります。

オプション一覧：

名前意味デフォルト値概要

title タイトル Are you sure? 確認画面上部に表示されるタイトルを文字列で指定

yes はいボタンのラベル Yes 文字列で指定

no いいえボタンのラベル no 文字列で指定

findLavel ラベルを探索して文字列を返すためのコールバック 1つ前の要素のtext部分(一般的なフォームのtextボックスではlabelになる) radioやcheckboxのようにラベルがfieldsetの外側にあるようなケースで独自にコールバック関数を実装する

formatValue 値をカスタマイズするためのコールバック inputやselectのvalue値 value値がコードだが、確認画面では値（名前）で出したい場合に独自にコールバック関数を実装する

separator 複数選択値の区切り文字 ,(コンマ） 同一nameがある場合に、値を区切る文字列

ラベル文字列のコールバック

デフォルトの挙動は以下のとおりです。

'findLabel': function(inputField) {
    return $(inputField).prev().html();
}

textボックスは直前の要素がlabelであることを想定しているので、すべてが一般的なフォームのレイアウトで、textボックスしか利用していなければ、オプションの指定は必要ありません。しかし実際はlabelが右だったり１つ親の要素だったりすることがあります。 このような場面ではコールバックを実装してください。

例えばデモページでは以下のようなコードになっています。

'findLabel': function(field) {
    switch(field.name) {
    case 'sex':
        return 'Sex';
    case 'news':
        return 'Receive News Mail';
    default :
        str = $(field).prev().html();
        return str.substring(0, str.length-1);
    }
}

findLabelに関してはformatValurのように項目別ではなく、functionで受け取って独自にカスタマイズする方式を取っています。これは項目名は一括ルールで変換できる場合が想定できるためです。

※このオプションに関しては、将来formatValueのようにhashでも指定できる（併用）方式に変更する予定です。

値をカスタマイズするためのコールバック

inputやselectのvalue値は必ずしも確認表示用には向いていないこともある（例えばコード値になっているなど）ので、このようなケースではコールバック関数を実装してください。

例えばデモページでは以下のようなコードになっています。

'formatValue':{
  'sex':function(field) {
    return {1:"Male", 2:"Female"}[$(field).val()];
  },
  'lang':function(field) {
    return {'jp':"Japanese", 'en':"English"}[$(field).val()];
  },
  'news':function(field) {
    return {1:"Sports", 2:"Music", 3:"Computer"}[$(field).val()];
  }
}

formatValue自体は各入力項目のname属性をキーにしたhashで定義します。

さいごに

今後以下の機能について、バージョンアップを予定しています。

• yes,noボタンの左右を逆に指定できるようにする
• selectやcheckbox、radioなどタイプごとに推奨フォームを想定してラベル値を取得する
• findLabelをhashでもオプション指定できるようにする

その他カスタマイズ要望などあれば、機能追加していきたいな、と思っています。

<!– more –>I went PHPmatsuri on last weekend. PHPmatsuri was great-full Hackathon style event about PHP in Japan. I had prepared about the event as staff.

私は先週末PHP祭りに行ってきました。PHP祭りは、日本のPHP界隈では最大のハッカソン形式のイベントです。私はスタッフとして準備に携わってきました。

In 10/2 morning(8:00 am), staffs meets up hall of the event(Harumi Grand Hotel). We were setting some desks, chairs, electronics line, audios and reception space.

スタッフは10/2の朝8:00に晴海グランドホテルに集合して、会場のセッティングを行います。

I wait participants of the event at front of the hotel, and I showed them to the room. I could look for them easily, because any participants had iPhone and navigated by google-map.

受付が始まる直前にホテルのフロント前に移動し、参加者を会場へ案内します。皆さんiPhoneを片手に地図を見ながら来るので、すぐに参加者とわかりました。

At first, I started ice break for strained participants. And I introduce to them Mr. Hiro Yoshioka, then started first session. The session has be very important for Japanese developer. Should check his blog & slides.

まず最初はアイスブレークから。皆さんの緊張を解きほぐします。会場が暖まったところで、よしおかさんに基調講演をしていただきました。このセッションはPHPに限らずに日本の開発者にとってぜひ聞いて欲しかったセッションとなりました。ぜひよしおかさんのブログをチェックしてください。

The important thing is “English or die” for us. Almost Japanese developer have satisfaction with only Japanese information. Because some Japanese hacker translate English to Japanese with his effort. But Yoshioka san says, “should dispatch some information with English to world-wide”. I know it is very important.So, I wrote this post in English. Some guys same thinks, time line on twitter about phpmatsuri filled with his impressive words.

注目すべきキーワードは“English or Die"でした。日本ではみんな日本語訳のドキュメントを作るのが好きで、著名なブロガーやハッカーがやってくれていますね。でもそうではなくて各自が英語を使って海外に発信していくのが重要だと。僕もそう思うし（だから英語で書いてみた）、よしおかさんの講演中のtwitter TLを見ればみんな共感していたのがわかります。

The second session was Practical PHP5.3 by Mr. Nate Abele. He is developing lithium now. Before, he was CakePHP lead developer. In 9/25, Mr. Rasmus Lerdorf talk about same keywords at PHP-conference. Nate talked about some details more than Rasmus with using sample codes.For example PSR-0, closure…

次のセッションはNateによる実践PHP5.3。１週間前のPHPカンファレンスでRasmusが講演した内容と似ていたけど、より詳細に踏み込んだ感じだった。特にPSR-0とかクロージャとかlithiumの例も交えて解説していました。

Since afternoon, the room was separated to 2 space between conference and Hackathon. On the conference space, talked about CakePHP2.0 by Graham Weldon, Lithium by Nate Abele & Joel Perras and some sponsor’s session. On the Hackathon space, opened workshop about Symfony2, CakePHP and Lithium by the core developer. I presided on conference space, but had very interesting to Hackathos space.

午後からは会場を講演スペースと開発スペースに分割しました。講演スペースでは、コアデベロッパーから各フレームワークのセッションあり、スポンサーセッションあり。開発スペースではコアデベロッパーと一緒にワークショップができたり、各々のテーマで開発したりしていました。僕は司会進行だったので講演スペースに付きっきりでしたが、開発スペースがすごく気になっていました。

After dinner, Mr. Kris Wallsmith talked about Symfony2 at confernce space. Same time, Redbull’s girls came to Hackathon space.

夕食が終わると、KrisによるSymfony2のセッションが開始。ちょうどその頃レッドブルガールがキャンペーンにやってきてくれました。

In that time, I was not able to be heard while preparing next surprise present. I was waiting for 3 cakes. When Symfony2 session ended, the cakes carried into the room. Everybody crowded around cakes and take many photos. So, the nice idea(real cake) was started by Japanese CakePHP community on 2 years ago. In this time, it added Lithium and symfony. The cakes made by Paper Moon. I know the shop is very nice cafe. I recommend for you.

僕はちょうど次のサプライズに向けて準備中でSymfony2のセッションはほとんど聞けませんでした。それは日本のCakePHPイベントでは恒例のリアルケーキです。今回は僕が担当だったのと、とにかくLithiumの出来映えがどうなのか心配だったのです。Symfony2セッションが終わるころホテルの人にケーキが運び入れてもらいました。みんな群がって来て写真を取りまくっていました。ケーキは南麻布のPaper Moonさんにお願いしました。良い店なのでお勧めです。

And sounds of StarWars heard, JIREI master entered. He look like Jedi master! JIREI means the use-case. 2 teams of CakePHP and symfony competed presentation to get a degree of JIREI master. So, @HIROCAST won competition and became JIREI master. He talked about Agile development by symfony.

スターウォーズの曲と共にJIREI masterが入場。ここから事例紹介セッション「JIREI night」が始まります。CakePHPとsymfonyに別れ交互に事例発表を行い、勝ったのは@HIROCASTさんの「アジャイルな開発をチームでやってみた」(symfony)に決定しました。

Time is over 23:00. But everyone continue to develop about themself theme. I started myself theme too. I tried OpenpearPEG for develop parser of Cucumber feature.

事例紹介が終了したのが23時過ぎ。ここからようやく自分の開発時間です。OpenpearPEGでCucumberのパーサーを作ろうと思っていました。

About 2 hours later, I saw some problem. But file of feature don’t match PEG because it isn’t structured. I started giving it up. I was looking for difference theme. So, I got destiny project. It’s Behat. I had feeled very interesting about this project. I decided this to be my theme.

Time is over 5:00. My challenge finished. I go back to my room. What my room-mates was developing his theme in the room !

2時間ぐらい頑張ったのですが、自然言語はPEGと相性が悪いように思い、諦めかけて違うテーマを探していたら、運命の出会いが待っていました。それが「Behat」です。これで行くぞ、と決めたのです。そして5時頃なんとか日本語フィーチャが通るようにハックして部屋に戻りました。合部屋の人はすっかり寝ているのかと思ったら、なんと部屋で開発していました！みんな頑張ってるなー

I got up 7:00 on 10/3. After breakfast, I wrote presentation for demonstration on event room. Everybody get up, but they were maybe very tired. Afternoon 10/3, demonstration about every theme started. The entries are 33. Each presentation is 4 minutes, and the style is Japanese LT having "Dora-Musume”. Whenever demonstration finished , the auditor posts the score from Google-Form.

1時間半ぐらい寝て、7:00から朝食を取りイベント会場でデモ大会用のプレゼンを作成。みんな会場入りするけど、お疲れの様子です。どうも結構な人数が徹夜でやっていたようで。。10/3午後からデモ大会の開始です。発表は1人4分、日本のLT形式（もちろんドラ娘付き）です。なんと33人のエントリーがありました。各プレゼンが終わると事例発表と同じGoogleフォームから投票できるようになっています。そういえばドラ娘の写真がありません。どなたかプリーズ。

My position is 8th in sector-1. But I started on 7th by few accidents. Since sector-2, I presided. All demonstration was finished 3 hour later. The talker and auditor was very tired. long long time LT had been first time for us.

僕は最初の8番目の予定だったのですが、並び順を間違えて7番手でプレゼンとなりました。その後セクター2からは司会にバトンタッチ。全部のLTが終わったのが3時間後（1時間おきに休憩はありましたよ）。こんなに長いLTは初めてで、すごく疲れました。

And……. I won Hacker Prize. It means best performance into these demonstrations. I got new iPod-touch of prize. I’m very happy !

そして運命の結果発表。僕はハッカー賞に選ばれました。これは最高得点の賞なんです。賞品は新しいiPod Touchです！

Long long time was spent, phpmatsuri finished. I think almost participants and staffs were satisfaction. And for Japanese PHP developer, it will become to trigger to publish some information positively. I think so.

At last, thanks for 2 days. @yando and staffs, everybody.

長い時間が過ぎ、PHP祭りは終了しました。参加者／スタッフともに満足できる内容だったと思っています。また日本のPHP開発者にとって積極的に情報発信をするきっかけになるイベントになったんじゃないかと思いました。最後に、２日間ありがとうございました。特に@yandoさん、そしてスタッフ・参加者の皆様に感謝です。

<!– more –>第50回PHP勉強会@関東に参加してきました。

とても豪華なメンバーが集まっていて、さすが５０回！！
ネタも旬な内容でしたが、ustムリなセッションもあったりして、細かい内容のレポートは避けておきます。

会場を貸していただいたコンテンツワン様ありがとうございました。
広いしキレイだし言う事なしです。

んで、その後最寄りの日比谷バーに移動したのですが、乾杯がいきなりオリジナルカクテル。
@gusagiさんすごいよ！

完全貸し切りのスペースで、立食パーティ。懇親会LTもあり（発表しました）、楽しい時間はあっという間に過ぎました。
次の区切りはハードルが上がりますね。１００回はあと何年後？ですかね。
最後には記念デザートもあり、記念尽くしな懇親会でした。

LTでも言いましたが、永和システムマネジメントは「PHP x Agile も応援します」ので、お仕事ありましたら、連絡ください www。

参加した皆様、発表者の皆様お疲れさまでしたー
幹事の@gusagiさんに感謝です。

<!– more –>昨年のCakePHPカンファレンスでは、一講演者としての参加だったのですが、今回は中の人として参加しました。
Blogを書くまでがイベントです、ということで、一息ついたところでの思いをKPTでまとめてみました。
イベント全般に関しては、スタッフで「ふりかえり」をしたので、当日の担当範囲中心に。

Keep:
二日間にわたり、かなり多くのかたと交流できたのが、今回のテーマ「交流」にマッチしていて、よかったのではないかと思います:yes:
特にこれまで勉強会などで会ったことのない初対面のかたと、いろいろな話ができたので楽しかったです。
コア開発者とも仲良くなれた気がしました！！:up:
また１日目の懇親会でJoelに先日のPHP勉強会で発表した「WebTestCaseでfixtureを使う」について、プレゼンできたことが良かったです。後で英語に翻訳してBakelyにアップするぜ！と宣言した（自分を追い込んだ）ので、頑張ります。:star:

Problem:
ワークショップ（実務者編）のユニットテスト基礎・実践は、実質基礎しかできませんでした:ko: 。イベントごとという意味ではオブジェクト倶楽部などの経験もあったので大丈夫かな？と思っていたのですが、ちょっと上級内容だったのかな？と。。。ただ資料としては、後で十分振り返ってできる内容になっているので、持ち帰ってゆっくり確認してもらえると、理解が深まるかな？と思います。
２日目の２次会は、grahamの向かいの席でがっつり英語談義だったのですが、途中から疲労:faint: とアルコール:beer: から頭の回転がおかしくなってきて、だんだんと聞き取りもできなくなってきてしまいました。

Try:
PHPerにはコマンドラインは難しい？というのもあったので、別の方式が良いのかな？とも思ったのですが、実務ではconsoleのテストを使ったりすることの方が多いので、やはりコマンドラインは捨てがたいのですよね。なので次回以降は、オブラブの合宿前にもやった「環境構築前夜祭」をできれば良いなと思います。地方からの参加で必ずしも前夜祭に参加できない（当日移動など）の方もいるので、資料は事前公開ということで。
そういったことも含め、実務者コースのハンズオンの感触は、今回かなり掴めたので、進め方などもっと良い形でできるようにしたいと思っています。
後は英会話ですなー、毎日仕事で使っていたときより明らかに落ちてるし（とは言っても元々たいしたこともないけど）。。。何か解決策を見つけて英会話力をアップしたいと思うのでした:) 。

最後に。
参加者の皆様の温かい声援や、Blogでの感想に助けられました。ありがとうございます。
ワークショップの持ち出し企画はやりたいなーと思いますが、ちょっとしばらくイベントは・・・と思ったりしてます:pが、来年には実施したいですね。
また皆様にお会いできるのを楽しみにしています。

<!– more –>CakeMatsuriを迎えるにあたってのリレー形式ブログ第２弾です。yandoさんの記事の後で恐縮ですが、これまでCakePHPと過ごしてきた日々を振り返ってみます。

CakePHPとの出会い

はじめてCakePHPという名前を聞いたのは、「10分で作るCakePHPアプリ」というRuby on Railsでも有名だった最速開発のスクリーンキャストをPHPでもやってみた、というものでした。

PHPは2000年頃に興味を持ってやっていたのですが、その後仕事はJavaやRubyが中心となり、疎遠となっていました。そのためPHPでもこんな事ができるのか！！と衝撃を受けました。

早速CakePHPをダウンロードし、動かしてみると、その導入のしやすさは（エラーメッセージの親切さも相まって）、これまでに体験したことのないものでした。早速blogチュートリアルを作って、アレコレいじっていた記憶があります。PHP熱が再発した瞬間でした。

ミニ案件との出会い

その直後、たまたま小さい案件で、言語は何でも良いという仕事に偶然と出会い、CakePHPの採用を決めました。当時のバージョンは1.0でした。当時は日本語の情報も少なく、Cake本体のコードを読みながら進めていたものでした。

書籍執筆のきっかけ

ちょうどその頃、同僚が「Web2.0ビギナーズバイブル」の共著を持ちかけてきました。この本はWeb2.0開発を始める人向けの本で、言語部分はそのものの入門とフレームワークの入門をペアにした企画でした。書籍としては（雑誌は既出でした）始めてCakePHPを取り上げることになりましたが、実は企画を依頼された段階ではsymfonyだったのです。CakePHPを使った後で比較のためにSymfonyも使ってみたことはあったのですが、どうしてもCakePHPでやりたいということを言って変更してもらった経緯がありました。そのときsymfonyで書いていたら今はどうしていたのかな？と思うことがあります。

これまで雑誌やメルマガの経験はあったのですが、初めての書籍はとても困難でしたが、ここから学ぶことも大変多く、その後「Webアプリケーションテスト手法」「CakePHPによる実践Webアプリケーション開発」の計３冊も共著させていただくことになったのは感謝でいっぱいです。

CakePHPコミュニティとの出会い

その後、yandoさん主催で始まったCakePHP勉強会に参加・発表したり、CakePHPカンファレンスで講演させていただいたり、様々なところでCakePHPユーザとの出会いを繰り返してきて新しい輪が構築できました。新しい輪は、仕事面でも指名でCakePHP案件をいただくこともありました。

直近では「CakePHP1.2ガイドブック」のトークショーを池袋ジュンク堂でやったのですが、これも楽しいイベントになりました。

そしてCakeMatsuriへ

今月末、10/30、10/31にCakePHPコミュニティの活動として、国内最大のイベントなるCakeMatsuri（昨年はCakePHPカンファレンス）が開催されます。

今年は２日間で、30日はこれまで何回か実施したハンズオンの延長線上になるワークショップ（すみませんもう定員に達しました）、31日は海外からコア開発者を招待しての講演や、CakePHPを使った事例発表などがあるカンファレンス（まだ参加者募集中です）から構成されています。

コミュニティの輪に身を投じてみて、私は様々な出会いやきっかけを得ることができました。皆様もCakeMatsuriに参加して新しい輪を広げてみてはどうでしょうか？

聴講者として参加するも、LTなど短い時間からでも、苦労したことを事例発表するなど、様々な参加スタイルがありますので、皆様の参加をお待ちしております。