kintone

kintoneのURLをhackする

塾業界というのは講習時と受験前が繁忙期で、
気づけば寝ている…という日々が続いていたせいで全く更新ができなかった。
という言い訳から始まる今日の内容は…

kintoneのURLをhackしていこう!

この記事を書くキッカケになったのは、あるTweetであった。

なるほどな…という要望。
しかし、この方もこの後頭を抱えているように、kintoneでは実装が難しそうな部類である。

というのも、kintoneは取得した情報はその画面内でしか保持できない。
画面遷移が入ると情報がパー。
つまり詳細画面で得た位置情報を編集画面に送る…ということができない。

う~ん。このTweetを見て僕も悩んでいた。
どうにかして情報を編集画面に渡す方法はないものか…?と。

既に自社で値を渡すカスタマイズが行われていた

ふと自分の会社のカスタマイズを思い出す。
あぁ、やってるじゃん、僕。

現在、kintoneのポータル画面には生徒情報を検索できる窓を設置しており、

生徒を選んで欠席報告ボタンを押すと…

URLに生徒番号のコードを付与して、編集画面に飛ぶ。
その後はこのURLを解析して、生徒番号を取り出して自動ルックアップ。

これ、これだよ。
画面遷移しても情報を渡す方法!

kintoneのURLの仕組み

kintoneのアプリを開いたときのURLはこのようになっている。

レコードを開けばこんな感じ。

編集画面になるとこうだ。

問題はこの編集画面。
実はこうしても開ける。

https://○○○○.cybozu.com/k/2/show#record=24&mode=edit&ねばまい!

こんなこともできる。

https://○○○○.cybozu.com/k/2/show#record=24&mode=edit&サイト名=ねばまい!&筆者=Teru

しかし冒頭の要望を実現するには壁がある

詳細画面から編集画面に飛ぶタイミングのイベントは存在しない。
「詳細画面を開いた」と「編集画面を開いた」というイベントは存在するが、
「詳細画面から編集画面を開くボタンを押した」というイベントは存在しない。

これは、オリジナル編集ボタンを作って対応することになりそうだ。
javascriptのonclickイベントを使う。

①詳細画面にボタンを設置する

詳細画面にボタンを設置するには、
Cybozu Developer Networkの下記の記事を参考にして作っていこう。
第3回 レコード詳細にもボタンを設置しよう!

しかーーし!
kintone.app.record.getHeaderMenuSpaceElementでは、
スクロールすると見えなくなってしまい今回実装したい機能を全く使えない。

というわけで、今回はDOM操作でこの位置にボタンを設置してみた。
(DOM操作は公式非推奨のため、自己責任で使用してください)

var editButton = document.createElement('button');
      editButton.id = 'editButton';
      editButton.innerText = '位置保持編集';
$('.gaia-argoui-app-toolbar-menu').append(editButton);

②ボタンを押したタイミングの座標を調べる

座標はwindow.pageYOffsetを使えば取得できる。
今回はY軸(縦方向)のみ取得し、X軸は無視することにする。

var position = window.pageYOffset;

③座標をURLに付与して編集画面に飛ぶ

onclickイベントにlocation.hrefを入れて飛ばす。

location.href = './show#record=' + recordId + '&mode=edit&position=' + position;

④URLを解析して座標を取得する

URLの#以降を取得し、ループ処理で配列に格納していく。

    var hash = window.location.hash.slice(1);
    var queries = {};
    hash.split('&').forEach(function(hash) {
      var hashArr = hash.split('=');
      console.log(hashArr);
      queries[hashArr[0]] = hashArr;
    });

⑤座標位置にスクロールする

scrollToを用いて座標にスクロール。

    window.scrollTo(0, position);

完成形

詳細画面に適用するコード

jQuery.noConflict();
(function($) {
   "use strict";
   kintone.events.on("app.record.detail.show", function(event) {
       var recordId = event.record.レコード番号.value;
       var editButton = document.createElement('button');
        editButton.id = 'editButton';
        editButton.innerText = '位置保持編集';
        editButton.onclick = function() {
        var position = window.pageYOffset;
        location.href = './show#record=' + recordId + '&mode=edit&position=' + position;
        };
        $('.gaia-argoui-app-toolbar-menu').append(editButton);
        return event;
   });
})(jQuery);

編集画面に適用するコード

jQuery.noConflict();
(function($) {
   "use strict";
   kintone.events.on("app.record.edit.show", function(event) {
    var hash = window.location.hash.slice(1);
    var queries = {};
    hash.split('&').forEach(function(hash) {
      var hashArr = hash.split('=');
      console.log(hashArr);
      queries[hashArr[0]] = hashArr;
    });
    
    var position = queries.position;
    window.scrollTo(0, position);
    
    return event;
   });
})(jQuery);

問題点

詳細画面と編集画面ではフィールドの縦幅が異なるので、若干位置がずれる。
また、使用しているフィールドによってずれ方が異なるので微調整が必要だと思われる。