NetFrontを使う - qa2の日記

Zaurusの標準WebブラウザのNetFrontを使うのに、機動力を生かすためホーム画面をカスタマイズしている。自分でHTMLファイルを書けば良いのだが、そこでNetFrontの使い勝手を活かすために通常使っていない表現を使う。Aタグに、accesskey属性を使うと、キーボード一発でリンク先に飛んだりできるのだ。
例えば下記のサンプルなら、NetFrontで開けば「Ｌ」キーを押すだけではてなの一覧へリンクする。このファイルをPCで開いた場合はブラウザ等の挙動によるが、いきなりリンク先に飛んだりはしないことが多い。PDAだから許されるのかもしれないが、キー一発でリンク先に飛べるのは、慣れてしまうと手離せない機能である。
また、フォームに使われるINPUTタグにaccesskey属性を使うと、キー操作ですぐに入力フォームに移動することもできる。下記サンプルでは「Ｇ」キーを押すとgoogleの検索フォームに移動し入力がすぐできるのだ。
こういった感じで画面いっぱいに各種リンクやフォームを登録している。左がリンク、右がフォームで埋めつくされ、accesskeyも英数字ほぼ使ってしまっている。
なお、アクセスキーに何を設定していたか忘れないように、Uタグでアンダーラインを引いている（いまどきUタグ…）。

↓HTMLソース

<HTML><HEAD><TITLE>Menu</TITLE>
<STYLE type="text/css"><!--
A:link { text-decoration: none; color: #fff; }
A:visited { text-decoration: none; color: #ccc; }
A:active { text-decoration: none; color: #fff; }
A:hover { text-decoration: underline; }
INPUT { height: 16pt; background: #abc;}
--></STYLE></HEAD>
<BODY bgcolor="#000000" text="#ffffff">
<TABLE border=0 cellspacing=0 cellpadding=1>
<TR valign="top"><TD width="380" style="padding: 0pt 4pt 0pt 2pt;">

<A href="http://www.hatena.ne.jp/">はてな</A>
<A accesskey="l" href="http://www.hatena.ne.jp/list">一覧<U>l</U></A>
<A accesskey="e" href="http://www.hatena.ne.jp/list?op=1&so=0&st=t&c=E">ア<U>e</U></A>
<A href="http://www.hatena.ne.jp/user?userid=hatenaid">履歴</A>
<A href="http://a.hatena.ne.jp/hatenaid/">A</A>
<A href="http://a.hatena.ne.jp/hatenaid/add">+</A>
<A href="http://b.hatena.ne.jp/hatenaid/">B</A>
<A accesskey="d" href="http://d.hatena.ne.jp/hatenaid/"><U>D</U></A>
<A href="http://d.hatena.ne.jp/hatenaid/edit">e</A>

</TD>
<TD width="220">

<TABLE border=0 cellspacing=0 cellpadding=0>
<TR><TD nowrap><FORM method=GET action="http://www.google.com/search">
<A href="http://www.google.com/"><U>g</U>oogle</A>
<A href="http://news.google.co.jp/nwshp?hl=ja&gl=jp">News</A>
</TD><TD>
<INPUT type=text name=q size=16 maxlength=255 value="" accesskey="g">
<input type=hidden name=hl value="ja"></TD><TD>
<INPUT type=image src="d.jpg" border=0 width=2 hight=4>
</TD></TR></FORM>

<TR><TD><FORM METHOD=GET ACTION="http://search.yahoo.co.jp/bin/search">
<A href="http://www.yahoo.co.jp/"><U>Y</U>ahoo</A>
</TD><TD>
<INPUT NAME=p size=16 accesskey="y"></TD><TD>
<INPUT type=image src="d.jpg" border=0 width=2 hight=4>
</TD></TR></FORM>

</TD></TR></TABLE>
</BODY></HTML>