kintoneにデータを登録する Bookmarkletを作る

このエントリーは、kintone Advent Calendar 2016のエントリーです。（遅くなってしまって申し訳ありません・・

kintoneにデータを投入するとき、今見ているページや選択している文字列を渡して登録したい場合があります。そのような場合は、Bookmarkletを作成すると連携できます。

Bookmarkletとは

Bookmarkletは、Webブラウザーのブックマーク機能で URL部分に JavaScriptを記述することで、ブックマークをクリックしたら、特定のスクリプトを動作させることができるというもの。

JavaScriptを作成する

まずは、動作させたい JavaScriptを作って行きます。JavaScriptを作る場合、Chromeのデベロッパーツールを使うと便利です。右上のメニューボタンから「その他のツール→デベロッパーツール」とクリックしましょう。「Console」タブをクリックすると、そこに文字が入力できます。

Enterキーを押すと実行されてしまうので、Shift+Enterで改行できます。例えば、次のスクリプトを組んで Enterキーを押すと、今見ているページの URLが表示されます。

var url = location.href;
console.log(url);

次の例は、Webブラウザー上で選択している文字列を取得します。

var txt = window.getSelection().toString();
console.log(txt);

これらを利用して、kintoneに渡したいデータを加工します。例えば、次のスクリプトは、Amazonの商品ページを開いた状態で実行すると、URL内の ASIN（ISBN）を取得するというスクリプトです。

var url=location.href;
var search=/\/dp\/(.*)\//;
var ret = search.exec(url);

console.log(ret);

kintoneの入力画面に値を受け渡す

次は、kintoneの入力画面に値を受け渡します。kintoneの入力画面は、アプリIDが分かれば次のようなURLになります。

https://SUBDOMAIN.cybozu.com/k/APP_ID/edit

ここに、URLパラメーターを受け渡します。

https://SUBDOMAIN.cybozu.com/k/APP_ID/edit?param=x

例えば、先の ISBNを渡す場合はこうしましょう。

‘https://SUBDOMAIN.cybozu.com/k/APP_ID/edit?isbn=’ + ret[1]

この URLに JavaScriptで遷移するには、「location.href」というプロパティを使います。

location.href = 'https://SUBDOMAIN.cybozu.com/k/APP_ID/edit?isbn=' + ret[1]

これで、Bookmarkletの原型ができあがりました。

Bookmarkletを作る

Bookmarkletは、改行があると登録できないため、作ったスクリプトをエディターなどに貼り付けて、改行を取り除きます。次のような感じになります。

var url=location.href;var search=/\/dp\/(.*)\//;var ret = search.exec(url);if(ret.length < 1) {alert('ISBNが取得できませんでした');} else {location.href='https://SUBDOMAIN.cybozu.com/k/APP_ID/edit?isbn=' + ret[1];}

そして、頭に JavaScriptであることを示す「javascript:」を付加します。

javascript:var url=...

この文字列をブックマークに登録しましょう。まずは、適当なページをブックマークします。それを右クリックして「ブックマークの編集」をします。

今、作った文字列を URL欄に貼り付けましょう。

kintoneで受信する

kintone側では、JavaScriptカスタマイズ機能を利用し、URLパラメーターの文字列をデータとして登録させます。以下は、「ISBN」という名前の1行テキストがフォーム内にある場合に、URLパラメーターからデータを挿入させるというスクリプトです。

    kintone.events.on('app.record.create.show', function(event) {
        var record = event.record;

        /* URLパラメーターの取得 */
        var arg = new Object;
        var pair=location.search.substring(1).split('&');
        for(var i=0;pair[i];i++) {
            var kv = pair[i].split('=');
            arg[kv[0]]=kv[1];
        }

        record['ISBN']['value'] = arg.isbn;
        return event;
    });

JavaScriptカスタマイズの方法は、以下などを確認すると良いでしょう。

JavaScriptを使用したkintoneのカスタマイズ – cybozu developer network