DQ10攻略WEB > DTZ(ダブルタップゾーン)の説明

DTZ(ダブルタップゾーン) for iOS

近年、スマートフォンやタブレットでのサイト閲覧が増え、

パソコン、タブレット、スマホ(ハイエンド携帯端末)でも同じコンテンツが快適に見れるように、
iOS系(iPhone/iPod touch/iPad)のダブルタップによる自動拡大・縮小機能を利用して、
DTZ(ダブルタップゾーン)をテーブル<table>表に付けることにしました。

 

← 元のページに戻る

 



iOS系ダブルタップ

iOS系(Safari)端末では、ウェブサイトを閲覧の際に、ダブルタップイベントが発生すると、メニューや文章や写真をその幅に合わせて自動拡大します。

 

片手操作(電車の中とか)、ながら操作(ドラクエやりながら) の時に自動拡大は重宝します。

 

残念ながら現在のAndroid系では自動拡大しません。

 

DTZ(ダブルタップゾーン)はこんな時に便利

コンテンツの文章を自動拡大して読んだ後のテーブル表を見る際に DTZ(ダブルタップゾーン) をダブルタップすると、その幅に自動拡大します。

当サイトでは、iPod touchとiPad miniの両方で検証しながら適切に見れる大きさになるように設定しています。

 

ちなみに、Windows7以前のパソコンの液晶画面を指でぶちぶちタップしても何も起こりません。

Windows8でもタッチパネル対応画面でないと、画面をぷちぷち触っても何も起こりません。

 

 

以下の表は、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
DTZone Pink

dtzgreen.jpg
DTZone Green

dtzyellow.jpg
DTZone Yellow

dtzgrley.jpg
DTZone Grey

dtzblue.jpg
DTZone Blue

dtzblack.jpg
DTZone BLACK


dtz2pink.jpg
DTZ Pink

dtz2green.jpg
DTZ Green

dtz2yellow.jpg
DTZ Yellow

dtz2grley.jpg
DTZ Grey

dtz2black.jpg
DTZ Black

 

さらに、右側にヘルプ代わりに「?」を付けて説明ページに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/Android6

とか、なんかに差し替えておきます。

 

画像 直リンの場合は、「?」の部分は http://dq10.org/dtz.html のままでお願いします。

 

(月間ページビューが100万を超えるようなサイトからの直リンクはご遠慮ください)

 

画像の色やサイズ、文字サイズ等の要望があれば、メールにて承ります。

早めに画像を作ってアップしておきます。
要望やお問い合わせはこちらのフォームにどうぞ。

 


2012年12月1日作成

リロード先頭に戻る

  • オンラインゲームの特性上、仕様やデータは予告無く変更される場合があります。

はてなブックマークに追加 Yahoo!ブックマークに登録  

ドラクエ10Books
ドラクエ10関連本