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

“観察”から始める
JSコーディング
スマホサイトの制作実話を元に
Copyright (C) 2013 M.Ichijo All Rights. Reserved
2013.07.25 M.ICHIJO@SANKEI-DIGITAL

自己紹介
• IA兼フロントエンドエンジニア兼Web
ディレクター。今ではすっかり遊軍状態。
• Slerで業務システム→携帯サイト制作ベ
ンチャー→修行の旅→産経デジタル。
• ほとんどが運用と隣合わせの開発現場の
現場監督官人生。
• ニュースサイト群を相手に開発だけでな
く、企画サポート、分析に邁進中。
• html5jやGTUG Girlsでスタッフこんにちは、メイドです。
写真はアレですが、
通常運転中はマジメにしています。
HTML5
conference
2012
twitter：@ichijo3
email：usa132006@gmail.com

このセッション内容
×実装テクニック紹介
○制作スキルの紹介
Webサイト制作のJSに関して
「テクニック」
技術、手法、やり方
「スキル」
技術、手法、やり方
を
状況に応じて扱う力

アジェンダ
• 何のために“Webサイト”を作るのか？
• 公開サイトのJS制作は4ステップ
• 何を“観察”する？
• 5つの実装例－どんな“観察”結果反映されているか？
• 最後に

何のために
“WEBサイト”
を作るのか？
趣味でなければビジネスです。

仕事で“WEBサイト”なら「ビジネス」
仕事で公開サイトを作りサービス提供することは
ビジネスの一環。
利益を出さねばなりません。出し続けなければなりません。
つまり前提として
サービスが不用意に止まらせてはいけない
わけです。
止まれば機会損失です。

もし
“失敗しましたっorz”
でサービスと止めたとしたら、

サービスが不用意に止まらせない。
そのために制作サイドは
「想定外」をなくしていくことが必要。

そこで制作に必要になるのが
観察

公開サイトの
JS制作は4ステップ
これ欲しい → 作るではありません。

まずは要求ありき
企画
こんなことがした
い！
JS制作

JS制作
企画
い！
実装
作りました！
でも、とにかく作ればOKではない。

JS制作
企画
い！
観察
そこで4ステップで
設計
実装検証

何を“観察”する？
「サイト」と「ユーザー」、二つの要素をじっくり観察。

２つの要素に分けて観察
サイト
インフラ
コンテンツ
ユーザー
アクション

「サイト」のインフラは？
• ページ生成の仕組み → htmlができる？動的に表示？
• キャッシュの扱い → CDNは？
• URL構成→ スマホページURLは独立？発行数は？
• 外部サービス対応 → メインデータは？正規URLは？SEOは？
• サイト分析の方法 → アナリティクスは？リアルタイム？
• システムメンテナンス方法 → 誰がテンプレートを修正？

ページ生成の仕組み
CMS
HTML
HTML上の何かを変えたくても、
サイト全体を一気に変える事
は
不可能
出力済みファイルは「置換」
作業が必要
分かること

ページ生成の仕組み－ニュース記事のファイル数
ある1日昨年末
政治ジャンル約200ページ
経済ジャンル約160ページ
事件ジャンル約30ページ
世界ジャンル約35ページ
計約430ページ
計約180万ページ

URL構成
CMS
スマホ
HTML
/smp/～
分かること
PC
HTML
/～スマホページが
どんなデバイスで見られるか
は
不確定

外部サービス対応
CMS
HTML
HTMLの中に必要な情報は入っ
ていてほしい
発行したURLは
全て見つけてほしい
分かること
検索
エンジ
ン

「サイト」のコンテンツは？
• サービスの基本 → どんなコンテンツが重要？
• 情報の変化 → コンテンツの追加の頻度は？
• 更新タイミング → リアルタイムにしたい？
• 分類の構成 → ジャンルは増える？
• 広告の構成 → どんな広告をどこに入れる？
• 細かいデザイン調整 → デバイスで分けたい時がある？
• サイト一括更新 → 一括更新を成立したいのは？

サービスの基本
“記事”を示すURLへアクセ
スしたら
HTML内にその情報があるべし
“記事”を示すURLは誰が見
ても拾えるようすべし
分かること
“記事”
トップ

情報の変化
同一ページに同じデザインの
パーツがでないとは限らない
コピー＆ペーストで使われる
こともしばしば
分かること
事件
トップ
事件
トップ
政治
・・・3ヵ月
後

細かいデザイン調整
ビジュアル上の微調整で快適
閲覧を目指す
UIの違いを適切な文言で
表現する
分かること
iOS Android
ホーム
へ
ブック
マーク
へ

「ユーザー」のアクションは？
• 閲覧環境 → デバイス、電波状況は？
• 見ている時間 → 一日中、朝、昼、晩、分断された時間？
• 見ている状態 → さっと見ている？じっくり見ている？
• 見ている場所 → 室内、室外、イベント会場、自然の
中・・・etc ？
• 見ている時の気分 → 暇をつぶしたい、急いで確認した
い・・・etc ？

「ユーザー」のアクションは？－観察対象は２つある
アナリティク
ス
数字
会社
社内の人

閲覧環境－iOSとAndroidのバージョン割合
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

見ている状態－“長時間”“じっくり”見ていない
滞在時間直帰率
平均 1分21秒 56.40%

５つの実装例
-どんな”観察“結果
が
反映されているか？
複合して反映されることも

発生した要求とコードを先に
紹介します。（コードはポイ
ントのみ）
コードの組み方を決めた“観
察”結果はその後にご紹介し
ます。

ニュースのリスト、
ページングじゃなくて
ツイッターみたいに
画面変えずに
内容を表示したい
ボタンぽっちりで続きを表示したいんだけど。

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>

HTML
</ul>
</section>
scriptの処理対象DOM
の指定
追記して取り込みた
いソース部分の指定
ソースの追記先
次ページへのリンク
先が取り込み先URL

※ 「次ページへ」リンクを取得
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

何の結果が反映した方
HTMLの中に必要な情報は入っていてほしい
発行したURLは全て見つけてほしい
分かること
サイト：外部サービス対応
“記事”を示すURLへアクセスしたら
HTML内にその情報があるべし
“記事”を示すURLは誰が見ても拾えるようすべし
分かること
サイト：サービスの基本
YES
YES

ページ表示速度を
速めたい
すぐに読み始めたいんだけど。

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>

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の
属性に指定

※ 後からロードの対象をチェック
var common = new SKD.ui.base.common(".photo.image-loading");
※まとめて取り込み
→ ここは Imageオブジェクトを使って、onloadタイミングで対象を一括取り込み
script

HTMLの中に必要な情報は入っていてほしい
→ 記事のイメージとして強調はしているが、これ単
体では情報を追加していない。（altが記事タイトル
になるくらい）
分かること
サイト：外部サービス対応
目的の情報を早く
→ ここで重要なのは記事が何かであり、次へ進める
こと。タイトルとURLになる
分かること
ユーザー：見ている状態
NO
YES
分かること
サイト：細かいデザイン調整高解像の画面にも対応したい
→ 1ファイルで対応するとすると、もともと大きめ
サイズを縮小
YES

ロード完了後に
強制スクロールアップ
は
やめて！
以前は広告の関係もありまして。。。

何故にスクロールアップしたいのか、
といえば、URLフィールドを隠すため。
・スクロールできる高さがあるページ
で
・ 1pxでもスクロールしたら
・フィールドは消える
仕組みを利用しています。
重要なのは
「1pxでもスクロールしたら」
で、ユーザーがすでにしていたら実行不
要です。

※強制スクロールアップするかどうかの事前チェック
var pos = document.body.scrollTop || document.documentElement.scrollTop || window.scrollTop;
if(pos) {
return;
}
※スクロール実行、1px下へ
window.scrollTo(0,1);
script

→ ページが表示し始めたら、読み終わらなくても下
へスクロールをするもの。途中で強制的に上にあがっ
たらフラストレーション。
分かること
ユーザー：見ている状態 YES

もしかしたら後から
トップページに
あのパーツを
追加するかも
同じ見せ方でいいんで、別ジャンル増やすかも

HTML
</ul>
</section>
scriptの処理対象DOM
の指定
パーツ単位でjsをコー
ルする

※基本処理として、スクリプトで何らかの加工をする場合に、必ず初期処理として対象のチェックを行
う
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

テンプレート修正者はスクリプト作成者ではなく、ど
こになにをおかないと動かない、という負雑さは排除
したい
分かること
サイト：システムメンテナンス方法
→ パーツ毎に完成させて待たせない
分かること
ユーザー：見ている状態
YES
YES
分かること
サイト：情報の変化
同一ページに同じデザインのパーツがでないとは限ら
ない
→増やせるときに簡単に増やしたいので、今はなくて
も、後から増えることも
YES

過去ファイルの置換は
なるべく避けたい
1行でも対象ファイルが多ければ一苦労

広告でも事例がありましたが、
今回はGoogleアナリティクスのタグにて。
通常のコードはHTMLに<script>タグを
直接貼り付けになっています。
弊社ではトラッキングコード自体、カス
タマイズしており、改善目的でコードを
たまに書き換えています。
HTML直接だと書き換えが大変です。

出力済みファイルは「置換」作業が必要
→ 書き換え自体が発生しないように対応
分かること
サイト：ページ生成の仕組み
YES

最後に
コードを考える前に、状況把握

テクニックに目が行きがちですが
恐ろしいのは機会損失。
トラブルもNGですが、
ビジネス要求にすぐ対応できないのもNG
研究や個人のサイトでない限り、
サービス提供を止めないために
必要なテクニックを選択するスキルを磨いておき
たい。

Thanks！

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

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

Similaire à “観察”から始めるJSコーディング (20)

Dernier

Dernier (9)

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