2013年10月7日
富士通株式会社
らくらくスマートフォン プレミアム(F-09E)
らくらくタッチ実装ガイドライン
改版履歴
版数
ページ
章
内容
1.0
-
-
初版制定
Copyright 2013 FUJITSU LIMITED 1
目次
はじめに
本書の目的
動作環境
らくらくタッチ
機能概要
機能詳細と仕組み
実装時の注意点
補助資料
Copyright 2013 FUJITSU LIMITED 2
- はじめに -
Copyright 2013 FUJITSU LIMITED 3
本書の目的
らくらくスマートフォン プレミアム（F-09E）のらくらくタッチ
機能の詳細と、その実装方法を明確化することで、アプリ
ケーション開発者が、らくらくタッチの動作仕様を理解し、
適切な箇所に、適切にらくらくタッチ機能を適用できること
を目的とする。
なお、
本書で記載する実装方法は、標準的なAndroid™上でも、
実装前と変わらず適切に動作することを前提としている。
Copyright 2013 FUJITSU LIMITED 4
Android™、Google™ 、Google Chrome™ およびGoogle Play™ は Google Inc.の商標または登録商標です。
「dマーケット」、 「dメニュー」は 株式会社NTTドコモの商標または登録商標です。
動作環境
動作環境は
らくらくスマートフォン プレミアム（F-09E）とする。
※Android 4.2.2
Copyright 2013 FUJITSU LIMITED 5
- らくらくタッチ -
Copyright 2013 FUJITSU LIMITED 6
～機能概要～
Copyright 2013 FUJITSU LIMITED 7
タッチパネルの操作が初めてでも確実に入力ができるよう「触れ
る」と「押す」の違いをしっかりと区別するタッチパネルを採用した。
使い慣れたケータイのボタンのように操作することができる。触れ
た場合は、触れている箇所が表示されるので、どのボタンに触れ
ているかが明確にわかる。さらに、パネルを軽く押し込むことで入
力が確定するので、押し間違いが少なく安心である。
らくらくタッチ機能概要
Copyright 2013 FUJITSU LIMITED 8
触った箇所が
青い枠などで
表示される
軽くパネルを
押し込むと
指先に振動を
伝えながら
入力が確定
らくらくタッチに対応するためのポイントは以下三点となる
選択操作に際し、プレ選択機能（後述）が動作する
選択操作に際し、タップブロック機能（後述）が動作する
選択実行操作は、指先を押し込んだ場合にのみ実行される
この時、指先に実行を示す振動によるフィードバックが行われる
らくらくタッチ機能 期待動作
更に指先を
押し込む
Copyright 2013 FUJITSU LIMITED
ぶるっ
～機能仕様詳細と仕組み～
Copyright 2013 FUJITSU LIMITED 10
プレ選択機能について
らくらくタッチ機能では、ユーザーが事前に、触れている実行機能
を確認することができるように、軽く触れた段階で、実行部分の表
示変更(プレ選択表現)を行う。これがプレ選択機能である。
Copyright 2013 FUJITSU LIMITED 11
プレ選択機能の実現方法
Copyright 2013 FUJITSU LIMITED 12
state_focused
state_enabled
触る
離す
プレ選択機能のプレ選択表現はselectorの状態をstate_enabled→state_focused
に変化させ、selectorに設定された画像に変更することで実現している。
下図のような一般的なボタンの場合、上記仕組みに基づいた以下画像変更にて
プレ選択表現されている。
Note：
上記の場合、各々のボタン画像は拡大貼付けされている。
state_focusedはキーボードのカーソル操作時にも遷移する状態である。つまり、本件への対応はキーボードのカーソル表示
対応も意味する（キーボードカーソルの場合は、ユーザーがキーボードカーソルを操作するまでの間、状態を継続する）。
プレ選択表現が行われないケース
Copyright 2013 FUJITSU LIMITED 13
state_focused
state_enabled
触る
離す
selectorのstate_enabledに独自の画像を設定しているにも関わらず、
state_focusedに画像を設定していない場合は、state_focusedに遷移しても画像
変更されず、プレ選択表現されない。state_enabledに独自の画像を設定した場合
は、state_focusedにプレ選択されていることが（キーボードカーソルにより選択さ
れていることが）わかるような画像を設定しなければならない。
Note：
上記の場合、各々のボタン画像は拡大貼付けされている。
上記サンプルの詳細を本書35P「補助資料 サンプルアプリ」で記載している。
×
ユーザーが意図しない機能が誤って実行されないようにするた
め、F-09Eは、タップ操作(軽く触ってすぐ離す操作)をブロックして
いる。選択実行は軽く押し込まれた時にのみ許可している。これ
がタップブロック機能である。
無効操作（タップ操作）
タップブロック機能について
軽く触って
すぐ離す
ﾒｰﾙ起動
されない
Copyright 2013 FUJITSU LIMITED 14
タップブロック機能の実現方法
ﾀｯﾁﾊﾟﾈﾙﾄﾞﾗｲﾊﾞ
ﾌﾚｰﾑﾜｰｸ
（ｱﾌﾟﾘ表示領域）
ﾌﾚｰﾑﾜｰｸ部品
（ﾒｰﾙ起動ﾎﾞﾀﾝ）
タップ
ブロック
ｱﾌﾟﾘ
（ﾎｰﾑｱﾌﾟﾘ）
らくらくタッチ機能オフの
場合
らくらくタッチ機能オン
の場合
onClick通知
onTouchEvent通知
タッチイベント(ﾀｯﾌﾟ相当)
タッチイベント(ﾀｯﾌﾟ相当)
onTouchEvent通知
部品側が押し込み検知時のみ、
onClick通知することで実現
タップブロック機能は、タップ操作時にonClickを通知せず、押し込んだ時のみ通
知することで実現している。例えばホームアプリのメール起動ボタン上でタップ操
作を行った場合、らくらくタッチオフ/オンそれぞれの処理は以下となる。
機能の選択実行
（ﾎｰﾑｱﾌﾟﾘがﾒｰﾙ起動)
Copyright 2013 FUJITSU LIMITED 15
タップブロックが機能しないケース
UI部品のonTouchEventに代表されるタッチハンドラがOverrideされると、タップに
よる選択操作が無効にならない。タップブロック対応のためには、前頁のように、選
択実行契機をonClickの通知に委ねる必要がある。
ﾀｯﾁﾊﾟﾈﾙﾄﾞﾗｲﾊﾞ
ﾌﾚｰﾑﾜｰｸ
（ｱﾌﾟﾘ表示領域）
ﾌﾚｰﾑﾜｰｸ部品
（ﾒｰﾙ起動ﾎﾞﾀﾝ）
ｱﾌﾟﾘ
（ﾎｰﾑｱﾌﾟﾘ）
タップ
ブロック
タッチイベント(
ﾀｯﾌﾟ相当
)
onTouchEvent通知
onTouchEvent
(Override)
ﾀｯﾌﾟによる
選択実行
タップ
ブロック
タッチイベント(
押し込み相当
)
onTouchEvent通知
onTouchEvent
(Override)
押し込みによる
選択実行
Copyright 2013 FUJITSU LIMITED 16
らくらくタッチ機能は、ボタンのようなUIを押しこんだ際、実際のボ
タン押下時の感覚を得られるように、指先に対して振動のフィード
バックを行っている。これがらくらくタッチ機能の振動フィードバック
機能である。
押し込み選択と振動フィードバックについて
Copyright 2013 FUJITSU LIMITED 17
押し込み選択と振動フィードバック実現方法
ﾀｯﾁﾊﾟﾈﾙﾄﾞﾗｲﾊﾞ
ﾌﾚｰﾑﾜｰｸ
（ｱﾌﾟﾘ表示領域）
ﾌﾚｰﾑﾜｰｸ部品
（View派生）
ｱﾌﾟﾘ処理
onClickListener有
onClick通知
onTouchEvent通知
タッチイベント(押し込み相当)
押し込み操作相当のタッチイベントを受け、onClick通知をする直前に、触れた
箇所へ振動をフィードバックしている。
clickableなUI部品が基本条件です。この時onClickListenerの有無は問わない。
機能の選択実行
振動！
onClickListener無
onClick通知
onTouchEvent通知
振動！
タッチイベント(押し込み相当)
Copyright 2013 FUJITSU LIMITED 18
振動フィードバックが行われないケース
UI部品のonTouchEventに代表されるタッチハンドラがOverrideされると、振動処
理が動作せず、振動フィードバックが行われない。Override時に振動フィードバック
が適切に行われるためには、superを呼び出す必要がある。
ﾀｯﾁﾊﾟﾈﾙﾄﾞﾗｲﾊﾞ
ﾌﾚｰﾑﾜｰｸ
（ｱﾌﾟﾘ表示領域）
ﾌﾚｰﾑﾜｰｸ部品
（View派生）
ｱﾌﾟﾘ処理
タップ
ブロック
onTouch通知
onTouchEvent
(Override)
押し込みによる
選択実行
タップ
ブロック
タッチイベント(
押し込み相当
)
onTouch通知
onTouchEvent
(Override)
押し込みによる
選択実行
タッチイベント(
押し込み相当
)
例外
振動！
super.onTouchEvent
Copyright 2013 FUJITSU LIMITED 19
～実装時の注意点～
Copyright 2013 FUJITSU LIMITED 20
らくらくタッチ機能 実装時の注意点<1>
[プレ選択表現]
プレ選択表現の対象としたい、選択操作可能なUIに対し、
独自の画像変更処理を行ってはならない。また、
selectorのstate_enabledに
専用の画像
を用意している場合は、
selectorの
state_focused
に対しても、プレ選択表現用の画像を
用意しなければならない。
適切に設定することで、プレ選択表現が行われるようになる。
上記に加え、onTouchEvent等のタッチハンドラをOverrideした
viewを用いている場合、戻り値には必ずtrueを返却しなければ
ならない。falseが返却されると、前記のプレ選択画像が設定さ
れていたとしても、プレ選択画像が表示されない。
Copyright 2013 FUJITSU LIMITED 21
らくらくタッチ機能 実装時の注意点<2>
[タップブロック/振動フィードバック]
タップブロック・振動フィードバックの対象としたい選択操作可能
なUIに対し、view派生のUI部品を用い、
かつ、onClickによる通知を選択実行契機とすること。
タッチイベント監視の意図で、onTouchEvent等のタッチイベント
ハンドラを利用している場合、superを呼び出し、選択実行契機
のみをonClick通知に委ねることで、タップブロック・振動フィード
バックへの対応が可能となる。
Copyright 2013 FUJITSU LIMITED 22
[振動フィードバック]
押し込み操作時の振動フィードバックはclickableなUI部品に対し
てのみ実行される。振動フィードバックの対象としたいUI部品は
clickableとしなければならない。
例外的にListViewはonClickListener登録が追加条件として必要
である。ListView継承部品をらくらくタッチ対応させる場合は、必
ずonClickListener登録を実装しなければならない。
Note：
Android標準のListView実装が、アイテム選択時の決定音鳴動条件として、onClickListenerの登録を必要としていることに起因し
た条件である（音の鳴動条件と振動の鳴動条件が異なると、振動はするが音が鳴らないといった操作上違和感のある条件が存
在してしまうため、鳴動条件を合わせている）
らくらくタッチ機能 実装時の注意点<3>
Copyright 2013 FUJITSU LIMITED 23
①触る
①´押し込む
②離す
らくらくタッチ機能 実装時の注意点<4>
Copyright 2013 FUJITSU LIMITED
ViewGroup
View
ACTION_DOWN
ACTION_DOWN
ACTION_UP
ACTION_UP
ACTION_MOVE
ACTION_CANCEL ACTION_DOWN
UI部品に触れた際のACTION_DOWNをキャンセルし、タッチシーケンスをや
り直すため、押し込み時にACTION_CANCELを通知する。
[押し込み操作時のタッチイベント]
標準的なAndroidは下図①→②の操作によりUI部品の選択実行操作となるが、
F-09E らくらくタッチ設定オンの場合は、
赤点線枠で囲まれた部分が加わり、
①
→
①´→
②にて選択実行操作になる。onTouchEvent等のタッチハンドラの
OverrideをしているViewでは、ACTION_CANCEL受領処理の実装、または、二
回目のACTION_DOWNを無視する実装をしなければならない。
キャンセル
ACTION_MOVE
24らくらくタッチ機能 実装時の注意点<5>
指先を
押し込む
Copyright 2013 FUJITSU LIMITED 25
ぶるっ
[WebViewの利用]
らくらくタッチに対応したいWebView上に表示するコンテンツを作
成する際は、 後記のらくらくタッチ対応要素を利用すること。対
応要素のみで形成することで、プレ選択操作時のプレ選択表現、
押し込み時の振動フィードバックに対応できる。
らくらくタッチ機能 実装時の注意点<6>
広告
リンク
Copyright 2013 FUJITSU LIMITED
広告
リンク
プレ選択表現する
プレ選択表現しない
26広告リンクが
画面サイズより大きい
[WebViewの利用]
プレ選択表現の領域サイズが画面サイズよりも大きい場合、プ
レ選択表現は行わない。
ボタン
[WebView利用]
onTouchStart、onTouchEndのJavaScriptイベントハンドラを使用
する場合は、以下に留意しなければならない。
1.
onTouchStartがコールバックされるタイミングは、押し込み操作実行時となる。
2.
onTouchEndがコールバックされるタイミングはonTouchStartのコールバック後、指を離した時と
なる。
3.
1、2より、onTouchStartとonTouchEndでボタンを実現するようなコンテンツを作成した場合は、押
し込み操作をしないと動作しない。
ボタン
らくらくタッチ機能 実装時の注意点<7>
Copyright 2013 FUJITSU LIMITED
ぶるっ
ボタン
function onTouchStart(e) {
・・・
ボタンの色を変える
}
function onTouchEnd(e) {
・・・
ボタンの色を戻す
ボタン押下時の処理を実行
}
27ボタンにタッチ
押し込み
指を離す
-補助資料-
Copyright 2013 FUJITSU LIMITED 28
補助資料 onClick/onLongClick
以下の関数の通知契機はらくらくタッチに対応している。
そのため、らくらくタッチ機能の設定がオンの場合、らくらくタッチ機能に対応した通知契機になる。
<らくらくタッチ設定＝オン ダウンロードアプリのらくらくタッチ設定＝オン>
onClick ：押し込み操作→緩め操作（またはUP操作）発生時に通知される
onLongClick ：押し込み操作→規定時間経過時に通知される
<らくらくタッチ設定＝オフ>
onClick ：タップ操作
onLongClick ：ロングタップ操作
android.view.View.OnClickListener.onClick
android.view.View.OnLongClickListener.onLongClick
Copyright 2013 FUJITSU LIMITED 29
補助資料 らくらくタッチ対応UI部品
らくらくタッチ機能オンに伴いonClick, onLongClick
の通知契機がらくらくタッチ対応となる主なUI部品は
右記の通りになる。
ただし、レイアウタに代表されるタッチイベントを部
品側で直接ハンドルしないUI部品や、実装クラスは、
この一覧への追記を行っていない。
例：
・LinearLayout等に代表される各種レイアウタ
（タッチイベントを直接ハンドルしない）
・AbsListView（抽象クラス） - ListView（実装クラス）
View ZoomButton ImageView TextView Button CompoundButton CheckBox RadioButton Switch ToggleButton CheckedTextView EditText AbsListView GridView ExpandableListView AbsSpinner DatePicker TimePicker NumberPicker TabWidgetCopyright 2013 FUJITSU LIMITED 30
補助資料 WebViewらくらくタッチ対応リスト
HTML カテゴリ タグ 備考 ハイライトさせない場合 （プレス振動は動作します） 1 フォーム <input> CSSで -webkit-tap-highlight-color: rgba(xx,xx,xx,0) プロパティを設定すると HTMLタグ及びその配下のタグについてハイライトされ ない 2 フォーム <textarea> 3 フォーム <button> 4 フォーム <select> 5 フォーム <option> 6 フォーム <label> 対応するフォーム部品(タグ)に対しての プレ選択、押し込み振動時の動作 7 リンク <a> 8 リンク <area> 9 要約 <summary> <sumary>が未設定の場合は<sumary> 部分の代替文字部分をハイライト 詳細情報の開閉操作時の動作 10 フレーム <iframe>,<frame> 11 メディア <video> 12 メディア <audio> 13 埋め込み <object>,<embed> JavaScript イベント インベント発動条件 備考 ハイライトさせない場合 （プレス振動は動作します） 1 onClick タップ時→押し込み（後の緩め）操作時に実行される CSSで -webkit-tap-highlight-color: rgba(xx,xx,xx,0) プロパティを設定すると HTMLタグ及びその配下のタグについてハイライトされ ない 2 onMouseDown タップ時→押し込み（後の緩め）操作時に実行される （マウス操作のクリック開始をエミュレートしている） 3 onMouseUp タップ時→押し込み（後の緩め）操作時に実行されるイベント （マウス操作のクリック終了をエミュレートしている） 4 onMouseOver タップ開始時→押し込み操作時に実行されるイベント ドラッグ開始やピンチ開始時にも実行される ただし、同一要素上でonMouseOutなしに再度onMouseOverが実施された場合 は実行されない。 （マウス操作の要素上に乗った時をエミュレートしている）Copyright 2013 FUJITSU LIMITED 31
らくらくタッチ対応要素リスト
補助資料 GestureListener
以下標準的なAndroidのジェスチャー関数については、らくらくタッチ機能に対応していないため、
F-09Eのらくらくタッチ設定をオンにしても、らくらくタッチ機能の影響を受けない。
android.view.OnGestureListener.onDown
android.view.OnGestureListener.onSingleTapUp
android.view.OnGestureListener.onScroll
android.view.OnGestureListener.onLongPress
android.view.OnGestureListener.onFling
android.view.OnDoubleTapListener.onSingleTapConfirmed
android.view.OnDoubleTapListener.onDoubleTap
android.view.SimpleOnGestureListener.onSingleTapUp
android.view.SimpleOnGestureListener.onLongPress
android.view.SimpleOnGestureListener.onScroll
android.view.SimpleOnGestureListener.onFling
android.view.SimpleOnGestureListener.onShowPress
android.view.SimpleOnGestureListener.onDown
android.view.SimpleOnGestureListener.onDoubleTap
android.view.SimpleOnGestureListener.onDoubleTapEvent
android.view.SimpleOnGestureListener.onSingleTapConfirmed
Copyright 2013 FUJITSU LIMITED 32
補助資料
らくらくタッチが動作しないケース
以下のいずれかに該当する場合は、らくらくタッチ機能がオンの場合でも、各種
らくらくタッチ対応UI部品は、らくらくタッチの動作を行わない。
F-09Eがセーフモードで起動されている。
F-09Eの「設定」→「音・振動・ﾀｯﾁの設定」→「らくらくタッチ」→「詳細設
定」→「ﾀﾞｳﾝﾛｰﾄﾞしたｱﾌﾟﾘ」の設定がオフにされている。
※本設定の対象はダウンロードアプリのみになる
F-09Eで何らかのアクセシビリティサービスが有効化されている。
※アクセシビリティサービスを優先する
Copyright 2013 FUJITSU LIMITED 33
補助資料 サンプルアプリ
Copyright 2013 FUJITSU LIMITED
