CodeIgniterによるPhwittr

CodeIgniterによるPhwittr
日本CodeIgniterユーザ会
Kenji Suzuki

2008/10/08
CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan

Phwittrとは？

 Tritterクローン
➔ミニブログ
➔「ひとこと」を投稿するサイト
 「PHP Framework Fight!」という企画もの


Phwittrとは？


PHP Framework Fight!とは？

 開催概要
➔ PHPで色々あるフレームワークで、同じ仕様のア
プリを実装し、ベンチマークを取り競争する。
➔ 処理速度だけでなく、開発工数（ジェネレータが
吐いた以外のコード量）などでも比較したい。
➔ 数あるPHPフレームワークの頂点に立つのはど
のれか、今ここにPHPフレームワークの熱いバト
ルが始まる！
 まとめサイト
➔ http://labs.strk.jp/code-fight/wiki/



 経過
➔ 4/22告知、5月末までに実装の予定
➔ 仕様がなかなか出てこない
➔ 出てきたが、細かいところまではない
➔ 企画自体、ポシャった？

• PHP界隈では、この話題はタブーに
➔ 8/18に突然、締切日が9月末に設定される
➔ 実装しはじめると、HTMLテンプレートすら足りない
➔ Twitterや先に動いていたSabelを参考に
テキトーに作る



 現状
➔ エントリー

• 14フレームワーク

• 17エントリ(バージョン違いなど)
➔ 一応できてるもの

• Sabel

• CodeIgniter
• 素のPHP(独自フレームワーク)

• Piece


ビューの実装


ビューの実装

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>
...略...

ビューの実装

homeコントローラ(system/applications/controllers/home.php)
...略...
$data->header = $this->load->view('home/header', '', TRUE);
$data->main = $this->load->view('home/main', $data, TRUE);
$data->sub = $this->load->view('home/side', $data, TRUE);
$this->load->view('layout', $data);
...略...


認証の実装

 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/


JavaScriptの出力

 JavaScriptファイルを出力するコントローラ
➔viewファイルにJavaScriptを書けば、
CIのヘルパーなどが使える
➔ブラウザにキャッシュされるように
ヘッダ出力
 <script>タグを生成するヘルパー
➔ファイルが更新されたときのために
「?YYYYMMDDHHSS」を付加


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>


JavaScriptの出力

 URIルーティング
➔ application/config/routes.php
• $route['js/(S+)'] = "js/index/$1";


Ajaxの実装

 「つぶやき」の投稿
➔jQueryを使用
➔$.post()メソッドでPOST
• $.post(URL, データ, コールバック関数, データタイプ);

➔受信用コントローラstatus/update()

• データを受信して検証し、保存

• 結果をjsonで返す
➔ページを部分的に更新


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>


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);
});
});


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' => 'ログインしていません'));
}
}


Ajaxの実装

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);
}
}


140文字カウントの実装

/* エラーメッセージ */
$("#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"});
}
}
);


ヘルパーの作成

 pagerヘルパー
➔offset()、pager()
 アイコン画像表示のHTML生成
➔picture()、my_pict()
 投稿日時表示
➔posted_time()
 HTMLエスケープ
➔h()


Pagerヘルパー

 なにもの？
➔ページを移動する
➔home?page=2
➔「前へ」「後へ」移動
 CIにはPaginationクラスがあるのに
➔Paginationクラスより低機能
➔GETを使っている


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');

参考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ユーザ会

 http://codeigniter.jp/

 CodeIgniter日本語言語パック/
日本語ユーザガイド作成中

 メンバー募集中


書籍のお知らせ

 日本初のCodeIgniter解説本
『CodeIgniter徹底入門』

 2008年6月9日、
翔泳社より発売されました

 http://codeigniter.jp/tettei/

Amazon.co.jpよりご静聴
ありがとうございました

CodeIgniterによるPhwittr

More Related Content

What's hot (12)

Viewers also liked (20)

Similar to CodeIgniterによるPhwittr (20)

More from kenjis (11)

Recently uploaded (8)

CodeIgniterによるPhwittr