CodeIgniterによるPhwittr

10,112 views
10,034 views

Published on

CodeIgniterでのTwitterクローンの作成について。第18回 FLOSS桜山<http: />でのプレゼン資料。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,112
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CodeIgniterによるPhwittr

  1. 1. CodeIgniterによるPhwittr 日本CodeIgniterユーザ会 Kenji Suzuki 2008/10/08CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  2. 2. Phwittrとは?  Tritterクローン ➔ミニブログ ➔「ひとこと」を投稿するサイト  「PHP Framework Fight!」という企画ものCodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  3. 3. Phwittrとは?CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  4. 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. 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. 6. PHP Framework Fight!とは?  現状 ➔ エントリー • 14フレームワーク • 17エントリ(バージョン違いなど) ➔ 一応できてるもの • Sabel • CodeIgniter • 素のPHP(独自フレームワーク) • PieceCodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  7. 7. ビューの実装CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  8. 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
  9. 9. ビューの実装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);...略... CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  10. 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. 11. JavaScriptの出力  JavaScriptファイルを出力するコントローラ ➔viewファイルにJavaScriptを書けば、 CIのヘルパーなどが使える ➔ブラウザにキャッシュされるように ヘッダ出力  <script>タグを生成するヘルパー ➔ファイルが更新されたときのために 「?YYYYMMDDHHSS」を付加CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. Pagerヘルパー  なにもの? ➔ページを移動する ➔home?page=2 ➔「前へ」「後へ」移動  CIにはPaginationクラスがあるのに ➔Paginationクラスより低機能 ➔GETを使っているCodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  22. 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. 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. 24. 日本CodeIgniterユーザ会  http://codeigniter.jp/  CodeIgniter日本語言語パック/ 日本語ユーザガイド作成中  メンバー募集中CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  25. 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

×