Tips

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スペースフィールドのみです。それ以外はお好みでフォームを設定してください。

フィールド名（フィールドコード） フィールドタイプ
日付 日付
タイトル 文字列（1行）
参加者 ユーザー選択
内容 文字列（複数行）
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では、markdown-bodyクラスにstyleが適用されます。

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

最後に

固定リンクがコピーされました

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

information

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