SlideShare a Scribd company logo
1 of 13
Download to read offline
フロントエンド祭り LT
〜フロント/サーバをJavascriptで〜
シスウ株式会社
星野 善彦
2015年2月7日
自己紹介
星野 善彦 / Yoshihiko Hoshino 30歳
学生起業を経てWeb業界10年目
シスウ株式会社 代表
Node.js 3年 Mongo/MySQL 3年 HTML/Javascript/CSS 8年 C# / Java / Objective-C etc
麻雀 adsense
Javascriptの魅力
即効性
Node.jsを使う恥ずかしい理由
金が無い
流行ってない
メリット その2
デメリット
メモリ管理しないとゴミが残る
コールバック地獄
async.jsのいいところ
1:非同期でのループ処理
2:非同期処理共通の処理
他にも
async.parallel:並列実行
async.forEach:配列を処理
などなど。
var a = function(callback){
setTimout(function(){callback();},1000);
}
var b = function(callback){
//非同期処理B
setTimeout(function(){ callback();},2000);
}
var count = 0;
async.whilst(function(){
return count < 5;
},function(callback){
async.waterfall([function(next){
if(count ==0){
a(next);
}else{
b(next);
}
],function(e){
count++;
callback();
});
},function(e){
console.log(“finished”);
});
フロントエンドのJavascriptでできるトリッキーなこと紹介
img
var newImg = new Image();
newImg.onload = function(){
console.log(this.width);
console.log(this.height);
}
newImg.onerror = function(){
this.src = “エラー画像のソース ”;
}
newImg.src = “画像のソース”;
Node.js / Javascriptで開発したプラグイン
デモ:http://www.cinemawith-alc.com/2014/11/Interstellar12.html
2.対応プラットフォームやデバイス等
3つの特徴と用途
・タテ・ヨコ比が違ってもきれいに並ぶ
ガジェット、グルメ、バイラルメディアのデザイン性が向上
・スクロールで多くの記事を推薦できる
テキスト中心、画像中心、記事数が多いサイトのPV増
・スマホ / PC / タブレットあらゆるサイズのデバイス対応
制作系、検索に強い等のPCでもアクセスされやすいサイトのPV増
3.特徴と用途
4.製品ページのご案内
Milliard関連ページ
http://bit.ly/1DViZ1M
ご静聴有難うございました

More Related Content

What's hot

mrubyのfiberを試してみた
mrubyのfiberを試してみたmrubyのfiberを試してみた
mrubyのfiberを試してみたKindai University
 
EmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べたEmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べたkyon mm
 
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧ RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧ Mariko Kobayashi
 
擬似乱数生成器の評価
擬似乱数生成器の評価擬似乱数生成器の評価
擬似乱数生成器の評価Taku Miyakawa
 
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときNode.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときRyunosuke SATO
 
20170823 rmiを使ってみた
20170823 rmiを使ってみた20170823 rmiを使ってみた
20170823 rmiを使ってみたDaniel Sun
 
Ruby と C# をつなぐ
Ruby と C# をつなぐRuby と C# をつなぐ
Ruby と C# をつなぐ107steps
 
MySQLのリアルタイムモニタリングツールを作った話
MySQLのリアルタイムモニタリングツールを作った話MySQLのリアルタイムモニタリングツールを作った話
MySQLのリアルタイムモニタリングツールを作った話Kentaro Kitagawa
 
ちゃんとWeb会議スライド『Coffee script』
ちゃんとWeb会議スライド『Coffee script』ちゃんとWeb会議スライド『Coffee script』
ちゃんとWeb会議スライド『Coffee script』H2O Space. Co., Ltd.
 
コマンドライン使いもLibreOffice
コマンドライン使いもLibreOfficeコマンドライン使いもLibreOffice
コマンドライン使いもLibreOfficeKiwamu Okabe
 
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画するChart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画するiPride Co., Ltd.
 
円環の理(Garbage Collection)
円環の理(Garbage Collection)円環の理(Garbage Collection)
円環の理(Garbage Collection)Narihiro Nakamura
 
Node.js で Web アプリ開発
Node.js で Web アプリ開発Node.js で Web アプリ開発
Node.js で Web アプリ開発Tatsumi Naganuma
 
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリットSails.jsのメリット・デメリット
Sails.jsのメリット・デメリットIto Kohta
 
エコなWebサーバー
エコなWebサーバーエコなWebサーバー
エコなWebサーバーemasaka
 
20080426.1000speakers:4
20080426.1000speakers:420080426.1000speakers:4
20080426.1000speakers:4IWATA Susumu
 

What's hot (20)

mrubyのfiberを試してみた
mrubyのfiberを試してみたmrubyのfiberを試してみた
mrubyのfiberを試してみた
 
EmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べたEmitJSの環境をちょこっと調べた
EmitJSの環境をちょこっと調べた
 
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧ RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
RGで生き抜くためのレンタルサーバー講座ヽ(•̀ω•́ )ゝ✧
 
擬似乱数生成器の評価
擬似乱数生成器の評価擬似乱数生成器の評価
擬似乱数生成器の評価
 
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないときNode.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
 
20170823 rmiを使ってみた
20170823 rmiを使ってみた20170823 rmiを使ってみた
20170823 rmiを使ってみた
 
Ruby と C# をつなぐ
Ruby と C# をつなぐRuby と C# をつなぐ
Ruby と C# をつなぐ
 
Node.js入門
Node.js入門Node.js入門
Node.js入門
 
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャーNode.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
 
MySQLのリアルタイムモニタリングツールを作った話
MySQLのリアルタイムモニタリングツールを作った話MySQLのリアルタイムモニタリングツールを作った話
MySQLのリアルタイムモニタリングツールを作った話
 
MmapScanner
MmapScannerMmapScanner
MmapScanner
 
ちゃんとWeb会議スライド『Coffee script』
ちゃんとWeb会議スライド『Coffee script』ちゃんとWeb会議スライド『Coffee script』
ちゃんとWeb会議スライド『Coffee script』
 
コマンドライン使いもLibreOffice
コマンドライン使いもLibreOfficeコマンドライン使いもLibreOffice
コマンドライン使いもLibreOffice
 
Chart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画するChart.jsで簡単にグラフを描画する
Chart.jsで簡単にグラフを描画する
 
円環の理(Garbage Collection)
円環の理(Garbage Collection)円環の理(Garbage Collection)
円環の理(Garbage Collection)
 
Node.js で Web アプリ開発
Node.js で Web アプリ開発Node.js で Web アプリ開発
Node.js で Web アプリ開発
 
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリットSails.jsのメリット・デメリット
Sails.jsのメリット・デメリット
 
エコなWebサーバー
エコなWebサーバーエコなWebサーバー
エコなWebサーバー
 
Bp study39 nodejs
Bp study39 nodejsBp study39 nodejs
Bp study39 nodejs
 
20080426.1000speakers:4
20080426.1000speakers:420080426.1000speakers:4
20080426.1000speakers:4
 

Viewers also liked

BuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろうBuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろう松田 千尋
 
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207Kanako Kobayashi
 
Objective Front-End JavaScript
Objective Front-End JavaScriptObjective Front-End JavaScript
Objective Front-End JavaScriptMuyuu Fujita
 
React.jsでHowManyPizza
React.jsでHowManyPizzaReact.jsでHowManyPizza
React.jsでHowManyPizza松田 千尋
 
20141022 リサーチ向け・ブラウザだけでスクレイピング(浅野)
20141022 リサーチ向け・ブラウザだけでスクレイピング(浅野) 20141022 リサーチ向け・ブラウザだけでスクレイピング(浅野)
20141022 リサーチ向け・ブラウザだけでスクレイピング(浅野) Hirosuke Asano
 
第3回Webスクレイピング勉強会@東京 happyou.info
第3回Webスクレイピング勉強会@東京 happyou.info第3回Webスクレイピング勉強会@東京 happyou.info
第3回Webスクレイピング勉強会@東京 happyou.infoShogo Okamoto
 
ソーシャル・スクレイピング(2014年10月Webスクレイピング勉強会資料)
ソーシャル・スクレイピング(2014年10月Webスクレイピング勉強会資料)ソーシャル・スクレイピング(2014年10月Webスクレイピング勉強会資料)
ソーシャル・スクレイピング(2014年10月Webスクレイピング勉強会資料)yuzoakakura
 
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップスScraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップスTakuro Sasaki
 
サイト/ブログから本文抽出する方法
サイト/ブログから本文抽出する方法サイト/ブログから本文抽出する方法
サイト/ブログから本文抽出する方法Takuro Sasaki
 
大規模ログ分析におけるAmazon Web Servicesの活用
大規模ログ分析におけるAmazon Web Servicesの活用大規模ログ分析におけるAmazon Web Servicesの活用
大規模ログ分析におけるAmazon Web Servicesの活用Shintaro Takemura
 
Webクローリング&スクレイピングの最前線 公開用
Webクローリング&スクレイピングの最前線 公開用Webクローリング&スクレイピングの最前線 公開用
Webクローリング&スクレイピングの最前線 公開用Lumin Hacker
 
オープンデータ・パーソナルデータビジネス最前線
オープンデータ・パーソナルデータビジネス最前線オープンデータ・パーソナルデータビジネス最前線
オープンデータ・パーソナルデータビジネス最前線直之 伊藤
 
クローリングしにくいものに挑戦 公開用
クローリングしにくいものに挑戦 公開用クローリングしにくいものに挑戦 公開用
クローリングしにくいものに挑戦 公開用Lumin Hacker
 
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasanWordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan松田 千尋
 
かんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなしかんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなしharuna tanaka
 
オープニングトーク - 創設の思い・目的・進行方針  -データマイニング+WEB勉強会@東京
オープニングトーク - 創設の思い・目的・進行方針  -データマイニング+WEB勉強会@東京オープニングトーク - 創設の思い・目的・進行方針  -データマイニング+WEB勉強会@東京
オープニングトーク - 創設の思い・目的・進行方針  -データマイニング+WEB勉強会@東京Koichi Hamada
 
クラウドネイティブなアーキテクチャでサクサク解析
クラウドネイティブなアーキテクチャでサクサク解析クラウドネイティブなアーキテクチャでサクサク解析
クラウドネイティブなアーキテクチャでサクサク解析Yuta Imai
 
実践Excelスクレイピング
実践Excelスクレイピング実践Excelスクレイピング
実践Excelスクレイピング宏明 塩原
 

Viewers also liked (18)

BuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろうBuddyPressで街のポータルサイトを作ろう
BuddyPressで街のポータルサイトを作ろう
 
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
 
Objective Front-End JavaScript
Objective Front-End JavaScriptObjective Front-End JavaScript
Objective Front-End JavaScript
 
React.jsでHowManyPizza
React.jsでHowManyPizzaReact.jsでHowManyPizza
React.jsでHowManyPizza
 
20141022 リサーチ向け・ブラウザだけでスクレイピング(浅野)
20141022 リサーチ向け・ブラウザだけでスクレイピング(浅野) 20141022 リサーチ向け・ブラウザだけでスクレイピング(浅野)
20141022 リサーチ向け・ブラウザだけでスクレイピング(浅野)
 
第3回Webスクレイピング勉強会@東京 happyou.info
第3回Webスクレイピング勉強会@東京 happyou.info第3回Webスクレイピング勉強会@東京 happyou.info
第3回Webスクレイピング勉強会@東京 happyou.info
 
ソーシャル・スクレイピング(2014年10月Webスクレイピング勉強会資料)
ソーシャル・スクレイピング(2014年10月Webスクレイピング勉強会資料)ソーシャル・スクレイピング(2014年10月Webスクレイピング勉強会資料)
ソーシャル・スクレイピング(2014年10月Webスクレイピング勉強会資料)
 
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップスScraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
Scraping withawsAWSを利用してスクレイピングの悩みを解決するチップス
 
サイト/ブログから本文抽出する方法
サイト/ブログから本文抽出する方法サイト/ブログから本文抽出する方法
サイト/ブログから本文抽出する方法
 
大規模ログ分析におけるAmazon Web Servicesの活用
大規模ログ分析におけるAmazon Web Servicesの活用大規模ログ分析におけるAmazon Web Servicesの活用
大規模ログ分析におけるAmazon Web Servicesの活用
 
Webクローリング&スクレイピングの最前線 公開用
Webクローリング&スクレイピングの最前線 公開用Webクローリング&スクレイピングの最前線 公開用
Webクローリング&スクレイピングの最前線 公開用
 
オープンデータ・パーソナルデータビジネス最前線
オープンデータ・パーソナルデータビジネス最前線オープンデータ・パーソナルデータビジネス最前線
オープンデータ・パーソナルデータビジネス最前線
 
クローリングしにくいものに挑戦 公開用
クローリングしにくいものに挑戦 公開用クローリングしにくいものに挑戦 公開用
クローリングしにくいものに挑戦 公開用
 
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasanWordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
 
かんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなしかんたん!わかりやすいWafのおはなし
かんたん!わかりやすいWafのおはなし
 
オープニングトーク - 創設の思い・目的・進行方針  -データマイニング+WEB勉強会@東京
オープニングトーク - 創設の思い・目的・進行方針  -データマイニング+WEB勉強会@東京オープニングトーク - 創設の思い・目的・進行方針  -データマイニング+WEB勉強会@東京
オープニングトーク - 創設の思い・目的・進行方針  -データマイニング+WEB勉強会@東京
 
クラウドネイティブなアーキテクチャでサクサク解析
クラウドネイティブなアーキテクチャでサクサク解析クラウドネイティブなアーキテクチャでサクサク解析
クラウドネイティブなアーキテクチャでサクサク解析
 
実践Excelスクレイピング
実践Excelスクレイピング実践Excelスクレイピング
実践Excelスクレイピング
 

Similar to Js祭り

Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Masakazu Muraoka
 
JS非同期処理のいま
JS非同期処理のいまJS非同期処理のいま
JS非同期処理のいまMasakazu Muraoka
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門miso- soup3
 
詳解!自動結合テスト #jasst
詳解!自動結合テスト #jasst詳解!自動結合テスト #jasst
詳解!自動結合テスト #jasstkyon mm
 
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッションKei Nakazawa
 
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscriptenJSオジサン openframeworks emscripten
JSオジサン openframeworks emscriptenminoru nakanou
 
Jsのビルド環境
Jsのビルド環境Jsのビルド環境
Jsのビルド環境fourside
 
React.jsを勉強しよう
React.jsを勉強しようReact.jsを勉強しよう
React.jsを勉強しようHikaru Sato
 
Java トラブル解析支援ツール HeapStats のご紹介
Java トラブル解析支援ツール HeapStats のご紹介Java トラブル解析支援ツール HeapStats のご紹介
Java トラブル解析支援ツール HeapStats のご紹介Shinya Takebayashi
 
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on20140517 knockoutjs hands-on
20140517 knockoutjs hands-onSeiji Noro
 
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考えるRailsのフロントエンド開発を考える
Railsのフロントエンド開発を考えるHirata Tomoko
 
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Tokuhiro Matsuno
 
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発emasaka
 
Async flow controll basic and practice
Async flow controll basic and practiceAsync flow controll basic and practice
Async flow controll basic and practiceMasakazu Muraoka
 
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さSho Okada
 
Swiftからlibuvを呼び出すTIPS
Swiftからlibuvを呼び出すTIPSSwiftからlibuvを呼び出すTIPS
Swiftからlibuvを呼び出すTIPSjugemjugemjugem
 
20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osakaSeiji Noro
 

Similar to Js祭り (20)

Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
 
JS非同期処理のいま
JS非同期処理のいまJS非同期処理のいま
JS非同期処理のいま
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
Introduction pp.js
Introduction pp.jsIntroduction pp.js
Introduction pp.js
 
詳解!自動結合テスト #jasst
詳解!自動結合テスト #jasst詳解!自動結合テスト #jasst
詳解!自動結合テスト #jasst
 
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
 
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscriptenJSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
 
Jsのビルド環境
Jsのビルド環境Jsのビルド環境
Jsのビルド環境
 
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
 ぼく(たち)のかんがえた最新のJS開発環境 #scripty04 ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
 
React.jsを勉強しよう
React.jsを勉強しようReact.jsを勉強しよう
React.jsを勉強しよう
 
Java トラブル解析支援ツール HeapStats のご紹介
Java トラブル解析支援ツール HeapStats のご紹介Java トラブル解析支援ツール HeapStats のご紹介
Java トラブル解析支援ツール HeapStats のご紹介
 
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on20140517 knockoutjs hands-on
20140517 knockoutjs hands-on
 
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考えるRailsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
 
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
 
Walking front end
Walking front endWalking front end
Walking front end
 
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
ゲットーの斜め上をゆくWebアプリケーションフレームワークの開発
 
Async flow controll basic and practice
Async flow controll basic and practiceAsync flow controll basic and practice
Async flow controll basic and practice
 
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
 
Swiftからlibuvを呼び出すTIPS
Swiftからlibuvを呼び出すTIPSSwiftからlibuvを呼び出すTIPS
Swiftからlibuvを呼び出すTIPS
 
20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka
 

Js祭り