SlideShare uma empresa Scribd logo
1 de 26
 
業務のための JavaScript 勉強法? 岩田 享 LLP  メガネラボ [email_address]
アジェンダ ,[object Object],[object Object],[object Object],[object Object]
自己紹介
自己紹介 ,[object Object],[object Object],[object Object],[object Object]
本題
本題 業務のための JavaScript 勉強法?
本題 わかりません  ><
本題 ... ということで個人的見解
本題 JavaScript HTML+DOM CSS
サンプル
サンプル アニメーション PNG (透過) のようなものを作ってみる
サンプル ,[object Object],<div id=&quot;anim”></div>
サンプル ,[object Object],#anim { overflow: hidden; background-image: url(animation.png); ... }
サンプル .frame-0 { background-position: 0 0; } .frame-1 { background-position: 0 ...px; } .frame-2 { background-position: 0 ...px; } . . . ,[object Object]
サンプル ,[object Object],var anim  = document.getElementById('anim') , frame = 0 ; // 200 ミリ秒ごとに  frame-1, frame-2, ... //  と,クラス名が切り替わっていく setInterval( function() { frame++; anim.className = 'frame-' + frame; ... }, 200 );
サンプル デモ
サンプル
まとめ
まとめ ,[object Object],[object Object],[object Object],[object Object]
もうひとつ ...
もうひとつ ... http://www.nicograph.jp/
もうひとつ ... http://www.54t.org/
よろしければ
ご静聴ありがとうございました
 

Mais conteúdo relacionado

Mais procurados

約束なんていらないPromiseよりもasync/awaitだ!
約束なんていらないPromiseよりもasync/awaitだ!約束なんていらないPromiseよりもasync/awaitだ!
約束なんていらないPromiseよりもasync/awaitだ!kaz3391
 
モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScriptOsamu Monoe
 
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介しくみ製作所
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2Moto Yan
 
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料leverages_event
 
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)Kousuke Ishikawa
 
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10Eucen Stew
 
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピングCapybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピングKoji Nakamura
 
Deep dive into oss written in swift
Deep dive into oss written in swiftDeep dive into oss written in swift
Deep dive into oss written in swiftYuki Asai
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626Taku AMANO
 
JavaScriptことはじめ
JavaScriptことはじめJavaScriptことはじめ
JavaScriptことはじめYuki Ishikawa
 
JavaScript でパックマン!第4回
JavaScript でパックマン!第4回JavaScript でパックマン!第4回
JavaScript でパックマン!第4回Project Samurai
 
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発Shuichi Takaya
 

Mais procurados (14)

約束なんていらないPromiseよりもasync/awaitだ!
約束なんていらないPromiseよりもasync/awaitだ!約束なんていらないPromiseよりもasync/awaitだ!
約束なんていらないPromiseよりもasync/awaitだ!
 
モテる JavaScript
モテる JavaScriptモテる JavaScript
モテる JavaScript
 
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
 
Web制作勉強会 #2
Web制作勉強会 #2Web制作勉強会 #2
Web制作勉強会 #2
 
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
 
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
 
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
 
Capybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピングCapybaraで雑にWebスクレイピング
Capybaraで雑にWebスクレイピング
 
Deep dive into oss written in swift
Deep dive into oss written in swiftDeep dive into oss written in swift
Deep dive into oss written in swift
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
JavaScriptことはじめ
JavaScriptことはじめJavaScriptことはじめ
JavaScriptことはじめ
 
JavaScript でパックマン!第4回
JavaScript でパックマン!第4回JavaScript でパックマン!第4回
JavaScript でパックマン!第4回
 
Js祭り
Js祭りJs祭り
Js祭り
 
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
 

Destaque

2012-09-09.nagoyapm07
2012-09-09.nagoyapm072012-09-09.nagoyapm07
2012-09-09.nagoyapm07IWATA Susumu
 
2013-07-13 Kyoto.pm #5 LT
2013-07-13 Kyoto.pm #5 LT2013-07-13 Kyoto.pm #5 LT
2013-07-13 Kyoto.pm #5 LTIWATA Susumu
 
2009-09-11 / YAPC::Asia 2009
2009-09-11 / YAPC::Asia 20092009-09-11 / YAPC::Asia 2009
2009-09-11 / YAPC::Asia 2009IWATA Susumu
 
2012 11-17.nagoyapm08
2012 11-17.nagoyapm082012 11-17.nagoyapm08
2012 11-17.nagoyapm08IWATA Susumu
 
20091010.Nagoyarubykaigi#01
20091010.Nagoyarubykaigi#0120091010.Nagoyarubykaigi#01
20091010.Nagoyarubykaigi#01IWATA Susumu
 
Introduction to wcf solutions
Introduction to wcf solutionsIntroduction to wcf solutions
Introduction to wcf solutionsMICTT Palma
 
2014 08-30 YAPC::Asia 2014 LT
2014 08-30 YAPC::Asia 2014 LT2014 08-30 YAPC::Asia 2014 LT
2014 08-30 YAPC::Asia 2014 LTIWATA Susumu
 
Developing Distributed Web Applications, Where does REST fit in?
Developing Distributed Web Applications, Where does REST fit in?Developing Distributed Web Applications, Where does REST fit in?
Developing Distributed Web Applications, Where does REST fit in?Srinath Perera
 
Distributed web based systems
Distributed web based systemsDistributed web based systems
Distributed web based systemsReza Gh
 
Siddhi: A Second Look at Complex Event Processing Implementations
Siddhi: A Second Look at Complex Event Processing ImplementationsSiddhi: A Second Look at Complex Event Processing Implementations
Siddhi: A Second Look at Complex Event Processing ImplementationsSrinath Perera
 
Distributed Systems
Distributed SystemsDistributed Systems
Distributed SystemsRupsee
 

Destaque (11)

2012-09-09.nagoyapm07
2012-09-09.nagoyapm072012-09-09.nagoyapm07
2012-09-09.nagoyapm07
 
2013-07-13 Kyoto.pm #5 LT
2013-07-13 Kyoto.pm #5 LT2013-07-13 Kyoto.pm #5 LT
2013-07-13 Kyoto.pm #5 LT
 
2009-09-11 / YAPC::Asia 2009
2009-09-11 / YAPC::Asia 20092009-09-11 / YAPC::Asia 2009
2009-09-11 / YAPC::Asia 2009
 
2012 11-17.nagoyapm08
2012 11-17.nagoyapm082012 11-17.nagoyapm08
2012 11-17.nagoyapm08
 
20091010.Nagoyarubykaigi#01
20091010.Nagoyarubykaigi#0120091010.Nagoyarubykaigi#01
20091010.Nagoyarubykaigi#01
 
Introduction to wcf solutions
Introduction to wcf solutionsIntroduction to wcf solutions
Introduction to wcf solutions
 
2014 08-30 YAPC::Asia 2014 LT
2014 08-30 YAPC::Asia 2014 LT2014 08-30 YAPC::Asia 2014 LT
2014 08-30 YAPC::Asia 2014 LT
 
Developing Distributed Web Applications, Where does REST fit in?
Developing Distributed Web Applications, Where does REST fit in?Developing Distributed Web Applications, Where does REST fit in?
Developing Distributed Web Applications, Where does REST fit in?
 
Distributed web based systems
Distributed web based systemsDistributed web based systems
Distributed web based systems
 
Siddhi: A Second Look at Complex Event Processing Implementations
Siddhi: A Second Look at Complex Event Processing ImplementationsSiddhi: A Second Look at Complex Event Processing Implementations
Siddhi: A Second Look at Complex Event Processing Implementations
 
Distributed Systems
Distributed SystemsDistributed Systems
Distributed Systems
 

Semelhante a 2008-07-12 / WCAN 2008 Summer Ligntning Talks #2

⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2Nishida Kansuke
 
JSX 速さの秘密 - 高速なJavaScriptを書く方法
JSX 速さの秘密 - 高速なJavaScriptを書く方法JSX 速さの秘密 - 高速なJavaScriptを書く方法
JSX 速さの秘密 - 高速なJavaScriptを書く方法Kazuho Oku
 
第一回Word bench八王子
第一回Word bench八王子第一回Word bench八王子
第一回Word bench八王子MakeGoodTime
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテストTomonori Yamada
 
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011Shuyo Nakatani
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップYasuhito Yabe
 
Declaimerっていうやつつくった(つくってる)
Declaimerっていうやつつくった(つくってる)Declaimerっていうやつつくった(つくってる)
Declaimerっていうやつつくった(つくってる)Joe_noh
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Kazunari Hara
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作西畑 一馬
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -Hayato Mizuno
 
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜Yuki Minakawa
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門miso- soup3
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanillaNaoki Matsuda
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門Hiroki Toyokawa
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6masaaki komori
 
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話Cherry Pie Web
 
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_QueryHidekazu Ishikawa
 
Jawsdays2017(配布用)
Jawsdays2017(配布用)Jawsdays2017(配布用)
Jawsdays2017(配布用)Yutaka Hiroyama
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7Naoki Matsuda
 
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッションKei Nakazawa
 

Semelhante a 2008-07-12 / WCAN 2008 Summer Ligntning Talks #2 (20)

⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
JSX 速さの秘密 - 高速なJavaScriptを書く方法
JSX 速さの秘密 - 高速なJavaScriptを書く方法JSX 速さの秘密 - 高速なJavaScriptを書く方法
JSX 速さの秘密 - 高速なJavaScriptを書く方法
 
第一回Word bench八王子
第一回Word bench八王子第一回Word bench八王子
第一回Word bench八王子
 
アプリコンテスト
アプリコンテストアプリコンテスト
アプリコンテスト
 
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Declaimerっていうやつつくった(つくってる)
Declaimerっていうやつつくった(つくってる)Declaimerっていうやつつくった(つくってる)
Declaimerっていうやつつくった(つくってる)
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
 
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
 
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6
 
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
 
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
 
Jawsdays2017(配布用)
Jawsdays2017(配布用)Jawsdays2017(配布用)
Jawsdays2017(配布用)
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
 
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
 

Último

業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 

Último (7)

業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス