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

（著者：kintone エバンジェリスト 村濱 一樹）

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

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

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

Markdown（マークダウン）とは

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

↓

記法についての詳細は下記を御覧ください。
https://www.markdown.jp/syntax/

アプリの準備

議事録アプリを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等のファイル名で保存し、アップロードします。

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

CSSの適用

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

JavaScriptにclassを追加する

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

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

CSSのアップロード

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

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

最後に

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

このTipsは、2023年2月版で確認したものになります。