Hatena::ブログ(Diary)

おぎろぐはてな RSSフィード

2008-01-06

iPod touchでフォーム入力補完をするbookmarkletを作るbookmarklet

2007年末の振り返りエントリでも書いたように、ITmediaの3分LifeHacking (該当記事)でリンクされたことから、2007年の年間アクセス数トップになった記事が、 iPod touchで無線LANのブラウザ認証を楽にするbookmarklet - おぎろぐはてなでした。

しかしながら、無線LANのアクセススポットの3種類にしか対応していないこと、増やしていくにしても自分の知らないスポットに対して作ることができないという制約があります。また、はてブで、

leva こういうちょっとした楽チンさはいいよね。毎回認証してくるサイト(e.g. Yahoo! Japan)なんかもコレで楽できます。

はてなブックマーク - iPod touchで無線LANのブラウザ認証を楽にするbookmarklet - おぎろぐはてな

というアイデアも頂いたこともあり、各自でこういったbookmarkletを作るためのbookmarkletを作ってみました。

  • no title (iPod touch用に最適化してます)

年末年始の休暇中に、実家でたらたら書いて、AA-Camp#6 最終日で仕上げたもので、bookmarklet自体はそんなに難しくもないけれど、iPod touchでの読みやすさと、なるべく分かりやすい説明に重点をおいています。

IDとパスワードの2項目の入力フォームを対象にしていて、希望のページでbookmarkletを動かすと、メッセージがでるので、それに従い、まずIDの入力エリア、そしてパスワードの入力エリアをタップするだけです。これで、前記事と同じ形のbookmarkletが完成します。

つかいかた

bookmarkletのつくりかた

上のURLにiPod touchからアクセスするとこのような画面が出てきます。

ページにも書いてありますが、上のボタンをタップし、いたページをSafariでブックマークします。通常版とlocalhost版の2つを用意していて、localhost版は、bookmarkletを含んだダミーURLのホストをlocalhostにしています。公衆無線LANのログイン画面など強制的に別のアドレスに飛ばされてしまう画面、もしくはリファラ等を当サイトに送信したくない場合にご利用ください。(けど、実際にそういう条件で確認してないので、もしかしたらダメかも)

ボタンのリンク先はこんな感じ。ここで左上の+ボタンおしてブックマーク

ここではURLを編集することはできないので、そのまま保存。

すぐにブックマークを開いて、編集モードにして、先ほどブックマークしたアイテムを編集します。

javascript:〜 より前のテキストを削って保存します。これでbookmarkletをつくるbookmarkletが完成

(2/28追記) 要素名の扱いを修正しました

コメントの方でGOTさんにお知らせ頂き、kyleさんには問題となっている点をお教え頂きました、Livedoor FONのアクセスポイントでエラーが出る点について対応いたしました。(kyleさんにはほんと感謝です!) 要素名がformのプロパティと衝突する場合に問題が出ていた点を修正しています。

すでにbookmarkletを作られている際は、再度作り直して頂く必要があります。もし不具合などありましたら、コメントにてお寄せください。

nsns 2008/02/03 23:59 URLにアクセスすると、以下のエラーが出てしまい、ブックマーク登録用ページまでたどり着けません。
今はWindows Safariからですが、iPod touch Safariも同様です。
> Parse error: syntax error, unexpected T_STRING in /home/i-o/www/js/200712/header.inc.php on line 4

i_ogii_ogi 2008/02/04 00:57 > nsさん
失礼しました。現在は復旧しております。

GOTGOT 2008/02/09 00:25 livedoor Wirelessの「livedoor_FON」のアクセスポイントでブックマークレットがうまく働きませんでした。通常版では動作せず、localhost版ではパスワードのみ入力できました。

i_ogii_ogi 2008/02/09 02:35 >GOTさん
ありがとうございます。まだ、Livedoor FONを試したことがないので、確認してみます。

kylekyle 2008/02/14 14:13 はじめまして。表で FON_livedoor の認証画面のソースを見てきたんですが、ID を入れるテキストエリアの名前が ”name”(? HTML エディタのデフォルトか何かか?)になっているので、Safari は form 自体の名前である name を参照しようとして、テキストエリアを特定できずにいるのではないかと思います。パスワードの方は ”password” になっているので入るのですが、弱っちゃうな。

kylekyle 2008/02/14 17:11 たびたびすみません。’d.〜.value’ ではなく、明示的に ’d.elements[”〜”].value’ としたら、FON_livedoor でも行けるようです。Safari では、form のプロパティ名とバッティングする名前を input 要素の name につけてしまうと、form のプロパティの方が優先されるようです(Firefox だと、input 要素の方が優先されます)。

i_ogii_ogi 2008/02/17 21:34 >kyleさん
お返事遅くなってすいません。
なるほどですね、ありがとうございます!
おって、ご指摘の点を反映して、修正しておきます。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証