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

More Related Content

What's hot

エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
Reimi Kuramochi Chiba
 
コンテナとimmutableとわたし。あとセキュリティ。(Kubernetes Novice Tokyo #15 発表資料)
コンテナとimmutableとわたし。あとセキュリティ。(Kubernetes Novice Tokyo #15 発表資料)コンテナとimmutableとわたし。あとセキュリティ。(Kubernetes Novice Tokyo #15 発表資料)
コンテナとimmutableとわたし。あとセキュリティ。(Kubernetes Novice Tokyo #15 発表資料)
NTT DATA Technology & Innovation
 
PostgreSQL: XID周回問題に潜む別の問題
PostgreSQL: XID周回問題に潜む別の問題PostgreSQL: XID周回問題に潜む別の問題
PostgreSQL: XID周回問題に潜む別の問題
NTT DATA OSS Professional Services
 
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
 
WayOfNoTrouble.pptx
WayOfNoTrouble.pptxWayOfNoTrouble.pptx
WayOfNoTrouble.pptx
Daisuke Yamazaki
 
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
Shohei Koyama
 
Amazon AthenaでSageMakerを使った推論
Amazon AthenaでSageMakerを使った推論Amazon AthenaでSageMakerを使った推論
Amazon AthenaでSageMakerを使った推論
西岡 賢一郎
 
はじめてのPRD
はじめてのPRDはじめてのPRD
はじめてのPRD
Takuya Oikawa
 
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
Yoshiki Hayama
 
SQLアンチパターン~スパゲッティクエリ
SQLアンチパターン~スパゲッティクエリSQLアンチパターン~スパゲッティクエリ
SQLアンチパターン~スパゲッティクエリ
Itabashi Masayuki
 
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
Yoshiki Hayama
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
Yoshiki Hayama
 
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
Tokoroten Nakayama
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
 
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
 
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
Shuichi Tsutsumi
 
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3 データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
Hiroshi Ito
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
 

What's hot (20)

エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
 
コンテナとimmutableとわたし。あとセキュリティ。(Kubernetes Novice Tokyo #15 発表資料)
コンテナとimmutableとわたし。あとセキュリティ。(Kubernetes Novice Tokyo #15 発表資料)コンテナとimmutableとわたし。あとセキュリティ。(Kubernetes Novice Tokyo #15 発表資料)
コンテナとimmutableとわたし。あとセキュリティ。(Kubernetes Novice Tokyo #15 発表資料)
 
PostgreSQL: XID周回問題に潜む別の問題
PostgreSQL: XID周回問題に潜む別の問題PostgreSQL: XID周回問題に潜む別の問題
PostgreSQL: XID周回問題に潜む別の問題
 
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
 
WayOfNoTrouble.pptx
WayOfNoTrouble.pptxWayOfNoTrouble.pptx
WayOfNoTrouble.pptx
 
インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方インフラエンジニアの綺麗で優しい手順書の書き方
インフラエンジニアの綺麗で優しい手順書の書き方
 
Amazon AthenaでSageMakerを使った推論
Amazon AthenaでSageMakerを使った推論Amazon AthenaでSageMakerを使った推論
Amazon AthenaでSageMakerを使った推論
 
はじめてのPRD
はじめてのPRDはじめてのPRD
はじめてのPRD
 
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回
 
SQLアンチパターン~スパゲッティクエリ
SQLアンチパターン~スパゲッティクエリSQLアンチパターン~スパゲッティクエリ
SQLアンチパターン~スパゲッティクエリ
 
ユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさユーザーインタビューするときは、どうやらゾンビのおでましさ
ユーザーインタビューするときは、どうやらゾンビのおでましさ
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
「UXデザインとは」からはじめる「本流」のUXデザインはじめの一歩 | UXデザイン基礎セミナー 第1回
 
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
 
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
 
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで
 
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3 データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
データ履歴管理のためのテンポラルデータモデルとReladomoの紹介 #jjug_ccc #ccc_g3
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
 

Viewers also liked

技術選択とアーキテクトの役割
技術選択とアーキテクトの役割技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
Toru Yamaguchi
 
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
偶然にも500万個のSSH公開鍵を手に入れた俺たちは偶然にも500万個のSSH公開鍵を手に入れた俺たちは
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
Yoshio Hanawa
 
運用に自動化を求めるのは間違っているだろうか
運用に自動化を求めるのは間違っているだろうか運用に自動化を求めるのは間違っているだろうか
運用に自動化を求めるのは間違っているだろうか
Masahito Zembutsu
 
「内積が見えると統計学も見える」第5回 プログラマのための数学勉強会 発表資料
「内積が見えると統計学も見える」第5回 プログラマのための数学勉強会 発表資料 「内積が見えると統計学も見える」第5回 プログラマのための数学勉強会 発表資料
「内積が見えると統計学も見える」第5回 プログラマのための数学勉強会 発表資料
Ken'ichi Matsui
 
実践イカパケット解析
実践イカパケット解析実践イカパケット解析
実践イカパケット解析
Yuki Mizuno
 
MySQLテーブル設計入門
MySQLテーブル設計入門MySQLテーブル設計入門
MySQLテーブル設計入門
yoku0825
 
プログラマのための線形代数再入門
プログラマのための線形代数再入門プログラマのための線形代数再入門
プログラマのための線形代数再入門
Taketo Sano
 
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれからウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
Hiroshi Kawada
 
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
樽八 仲川
 
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
 
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
慎一 古賀
 
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
Takeshi HASEGAWA
 
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Livesense Inc.
 
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
Noriaki Kadota
 
SSL/TLSの基礎と最新動向
SSL/TLSの基礎と最新動向SSL/TLSの基礎と最新動向
SSL/TLSの基礎と最新動向
shigeki_ohtsu
 
フーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組みフーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組み
yuichi takeda
 
MySQL 5.7の罠があなたを狙っている
MySQL 5.7の罠があなたを狙っているMySQL 5.7の罠があなたを狙っている
MySQL 5.7の罠があなたを狙っている
yoku0825
 
エンジニアのための経営学
エンジニアのための経営学エンジニアのための経営学
エンジニアのための経営学
Michitaka Yumoto
 
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
Livesense Inc.
 
インフラエンジニアがUnityをやるべきたった一つの理由
インフラエンジニアがUnityをやるべきたった一つの理由インフラエンジニアがUnityをやるべきたった一つの理由
インフラエンジニアがUnityをやるべきたった一つの理由
axsh co., LTD.
 

Viewers also liked (20)

技術選択とアーキテクトの役割
技術選択とアーキテクトの役割技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
 
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
偶然にも500万個のSSH公開鍵を手に入れた俺たちは偶然にも500万個のSSH公開鍵を手に入れた俺たちは
偶然にも500万個のSSH公開鍵を手に入れた俺たちは
 
運用に自動化を求めるのは間違っているだろうか
運用に自動化を求めるのは間違っているだろうか運用に自動化を求めるのは間違っているだろうか
運用に自動化を求めるのは間違っているだろうか
 
「内積が見えると統計学も見える」第5回 プログラマのための数学勉強会 発表資料
「内積が見えると統計学も見える」第5回 プログラマのための数学勉強会 発表資料 「内積が見えると統計学も見える」第5回 プログラマのための数学勉強会 発表資料
「内積が見えると統計学も見える」第5回 プログラマのための数学勉強会 発表資料
 
実践イカパケット解析
実践イカパケット解析実践イカパケット解析
実践イカパケット解析
 
MySQLテーブル設計入門
MySQLテーブル設計入門MySQLテーブル設計入門
MySQLテーブル設計入門
 
プログラマのための線形代数再入門
プログラマのための線形代数再入門プログラマのための線形代数再入門
プログラマのための線形代数再入門
 
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれからウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
 
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
 
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
 
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
ちゃんとした C# プログラムを書けるようになる実践的な方法~ Visual Studio を使った 高品質・低コスト・保守性の高い開発
 
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
「スプラトゥーン」リアルタイム画像解析ツール 「IkaLog」の裏側
 
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
 
中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術中の下のエンジニアを脱出するための仕事術
中の下のエンジニアを脱出するための仕事術
 
SSL/TLSの基礎と最新動向
SSL/TLSの基礎と最新動向SSL/TLSの基礎と最新動向
SSL/TLSの基礎と最新動向
 
フーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組みフーリエ変換と画像圧縮の仕組み
フーリエ変換と画像圧縮の仕組み
 
MySQL 5.7の罠があなたを狙っている
MySQL 5.7の罠があなたを狙っているMySQL 5.7の罠があなたを狙っている
MySQL 5.7の罠があなたを狙っている
 
エンジニアのための経営学
エンジニアのための経営学エンジニアのための経営学
エンジニアのための経営学
 
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
 
インフラエンジニアがUnityをやるべきたった一つの理由
インフラエンジニアがUnityをやるべきたった一つの理由インフラエンジニアがUnityをやるべきたった一つの理由
インフラエンジニアがUnityをやるべきたった一つの理由
 

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

ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場
Shota Suzuki
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
 
おしゃれCatalystに触ってみた
おしゃれCatalystに触ってみたおしゃれCatalystに触ってみた
おしゃれCatalystに触ってみた
tomohiro morishita
 
Web開発の 今までとこれから
Web開発の 今までとこれからWeb開発の 今までとこれから
Web開発の 今までとこれから
Shinichi Takahashi
 
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃおAngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
Toshio Ehara
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Rakuten Group, Inc.
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
 
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくるエンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
Ishikawa Yuya
 
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
Iida Yukako
 
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
Tsuyoshi Nakao
 
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
Masahito Zembutsu
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
 
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてlychee .
 
次世代Web業務アプリケーション
次世代Web業務アプリケーション次世代Web業務アプリケーション
次世代Web業務アプリケーションFumio SAGAWA
 
The Fastest Possible Way to Develop an Interactive App
The Fastest Possible Way to Develop an Interactive AppThe Fastest Possible Way to Develop an Interactive App
The Fastest Possible Way to Develop an Interactive App
LINE Corporation
 
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-EdoiOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
Megumi Otani(Czenhe)
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
Monaca
 
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
YuzoHirakawa
 
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
Masahiro Hidaka
 
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
Kazuki Murahama
 

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

ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場ハイブリットソーシャルゲームの現場
ハイブリットソーシャルゲームの現場
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
おしゃれCatalystに触ってみた
おしゃれCatalystに触ってみたおしゃれCatalystに触ってみた
おしゃれCatalystに触ってみた
 
Web開発の 今までとこれから
Web開発の 今までとこれからWeb開発の 今までとこれから
Web開発の 今までとこれから
 
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃおAngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
 
エンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくるエンジニアと"協同"してサービスをつくる
エンジニアと"協同"してサービスをつくる
 
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
 
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
 
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
 
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
 
Android開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携についてAndroid開発者とデザイナーの効率的な連携について
Android開発者とデザイナーの効率的な連携について
 
次世代Web業務アプリケーション
次世代Web業務アプリケーション次世代Web業務アプリケーション
次世代Web業務アプリケーション
 
The Fastest Possible Way to Develop an Interactive App
The Fastest Possible Way to Develop an Interactive AppThe Fastest Possible Way to Develop an Interactive App
The Fastest Possible Way to Develop an Interactive App
 
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-EdoiOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
 
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
 
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
Devsumi2013 15-C-1 実践!スマホアプリのマネタイズ!! ~マーケット把握術と iPhone&Androidプログラミングテクニック~
 
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
2022_08_10 SaaS.tech #5業務システム開発でデザインとフロントエンドも妥協しない話
 

Recently uploaded

Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
sugiuralab
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
Osaka University
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
ARISE analytics
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
Yuki Miyazaki
 

Recently uploaded (9)

Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
 

プログラム組んだら負け!実は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
  • 6. 2015 Yusuke Hirao, CC BY-ND. プログラム組んだら負け! 実はHTML/CSSだけでできること
  • 7. 2015 Yusuke Hirao, CC BY-ND. あれから5年...
  • 8. 2015 Yusuke Hirao, CC BY-ND. あれから3年...
  • 9. 2015 Yusuke Hirao, CC BY-ND. あれから1年...
  • 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のできる子たち - まとめ
  • 13. 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』アイコン」
  • 22. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」
  • 23. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」 負けコード!
  • 24. 2015 Yusuke Hirao, CC BY-ND. どんなプログラムを組んだら負けなのか ## お題「トップページの新着情報の『New』アイコン」
  • 25. 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クラスを付加する 役割分担!
  • 46. 2015 Yusuke Hirao, CC BY-ND. アジェンダ 今日話すこと === - どんなプログラムを組んだら負けなのか - CSSのできる子たち - HTMLのできる子たち - まとめ
  • 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のできる子たち ### 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のできる子たち - まとめ
  • 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の擬似クラスがいずれ解決するかも) ほぼ完結させることができる。 ※サーバサイドのバリデーションはどちらにせよ必須。
  • 78. 2015 Yusuke Hirao, CC BY-ND. アジェンダ 今日話すこと === - どんなプログラムを組んだら負けなのか - CSSのできる子たち - HTMLのできる子たち - まとめ
  • 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/