面白法人カヤックの紹介
書籍の紹介
今日の内容
- 効率アップの鍵は"プログラマとのコミュニケーション"！
- プログラムと相性のいいマークアップとは？
- 一歩先をいくマークアップ！
対象の規模
JavaScriptやサーバーサイドプログラムを使った
中規模~大規模サイトを担当する装飾系エンジニア向け
例えば...
1. 効率アップの鍵は
"プログラマとのコミュニケーション"！
こういうことありませんか？
- このマークアップだけでプログラマに意図がつたわるかな？
- JavaScript使うなら、このinput要素にidふるべき？
- プログラマがシステム組み込むと毎度Validじゃなくなるんだけどもヽ(#`Д´)ノ
どうすればいいの？
プログラマとコミュニケーションをとる、
これだけ。
この連携が円滑にいくと開発の効率がよくなる
コミュニケーションの例
- プログラマとマークアップエンジニアの作業領域を確認
- HTMLデータ渡すときにマークアップの意図を伝える
- プログラマが組み込んだ後のソースをチェックする
2. プログラムと相性のいいマークアップ
要点
- HTMLはできる限り共通化しよう
- JavaScriptが得意なことはJavaScriptで
- フォームのマークアップは要注意！
HTMLの共通化
グローバルナビゲーションの例
HTMLを共通化しない場合
<ul class="gnavi">
<li><a href="/">トップ</a></li>
<li><em class="current">ニュース</em></li>
<li><a href="/ranking">特集</a></li>
</ul>
グローバルナビゲーションの例
HTMLを共通化する場合
<body class="news">
...
<ul class="gnavi">
<li id="gnaviTop"><a href="/">トップ</a></li>
<li id="gnaviNews"><a href="/news">ニュース</a></li>
<li id="gnaviSpecial"><a href="/special">特集</a></li>
</ul>
共通化とマークアップ
HTMLが共通化できるところはできるだけ共通化したほうがいいが...
プログラムに合わせて無理にHTMLを変える必要ない。
プログラマと話して落としどころを見つけよう
JavaScriptが得意なことはJavaScriptで
CSSだけでやろうとすると手間がかかるが、
JavaScriptだとすぐできるということも多い。
例えば...
- 画像のロールオーバー
- IE6でmin-width、max-width
- 要素の高さを揃える
- など。。
要素の高さを揃える例
要素の高さを揃える例
一番高いブロックに全ての要素の高さを合わせるレイアウト
要素の高さを揃える例
- CSSだけでやろうとすると、複雑になってしまう。
- 最悪tableを使うことに！
要素の高さを揃える例
JavaScriptだとこれでできちゃいます(jQuery使用）。
var maxHeight = 0;
$('ul.itemList li').each(function() {
height = $(this).height();
if (maxHeight < height) {
maxHeight = height;
}
}).height(maxHeight);
フォームのマークアップ
フォームのマークアップ
- formの要素はHTMLを変更したほうが効率がいいこともある
- form要素をCSSのセレクタにかかない
3. 一歩上をいくマークアップ！
外部サービスで利用されることも想定しよう！
外部から利用されるケース
たとえば、こんなものに使われます
- ユーザースクリプト（Greasemonkeyなど）
- ユーザースタイル（Stylishなど）
サービスとしてはこちら
外部プログラムに対するアクセシビリティ
- idやclass設定は、外部から見ても分かりやすいものに
しておくと○
- 外部サービスで利用されることを考えた設計もアクセシビリティのひとつかも！
つまり
一歩先を行くマークアップは自分たちだけじゃなく
外部サービスにも優しい！
本日のまとめ
本日のまとめ
- プログラマとコミュニケーションをとろう！
- プロジェクト全体を考えて落としどころを見つけよう
- 外部からの利用も考えてマークアップするとひと味違う
採用情報
オープンでコミュニケーションのとりやすいカヤックのプログラマ達と一緒に働いてみたい装飾系エンジニアを募集しています。
ありがとうございました。
