研究日誌 - 1380461699 - したらば掲示板

研究日誌

120：名無しさん：2014/02/14(金) 07:42:51: 【その他】ランチャー別タイプ

この前にHover.cssを使ったＨＴＭＬ画面を利用したランチャーを
作成しましたが、ヒューマンインターフェイス（ＵＩ）的に
とてもわかりやすくなったと思っています。

ボタンを押すとボタンの外枠が強調（ＢＯＬＤ）されるだけですが
私のタブCH-AND7000では、タップの感度が悪いので実際タップして
いたつもりでも反応しない場合があるので、ボタンに変化がある
と使いやすくなります。

また、CH-AND7000は低性能なので処理が遅くなる場合があり、その
時にもボタンに変化があると反応したかどうかはわかるので便利です。

Hover.cssは、とてもいいので、ランチャーだけでなく他のＨＴＭＬ
モード利用ツールも修正していこうと考えていますが、もう少し
他のタイプのＨＴＭＬ画面をつかってみようと思い、ネットで調べました。

【CSS3の勉強になるかも！？画像を使わないボタンの作成手順】
http://weboook.blog22.fc2.com/blog-entry-311.html

【ホームページ－色つきのボタンを作る】
http://yume.hacca.jp/koiki/form/button-color.htm

【JavaScript】イベントハンドラ(onClick等)で複数の関数を実行する
http://www.ore-memo.com/459.html

上記の３つのサイトの合わせ技でテスト用のランチャーHTML画面を
作成してみました。

正直ＨＴＭＬの知識もうろ覚えで、javascript、スタイルシートは、
コピペするだけというレベルなのでかなり苦戦しました。

この方法だとボタンのデザインや色にも自由度があり、スタイルシート
も組み込んでしまっているので外部ＣＳＳも別ファイルで用意不要で
いいかなと思っています。

ボタンもわざわざ画像ファイルを用意しなくてもよく、タップすると
ちゃんと色が変化するのでわかり易いです。

さっそくランチャーに組み込んでテストしてみました。
想定した通りの動作が確認できました。

組み込みといっても呼び出すHTMLファイル名を変更しただけです。

hover.cssもいいですが、こちらも捨てがたいなぁとちょっと悩み中です。
【ランチャー用HTML、起動直後、ピンチアウト時、タップ時の画面】
https://db.tt/1DJpWke8

2chMate 0.8.6/unknown/L01A/4.0.3/LT

※書き込む際の注意事項はこちら

※画像アップローダーはこちら

（画像を表示できるのは「画像リンクのサムネイル表示」がオンの掲示板に限ります）