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

70,346 views

Published on

2015年7月25日 マカベン × HTML5fun のセッションで使用したスライドです。

Published in: Technology
0 Comments
451 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
70,346
On SlideShare
0
From Embeds
0
Number of Embeds
3,642
Actions
Shares
0
Downloads
236
Comments
0
Likes
451
Embeds 0
No embeds

No notes for slide

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

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

×