プログラム組んだら負け！実はHTML/CSSだけでできること2015夏

1. @2015.07.25 マカベン HTML5fun

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

6. 2015 Yusuke Hirao, CC BY-ND. プログラム組んだら負け！実はHTML/CSSだけでできること

7. 2015 Yusuke Hirao, CC BY-ND. あれから5年...

10. 2015 Yusuke Hirao, CC BY-ND. ようやく...

11. 2015 Yusuke Hirao, CC BY-ND. HTML/CSSだけでできることが増えてきた一旦、ここでおさらいをしましょう

12. 2015 Yusuke Hirao, CC BY-ND. アジェンダ今日話すこと === - どんなプログラムを組んだら負けなのか - CSSのできる子たち - HTMLのできる子たち - まとめ

14. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか

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点 - 無駄なプログラムを組まない - 役割を明確に ←特にこっち

19. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのかさて問題。これどう実装する？ ===

20. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのかさて問題。これどう実装する？ === ## お題「トップページの新着情報の『New』アイコン」

21. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」

23. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」負けコード！

26. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」 A. プログラムにデザインの要件が混ざっている負けプログラム

27. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのかプログラムにデザインの要件が混ざっている問題点 ===

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アイコン変更の請求だそうですパートナープログラマあれだけ修正したわけですからね ※あくまで例えなのでフィクションです。

32. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのかでは、どう実装するとよかったのか？ ===

33. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのかでは、どう実装するとよかったのか？ === A. CSSの擬似要素をつかう

34. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのかでは、どう実装するとよかったのか？ === A. CSSの擬似要素をつかう

35. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのかでは、どう実装するとよかったのか？ ===

36. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのかでは、どう実装するとよかったのか？ === 場所を変えても...

37. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのかでは、どう実装するとよかったのか？ === 変更なし

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クラスを付加する役割分担！

47. 2015 Yusuke Hirao, CC BY-ND. CSSのできる子たち

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のできる子たち ### ﬁlter Eﬀects 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-overﬂow 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のトリッキーなテクニックを使う必要もない。

72. 2015 Yusuke Hirao, CC BY-ND. 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の擬似クラスがいずれ解決するかも）ほぼ完結させることができる。 ※サーバサイドのバリデーションはどちらにせよ必須。

79. 2015 Yusuke Hirao, CC BY-ND. まとめ

80. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう

81. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう - 役割をしっかりわけよう

82. 2015 Yusuke Hirao, CC BY-ND. まとめ - HTML/CSSでできる部分を探そう - 役割をしっかりわけよう - プログラムを減らそう

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でできる部分を探そう - 役割をしっかりわけよう - プログラムを減らそうコスト削減時間短縮帰ろう！飲みに行こう！

87. 2015 Yusuke Hirao, CC BY-ND. まとめ参考サイト Can I use http://caniuse.com/

88. ご清聴ありがとうございました。

プログラム組んだら負け！実はHTML/CSSだけでできること2015夏

Yusuke Hirao

Transcript of "プログラム組んだら負け！実はHTML/CSSだけでできること2015夏"

A particular slide catching your eye?