人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

頻繁に発生する転記作業を省力化するブックマークレットを作ってほしいです。
A・B2つのASPシステムがあり、ブックマークレットXでAの表示内容をクッキーに保存し、ブックマークレットYでBのフォームに1クリックで転記したいです。

■A画面
<FORM method="POST"> (name, idなし)
<input type="hidden" name="company" value="はてな">はてな
<input type="hidden" name="guest" value="しなもん">しなもん
…(10項目ぐらいある)
</FORM>

■B画面
<FORM name="contact" method="POST" action="…">
<input type="text" name="company_name" id="company" value="" /> ←「はてな」と入れたい
<input type="text" name="guest_name" id="company" value="" /> ←「しなもん」と入れたい

</FORM>

※AとBでは各項目のnameが一致していません。
※項目の順番についてはBの項目を並べ替えることで揃えることができます。

よろしくお願いします。

●質問者: capsuleq
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●1500ポイント ベストアンサー

ざくっと書いてみました。
幾つかの前提があります。

まず、フォームの内容をクッキーに保存するスクリプト。

(function() {
 var COOKIE_NAME = "capsuleq_form_item";
 var KEY_VALUE_SEP = "☆☆☆";
 var ITEM_SEP = "★★★";

 function find_form() {
 var f = document.getElementsByTagName("FORM");
 for (var i = 0 ; i < f.length ; ++i) {
 for (var j = 0 ; j < f[i].length ; ++j) {
 if (f[i].elements.item(j).name == "company") {
 return f[i];
 }
 }
 }
 }

 var f = find_form();
 if (f) {
 var vv = [];
 for (var i = 0 ; i < f.length ; ++i) {
 vv.push(f.elements.item(i).name + KEY_VALUE_SEP + f.elements.item(i).value);
 }
 var s = vv.join(ITEM_SEP);

 s = COOKIE_NAME + "=" + escape(s) + "; ";
 s += "path=/; ";
 s += "expires=" + (new Date(new Date().getTime() + 60*60*1000).toUTCString()) + "; ";
 
 // クッキーに保存
 document.cookie=s;
 }
})();

次に、クッキーに保存したデータをフォームに貼り付けるスクリプトです。

(function() {
 var COOKIE_NAME = "capsuleq_form_item";
 var KEY_VALUE_SEP = "☆☆☆";
 var ITEM_SEP = "★★★";

 var re = new RegExp(COOKIE_NAME + "=([^;]*);?");
 var match = re.exec(document.cookie);
 if (match) {
 var s = unescape(match[1]);

 // コピー元の項目名 → ペースト先の項目名
 var key_map = {
 'company' : 'company_name' ,
 'guest' : 'guest_name' ,
 'from_a' : 'to_a' ,
 'from_b' : 'to_b' ,
 'from_c' : 'to_c' ,
 'from_d' : 'to_d' ,
 'from_e' : 'to_e' ,
 'from_f' : 'to_f' ,
 'from_g' : 'to_g' ,
 'from_h' : 'to_h' ,
 'from_i' : 'to_i' ,
 'from_k' : 'to_k' ,
 }
 var arr = s.split(ITEM_SEP);
 var value_map = {}
 for (var i in arr) {
 var kv = arr[i].split(KEY_VALUE_SEP);
 value_map[ key_map[kv[0]] ] = kv[1];
 }

 var f = document.getElementsByName("contact");
 if (f[0]) {
 for (var i = 0 ; i < f[0].length ; ++i) {
 var item = f[0].elements.item(i);
 if (value_map[item.name]) {
 item.value = value_map[item.name];
 }
 }
 }
 }
})();

クッキーに保存するときの名前、データを区切るための文字列(×2)は、仮に決めましたが、その ASP のシステムのクッキーとして保存されるので、できるだけ変な値(というか、ユニークになるような値)にしてください。
両方のスクリプトとも、先頭の方に書いてありますので。



使い方についてです(知っているのであれば、読み飛ばしてください)。

ブックマークレットで外部スクリプトを取り込む場合、ローカルのファイルにはアクセスできず、http を介する必要があります。
スクリプトを置くことができるサーバを探すか、ローカルに Apache や IIS を建てます。
ローカルにサーバを建てて、それぞれを scripts/ 配下の copy.js 、paste.js とした場合、それぞれのブックマークレットは、以下のようになります。

・フォームの内容を保存する

javascript:(function(src){var%20s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('charset','UTF-8');s.setAttribute('src',src);document.body.appendChild(s);})('http://localhost/scripts/copy.js');


・保存した内容をフォームに貼りつける

javascript:(function(src){var%20s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('charset','UTF-8');s.setAttribute('src',src);document.body.appendChild(s);})('http://localhost/scripts/paste.js');



「ローカルに Apache を建てるのはなあ...」ということであれば、Hatena::Let が使えると思います(その代わり、外部と接続できる環境である必要があります)。
Hatena::Let は、こちら(はてラボからたどれます)。
http://let.hatelabo.jp/

ログインした後に、それぞれのスクリプトを入力して、「公開」とします。
http://let.hatelabo.jp/images/config-icon-advanced-on.png のアイコンか、その横のタイトル名を右クリックしてブックマークします。

試しに、自分でも置いてみました。

ぼくが保存したやつは、消しちゃうかもしれないので、ご自分のブックマークレットとして保存して使ってください。





クッキーが使えなさそうだ、ということで HTML5 の Web Storage を使うように変えてみました。
と言っても、ちょっとだけです。

まず、フォームの内容を Web Storage に保存するスクリプト。

(function() {
 var KEY_NAME = "capsuleq_form_item";
 var KEY_VALUE_SEP = "☆☆☆";
 var ITEM_SEP = "★★★";

 function find_form() {
 var f = document.getElementsByTagName("FORM");
 for (var i = 0 ; i < f.length ; ++i) {
 for (var j = 0 ; j < f[i].length ; ++j) {
 if (f[i].elements.item(j).name == "company") {
 return f[i];
 }
 }
 }
 }

 var f = find_form();
 if (f) {
 var vv = [];
 for (var i = 0 ; i < f.length ; ++i) {
 vv.push(f.elements.item(i).name + KEY_VALUE_SEP + f.elements.item(i).value);
 }
 var s = vv.join(ITEM_SEP);

 // Web Storage に保存
 localStorage.setItem(KEY_NAME, escape(s));
 }
})();

次に、Web Storage に保存したデータをフォームに貼り付けるスクリプトです。

(function() {
 var KEY_NAME = "capsuleq_form_item";
 var KEY_VALUE_SEP = "☆☆☆";
 var ITEM_SEP = "★★★";

 var s = localStorage.getItem(KEY_NAME);
 if (s) {
 s = unescape(s);

 // コピー元の項目名 → ペースト先の項目名
 var key_map = {
 'company' : 'company_name' ,
 'guest' : 'guest_name' ,
 'from_a' : 'to_a' ,
 'from_b' : 'to_b' ,
 'from_c' : 'to_c' ,
 'from_d' : 'to_d' ,
 'from_e' : 'to_e' ,
 'from_f' : 'to_f' ,
 'from_g' : 'to_g' ,
 'from_h' : 'to_h' ,
 'from_i' : 'to_i' ,
 'from_k' : 'to_k' ,
 }
 var arr = s.split(ITEM_SEP);
 var value_map = {}
 for (var i in arr) {
 var kv = arr[i].split(KEY_VALUE_SEP);
 value_map[ key_map[kv[0]] ] = kv[1];
 }

 var f = document.getElementsByName("contact");
 if (f[0]) {
 for (var i = 0 ; i < f[0].length ; ++i) {
 var item = f[0].elements.item(i);
 if (value_map[item.name]) {
 item.value = value_map[item.name];
 }
 }
 }
 }
})();

それぞれの使い方は、先に書いた回答と同じです。


capsuleqさんのコメント
丁寧な説明ありがとうございます。 すみません…クッキーの理解が足りなく…システムAとBは別ドメインです。 A→Bに他の方法で値を受け渡すことは出来ますか?

a-kuma3さんのコメント
>> すみません…クッキーの理解が足りなく…システムAとBは別ドメインです。 A→Bに他の方法で値を受け渡すことは出来ますか? << HTML5 限定になりますが、Web Storage を使えばできます。 ブラウザは、何を使ってますか?

a-kuma3さんのコメント
クッキーが使えなさそうだということで、Web Storage を使うコードを回答に追記しました。 # Hatena::Let の方は、変更してません

capsuleqさんのコメント
引き続きありがとうございます! ▼本体javascript localhostに置くとなぜか動作せず、オンラインに置くことで動作できました ▼localStorage クッキーと同じようにドメイン毎のようです。 ドメインA→Bには渡せませんでした。 試しにコピー元Aで出力しているフォームのソースを サイトBに設置したところ希望通りに動作しました! (Aは他社システム、Bは自社システムです) あと一歩なのですが…、なにか良いお知恵はありませんでしょうか。

capsuleqさんのコメント
paste.jsの中で、 Bのフォーム遷移途中へ直接値を渡すようにHTMLを入れてみたら動作し、 思い通りの動作が出来そうです。 ありがとうございました! 仕事の手間が減り、また同時に勉強になりました。

a-kuma3さんのコメント
すみません、終盤は自己解決でしたね <tt>X-(</tt> いくばくかのお役には立てたようで、ほっとしてます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ