** 目次 [#u6fd608c]
 
 #contents
 
 ** 概要 [#h0f60a62]
 
 - iPhoneアプリのような挙動が、ウェブブラウズで提供できるJavaScriptのライブラリです。
 
 - jQueryのプラグインとして動作します。
 
 - 公式: http://www.jqtouch.com/
 -- 公式サイトの動画の最初の方で、SafariでURLにアクセスして「Add to Home Screen」をタップしたらホームに置かれるようですね。
 その際のアイコンなども変更可能です。
 
 ** 使い方 [#oc69ab3a]
 
 - 基本、jQueryのプラグインなので、jQueryのライブラリと一緒に読み込んでインスタンスを生成すればOKです。
  <script src="js/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
  <style type="text/css" media="screen">@import "js/jqtouch/jqtouch.css";</style>
  <style type="text/css" media="screen">@import "js/themes/jqt/theme.css";</style>
  <script type="text/javascript" charset="utf-8">
  var jQT = new $.jQTouch();
  </script>
 
 - jQTouchは複数の画面を 1つのHTMLに入れ込んでアンカーリンクで画面遷移します。
 -- 下記の例は、home画面にてhogeへのボタンを用意し、hoge画面で前の画面に戻るように記述してあります。
  <!-- home ページ -->
  <div id="home">
  <div class="toolbar"><h1>ホーム</h1></div>
  <div class="info">現在ホームです。</div>
  <a class="whiteButton fade" href="#hoge">hogeへ</a>
  </div>
  <!-- /home ページ -->
  
  <!-- hoge ページ -->
  <div id="hoge">
  <div class="toolbar"><h1>hogeページ</h1></div>
  <div class="info">hogeページを表示しています。</div>
  <a class="whiteButton goback" href="#">戻る</a>
  </div>
  <!-- /hoge ページ -->
 -- class="whiteButton fade" など特殊なclassがいくつか用意されており、それを指定することで挙動や見た目が変わる仕組みです。
 
 &ref(img-01.jpg,,上記のサンプル画像);
 
 #blikimore
 
 ** 動作確認 [#k8a69c1a]
 
 - 確認する場合はCSS3に対応したSafari5か、chromeか、
 - ibbdemo2>http://www.puresimstudios.com/ibbdemo/ での確認が手軽で良いです (要AIRランタイム。インストール時に勝手に入ります)
 -- ibbDemo2 のインストールや使い方は下記サイトを参考にしてください。
 http://www.amamoba.com/pc/ibbdemo2.html
 - ただし、実機に勝るものはないので、iPhone での動作確認が一番良いです。
 
 *** メモ: chromeでユーザーエージェントを変更する方法 [#gf255b14]
 
 - このサンプルでは、特に必要ないですが作るウェブアプリによっては、URLが同じだけど
 ユーザーエージェントがPC系ブラウザか、iPhone/iPadの場合かで表示を変えている場合、
 ibbdemo2のユーザーエージェントはiPhone/iPadのユーザーエージェントになりますが、
 chromeの場合に、ユーザーエージェントを変えないとPC版が出て確認できません。
 -- そういう時は、起動オプションでユーザーエージェントを設定しましょう。
 http://chrome.half-moon.org/43.html#obcd30eb
 
 - やり方
 -- chromeを起動する時のアイコンをコピーする
 -- 右クリック→プロパティ。
 -- リンク先に"C:\Docum…chrome.exe" と書いてある部分の続きで、
 iPhone4の場合は、 --user-agent="Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/65" と書く。
 これで、OKして、このアイコンから起動したらユーザーエージェントはiPhone4になっている。というわけです。
 
 
 ** チートシート的なモノ [#j90627c8]
 
 以降、動作確認できるものを↓こちらに置いてあります。
 (Optionsの動作確認できるものは作ってません)
 
 - チートページ
 http://okra.ark-web.jp/~takemura/public/js/jqtouch/
 
 以降、各種classを指定した場合にどのように変化するかをまとめたものです。
 実際の挙動については上記チートページから確認できます。
 
 &ref(img-02.jpg,,チートページのイメージ);
 
 *** Options [#o000a4d9]
 
 - いくつか適当にオプションを付けると↓このような感じになる
  <script type="text/javascript" charset="utf-8">
  var jQT = new $.jQTouch({
      icon: 'js/demos/main/jqtouch.png',
      addGlossToIcon: false,
      startupScreen: 'js/demos/main/jqt_startup.png',
      statusBar: 'black',
      preloadImages: [
          'js/themes/jqt/img/back_button.png',
          'js/themes/jqt/img/back_button_clicked.png',
          'js/themes/jqt/img/button_clicked.png',
          'js/themes/jqt/img/grayButton.png',
          'js/themes/jqt/img/whiteButton.png',
          'js/themes/jqt/img/loading.gif'
          ]
  });
  </script>
 
 |  オプション名  |  オプション値                                            |  デフォルト値  |  サンプル                                      |  備考            |h
 | icon           | アイコン用画像ファイルのパス                             | null           | icon: 'js/demos/main/jqtouch.png'              | jpg,gif,pngかな? |
 | addGlossToIcon | true:iconで指定した画像を使う / false:iPhone側が設定する | true           | addGlossToIcon: false                          | iconがセットされていないとこれもセットされない |
 | fixedViewport  | true:viewportを指定する / false:何も指定しない           | true           | fixedViewport: true                            | viewportは画面サイズを指定するmetaタグ。trueで右のタグが吐かれる。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>  |
 | fullScreen     | true:フルスクリーンを指定する / false:何も指定しない     | true           | fullScreen: true                               | trueで右のタグが吐かれる。<meta name="apple-mobile-web-app-capable" content="yes" />  |
 | fullScreenClass| フルスクリーン時のclass                                  | fullscreen     | fullScreenClass: 'my-fullscreen'               |   |
 | startupScreen  | アプリ起動時に表示する画像ファイルパス                   | null           | startupScreen: 'js/demos/main/jqt_startup.png' | jpg,gif,pngかな? |
 | statusBar      | black or black-translucent (黒半透明)                    | default        | statusBar: 'black-translucent'                 | ステータスバーの表示色の設定。<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> |
 | preloadImages  | プレロードする画像ファイルパス                           | null           | preloadImages: ['js/themes/jqt/img/back_button.png', ... , 'js/themes/jqt/img/loading.gif'] | 画像ファイルパスの順序は問わない |
 | useAnimations  | true:アニメーション有り / false:無し                     | true           | useAnimations: true                            |   |
 | useFastTouch   | true:                                                    | true           | useFastTouch: true                             |   |
 
 *** class - 画面の上につくボタン [#dcfc7859]
 
 |  class |  形状      |   表示場所 |  サンプル                                |  文字数制限                                   |  備考 |h
 | button | 角丸四角   | 画面右上   | <a class="button" href="#hoge">hoge</a>  | 特に無し(全角5文字以内が妥当?)              | 画面遷移する場合は、アニメーション指定をする必要があるかもしれません。  |
 | add    | 角丸四角   | 画面右上   | <a class="add" href="#">+</a>            | 特に無し「+」と書くのが通例らしい             | これ、そのものに何か機能があるわけではないので、JavaScriptでonclickイベントで処理するなどで利用する。もちろん、 + クリックで画面遷移してもいい。  |
 | back   | 左矢印四角 | 画面左上   | <a class="back" href="#">Back</a>        | 全角3文字以内(それ以上与えると…で切られる) | hrefに何を入れててもhistory.backのような動きをする  |
 | cancel | 角丸四角   | 画面左上   | <a class="cancel" href="#">やめる</a>    | 特に無し(全角5文字以内が妥当?)              | 挙動はbackと変わらない。形状と文字数制限の違いだけっぽい  |
 
 *** class - メインに表示するボタン [#qb6f280b]
 
 |  class      |  形状        |  サンプル                                     |  文字数制限                                         |  備考 |h
 | whiteButton | 角丸四角-白  | <a class="whiteButton" href="#hoge">hoge</a>  | 特に無し長ければ2段になる(全角10文字以内が妥当?)  |   |
 | grayButton  | 角丸四角-黒  | <a class="grayButton" href="#hoge">hoge</a>   | 特に無し長ければ2段になる(全角10文字以内が妥当?)  |   |
 
 *** class - アニメーション [#rb26792d]
 
 |  セレクタ名      |  動き                                                                          |  サンプル                                  |  備考  |h
 | backSelector     | 1つ前の画面に来た時と同じアニメーションで戻る                                  | <a class="back" href="#">Back</a>          | デフォルト「.back, .cancel, .goback」の3つが割り当てられている |
 | cubeSelector     | 4角形の2面に今と次の画面を描画してあり、サイコロのように回転するアニメーション | <a class="cube" href="#hoge">hoge</a>      | デフォルト「.cube」。ディスプレイが小さい場合は、回転というよりslideと同じように見えるかもしれない… |
 | fadeSelector     | 次の画面がフェードインするアニメーション                                       | <a class="fade" href="#hoge">hoge</a>      | デフォルト「.fade」 |
 | dissolveSelector | 今の画面が消えつつ次の画面が出てくるクロスフェードアニメーション               | <a class="dissolve" href="#hoge">hoge</a>  | デフォルト「.dissolve」 |
 | flipSelector     | トランプのカードを裏返すようなアニメーション                                   | <a class="flip" href="#hoge">hoge</a>      | デフォルト「.flip」 |
 | popSelector      | 新しい画面が奥からフェードインしてくるようなアニメーション                     | <a class="pop" href="#hoge">hoge</a>       | デフォルト「.pop」 |
 | slideSelector    | 新しい画面が右から左にスライドするアニメーション                               | <ul><li><a href="#hoge">hoge</a></li></ul> | 「body > * > ul li a」とあるので、ul li a の場合のデフォルトの挙動 |
 | slideupSelector  | 新しい画面が下から上にスライドするアニメーション                               | <a class="slideup" href="#hoge">hoge</a>   | デフォルト「.slideup」 |
 | swapSelector     | 2枚のトランプのカードをシャッフルする感じで入れ替えるようなアニメーション      | <a class="swap" href="#hoge">hoge</a>      | デフォルト「.swap」 |
 
 *** class - ul li [#v097affa]
 
 |  class      |  形状/変化                         |  サンプル                                                       |  備考  |h
 | blueButton  | 角丸四角-青 のボタンになる         | <ul><li><a class="blueButton" href="#hoge">hoge</a></li></ul>   |   |
 | whiteButton | 角丸四角-白 のボタンになる         | <ul><li><a class="whiteButton" href="#hoge">hoge</a></li></ul>  |   |
 | grayButton  | 角丸四角-黒 のボタンになる         | <ul><li><a class="grayButton" href="#hoge">hoge</a></li></ul>   |   |
 | arrow       | リストの右に「>」と表示される     | <ul><li class="arrow">hoge</li></ul>                     |   |
 | forward     | リストの右に「(>)」と表示される   | <ul><li class="forward">hoge</li></ul>                   |   |
 | individual  | リストを左右に分割して表示する     | <ul class="individual"><li>hoge</li><li>fuga</li></ul>   | 「hoge」「fuga」のように 2つになる。3つ以上に分けたい場合は、theme.cssをカスタマイズする |
 | edgetoedge  | 角丸ではない四角いリストで表示する | <ul class="edgetoedge"><li>hoge</li></ul>                |   |
 | sep         | 余白を削って細いリストで表示する   | <ul class="edgetoedge"><li class="sep">hoge</li></ul>    | 「ul.edgetoedge」でのみ使用できる。  |
 
 *** リスト時 特殊タグ - ul li xxx [#d33a9255]
 
 |  タグ      |  用途                              |  サンプル                                                                  |  備考  |h
 | small      | リストの右に「(xxx)」と表示される  | <ul><li><a href="#hoge">hoge</a><small class="counter">1</small></li></ul> | aタグ部分をただのテキストにすると、small部分の表示位置がズレる  |
 | em         | 文字の太さが通常(細め)で表示される | <ul class="edgetoedge"><li><em>hoge</em></li></ul>                         | 「ul.edgetoedge」でのみ使用できる。  |
 
 *** class - ul のテーマ種類 [#x0358f7c]
 
 |  class      |  形状/変化                         |  サンプル                                                |  備考  |h
 | plastic     | 背景がリスト毎に濃淡で表示される   | <ul class="plastic"><li>hoge</li><li>fuga</li></ul>      | CSS3の「ul.plastic li:nth-child(odd)」が動いてないのか表示されないかも?  |
 | metal       | リストの縦が長めで表示される       | <ul class="metal"><li>hoge</li><li>fuga</li></ul>        |   |
 | edgetoedge  | 上述のように角丸でない四角いリスト | <ul class="edgetoedge"><li>hoge</li><li>fuga</li></ul>   |   |
 
 - 「リスト時 特殊タグ - ul li xxx」は、利用可能
 
 *** class - div [#r435a324]
 
 |  class      |  形状/変化                               |  サンプル                                        |  文字数制限  |  備考  |h
 | info        | 該当要素に背景が付き読みやすくなる       | <div class="info">hoge</div>                     | 特に無し     |   |
 | toolbar     | 画面上部にページタイトルのように表示する | <div class="toolbar"><h1>hoge</h1></div>         | 全角6文字以内(それ以上与えると…で切られる)     |   |
 
 #blikifooter(竹村)
 
 ----
 tag:[[JavaScript>tag/JavaScript]], [[ライブラリ>tag/ライブラリ]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら