Movable Type 鹿児島 6 月（2024/06/08）

Transcript

1. ハードルが高そうな Movable Type の ブロックエディタ を カスタマイズしてみよう デザインスタジオ カンセ フルスタックデザイナー 久富木 慎太郎 Movable Type 鹿児島 6 月（ 2024/06/08） ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 1
2. 久富木 慎太郎 （くぶき しんたろう） デザインスタジオ カンセ フルスタックデザイナー 2023 年 4 月創業しました。 Movable Type をプラットフォームにしてホームページを作ってま す。 誰の役にも立たない無駄なことをやりたいです！ Movabley Type 鹿児島 というコミュニティでほぼ月 1 回のペース で勉強会を開いてます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 2
3. 花火は見るより 打ち上げる方が好き デザインスタジオ カンセ という屋号で 鹿児島からインターネットで世界に繋がって ホームページを作ってます。 セキュリティを重視するような場面が多い企業や大 学、行政とかのウェブサイトの制作が得意です。 主な事業 テーマ・プラグインの開発 ホームページの制作 UI/UX デザイン（アプリやシステム） ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう © Movable Type 鹿児島 3
4. 国内導入実績 5 万サイト以上 （私の実績じゃないよ ） Movable Type というソフトウェアを使ってホーム ページを作ってます。 Movable Type は、国内の多くの企業や組織で CMS プラットフォームとして利用されていま す。 見れないということがあってはならない、ランディン グページ（広告のサイト）にも向いているんじゃない かな 　詳しくは「 Movable Type 導入実績」のページを ご覧ください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう © Movable Type 鹿児島 4
5. Movable Type 鹿児島のご紹介 鹿児島を拠点としたエンドユーザー（システムなどを使う側の人） 向きのコミュニティーです。 システム（主に Movable Type）の運用のスキルやｗｅｂツールの 使い方のスキル の向上を目的とした勉強会や意見の交換、たまに技 術的な勉強もしていけたらと思います。 ほぼ月 1回、第 2土曜日の午前中に ”たぶん ”マークメイザンで勉強会 をしています。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 5
6. 今月の勉強会のお題 1. Movable Type（ .net） の環境を準備する 2. 【カスタムブロック】レイアウトを選べるチャット風ブロックを読んでみる。 3. ブロックとカスタムブロックとは 4. カスタムスクリプトで何をしているかソースレビューしてみよう！ 5. mustache.jsとは 6. これは何しているの？ 7. カスタムスクリプトを使うか、 mt:BlockEditorBlocks を使うか を（行けるとこまで）したいと思います。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 6
7. Movable Type（ .net） の環境を準備す る Movable Typeの環境を準備できない方は、 「 Movable Type.net」よ りアカウントを作成してください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 7
8. 「 【カスタムブロック】レイアウトを選 べるチャット風ブロック」を読んでみ る。 ブロック カスタムスクリプト スタイル ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 8
9. ブロックとカスタムブロックとは ブロックとは 記事などでブロックエディタを編集する際に候補となるデザインパ ターンの塊（ブロック）のことを意味します。 カスタムブロックとは Movable Type が提供する基本のブロックを組み合わせた塊のこと を意味します。 ポイント 基本のブロックの組み合わせを作ることは可能ですが、基本にない ものを作るのは難しいかもしれません。 ここら辺を理解するにはカスタムスクリプトで実現できることを理 解する必要があります。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 9
10. カスタムスクリプトで何をしているかソ ースレビューしてみよう！ 1. ライブラリを読み込む。 2. テンプレートになる HTMLを記述。テンプレ ートエンジンに mustache.js を利用。 3. メインの処理を記述。入力された画像などを テンプレートに受け渡す。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 10
11. mustache.jsとは Mustache は Web テンプレート システムです。 Mustache は、 if および else 条件文や for ループなどの明示的な制 御フロー ステートメントが欠けているため、ロジックのないシステムとして説明されます。 　詳しくは「 {{ mustache }}」のページをご覧ください。 ということは ある程度なんでもできる ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 11
12. これは何しているの？ MTBlockEditorSetCompiledHtml() は何をしている？ MTBlockEditorSetCompiledHtml(html) を呼び出すと、出力される HTML を指定することができます。 また、編集中の IFRAME 内の内容もここで指定した HTML に置き換えられます。その結果としてこのカスタムスクリ プトは、 「入力内容の HTML」と「出力される HTML」の両方で評価されます。 document.body.dataset.hasCompiledHtml には何がある？ 「出力される HTML」で表示された場合には「 document.body.dataset.hasCompiledHtml」の値が真になります 　詳しくは「カスタムスクリプトの仕様」のページをご覧ください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 12
13. カスタムスクリプトを使うか、 mt:BlockEditorBlocks を使うか 一般的なホームページを作成する場面で、採用するのは「カスタムスクリプト」の方ではないだろうか。 今回のお勉強の内容は「カスタムスクリプト」になります。 また、 mt:BlockEditorBlocks は避けて通れないのでこちらも勉強会で取り上げたいです。 カスタムスクリプト JavaScript で複雑な加工を行うことができる 編集中のプレビューでも出力と同じ結果を表示することができる mt:BlockEditorBlocks テンプレートタグを組み合わせたカスタマイズを行うことができる 1つのソースから、複数の出力を得ることができる、 AMP対応の出力を行うケースなど 　詳しくは「カスタムスクリプトの仕様」のページをご覧ください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 13
14. まとめ 編集している際のブロックエディタでオリジナルのブロックを作れる カスタムスクリプトの方が良さそう 管理画面の中の話でこれだけじゃ実装が完了しない ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 14
15. 次回予告 GitHubと MovableType.net の連携と開発サイクル（ Pull request 使うよ） （仮） と思ったけど 実装編をした方がいいんじゃないか・・・ Movable Type 鹿児島 7 月（ 2024/07/未定） ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 15