DQ10攻略WEB ＞ DTZ(ダブルタップゾーン）の説明
DTZ(ダブルタップゾーン） for iOS
近年、スマートフォンやタブレットでのサイト閲覧が増え、
パソコン、タブレット、スマホ（ハイエンド携帯端末）でも同じコンテンツが快適に見れるように、
iOS系（iPhone/iPod touch/iPad）のダブルタップによる自動拡大・縮小機能を利用して、
DTZ(ダブルタップゾーン）をテーブル<table>表に付けることにしました。
iOS系ダブルタップ
iOS系（Safari)端末では、ウェブサイトを閲覧の際に、ダブルタップイベントが発生すると、メニューや文章や写真をその幅に合わせて自動拡大します。
片手操作（電車の中とか）、ながら操作（ドラクエやりながら） の時に自動拡大は重宝します。
残念ながら現在のAndroid系では自動拡大しません。
DTZ（ダブルタップゾーン）はこんな時に便利
コンテンツの文章を自動拡大して読んだ後のテーブル表を見る際に DTZ(ダブルタップゾーン） をダブルタップすると、その幅に自動拡大します。
当サイトでは、iPod touchとiPad miniの両方で検証しながら適切に見れる大きさになるように設定しています。
ちなみに、Windows７以前のパソコンの液晶画面を指でぶちぶちタップしても何も起こりません。
Windows８でもタッチパネル対応画面でないと、画面をぷちぷち触っても何も起こりません。
以下の表は、DTZサンプルです。
必要な情報だけを拡大 - 素材 逆引き-相場表
| ？ | |||||||||||||||||
| 素材あ行｜か行｜さ行｜た行｜な行｜は行｜ま行｜や行｜ら行｜素材相場総評 | |||||||||||||||||
| 素材名 あ行 |
武器 Lv |
防具 Lv |
裁縫 Lv |
木工 Lv |
道具 Lv |
ツボ Lv |
ランプ Lv |
改 築 |
店 売値 |
素材屋 店買値 |
2012/ 11/26 |
2012/ 11/18 |
2012/ 11/10 |
2012/ 11/2 |
2012/ 10/18 |
2012/ 10/04 |
2012/ 8/29 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 青い宝石 | 13,14 15,25 |
19,20 | 24 | □ | 600 | ガタラ 1200 |
664 | 637 | 800 | 690 | 700 | 610 | 630 | ||||
| 赤いサンゴ | 27,30 | 25,30 | 10,22 | ○ | 25 | ラッカ 250 |
23 | 29 | 21 | 27 | 24 | 23 | 20 | ||||
| 赤い宝石 | 12,20 | 16 | 16 | 600 | ガタラ 1200 |
610 | 600 | 600 | 599 | 610 | 607 | 620 | |||||
全部拡大、部分的に拡大 - スキルポイント・常時スキル習得レベル
| ？ | ||||||||||||||
| ？ | ||||||||||||||
| Lv | 獲得 SP |
累計 SP |
Lv | 獲得 SP |
累計 SP |
Lv | 獲得 SP |
累計 SP |
Lv | 獲得 SP |
累計 SP |
Lv | 獲得 SP |
累計 SP |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 10 | 3 | 3 | 20 | 4 | 29 | 30 | - | 54 | 40 | 4 | 83 | 50 | 4 | 107 |
| 11 | 3 | 6 | 21 | - | 29 | 31 | 4 | 58 | 41 | 4 | 87 | 51 | - | 107 |
| 12 | - | 6 | 22 | 3 | 32 | 32 | 5 | 63 | 42 | - | 87 | 52 | 3 | 110 |
DTZ（ダブルタップゾーン）をサイトに追加する
iOS系端末では、ウェブサイトを閲覧の際に、ダブルタップイベントが発生すると、メニューや文章や写真を自動拡大しますが、これは<table>の<td>にも適用されます。
なので、<td>で閲覧者に見せたい範囲を<td colspan="ｘ">して、その<td>をダブルタップしてもらえれば、その範囲で自動拡大することになります。
ただ、そこが空白<td>だと、閲覧者か「？？？」になってしまうので、バックグランドに適当な画像を仕込んでおきます。
また、その<td>に通常の文字があると、ダブルタップのタイミングが合わなかったりすると、コピペモードになったりするので、できるだけ空白にするか、右側に「？」を付けて、DTZの説明ページに飛ばすと良いかもしれません。
DTZは、以下のようなサイトをお持ちの方にお薦めです。
- 最近、スマホやタブレットでのアクセスが多くなってきた。
- サイトにテーブル<table>を多用している。
- スマホ専用サイトを作ってない。
- 作る気もない。
- アンドロイド系にもこの機能を付けて欲しい（願望を込めて）
DTZは、テーブルに以下の方法で簡単に追加することができます。
例： <td>6列を DTZイメージ背景にする。
| <td colspan="6" style="background: url(img/dtzone.jpg) no-repeat"></td> |
画像は以下の物を用意しましたので、よかったら使って下さい。
dtzpink.jpg dtzgreen.jpg  dtzyellow.jpg  dtzgrley.jpg  dtzblue.jpg  dtzblack.jpg  dtz2pink.jpg  dtz2green.jpg  dtz2yellow.jpg  dtz2grley.jpg  dtz2black.jpg  |
さらに、右側にヘルプ代わりに「？」を付けて説明ページにLinkしておくと、パソコン閲覧者や、Andoroid系閲覧者から不思議がられずに済みます。
| <td colspan="6" align="right" style="background: url(img/dtzone.jpg) no-repeat"><a href="dtz.html">？</a></td> |
説明がメンドーなら「？」をこのページにリンクしておいてください。
http://dq10.org/dtz.html
| <td colspan="6" align="right" style="background: url(img/dtzone.jpg) no-repeat"><a href="http://dq10.org/dtz.html">？</a></td> |
一応このページからの戻りはJava戻りにしておきます。
念のため、ボタンで戻る
この「ダブルタップゾーン」が使えるな・・・と思ったら、BLOGでも twitterでも サイトでも、是非 このページか DQ10攻略WEB の紹介でも さらりとお願いします。
スマホやタブレットで見やすくなるように是非広めてってください。
このDTZページは、
http://dq10.org/dtz.html
になります。
一応このサイトはドラゴンクエスト10攻略サイトです。
http://dq10.org
DTZ画像を持ち帰るのすらメンドクセーなら、
画像 直Linkでも構いません。
| <td colspan="6" align="right" style="background: url(http://dq10.org/img/dtzpink.jpg) no-repeat"><a href="http://dq10.org/dtz.html">？</a></td> |
dtzpink.jpg を 上記の画像の中から選んで下さい。
画像 直リンクの場合なら、いつかAndroid系でもこの機能が使えるようになったら、DTZ画像を
DTZ(ダブルタップゾーン) for iOS
を
DTZ(ダブルタップゾーン) for iOS/Android６
とか、なんかに差し替えておきます。
画像 直リンの場合は、「？」の部分は http://dq10.org/dtz.html のままでお願いします。
（月間ページビューが100万を超えるようなサイトからの直リンクはご遠慮ください）
画像の色やサイズ、文字サイズ等の要望があれば、メールにて承ります。
早めに画像を作ってアップしておきます。
要望やお問い合わせはこちらのフォームにどうぞ。
2012年12月1日作成
- オンラインゲームの特性上、仕様やデータは予告無く変更される場合があります。
