Marked.jsを使って社内ドキュメントを書きやすくしよう!

著者名: 村濱 一樹 (External link) (kintone エバンジェリスト)

目次

kintone はレコードの変更履歴やプロセス(ワークフロー)管理機能もあるので、議事録、 wiki などのドキュメントやナレッジを社内で共有するのにも便利です。

デフォルトでリッチエディターフィールドはありますが、Markdown 記法でドキュメントを書けるようになれば気軽にきれいな文章を残しやすくなります。
特にエンジニアに好まれます。

今回は Cybozu CDN にある Marked.js (External link) を使って kintone アプリで Markdown を使えるようにするカスタマイズを紹介します。

Markdown(マークダウン)とは

文章やメモなどドキュメントを書くための記法です。記法にしたがって書くことで、ビューアが Markdown に対応していれば、見出しや太字、斜体などを表現できます。

1
2
3
4
5
6
# 見出し1
## 見出し2
### 見出し3
- リスト1
  - リスト2
    - リスト3

アプリの準備

議事録アプリを Markdown に対応させてみましょう。
今回は、文字列(複数行)フィールドに議事内容を Markdown で書いて保存すると、詳細画面のスペースフィールドで整形されて表示されるようにします。

アプリは次のフォームを用意します。カスタマイズに必要なフィールドは、内容フィールドと markdown-display スペースフィールドのみです。それ以外はお好みでフォームを設定してください。

フィールド名(フィールドコード) フィールドタイプ
日付 日付
タイトル 文字列(一行)
参加者 ユーザー選択
内容 文字列(複数行)
markdown-display スペース

JavaScriptとCSS

次のように設定します。

JavaScript

  • https://js.cybozu.com/markedjs/v4.0.12/marked.min.js
  • sample.js(後述)

CSS

  • github-markdown-light.css(後述)

JavaScript

次のコードを sample.js 等のファイル名で保存し、アップロードします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;

    // スペースフィールドを取得
    const spaceEl = kintone.app.record.getSpaceElement('markdown-display');

    // スペースフィールドにmarkdownの内容を表示
    spaceEl.innerHTML = marked.parse(record['内容'].value);

    // 重複するので内容フィールドは非表示にする
    kintone.app.record.setFieldShown('内容', false);

    return event;
  });
})();

Markdown 記法を書いてみると、次のように表示されます。

CSSの適用

上記のままだと見栄えがあまりよくありません。marked はあくまで Markdown で書いたものを、html 形式にしてくれるだけですので、style が kintone のデフォルトのままです。この節では Markdown 用に CSS を適用して見た目をよくしたいと思います。

JavaScriptにclassを追加する

markdown-display スペースフィールドに class を追加します。

15
16
    // CSSを適用するためにclassを加える
    spaceEl.classList.add('markdown-body');

最終的な JavaScript のコードは以下のようになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*
 * Render Markdown sample
 * Copyright (c) 2020 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */

(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;

    // スペースフィールドを取得
    const spaceEl = kintone.app.record.getSpaceElement('markdown-display');

    // スペースフィールドにmarkdownの内容を表示
    spaceEl.innerHTML = marked.parse(record['内容'].value);

    // 重複するので内容フィールドは非表示にする
    kintone.app.record.setFieldShown('内容', false);

    // CSSを適用するためにclassを加える
    spaceEl.classList.add('markdown-body');

    return event;
  });
})();
CSSのアップロード

今回は github-markdown-css (External link) の github-markdown-light.css を使用します。 好みに合わせて他のものを使うか、適宜上書きしてください。github-markdown-light.css では、body 全体ではなく、markdown-body クラスに style が適用されます。

CSS の適用後、次のように表示されることを確認してください。

最後に

冒頭でも述べましたが、kintone は社内ドキュメントを残すのに非常に便利です。Markdown を使って書きやすく、さらに便利にカスタマイズしてみてはいかがでしょうか!

information

この Tips は、2023 年 2 月版 kintone で動作を確認しています。