Download - jQuery Mobileで手軽にスマートフォンサイト制作
![Page 1: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/1.jpg)
で⼿手軽にスマートフォンサイト制作
2011/4/16kanazawa.js v1.2 セミナー
@ichigami
![Page 2: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/2.jpg)
2
⾃自⼰己紹介
• いちがみトモロヲ(⼀一神 友郎)– フリーランスのWebディレクター・デザイナー– 屋号:15VISION(イチゴビジョン)
• へしこが好き!– 鯖の糠漬け
• ⼀一⽚片でご飯3杯⾷食べられるよ– へし⼦子ちゃん
• 美浜町のキャラ• ゆるキャラアワード2009受賞• 最近へしこちゃんボットも登場
若狭美浜町 h#p://www.wakasamihama.jp/
![Page 3: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/3.jpg)
3
Agenda
• jQuery Mobile 概要• jQuery Mobile テーマ・コンポーネントについて• jQuery Mobile を使うメリット
![Page 4: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/4.jpg)
概要
![Page 5: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/5.jpg)
5
jQuery Mobile 概要
• モバイルサイト構築⽤用JaveScriptライブラリー• jQuery開発チームが開発
「かなざわ じぇいえす 入りたい」 でお馴染みのjQueryの作者 ジョン・レッシグ氏も開発に深く関わっている。
ASCII.jp:ジョン・レッシグに聞く、jQueryのこれから h#p://ascii.jp/elem/000/000/586/586216/ Photo : @t32k
![Page 6: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/6.jpg)
6
jQuery Mobile 最近の話題
• 2010年10⽉月にAlpha版リリース、今⽉月中にベータ版?• Dreamweaver CS5.5が「jQuery Mobile」に対応
– ライブビューで開発中に動作確認、UI部品もメニューから選択
コードの右側にはjQuery Mobileのシンタックスに対応した、ページ構造を示すデザインビューが表示されている。
jQuery MobileにDreamweaverが対応。モバイルアプリケーション開発ツールとして本命に急浮上! ‐ Publickey h#p://www.publickey1.jp/blog/11/jquery_mobiledreamweaver.html
![Page 7: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/7.jpg)
テーマ・コンポーネント
![Page 8: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/8.jpg)
8
テーマ
• 標準で5つのテーマ• テーマのカスタマイズも可能
– 正式リリース時にテーマのカスタマイズツールを提供
![Page 9: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/9.jpg)
h#p://jque
rymob
ile.com
/designs/
![Page 10: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/10.jpg)
10
jQuery Mobile 1.0a4.1 ⽇日本語リファレンス
h#p://de
v.screw-‐axis.com/doc/jq
uery_m
obile/
![Page 11: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/11.jpg)
を使うメリット
![Page 12: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/12.jpg)
12
jQuery Mobile を使うメリット
• クロスプラットフォーム・クロスデバイス– iPhone, Android, WInPhone, BlackBerry 他対応– サポート範囲が明確で「品質を担保」できる
• 操作性に優れたサイトを構築できる– 標準UIに近いデザインが⽤用意されている
• HTMLのみで簡単に設定できる– HTML5のカスタムデータ属性を利⽤用
![Page 13: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/13.jpg)
h#p://jque
rymob
ile.com
/gbs/
![Page 14: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/14.jpg)
まとめ
![Page 15: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/15.jpg)
15
まとめ
• jQuery Mobile はとても簡単・便利!• スマートフォンサイト制作を助けるJSライブラリーの⼤大本命と⾔言われているので安⼼心!
• 浮いたコスト(時間)を設計にまわし、優れたユーザーエクスペリエンスの実現を!
![Page 16: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/16.jpg)
16
最後にちょっと宣伝
2011年6月11日(土) ITビジネスプラザ武蔵 6F ホール(交流室)
a-‐blog cms 1.4 紹介セミナー in KANAZAWA a-‐blog cms 1.4 ハンズオンセミナー in KANAZAWA
2011年6月25日(土)ITビジネスプラザ武蔵 4F 情報化研修室
![Page 17: jQuery Mobileで手軽にスマートフォンサイト制作](https://reader033.vdocuments.site/reader033/viewer/2022052910/559c78501a28abb5588b46b3/html5/thumbnails/17.jpg)
ありがとうございました。