Marked.jsを使って社内ドキュメントを書きやすくしよう!
kintone はレコードの変更履歴やプロセス(ワークフロー)管理機能もあるので、議事録、 wiki などのドキュメントやナレッジを社内で共有するのにも便利です。
デフォルトでリッチエディターフィールドはありますが、Markdown 記法でドキュメントを書けるようになれば気軽にきれいな文章を残しやすくなります。
特にエンジニアに好まれます。
今回は Cybozu CDN にある Marked.js を使って kintone アプリで Markdown を使えるようにするカスタマイズを紹介します。
Markdown(マークダウン)とは
文章やメモなどドキュメントを書くための記法です。記法にしたがって書くことで、ビューアが Markdown に対応していれば、見出しや太字、斜体などを表現できます。
|
|
アプリの準備
議事録アプリを 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 月版 kintone で動作を確認しています。