Enviar pesquisa
Carregar
⑮jQueryをおぼえよう!その1
•
68 gostaram
•
11,230 visualizações
Nishida Kansuke
Seguir
https://www.facebook.com/TonosamaLabo
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 66
Recomendados
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
Recomendados
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
Haxe で始める CreateJS
Haxe で始める CreateJS
クラスメソッド株式会社
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
HTMLからの本文抽出
HTMLからの本文抽出
Lintaro Ina
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
ウェブから情報をあつめる
ウェブから情報をあつめる
Shuhei Iitsuka
JavaScriptの落とし穴
JavaScriptの落とし穴
ikdysfm
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Hayato Mizuno
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
Mais conteúdo relacionado
Mais procurados
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
Haxe で始める CreateJS
Haxe で始める CreateJS
クラスメソッド株式会社
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
HTMLからの本文抽出
HTMLからの本文抽出
Lintaro Ina
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
ウェブから情報をあつめる
ウェブから情報をあつめる
Shuhei Iitsuka
JavaScriptの落とし穴
JavaScriptの落とし穴
ikdysfm
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
Mais procurados
(20)
JavaScript Basic 01
JavaScript Basic 01
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
はじめよう Backbone.js
はじめよう Backbone.js
マークアップ講座 01b HTML
マークアップ講座 01b HTML
WordPressプラグイン作成入門
WordPressプラグイン作成入門
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
2時間で学ぶjQuery
2時間で学ぶjQuery
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
Haxe で始める CreateJS
Haxe で始める CreateJS
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
HTMLからの本文抽出
HTMLからの本文抽出
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
ウェブから情報をあつめる
ウェブから情報をあつめる
JavaScriptの落とし穴
JavaScriptの落とし穴
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Destaque
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
Hayato Mizuno
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
Destaque
(8)
ノンプログラマーのためのjQuery入門
ノンプログラマーのためのjQuery入門
HTML5, きちんと。
HTML5, きちんと。
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
色彩センスのいらない配色講座
色彩センスのいらない配色講座
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
Semelhante a ⑮jQueryをおぼえよう!その1
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
Takeshi Arabiki
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Yuji Nojima
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
Kiyokazu Kaba
本番環境で使いたいPHP
本番環境で使いたいPHP
Takuya Sato
レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発
Naoyuki Kataoka
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
今さら聞けないWebサーバの基本知識と選び方
今さら聞けないWebサーバの基本知識と選び方
Endoh Shingo
RealtimeTweakPickerMode
RealtimeTweakPickerMode
Yoh Akiyama
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
Yusuke Hirano
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
Yusuke Hirano
議論を描く技術「ファシリテーショングラフィック」
議論を描く技術「ファシリテーショングラフィック」
nishikawa_makoto7
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Naoto Koshikawa
ビビッド・パワポ・オペレーションβ ~エンジニアのための、ゆるふわパワポ術~(qpstudy 2013.01 LT)
ビビッド・パワポ・オペレーションβ ~エンジニアのための、ゆるふわパワポ術~(qpstudy 2013.01 LT)
Masahito Zembutsu
なんとかStormに負けたくないEmacs初級篇
なんとかStormに負けたくないEmacs初級篇
Kenta USAMI
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
CloudFormation Getting Started with YAML
CloudFormation Getting Started with YAML
Yukitaka Ohmura
YAPC::Asia 2014 - 半端なPHPDisでPHPerに陰で笑われないためのPerl Monger向け最新PHP事情
YAPC::Asia 2014 - 半端なPHPDisでPHPerに陰で笑われないためのPerl Monger向け最新PHP事情
Junichi Ishida
フレームワーク使おうぜ!
フレームワーク使おうぜ!
Takuya Sato
Semelhante a ⑮jQueryをおぼえよう!その1
(20)
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
誰にでもできるパフォーマンスチューニング
誰にでもできるパフォーマンスチューニング
本番環境で使いたいPHP
本番環境で使いたいPHP
レンタルサーバで今すぐ始めるWEB開発
レンタルサーバで今すぐ始めるWEB開発
HTML5 アプリ開発
HTML5 アプリ開発
今さら聞けないWebサーバの基本知識と選び方
今さら聞けないWebサーバの基本知識と選び方
RealtimeTweakPickerMode
RealtimeTweakPickerMode
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
議論を描く技術「ファシリテーショングラフィック」
議論を描く技術「ファシリテーショングラフィック」
MF GeeksNight pplogの話
MF GeeksNight pplogの話
ビビッド・パワポ・オペレーションβ ~エンジニアのための、ゆるふわパワポ術~(qpstudy 2013.01 LT)
ビビッド・パワポ・オペレーションβ ~エンジニアのための、ゆるふわパワポ術~(qpstudy 2013.01 LT)
なんとかStormに負けたくないEmacs初級篇
なんとかStormに負けたくないEmacs初級篇
7/7 WordBench kobe dreamweaver seminar
7/7 WordBench kobe dreamweaver seminar
CloudFormation Getting Started with YAML
CloudFormation Getting Started with YAML
YAPC::Asia 2014 - 半端なPHPDisでPHPerに陰で笑われないためのPerl Monger向け最新PHP事情
YAPC::Asia 2014 - 半端なPHPDisでPHPerに陰で笑われないためのPerl Monger向け最新PHP事情
フレームワーク使おうぜ!
フレームワーク使おうぜ!
Mais de Nishida Kansuke
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#3】
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#3】
Nishida Kansuke
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#1】資料
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#1】資料
Nishida Kansuke
デブサミ2017 【16-D-5】複数台のロボットと音楽をする取り組み(太田智美・西田寛輔) -
デブサミ2017 【16-D-5】複数台のロボットと音楽をする取り組み(太田智美・西田寛輔) -
Nishida Kansuke
20170131 新潟セミナー
20170131 新潟セミナー
Nishida Kansuke
PHP×コミニュケーションロボット
PHP×コミニュケーションロボット
Nishida Kansuke
Mizuho.hack 未来の銀行に必要なサービス
Mizuho.hack 未来の銀行に必要なサービス
Nishida Kansuke
20160314 すしルート#3 資料
20160314 すしルート#3 資料
Nishida Kansuke
ロボ年表を作ってみた
ロボ年表を作ってみた
Nishida Kansuke
Pepper用課金ボックス「ロボコイン」
Pepper用課金ボックス「ロボコイン」
Nishida Kansuke
jsおじさん#5 ペッパーとjavascript
jsおじさん#5 ペッパーとjavascript
Nishida Kansuke
【3/13】【女性限定】ロボットで、何が出来る?ペッパーにふれてみよう&ミニアイデアソン【とのさまラボ】 powered by 朝日新聞メディアラボ
【3/13】【女性限定】ロボットで、何が出来る?ペッパーにふれてみよう&ミニアイデアソン【とのさまラボ】 powered by 朝日新聞メディアラボ
Nishida Kansuke
忍者ゲーム【ペッパーアプリコンテスト2015決勝進出作品】
忍者ゲーム【ペッパーアプリコンテスト2015決勝進出作品】
Nishida Kansuke
ペッパービンゴ【ペッパーアプリコンテスト2015決勝進出作品】
ペッパービンゴ【ペッパーアプリコンテスト2015決勝進出作品】
Nishida Kansuke
JSを使ったアプリ開発!(JSオジサン#3)
JSを使ったアプリ開発!(JSオジサン#3)
Nishida Kansuke
ハッカソン発表資料(朝日新聞 × モバイルファクトリー 異業種ハッカソン!)
ハッカソン発表資料(朝日新聞 × モバイルファクトリー 異業種ハッカソン!)
Nishida Kansuke
iBeaconを使ったアプリ開発
iBeaconを使ったアプリ開発
Nishida Kansuke
㊱タイルマップに挑戦
㊱タイルマップに挑戦
Nishida Kansuke
クリスマスハッカソン2013:サンタロスをUNITYで作った
クリスマスハッカソン2013:サンタロスをUNITYで作った
Nishida Kansuke
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
Nishida Kansuke
㉞cocos2d-xの開発環境をインストールしてみよう
㉞cocos2d-xの開発環境をインストールしてみよう
Nishida Kansuke
Mais de Nishida Kansuke
(20)
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#3】
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#3】
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#1】資料
【東京】ドコモのAIエージェント基盤「セバスチャン」勉強会【#1】資料
デブサミ2017 【16-D-5】複数台のロボットと音楽をする取り組み(太田智美・西田寛輔) -
デブサミ2017 【16-D-5】複数台のロボットと音楽をする取り組み(太田智美・西田寛輔) -
20170131 新潟セミナー
20170131 新潟セミナー
PHP×コミニュケーションロボット
PHP×コミニュケーションロボット
Mizuho.hack 未来の銀行に必要なサービス
Mizuho.hack 未来の銀行に必要なサービス
20160314 すしルート#3 資料
20160314 すしルート#3 資料
ロボ年表を作ってみた
ロボ年表を作ってみた
Pepper用課金ボックス「ロボコイン」
Pepper用課金ボックス「ロボコイン」
jsおじさん#5 ペッパーとjavascript
jsおじさん#5 ペッパーとjavascript
【3/13】【女性限定】ロボットで、何が出来る?ペッパーにふれてみよう&ミニアイデアソン【とのさまラボ】 powered by 朝日新聞メディアラボ
【3/13】【女性限定】ロボットで、何が出来る?ペッパーにふれてみよう&ミニアイデアソン【とのさまラボ】 powered by 朝日新聞メディアラボ
忍者ゲーム【ペッパーアプリコンテスト2015決勝進出作品】
忍者ゲーム【ペッパーアプリコンテスト2015決勝進出作品】
ペッパービンゴ【ペッパーアプリコンテスト2015決勝進出作品】
ペッパービンゴ【ペッパーアプリコンテスト2015決勝進出作品】
JSを使ったアプリ開発!(JSオジサン#3)
JSを使ったアプリ開発!(JSオジサン#3)
ハッカソン発表資料(朝日新聞 × モバイルファクトリー 異業種ハッカソン!)
ハッカソン発表資料(朝日新聞 × モバイルファクトリー 異業種ハッカソン!)
iBeaconを使ったアプリ開発
iBeaconを使ったアプリ開発
㊱タイルマップに挑戦
㊱タイルマップに挑戦
クリスマスハッカソン2013:サンタロスをUNITYで作った
クリスマスハッカソン2013:サンタロスをUNITYで作った
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉟cocos2d-x勉強会:簡単なアプリをつくってみよう
㉞cocos2d-xの開発環境をインストールしてみよう
㉞cocos2d-xの開発環境をインストールしてみよう
Último
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Último
(8)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
⑮jQueryをおぼえよう!その1
1.
HTML5入門&jQuery 勉強会 ⑮jQueryをおぼえよう!その1
2.
はじめに • HTML5とかjQueryをざっくり覚えよう! • 若干、資料使いまわしてます!昔の勉強会でし
た話も混ざってるけどまあいいよね!加筆修正 しました!
3.
注意事項 • この資料の中には、2012/05時点での事実が書いてあるつもりです
が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに! • 主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています!信じるか信じないかはあなた次第! • ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。 • 過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど) • リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
4.
とりあえずHTML5 •
HTML5って何? • 何が変わるの? • どうすればいいの? • FLASHはなくなるの? • FLASHとHTML5の違い
5.
HTML5って何? • HTMLの新バージョン • まだ決まってない←重要 •
草案はできていて、それにあわせて各ブラウザが実装中 • なので、ここから先のページの情報はあいまいです。今 後変更になる可能性があります。 • 日本語情報は、html5.jpが素敵 – http://www.html5.jp/ • ちなみに、CSSは、CSS3が勧告でCSS4が草案。 CSS3の実装とHTML5の実装が同時期なので一緒にさ れることが多いけど、本来は別もの。
6.
何が変わるの?① • タグや属性が見直され、簡潔に書ける • ブラウザでの処理の内容が詳細に定義される→ブラウザ
間の差異が少なくなる • <header>,<footer>などのタグが追加され、HTMLが構 造化できる • LocalStorageを使い、クライアントにデータを保存で きる • フォーム周りが強化され、値のチェックなどが簡単にで きる
7.
何が変わるの?② • <video>,<audio>で<img>みたいに動画や音楽が指定で
きる • <canvas>で絵が描ける • App Cache(CACHE MANIFEST)で、オフラインでも 動かせるようになる • File System APIで、バイナリファイルの保存が可能 (保存先は、サンドボックス) • HTML5 における HTML4 からの変更点 – http://standards.mitsue.co.jp/resources/w3c/ TR/html5-diff/
8.
どうすればいいの? • ブラウザごとに実装が違うため、すぐ使うのは微妙。昔
のブラウザだと動かないっていう問題もある。 • ただし、スマートフォンは例外。そもそも新しいブラウ ザしかないため、対応している機能は使ってもいいと思 う。 • 文章の構造化については、googleなど検索エンジンが 対応して検索結果に反映されることが予想される。けど、 現時点では、HTML5だから有利ということはないみた い。 • 仕様が確定してないから、今後仕様が変わる怖さがある。 その辺は、注意する必要がある。
9.
FLASHはなくなるの? • よくいわれるのが、FLASHとHTML5の対決で、
FLASHはなくなる!みたいな話。 • とりあえず、このへんの話は HTML5=HTML5+CSS3+javascriptみたいな感じで聞 いてほしい。 • いまのところ、FLASHをやめてHTML5を代わりに使う のは難しい。両方の長所を理解して、使い分けたり、一 緒に使う必要がある。 • FLASHとHTML5の違いは理解する必要がある。 • 特に仕様や企画の段階での判断が重要だと思う。
10.
FLASHとHTML5の違い① • どっちが早い?どっちが高機能?っていうのは現段階で
はどっちもどっち。今後もチューンナップされていく部 分だし。 • FLASHにはHTML5にはない機能がある。たとえば、カ メラへのアクセスとか • FLASHの方が簡単に表現できる部分がある。例えば、 3Dとか文字のアンチエイリアスとか。スプライトとか イベントの充実とか。
11.
FLASHとHTML5の違い② • FLASHはツールの機能が充実している。
HTML5では、既存のエディタだけで視覚的にア ニメーション等を作るのは面倒 • 逆に言うと、FLASHは開発に作成ソフト代がか かるので敷居が高い。HTML5なら無料でできる。
12.
FLASHとHTML5の違い③ • FLASHは素材を組み込むことができる。HTML5の場合、
素材は普通にweb上に置くことになるので、素材のライ センスに注意(特に、音楽とフォント)。多分、 HTML5を採用するにあたって、この問題が一番大きい と思う。特に、ゲーム系や映画とか芸能系。 • HTML5は上記に加えて、ソースコードが丸見え。カ ジュアルハックに弱い。ブラウザ上で任意のjavascript を実行される可能性もある。ゲームクリアでご褒美画 像!とか、クリアしなくても簡単に見られちゃう。 FLASH以上にサーバ側での処理が重要になってくる。 • FLASHは逆コンパイルや素材吸い出しが可能。とはいえ、 swfにまとめられているため、そのへんは強い。
13.
FLASHとHTML5の違い④ • HTML5はプラグイン不要で、どの端末でも動く(よう
になる)。FLASHは現時点でiOSで動かない。ゲーム等 のコンテンツがiPadで動かないのはしょうがないかもし れないが、TOP画面からいきなり動かないのは致命的。 この理由からFLASHの利用は減っていくと思われる。 • 簡単なアニメーションであれば、HTML5で対応、複雑 なコンテンツについては、FLASHが主流になるんじゃ ないかと思う。 • FLASHはツールが優秀なので、FLASHで作って HTML5に移植みたいな手法もはやると思う。CS6だと そういうことができるらしい。ためしてないけど><
14.
HTML5じゃないけど •
Open Graph Protocol • 画像について • Validation • javascriptについて
15.
Open Graph Protocol •
Open Graph Protocolって何? • どんなことができるの? • まとめ
16.
Open Graph Protocolって何? •
略してOGP • プログラムにホームページの内容を分かりやす く伝えるための仕組み • metaタグに記述する
17.
どんなことができるの? • FaceBookが対応しているので、Facebookにリ
ンクされたときに、情報を表示できる。 • mixiやGREEでも使われている
18.
記述方法 <meta property= og:title
content= ページのタイトル > <meta property= og:description content= ページの説明 > <meta property= og:image content= 画像">
19.
デバッガー • 以下のサイトで、FaceBookにリンクされ
たときどうなるかを見ることができる。 • デバッガー – https://developers.facebook.com/tools/ debug
20.
まとめ • FaceBookが採用しているので、絶対に導入す
るべき。 • いいね!ボタン付けてるのに設定してないペー ジはもったいないと思う。 • 逆に、ホームページの改修を依頼したときに、 提案してこない会社は技術力やSEOに対する知 識が微妙だとおもう。
21.
画像について •
フォーマット • 形式の使い分け • ソフトの紹介 • ペイント系、ドロー系 • デザインで気をつけること • 素材加工 • ありがちなトラブル • どうすればいい?
22.
フォーマット • GIF形式
– 可逆圧縮 – 色数が少ない – アニメーションGIFがある – 透過がつかえる(しょぼい) • PNG形式 – 可逆圧縮 – 透過がつかえる • JPEG形式 – 非可逆圧縮 – サイズが小さい
23.
形式の使い分け • PNG>GIFなので、アニメーションGIF以外
でGIFは不要 • JPEGは圧縮率を変えられる。 • 実写はJPEG、アニメ絵はPNG • 容量に余裕がある場合は、PNGが奇麗 • PNGは透過ができる。綺麗に透過する場 合はPNG一択。GIFはアンチエイリアスっ ていうか、グラデーションぽい透過がで きない。
24.
ソフトの紹介① • Adobe Photoshop
CS6 – http://www.adobe.com/jp/products/ photoshopextended.html – 業界標準の画像編集ソフト – 画像の拡大縮小、jpegが奇麗 • Adobe Illustrator CS6 – http://www.adobe.com/jp/products/ illustrator.html – 業界標準の描画ソフト
25.
ソフトの紹介② • OPTPiX • http://www.webtech.co.jp/optpixpro/
index.html – 画像減色ソフト(インデックスカラー化) • ImageOptim – http://imageoptim.pornel.net/ – 画像減色、最適化(容量削減)ソフト
26.
ペイント系、ドロー系 • ペイント系(Photoshop)
– 1ドット単位で編集する – 拡大縮小に弱い。 – エフェクトや実写に強い • ドロー系(Illustrator ) – 座標データを編集する – 拡大縮小に強い→印刷に強い – ロゴデザインなどに向いている • 3D系 – 最近は、3D系も増えてきてます! – 制作は難しくても、簡単な用語等はおさえておこう
27.
おまけの画像TIPS① • GIFは横のグラデーションに弱い • JPEGは8x8ドットのブロック単位
→グリッドをあわせると奇麗になる • PhotoShopでjpegを保存するこつ →圧縮率50%と51%の差が大きい →圧縮率95%と100%の差は小さい
28.
おまけの画像TIPS② • FireWorksとPhotoShopの使い分け →FireWorksの方が圧縮率が高い
→FireWorksだとPNG8-透過で保存できる →jpegの圧縮率が同じでも、FireWorksの方が圧縮 率が高い(けど、画像は汚い) →FireWorksは、jpegマスクを使用して、画像の一 部だけ奇麗にできる →FireWorksは、極小文字(8px前後)の表現に強 い(はっきり見える)。あと、FLASHも強い ※FireWorksはバージョンアップのたびに、アルゴ リズムが改善されているようで、奇麗になってきて います。
29.
Validation • W3Cって何? • Validation(検証) •
Validation失敗?
30.
W3Cって何?① • インターネットで利用される技術の標準化をす
すめる団体 • HTMLの文法とかは、W3Cが決めてる – W3Cの仕様書等の文書の日本語訳集 – http://www.w3.org/Consortium/ Translation/Japanese
31.
W3Cって何? • HTMLやCSSを作成する場合は、この仕様通り
に作成する必要がある。 • WHATWGっていうw3cについてもの申す (?)団体もある。HTML5は両方が決めている
32.
Validation(検証)① • HTMLやCSSはプログラムと違いコンパイルと
かしないのでコンパイルエラーとかがない。 • そのため、事前にValidation(検証)する必要 がある。 • 検証ツールは、w3cのサイトに用意されている。 • http://validator.w3.org/ • http://jigsaw.w3.org/css-validator/
33.
Validation(検証)② • 他にも、FireFoxのプラグイン等で簡単に検証が
可能。常に見ているページをValidationできる から便利。(けどおすすめのやつが最近使えな くなった><いいやつ探し中) • ValidationエラーがあるとXPATHやjavascript を使うときに影響がでる可能性が。
34.
Validation失敗? • Validation失敗するケースがある。例えば、
w3cに定義されていない属性を使用していると きとか。 • そういう場合はエラーがあってもしょうがない けど、意図したエラーと意図してないエラーは 違う。タグの閉じ忘れ等、意図していないエ ラーについてはちゃんとチェックしよう。 • javascriptで指定するようにして、Validationが 失敗しないようにするのも一つの方法。
35.
javaScriptについて •
javaScriptって何? • javaScriptの特徴 • 開発環境 • 実行環境 • 開発をはじめるまえに • AJAX • JSON • 静的エラーチェック • 実行時のデバック
36.
javaScriptって何? • ブラウザ上でプログラムを動かすことがで
きる • コンパイル不要のインタプリタ型言語 • javaとはぜんぜん違う別物 • 最近は、Unityなどブラウザ以外のプラッ トフォームでも採用されてきている
37.
javaScriptの特徴 • インタプリタ型言語でコンパイル不要 →毎回コンパイルするので、速度が遅い
→文法エラーが実行時にしかわからない。 • 文法が自由で、表現力が高い →みたことのない書き方、人によってぜんぜん 違うソースになる。 • 変数宣言が柔軟で、型指定が不要 →型違い、自動変換がバグの原因になる →グローバル変数が別のソースと重複
38.
開発環境 • エディタは、特になんでもいい。 • eclipseとかvisualStudioがいいと思う。キー
ワードに色がつけられて、コードアシストがで きるものがおすすめ。 • 個人的には、秀丸。マクロでjsl呼び出してます。 昔風。あとはやっぱり、Dreamweaverが優秀。 アップとか簡単にできるし。 – http://www.javascriptlint.com/ download.htm
39.
実行環境① • htmlをそのままブラウザで開いてもローカル
ファイルなため、機能制限がおきて動かない • サーバにファイルをおく必要がある。 • とはいえ、いちいちアップは手間だし、開発中 のものをサーバに置くのも微妙。 • クライアントに、サーバを構築する必要がある
40.
実行環境② • おすすめは、XAMPで自分のパソコンをサーバにする方法。もれな
くMYSQLもついてくるので便利。 • XAMPは外部からのアクセスが怖いとかいっている人はそもそも、 ファイアーウォールの設定を見直した方がいい。 • 同じネットワークなら、他のパソコンからもみれるのでテストも 楽! – XAMP – http://www.apachefriends.org/jp/xampp.html • 仮想PCでサーバを構築するのもいいと思います。 • 他には、hostsファイルを書き換えたり、置換プロキシを使うのも 素敵です。 – http://ja.wikipedia.org/wiki/ – http://coderepos.org/share/wiki/CocProxy
41.
開発をはじめるまえに • とりあえず、(採用するかしないかは別として、)Google
JavaScript Style Guideには目を通しておこう!(これは他の言語 も同様) – http://cou929.nu/data/google_javascript_style_guide/ • 特に、javaScriptは変数のスコープが特殊なので、事前にルールを 決めておこう。 • FireFoxのサイトは、リファレンスが日本語であるので便利。ツー ル等も一通り紹介されているから確認しよう。 – JavaScript ‒ MDN – https://developer.mozilla.org/ja/JavaScript
42.
AJAX •
ウェブブラウザ内で非同期通信を行う技術 • Asynchronous JavaScript + XML の略 • ページ切り替え無しでデータの送受信ができる • ブラウザごとに差異がある(javascriptのプログラムを分ける必要 がある) • XMLの略!とかいいつつ主流はJSON形式 • 別のドメインのデータは読めないという制限がある。(クロスドメ イン対策) • XMLHttpRequest Level 2を使えば、別ドメインのデータも読め るようになる。(FLASHのcrossdomain.xmlに似ている感じ。読 み込まれる側のサイトに設定が必要) • ヘッダに以下の情報を付ければ許可できる。 – Access-Control-Allow-Origin: http://example.com
43.
JSON • おもにAJAXで使われるデータフォーマットで、
javascriptの文法そのままのテキストデータ。 • xmlと違い、構造を表すタグがないためデータが短い。 • csvと違い、javascriptの文法そのままの形式なので、 作成と展開が簡単。 • RFC 4627で定義されている。妥当性チェックの方法も 定義されていて素敵!(しかも正規表現だけ)。でも最 近はparserが用意されているのでそっちを使おう。eval しないこと。
44.
コード検証 • javascriptはインタプリタ言語なので、いわゆるコンパ
イルエラーがない。 • 静的にエラーチェックできるツールの使用が必須 • googleのclosure-compilerがおすすめ。オンライン 版が簡単。(整形後のコピペが改行なくなって微妙だけ ど) – http://code.google.com/p/closure-compiler/ – http://closure-compiler.appspot.com/home • エラーチェック、整形、圧縮、難読化ができるのでおす すめです。(圧縮とかはアルゴリズムが変わるので注 意)
45.
実行時のデバック • FireFox+FireBugを使ってますが、他のブラウザにも同
等の機能があるので、それを使えばいいと思う。 • 最近の主流はchromeなので、特にこだわりなければ chromeがオススメ • chromはfirefoxに比べて機能拡張がすごく楽だと思う。 • まずは、FireBugになれよう!chrome+FireBugでデ バッグ→IEでテストが効率的。 • chrome://chrome-urls/でいろんな機能が試せます。
46.
開発してみよう • XAMPPおさらい • Firefox+FireBugおさらい
47.
XAMPPおさらい •
XAMPPって何? • インストールしよう • 実行してみよう • アドバイス • アクセスしてみよう
48.
XAMPPって何? • X ‒クロスプラットフォーム •
A ‒ Apache • M ‒ MySQL • P ‒ PHP • P ‒ Perl • 上記のソフトを簡単にインストールできるパッケージ • 従来手間のかかるサーバの構築が簡単にできる。 • Windowsやmacなどのクライアントのパソコンにインストー ルできる • 反面、セキュリティ的な保護がされていないので、このまま サーバとして公開するのは危険。 • とはいえ、ファイアウォールの設定がきちんとされていれば、 特に注意することはない。
49.
インストールしよう • http://www.apachefriends.org/jp/
xampp.html • 公式ページから、各OS対応の、インス トーラをダウンロードすれば簡単にインス トールが可能 • Windowsの場合は、Apache as service みたいな感じで、サービスとしてインス トールするか聞かれるからチェックが外し てあることを確認しよう。
50.
実行してみよう(mac) • XAMPP Controlを
起動すると、 Controlsが表示さ れるので、Apache とMySQLを起動さ せよう
51.
実行してみよう(windows) • ApacheとMySqlの
Startを押して起動 しよう
52.
アドバイス • 実際の起動しているプログラムとコント
ロールパネルの同期が取れてない時が結構 あるので、動きが変だったら再起動すると うまくいきます。 • STARTしても、即停止する時とかも、再 起動するといいです。
53.
アクセスしてみよう • ブラウザで、自分のパソコンにアクセス –
http://localhost • XAMPPの画面が出たら成功!
54.
Firefox+FireBugおさらい • インストール • 簡単な使い方 •
やってみよう
55.
インストール • Firefox
– http://mozilla.jp/firefox/ • fireBug – https://addons.mozilla.org/ja/firefox/ addon/firebug/
56.
簡単な使い方① • とりあえず、googleにアクセスしてみよ
う • firebugのボタンを押すと、下の方に色々 出る!
57.
簡単な使い方② • カーソルみたいなのを押すと、画面上の要
素を選べる!
58.
簡単な使い方③ • コンソールタグ –
javascriptのエラーとかがここに出る! • HTMLタグ – HTMLとか、右側のCSSとか自由に編集できる! • スクリプト – ステップ実行とかできたり、変数の中身が見れ る! • ネット – 通信速度が見れる! – 通信内容が見れる!パラメータとか戻り値とか – 通信のエラーが見れる!404とかわかるので便利
59.
HTML5 •
フォルダを作ろう • とりあえず、ひながた • CSSを使おう • idとclass
60.
フォルダを作ろう • ドキュメントルートにtestというフォルダ
を作ろう! • Macの場合 – アプリケーション→xampp→htdocs • Windowsの場合 – C:xampphtdocs
61.
かくにんしよう • http://localhost/test/
62.
とりあえず、ひながた • フォルダのなかにファイルを作ろう –
test.html
63.
test.html !DOCTYPE HTML html lang=ja head meta
charset=utf-8 / titleHTML5/title style /style script /script /head body divテスト/div divテスト/div divテスト/div /body /html
64.
やってみよう • じがでた!
test_01.zip
65.
まとめ • その2に続きます!
66.
おわり 主催(共同開催): 株式会社 gooya http://www.gooya.co.jp/ メドレー株式会社 http://www.medley.co.jp/ 講師:西田 寛輔
(Tonosamart) http://www.facebook.com/tonosamart