kintone開発者向けにツールを作ろうと思った話 #JavaScript

はじめに

まずはこの記事を見てくれたみなさんに、謝っておくことがあります。

正直、記事を書くための準備をする時間がなかったっす！申し訳ない！！

やろうと思っていたこと

結構気合をいれて、アプリストアに用意されているアプリを限界（？）までカスタマイズしたら
どんなものが作れるか？
何年か前までやっていた、気象関係のシステムのノウハウをkintoneに取り込んだらどうなるか？
という、比較的気合の入った内容を考えていたのですが、諸々の業務が落ち着かず、標題の通り
kintone開発者向けのツールを作る話になりました。（規模縮小）

そしてこの、kintone開発者向けのツールについても未完成でございます。
大変情けない・・。

やろうと思っていたことは、Google Chrome の拡張機能で、kintone開発者に役立つツールを
何か作成しようと思っていました。
既にいくつかkintone向けの拡張機能はありますが、kintone開発者向けに何か
リリースしてみようかと、そんな構想でおりました。

現状とこれからについて

最近、ブックマークレットを使って、kintone JavaScript APIを実行して、普段の作業を
少しだけ効率化させることをしていました。
これをChromeの拡張機能に落とし込んでみようか。と考えています。

ブックマークレット

ブックマークレットは、ブラウザのお気に入り機能のURLに、JavaScriptのコードを入れ込み
JavaScriptを実行させる機能です。

ウィキペディアブックマークレット
https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88

こんな感じで、ブラウザのお気に入りに登録した内容のURLに、JavaScriptを入れておくことで
そのお気に入りをクリックしたときに、設定しておいたJavaScriptが動作します。

ここで、kintone REST APIやkintone JavaScript APIを使おうぜ！ということです。

サンプル

ブックマークレットは、URL入力欄に javascript:(自分で書いたコードを1行にしたもの)
の形式で設定します。

サンプルをいくつか作成してみましたので使ってみてください。

現在開いているレコードのJSONをクリップボードにコピー

javascript:(async()=>{const e=kintone.app.record.get(),t=e=>{const t=document.createElement("pre");t.style.webkitUserSelect="auto",t.style.userSelect="auto",t.textContent=e,document.body.appendChild(t),document.getSelection().selectAllChildren(t);const n=document.execCommand("copy");return document.body.removeChild(t),n};t(JSON.stringify(e))})();

実行結果

{
  "record": {
    "レコード番号": { "type": "RECORD_NUMBER", "value": "2" },
    "Last_user": {
      "type": "MODIFIER",
      "value": { "code": "numata", "name": "numata" }
    },
    "Applicant": {
      "type": "CREATOR",
      "value": { "code": "numata", "name": "numata" }
    },
    "Updated_datetime": {
      "type": "UPDATED_TIME",
      "value": "2021-12-17T13:18:00Z"
    },
    "Application_date": {
      "type": "CREATED_TIME",
      "value": "2021-12-17T13:18:00Z"
    },
    "title": { "type": "SINGLE_LINE_TEXT", "value": "アドベントカレンダー" },
    "member": {
      "type": "USER_SELECT",
      "value": [{ "code": "numata", "name": "numata" }]
    },
    "st": { "type": "DATE", "value": "2021-12-17" },
    "ed": { "type": "DATE", "value": "2021-12-17" },
    "progress": { "type": "NUMBER", "value": "0" },
    "desc": { "type": "MULTI_LINE_TEXT", "value": "" },
    "hidden": { "type": "CHECK_BOX", "value": [] },
    "favorite": { "type": "CHECK_BOX", "value": [] },
    "file": { "type": "FILE", "value": [] },
    "Department_selection": { "type": "ORGANIZATION_SELECT", "value": [] },
    "list": { "type": "DROP_DOWN", "value": "未着手" },
    "tag": { "type": "CHECK_BOX", "value": [] },
    "文字列__1行_": { "type": "SINGLE_LINE_TEXT", "value": "" },
    "$revision": { "type": "__REVISION__", "value": "1" },
    "$id": { "type": "__ID__", "value": "2" }
  }
}

※注コピーした時点では改行されていません。

フィールドコードとフィールド名をCSV形式でクリップボードにコピー

javascript:(async()=>{const e=await kintone.api(kintone.api.url("/k/v1/app/form/fields.json",!0),"GET",{app:kintone.app.getId()});let t="フィールドコード, フィールド名\r\n";Object.keys(e.properties).forEach(o=>{t+=`${e.properties[o].code}, ${e.properties[o].label}\r\n`});const o=e=>{const t=document.createElement("pre");t.style.webkitUserSelect="auto",t.style.userSelect="auto",t.textContent=e,document.body.appendChild(t),document.getSelection().selectAllChildren(t);const o=document.execCommand("copy");return document.body.removeChild(t),o};o(t)})();

実行結果

フィールドコード, フィールド名
st, 開始日
レコード番号, レコード番号
作業者, 作業者
hidden, 非表示フラグ
Last_user, 更新者
文字列__1行_, 文字列 (1行)
ステータス, ステータス
グループ, グループ
Department_selection, 担当組織
title, タスク名
list, リスト
カテゴリー, カテゴリー
Updated_datetime, 更新日時
file, 添付ファイル
Application_date, 作成日時
member, メンバー
progress, 進捗率
tag, タグ
Applicant, 作成者
favorite, お気に入り
ed, 終了日
desc, 説明

アプリの更新をして画面をリロード

javascript:(async()=>{await kintone.api(kintone.api.url("/k/v1/preview/app/deploy.json",!0),"POST",{apps:[{app:kintone.app.getId()}]}),location.reload()})();

実行結果

アプリの設定画面で、このボタンを押したことになります。

さいごに

私が所属している会社では、勤務実績をkintoneアプリに登録しています。
日課として、朝出社をしてから、勤務実績のアプリに今日の予定を入力するのですが
先ほどのブックマークレットの知識を生かして、直近の予定を取得して予定を入力してくれる
ブックマークレットを作成し、チョットダケ入力時間の削減をしています。

みなさんも、日々のkintone作業で活用できる場面があれば活用してみてください。

また、当記事は、主にブックマークレットのことを書きましたが、最終的な着地点としては
Google Chromeの拡張機能を作成することになります。
ブックマークレットはあくまはこの拡張機能作成の元ネタと考えています。

拡張機能の進み具合は、弊社、株式会社アーセスのブログにも記事を投稿しようかなと考えています。
進展があれば、また何か記事を投稿しようと思います。

最後まで読んでくださいまして、ありがとうございました。