はじめに
技術系の仕事では、製品のドキュメンテーションからメモ取りに至るまで、markdownの利用範囲が拡がってきています。そのため、そこで使われるサービス・製品ではmarkdownのサポートが進んでいますが、翻って業務系のサービス・製品を見渡すと、markdownの影も形もありません。
markdownで済む文書をWordや方眼紙Excelで作成させられるのは苦行でしかありませんし、修飾が無いと説明できない文章だからと言って添付ファイルを付けたく無いのです。
もちろん、10年来進歩のない、Webアプリのクソ雑魚「リッチテキスト」テキストエリアなど願い下げです。
動機
kintoneに於いても、標準機能としてはmarkdownのサポートはありません。
しかしながら、公式のTipsでもAceエディタの埋め込みかたやmarkdownのレンダリング方法を紹介しており、数行の文章であれば、これらを活用して十分実用的なmarkdown編集・表示ができることが分かります。
しかし、編集対象が長文 (e.g. 議事録) となると、(画面の狭さゆえに)親画面とテキストエリアの両方のスクロールが発生したり、プレビュー表示の場所が確保できなかったりします。
いっそのこと、外部エディタで編集できれば苦労が無いのにと考えた次第です。
準備
エディタには、拙作の mdne を使用します。
mdne自体はcarloを使ったデスクトップアプリなのですが、ローカルファイルへのアクセス等以外はChromeで動作しているので、webでも動かすことができます。実際にplaygroundとして動作しています。
このweb版の永続化処理部分をkintoneへのアクセスに置き換えれば良いわけです。
挫折
kintoneって REST APIあるし、 OAuth2もβ版ながら機能提供されているし、余裕！
と思っていた時期もありました。甘かったのです。タピオカミルクティーくらい大甘でした。
Authorization Code Grantのみに対応しています。
OAuth2には複数のユースケースとそれぞれのシーケンスが定義されていますが、バックエンド・サーバーを持たないwebアプリケーションではAuthorization Code Grantを使うことができません。client_secretを安全に保持できないためです。
解決
kintoneの REST API は、実はセッション認証をサポートしており、cookieさえ渡すことができれば認証は通るのです。それには、エディタ・アプリ自体をkintoneのドメインで動作させる必要があります。
アプリのカスタマイズ機能で無理やりウィンドウ全体にdivを重ね、その上にレンダリングします。
完成
markdown項目を持つ画面です。
先ほどの画面からEditボタンを押すと外部エディタが起動します。
2ペインでプレビューしながら編集できます。
Ctrl+S でkintoneに保存されます。
履歴管理もできます。
印刷もOK
さいごに
今回のコードは mdne-for-kintone にあります。