Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
“観察”から始める
JSコーディング
スマホサイトの制作実話を元に
Copyright (C) 2013 M.Ichijo All Rights. Reserved
2013.07.25 M.ICHIJO@SANKEI-DIGITAL
自己紹介
• IA兼フロントエンドエンジニア兼Web
ディレクター。今ではすっかり遊軍状態。
• Slerで業務システム→携帯サイト制作ベ
ンチャー→修行の旅→産経デジタル。
• ほとんどが運用と隣合わせの開発現場の
現場監督官人生。
• ニュ...
このセッション内容
×実装テクニック紹介
○制作スキルの紹介
Webサイト制作のJSに関して
Copyright (C) 2013 M.Ichijo All Rights. Reserved
「テクニック」
技術、手法、やり方
「スキル」
技術...
アジェンダ
• 何のために“Webサイト”を作るのか?
• 公開サイトのJS制作は4ステップ
• 何を“観察”する?
• 5つの実装例-どんな“観察”結果反映されているか?
• 最後に
Copyright (C) 2013 M.Ichijo A...
何のために
“WEBサイト”
を作るのか?
趣味でなければビジネスです。
Copyright (C) 2013 M.Ichijo All Rights. Reserved
仕事で“WEBサイト”なら「ビジネス」
Copyright (C) 2013 M.Ichijo All Rights. Reserved
仕事で公開サイトを作りサービス提供することは
ビジネスの一環。
利益を出さねばなりません。出し続けなければ...
仕事で“WEBサイト”なら「ビジネス」
Copyright (C) 2013 M.Ichijo All Rights. Reserved
もし
“失敗しましたっorz”
でサービスと止めたとしたら、
仕事で“WEBサイト”なら「ビジネス」
Copyright (C) 2013 M.Ichijo All Rights. Reserved
サービスが不用意に止まらせない。
そのために制作サイドは
「想定外」をなくしていくことが必要。
そこで制作に必要になるのが
Copyright (C) 2013 M.Ichijo All Rights. Reserved
観察
公開サイトの
JS制作は4ステップ
これ欲しい → 作る ではありません。
Copyright (C) 2013 M.Ichijo All Rights. Reserved
まずは要求ありき
Copyright (C) 2013 M.Ichijo All Rights. Reserved
企画
こんなことがした
い!
JS制作
JS制作
Copyright (C) 2013 M.Ichijo All Rights. Reserved
企画
こんなことがした
い!
実装
作りました!
でも、とにかく作ればOKではない。
JS制作
Copyright (C) 2013 M.Ichijo All Rights. Reserved
企画
こんなことがした
い!
観察
そこで4ステップで
設計
実装検証
JS制作
Copyright (C) 2013 M.Ichijo All Rights. Reserved
企画
こんなことがした
い!
観 察
そこで4ステップで
設計
実装検証
何を“観察”する?
「サイト」と「ユーザー」、二つの要素をじっくり観察。
Copyright (C) 2013 M.Ichijo All Rights. Reserved
2つの要素に分けて観察
Copyright (C) 2013 M.Ichijo All Rights. Reserved
サイト
インフラ
コンテンツ
ユーザー
アクション
「サイト」のインフラは?
• ページ生成の仕組み → htmlができる?動的に表示?
• キャッシュの扱い → CDNは?
• URL構成→ スマホページURLは独立?発行数は?
• 外部サービス対応 → メインデータは?正規URLは?SEOは...
ページ生成の仕組み
Copyright (C) 2013 M.Ichijo All Rights. Reserved
CMS
HTML
HTML上の何かを変えたくても、
サイト全体を一気に変える事
は
不可能
出力済みファイルは「置換」
作業が...
ページ生成の仕組み-ニュース記事のファイル数
Copyright (C) 2013 M.Ichijo All Rights. Reserved
ある1日 昨年末
政治ジャンル 約200ページ
経済ジャンル 約160ページ
事件ジャンル 約30ペ...
URL構成
Copyright (C) 2013 M.Ichijo All Rights. Reserved
CMS
スマホ
HTML
/smp/~
分かること
PC
HTML
/~ スマホページが
どんなデバイスで見られるか
は
不確定
外部サービス対応
Copyright (C) 2013 M.Ichijo All Rights. Reserved
CMS
HTML
HTMLの中に必要な情報は入っ
ていてほしい
発行したURLは
全て見つけてほしい
分かること
検索
エンジ
ン
「サイト」のコンテンツは?
• サービスの基本 → どんなコンテンツが重要?
• 情報の変化 → コンテンツの追加の頻度は?
• 更新タイミング → リアルタイムにしたい?
• 分類の構成 → ジャンルは増える?
• 広告の構成 → どんな広告...
サービスの基本
Copyright (C) 2013 M.Ichijo All Rights. Reserved
“記事”を示すURLへアクセ
スしたら
HTML内にその情報があるべし
“記事”を示すURLは誰が見
ても拾えるようすべし
分かる...
情報の変化
Copyright (C) 2013 M.Ichijo All Rights. Reserved
同一ページに同じデザインの
パーツがでないとは限らない
コピー&ペーストで使われる
こともしばしば
分かること
事件
トップ
事件
ト...
細かいデザイン調整
Copyright (C) 2013 M.Ichijo All Rights. Reserved
ビジュアル上の微調整で快適
閲覧を目指す
UIの違いを適切な文言で
表現する
分かること
iOS Android
ホーム
へ
...
「ユーザー」のアクションは?
• 閲覧環境 → デバイス、電波状況は?
• 見ている時間 → 一日中、朝、昼、晩、分断された時間?
• 見ている状態 → さっと見ている?じっくり見ている?
• 見ている場所 → 室内、室外、イベント会場、自然の...
「ユーザー」のアクションは?-観察対象は2つある
Copyright (C) 2013 M.Ichijo All Rights. Reserved
アナリティク
ス
数字
会社
社内の人
閲覧環境-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
...
見ている状態-“長時間”“じっくり”見ていない
Copyright (C) 2013 M.Ichijo All Rights. Reserved
滞在時間 直帰率
平均 1分21秒 56.40%
5つの実装例
-どんな”観察“結果
が
反映されているか?
複合して反映されることも
Copyright (C) 2013 M.Ichijo All Rights. Reserved
Copyright (C) 2013 M.Ichijo All Rights. Reserved
発生した要求とコードを先に
紹介します。(コードはポイ
ントのみ)
コードの組み方を決めた“観
察”結果はその後にご紹介し
ます。
ニュースのリスト、
ページングじゃなくて
ツイッターみたいに
画面変えずに
内容を表示したい
ボタンぽっちりで続きを表示したいんだけど。
Copyright (C) 2013 M.Ichijo All Rights. Reserved
Copyright (C) 2013 M.Ichijo All Rights. Reserved
HTML
<section class="listUpdater">
<ul class="list-source">
ここにコンテンツのコード
...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
HTML
<section class="listUpdater">
<ul class="list-source">
ここにコンテンツのコード
...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
※ 「次ページへ」リンクを取得
var nextTarget = $(".next",nav);
※取り込みボタン作成
var btn = $("...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
何の結果が反映した方
HTMLの中に必要な情報は入っていてほしい
発行したURLは全て見つけてほしい
分かること
サイト:外部サービス対応
“記事...
ページ表示速度を
速めたい
すぐに読み始めたいんだけど。
Copyright (C) 2013 M.Ichijo All Rights. Reserved
Copyright (C) 2013 M.Ichijo All Rights. Reserved
HTML
<article class="top-news">
<a href="#" class="clearfix">
<p class="p...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
HTML
<article class="top-news">
<a href="#" class="clearfix">
<p class="p...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
※ 後からロードの対象をチェック
var common = new SKD.ui.base.common(".photo.image-loadin...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
何の結果が反映した方
HTMLの中に必要な情報は入っていてほしい
→ 記事のイメージとして強調はしているが、これ単
体では情報を追加していない。(...
ロード完了後に
強制スクロールアップ
は
やめて!
以前は広告の関係もありまして。。。
Copyright (C) 2013 M.Ichijo All Rights. Reserved
Copyright (C) 2013 M.Ichijo All Rights. Reserved
何故にスクロールアップしたいのか、
といえば、URLフィールドを隠すため。
・ スクロールできる高さがあるページ
で
・ 1pxでもスクロールした...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
※強制スクロールアップするかどうかの事前チェック
var pos = document.body.scrollTop || document.do...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
何の結果が反映した方
目的の情報を早く
→ ページが表示し始めたら、読み終わらなくても下
へスクロールをするもの。途中で強制的に上にあがっ
たらフ...
もしかしたら後から
トップページに
あのパーツを
追加するかも
同じ見せ方でいいんで、別ジャンル増やすかも
Copyright (C) 2013 M.Ichijo All Rights. Reserved
Copyright (C) 2013 M.Ichijo All Rights. Reserved
HTML
<section class="listUpdater">
<ul class="list-source">
ここにコンテンツのコード
...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
※基本処理として、スクリプトで何らかの加工をする場合に、必ず初期処理として対象のチェックを行
う
init : function(){
this....
Copyright (C) 2013 M.Ichijo All Rights. Reserved
何の結果が反映した方
テンプレート修正者はスクリプト作成者ではなく、ど
こになにをおかないと動かない、という負雑さは排除
したい
分かること
サイ...
過去ファイルの置換は
なるべく避けたい
1行でも対象ファイルが多ければ一苦労
Copyright (C) 2013 M.Ichijo All Rights. Reserved
Copyright (C) 2013 M.Ichijo All Rights. Reserved
広告でも事例がありましたが、
今回はGoogleアナリティクスのタグにて。
通常のコードはHTMLに<script>タグを
直接貼り付けになってい...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
<script src=“//配信サーバー/js/analytics/対象サイトドメイン/ga.js"></script>
HTML
Copyright (C) 2013 M.Ichijo All Rights. Reserved
何の結果が反映した方
出力済みファイルは「置換」作業が必要
→ 書き換え自体が発生しないように対応
分かること
サイト:ページ生成の仕組み
YES
最後に
コードを考える前に、状況把握
Copyright (C) 2013 M.Ichijo All Rights. Reserved
テクニックに目が行きがちですが
Copyright (C) 2013 M.Ichijo All Rights. Reserved
恐ろしいのは機会損失。
トラブルもNGですが、
ビジネス要求にすぐ対応できないのもNG
研究や個人のサイトでない限...
Copyright (C) 2013 M.Ichijo All Rights. Reserved
Thanks!
“観察”から始めるJSコーディング
Upcoming SlideShare
Loading in …5
×

“観察”から始めるJSコーディング

731 views

Published on

第40回html5とか勉強会にて話しました。

Published in: Technology
  • Be the first to comment

“観察”から始めるJSコーディング

  1. 1. “観察”から始める JSコーディング スマホサイトの制作実話を元に Copyright (C) 2013 M.Ichijo All Rights. Reserved 2013.07.25 M.ICHIJO@SANKEI-DIGITAL
  2. 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. 3. このセッション内容 ×実装テクニック紹介 ○制作スキルの紹介 Webサイト制作のJSに関して Copyright (C) 2013 M.Ichijo All Rights. Reserved 「テクニック」 技術、手法、やり方 「スキル」 技術、手法、やり方 を 状況に応じて扱う力
  4. 4. アジェンダ • 何のために“Webサイト”を作るのか? • 公開サイトのJS制作は4ステップ • 何を“観察”する? • 5つの実装例-どんな“観察”結果反映されているか? • 最後に Copyright (C) 2013 M.Ichijo All Rights. Reserved
  5. 5. 何のために “WEBサイト” を作るのか? 趣味でなければビジネスです。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
  6. 6. 仕事で“WEBサイト”なら「ビジネス」 Copyright (C) 2013 M.Ichijo All Rights. Reserved 仕事で公開サイトを作りサービス提供することは ビジネスの一環。 利益を出さねばなりません。出し続けなければなりません。 つまり前提として サービスが不用意に止まらせてはいけない わけです。 止まれば機会損失です。
  7. 7. 仕事で“WEBサイト”なら「ビジネス」 Copyright (C) 2013 M.Ichijo All Rights. Reserved もし “失敗しましたっorz” でサービスと止めたとしたら、
  8. 8. 仕事で“WEBサイト”なら「ビジネス」 Copyright (C) 2013 M.Ichijo All Rights. Reserved サービスが不用意に止まらせない。 そのために制作サイドは 「想定外」をなくしていくことが必要。
  9. 9. そこで制作に必要になるのが Copyright (C) 2013 M.Ichijo All Rights. Reserved 観察
  10. 10. 公開サイトの JS制作は4ステップ これ欲しい → 作る ではありません。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
  11. 11. まずは要求ありき Copyright (C) 2013 M.Ichijo All Rights. Reserved 企画 こんなことがした い! JS制作
  12. 12. JS制作 Copyright (C) 2013 M.Ichijo All Rights. Reserved 企画 こんなことがした い! 実装 作りました! でも、とにかく作ればOKではない。
  13. 13. JS制作 Copyright (C) 2013 M.Ichijo All Rights. Reserved 企画 こんなことがした い! 観察 そこで4ステップで 設計 実装検証
  14. 14. JS制作 Copyright (C) 2013 M.Ichijo All Rights. Reserved 企画 こんなことがした い! 観 察 そこで4ステップで 設計 実装検証
  15. 15. 何を“観察”する? 「サイト」と「ユーザー」、二つの要素をじっくり観察。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
  16. 16. 2つの要素に分けて観察 Copyright (C) 2013 M.Ichijo All Rights. Reserved サイト インフラ コンテンツ ユーザー アクション
  17. 17. 「サイト」のインフラは? • ページ生成の仕組み → htmlができる?動的に表示? • キャッシュの扱い → CDNは? • URL構成→ スマホページURLは独立?発行数は? • 外部サービス対応 → メインデータは?正規URLは?SEOは? • サイト分析の方法 → アナリティクスは?リアルタイム? • システムメンテナンス方法 → 誰がテンプレートを修正? Copyright (C) 2013 M.Ichijo All Rights. Reserved
  18. 18. ページ生成の仕組み Copyright (C) 2013 M.Ichijo All Rights. Reserved CMS HTML HTML上の何かを変えたくても、 サイト全体を一気に変える事 は 不可能 出力済みファイルは「置換」 作業が必要 分かること
  19. 19. ページ生成の仕組み-ニュース記事のファイル数 Copyright (C) 2013 M.Ichijo All Rights. Reserved ある1日 昨年末 政治ジャンル 約200ページ 経済ジャンル 約160ページ 事件ジャンル 約30ページ 世界ジャンル 約35ページ 計 約430ページ 計 約180万ページ
  20. 20. URL構成 Copyright (C) 2013 M.Ichijo All Rights. Reserved CMS スマホ HTML /smp/~ 分かること PC HTML /~ スマホページが どんなデバイスで見られるか は 不確定
  21. 21. 外部サービス対応 Copyright (C) 2013 M.Ichijo All Rights. Reserved CMS HTML HTMLの中に必要な情報は入っ ていてほしい 発行したURLは 全て見つけてほしい 分かること 検索 エンジ ン
  22. 22. 「サイト」のコンテンツは? • サービスの基本 → どんなコンテンツが重要? • 情報の変化 → コンテンツの追加の頻度は? • 更新タイミング → リアルタイムにしたい? • 分類の構成 → ジャンルは増える? • 広告の構成 → どんな広告をどこに入れる? • 細かいデザイン調整 → デバイスで分けたい時がある? • サイト一括更新 → 一括更新を成立したいのは? Copyright (C) 2013 M.Ichijo All Rights. Reserved
  23. 23. サービスの基本 Copyright (C) 2013 M.Ichijo All Rights. Reserved “記事”を示すURLへアクセ スしたら HTML内にその情報があるべし “記事”を示すURLは誰が見 ても拾えるようすべし 分かること “記事” トップ
  24. 24. 情報の変化 Copyright (C) 2013 M.Ichijo All Rights. Reserved 同一ページに同じデザインの パーツがでないとは限らない コピー&ペーストで使われる こともしばしば 分かること 事件 トップ 事件 トップ 政治 ・・・3ヵ月 後
  25. 25. 細かいデザイン調整 Copyright (C) 2013 M.Ichijo All Rights. Reserved ビジュアル上の微調整で快適 閲覧を目指す UIの違いを適切な文言で 表現する 分かること iOS Android ホーム へ ブック マーク へ
  26. 26. 「ユーザー」のアクションは? • 閲覧環境 → デバイス、電波状況は? • 見ている時間 → 一日中、朝、昼、晩、分断された時間? • 見ている状態 → さっと見ている?じっくり見ている? • 見ている場所 → 室内、室外、イベント会場、自然の 中・・・etc ? • 見ている時の気分 → 暇をつぶしたい、急いで確認した い・・・etc ? Copyright (C) 2013 M.Ichijo All Rights. Reserved
  27. 27. 「ユーザー」のアクションは?-観察対象は2つある Copyright (C) 2013 M.Ichijo All Rights. Reserved アナリティク ス 数字 会社 社内の人
  28. 28. 閲覧環境-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
  29. 29. 見ている状態-“長時間”“じっくり”見ていない Copyright (C) 2013 M.Ichijo All Rights. Reserved 滞在時間 直帰率 平均 1分21秒 56.40%
  30. 30. 5つの実装例 -どんな”観察“結果 が 反映されているか? 複合して反映されることも Copyright (C) 2013 M.Ichijo All Rights. Reserved
  31. 31. Copyright (C) 2013 M.Ichijo All Rights. Reserved 発生した要求とコードを先に 紹介します。(コードはポイ ントのみ) コードの組み方を決めた“観 察”結果はその後にご紹介し ます。
  32. 32. ニュースのリスト、 ページングじゃなくて ツイッターみたいに 画面変えずに 内容を表示したい ボタンぽっちりで続きを表示したいんだけど。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
  33. 33. 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="/js/listUpdater.js"></script> </section>
  34. 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="/js/listUpdater.js"></script> </section> scriptの処理対象DOM の指定 追記して取り込みた いソース部分の指定 ソースの追記先 次ページへのリンク 先が取り込み先URL
  35. 35. 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
  36. 36. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 HTMLの中に必要な情報は入っていてほしい 発行したURLは全て見つけてほしい 分かること サイト:外部サービス対応 “記事”を示すURLへアクセスしたら HTML内にその情報があるべし “記事”を示すURLは誰が見ても拾えるようすべし 分かること サイト:サービスの基本 YES YES
  37. 37. ページ表示速度を 速めたい すぐに読み始めたいんだけど。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
  38. 38. 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>
  39. 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> サムネイル画像をimg で追記しないで、pの 属性に指定
  40. 40. Copyright (C) 2013 M.Ichijo All Rights. Reserved ※ 後からロードの対象をチェック var common = new SKD.ui.base.common(".photo.image-loading"); ※まとめて取り込み → ここは Imageオブジェクトを使って、onloadタイミングで対象を一括取り込み script
  41. 41. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 HTMLの中に必要な情報は入っていてほしい → 記事のイメージとして強調はしているが、これ単 体では情報を追加していない。(altが記事タイトル になるくらい) 分かること サイト:外部サービス対応 目的の情報を早く → ここで重要なのは記事が何かであり、次へ進める こと。タイトルとURLになる 分かること ユーザー:見ている状態 NO YES 分かること サイト:細かいデザイン調整 高解像の画面にも対応したい → 1ファイルで対応するとすると、もともと大きめ サイズを縮小 YES
  42. 42. ロード完了後に 強制スクロールアップ は やめて! 以前は広告の関係もありまして。。。 Copyright (C) 2013 M.Ichijo All Rights. Reserved
  43. 43. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何故にスクロールアップしたいのか、 といえば、URLフィールドを隠すため。 ・ スクロールできる高さがあるページ で ・ 1pxでもスクロールしたら ・ フィールドは消える 仕組みを利用しています。 重要なのは 「1pxでもスクロールしたら」 で、ユーザーがすでにしていたら実行不 要です。
  44. 44. 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
  45. 45. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 目的の情報を早く → ページが表示し始めたら、読み終わらなくても下 へスクロールをするもの。途中で強制的に上にあがっ たらフラストレーション。 分かること ユーザー:見ている状態 YES
  46. 46. もしかしたら後から トップページに あのパーツを 追加するかも 同じ見せ方でいいんで、別ジャンル増やすかも Copyright (C) 2013 M.Ichijo All Rights. Reserved
  47. 47. 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="/js/listUpdater.js"></script> </section> scriptの処理対象DOM の指定 パーツ単位でjsをコー ルする
  48. 48. 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
  49. 49. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 テンプレート修正者はスクリプト作成者ではなく、ど こになにをおかないと動かない、という負雑さは排除 したい 分かること サイト:システムメンテナンス方法 目的の情報を早く → パーツ毎に完成させて待たせない 分かること ユーザー:見ている状態 YES YES 分かること サイト:情報の変化 同一ページに同じデザインのパーツがでないとは限ら ない →増やせるときに簡単に増やしたいので、今はなくて も、後から増えることも YES
  50. 50. 過去ファイルの置換は なるべく避けたい 1行でも対象ファイルが多ければ一苦労 Copyright (C) 2013 M.Ichijo All Rights. Reserved
  51. 51. Copyright (C) 2013 M.Ichijo All Rights. Reserved 広告でも事例がありましたが、 今回はGoogleアナリティクスのタグにて。 通常のコードはHTMLに<script>タグを 直接貼り付けになっています。 弊社ではトラッキングコード自体、カス タマイズしており、改善目的でコードを たまに書き換えています。 HTML直接だと書き換えが大変です。
  52. 52. Copyright (C) 2013 M.Ichijo All Rights. Reserved <script src=“//配信サーバー/js/analytics/対象サイトドメイン/ga.js"></script> HTML
  53. 53. Copyright (C) 2013 M.Ichijo All Rights. Reserved 何の結果が反映した方 出力済みファイルは「置換」作業が必要 → 書き換え自体が発生しないように対応 分かること サイト:ページ生成の仕組み YES
  54. 54. 最後に コードを考える前に、状況把握 Copyright (C) 2013 M.Ichijo All Rights. Reserved
  55. 55. テクニックに目が行きがちですが Copyright (C) 2013 M.Ichijo All Rights. Reserved 恐ろしいのは機会損失。 トラブルもNGですが、 ビジネス要求にすぐ対応できないのもNG 研究や個人のサイトでない限り、 サービス提供を止めないために 必要なテクニックを選択するスキルを磨いておき たい。
  56. 56. Copyright (C) 2013 M.Ichijo All Rights. Reserved Thanks!

×