で⼿手軽にスマートフォンサイト制作

2011/4/16kanazawa.js v1.2 セミナー

@ichigami

2

⾃自⼰己紹介

•  いちがみトモロヲ（⼀一神 友郎）– フリーランスのWebディレクター・デザイナー– 屋号：15VISION（イチゴビジョン）

•  へしこが好き！– 鯖の糠漬け

• ⼀一⽚片でご飯３杯⾷食べられるよ– へし⼦子ちゃん

• 美浜町のキャラ• ゆるキャラアワード2009受賞• 最近へしこちゃんボットも登場

若狭美浜町  h#p://www.wakasamihama.jp/

3

Agenda

•  jQuery Mobile 概要•  jQuery Mobile テーマ・コンポーネントについて•  jQuery Mobile を使うメリット

 　 　 　 　 　概要

5

jQuery Mobile 概要

•  モバイルサイト構築⽤用JaveScriptライブラリー•  jQuery開発チームが開発

「かなざわ じぇいえす 入りたい」 でお馴染みのjQueryの作者 ジョン・レッシグ氏も開発に深く関わっている。

ASCII.jp：ジョン・レッシグに聞く、jQueryのこれから h#p://ascii.jp/elem/000/000/586/586216/ Photo  :  @t32k

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

 　 　 　 　 　テーマ・コンポーネント

8

テーマ

•  標準で5つのテーマ•  テーマのカスタマイズも可能

–  正式リリース時にテーマのカスタマイズツールを提供

h#p://jque

rymob

ile.com

/designs/

10

jQuery Mobile 1.0a4.1 ⽇日本語リファレンス

h#p://de

v.screw-­‐axis.com/doc/jq

uery_m

obile/

 　 　 　 　 　を使うメリット

12

jQuery Mobile を使うメリット

•  クロスプラットフォーム・クロスデバイス–  iPhone, Android, WInPhone, BlackBerry 他対応– サポート範囲が明確で「品質を担保」できる

•  操作性に優れたサイトを構築できる– 標準UIに近いデザインが⽤用意されている

•  HTMLのみで簡単に設定できる–  HTML5のカスタムデータ属性を利⽤用

h#p://jque

rymob

ile.com

/gbs/

まとめ

15

まとめ

•  jQuery Mobile はとても簡単・便利！•  スマートフォンサイト制作を助けるJSライブラリーの⼤大本命と⾔言われているので安⼼心！

•  浮いたコスト（時間）を設計にまわし、優れたユーザーエクスペリエンスの実現を！

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  情報化研修室

ありがとうございました。