![Copyright (C) 2013 M.Ichijo All Rights. Reserved
※基本処理として、スクリプトで何らかの加工をする場合に、必ず初期処理として対象のチェックを行
う
init : function(){
this.container = $(this.target).not("[" + STATUS_COMPLETE + "]");
// 未処理の対象がない場合は終了させる
if(this.container.length <= 0) return;
this.status = true;
},
※加工が終わったら対象のDOMに終わりを示す属性を着ける
complete : function(){
this.container.attr(STATUS_COMPLETE,"true");
},
script](https://image.slidesharecdn.com/uploadhtml5toka4020130725-130729082047-phpapp01/85/JS-49-320.jpg)
“観察”から始める闯厂コーディング
- 1. “観察”から始める JSコーディング スマホサイトの制作実話を元に Copyright (C) 2013 M.Ichijo All Rights. Reserved 2013.07.25 M.ICHIJO@SANKEI-DIGITAL
- 2. 自己紹介 ? IA兼フロントエンドエンジニア兼Web ディレクター。今ではすっかり遊軍状態。 ? Slerで業務システム→携帯サイト制作ベ ンチャー→修行の旅→産経デジタル。 ? ほとんどが運用と隣合わせの開発現場の 現場監督官人生。 ? ニュースサイト群を相手に開発だけでな く、企画サポート、分析に邁進中。 ? html5jやGTUG Girlsでスタッフ こんにちは、メイドです。 写真はアレですが、 通常運転中はマジメにしています。 Copyright (C) 2013 M.Ichijo All Rights. Reserved HTML5 conference 2012 twitter：@ichijo3 email：usa132006@gmail.com
- 3. このセッション内容 ×実装テクニック紹介 ○制作スキルの紹介 Webサイト制作のJSに関して Copyright (C) 2013 M.Ichijo All Rights. Reserved 「テクニック」 技術、手法、やり方 「スキル」 技術、手法、やり方 を 状況に応じて扱う力
- 4. アジェンダ ? 何のために“Webサイト”を作るのか？ ? 公開サイトのJS制作は4ステップ ? 何を“観察”する？ ? 5つの実装例－どんな“観察”結果反映されているか？ ? 最後に Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 5. 何のために “WEBサイト” を作るのか？ 趣味でなければビジネスです。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 6. 仕事で“WEBサイト”なら「ビジネス」 Copyright (C) 2013 M.Ichijo All Rights. Reserved 仕事で公開サイトを作りサービス提供することは ビジネスの一環。 利益を出さねばなりません。出し続けなければなりません。 つまり前提として サービスが不用意に止まらせてはいけない わけです。 止まれば機会損失です。
- 7. 仕事で“WEBサイト”なら「ビジネス」 Copyright (C) 2013 M.Ichijo All Rights. Reserved もし “失敗しましたっorz” でサービスと止めたとしたら、
- 9. 仕事で“WEBサイト”なら「ビジネス」 Copyright (C) 2013 M.Ichijo All Rights. Reserved サービスが不用意に止まらせない。 そのために制作サイドは 「想定外」をなくしていくことが必要。
- 10. そこで制作に必要になるのが Copyright (C) 2013 M.Ichijo All Rights. Reserved 観察
- 11. 公開サイトの JS制作は4ステップ これ欲しい → 作る ではありません。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 12. まずは要求ありき Copyright (C) 2013 M.Ichijo All Rights. Reserved 企画 こんなことがした い！ JS制作
- 13. JS制作 Copyright (C) 2013 M.Ichijo All Rights. Reserved 企画 こんなことがした い！ 実装 作りました！ でも、とにかく作ればOKではない。
- 14. JS制作 Copyright (C) 2013 M.Ichijo All Rights. Reserved 企画 こんなことがした い！ 観察 そこで4ステップで 設計 実装検証
- 15. JS制作 Copyright (C) 2013 M.Ichijo All Rights. Reserved 企画 こんなことがした い！ 観 察 そこで4ステップで 設計 実装検証
- 16. 何を“観察”する？ 「サイト」と「ユーザー」、二つの要素をじっくり観察。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 17. ２つの要素に分けて観察 Copyright (C) 2013 M.Ichijo All Rights. Reserved サイト インフラ コンテンツ ユーザー アクション
- 18. 「サイト」のインフラは？ ? ページ生成の仕組み → htmlができる？動的に表示？ ? キャッシュの扱い → CDNは？ ? URL構成→ スマホページURLは独立？発行数は？ ? 外部サービス対応 → メインデータは？正規URLは？SEOは？ ? サイト分析の方法 → アナリティクスは？リアルタイム？ ? システムメンテナンス方法 → 誰がテンプレートを修正？ Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 19. ページ生成の仕組み Copyright (C) 2013 M.Ichijo All Rights. Reserved CMS HTML HTML上の何かを変えたくても、 サイト全体を一気に変える事 は 不可能 出力済みファイルは「置換」 作業が必要 分かること
- 20. ページ生成の仕組み－ニュース記事のファイル数 Copyright (C) 2013 M.Ichijo All Rights. Reserved ある1日 昨年末 政治ジャンル 約200ページ 経済ジャンル 約160ページ 事件ジャンル 約30ページ 世界ジャンル 約35ページ 計 約430ページ 計 約180万ページ
- 21. URL構成 Copyright (C) 2013 M.Ichijo All Rights. Reserved CMS スマホ HTML /smp/～ 分かること PC HTML /～ スマホページが どんなデバイスで見られるか は 不確定
- 22. 外部サービス対応 Copyright (C) 2013 M.Ichijo All Rights. Reserved CMS HTML HTMLの中に必要な情報は入っ ていてほしい 発行したURLは 全て見つけてほしい 分かること 検索 エンジ ン
- 23. 「サイト」のコンテンツは？ ? サービスの基本 → どんなコンテンツが重要？ ? 情報の変化 → コンテンツの追加の頻度は？ ? 更新タイミング → リアルタイムにしたい？ ? 分類の構成 → ジャンルは増える？ ? 広告の構成 → どんな広告をどこに入れる？ ? 細かいデザイン調整 → デバイスで分けたい時がある？ ? サイト一括更新 → 一括更新を成立したいのは？ Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 24. サービスの基本 Copyright (C) 2013 M.Ichijo All Rights. Reserved “記事”を示すURLへアクセ スしたら HTML内にその情報があるべし “記事”を示すURLは誰が見 ても拾えるようすべし 分かること “記事” トップ
- 25. 情報の変化 Copyright (C) 2013 M.Ichijo All Rights. Reserved 同一ページに同じデザインの パーツがでないとは限らない コピー＆ペーストで使われる こともしばしば 分かること 事件 トップ 事件 トップ 政治 ???3ヵ月 後
- 26. 細かいデザイン調整 Copyright (C) 2013 M.Ichijo All Rights. Reserved ビジュアル上の微調整で快適 閲覧を目指す UIの違いを適切な文言で 表現する 分かること iOS Android ホーム へ ブック マーク へ
- 27. 「ユーザー」のアクションは？ ? 閲覧環境 → デバイス、電波状況は？ ? 見ている時間 → 一日中、朝、昼、晩、分断された時間？ ? 見ている状態 → さっと見ている？じっくり見ている？ ? 見ている場所 → 室内、室外、イベント会場、自然の 中???etc ？ ? 見ている時の気分 → 暇をつぶしたい、急いで確認した い???etc ？ Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 28. 「ユーザー」のアクションは？－観察対象は２つある Copyright (C) 2013 M.Ichijo All Rights. Reserved アナリティク ス 数字 会社 社内の人
- 29. 閲覧環境－iOSとAndroidのバージョン割合 Copyright (C) 2013 M.Ichijo All Rights. Reserved iOS Android 6.1.4 6.1.3 5.1.1 4.0.3 4.1.2 2.3.3 2.3.5 4.0.4 2.3.4
- 30. 見ている状態－“長時間”“じっくり”見ていない Copyright (C) 2013 M.Ichijo All Rights. Reserved 滞在時間 直帰率 平均 1分21秒 56.40%
- 31. ５つの実装例 -どんな”観察“結果 が 反映されているか？ 複合して反映されることも Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 32. Copyright (C) 2013 M.Ichijo All Rights. Reserved 発生した要求とコードを先に 紹介します。（コードはポイ ントのみ） コードの組み方を決めた“観 察”結果はその後にご紹介し ます。
- 33. ニュースのリスト、 ページングじゃなくて ツイッターみたいに 画面変えずに 内容を表示したい ボタンぽっちりで続きを表示したいんだけど。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 34. Copyright (C) 2013 M.Ichijo All Rights. Reserved HTML <section class="listUpdater"> <ul class="list-source"> ここにコンテンツのコード </ul> <div class="js-holder"></div> <div class="linkTo paging list-navigator"><a class="prev" href="#">前のページ</a><a class="next" href="XXXX.html">次のページ</a></div> <script src=/slideshow/upload-html5toka-4020130725/24727367/"/js/listUpdater.js"></script> </section>
- 35. Copyright (C) 2013 M.Ichijo All Rights. Reserved HTML <section class="listUpdater"> <ul class="list-source"> ここにコンテンツのコード </ul> <div class="js-holder"></div> <div class="linkTo paging list-navigator"><a class="prev" href="#">前のページ</a><a class="next" href="XXXX.html">次のページ</a></div> <script src=/slideshow/upload-html5toka-4020130725/24727367/"/js/listUpdater.js"></script> </section> scriptの処理対象DOM の指定 追記して取り込みた いソース部分の指定 ソースの追記先 次ページへのリンク 先が取り込み先URL
- 36. Copyright (C) 2013 M.Ichijo All Rights. Reserved ※ 「次ページへ」リンクを取得 var nextTarget = $(".next",nav); ※取り込みボタン作成 var btn = $("<button />").attr("type","button").attr("data-action-role","updateList").text("さらに読み込む"); ※ボタンに取り込み先URLを属性としてセットして、クリックで非同期通信 btn.attr("data-next-target",nextTarget.attr("href")); // 取り込み処理本体 function updateList(){ var next = btn.attr("data-next-target"); var jqxhr = $.get(next).done(update); } btn.click(updateList); ※取り込みつつ、続きが必要かを見る var nextTarget = $(".list-navigator .next",list); script
- 37. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 HTMLの中に必要な情報は入っていてほしい 発行したURLは全て見つけてほしい 分かること サイト：外部サービス対応 “記事”を示すURLへアクセスしたら HTML内にその情報があるべし “記事”を示すURLは誰が見ても拾えるようすべし 分かること サイト：サービスの基本 YES YES
- 38. ページ表示速度を 速めたい すぐに読み始めたいんだけど。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 39. Copyright (C) 2013 M.Ichijo All Rights. Reserved HTML <article class="top-news"> <a href="#" class="clearfix"> <p class="photo image-loading" data-photo-source="./sample/photo/test8.jpg" data- photo-size="size-thumb1"></p> <h1>記事タイトル</h1> <p>記事本文</p> </a> </article>
- 40. Copyright (C) 2013 M.Ichijo All Rights. Reserved HTML <article class="top-news"> <a href="#" class="clearfix"> <p class="photo image-loading" data-photo-source="./sample/photo/test8.jpg" data- photo-size="size-thumb1"></p> <h1>記事タイトル</h1> <p>記事本文</p> </a> </article> サムネイル画像をimg で追記しないで、pの 属性に指定
- 41. Copyright (C) 2013 M.Ichijo All Rights. Reserved ※ 後からロードの対象をチェック var common = new SKD.ui.base.common(".photo.image-loading"); ※まとめて取り込み → ここは Imageオブジェクトを使って、onloadタイミングで対象を一括取り込み script
- 42. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 HTMLの中に必要な情報は入っていてほしい → 記事のイメージとして強調はしているが、これ単 体では情報を追加していない。（altが記事タイトル になるくらい） 分かること サイト：外部サービス対応 目的の情報を早く → ここで重要なのは記事が何かであり、次へ進める こと。タイトルとURLになる 分かること ユーザー：見ている状態 NO YES 分かること サイト：細かいデザイン調整 高解像の画面にも対応したい → 1ファイルで対応するとすると、もともと大きめ サイズを縮小 YES
- 43. ロード完了後に 強制スクロールアップ は やめて！ 以前は広告の関係もありまして。。。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 44. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何故にスクロールアップしたいのか、 といえば、URLフィールドを隠すため。 ? スクロールできる高さがあるページ で ? 1pxでもスクロールしたら ? フィールドは消える 仕組みを利用しています。 重要なのは 「1pxでもスクロールしたら」 で、ユーザーがすでにしていたら実行不 要です。
- 45. Copyright (C) 2013 M.Ichijo All Rights. Reserved ※強制スクロールアップするかどうかの事前チェック var pos = document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop; if(pos) { return; } ※スクロール実行、1px下へ window.scrollTo(0,1); script
- 46. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 目的の情報を早く → ページが表示し始めたら、読み終わらなくても下 へスクロールをするもの。途中で強制的に上にあがっ たらフラストレーション。 分かること ユーザー：見ている状態 YES
- 47. もしかしたら後から トップページに あのパーツを 追加するかも 同じ見せ方でいいんで、別ジャンル増やすかも Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 48. Copyright (C) 2013 M.Ichijo All Rights. Reserved HTML <section class="listUpdater"> <ul class="list-source"> ここにコンテンツのコード </ul> <div class="js-holder"></div> <div class="linkTo paging list-navigator"><a class="prev" href="#">前のページ</a><a class="next" href="XXXX.html">次のページ</a></div> <script src=/slideshow/upload-html5toka-4020130725/24727367/"/js/listUpdater.js"></script> </section> scriptの処理対象DOM の指定 パーツ単位でjsをコー ルする
- 49. Copyright (C) 2013 M.Ichijo All Rights. Reserved ※基本処理として、スクリプトで何らかの加工をする場合に、必ず初期処理として対象のチェックを行 う init : function(){ this.container = $(this.target).not("[" + STATUS_COMPLETE + "]"); // 未処理の対象がない場合は終了させる if(this.container.length <= 0) return; this.status = true; }, ※加工が終わったら対象のDOMに終わりを示す属性を着ける complete : function(){ this.container.attr(STATUS_COMPLETE,"true"); }, script
- 50. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 テンプレート修正者はスクリプト作成者ではなく、ど こになにをおかないと動かない、という負雑さは排除 したい 分かること サイト：システムメンテナンス方法 目的の情報を早く → パーツ毎に完成させて待たせない 分かること ユーザー：見ている状態 YES YES 分かること サイト：情報の変化 同一ページに同じデザインのパーツがでないとは限ら ない →増やせるときに簡単に増やしたいので、今はなくて も、後から増えることも YES
- 51. 過去ファイルの置換は なるべく避けたい 1行でも対象ファイルが多ければ一苦労 Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 52. Copyright (C) 2013 M.Ichijo All Rights. Reserved 広告でも事例がありましたが、 今回はGoogleアナリティクスのタグにて。 通常のコードはHTMLに<script>タグを 直接貼り付けになっています。 弊社ではトラッキングコード自体、カス タマイズしており、改善目的でコードを たまに書き換えています。 HTML直接だと書き換えが大変です。
- 53. Copyright (C) 2013 M.Ichijo All Rights. Reserved <script src=/slideshow/upload-html5toka-4020130725/24727367/“/配信サーバー/js/analytics/対象サイトドメイン/ga.js"></script> HTML
- 54. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 出力済みファイルは「置換」作業が必要 → 書き換え自体が発生しないように対応 分かること サイト：ページ生成の仕組み YES
- 55. 最後に コードを考える前に、状況把握 Copyright (C) 2013 M.Ichijo All Rights. Reserved
- 56. テクニックに目が行きがちですが Copyright (C) 2013 M.Ichijo All Rights. Reserved 恐ろしいのは機会損失。 トラブルもNGですが、 ビジネス要求にすぐ対応できないのもNG 研究や個人のサイトでない限り、 サービス提供を止めないために 必要なテクニックを選択するスキルを磨いておき たい。
- 57. Copyright (C) 2013 M.Ichijo All Rights. Reserved Thanks！