🗒️

【コラボフロー】Markdown使えるようにしちゃおうぜ！【JavaScript×CSS】

なな

2023/07/13に公開

こんばんは。
突然ですが、zennってすごく記事を書きやすいと思うんですよ。

で、それって「なんでかな？」と思ったら
マークダウンを使えることが理由のひとつだと思うんですよ。

なので、コラボフローでもマークダウンを使えるように
カスタマイズしてしました🥰

コラボフローとは？

https://www.collabo-style.co.jp/

直感的に操作できるワークフローサービスです。
JavaScriptなどを使わなくても複雑なワークフローを作ることも可能ですが、
カスタマイズしてより自社に適したシステムにすることも可能です！

フォームを作る

まずは、マークダウンで申請するための
申請フォームを作成します。

アプリ管理者でログインし、
アプリ設定 > フォーム設定から作成できますよ！

↑こんな感じに設定しました。
複数行入力したいので、テキストエリアパーツを使います！

経路を作る

今回は申請入力画面のカスタマイズなので、
とってもシンプルに作成しました！

カスタマイズ

https://marked.js.org/

Marked.jsを使ってJSカスタマイズしていきます。
※申請内容確認画面と、申請書閲覧画面でマークダウン表示されるようにしています。

customize.js

(function () {
    'use strict';

    collaboflow.events.on(['request.confirm.show', 'request.detail.show'], (event) => {
        const parts = event.parts;
        const partsName = 'fidMarkdown';
        const markdownParts = parts[partsName].value;
        document.getElementById('span_' + partsName).innerHTML = marked.parse(markdownParts);
    });
})();

このままだと寂しいデザインのため、CSSでスタイルも変えちゃいます。

customize.css

h1 {
    background: #dfefff;
    color: #454545;
    font-size: 2.0em;
}

h2 {
    color:#278bb8;
}

h3 {
    color: #454545;
    text-shadow: 0 0 5px white;
    border-bottom: solid 2px #dfefff;
}

body * p{
    padding: 0%;
}