おぎろぐはてブロ

なんだかんだエンジニアになって10年以上

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を作ってみました。

年末年始の休暇中に、実家でたらたら書いて、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を作られている際は、再度作り直して頂く必要があります。もし不具合などありましたら、コメントにてお寄せください。