Smile Engineering blog ( スマイルエンジニアリング・ブログ )

ジェイエスピーからTipsや技術特集、プロジェクト物語を発信します

jquery mobile tips 第2回

2012-05-23 16:19:36 | jquery mobile
 以前に「jquery mobile tips 第1回」を書かせていただいてからずいぶんと空いてしまったが、今回第2回を書かせていただくこととなった。以前の記事では「jquery mobileとは」と「jquery mobileを利用するために」という基本的な部分を書かせていただいた。今回はさらに詳細な部分について書かせていただく。

3.jquery mobileを利用したさまざまな機能

 ここからはjquery mobileに存在する機能とその利用法を紹介していく。jquery mobileを利用する際の参考になれば幸いである。

3.1 ページの表示

 まずはページ全体として持つ機能を紹介する。jquery mobileでは画面遷移に関する機能が存在している。通常のページの画面遷移を思い浮かべてみるといったん画面がすべて削除され、次に新しい画面が表示される。しかし、スマートフォンのアプリで考えてみると、画面遷移の方法は実に多彩である。jquery mobileではそういったさまざまな画面遷移の表現を可能としている。記述法としてはaタグにdata-transition属性を設定し、そこに手法を記述するだけで簡単に画面遷移の表現を変更できる。以下にその表現を紹介していく。

(1) data-transition="slide"

 画面の左右から新しいページが現れるような表現方法である。基本的には右から左へ遷移先の画面が現れるが、「data-direction="reverse"」を同時に設定することで、右から左へ画面が現れるようにすることも出来る。

(2) data-transition="slideup"、data-transition="slidedown"

 こちらを設定すると、上下から遷移先の画面が現れる。「slideup」を指定することで下から上へ、「slidedown」を指定することで上から下へ画面が現れる。

(3) data-transition="pop"

 こちらは現在のページ中央から新たな画面がポップアップされる設定である。

(4) data-transition="fade"

 ページ全体に遷移先画面が薄く現れ、徐々にはっきりしていくような表現方法である。

(5) data-transition="flip"

 ページ全体が左右にひっくり返るようなイメージの画面遷移である。

 ここで紹介したような画面遷移の方法を「jquery mobile」では利用することが出来る。文章だけではなかなか分かりづらい部分であると思うので、ぜひ一度実際に記述して動作を見てみてほしい。
 さて、画面遷移の方法をこれまで紹介してきたが、「jquery mobile」、「html5」では1つの画面を設定する方法も通常とは別の方法をとることも出来る。通常は一つの画面につき一つのHTMLファイルを必要とするが、「jquery mobile」を利用すると一つのHTMLの中に複数のページを記述することが出来る。実際に一つのファイル中に複数のページを記述した例を示す。




 この例を見てみると一つのHTMLファイルの中に複数の「data-role="page"」が存在している。この「data-role="page"」は上で表示する領域を定義すると紹介させてもらった。今回の例では表示する領域、つまり画面が複数存在することになる。もちろん、画面が複数存在するとはいっても、それぞれのページを区別するために「data-role="page"」を持つ「div」タグにはすべてidが割り振られている。実際にアクセスする際には通常のURLでこのページに遷移した際にはもっとも上にある「data-role="page"」の領域が表示される。ではそれ以外のページはどのように表示するかというと、アドレスにハッシュをつけるだけでよい。実際には「http://~.html#xxx」といった形式で記述する。ここでxxxには「data-role="page"」を持つ「div」タグのidが入る。このようにidを指定したアドレスを入力することで、それぞれの領域を表示することが可能だ。もともとのページから別の領域への遷移の方法を見ていこう。実際のソースコード中でリンクを作成しているところを見てみると、以下の部分が該当する。


 同一HTML内の遷移であれば、URLどころかHTMLファイルの指定すらも不要である。通常のリンクを作成する際と比較すると大分短くてすむ。また、同一HTMLファイル内に複数のページを記述することの利点はページ遷移の指定のしやすさ、といった点だけではない。さらに重要な利点として応答速度の向上があげられる。同時に複数のページを読み込むので、同一HTMLに記述されたページであれば非常に短い応答時間で表示することが出来る。このようにHTML5やjquery mobileを用いたページの遷移やページの設定には多くの方法が存在することを紹介した。ここからはページ内部の部品を紹介していく。

3.2 さまざまな部品

(1) ボタン

 まずはボタンを紹介する。記述する方法としては通常のHTMLのアンカータグでは、「data-role="button"」を追記するだけ、インプットタグのsubmit・button・reset・imageタイプではそのまま記述するだけでよい。「jquery mobile」が適用されているページであれば、非常に簡単にスマートフォン向けのボタンを作成することができる。
 また、「jquery mobile」では、ボタンに追加する様々なアイコンも用意されている。例えば×マークや各方向への矢印、プラスやマイナスなど多くのアイコンが用意されている。こちらも利用方法は簡単であり、「data-icon="~"」とアイコンの種類を指定するだけでよい。数が豊富なのでここで全てを紹介することはできないが、以下に代表的なものをいくつか紹介する。


 ここで実際のボタンを見ていただいたわけだが、全てのボタンが横に大きなボタンとなっていることに気づくだろう。これは「jquery mobile」のボタンの仕様で初期状態では横幅いっぱいに表示するようになっているからである。しかし、実際利用するとなると大きなボタンではなく小さなボタンを利用したい場面もある。そういった際の記述法はボタンのタグに「data-inline="true"」と追記するだけでよい。そうすることで、ボタンを横に並べることも可能となる。また、「data-mini="true"」を指定すると、ボタンの大きさ自体を小さくすることも可能だ。
 「jquery mobile」は複数のボタンを1セットにまとめることもできる。どういったものか想像しづらいと思うので、以下に実際に複数のボタンをまとめた例を示しておく。


 実際のソースコードを見ていただくと分かるかと思うが、複数のボタンを一つにまとめるにはdiv要素などのブロック要素に「data-role="controlgroup"」を追加し、それでセットとしたいボタンを囲えばよい。今回は横にセットとしたボタンの例を挙げたが、縦にセットとしたい場合は、ブロック要素中の「data-type="horizontal"」をはずせばよい。
ここではボタンを紹介したが、ボタンの表現も様々に用意されている。自分の状況にあった表現を利用することができるだろう。

(2) ツールバー

 次にツールバーの紹介だ。ツールバーと一口に言ってもいくつかの種類がある。たとえば上で紹介したヘッダやフッタである。その他にもナビゲーションバーと呼ばれるものもある。一つ一つ紹介していこう。
ヘッダに関してはページの上部を定義すると紹介させてもらった。では実際にどういったものを表示するのかというと、一般的にはそのページのタイトルなどと戻るやホームなどのボタンを記述していることが多い。ヘッダ属性を指定すると左右にはボタンのための領域が確保され、左のボタン領域には自動的に戻るボタンが付加される。もしも戻るボタンを付加したくない場合は、左側に別のボタンを定義してしまうか、「data-backbtn="false"」という属性を指定すればよい。では、以下に実際のヘッダのパターンをいくつかソースとともに紹介しよう。


 このようにヘッダだけでも色々とボタンの種類などを選ぶことが出来る。さまざまなボタンを配置して使いやすくしていってほしい。
次にフッタを紹介する。フッタはページの下部を定義するものである。フッタはヘッダと非常によく似ている。主な違いとしては、もちろん表示場所の違いがある。ヘッダは画面上部への表示であるし、フッタは画面の下部に表示される。それ以外はほぼヘッダと同じ様に利用することができる。
 そしてツールバーの最後として、ナビゲーションバーを紹介する。ナビゲーションバーとは、ボタンやリンクをバーのようにまとめたものである。「jquery mobile」では、このナビゲーションバーも作成することができる。こちらも実際の例を示す。


 上記の例のように5つまでのボタンであれば1列に並べることができる。しかし、5つを超えると、1行には収まらないので複数行にわたることとなる。アイコンの設定やヘッダ・フッタ中に組み込むことも可能なので、いろいろと試してみると面白い。
 ここまでツールバーについて紹介を行ったが、最後に一つ便利な機能を紹介したい。それが「固定ポジションモード」である。名前を見てどのような機能か分かる方も多いだろう。その名の通り、ヘッダとフッタを固定の位置に表示し続けることができる機能である。機能を追加する方法はヘッダやフッタに「data-position="fixed"」を指定するだけですぐに可能だ。タップするごとに表示・非表示が切り替わりもする機能なので、機会があれば試してみるとよい。

(3) リスト

 ここではリストを紹介する。リストはリンクの作成、データの表示など様々に利用することができる。まずは基本的なリストである表示のみのリストを基に紹介を進めていきたい。
 まずはリストの基本的な作成方法だが、通常のHTMLにて順序のないリストを作成する際とほぼ同様に作ることができる。ul要素に「data-role="listview"」を付加し、li要素に内容を書いていく。たったこれだけでデータ表示用のリストであれば完成する。li要素内にul要素などを指定することで、階層化リストを作成することもできる。他にもul要素のかわりにol要素を指定することで、番号付きのリストを作成できる。
 表示のみのリストでなくともリンク付きのリストも非常に簡単である。li要素中にa要素を記述するだけで、リストからリンク先に遷移することができる。また、li要素中に2つのリンクを作成するとリストが分割され、左のリストと右のアイコンで別々のページへ遷移することができる。2つ目のリンクについてはアイコンのみの表示となり、見やすさ・利用のしやすさなども問題なく整形してくれる。
他にも分類分けなどの機能がある。実際に以下にリストのソースと画面を示す。


 このようにリストは一覧の表示・リンクなどには非常に便利なものである。

3.3 ページのテーマ

 最後にページのテーマの設定についてである。ページのテーマを設定することで、一つ一つの要素の見た目を編集しなくとも一気にページ全体(場合によっては一部分)の見た目を変更することができる。記述法は、テーマを変更したい部分に「data-theme=~」を追加するだけで良い。それだけでページ全体のイメージを大きく変えることができる。ここでは例としてこれまで紹介した部品を利用したページのテーマを変更した画面を掲載する。


 テーマの設定を変更するだけでずいぶんとイメージを変えることができる。一部分しか変更していないのにまるで別のページを作成しているかのように見せることができる。

4.まとめ

 これまで「jquery mobile」の機能についていろいろと書かせていただいた。しかし、今回紹介した機能は「jquery mobile」のほんの一部でしかない。今回紹介した機能以外にも「jquery mobile」にはまだまだ多くの機能が存在する。そのため、今回紹介した機能、紹介しきれなかった機能を駆使して、ぜひスマートフォン向けの使いやすいサイトを構築してほしい。

株式会社ジェイエスピー
システム部
阪尾 信幸

monipet
  動物病院の犬猫の見守りをサポート
  病院を離れる夜間でも安心

ASSE/CORPA
  センサー、IoT、ビッグデータを活用して新たな価値を創造
  「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
  短納期HEMS開発をサポート!

GuruPlug
  カードサイズ スマートサーバ

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント

jquery mobile tips 第1回

2011-09-28 08:17:12 | jquery mobile

1.jquery mobileとは

 ここ最近は多くの人がスマートフォンを持っている。そのためシステムを開発する際やホームページを作ろうと思った際にも、スマートフォンへの対応を無視することは出来ない。
 しかし実際にスマートフォンへの対応を考えるとなると、現在人気のスマートフォンはiphoneとAndroidの大きくは2種類が存在しており、そのどちらもアプリの開発法や言語などが異なる。そのため、iphone・Androidのどちらにも対応しようとなると、大きな労力がかかってしまう。
 そこで今回はそういった問題に対応する方法の一つとして「jquery mobile」を紹介する。これは、簡単に言ってしまえば「スマートフォンに対応したインターフェースを簡単にweb上に実装することが出来るライブラリ」である。もちろんjquery mobileで作成した画面はiphone・Androidのどちらにも対応している。また、HTML5に対応したブラウザを利用すればPCでもスマートフォンのようなインターフェースを利用することが出来る。つまり、jquery mobileはweb上に実装することが可能なため、利用者はPC・スマートフォンのブラウザさえあれば簡単に利用することが出来る。

2.jquery mobileを利用するために

 ここからはjquery mobileを利用するために必要なことについて紹介していく。jquery mobile自体はjavascriptで記述されているが、利用者はjavascriptを意識することなく、htmlへの記述方式さえ知っていれば簡単にスマートフォンのアプリのような画面を作成することが出来る。以下に通常のHTMLと実際にjquery mobileを利用した画面、そのソースコードを紹介する。

通常のHTMLでのソースコードと実際の画面

 

jquery mobileを用いたソースコードと実際の画面


 今回紹介しているソースコードはjquery mobileを利用する上で最低限必要だと思われるものだけを対応させたものである。これだけのソースコードでもなんとなくスマートフォンのような画面である気がしないだろうか?このようにただ単純に「jquery mobile」を対応させ、HTMLに少し手を加えるだけで、画面を大きく変化させることが出来る。以下にjquery mobileを利用する上で最低限必要な記述を紹介していく。ほとんどの部分は今回紹介しているソースコード中に記述してあるため、実際のソースコードとともに見てほしい。

(1) このHTMLファイルがHTML5であることを明記する。

 jquery mobileを利用するためにはHTML5に準拠した記述が必要となるため、このHTMLファイルがHTML5であることを明記している。

(2) 言語が日本語であることを明記する。

 これはjquery mobileというよりもHTML5の仕様であるが、このページがどの言語でかかれているかを銘記する必要がある。

(3) スマートフォンの画面に対応するために表示サイズを設定する。

 viewportを設定することでスマートフォンiphoneやAndroidなどのスマートフォンでページを閲覧した際の画面サイズを設定することが出来る。以下に設定項目をまとめる。
  width:画面の幅をピクセルで設定する。device-widthを設定することでデバイスの幅に合わせることが出来る。
  height:画面の高さをピクセルで設定する。device-heightを設定することでデバイスの高さに合わせることが出来る。
  initial-scale:初期の画面の倍率を設定する。
  minimum-scale:画面の最小の倍率を設定する。
  maximum-scale:画面の最大の倍率を設定する。
  user-scalable:ユーザによる画面のズーム操作を許可するかどうかを設定する。yesであれば許可、noであれば不許可となる。

(4) jquery mobile・jqueryを読み込む。

 jquery mobileを利用するためには以下の3つのファイルを読み込む必要がある。
  ・ jquery.mobile-xxx.css:jquery mobileの画面デザインを適用するために必要となるcssファイル
  ・ jquery-xxx.min.js:jquery mobileを利用するために必要となるjqueryのjavascriptファイル
  ・ jquery.mobile-xxx.js:jquery mobile本体のjavascriptファイル
  ※ xxxの部分には利用するjquery・jquery mobileのバージョンを記載
 jquery mobileダウンロード先:http://jquerymobile.com/download/
 jqueryダウンロード先:http://jquery.com/

(5) divタグにdata-role属性を指定し、囲まれたところの役割を明記する。

 代表的な役割には以下のようなものがある。
  page:表示する領域を定義する。
  header:ページの上部を定義する。
  content:ページ中央のメインコンテンツを定義する。
  footer:ページの下部を定義する。
 
 今回紹介したものは最低限jquery mobileを利用するために必要な設定や要素である。しかし、これだけでも画面イメージをずいぶんと変更することが出来るので、情報を表示するためのページなどで利用してみてほしい。

 今回は第1回としてjquerymobileの紹介と基本的な使い方を紹介した。第2回では実際に使用していく上でどのような機能・デザインが可能であるかを紹介していく予定である。

株式会社ジェイエスピー
システム部
阪尾 信幸

monipet
  動物病院の犬猫の見守りをサポート
  病院を離れる夜間でも安心

ASSE/CORPA
  センサー、IoT、ビッグデータを活用して新たな価値を創造
  「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
  短納期HEMS開発をサポート!

GuruPlug
  カードサイズ スマートサーバ

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント