Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to お手軽Ajaxアプリケーションの作り方
Similar to お手軽Ajaxアプリケーションの作り方 (20)
More from Shunji Konishi
More from Shunji Konishi (19)
お手軽Ajaxアプリケーションの作り方
- 6. 小西の回答 同じレイヤの用語で主語と述語が整合しているこ と ここでいうレイヤとは「アプリケーション」とか「ライブラ リ」といったプログラムの粒度のこと レイヤは「コンテキスト」と言い換えても良い コンテキスト=文脈 主語＝クラス、述語＝メソッドと考えて問題ない とりあえず頭の片隅にこれをおいて聞いてください。
- 7. 全体構成編
- 9. JavaScriptのインクルード UIの部品となるJavaScriptライブラリは山ほどある ので適当に使うものを拾ってくる ライブラリは個別にフォルダを作ってCSSやLICENSEファ イルなども含めて一つのフォルダ内にぶち込む ファイル名にバージョン番号が入っている場合はけずる こうすることでバージョンアップが容易になる(原則ライブ ラリは常に最新版を使う) JQuery, JQueryUIなどCDNがあるものは出来るだ けCDNのものを使う この場合バージョン番号をけずれないので、共通ヘッダ部 分でインクルードするなどして１カ所にまとめる
- 10. HTML内に書くJavaScript どんなアプリを作る場合でもワンパターン グローバル変数として「app」を宣言 ドキュメントReadyで アプリの引数の宣言(サーバーサイドでジェねる) ログインのあるアプリの場合はユーザー名やユーザーIDがここでの引数になる 数が多い場合はハッシュにする アプリのインスタンスの作成 アプリ本体の定義は別のjsファイルにする HTML内にはこれ以外 <script> のコードは書かない var app; （多くの場合HTMLは $(document).ready(function() { テンプレートで生成するので var name = "loganalyzer", 行番号が合わずデバッグが面倒） passRequired = true, offset = 9; app = new flect.app.loganalyzer.LogAnalyzer(name, passRequired, offset); }); </script>
- 11. Jsファイルの構成 最初に名前空間を形成するハッシュを生成 定義本体は無名関数の中で行う Javaのパッケージみたいなもの 別になくても良いが毎回行うように習慣づける 出来るだけGlobal名前空間を汚さない アプリケーションクラスを定義 if (typeof(flect) == "undefined") flect = {}; if (typeof(flect.app) == "undefined") flect.app = {}; if (typeof(flect.app.loganalyzer) == "undefined") flect.app.loganalyzer = {}; (function ($) { … flect.app.loganalyzer.LogAnalyzer = function(name, passRequired, timeOffset) { … } })(jQuery);
- 12. 無名関数内の構成 無名関数内の定義もほぼワンパターンで以下のよう になる 順不同 JavaScriptは同一ブロック内で定義した変数・関数は定義順に 関わらず参照できるので (function ($) { 部品となるクラスの定義 列挙型の定義 アプリケーション本体の定義 })(jQuery);
- 13. アプリケーションクラス いわゆるコントローラ コンストラクタ内でやること ボタンとfunctionのバインド Calendar等のUIオブジェクトの生成 部品クラスの生成 公開メソッドの定義($.extend(this, {…})) 公開メソッドはどこで使用するか？(後述) 部品クラス インラインフレーム内のスクリプトから実行
- 15. 列挙型の生成 コンストラクタの引数はハッシュの配列 ハッシュにはname属性が必須 あとは任意に必要な情報をハッシュに含めてよい //Enums var CacheStatus = new Enum([ { "name" : "Unprocessed"}, { "name" : "Ready"}, { "name" : "Found"}, { "name" : "NotFound"}, { "name" : "Error"} ]); var GridKind = new Enum([ { "name" : "Count", "path" : "/logcount"}, { "name" : "Time", "path" : "/responsetime", "drawOnLoad" : "log-2"}, ]); //使用例 var status = CacheStatus.fromName($(“#selStatus”).val()); if (status == CacheStatus.Unprocessed) { … }
- 16. 部品クラス コンストラクタの引数はアプリケーションクラスとラップ する要素(jQueryオブジェクト)とすることが多い 要素のセレクタ参照は１回のみとしあとは使い回す 必要に応じて引数は増える 中身は以下のような感じ function Calendar(app, div) { 変数宣言 クロージャ関数定義 $.extend(this, {…})で関数を公開 } ここで公開されない関数はprivateとなる
- 17. $.extendによるメソッド公開 function Chart(app, elementId) { var currentData = currentKind = null, lineCol = "ms"; ← 最初に変数宣言 function lineName() { ← 内部で使用する関数定義がずらずらと続く ... } function lineColor() { ... } function axis2Name() { ... } function draw(kind, data) { ... } function changeLine() { ... } $.extend(this, { ← 外部に公開する関数の定義 "draw" : draw, "changeLine" : changeLine }); クロージャを公開する ことでクラスのように扱 えるようにしているので クロージャスタイルと 呼んでいる }
- 20. JavaScriptでのgetter/setter jQueryスタイルに統一 jQueryスタイルとは 何故ならjQueryは必ず使うので自分のコードとjQueryでスタ イルが違うのが気持ち悪い GetterとSetterが同じメソッド名で引数の有無で処理を分岐 Setterはthisを返す アプリ内でスタイルが統一されていれば何でも良いと思う。 var current; function currentDate(d) { if (d !== undefined) { current = d; return this; } else { return current; } }
- 21. Ajax編
- 23. HttpStatusコードは何にするか？ 原則エラーが発生した場合でもステータスコードは200で 返し、ボディ内の情報にエラー情報を含めるようにする 例外 サーバーサイドのバグ – 500 DB、ネットワーク等の障害 – 500 or 503 引数の不正などクライアントサイドの不適切なリクエスト – 400 GETでかつリソースアイデンティティがURLの一部となっている 場合のNotFound – 404 例) 商品詳細画面 - /product/1 自前のスクリプトからは200以外のコードが返ることを想 定したリクエストは発行しない 逆に言えば200以外のステータスがかえってきた場合はバグ がある可能性が高い
- 24. レスポンスとして何を返すか？ だいたい以下の３パターン JSON(content-type=application/json) テキスト(content-type=text/plain) HTML(content-type=text/html) コンテントタイプは必ず適切に設定する たいていはフレームワークがやってくれるはず JSONを自前でStringとして組み立てるとほとんどの 場合デフォルトで「text/plain」となるので注意が必 要
- 30. ダウンロード／アップロード編
- 32. アップロード - Form こんな感じ 隠しフォームに必要なパラメータをhiddenで配置 Targetに非表示のiframeを指定 <form id="uploadForm" action="/xxxx" method="post" enctype="multipart/form-data" target="uploader” style="position:absolute;top:0px;left:-1000px;"> <input type="hidden" id="upload_id" name="id"/> <input type="file" id="upload_file" name="file” /> </form> <iframe id="uploader" name="uploader" src=”” style="width:0px;height:0px;border:0px;"></iframe>
- 33. アップロード – Script ボタンを押した時にアップロードを実行するならこんな感じ ボタンのonClickでファイルパラメータにnullを設定してクリックイベントをfire ファイル選択ダイアログが表示される ファイルパラメータのonChangeでフォームをサブミット $(“#btnUpload”).button().click(function() { $("#upload_id").val(…); $("#upload_file").val(null).click(); }); $("#upload_file").change(function() { var filename = $(this).val(); if (filename) { $("#uploadForm")[0].submit(); } });
- 34. アップロード - Response アップロードのレスポンスはこんな感じ ScriptのみのHTML 自分に親frameがいることを確認し、親フレームにグローバル変数と して「app」があることを確認し、そのメソッドを実行 実行する処理がここに直接記述されず、appのメソッドになっていると ころが重要 ロジックを分散させない <html><body> <script> var ret = {//サーバーサイドで生成}; if (window.parent && window.parent.app) { window.parent.app.handleUpload(ret); } </script> </body></html>
- 35. 国際化編
- 36. 言語ごとに別のJSをインクルード 太古の昔からワンパターン サーバーサイドでHTTPヘッダ「accept-language」 からブラウザの言語を判断 Cookieに言語を持たせる場合もある 言語ごとにインクルードするスクリプトを差し替える <script src='/i18n/ja/messages.js'></script>
- 37. スクリプトの中身 ハッシュにひたすらメッセージを定義 Format用の関数を定義しておくと便利 if (typeof(flect) == "undefined") flect = {}; if (typeof(flect.app) == "undefined") flect.app = {}; if (typeof(flect.app.loganalyzer) == "undefined") flect.app.loganalyzer = {}; flect.app.loganalyzer.MSG = { "name" : "名前", … "format" : function(fmt) { for (i = 1; i < arguments.length; i++) { var reg = new RegExp("¥¥{" + (i - 1) + "¥¥}", "g") fmt = fmt.replace(reg,arguments[i]); } return fmt; } }
- 40. たとえばCalendar function highlight(d) { calendar.find(".fc-state-highlight").removeClass("fc-state-highlight"); calendar.find("td[data-date=" + formatDate(d) + "]").addClass("fc-state-highlight"); } 上のコードはCalendar上で選択された日付をハイライトさせる処 理 以前の日付から色づけ用のクラスを取り除いて選択された日付にそ のスタイルを付加 なんならワンライナーでも書ける 呼び出し箇所は一カ所だけ しかしそれでも名前をつけてメソッド化するべき 何故ならアプリの要件は「カレンダーを、ハイライトする」ことだから どうやって色付けするかはアプリレイヤの話ではない アプリレイヤのコードを追っている時にそれ以外のコードが挟まると 思考が中断される
- 45. 実例 – 再認証チェック ユーザーログインを伴うアプリで ある処理を実行するためにはユーザーにパスワードの再入力を行わ せる必要がある ユーザーが再認証済みであるかどうかはキャッシュにオブジェクトが あるかどうかで判断 再認証の有効期間は10分 最初のはアプリの話で、残りは実装の話 上に書いたとおりに作れば以下のようなコードになる 「ユーザー」が主語で「再認証済みか」が述語 Public class User { private int userId; … public boolean isReauthenticated() { return Cache.get(“reauth-” + this.userId) != null; } }
- 46. 実例 ー 再認証チェック しかし実際に書かれたのはこんな感じのコード CacheKeyはキャッシュのキーを管理するクラス … if (Cache.get(CacheKey.getReauthenticationKey(user.getId())) != null) { … } 言葉で説明する時にはあった「再認証」という用語が省略されて直接 キャッシュを読みだしている 間違ってない。間違ってないし関係者は全員何がやりたいのかはわかる んだけど。。。コードを読むのに脳内コンテキストスイッチが発生する コンテキストスイッチはコストの高い処理なので処理内容を理解するまで にかかる時間はわずかながら増大するし、疲れる 処理内容を言葉で説明する際に「再認証」で済む所を毎回「キャッ シュに再認証のキーがあったら」と言っていたらものすごいストレス になるはず 要するにこれは最適化バグのようなもので、コンテキストスイッチをでき る限り回避できるコードを書くことが重要