コンテンツフィールドプラグイン MarkdownItField 1.0.0 をリリース

Movable Type 7のコンテンツフィールドを追加したプラグインを作ってみました!
Movable Typeのテンプレート構築は長くやってましたが、プラグインを作るのは初めてでした!(Hello Worldくらいならあるけど。)Perl1ミリもわからないですが、先人の方々のソースを見ながらMarkdownItで投稿できるプラグインを作るチャレンジをしてみました!

MarkdownItField

名前の通り、Markdown形式で投稿して、MarkdownItがHTMLに変換して投稿することができるプラグインになります。

ScreenShot.png

Movable KnowledgeでMTAppjQueryでカスタマイズして投稿できるフィールドをVue.jsベースで作りましたが、こちらはプラグインとしてフィールドを設けて投稿できるものになります。
Perlは、高山さんの記事を見ながら作ってみました。ほとんどPerl部分は値変更しただけでほぼ同じ形を利用させてもらいました。Perl読めないノンプログラマーですが、なんとなく配列だったり、こうやって読み込みだったり実行をしているのかーとなんとなく理解しました。(一からだったら全くできなかったですが・・・)
ほとんど書いてる部分は、HTML部分とMarkdown-It.jsを呼び出すためのJS部分のみと textareaで jQueryでchangeして変換後のHTMLを追加したフィールドに突っ込んだだけの処理だけです。
テンプレ側では、追加したコンテンツフィールドを呼び出すだけで変換されたHTMLで再構築して出力してくれます。

インストール

インストールは、ダウンロードして解凍した plugins/MarkdownItField をMT本体の plugins/ ディレクトリにアップロードします。
アップロード後、管理画面のコンテンツフィールド一覧にマークダウンというフィールドが追加されます。
追加したフィールドを各コンテンツタイプで設定して利用します。

使い方

使い方は、Movable Type 7のコンテンツフィールドと同じ使い方になります。

設定と入力

コンテンツタイプ設定

マークダウンのフィールドをドラッグ&ドロップして配置します。
フィールド名やラベル名は任意でつけれますが、キャプチャでは Markdown本文HTMLプレビュー とつけています。要件に応じた名前をつけてください。

初期ロード時は HTMLプレビュー のフィールドは閉じている状態になります。Markdownで入力するだけですので、 HTMLプレビュー は確認用としてお使いください。

コンテンツフィールド入力

テンプレートの記述

テンプレートの記述はContentFieldの記述で書きます。
content_field は設定した任意のコンテンツフィールド名を入力します。
<mt:ContentFieldValue part="preview" /> はコンテンツフィールドに入ってる値を呼び出しをします。
このときに part="preview" のモディファイアを定義します。
part="preview" はHTMLに変換したあとのフィールドを呼び出すため、再構築時にHTMLとして出力します。

<mt:ContentField content_field="Markdown">
  <mt:ContentFieldValue part="preview" />
</mt:ContentField>

モディファイア

定義したモディファイアは以下になります。
Markdown入力用とHTML確認になります。

  • part="body" :Markdownで入力した値
  • part="preview" :HTML変換後の値

登録までの流れ

Youtubeに設定から入力までの流れを動画キャプチャを取りましたので、参考にしてみてください。

作ってみた感想

初めて作ってみたので、先人の方々に感謝です。
やり方とかもう少しこういうふうに書いてほしいって要望や機能改善あればissueやPRを出してくれると嬉しいです。
今後の機能改善もしつつ独自のコンテンツフィールドを作っていければなと思ってます!
Movable Type で Markdownで入力したい方いましたら、こちら導入してみてはいかがでしょうか。

参考

  • Facebook
  • Twitter
  • はてなブックマーク

Author

札幌でフロントエンドエンジニアとして働いています。好きな音楽はSIAM SHADE!
SIAM SHADEの六人目のメンバーとして日々ロックを愛し続けている。
HTML,CSS,JavaScriptをベースにCMS構築が得意です。
HAMWORKS社員 https://ham.works