jQuery Mobileを使用するときの注意点。はじめて使う時は、まずはクイック・スタートガイドを試そう。

jQuery Mobileを使用するときの注意点。はじめて使う時は、まずはクイック・スタートガイドを試そう。

ウェブ制作 | | 2017/06/02更新 | 能勢 弘光

スマートフォンデバイスに対応したサイトを作るのに適したjQuery Mobile。非常に使いやすくていいですよね。

最近はレスポンシブ・ウェブデザインというものが流行っていることもあり、スマートフォン対応やタブレット端末への対応はだいぶ進んできており、モバイルファーストの時代もアプリケーション側はすでに進んでいます。TwitterとかFacebookはスマートフォンで見る方が多いのではないでしょうか?

ただ、まだフューチャーフォンのユーザーが多くいるのをお忘れなく。スマートフォンユーザーの方がまだ少ないんですよ?より多くの方に情報を発信したいのなら、フューチャーフォン対応もしっかりしましょう。

jQuery Mobileですが、自分もいくつか引っかかったポイントがあるので備忘録的に。

日本語ドキュメント(非公式)があるので、そちらを中心にピックアップします。英語がスラスラ読める方は本家をぜひ!

初めての方向け

まずははじめて触る方向けに、紹介とクイック・スタートガイドがあります。

  1. 紹介
  2. クイック・スタートガイド

クイック・スタートガイドは、サンプルものっています。ひとまずローカルにひとつHTMLファイルを作って、そこにコピペすればすぐに動作します。クライアントサイドで動くスクリプトはすぐに試せるのがいいですね。難しくない。

まず最初にやること

もちろん、設計が最初になります。しかし、設計はそれぞれのサイトで異なるので、自分で考えて作ることが必要です。

設計はいろんなものがあって、大まかに以下のようなものになるかと思います。

  1. 表示設計(ユーザー・インターフェース)
  2. 機能設計
  3. 動作設計

Webデザイナーさんが手を動かすのは、表示設計と動作設計ですかね。機能設計までできると良いWebデザイナーさんだと思います。それらの手助けになるのは、以下の項目です。

  1. data属性リファレンス
  2. グローバル設定
  3. イベント
  4. メソッドとプロパティ

data属性は特に重要です。これがいまいちピンとこなかったわけですが、表示する各要素に対して「初期状態をどうしますか?」を設定する、ということですかね。jQuery Mobileの機能を使いたい場合は設定してくことで使用することができます。

あとは、コンポーネントを参考にしながら組み立てていけば、jQuery Mobileを使ったリッチなサイトが作れると思います。表示だけなら、あっという間に終わってしまうと思いますよ。今はテーマローラーというものもあって、ドラッグアンドドロップで色まで設定できる優れもの。ファイルをダウンロードしてサイトに設置すれば、本当にあっという間にサイトができてしまいます。

今の最新バージョンは、1.3.1.興味のある方は、jQuery Mobileのサイトへ。

関連情報

SHARE:

前後の記事

同じカテゴリの記事

Categories

app 2

diary 13

ec 2

management 5

MovableType 11

salesforce 4

ssh 3

system 17

tools 4

windows 2

いいものいろいろ 8

アイデア 1

ウェブ制作 15

ガジェット 12

モブログ 1

水泳 5

目標 1

サイトマップ

年別

2017年 20

2016年 14

2015年 12

2014年 13

2013年 16

2012年 13

Recent Posts

Update Posts

お問い合せ

このサイトは、エックスサーバー で運営しています。

About

Web系のWebデザイナー/ディレクター/PL/PM が気付いたことを取りとめもなくつづるブログです。ECとMovable Typeが中心です。MT東京でコミュニティやってます。MTDDC Meetup TOKYO 2016実行委員長。

管理人: 能勢 弘光
URL: https://2nose.com/
Blog: https://2nose.com/blog/
E-mail: info@2nose.com

スポーツ情報まとめサイト: sports55.net

Social Links

Other Links

MT東京
MTDDC Meetup TOKYO 2016

Our Bunker

ITABASHI-KU TOKYO
JAPAN.

© 2nose.com All Right Reserved.