以前に「jquery mobile tips 第1回」を書かせていただいてからずいぶんと空いてしまったが、今回第2回を書かせていただくこととなった。以前の記事では「jquery mobileとは」と「jquery mobileを利用するために」という基本的な部分を書かせていただいた。今回はさらに詳細な部分について書かせていただく。
ここで紹介したような画面遷移の方法を「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を用いたページの遷移やページの設定には多くの方法が存在することを紹介した。ここからはページ内部の部品を紹介していく。
また、「jquery mobile」では、ボタンに追加する様々なアイコンも用意されている。例えば×マークや各方向への矢印、プラスやマイナスなど多くのアイコンが用意されている。こちらも利用方法は簡単であり、「data-icon="～"」とアイコンの種類を指定するだけでよい。数が豊富なのでここで全てを紹介することはできないが、以下に代表的なものをいくつか紹介する。
ここで実際のボタンを見ていただいたわけだが、全てのボタンが横に大きなボタンとなっていることに気づくだろう。これは「jquery mobile」のボタンの仕様で初期状態では横幅いっぱいに表示するようになっているからである。しかし、実際利用するとなると大きなボタンではなく小さなボタンを利用したい場面もある。そういった際の記述法はボタンのタグに「data-inline="true"」と追記するだけでよい。そうすることで、ボタンを横に並べることも可能となる。また、「data-mini="true"」を指定すると、ボタンの大きさ自体を小さくすることも可能だ。
「jquery mobile」は複数のボタンを1セットにまとめることもできる。どういったものか想像しづらいと思うので、以下に実際に複数のボタンをまとめた例を示しておく。
実際のソースコードを見ていただくと分かるかと思うが、複数のボタンを一つにまとめるにはdiv要素などのブロック要素に「data-role="controlgroup"」を追加し、それでセットとしたいボタンを囲えばよい。今回は横にセットとしたボタンの例を挙げたが、縦にセットとしたい場合は、ブロック要素中の「data-type="horizontal"」をはずせばよい。
ここではボタンを紹介したが、ボタンの表現も様々に用意されている。自分の状況にあった表現を利用することができるだろう。
ヘッダに関してはページの上部を定義すると紹介させてもらった。では実際にどういったものを表示するのかというと、一般的にはそのページのタイトルなどと戻るやホームなどのボタンを記述していることが多い。ヘッダ属性を指定すると左右にはボタンのための領域が確保され、左のボタン領域には自動的に戻るボタンが付加される。もしも戻るボタンを付加したくない場合は、左側に別のボタンを定義してしまうか、「data-backbtn="false"」という属性を指定すればよい。では、以下に実際のヘッダのパターンをいくつかソースとともに紹介しよう。
このようにヘッダだけでも色々とボタンの種類などを選ぶことが出来る。さまざまなボタンを配置して使いやすくしていってほしい。
次にフッタを紹介する。フッタはページの下部を定義するものである。フッタはヘッダと非常によく似ている。主な違いとしては、もちろん表示場所の違いがある。ヘッダは画面上部への表示であるし、フッタは画面の下部に表示される。それ以外はほぼヘッダと同じ様に利用することができる。
そしてツールバーの最後として、ナビゲーションバーを紹介する。ナビゲーションバーとは、ボタンやリンクをバーのようにまとめたものである。「jquery mobile」では、このナビゲーションバーも作成することができる。こちらも実際の例を示す。
上記の例のように5つまでのボタンであれば1列に並べることができる。しかし、5つを超えると、1行には収まらないので複数行にわたることとなる。アイコンの設定やヘッダ・フッタ中に組み込むことも可能なので、いろいろと試してみると面白い。
ここまでツールバーについて紹介を行ったが、最後に一つ便利な機能を紹介したい。それが「固定ポジションモード」である。名前を見てどのような機能か分かる方も多いだろう。その名の通り、ヘッダとフッタを固定の位置に表示し続けることができる機能である。機能を追加する方法はヘッダやフッタに「data-position="fixed"」を指定するだけですぐに可能だ。タップするごとに表示・非表示が切り替わりもする機能なので、機会があれば試してみるとよい。
まずはリストの基本的な作成方法だが、通常のHTMLにて順序のないリストを作成する際とほぼ同様に作ることができる。ul要素に「data-role="listview"」を付加し、li要素に内容を書いていく。たったこれだけでデータ表示用のリストであれば完成する。li要素内にul要素などを指定することで、階層化リストを作成することもできる。他にもul要素のかわりにol要素を指定することで、番号付きのリストを作成できる。
表示のみのリストでなくともリンク付きのリストも非常に簡単である。li要素中にa要素を記述するだけで、リストからリンク先に遷移することができる。また、li要素中に2つのリンクを作成するとリストが分割され、左のリストと右のアイコンで別々のページへ遷移することができる。2つ目のリンクについてはアイコンのみの表示となり、見やすさ・利用のしやすさなども問題なく整形してくれる。
他にも分類分けなどの機能がある。実際に以下にリストのソースと画面を示す。
このようにリストは一覧の表示・リンクなどには非常に便利なものである。
テーマの設定を変更するだけでずいぶんとイメージを変えることができる。一部分しか変更していないのにまるで別のページを作成しているかのように見せることができる。
株式会社ジェイエスピー
システム部
阪尾 信幸
monipet
動物病院の犬猫の見守りをサポート
病院を離れる夜間でも安心
ASSE/CORPA
センサー、IoT、ビッグデータを活用して新たな価値を創造
「できたらいいな」を「できる」に
OSGi対応 ECHONET Lite ミドルウェア
短納期HEMS開発をサポート！
GuruPlug
カードサイズ スマートサーバ
株式会社ジェイエスピー
横浜に拠点を置くソフトウェア開発・システム開発・
製品開発(monipet)、それに農業も手がけるIT企業
３．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=～」を追加するだけで良い。それだけでページ全体のイメージを大きく変えることができる。ここでは例としてこれまで紹介した部品を利用したページのテーマを変更した画面を掲載する。テーマの設定を変更するだけでずいぶんとイメージを変えることができる。一部分しか変更していないのにまるで別のページを作成しているかのように見せることができる。
４．まとめ
これまで「jquery mobile」の機能についていろいろと書かせていただいた。しかし、今回紹介した機能は「jquery mobile」のほんの一部でしかない。今回紹介した機能以外にも「jquery mobile」にはまだまだ多くの機能が存在する。そのため、今回紹介した機能、紹介しきれなかった機能を駆使して、ぜひスマートフォン向けの使いやすいサイトを構築してほしい。株式会社ジェイエスピー
システム部
阪尾 信幸
monipet
動物病院の犬猫の見守りをサポート
病院を離れる夜間でも安心
ASSE/CORPA
センサー、IoT、ビッグデータを活用して新たな価値を創造
「できたらいいな」を「できる」に
OSGi対応 ECHONET Lite ミドルウェア
短納期HEMS開発をサポート！
GuruPlug
カードサイズ スマートサーバ
株式会社ジェイエスピー
横浜に拠点を置くソフトウェア開発・システム開発・
製品開発(monipet)、それに農業も手がけるIT企業