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