Submit Search
Upload
⑲jQueryをおぼえよう!その5
•
4 likes
•
1,563 views
Nishida Kansuke
Follow
https://www.facebook.com/TonosamaLabo
Read less
Read more
Technology
Report
Share
Report
Share
1 of 60
Recommended
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
JavaScriptの落とし穴
JavaScriptの落とし穴
ikdysfm
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
モテる JavaScript
モテる JavaScript
Osamu Monoe
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
Kazunori Tatsuki
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
Recommended
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
JavaScriptの落とし穴
JavaScriptの落とし穴
ikdysfm
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
モテる JavaScript
モテる JavaScript
Osamu Monoe
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
Kazunori Tatsuki
.htaccessによるリダイレクト徹底解説
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
JavaScript超入門 基礎
JavaScript超入門 基礎
tetsu6
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
regret raym
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
Hidekazu Ishikawa
⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4
Nishida Kansuke
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
Django boodoo
Django boodoo
泰 増田
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
Backbone.js
Backbone.js
daisuke shimizu
これからのpre_get_postsの話をしよう
これからのpre_get_postsの話をしよう
Hishikawa Takuro
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
Jqm20120210
Jqm20120210
cmtomoda
JSON SchemaとPHP
JSON SchemaとPHP
Hiraku Nakano
Creators'night#12今井
Creators'night#12今井
Daisuke Imai
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Hiroaki KOBAYASHI
Risas1
Risas1
Bomberazo
Dayanandachari. cv
Dayanandachari. cv
Dayanand achari
More Related Content
What's hot
JavaScript超入門 基礎
JavaScript超入門 基礎
tetsu6
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
regret raym
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
Hidekazu Ishikawa
⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4
Nishida Kansuke
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
Django boodoo
Django boodoo
泰 増田
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
Takayuki Shimizukawa
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
Backbone.js
Backbone.js
daisuke shimizu
これからのpre_get_postsの話をしよう
これからのpre_get_postsの話をしよう
Hishikawa Takuro
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
Jqm20120210
Jqm20120210
cmtomoda
JSON SchemaとPHP
JSON SchemaとPHP
Hiraku Nakano
Creators'night#12今井
Creators'night#12今井
Daisuke Imai
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Hiroaki KOBAYASHI
What's hot
(20)
JavaScript超入門 基礎
JavaScript超入門 基礎
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
はじめよう Backbone.js
はじめよう Backbone.js
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
⑱jQueryをおぼえよう!その4
⑱jQueryをおぼえよう!その4
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Django boodoo
Django boodoo
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
仕事で使うちょっとしたコードをOSSとして開発メンテしていく- Django Redshift Backend の開発 - PyCon JP 2016
WordPressとjQuery
WordPressとjQuery
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Kawaz的jQuery入門
Kawaz的jQuery入門
Backbone.js
Backbone.js
これからのpre_get_postsの話をしよう
これからのpre_get_postsの話をしよう
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Jqm20120210
Jqm20120210
JSON SchemaとPHP
JSON SchemaとPHP
Creators'night#12今井
Creators'night#12今井
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
Viewers also liked
Risas1
Risas1
Bomberazo
Dayanandachari. cv
Dayanandachari. cv
Dayanand achari
business cards case
business cards case
Brittany Hadfield
Trabajo21
Trabajo21
jhoselyn95
Outcome of stragic performance
Outcome of stragic performance
Ajewole Omotayo
Baile
Baile
Romina Basterrechea Solórzano
Estadistica resolución
Estadistica resolución
TONY BRANDON MAZA ANGELES
Jpge
Jpge
Angy Angeles
Estadistica resolución
Estadistica resolución
TONY BRANDON MAZA ANGELES
Volantes bien
Volantes bien
Martin Beltran
Promo
Promo
maydaestetica
Класифікація сортів тюльпанів
Класифікація сортів тюльпанів
Школа №7 Миргород
2016 06 27 dia ibara e_source final distribution
2016 06 27 dia ibara e_source final distribution
Michael Ibara
Нагороди. Легка З.В.
Нагороди. Легка З.В.
Школа №7 Миргород
Train - the - Trainers Seminar, Monastir 2016
Train - the - Trainers Seminar, Monastir 2016
OECD Governance
Evolucion del higiene industrial en venezuela.
Evolucion del higiene industrial en venezuela.
DAYKELINARES
Oecd economic-outlook-june-2016-promoting-productivity-and-equality-a-twin-ch...
Oecd economic-outlook-june-2016-promoting-productivity-and-equality-a-twin-ch...
OECD, Economics Department
Viewers also liked
(17)
Risas1
Risas1
Dayanandachari. cv
Dayanandachari. cv
business cards case
business cards case
Trabajo21
Trabajo21
Outcome of stragic performance
Outcome of stragic performance
Baile
Baile
Estadistica resolución
Estadistica resolución
Jpge
Jpge
Estadistica resolución
Estadistica resolución
Volantes bien
Volantes bien
Promo
Promo
Класифікація сортів тюльпанів
Класифікація сортів тюльпанів
2016 06 27 dia ibara e_source final distribution
2016 06 27 dia ibara e_source final distribution
Нагороди. Легка З.В.
Нагороди. Легка З.В.
Train - the - Trainers Seminar, Monastir 2016
Train - the - Trainers Seminar, Monastir 2016
Evolucion del higiene industrial en venezuela.
Evolucion del higiene industrial en venezuela.
Oecd economic-outlook-june-2016-promoting-productivity-and-equality-a-twin-ch...
Oecd economic-outlook-june-2016-promoting-productivity-and-equality-a-twin-ch...
Similar to ⑲jQueryをおぼえよう!その5
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
[東京] JapanSharePointGroup 勉強会 #2
[東京] JapanSharePointGroup 勉強会 #2
Atsuo Yamasaki
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
「Html sql」で図書館hpにアクセスしてみよう
「Html sql」で図書館hpにアクセスしてみよう
Kentaro Matsui
知って得する標準関数の使い方
知って得する標準関数の使い方
Soudai Sone
ScaLa+Liftとか
ScaLa+Liftとか
youku
PerlとSQLのいろいろ
PerlとSQLのいろいろ
Takuya Tsuchida
12-11-30 Kashiwa.R #5 初めてのR Rを始める前に知っておきたい10のこと
12-11-30 Kashiwa.R #5 初めてのR Rを始める前に知っておきたい10のこと
Haruka Ozaki
swooleを試してみた
swooleを試してみた
Yukihiro Katsumi
Aizu lt tokyo_luxion
Aizu lt tokyo_luxion
Tomoaki Tamura
F#+Erlangで簡単なシューティングゲームを作ってみている
F#+Erlangで簡単なシューティングゲームを作ってみている
pocketberserker
Scala on Hadoop
Scala on Hadoop
Shinji Tanaka
Enumはデキる子 ~ case .Success(let value): ~
Enumはデキる子 ~ case .Success(let value): ~
Takaaki Tanaka
スマートフォン向けサービスにおけるサーバサイド設計入門
スマートフォン向けサービスにおけるサーバサイド設計入門
Hisashi HATAKEYAMA
Wb osaka 20120623
Wb osaka 20120623
Miho Ishida
20140903groonga発表資料
20140903groonga発表資料
Hironobu Saitoh
第7回社内勉強会「Code Sucks - 人の振り見て我が振り直せ」
第7回社内勉強会「Code Sucks - 人の振り見て我が振り直せ」
Hiromu Shioya
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
Yusuke Ando
Powershell 超絶基礎 勉強会 v1 (もっと新しいバージョンがあります)
Powershell 超絶基礎 勉強会 v1 (もっと新しいバージョンがあります)
Tetsu Yama
Similar to ⑲jQueryをおぼえよう!その5
(20)
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
[東京] JapanSharePointGroup 勉強会 #2
[東京] JapanSharePointGroup 勉強会 #2
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
「Html sql」で図書館hpにアクセスしてみよう
「Html sql」で図書館hpにアクセスしてみよう
知って得する標準関数の使い方
知って得する標準関数の使い方
ScaLa+Liftとか
ScaLa+Liftとか
PerlとSQLのいろいろ
PerlとSQLのいろいろ
12-11-30 Kashiwa.R #5 初めてのR Rを始める前に知っておきたい10のこと
12-11-30 Kashiwa.R #5 初めてのR Rを始める前に知っておきたい10のこと
swooleを試してみた
swooleを試してみた
Aizu lt tokyo_luxion
Aizu lt tokyo_luxion
F#+Erlangで簡単なシューティングゲームを作ってみている
F#+Erlangで簡単なシューティングゲームを作ってみている
Scala on Hadoop
Scala on Hadoop
Enumはデキる子 ~ case .Success(let value): ~
Enumはデキる子 ~ case .Success(let value): ~
スマートフォン向けサービスにおけるサーバサイド設計入門
スマートフォン向けサービスにおけるサーバサイド設計入門
Wb osaka 20120623
Wb osaka 20120623
20140903groonga発表資料
20140903groonga発表資料
第7回社内勉強会「Code Sucks - 人の振り見て我が振り直せ」
第7回社内勉強会「Code Sucks - 人の振り見て我が振り直せ」
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
3時間濃縮CakePHP2.1 in PHPカンファレンス北海道2012
Powershell 超絶基礎 勉強会 v1 (もっと新しいバージョンがあります)
Powershell 超絶基礎 勉強会 v1 (もっと新しいバージョンがあります)
More from 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
More from 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の開発環境をインストールしてみよう
Recently uploaded
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
Recently uploaded
(9)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
⑲jQueryをおぼえよう!その5
1.
HTML5入門&jQuery 勉強会
⑲HTML5とかjQueryを おぼえよう!その5
2.
はじめに • HTML5とかjQueryをざっくり覚えよう! • もう少し実践的なことをしよう!
3.
注意事項 • この資料の中には、2012/05時点での事実が書いてあるつもりです
が、時代とともに移り変わる情報もあるので最新情報のチェックも 忘れずに! • 主観に基づく事柄もあります。そんな場合は、この色でコメントす るようにしています!信じるか信じないかはあなた次第! • ざっくり説明するために、簡単に説明しています。厳密にいうと ちょっと違う部分もあるかと思います。でもまあ、だいたいあって る(はず)。 • 過去の環境(IE6とかIE7とか、PHP4とか)には採用されていない 話もあるので、その辺をターゲットにする場合は注意(無視してい いと思うけど) • リンクは日本語訳がある場合はそっちにリンクしています。公式情 報ではないので、仕事で使う場合は原文を確認しましょう。
4.
もくじ • AJAXにちょうせん • 疑似要素のこと •
擬似クラスのこと
5.
とりあえずおさらい • XAMPPをたちあげよう • ホームディレクトリに、test3というフォルダを
作ろう • test3.htmlを作ろう • firefoxでアクセスしよう – http://localhost/test3/
6.
test3.html <!DOCTYPE HTML> <html lang="ja"> <head> <meta
charset="utf-8" /> <title>HTML5</title> <style> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></ script> <script> $(function(){ }); </script> </head> <body> </body> </html>
7.
AJAXにちょうせん •
ajaxってなに? • JSONってなに? • JSONPってなに? • jQueryでajaxしてみよう
8.
AJAXってなに? •
ウェブブラウザ内で非同期通信を行う技術 • Asynchronous JavaScript + XML の略 • ページ切り替え無しでデータの送受信ができる • ブラウザごとに差異がある(javascriptのプログラムを分ける必要 がある) • XMLの略!とかいいつつ主流はJSON形式 • 別のドメインのデータは読めないという制限がある。(クロスドメ イン対策) • XMLHttpRequest Level 2を使えば、別ドメインのデータも読め るようになる。(FLASHのcrossdomain.xmlに似ている感じ。読 み込まれる側のサイトに設定が必要) • ヘッダに以下の情報を付ければ許可できる。 – Access-Control-Allow-Origin: http://example.com
9.
JSONってなに? • おもにAJAXで使われるデータフォーマットで、
javascriptの文法そのままのテキストデータ。 • xmlと違い、構造を表すタグがないためデータが短い。 • csvと違い、javascriptの文法そのままの形式なので、 作成と展開が簡単。 • RFC 4627で定義されている。妥当性チェックの方法も 定義されていて素敵!(しかも正規表現だけ)。でも最 近はparserが用意されているのでそっちを使おう。eval しないこと。
10.
JSONのデータ形式 [
{ "name":"u3068u306eu3055u307e", "address":"u3082u3093u306au304b }, { "name":"u3068u306eu3055u307e", "address":"u3082u3093u306au304b } ]
11.
JSONP • JSON with
Paddingの略 • AJAXには、別のドメインのデータは読めないという制 限があるため、発明された。 • scriptタグを動的に生成して、srcに別ドメインURLを 指定して、データを取得する。(もちろん同一ドメイン でも可能) • コールバックという方法が使われる。データを関数で囲 み、script読み込み後に、その関数が呼ばれるようにす る。
12.
JSONPのデータ形式 jQuery17205921031175586328_1339348073462([
{ "name":"u3068u306eu3055u307e", "address":"u3082u3093u306au304b" }, { "name":"u3068u306eu3055u307e", "address":"u3082u3093u306au304b" } ])
13.
jQueryでajaxしてみよう • じゅんび • jsonしてみる
14.
じゅんび <body> <input id="json" type="button"
value="json"> <div id="json_text"></div> <input id="jsonp" type="button" value="jsonp"> <div id="jsonp_text"></div> </body>
15.
jsonしてみる① <script> $(function(){
$('#json').click(function(){ $.ajax({ url:'json.php', dataType:'json', data:{ 'like1':'やきそば', 'like2':'メロンソーダ', 'like3':'チュロス' }
16.
jsonしてみる②
}).fail(function(data, status, xhr){ console.log('失敗'); console.log(status); }).done(function(data, status, xhr){ console.log('成功'); console.log(status); console.log(data); }).always(function(data, status, xhr){ console.log('終了処理'); }); }); }); </script>
17.
できた • えらー>< • そもそも、PHPつくってないしね・・・
test3_01.zip
18.
かいせつ① • $.ajaxのパラメータ –
url:サーバ側のURL – dataType:データの形式( json , jsonp など) – data:サーバに渡すパラメータ – type:通信のタイプ( GET , POST など) ※typeのデフォルトはGETなのでプログラムでは指定 していません
19.
かいせつ② • $.ajaxの戻り値として、Deferred Object
(繰延(くりのべ)オブジェクト)が返却 されるのでエラー処理、正常処理などを 行う。 • .failが失敗した時、.doneが成功した時に 呼ばれる • そのあとに、alwaysがよばれる(javaの finalyみたいな感じ)
20.
かいせつ③ • function(data, status,
xhr){ – data:取得したデータが入る – status:実行結果のステータスが文字で入る – xhr:XMLHttpRequestオブジェクトが入る (きにしなくてOK)
21.
PHPがわをつくろう • json.phpというファイルを作ろう
22.
PHPがわをつくろう② <?PHP header('Access-Control-Allow-Origin: *'); header('Content-Type: text/javascript;
charset=utf-8'); sleep(2); $data = array(); $data[] = array('name'=>'とのさま', 'address'=>'もんなか', 'like'=>$_GET['like1']); $data[] = array('name'=>'トレモ朗', 'address'=>'いちがや', 'like'=>$_GET['like2']); $data[] = array('name'=>'パズル王', 'address'=>'にいがた', 'like'=>$_GET['like3']); $data = json_encode($data); echo $data; //[EOF]
23.
できた • でーたがとれた!
test3_02.zip
24.
かいせつ① • ヘッダーでXMLHttpRequest Level
2と かを指定! – header('Access-Control-Allow-Origin: *'); – header('Content-Type: text/javascript; charset=utf-8');
25.
かいせつ② • $data =
json_encode($data); • echo $data; これだけで、jsonにエンコードして、出力 できる!超便利!
26.
じっけん • sleep(2); • わざとちょっとだけsleepさせてる!これ
を巨大な値にしてタイムアウトさせてみよ う!
27.
JSONの結果を出力しよう • 取得したデータを、<div
id= json_text ></div>のなかにたしてい こう!
28.
やってみよう① console.log('成功'); console.log(status); console.log(data); $.each(data, function(index, value){
$('#json_text').append( $("<div/>").text(value.name + 'は、' + value.address + 'にすんで いて、' + value.like + 'がすき!') ); });
29.
できた • じがでた!
test3_03.zip
30.
かいせつ $.each(data, function(index, value){ ↑dataの要素分繰り返す。valueに値が入り、indexに添え字が 入る
$('#json_text').append( ↑要素の最後に追加 $("<div/>").text(value.name + 'は、' + value.address + 'にすんでいて、' + value.like + 'がすき!') ↑$( <div/> )みたいにすると、タグを作ることができる(この 時点ではHTMLには追加されない) ↑text()で、タグの中の文字を設定できる ); });
31.
メッソドチェーン • jQueryの関数は基本的にjQueryオブジェ
クトを返却するので、命令を続けて書くこ とができます。 • メソッドチェーンを使うと、セレクタで要 素を探す手間が省けるので早い!
32.
JSONPもしてみよう • JSONPボタンを実装しよう • jsonp.phpを作ろう
33.
やってみよう① $('#jsonp').click(function(){ $.ajax({
url:'jsonp.php', dataType:'jsonp', data:{ 'like1':'やきそばp', 'like2':'メロンソーダp', 'like3':'チュロスp' } }).fail(function(data, status, xhr){ console.log('失敗p'); console.log(status);
34.
やってみよう②
}).done(function(data, status, xhr){ console.log('成功p'); console.log(status); console.log(data); $.each(data, function(index, value){ $('#jsonp_text').append( $("<div/>").text(value.name + 'は、' + value.address + 'にすんでいて、' + value.like + 'がすき!') ); }); }).always(function(data, status, xhr){ console.log('終了処理p'); }); });
35.
やってみよう③ <?PHP header('Access-Control-Allow-Origin: *'); header('Content-Type: text/javascript;
charset=utf-8'); sleep(2); $data = array(); $data[] = array('name'=>'とのさま', 'address'=>'もんなか', 'like'=>$_GET['like1']); $data[] = array('name'=>'トレモ朗', 'address'=>'いちがや', 'like'=>$_GET['like2']); $data[] = array('name'=>'パズル王', 'address'=>'にいがた', 'like'=>$_GET['like3']); $data = json_encode($data); echo $_GET['callback'] . "(" . $data. ")"; //[EOF]
36.
できた • じがでた!
test3_04.zip
37.
かいせつ① dataType:'jsonp', • jsonpにする!
38.
かいせつ② • echo $_GET['callback']
. "(" . $data. ") ; $_GET[ callback ] で、コールバック用の関 数の名前が送られてくるので、それを出力 する!
39.
疑似要素のこと •
疑似要素って何? • こんなときつかうかも • 疑似要素を補助するプロパティ • 記述方法 • やってみよう
40.
疑似要素って何? • 要素自体ではなく、指定された部分を要
素っぽい感じで指定できる! • 例: – ::first-letter • 要素の文字列の先頭文字 – ::before • 要素の前 – ::after • 要素の後
41.
こんなときつかうかも • ::first-letter
– 先頭の1文字だけおおきくする • ::before, ::after – 文章を括弧でくくる – 自動的に降板を付与する
42.
疑似要素を補助するプロパティ • content
– ::before, ::afterで文字などを挿入するのに使 う • counter-increment – cssで変数を用いたカウントができる • quotes – 括弧の種類を指定できる。入れ子も指定でき る
43.
記述方法 • CSS3になって、記述方法が変わった! –
div:before – ○ div::before • 「:」の数が2個になったので注意しよ う!(擬似クラスと区別するためこうなっ たんじゃないかな!2個の書き方は新し いブラウザじゃないと対応してないから注 意!)
44.
やってみよう① • ホームディレクトリに、test4というフォ
ルダを作ろう • test4_pseudo_elements.htmlを作ろう
45.
やってみよう② <!DOCTYPE HTML> <html lang="ja"> <head> <meta
charset="utf-8" /> <title>HTML5</title>
46.
やってみよう③ <style> div{
border:2px solid #0f0; color:#000; } div:first-letter{ color:#f00; } div:first-line{ color:#00f; } div::before{ content:"★"; } div::after{ content:"☆"; } </style>
47.
やってみよう④ </head> <body> <div>あいうえお<br>かきくけこ</div> </body> </html>
48.
できた • FirefoxとChromeでみためがちがう><
test4_01.zip
49.
まとめ • jQueryでやるほうが無難 • ::after,::beforeはうまく使えばいいかも。
HTML上にない要素を追加できるため、 css3のアニメーション系と相性がいい。
50.
疑似クラスのこと •
疑似クラスって何? • こんなときつかうかも • 記述方法 • やってみよう
51.
疑似クラスって何? • 訪問済みリンク、マウスのホバー時、ある要
素内の最後など、特定の条件の要素を指 定できる! • selectors – http://www.w3.org/TR/css3-selectors/ #selectors
52.
こんなときつかうかも • :hover
– カーソルを重ねた時に色を変える • :nth-child(n) – 土曜日、日曜日だけ色を変える – (even)、(odd)を使って表をしましまに!
53.
記述方法 • :hoverを指定する時の順番に気をつけよう! a:link{ } a:visited{ } a:hover{ } a:active{ }
54.
やってみよう① • ホームディレクトリに、test4というフォ
ルダを作ろう • test4_pseudo_class.htmlを作ろう
55.
やってみよう② <!DOCTYPE HTML> <html lang="ja"> <head> <meta
charset="utf-8" /> <title>HTML5</title>
56.
やってみよう③ <style> p:nth-child(even){
color:#0f0; } p:nth-child(odd) { color:#00f; } p:hover{ color:#f00; } </style>
57.
やってみよう④ </head> <body> <div>
<p>あいうえお</p> <p>かきくけこ</p> <p>さしすせそ</p> <p>たちつてと</p> <p>なにぬねの</p> </div> </body> </html>
58.
できた • しましまになった! • hoverするとあかくなる!
test4_02.zip
59.
まとめ • jQueryをつかうとAJAX簡単!
60.
おわり 主催(共同開催): 株式会社 gooya http://www.gooya.co.jp/ メドレー株式会社 http://www.medley.co.jp/ 講師:西田 寛輔
(Tonosamart) http://www.facebook.com/tonosamart