Kintoneのリッチエディタを使って好きな形式でデータを表現したい

概要

• タイトルそのまま

方法

早速やり方を解説していこうと思います。

APIを利用して行うため、会社で行う場合は権限や許可をしっかりと確認してから行うようにしてください。

ひとまず1行を変更するpythonのコードになります。あんまり得意ではないので参考程度に利用してください。

def put_record(api_url, api_key,app_id,record_id,html_css):
    headers = {
        "X-Cybozu-API-Token": api_key,
        "Content-Type": "application/json; charset=UTF-8",
    }

    data = {
              "app": app_id,
              "id": record_id,
              "record": {
                "リッチエディター": {
                  "value": html_css
                }
              }
            }
    
    encoded_data = json.dumps(data, ensure_ascii=False).encode("utf-8")
    response = requests.put(api_url + "/k/v1/record.json?app="+app_id+"&id="+record_id, headers=headers, data=encoded_data)

    print("Response:", response.text)

if __name__ == "__main__":
    app_id = 
    record_id = 
    API_URL =""
    API_TOKEN=""
    html_css_ = """<div>hello</div>"""

    put_record(API_URL, API_TOKEN,app_id,record_id,html_css_)

リッチエディタにHTMLコンテンツを入れて送信すると、サニタイズされるもののテーブルやdivなどを利用して好きな形でデータを表現できます。APIなどの情報を直接入れてあげるだけで簡単なWebページ調にすることだってできます。

ただそれには一工夫が必要です。

後述する方法を利用しない場合、classを用いたcssの利用はできず、inline styleで利用する必要があります。
当たり前ですが、htmlではないためサニタイズで存在しなかったことにされてしまうためです。

手軽に試すだけであればinline styleでもよいですが、量が増えると一度の送信コストも倍々ゲームになってしまう問題があります。

そこで、Kintone側が用意しているカスタムCSS機能を利用します。

アプリ > 歯車アイコン > 設定 > JavaScript/CSSでカスタマイズここでcssを入れることで、classを利用した一般的なcssを利用することができます。

一つ注意すべき点としては、APIで指定したclass名はkintoneのプレフィックスとしてuser-token-が頭につきます。

message -> user-token-messageといった具合です。

なので、カスタムCSSとして与えるcssにはすべてuser-token-を付けて提供する必要があります。

まとめ

リッチエディタの活用法が広がるので、おすすめです