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

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

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

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

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

Markdown（マークダウン）とは

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

# 見出し1
## 見出し2
### 見出し3
- リスト1
    - リスト2
            - リスト3

↓

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

議事録アプリをMarkdown対応にする

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

スペースフィールドについて

スペースフィールドはJavaScriptカスタマイズでボタンの配置など要素の配置場所に使えます。
フォームに配置できるフィールド(スペース)

アプリの準備

アプリは下記のフォームを用意します。実際には、内容フィールドとmarkdown-displayスペースフィールドのみを使いますのでそれ以外はお好みでフォームを設定してください。（わかりやすくするため、フィールド名とフィールドコードは同一にします）

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

JavaScriptカスタマイズ

1. markedの読み込み

JavaScriptカスタマイズ画面にて、先にmarkedを読み込ませておきましょう。先述したCybouzu CDNを使います。
https://js.cybozu.com/markedjs/v0.3.5/marked.min.js

2. JavaScriptの編集

早速、JavaScriptでカスタマイズをしてみます。marked自体は下記のように非常にシンプルに使うことができます。

これを、用意したアプリに合わせて書くと下記の通りになります。

上記作成したJavaScriptファイルを設定画面からアップロードしましょう。

とっても簡単ですね！試しにMarkdown記法書いてみると、下記のように表示されます。

CSSの用意

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

1. markdown-displayスペースフィールドにclassを加える
   cssを適用させるためのclassを加えます。先ほどのコードにclassを加えるためのコードを追加します。

1. CSSの用意
   今回はgithub-markdown-cssを使います。好みに合わせて他のものを使うか、適宜上書きしてください。ダウンロードしたファイルはkintoneの設定画面から適用させましょう。github-markdown-cssは、body全体ではなく、markdown-bodyクラスにstyleが適用されるようになっているので便利です。

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

最後に

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