CodeIgniterによるPhwittr
Upcoming SlideShare
Loading in...5
×
 

CodeIgniterによるPhwittr

on

  • 8,376 views

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

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

Statistics

Views

Total Views
8,376
Views on SlideShare
8,375
Embed Views
1

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 1

http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CodeIgniterによるPhwittr CodeIgniterによるPhwittr Presentation Transcript

  • CodeIgniterによるPhwittr 日本CodeIgniterユーザ会 Kenji Suzuki 2008/10/08CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  • Phwittrとは?  Tritterクローン ➔ミニブログ ➔「ひとこと」を投稿するサイト  「PHP Framework Fight!」という企画ものCodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  • Phwittrとは?CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  • 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
  • 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
  • PHP Framework Fight!とは?  現状 ➔ エントリー • 14フレームワーク • 17エントリ(バージョン違いなど) ➔ 一応できてるもの • Sabel • CodeIgniter • 素のPHP(独自フレームワーク) • PieceCodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  • ビューの実装CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  • ビューの実装 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
  • ビューの実装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
  • 認証の実装  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
  • JavaScriptの出力  JavaScriptファイルを出力するコントローラ ➔viewファイルにJavaScriptを書けば、 CIのヘルパーなどが使える ➔ブラウザにキャッシュされるように ヘッダ出力  <script>タグを生成するヘルパー ➔ファイルが更新されたときのために 「?YYYYMMDDHHSS」を付加CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  • 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
  • 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
  • Ajaxの実装  「つぶやき」の投稿 ➔jQueryを使用 ➔$.post()メソッドでPOST • $.post(URL, データ, コールバック関数, データタイプ); ➔受信用コントローラstatus/update() • データを受信して検証し、保存 • 結果をjsonで返す ➔ページを部分的に更新CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  • 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
  • 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
  • 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
  • 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
  • 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
  • ヘルパーの作成  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
  • Pagerヘルパー  なにもの? ➔ページを移動する ➔home?page=2 ➔「前へ」「後へ」移動  CIにはPaginationクラスがあるのに ➔Paginationクラスより低機能 ➔GETを使っているCodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  • 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
  • 参考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
  • 日本CodeIgniterユーザ会  http://codeigniter.jp/  CodeIgniter日本語言語パック/ 日本語ユーザガイド作成中  メンバー募集中CodeIgniter and its logo are property of EllisLab Inc CodeIgniter Users Group in Japan
  • 書籍のお知らせ  日本初の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