More Related Content
Similar to プログラム組んだら負け!実はHTML/CSSだけでできること2015夏 (20)
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
- 2. 2015 Yusuke Hirao, CC BY-ND.
自己紹介
平尾優典(ひらお ゆうてん)
===
株式会社ディーゼロ Webエンジニア
## コミュニティ活動
- 福岡フロントエンド友の会 Fukuoka Frontend Frogs
- 福岡マークアップ勉強会
- baserCMSユーザー会
Yusuke Hirao
@cloud10designs
- 3. 2015 Yusuke Hirao, CC BY-ND.
自己紹介
## コミュニティ紹介
### 福岡フロントエンド友の会 Fukuoka Frontend Frogs
### 福岡マークアップ勉強会
### baserCMSユーザー会
「井の中の蛙」にはならないようにと集まった
フロントエンドエンジニアのためのコミュニティ。
Webコーディング・アプリ開発の悩める蛙たちが
その場で話題を決めて、アンカンファレンス形式で
技術を共有する場です。
福岡のマークアップ
に携わる人たちの
ためのコミュニティ
です。
定期的にセミナーや、ミニ講座、座談会
などを行っています。通称「マカベン」。
福岡発の国産CMS「baserCMS」の
ユーザー会および開発コミュニティです。
平尾も微力ながら開発に携わらせて頂いています。
- 4. 2015 Yusuke Hirao, CC BY-ND.
自己紹介
## つくったもの
baserCMSプラグイン
- BurgerEditor
- Ace Editor for baserCMS
jQueryプラグイン
- baserJS
- Psyborg
- jquery.raderChart.js
nodeモジュール
- jaco
- typed-table
gulpプラグイン
- gulp-xlsx2html
- 5. 2015 Yusuke Hirao, CC BY-ND.
自己紹介
## つくったもの
baserCMSプラグイン
- BurgerEditor
- Ace Editor for baserCMS
jQueryプラグイン
- baserJS
- Psyborg
- jquery.raderChart.js
nodeモジュール
- jaco
- typed-table
gulpプラグイン
- gulp-xlsx2html
- 12. 2015 Yusuke Hirao, CC BY-ND.
アジェンダ
今日話すこと
===
- どんなプログラムを組んだら負けなのか
- CSSのできる子たち
- HTMLのできる子たち
- まとめ
- 13. 2015 Yusuke Hirao, CC BY-ND.
アジェンダ
今日話すこと
===
- どんなプログラムを組んだら負けなのか
- CSSのできる子たち
- HTMLのできる子たち
- まとめ
- 15. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
※はじめに
===
この話は、完全にプログラムを廃止して
HTML/CSSのみでWebサイトを作成しようというものではありません。
- 16. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
※はじめに
===
この話は、完全にプログラムを廃止して
HTML/CSSのみでWebサイトを作成しようというものではありません。
## 伝えたいことは2点
- 17. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
※はじめに
===
この話は、完全にプログラムを廃止して
HTML/CSSのみでWebサイトを作成しようというものではありません。
## 伝えたいことは2点
- 無駄なプログラムを組まない
- 役割を明確に
- 18. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
※はじめに
===
この話は、完全にプログラムを廃止して
HTML/CSSのみでWebサイトを作成しようというものではありません。
## 伝えたいことは2点
- 無駄なプログラムを組まない
- 役割を明確に ←特にこっち
- 20. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
さて問題。これどう実装する?
===
## お題「トップページの新着情報の『New』アイコン」
- 26. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
## お題「トップページの新着情報の『New』アイコン」
A.
プログラムにデザインの
要件が混ざっている
負けプログラム
- 28. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
プログラムにデザインの要件が混ざっている問題点
===
## プログラムが担う要件が増える
- プログラムの仕様にデザインが含まれることになる
- プログラマの仕事が増える
##「デザインの修正 = プログラムの修正」という恐怖
- プログラムがデザインに依存する
- デザインの変更にプログラムが引っ張られる
- 29. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
##「デザインの修正 = プログラムの修正」という恐怖
- プログラムがデザインに依存する
- デザインの変更にプログラムが引っ張られる
Newアイコンの場所変更!
ディレクター デザイナー
Newアイコン変更
だそうです
プログラマ
やれやれ
またか
テストもしないと
- 30. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
##「デザインの修正 = プログラムの修正」という恐怖
- プログラムがデザインに依存する
- デザインの変更にプログラムが引っ張られる
Newアイコンの場所変更!
ディレクター デザイナー
Newアイコン変更
だそうです
プログラマ
やれやれ
またか
テストもしないと
非効率
- 31. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
##「デザインの修正 = プログラムの修正」という恐怖
- プログラムがデザインに依存する
- デザインの変更にプログラムが引っ張られる
- 会社をまたぐともっと大変
ちょ、何この請求?!
デザインの変更なのに?
ディレクター デザイナー
Newアイコン変更の
請求だそうです
パートナープログラマ
あれだけ修正
したわけですからね
※あくまで例えなのでフィクションです。
- 38. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
##「デザインの修正」のみで完結する
- プログラムがデザインに依存しない
- デザインの変更にプログラムが引っ張られない
Newアイコンの場所変更!
ディレクター デザイナー
りょうかいでーす
プログラマ
∼♪
- 39. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
##「デザインの修正」のみで完結する
- プログラムがデザインに依存しない
- デザインの変更にプログラムが引っ張られない
Newアイコンの場所変更!
ディレクター デザイナー
りょうかいでーす
プログラマ
∼♪
未稼働!
- 40. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
役割を明確にしよう
===
コードも役割が明確になっているほうがいい
CGI
PHP/Ruby/Java
etc...
HTML CSS
コンテンツ・文書構造 装飾・デザイン状態・性質(属性)の制御
- 41. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
役割を明確にしよう
===
CGI
PHP/Ruby/Java
etc...
HTML CSS
7日以内の記事は
time属性のコンテンツの
後ろに
span要素で...(略
- 42. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
役割を明確にしよう
===
CGI
PHP/Ruby/Java
etc...
HTML CSS
7日以内の記事は
time属性のコンテンツの
後ろに
span要素で...(略
日付の【状態】
アイコンの位置
- 43. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
役割を明確にしよう
===
CGI
PHP/Ruby/Java
etc...
HTML CSS
7日以内の記事は
time属性のコンテンツの
後ろに
span要素で...(略
日付の【状態】
アイコンの位置
データのはなし
装飾のはなし
- 44. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
役割を明確にしよう
===
CGI
PHP/Ruby/Java
etc...
HTML CSS
newクラスが付加されていたら
time要素のafter擬似要素を
装飾する
7日以内の記事は
newクラスを付加する
日付の【状態】
アイコンの位置
- 45. 2015 Yusuke Hirao, CC BY-ND.
どんなプログラムを組んだら負けなのか
役割を明確にしよう
===
CGI
PHP/Ruby/Java
etc...
HTML CSS
newクラスが付加されていたら
time要素のafter擬似要素を
装飾する
7日以内の記事は
newクラスを付加する 役割分担!
- 46. 2015 Yusuke Hirao, CC BY-ND.
アジェンダ
今日話すこと
===
- どんなプログラムを組んだら負けなのか
- CSSのできる子たち
- HTMLのできる子たち
- まとめ
- 48. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
CSS
===
- セレクタ
- background-size
- multiple background
- background-blend-mode
- filter Effects
- calc()
- Flexible Box
- Feature Queries
- image-rendering
- pointer-events (for HTML)
- border-image
- text-overflow
- Transition / Animation
- vw, vh, vmin, vmax Units
- 49. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
## セレクタ
- 結合子
- > + ~
- 属性セレクタ
- [attr] [attr=val] [attr$=val] etc...
- 構造擬似クラス
- :nth-child(n) :empty etc...
- ユーザーアクション擬似クラス
- :hover :focus :active
- 擬似要素
- ::before ::after
- などなど
- 50. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### 構造擬似クラス
:nth-child(n)
説明不要の便利なヤツ。
プログラムから無駄なクラスを付けなくて済む。
(n)は整数以外にも (2n+1) のように
if文で条件分岐するよりよっぽどわかりやすいロジックで書ける。
- 51. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### 構造擬似クラス
:empty
要素が空である状態を表す
セレクタ。
地味に使える。
※スペース・改行は空とみなさない点は注意。
if文、不要
- 52. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### ユーザーアクション擬似クラス
:hover
JavaScripを使わずになるべくコレで済ましょう。
画像の置換はbackgroundで。
アニメーションはtransitionで。
パフォーマンス、レスポンシブ、メンテンナンス
理由はいろいろありますが、とにかくコレ使いましょう。
- 53. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### 擬似要素
::before ::after
CSSの一番すごいやつ。
要素の"中"にspan要素を入れたのと同等。
アイコン、ラベル、マーカー、擬似背景、
エラーメッセージ、アニメーションのエフェクトなんでもござれ。
※要素の中なのでimgなどの空要素には無効なので注意。
※DOM APIから参照できないのでイベントバインディングもできない。直接のインタラクティブ要素にはできない。
- 54. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
CSS
===
- セレクタ
- background-size
- multiple background
- background-blend-mode
- filter Effects
- calc()
- Flexible Box
- Feature Queries
- image-rendering
- pointer-events (for HTML)
- border-images
- text-overflow
- Transition / Animation
- vw, vh, vmin, vmax Units
- 55. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### background-size
background-size: contain;
background-size: cover;
フルードレイアウトに欠かせない背景伸縮。
windowのリサイズイベントで計算をガンガン実行するような、
そんなパフォーマンスの悪いこと不要。
- 56. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### Multiple background
background: url(A),url(B),url(C);
背景画像を4枚まで同時指定が可能。
背景画像扱いになるグラデーションも同じく複数指定可能。
画像+グラデーションの組み合わせもOK。
余計なdivを用意する必要なし。
JavaScriptで背景用divを生成挿入する必要なし。
- 57. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### background-blend-mode
background-blend-mode
Photoshopのでいう描画モード処理。
ついにCSSで手軽にできるようになった。
canvas要素でJavaScriptで処理する必要もなし。
※ただしMS Edgeを除くモダンブラウザに限る
- 58. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### filter Effects
filter: greyscale(1);
filter: blur(5px); etc...
こちらもPhotoshop不要でCSSで手軽にできるようになった。
canvas要素でJavaScriptで処理する必要もなし。
最大の利点はtransitionでアニメーションできること。
※ただしMS Edgeを除くモダンブラウザに限る
- 59. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### calc()
width: calc(100% - 20px);
CSS上で計算が可能に。
calcの最大の利点は相対値と絶対値を混ぜた計算が可能なこと。
相対値同士・絶対値同士ならSASSにやらせれば済むはなし。
windowのリサイズイベントで計算…という必要がなくなる。
- 60. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### Flexible Box
order: 1;
Flexible Boxの利点は、それはそれは沢山ありますが、
地味に便利なのが順番を入れ替えることが出来るコイツ。
レスポンシブデザインなどブレークポイントによって、
デバイスに合わせた順番に切り替えることができる。
プログラムなしで!
- 61. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### Feature Query
@supports (width: 75vw) and (height: 50vh) {
/* selector { prop: value; } */
}
条件のプロパティや値が有効であれば、ブロック内のセレクタを有効にする。
グレイスフル・デグラデーションやプログレッシブ・エンハンスメントの
ポリシーで実装する際に非常に有効になる。
Modernizr.jsが不要になる。
- 62. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### image-rendering
image-rendering: pixelated;
ドット絵職人さん出番ですよ!!
画像を拡大させてもアンチエイリアスがかからないようにできる
video要素にも適応できる。
canvas要素とJavaScriptなしで可能になる。
- 63. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### pointer-events (for HTML)
pointer-events: none;
もともとSVG側のCSSの技術。
一切のインタラクションを受け付けなくなる。
クリック・ホバー・選択などのコントロールをCSSでできる。
z-indexが手前の要素にかけて、後ろの要素にカーソルが
反応するようにできる。乱用注意。
- 64. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### border-image
border-image: url(A) 1 1 1 1 fill stretch;
IEの対応してなさと、フラットデザイン流行の りをうけて
最近はあまり必要とされていない可哀想な子。
画像を3x3分割してボーダー部分に画像を指定できる。
CSSらしい良くできた機能。SVGとの相性が良い。
時がくれば大活躍すること間違いなし。
- 65. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### text-overflow
text-overflow: ellipsis;
テキストがコンテナから れたら「...」を加えてくれるアレ。
プログラムでやろうとすると、文字列長での制限に妥協したり
バイナリ探索で れるポイントを見つけたりと面倒。
プログラムの地味なウィークポイントでもあったが
CSSでさっくりとできるようなった。※ただし1行に限るのが残念
- 66. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### Transition / Animation
transition: color 300ms ease-in-out;
animation: animName 300ms infinite alternate;
CSS3の代名詞にもなったアニメーション機能。
状態変化をスムーズにつなげるのがtransition。
キーに沿って変化をさせるのがanimation。
装飾的アニメーションなら絶対こちらを使いたい。
- 67. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### Transition / Animation
#### jQueryとCSSのアニメーションの違い
アニメーションの
上書き
最終値の決定
jQuery キューの蓄積 目標値優先
CSS マージ 状態優先
- 68. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### Transition / Animation
#### jQueryとCSSのアニメーションの違い
http://codepen.io/YusukeHirao/pen/xGyqBj
- 69. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### Transition / Animation
#### jQueryとCSSのアニメーションの違い
jQuery:
- キューをしっかり管理する必要がある場合
- アニメーションの終了を検知・保証して次の処理につなげる場合
CSS:
- 状態変化を滑らかにしたい場合
- 単独のループアニメーションオブジェクトをつくる場合
- 70. 2015 Yusuke Hirao, CC BY-ND.
CSSのできる子たち
### vw, vh, vmin, vmax Units
height: 56.25vw;
vwはwindowの幅を100とした単位。
パーセント指定との違いは、
windowの"幅"基準をheightに設定できるということ。
JavaScriptを使わなくて済むのはもちろん、
padding-topのトリッキーなテクニックを使う必要もない。
- 71. 2015 Yusuke Hirao, CC BY-ND.
アジェンダ
今日話すこと
===
- どんなプログラムを組んだら負けなのか
- CSSのできる子たち
- HTMLのできる子たち
- まとめ
- 73. 2015 Yusuke Hirao, CC BY-ND.
HTMLのできる子たち
HTML
===
- input types
- placeholder属性
- progress要素
- Form Validation
- 74. 2015 Yusuke Hirao, CC BY-ND.
HTMLのできる子たち
### input types
<input type="date"> etc...
HTML5の代表的機能のひとつ。
jQuery UIを使わなくてもデートピッカーがつかえる。
それぞれブラウザ対応や機能的に未熟なものが多く、
デザインのカスタマイズも難しいので、これからに期待。
- 75. 2015 Yusuke Hirao, CC BY-ND.
HTMLのできる子たち
### placeholder属性
<input placeholder="入力してください">
フォーム要素の拡張で一番嬉しかったのがコレ。
未入力の時に任意の文字を表示できる。
label要素や見出し・補足テキストの代替として利用するケースで
アクセシビリティ的に問題じゃないのか、という意見もある。
使い方注意。
- 76. 2015 Yusuke Hirao, CC BY-ND.
HTMLのできる子たち
### progress要素
<progress value="90">fallback msg.</progress>
HTML5の完全な新要素。新UI。
プログレスバーがJavaScriptなしで実装できる。
が、リアルタイムの進行変更などは完全にJavaScript任せに
なるので、単体でのほとんど利用シーンはない。
- 77. 2015 Yusuke Hirao, CC BY-ND.
HTMLのできる子たち
### Form Validation
<input required pattern="[a-z0-9_-]+">
JavaScriptなしである程度のバリデーションが実装できる。
細かい仕様と、デザインを気にしなければ
(デザインはCSSの擬似クラスがいずれ解決するかも)
ほぼ完結させることができる。
※サーバサイドのバリデーションはどちらにせよ必須。
- 78. 2015 Yusuke Hirao, CC BY-ND.
アジェンダ
今日話すこと
===
- どんなプログラムを組んだら負けなのか
- CSSのできる子たち
- HTMLのできる子たち
- まとめ
- 83. 2015 Yusuke Hirao, CC BY-ND.
まとめ
- HTML/CSSでできる部分を探そう
- 役割をしっかりわけよう
- プログラムを減らそう
コスト削減
- 84. 2015 Yusuke Hirao, CC BY-ND.
まとめ
- HTML/CSSでできる部分を探そう
- 役割をしっかりわけよう
- プログラムを減らそう
コスト削減 時間短縮
- 85. 2015 Yusuke Hirao, CC BY-ND.
まとめ
- HTML/CSSでできる部分を探そう
- 役割をしっかりわけよう
- プログラムを減らそう
コスト削減 時間短縮帰ろう!
- 86. 2015 Yusuke Hirao, CC BY-ND.
まとめ
- HTML/CSSでできる部分を探そう
- 役割をしっかりわけよう
- プログラムを減らそう
コスト削減 時間短縮帰ろう!
飲みに行こう!