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

45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込むYoshiki Hayama
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEYoshiki Hayama
 
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回Yoshiki Hayama
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!Yoshiki Hayama
 
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014Yoshiki Hayama
 
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話Yusuke Hisatsu
 
例外設計における大罪
例外設計における大罪例外設計における大罪
例外設計における大罪Takuto Wada
 
C#でわかる こわくないMonad
C#でわかる こわくないMonadC#でわかる こわくないMonad
C#でわかる こわくないMonadKouji Matsui
 
TDD のこころ
TDD のこころTDD のこころ
TDD のこころTakuto Wada
 
暗号技術の実装と数学
暗号技術の実装と数学暗号技術の実装と数学
暗号技術の実装と数学MITSUNARI Shigeo
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているKoichi Tanaka
 
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家Yoshiki Hayama
 
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~Yoshiki Hayama
 
「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方
「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方
「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方Yoshiki Hayama
 
目grep入門 +解説
目grep入門 +解説目grep入門 +解説
目grep入門 +解説murachue
 
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」U-dai Yokoyama
 
C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!TATSUYA HAYAMIZU
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)mosa siru
 
Pythonによる黒魔術入門
Pythonによる黒魔術入門Pythonによる黒魔術入門
Pythonによる黒魔術入門大樹 小倉
 
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのかシリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのかAtsushi Nakada
 

What's hot (20)

45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む45分間で「ユーザー中心のものづくり」ができるまで詰め込む
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
 
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回ユーザーインタビューからその後どうするの?得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
ユーザーインタビューからその後どうするの? 得られた情報を「UXデザイン」に落とし込む方法 | UXデザイン基礎セミナー 第3回
 
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
 
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
 
心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
 
例外設計における大罪
例外設計における大罪例外設計における大罪
例外設計における大罪
 
C#でわかる こわくないMonad
C#でわかる こわくないMonadC#でわかる こわくないMonad
C#でわかる こわくないMonad
 
TDD のこころ
TDD のこころTDD のこころ
TDD のこころ
 
暗号技術の実装と数学
暗号技術の実装と数学暗号技術の実装と数学
暗号技術の実装と数学
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
 
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
 
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
IT推進に必要なUXを学ぶ ~UXを意識して真の業務改善・真のDXを目指す~
 
「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方
「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方
「ウチの事業部の商品をWebサイト・アプリで目立たせて!」私だけじゃなかった! 社内政治と落としどころの見つけ方
 
目grep入門 +解説
目grep入門 +解説目grep入門 +解説
目grep入門 +解説
 
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
MVPパターンによる設計アプローチ「あなたのアプリ報連相できてますか」
 
C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
 
Pythonによる黒魔術入門
Pythonによる黒魔術入門Pythonによる黒魔術入門
Pythonによる黒魔術入門
 
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのかシリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
 

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
ネットワーク分散型フレームワークConViewRakuten 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 のプロダクト開発エンジニアが実践するスキルとしての SREIida 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 AppLINE Corporation
 
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-EdoiOSアプリ開発のためのSwiftビギナーズ勉強会 第6回    @Co-Edo
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-EdoMegumi 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

2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptxyassun7010
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizesatsushi061452
 
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptxssuserbefd24
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayersToru Tamaki
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )iwashiira2ctf
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一瑛一 西口
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose EstimationToru Tamaki
 
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...atsushi061452
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdfAyachika Kitazaki
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)keikoitakurag
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521Satoshi Makita
 

Recently uploaded (11)

2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
 
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 

プログラム組んだら負け!実は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/