1. CodeIgniterによるPhwittr
日本CodeIgniterユーザ会
Kenji Suzuki
2008/10/08
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
2. Phwittrとは?
Tritterクローン
➔ミニブログ
➔「ひとこと」を投稿するサイト
「PHP Framework Fight!」という企画もの
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
4. PHP Framework Fight!とは?
開催概要
➔ PHPで色々あるフレームワークで、同じ仕様のア
プリを実装し、ベンチマークを取り競争する。
➔ 処理速度だけでなく、開発工数(ジェネレータが
吐いた以外のコード量)などでも比較したい。
➔ 数あるPHPフレームワークの頂点に立つのはど
のれか、今ここにPHPフレームワークの熱いバト
ルが始まる!
まとめサイト
➔ http://labs.strk.jp/code-fight/wiki/
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
5. PHP Framework Fight!とは?
経過
➔ 4/22告知、5月末までに実装の予定
➔ 仕様がなかなか出てこない
➔ 出てきたが、細かいところまではない
➔ 企画自体、ポシャった?
• PHP界隈では、この話題はタブーに
➔ 8/18に突然、締切日が9月末に設定される
➔ 実装しはじめると、HTMLテンプレートすら足りない
➔ Twitterや先に動いていたSabelを参考に
テキトーに作る
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
6. PHP Framework Fight!とは?
現状
➔ エントリー
• 14フレームワーク
• 17エントリ(バージョン違いなど)
➔ 一応できてるもの
• Sabel
• CodeIgniter
• 素のPHP(独自フレームワーク)
• Piece
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
8. ビューの実装
layoutビュー(system/applications/views/layout.php)
...略...
<body id="yourDomainName" class="indexBody">
<div id="page">
<div id="header"><?=$header?></div>
<div id="contents">
<div id="wrapper">
<div id="main"><?=$main?></div>
</div>
<div id="sub"><?=$sub?></div>
</div>
<div id="footer">...略...</div>
</div>
</body>
...略...
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
10. 認証の実装
Redux Auth 1.4a
➔GPL or MIT License
➔ http://code.google.com/p/reduxauth/
(参考)Neo base
➔http://neo-navi.net/top/neo_base
➔デモ http://neo-navi.net/neo_base/
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
11. JavaScriptの出力
JavaScriptファイルを出力するコントローラ
➔viewファイルにJavaScriptを書けば、
CIのヘルパーなどが使える
➔ブラウザにキャッシュされるように
ヘッダ出力
<script>タグを生成するヘルパー
➔ファイルが更新されたときのために
「?YYYYMMDDHHSS」を付加
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
12. JavaScriptの出力
viewとして処理したい場合
➔ <?=js('default')?>
• <script type="text/javascript"
src="http://example.jp/phwittr/js/default.js?
200810021129"></script>
ファイルをそのまま出力したい場合
➔ <?=js('jquery-1.2.6.min.js', FALSE)?>
• <script type="text/javascript"
src="http://example.jp/phwittr/js/jquery-1.2.6.min.j
s"></script>
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
13. JavaScriptの出力
URIルーティング
➔ application/config/routes.php
• $route['js/(S+)'] = "js/index/$1";
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
14. Ajaxの実装
「つぶやき」の投稿
➔jQueryを使用
➔$.post()メソッドでPOST
• $.post(URL, データ, コールバック関数, データタイプ);
➔受信用コントローラstatus/update()
• データを受信して検証し、保存
• 結果をjsonで返す
➔ページを部分的に更新
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
15. Ajaxの実装
viewファイル(system/applications/views/home/main.php)
<form action="#" name="whatdoing">
<div id="post">
<span class="whatdoing">イマナニシテル?</span>
<span class="textCount" id="js_textcount">140</span>
<textarea id="message" class="message"></textarea>
<p class="btn btnSpace">
<input type="button" name="twitter" id="twitter"
class="formBtn" value=" つぶやく " />
<input type="hidden" id="ticket" value="<?=$ticket?>" />
<input type="hidden" id="page_" value="<?=PAGE_OTHER?>" />
</p>
</div>
</form>
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
16. Ajaxの実装
JavaScriptファイル(system/applications/views/js/default.php)
/* つぶやきの投稿 */
$(function(){
$('#twitter').click(function(){
comment = $('#message').val();
$.post('<?=site_url('status/update')?>',
{msg: comment,
ticket: $('#ticket').val(),
p: $('#page_').val()},
addComment, 'json');
$('#message').val('').focus();
$("#js_textcount").text(140);
});
});
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
17. Ajaxの実装
controllerファイル(system/applications/controllers/status.php)
// Ajax つぶやき投稿の受信(一部省略されていますので、このままでは動作しません)
function update()
{
header('Content-Type: application/json; charset=UTF-8');
$ticket = $this->session->flashdata('ticket');
if ( ! $this->input->post('ticket') || $this->input->post('ticket') !== $ticket) {
echo json_encode(array('status' => 'ng', 'html' => 'チケットが異なります'));
exit;
}
$comment = $this->input->post('msg');
$page = $this->input->post('p');
if ($this->redux_auth->logged_in()) {
$this->load->model('Status_model', '', TRUE);
list($id, $reply_username) = $this->Status_model->
add_comment($user_id, $reply_username, $comment);
$html = $this->load->view('status/comment', $data, TRUE);
echo json_encode(array('status' => 'ok', 'html' => $html));
}
else {
echo json_encode(array('status' => 'ng',
'html' => 'ログインしていません'));
}
}
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
18. Ajaxの実装
JavaScriptファイル(system/applications/views/js/default.php)
function addComment(data){
if (data.status == 'ok') {
$('tbody:first').prepend(data.html);
$('p#last_comment').text(comment);
count = parseInt($('#side_count_post').text()) + 1;
$('#side_count_post').text(count);
}
else {
alert(data.html);
}
}
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
19. 140文字カウントの実装
JavaScriptファイル(system/applications/views/js/default.php)
/* エラーメッセージ */
$("#message").before('<p class="errorMsg">140字を超えました!</p>');
$(".errorMsg").css({display:"none"});
$("#message").bind("keyup blur submit",
function(){
if( $("#message").val().length > 140){
$("#js_textcount").text(140 - $("#message").val().length).css(
"color", "#FF0000");
$(".errorMsg").css({display: "block"});
$("#twitter").attr("disabled","disabed");
}
else {
$("#js_textcount").text(140 - $("#message").val().length ).css(
"color", "#CCCCCC");
if($("#message").val().length >= 1 && $("#message").val().length != ''){
$("#twitter").attr("disabled","");
}
else {
$("#twitter").attr("disabled","disabled");
}
$(".errorMsg").css({display:"none"});
}
}
);
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
20. ヘルパーの作成
pagerヘルパー
➔offset()、pager()
アイコン画像表示のHTML生成
➔picture()、my_pict()
投稿日時表示
➔posted_time()
HTMLエスケープ
➔h()
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
21. Pagerヘルパー
なにもの?
➔ページを移動する
➔home?page=2
➔「前へ」「後へ」移動
CIにはPaginationクラスがあるのに
➔Paginationクラスより低機能
➔GETを使っている
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
22. Pagerヘルパー
GETの使い方
➔ $config['uri_protocol']をPATH_INFOに設定する
➔ 必要な時にQUERY_STRINGをパース
➔ むろん、CIでは推奨されない方法!!
• セキュリティに自信のある人だけ使ってください
$this->load->helper('pager');
parse_str($_SERVER['QUERY_STRING'], $_GET);
$page = intval($this->input->get('page'));
$per_page = 20;
$offset = offset($page, $per_page);
$data->pager = pager($page, $per_page, $count, 'home');
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
23. 参考URL
Phwittrソースコード
➔ CodeRepos
• http://coderepos.org/share/browser/events/phpfra
mework/codeigniter/trunk
• http://svn.coderepos.org/share/events/phpframew
ork/codeigniter/trunk
テストサイト
➔ http://club.h14m.org:8000/kenji/phwittr/
Framework Fightまとめサイト
➔ http://labs.strk.jp/code-fight/wiki/
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
24. 日本CodeIgniterユーザ会
http://codeigniter.jp/
CodeIgniter日本語言語パック/
日本語ユーザガイド作成中
メンバー募集中
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
25. 書籍のお知らせ
日本初のCodeIgniter解説本
『CodeIgniter徹底入門』
2008年6月9日、
翔泳社より発売されました
http://codeigniter.jp/tettei/
Amazon.co.jpより ご静聴
ありがとうございました
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan