iPod touch 入力支援ブックマークレット(iPhoneも可)

ここで提供するブックマークレットは、フォーム入力(主にログイン)を補助するブックマークレットです。「フォームに入力した情報」をブックマークに保存することができます。

iPod touch/iPhone用のブックマークレットはたくさんありますが、その中でもログインを簡単にしてくれるブックマークレットがあります。FON用、BBモバイル用などと色々なものがあるのですが、自分が今まさに使いたいページでそのようなブックマークレットがなければどうしましょう?自分でブックマークレットを作る?それでもいいのですがパソコンがないと厳しいです。

このブックマークレットは、現在表示しているページのフォーム情報を保存するブックマークレットを作成します。つまり、ブックマークレットを生成するブックマークレットです。(ややこしくてすみません)以降のログイン時の入力を簡単にするものです。(ログイン情報はどこにも送信しません。自ブラウザ内で完結しています)

使い方


iPod touch/iPhoneへ通知するには、こちらのURL(http://www.civic-apps.com/bookmarklet-if.html)をメールで送信して、そこからリンクをクリックすると楽です。

  1. 入力支援ブックマークレット本体のブックマークします
    ブックマークの仕方は上記の「入力支援ブックマークレットはこちら」のページをブックマーク登録してから、ブックマークの修正でURLの先頭部分(~html?まで)を削除します。長いURLなので先頭まで移動するのが大変ですが、本体の登録は一度きりなのでご了承ください。
  2. 保存したいページを表示し、ログイン情報を入力します
    例えばこんな感じ
    保存したいページのフォーム入力を済ませる
  3. 入力支援ブックマークレットを実行します
    1.で登録したブックマークです。
    入力支援ブックマークレット本体実行
  4. 保存するフィールドを選択するパネルが下部に表示されるので、保存したいフィールドをチェックします。
    フィールドの一覧が表示されます。入力したパスワードは見えます。
    保存フィールドの一覧
  5. 「Bookmarklet化」ボタンを押して、表示されたウィンドウのブックマークを保存します
    about:で始まる別ページが表示されます。実際には空ページで、URLをブックマークするためだけに使用します。再び登録してから、修正で先頭部分(about:)を削除してください。
    生成ブックマークレットURL
  6. 使用する際には、このブックマークを実行するとフォーム入力が復元されます
    実行するブックマークレット
    未入力状態でブックマークレットを実行すると、フォーム情報が埋められます。
    実行結果

※注意
生成されたブックマークレットにログイン情報を持たせるということは、ブックマークをのぞくとパスワードがバレバレです。ipod touchを紛失したりする場合も危険です。その点のリスクを理解した上でご利用ください。(例えばパスワードは全部入力しないとか。だから入力支援なのです。)

技術的な情報

ブックマークレットを作成するブックマークレットを作るのは厄介でした。
JavaScriptの関数として作るのはすぐできたのですが、それをブックマークレット化するのに手間がかかりました。[「JavaScriptのイベントハンドラ」を持ったHTML}を出力するJavaScript]をアンカータグに記述するためにURLエスケープしています。自分でももう、どの部分の文字列リテラルなのかチンプンカンプンです。

ブックマークレット用のURLをipod touchに登録するためには、「URLの前方部分を削って~」のテクニックが良く使われますが、そのために今回のブックマークレットURLをどこかにリクエストしてしまうのは、利用者として怖くて使えないので、ローカルだけで完結する方法を模索しました。
その結果、about:で始まるURLにすることで、リクエストを送信せずにURLをロケーションバーに突っ込むことができました。

すげーの作った。と思ったら、ほとんど同じことを2ヶ月前に完成させていたページを発見!なんという脱力!
iPod touchでフォーム入力補完をするbookmarkletを作るbookmarklet – おぎろぐはてな
でもせっかく何日もかけて作ったものだからアウトプットしておく!ログイン以外にもフォーム入力全般的に使えるし、radio,checkbox,text,passwordに対応しているから。


iPod touch 入力支援ブックマークレット(iPhoneも可)」への17件のフィードバック

  1. おかげさまで、Docomo Mzone用が出来ました。
    これで馬鹿げたわずらわしさから開放されます、有難う。

  2. 役に立ったようで、作ったかいがありました。
    報告のコメントありがとうございます。

  3. はじめまして IPHONE用にこのようなブックマークレットを探していたら
    まさに これがほしかった! というのがこちらにありました。
    でも試して見たらIPOD用に作成されていたのでIPHONEでは無理でした
    なんとかIPHONEで使えるようにできないのでしょうか?
    よろしくお願いします

  4. コメントありがとうございます。私はiPhoneを持っていないのですが、iPhoneでもiPod touchでも同じSafariブラウザだから、基本的には同じはずだと思うのです。(ソフト的にはiPod touchでもiPhoneでも同じはずです)
    参考までに無理だったというのは、どこのサイトでしょうか?教えていただければ対応できるかもしれません。見てみないと分からないのですが。

  5. さっそくのご回答ありがとうございます
    URLを書こうとおもってもう一度試して見たらページの最後にちゃんと青色で
    でていました。ちゃんと確認せずにコメントしてしまいすみませんでした。
    すばらしいJAVAです。ぜひ使わせていただきます。
    ありがとうございます。

  6. うまく動いたようでよかったです。
    そうなんですページの最後に表示されるので、長いページだと分かりにくいですよね。
    その辺、余裕があったらなんとか改善しようかと思います。
    貴重なご意見ありがとうございました。

  7. ピンバック: 庭_and_more
  8. 最初出来なくて萎えましたがもう一回やったら無事出来ました!
    ほんとありがとうございますmm

  9. 初めまして
    iPodタッチ2を先週購入してからコピー、ペーストに苦しんでいましたら
    いいページを発見できました!他のページにも同じようなのが有りましたが
    このページは設置がわかりやすいです。
    感謝しています。

  10. iPhoneにて動作問題ありませんでした。
    入力情報を取捨選択できる点はすばらしいです。
    支援という使い方はこちらしかできませんでしたので
    非常にありがたかったです。ありがとう。

  11. ありがとうございましたiphone3.0でちゃんと使えてます
    ブックマークを行ったりきたりで最初は戸惑いましたがおかげさまで
    これから楽できそうです
    他にも同様のブックマークレットがあるとの事でしたが、こちらで満足しています

  12. civic siteさま
    こんにちは
    4年前に作られた作品に対しまして心から
    ありがとうございます。
    ブックマークレットと言う言葉を知ってからココに辿りついて
    完成するまで本当に相当な日数がかかりましたが出来ました(^^♪
    ブックマークレットの仕組み?やJavaScriptの関数?やら
    まったく解りませんが(^^♪ありがたく使わせて頂きますね。
    本当にありがとうございました。感謝m(__)m

  13. ご苦労様です。参考にさせていただいております。
    指定のWebページを開いてからIDとパスワード入力を実施するブックマークレットを探しておりまして、こちらにたどり着きました。
    事前に入力画面が出ていない状態で、一回のブックマークレット呼び出しにより、指定のWebページを開き、自動入力といったブックマークレット作成は可能でしょうか?
    ご教授お願い致します。

  14. それは無理ですね。。ブックマークレットは開いているページに対して処理を行うものなので、これから開くページで動かす処理は書けないんです。
    ちなみに、私自身はこのブックマークレットは、ログイン目的では使用価値がなくなったと思っているのですが。。。Safariの設定で自動入力「ユーザー名とパスワード」ってのをonにするとブラウザがログイン情報を記憶してくれるので、ブックマークレットを使う必要がなくなります。
    #変に細工してあるサイトだとこれが効かないのですが。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)