SlideShare a Scribd company logo
1 of 85
Download to read offline
フロント作業の
効率化@y_yoshinari
簡単に自己紹介
@y_yoshinari
• フロントエンドエンジニアです
• 2013年度新卒入社です (そろそろ入社して1年半)
• なぞってピグキッチンというサービスを制作しています
Webでこんなの作れるんだー的な感じで、後で遊んでみてもらえると嬉しいです(という宣伝)
突然ですが、
このインターンの開発期間は何日でしょう!
そうですね
5日間ですね
時間がないですね
ってことで
フロント作業の
効率化@y_yoshinari
もう1度テーマを確認
Agenda
• HTMLの効率化
• CSSの効率化
• JavaScriptの効率化
• Grunt
• Yeoman
HTML
入力の効率化
Emmet
• Zen-Codingの次期バージョン
• HTML, CSSの入力を簡略化出来る
• プラグインをインストールするだけで使える
Ctrl + e
例1
nav>ul#menu>li*5>a[href=#]{Item $}
例1
nav>ul#menu>li*5>a[href=#]{Item $}
<nav>
	 <ul id="menu">
	 	 <li><a href="#">Item 1</a></li>
	 	 <li><a href="#">Item 2</a></li>
	 	 <li><a href="#">Item 3</a></li>
	 	 <li><a href="#">Item 4</a></li>
	 	 <li><a href="#">Item 5</a></li>
	 </ul>
</nav>
Ctrl + e
例2
!
例2
!
<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
	 <title>Document</title>
</head>
<body>
	
</body>
</html>
Ctrl + e
テンプレートによる効率化
テンプレートエンジン
• HTMLのひな形を元にプログラムで加工し、
画面に出力するためのライブラリ
例
<ul>
	 <li>太郎:25歳</li>
	 <li>次郎:23歳</li>
	 <li>花子:22歳</li>
</ul>
var value = {
“userlist”: [
{ “name”: “太郎”, “age”: 25 },
{ “name”: “次郎”, “age”: 23 },
{ “name”: “花子”, “age”: 22 }
]
}
こんな形式にしたい
var value = {
“userlist”: [
{ “name”: “太郎”, “age”: 25 },
{ “name”: “次郎”, “age”: 23 },
{ “name”: “花子”, “age”: 22 }
]
}
<script id="input" type="text/x-handlebars-template">
<ul>
	 {{#each userlist}}
	 <li>{{name}}:{{age}}歳</li>
	 {{/each}}
</ul>
</script>
<div id=“output”></div>
var value = {
“userlist”: [
{ “name”: “太郎”, “age”: 25 },
{ “name”: “次郎”, “age”: 23 },
{ “name”: “花子”, “age”: 22 }
]
}
<script id="input" type="text/x-handlebars-template">
<ul>
	 {{#each userlist}}
	 <li>{{name}}:{{age}}歳</li>
	 {{/each}}
</ul>
</script>
<div id=“output”></div>
var value = {
“userlist”: [
{ “name”: “太郎”, “age”: 25 },
{ “name”: “次郎”, “age”: 23 },
{ “name”: “花子”, “age”: 22 }
]
}
var template = Handlebars.compile($('#input').html());
<script id="input" type="text/x-handlebars-template">
<ul>
	 {{#each userlist}}
	 <li>{{name}}:{{age}}歳</li>
	 {{/each}}
</ul>
</script>
<div id=“output”></div>
var values = {
“userlist”: [
{ “name”: “太郎”, “age”: 25 },
{ “name”: “次郎”, “age”: 23 },
{ “name”: “花子”, “age”: 22 }
]
}
var template = Handlebars.compile($('#input').html());
$('#output').html(template(value));
Handlebarsに関する+α
• ループ文だけでなく、if 文も使える
• ヘルパー関数を自作することも出来る
• コードの中でコンパイルしなくても、予めコ
ンパイルしておくことも出来る(早くなる)
CSS
入力の効率化
またEmmetの紹介です
例
db => display: block;
tac => text-align: center;
tdn => text-decoration: none;
poa => position: absolute;
m:a => margin: auto;
w50 => width: 50px;
bg+ => background: #fff url() 0 0 no-repeat;
-bdrs10 =>
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
チーム開発における効率化
プロパティの並び順を決める
• 複数人がコードを触る際に触りやすくなる
• gzip圧縮の効率が上がる
display
float, clear
position
top left right....
width height
margin
padding
border
color
background
font-size font-weight text-align
z-index overflow
CSSの設計手法を用いる
• 予測、再利用、保守、拡張がしやすくなる
• OOCSS, SMACSS, MCSSなどが存在する
• また、クラス名などの付け方の考え方として
BEMという考え方も存在する
この本で詳しく説明されてます
プリプロセッサによる効率化
CSSプリプロセッサ
• コンパイルをするとCSSに変換される
• ネイティブなCSSが持たない機能を提供
Stylusの思想
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
ブレス({})は省略できる?
body
font: 12px Helvetica, Arial, sans-serif;
a.button
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
セミコロン(;)も省略できる?
body
font: 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px
コロン(:)も省略できる?
body
font 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius 5px
-moz-border-radius 5px
border-radius 5px
同じ事を繰り返し書かないように
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius(5px)
自然なmixinに
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius 5px
便利な機能は外出ししよう
@import ‘vendor’
body
font 12px Helvetica, Arial, sans-serif
a.button
border-radius 5px
独自に関数を定義する事もできます
sum(nums...)
sum = 0
sum += n for n in nums
sum(1 2 3 4)
// => 10
それらは全てオプションです
fonts = helvetica, arial, sans-serif
body {
padding: 50px;
font: 14px/1.4 fonts;
}
ちなみに、
今の例は公式サイトにそのまま載っています
http://learnboost.github.io/stylus/
CSSへの変換方法
/* style.styl */
body
	 color red
	 p
	 	 color black
CSSへの変換方法
stylus ファイル名.styl => ファイル名.cssが生成される
/* style.styl */
body
	 color red
	 p
	 	 color black
CSSへの変換方法
stylus ファイル名.styl => ファイル名.cssが生成される
/* style.styl */
body
	 color red
	 p
	 	 color black
/* style.css */
body {
color: #f00;
}
body p {
color: #000;
}
JavaScript
車輪の再発明をしない効率化
jQuery, Zepto
• DOMアクセスなどを簡略化
// class名がnameのp要素に太郎を挿入
$( "p.name" ).html( “太郎" );
jQuery, Zepto
• DOMアクセスなどを簡略化
// class名がnameのp要素に太郎を挿入
$( "p.name" ).html( “太郎" );
// id名がbutton-containerのボタンをクリックした際に、
// id名がbanner-messageの要素を表示
var hiddenBox = $( "#banner-message" );
$( "#button-container button" ).on( "click", function( event ) {
hiddenBox.show();
});
Underscore, Lo-Dash
• ユーティリティライブラリ
// イテレーター
_.each([1, 2, 3], function (element, index, list) {
	 console.log(element + ‘ ’);
});
//=> 1 2 3
_.each({one: 1, two: 2, three: 3}, function (value, key, list) {
	 console.log(value + ‘ ’);
});
//=> 1 2 3
Underscore, Lo-Dash
• ユーティリティライブラリ
// イテレーター
_.each([1, 2, 3], function (element, index, list) {
	 console.log(element + ‘ ’);
});
//=> 1 2 3
_.each({one: 1, two: 2, three: 3}, function (value, key, list) {
	 console.log(value + ‘ ’);
});
//=> 1 2 3
// マッピング
_.map([1, 2, 3], function (num) {
return num * 3;
});
//=> [3, 6, 9]
RequireJS
• コードをモジュール化して分割出来る
• 読み込みを非同期に出来る
• 依存関係を明示化出来る
• WebPackやBrowserifyなども見てみると良いかも
// モジュールaを読み込む
var a = require('a');
Bucks.js
• フロー制御系ライブラリ
• 逐次実行(直列)も非同期実行(並列)も出来る
• 入れ子地獄にならないコードが書ける!
• 他にasync, jQuery.Deferred, Q, Whenなども存
在する
Bucks.js
• 逐次実行(直列)
var bucks = new Bucks();
bucks
.add(function (err, res, next) {
setTimeout(function () {
next();
}, 1000);
})
.add(function (err, res, next) {
setTimeout(function () {
next();
}, 1000);
})
.end();
Bucks.js
• 非同期実行(並列)
var bucks = new Bucks();
bucks
.parallel([
function (err, res, next) {
setTimeout(function () {
next();
}, 1000);
},
function (err, res, next) {
setTimeout(function () {
next();
}, 1000);
}
])
.end();
ゲーム作る人向け
• enchant.js, createJS, Pixi.js
コードを頑健化する効率化
MV*アーキテクチャ
• AngularJS, Backbone.js, Knockout.js, Vue.js
• JavaScriptフレームワーク
• 使いこなせれば強力です
MV*アーキテクチャ
• ちなみにうちのチームではbeezという社内開
発のフレームワークを使っています
https://github.com/CyberAgent/beez
AltJS
• Dart, CoffeeScript, TypeScript
• コンパイルしてJavaScriptに変換される言語
#import('dart:html');
void main() {
final String s = 'Hello, Dart!’;
updateText(s);
}
void updateText(String s) {
var elem = query('#text');
elem.text = 'message: ${s}';
} Dart
Grunt
いろいろ見てきたけど、
• handlebarsのプリコンパイル
• stylusのコンパイル
• AltJSのコンパイル
とかとか、やることいっぱい
それぞれコンパイルするの
面倒くさい
Grunt
• タスクランナー
• 予め設定しておいたタスクをまとめて走らせ
ることが出来る
• 自動化することも出来る
例:stylus + CoffeeScript
module.exports = function(grunt) {
grunt.initConfig({
stylus: {
compile: {
files: { 'path/to/result.css': 'path/to/source.styl' }
}
},
coffee : {
compile: {
files: { 'path/to/result.js': 'path/to/source.coffee' }
}
}
});
grunt.loadNpmTasks('grunt-contrib');
grunt.registerTask('default', ['stylus', 'coffee']);
};
例:stylus + CoffeeScript
module.exports = function(grunt) {
grunt.initConfig({
stylus: {
compile: {
files: { 'path/to/result.css': 'path/to/source.styl' }
}
},
coffee : {
compile: {
files: { 'path/to/result.js': 'path/to/source.coffee' }
}
}
});
grunt.loadNpmTasks('grunt-contrib');
grunt.registerTask('default', ['stylus', 'coffee']);
};
grunt
でも毎回 grunt を叩くのすら
面倒くさい
ファイルの変更を監視させる
module.exports = function(grunt) {
grunt.initConfig({
stylus: { … },
coffee: { … },
watch: {
stylus: {
files: ['path/to/source.styl'],
tasks: 'stylus'
},
coffee: {
files: ['path/to/source.coffee'],
tasks: 'coffee'
}
}
});
grunt.loadNpmTasks('grunt-contrib');
grunt.registerTask('default', 'watch');
};
ファイルの変更を監視させる
grunt
module.exports = function(grunt) {
grunt.initConfig({
stylus: { … },
coffee: { … },
watch: {
stylus: {
files: ['path/to/source.styl'],
tasks: 'stylus'
},
coffee: {
files: ['path/to/source.coffee'],
tasks: 'coffee'
}
}
});
grunt.loadNpmTasks('grunt-contrib');
grunt.registerTask('default', 'watch');
};
他にもいろいろ出来ます
• スプライトシートの作成
• WebFontの作成
• ファイルのminify
• ファイルのgzip圧縮
とかとか、他にもいっぱい
後継でgulpってのもあります
• こっちの方が設定ファイルが短く書ける
• しかも早い
• Gruntも使ったことなかったら、こっちの方が
取っ付きやすいかもです
Yeoman
新しいプロジェクトを作るとき
• ライブラリとか、gruntの設定ファイルとか、
前に使ったプロジェクト構成と同じ構成でや
りたい
毎回環境構築をするのも
面倒くさい
Yeoman
• スキャフォールディング(足場組み)ツール
• 自身の環境を使い回すことが出来る
最後に
いろいろ見てきたけど
5日間しか期間が無いので
自分たちでどこまで使えるのか
本当に自分たちのサービスに合っていのるかを考えて
取捨選択して使ってみると良いと思います。
あとメッチャ浅くしか説明していないので
興味があるものは自分で調べてみてください。
調べてみて分からなかったら
メンター陣に質問してもらえると!
今回話した技術は大体これに書いてあります
ではでは、
5日間頑張っていきましょう!

More Related Content

What's hot

webアプリケーションフレームワークの話
webアプリケーションフレームワークの話webアプリケーションフレームワークの話
webアプリケーションフレームワークの話Yoshihiro Ura
 
baserCMSのstripe連携プラグインを作った話
baserCMSのstripe連携プラグインを作った話baserCMSのstripe連携プラグインを作った話
baserCMSのstripe連携プラグインを作った話Tatsuhiko Uchiba
 
モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScriptOsamu Monoe
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1Nishida Kansuke
 
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法Maboroshi.inc
 
JJUG CCC 2017 Spring LT about JPA
JJUG CCC 2017 Spring LT about JPAJJUG CCC 2017 Spring LT about JPA
JJUG CCC 2017 Spring LT about JPANaoya Kojima
 
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会Yuji Nojima
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Yasuhito Yabe
 
SaCSS vol.63 動的なサイトの開発でgulpとBrowserSyncを使ってみる
SaCSS vol.63 動的なサイトの開発でgulpとBrowserSyncを使ってみるSaCSS vol.63 動的なサイトの開発でgulpとBrowserSyncを使ってみる
SaCSS vol.63 動的なサイトの開発でgulpとBrowserSyncを使ってみるMasashi Murakami
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選Horiguchi Seito
 
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とはMuyuu Fujita
 
次世代エンタープライズの開発環境をライブで読み解く
次世代エンタープライズの開発環境をライブで読み解く次世代エンタープライズの開発環境をライブで読み解く
次世代エンタープライズの開発環境をライブで読み解くShin Takeuchi
 
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 KomoriWordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komorimasaaki komori
 
Mroongaを選んだ理由と
ちょっと嬉しかった話
Mroongaを選んだ理由と
ちょっと嬉しかった話Mroongaを選んだ理由と
ちょっと嬉しかった話
Mroongaを選んだ理由と
ちょっと嬉しかった話Terui Masashi
 
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピングCapybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピングKoji Nakamura
 
Rubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピングRubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピングTakuro Sasaki
 
今日はMongoDBの話はしない
今日はMongoDBの話はしない今日はMongoDBの話はしない
今日はMongoDBの話はしないAkihiro Kuwano
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2Nishida Kansuke
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツevol-ni
 
いろいろ考えると日本語の全文検索もMySQLがいいね!
いろいろ考えると日本語の全文検索もMySQLがいいね!いろいろ考えると日本語の全文検索もMySQLがいいね!
いろいろ考えると日本語の全文検索もMySQLがいいね!Kouhei Sutou
 

What's hot (20)

webアプリケーションフレームワークの話
webアプリケーションフレームワークの話webアプリケーションフレームワークの話
webアプリケーションフレームワークの話
 
baserCMSのstripe連携プラグインを作った話
baserCMSのstripe連携プラグインを作った話baserCMSのstripe連携プラグインを作った話
baserCMSのstripe連携プラグインを作った話
 
モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScript
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
 
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
 
JJUG CCC 2017 Spring LT about JPA
JJUG CCC 2017 Spring LT about JPAJJUG CCC 2017 Spring LT about JPA
JJUG CCC 2017 Spring LT about JPA
 
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
 
SaCSS vol.63 動的なサイトの開発でgulpとBrowserSyncを使ってみる
SaCSS vol.63 動的なサイトの開発でgulpとBrowserSyncを使ってみるSaCSS vol.63 動的なサイトの開発でgulpとBrowserSyncを使ってみる
SaCSS vol.63 動的なサイトの開発でgulpとBrowserSyncを使ってみる
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
 
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
 
次世代エンタープライズの開発環境をライブで読み解く
次世代エンタープライズの開発環境をライブで読み解く次世代エンタープライズの開発環境をライブで読み解く
次世代エンタープライズの開発環境をライブで読み解く
 
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 KomoriWordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komori
 
Mroongaを選んだ理由と
ちょっと嬉しかった話
Mroongaを選んだ理由と
ちょっと嬉しかった話Mroongaを選んだ理由と
ちょっと嬉しかった話
Mroongaを選んだ理由と
ちょっと嬉しかった話
 
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピングCapybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
 
Rubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピングRubyで始めるWebスクレイピング
Rubyで始めるWebスクレイピング
 
今日はMongoDBの話はしない
今日はMongoDBの話はしない今日はMongoDBの話はしない
今日はMongoDBの話はしない
 
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
 
いろいろ考えると日本語の全文検索もMySQLがいいね!
いろいろ考えると日本語の全文検索もMySQLがいいね!いろいろ考えると日本語の全文検索もMySQLがいいね!
いろいろ考えると日本語の全文検索もMySQLがいいね!
 

Viewers also liked

インタラクションデザイン、その前に -UXなまトーク vol.2
インタラクションデザイン、その前に  -UXなまトーク vol.2インタラクションデザイン、その前に  -UXなまトーク vol.2
インタラクションデザイン、その前に -UXなまトーク vol.2Toshiaki Otsuka
 
IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方hidetoshi murohashi
 
インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2井上 誠
 
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方Taku ogawa
 
UXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトークUXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトークToshiaki Otsuka
 
UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料Satoru MURAKOSHI
 
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法寛 水野
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのかMikihiro Fujii
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩井上 誠
 
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜勝成 鈴江
 
SIG-Audio#6 プラグインを書かなくてもここまで出来る!Unityサウンド
SIG-Audio#6 プラグインを書かなくてもここまで出来る!UnityサウンドSIG-Audio#6 プラグインを書かなくてもここまで出来る!Unityサウンド
SIG-Audio#6 プラグインを書かなくてもここまで出来る!UnityサウンドIGDA Japan SIG-Audio
 
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法Takao Sumitomo
 
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービューTypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービューAkira Inoue
 
私はこれでJSONをやめました〜あるいはAWSの設定をコード化するとはどういうことか〜
私はこれでJSONをやめました〜あるいはAWSの設定をコード化するとはどういうことか〜私はこれでJSONをやめました〜あるいはAWSの設定をコード化するとはどういうことか〜
私はこれでJSONをやめました〜あるいはAWSの設定をコード化するとはどういうことか〜Terui Masashi
 
3日時間をもらったのでTypeScriptを触ってみた
3日時間をもらったのでTypeScriptを触ってみた3日時間をもらったのでTypeScriptを触ってみた
3日時間をもらったのでTypeScriptを触ってみたYasushi Kato
 
実践アニメーション
実践アニメーション実践アニメーション
実践アニメーションNaoya Yunoue
 
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
ウェブデザインにおける動きの演出について - WCAN 2014 Autumnウェブデザインにおける動きの演出について - WCAN 2014 Autumn
ウェブデザインにおける動きの演出について - WCAN 2014 Autumntakuo yamada
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門Shumpei Shiraishi
 

Viewers also liked (20)

インタラクションデザイン、その前に -UXなまトーク vol.2
インタラクションデザイン、その前に  -UXなまトーク vol.2インタラクションデザイン、その前に  -UXなまトーク vol.2
インタラクションデザイン、その前に -UXなまトーク vol.2
 
IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方IxD of AWA - インタラクションの考え方
IxD of AWA - インタラクションの考え方
 
20150806_UXnama_Goodpatch
20150806_UXnama_Goodpatch20150806_UXnama_Goodpatch
20150806_UXnama_Goodpatch
 
インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2
 
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
 
UXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトークUXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトーク
 
UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料
 
アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのか
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩
 
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜
C++でのゲームプログラミングをしたときのお話 札幌C++勉強会 #4 〜スタートゲームプログラミング〜
 
SIG-Audio#6 プラグインを書かなくてもここまで出来る!Unityサウンド
SIG-Audio#6 プラグインを書かなくてもここまで出来る!UnityサウンドSIG-Audio#6 プラグインを書かなくてもここまで出来る!Unityサウンド
SIG-Audio#6 プラグインを書かなくてもここまで出来る!Unityサウンド
 
用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法用途に合わせたアニメーションの実装方法
用途に合わせたアニメーションの実装方法
 
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービューTypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
 
私はこれでJSONをやめました〜あるいはAWSの設定をコード化するとはどういうことか〜
私はこれでJSONをやめました〜あるいはAWSの設定をコード化するとはどういうことか〜私はこれでJSONをやめました〜あるいはAWSの設定をコード化するとはどういうことか〜
私はこれでJSONをやめました〜あるいはAWSの設定をコード化するとはどういうことか〜
 
3日時間をもらったのでTypeScriptを触ってみた
3日時間をもらったのでTypeScriptを触ってみた3日時間をもらったのでTypeScriptを触ってみた
3日時間をもらったのでTypeScriptを触ってみた
 
実践アニメーション
実践アニメーション実践アニメーション
実践アニメーション
 
TypeScript超入門
TypeScript超入門TypeScript超入門
TypeScript超入門
 
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
ウェブデザインにおける動きの演出について - WCAN 2014 Autumnウェブデザインにおける動きの演出について - WCAN 2014 Autumn
ウェブデザインにおける動きの演出について - WCAN 2014 Autumn
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
 

Similar to フロント作業の効率化

現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについてNobukazu Hanada
 
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話terurou
 
Jubatusでマルウェア分類
Jubatusでマルウェア分類Jubatusでマルウェア分類
Jubatusでマルウェア分類Shuzo Kashihara
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうHishikawa Takuro
 
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~normalian
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSTakeharu Igari
 
PHPフレームワーク入門
PHPフレームワーク入門PHPフレームワーク入門
PHPフレームワーク入門Sho A
 
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説Kazumi IWANAGA
 
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験Toshio Ehara
 
大規模なJavaScript開発の話
大規模なJavaScript開発の話大規模なJavaScript開発の話
大規模なJavaScript開発の話terurou
 
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Masakazu Muraoka
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでgirigiribauer
 
「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方Yusuke Wada
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実Takumi Ohashi
 
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!Nishida Kansuke
 
地方企業がソーシャルゲーム開発を成功させるための10のポイント
地方企業がソーシャルゲーム開発を成功させるための10のポイント地方企業がソーシャルゲーム開発を成功させるための10のポイント
地方企業がソーシャルゲーム開発を成功させるための10のポイントKentaro Matsui
 
ナウなヤングにCloud Formationが流行ってほしい
ナウなヤングにCloud Formationが流行ってほしいナウなヤングにCloud Formationが流行ってほしい
ナウなヤングにCloud Formationが流行ってほしいSugawara Genki
 
Asakusa バッチの運用を支える技術
Asakusa バッチの運用を支える技術Asakusa バッチの運用を支える技術
Asakusa バッチの運用を支える技術KinebuchiTomo
 

Similar to フロント作業の効率化 (20)

現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
 
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
 
Jubatusでマルウェア分類
Jubatusでマルウェア分類Jubatusでマルウェア分類
Jubatusでマルウェア分類
 
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょうWordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
 
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
PHPフレームワーク入門
PHPフレームワーク入門PHPフレームワーク入門
PHPフレームワーク入門
 
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
 
Startup JavaScript
Startup JavaScriptStartup JavaScript
Startup JavaScript
 
Eight meets AWS
Eight meets AWSEight meets AWS
Eight meets AWS
 
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
 
大規模なJavaScript開発の話
大規模なJavaScript開発の話大規模なJavaScript開発の話
大規模なJavaScript開発の話
 
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
 
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまでa-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
 
「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方「Webサービスのつくり方」 のつくり方
「Webサービスのつくり方」 のつくり方
 
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
 
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
 
地方企業がソーシャルゲーム開発を成功させるための10のポイント
地方企業がソーシャルゲーム開発を成功させるための10のポイント地方企業がソーシャルゲーム開発を成功させるための10のポイント
地方企業がソーシャルゲーム開発を成功させるための10のポイント
 
ナウなヤングにCloud Formationが流行ってほしい
ナウなヤングにCloud Formationが流行ってほしいナウなヤングにCloud Formationが流行ってほしい
ナウなヤングにCloud Formationが流行ってほしい
 
Asakusa バッチの運用を支える技術
Asakusa バッチの運用を支える技術Asakusa バッチの運用を支える技術
Asakusa バッチの運用を支える技術
 

Recently uploaded

LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルCRI Japan, Inc.
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイントonozaty
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfTakayuki Nakayama
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdkokinagano2
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルCRI Japan, Inc.
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperleger Tokyo Meetup
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。iPride Co., Ltd.
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用KLab Inc. / Tech
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員Sadaomi Nishi
 

Recently uploaded (9)

LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 

フロント作業の効率化