Submit Search
Upload
2012年8月10日 勉強会
•
4 likes
•
1,472 views
Rin Yano
Follow
2012年8月10日バイドゥ株式会社プロダクト事業部勉強会の資料です
Read less
Read more
Technology
Report
Share
Report
Share
1 of 15
Recommended
jQuery Mobile 概要
jQuery Mobile 概要
トモロヲ いちがみ
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
Recommended
jQuery Mobile 概要
jQuery Mobile 概要
トモロヲ いちがみ
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
20151206 hamamatsu handson
20151206 hamamatsu handson
Six Apart
HTML5 ビギナーのための AngularJS
HTML5 ビギナーのための AngularJS
Kenichi Kanai
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
SwapSkills
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
Start React with Browserify
Start React with Browserify
Muyuu Fujita
JQuery入門
JQuery入門
sayoko miura
Java script
Java script
sayoko miura
Learning jQuery
Learning jQuery
taiju higashi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
今度こそ始めるjQuery超入門
今度こそ始めるjQuery超入門
西畑 一馬
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話
Yosuke Doke
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
Paola m
Paola m
yepamon
Ereaders
Ereaders
Katherine2304
More Related Content
What's hot
HTML5 ビギナーのための AngularJS
HTML5 ビギナーのための AngularJS
Kenichi Kanai
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
SwapSkills
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Muyuu Fujita
Start React with Browserify
Start React with Browserify
Muyuu Fujita
JQuery入門
JQuery入門
sayoko miura
Java script
Java script
sayoko miura
Learning jQuery
Learning jQuery
taiju higashi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
今度こそ始めるjQuery超入門
今度こそ始めるjQuery超入門
西畑 一馬
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話
Yosuke Doke
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
What's hot
(20)
HTML5 ビギナーのための AngularJS
HTML5 ビギナーのための AngularJS
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
閉じタグを超えた先に僕が見た景色とは
閉じタグを超えた先に僕が見た景色とは
Start React with Browserify
Start React with Browserify
JQuery入門
JQuery入門
Java script
Java script
Learning jQuery
Learning jQuery
React を導入したフロントエンド開発
React を導入したフロントエンド開発
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
AngularJSの高速化
AngularJSの高速化
今度こそ始めるjQuery超入門
今度こそ始めるjQuery超入門
Web制作勉強会 #2
Web制作勉強会 #2
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
GDG Women DevfestW
GDG Women DevfestW
Backbone.jsとSASSでモジュールをつくった話
Backbone.jsとSASSでモジュールをつくった話
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Viewers also liked
Paola m
Paola m
yepamon
Ereaders
Ereaders
Katherine2304
Tomada de Decisão
Tomada de Decisão
brunosantospimentel
Stress and stress_management_by_raj
Stress and stress_management_by_raj
Raj Chavan
Ereadersinthelibrary
Ereadersinthelibrary
Katherine2304
Paola m
Paola m
yepamon
Clippagem
Clippagem
Donguto
Oil spill reporting & cleanup
Oil spill reporting & cleanup
Sumter Electric Cooperative, Inc.
Paola m
Paola m
yepamon
Il Pianeta Terra
Il Pianeta Terra
3991
開発者こそ知っておいて欲しい モバイルコンテンツデザイン 箱と中身の整えかた
開発者こそ知っておいて欲しい モバイルコンテンツデザイン 箱と中身の整えかた
Rin Yano
デザインって何をすることなの?
デザインって何をすることなの?
Rin Yano
DONNETH_04 FS 1
DONNETH_04 FS 1
Don Francis Deniola
Stress and stress_management_by_raj
Stress and stress_management_by_raj
Raj Chavan
簿記力コアトレーニング 連結・応用論点 答案用紙
簿記力コアトレーニング 連結・応用論点 答案用紙
higher_tomorrow
Mercy ehrler-portfolio
Mercy ehrler-portfolio
Mercy Ehrler
Viewers also liked
(16)
Paola m
Paola m
Ereaders
Ereaders
Tomada de Decisão
Tomada de Decisão
Stress and stress_management_by_raj
Stress and stress_management_by_raj
Ereadersinthelibrary
Ereadersinthelibrary
Paola m
Paola m
Clippagem
Clippagem
Oil spill reporting & cleanup
Oil spill reporting & cleanup
Paola m
Paola m
Il Pianeta Terra
Il Pianeta Terra
開発者こそ知っておいて欲しい モバイルコンテンツデザイン 箱と中身の整えかた
開発者こそ知っておいて欲しい モバイルコンテンツデザイン 箱と中身の整えかた
デザインって何をすることなの?
デザインって何をすることなの?
DONNETH_04 FS 1
DONNETH_04 FS 1
Stress and stress_management_by_raj
Stress and stress_management_by_raj
簿記力コアトレーニング 連結・応用論点 答案用紙
簿記力コアトレーニング 連結・応用論点 答案用紙
Mercy ehrler-portfolio
Mercy ehrler-portfolio
Similar to 2012年8月10日 勉強会
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
jQuery Mobile
jQuery Mobile
yoshikawa_t
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Shumpei Shiraishi
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Mitsue-Links
Polymerやってみた
Polymerやってみた
Yosuke Onoue
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
Hiroki Toyokawa
About rails 3
About rails 3
issei126
20141101 handson
20141101 handson
Six Apart
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Masayuki Abe
DOM Scripting & jQuery
DOM Scripting & jQuery
smallworkshop
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
Similar to 2012年8月10日 勉強会
(20)
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
jQuery Mobileの基礎
jQuery Mobileの基礎
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Jqm20120804 publish
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery Mobile
jQuery Mobile
「その他」のUI Framework 3選
「その他」のUI Framework 3選
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
Polymerやってみた
Polymerやってみた
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
About rails 3
About rails 3
20141101 handson
20141101 handson
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
DOM Scripting & jQuery
DOM Scripting & jQuery
Mvc conf session_5_isami
Mvc conf session_5_isami
Recently uploaded
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Recently uploaded
(10)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
2012年8月10日 勉強会
1.
Quick Start to
jQuery Mobile ほとんどWeb Designing 8月号の記事内容紹介 JavaScriptが書けない残念なデザイナー 矢野りん 2012年8月10日金曜日
2.
トピックス
• jQuery Mobile 基礎 • jQuery Mobileサイトギャラリー紹介 • jQuery Mobile プロコン • リソース集 2012年8月10日金曜日
3.
jQuery Mobile基礎
• jQMとは JavaScriptライブラリのモバイル専用版。よくつかうUIのイン タラクションとかUIのデザインが部品化してある。 • 使い方 jQMのサイトからDLしたjsファイルをサーバに展開して使う か、CDN(Contents Delivery Network)を参照してjQMサーバ から呼び出して使うこともできるよ。 2012年8月10日金曜日
4.
ゲット★ザ jQM
• http://jquerymobile.com/download/ 2012年8月10日金曜日
5.
jQMを読み込もうぜ
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobileだっせ</title> <!-- jQuery Mobileの動作に必要なスタイル/ライブラリをインポート --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> 2012年8月10日金曜日
6.
jQMページのコードはこんな感じ
<body> <div data-role= page id= page> <div data-role= header > <h1>へっだ</h1> </div> B <div data-role= content > こんてんつ C A </div> <div data-role= footer > <h4>ふった</h4> </div> D </div> A:data-role(HTML5のCustom Data属性を使用)が </body> 指定されている要素内が1つのページになる B:ヘッダー(自動的にスタイルがついてみためヘッダーっぽくなる) C:コンテンツ(ヘッダとフッタにはさまれた見た目になる) D:フッター(みためヘッダーっぽくなる) 2012年8月10日金曜日
7.
1つのHTMLに複数のページ?
ふつうのHTML jQM .htmlファイル .htmlファイル 論理的なページA <div data-role= page id= pageA> 論理的なページ 論理的なページB <div data-role= page id= pageB> 論理的なページC <div data-role= page id= pageC> 論理的なページを1つのHTMLにまとめることでリクエストを減らし通信効率をあげる のが目的なんだ。でも、文書構造が大きいとそもそもデータが大きくなったりもするから 設計にはちゅういが必要なんだ 2012年8月10日金曜日
8.
他人が作成したレンダリングサンプル 2012年8月10日金曜日
9.
UIパーツを作る
<input type="submit" value="submit" /> <input type="reset" value="reset" /> <input type="image" value="image" /> <input type="button" value="button" /> <button>button要素</button> <a href="#" data-role="button">アンカータグ</a> 従来のHTMLで指定してもdata-role属性で 指定してもぜんぶおんなじボタンの見た目になる ※見た目は同じだがJS的な制限があったりと実装的 には同じ扱いにはならない 2012年8月10日金曜日
10.
スタイルのカスタマイズは?
don t touch★ go ahead. edit. 2012年8月10日金曜日
11.
色だけちょっと変えることも 2012年8月10日金曜日
12.
jQMサイトギャラリー
http://www.jqmgallery.com/ 2012年8月10日金曜日
13.
WordPressにも組み込めるとか
• Multi Device Switcher http://wordpress.org/extend/plugins/multi-device- switcher/ のプラグインをWPに仕込んでユーザーエージェントをみてCSS を振り分ける作戦で組み込める。 • 他人が作成したsample http://meglog.net/jqm-sample/ ※WPtap mobile detectorというプラグインを使った例だそう ですがプラグインのサポートが終了していたので似たようなのを みつけました。 2012年8月10日金曜日
14.
jQM長所と短所
• イイネ! ‣ いわゆるスマホサイトを作るなら最速でローンチできそう(コンテンツさえ あればね) ‣ マルチプラットフォームの対応もおまかせ。 http://jquerymobile.com/gbs/ ‣ 横スライドとかページ回転とかよくあるインタラクションの組み込みが簡単 ‣ マルチなディスプレイ解像度に配慮した作りになっており、レスポンシブで も採用可能な気がする • イクナイネ! ‣ インタラクションが一部のAndroid でうんこちゃんのように遅い ‣ アプリ開発とかUIを細かくカスタマイズしたくなりそうな案件では逆に1か ら作った方がはやいかもしれないくらい、スタイルの構造が複雑である 2012年8月10日金曜日
15.
リソース集
• jQuery Mobile(本家) http://jquerymobile.com/ • jQuery Mobile Graded Browser Support(サポートしているブラウザリスト) http://jquerymobile.com/gbs/ • jQuery Mobile Gallery(jQMを採用しているサイト集) http://www.jqmgallery.com/ • ThemeRoller(CSSカスタマイズツール) http://jqueryui.com/themeroller/ • さんざん引き合いに出した他人の図の出典(@IT jQuery Mobile 入門) http://www.atmarkit.co.jp/fdotnet/chushin/jqmobile_index/index.html • jQuery採用サイト例 MBA mobile http://www.mba-multimedia.mobi/ Dungs Mobile mobile.dungs.com/en/home one little dream http://www.onelittledream.com/happycircus-timeline-cover.html ※雑誌掲載時はモバイル版があったらしいが今はなくなっている。なんでやー COTOHOGI http://cotohogi.com/sp/ SharksFrenzy http://m.sharksfrenzy.co.za/ 2012年8月10日金曜日