Webパフォーマンス最適化のためのコーディング手法

(旧:コーディングから参加するUI設計)
長谷川 広武

自己紹介。おやばかさん!
運用系のWeb会社所属

  • コーディングから参加する

デザインができている段階で
「この機能JavaScriptでできる?」→えええー!

  • 実装前に決めておくこと
    • 動作:アニメーション、実行のタイミングなど
    • JSOFF対応IE6対応
    • 操作CSSを直接書くかわけるか
  • 制作例:フォームの入力確認:修正ボタンで前のページに戻るのが手間

→ページ切り替えなしの工夫

    • 「確認モーダルウィンドウ」
    • 「その場編集」

タブとナビゲーションの連動<失敗例>

  • タブとナビの選択状態が連動している
  • サブカテゴリの扱いもろもろでボツ

機能があってもいいけど、なくても特別便利になっていない

ex.タブ型の縦長コンテンツの連動ボタン
上に戻る手間→ならタブじゃなくていいのでは?
一番下に次のタブの最上部へのリンクがでている

ex.透明度を利用したロールオーバー
ちょっとうすくしてマウスオーバーを表現

  • 素材にロールオーバー画像がない!
  • 時間がない余裕がない
  • 写真で替えがない
  • ロゴで加工できない

などのときに!

THE HAM MEDIAで紹介中

  • コードが短い
  • ふわっとうすくなる

#おお便利だ!!

失敗談から学ぶ

  • テストと本番の差
  • heightLine.js:ボックスの高さがそろう
    • ボックス数が100ぐらいになり重くなる(30s〜1minかかる)

→一度に適用する量を減らす
実行するタイミングをずらして量を減らす(3〜10sに)

→仕組みを変更
全要素でなく必要な箇所だけを参照するようにする(1〜2s短縮)

子要素にもイベントが発生

  • 入れ子で、サブメニューをクリックしてもメニューが開閉する(??)

    プラグインの利用でも気をつけて
    同じ名前のidを作ってしまう(笑) ←idは1ページに1つ

    画面サイズに気をつけよう
    LP9サイトの左メニュー追随が下にズレる
    モーダルウィンドウのせいで下の閉じるボタンがみえない
    →ThickBox
    →画面サイズを取得して気をつける

    開閉パネル:リロードしたときに閉じているパネルが開いてしまう
    フォントサイズ
    →設定状態を保存しておく

    2度目の訪問時は設定した状態にしておく
    →クッキーを使う

    朝日新聞のサイトはよくできている

  • Ajaxコンテンツに工夫

    読み込みが遅いと、ボックスの中が空でユーザを待たせてしまう
    「読み込み中」ローティングイメージを入れる

    時間がかかっていることを視覚的に伝える

    JavaScriptOFF環境にやさしく
    タブの中身が一瞬みえる!
    →DOM完了前にCSSだけ準備する
    →JS操作用CSSを別途用意して、JSでCSSを読み込むタグを追加

    OFF環境の人への注意文

    OFFでは対応できない場合 例:地図が表示されない
    OFFの人にだけ見せる文章を用意しておく


    <まとめ>
    Webサイトの使いやすさを考える

    • ちょっとした気遣い・優しさ
    • 誰が使うのかを考える

    プラグイン導入時

    • HTML変更なしに導入できるか
    • ほかのプラグインCSSに影響がないか
    • 動作は大丈夫か?

    よく確認してから案件に適用しよう!

    動作チェック

    • ブラウザ
    • ページをもどしたとき
    • JSOFF
    • 画面サイズ

    質問
    コンフリクトなどの検証方法は?
    →一番使いたいバージョンに対応しているかどうかの確認
    FireBugでチェック
    →じぶんで直す

    <感想>
    実例ベースの説明で、いろんな制作例を説明されているのが参考になりました。前のセッションとあわせてjQueryは充実した内容だなー。