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サイトの使いやすさを考える
- ちょっとした気遣い・優しさ
- 誰が使うのかを考える
プラグイン導入時
よく確認してから案件に適用しよう!
動作チェック
- ブラウザ
- ページをもどしたとき
- JSOFF
- 画面サイズ
質問
コンフリクトなどの検証方法は?
→一番使いたいバージョンに対応しているかどうかの確認
→FireBugでチェック
→じぶんで直す
<感想>
実例ベースの説明で、いろんな制作例を説明されているのが参考になりました。前のセッションとあわせてjQueryは充実した内容だなー。