Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Movable Type 鹿児島 6 月(2024/06/08)
Search
Shintaro KUBUKI
June 07, 2024
Design
0
120
Movable Type 鹿児島 6 月(2024/06/08)
Shintaro KUBUKI
June 07, 2024
Tweet
Share
More Decks by Shintaro KUBUKI
See All by Shintaro KUBUKI
Movable Type 鹿児島 2025年4月(2025/04/19)- プラグイン `MyAdminPack for Movable Type` を触ってみよう!
shintaro_kubuki
0
190
Movable Type 鹿児島 2 月(2025/02/08)- プラグイン `MyAdminPack for Movable Type` を👩💻ローカル環境で触ってみよう!
shintaro_kubuki
0
15
Movable Type 鹿児島 1 月(2025/01/11)- MTML
shintaro_kubuki
0
45
Movable Type 鹿児島 12 月(2024/12/13)- ウィジェットって 🪚 簡単に作れるんですか?🔨️
shintaro_kubuki
0
10
Movable Type 鹿児島 10 月(2024/10/12)- GitHub と MovableType.net の 🔗 連携と 🔄 開発サイクル(後編)
shintaro_kubuki
0
19
Movable Type 鹿児島 9 月(2024/09/13)- GitHub と MovableType.net の 🔗 連携と 🔄 開発サイクル(前編)
shintaro_kubuki
0
35
Movable Type 鹿児島 7 月(2024/07/13)
shintaro_kubuki
0
77
Movable Type 鹿児島 4 月(2024/04/13)
shintaro_kubuki
0
80
Other Decks in Design
See All in Design
Bulletproof Design System with TypeScript
takanorip
6
3.6k
Haley's adventure chase
ivettetwin
0
240
minpaku-community-scrum-patterns
norinity1103
1
120
AI時代に淘汰されないデザインのしごと
akinen
1
140
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
CIRCULAR ECONOMY + SERVICES
jmanooch
0
120
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.2k
harutaka Vision Deck
zenkigenforrecruit
0
150
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
#Dubois Challenge 2025: Economics
ajstarks
0
130
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
300
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing Experiences People Love
moore
142
24k
Building an army of robots
kneath
306
45k
How to train your dragon (web standard)
notwaldorf
95
6.1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
A better future with KSS
kneath
238
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
ハードルが高そうな Movable Type の ブロックエディタ を カスタマイズしてみよう デザインスタジオ カンセ フルスタックデザイナー
久富木 慎太郎 Movable Type 鹿児島 6 月( 2024/06/08) ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 1
久富木 慎太郎 (くぶき しんたろう) デザインスタジオ カンセ フルスタックデザイナー 2023 年 4
月創業しました。 Movable Type をプラットフォームにしてホームページを作ってま す。 誰の役にも立たない無駄なことをやりたいです! Movabley Type 鹿児島 というコミュニティでほぼ月 1 回のペース で勉強会を開いてます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 2
花火は見るより 打ち上げる方が好き デザインスタジオ カンセ という屋号で 鹿児島からインターネットで世界に繋がって ホームページを作ってます。 セキュリティを重視するような場面が多い企業や大 学、行政とかのウェブサイトの制作が得意です。 主な事業
テーマ・プラグインの開発 ホームページの制作 UI/UX デザイン(アプリやシステム) ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう © Movable Type 鹿児島 3
国内導入実績 5 万サイト以上 (私の実績じゃないよ ) Movable Type というソフトウェアを使ってホーム ページを作ってます。 Movable
Type は、国内の多くの企業や組織で CMS プラットフォームとして利用されていま す。 見れないということがあってはならない、ランディン グページ(広告のサイト)にも向いているんじゃない かな 詳しくは「 Movable Type 導入実績」のページを ご覧ください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう © Movable Type 鹿児島 4
Movable Type 鹿児島のご紹介 鹿児島を拠点としたエンドユーザー(システムなどを使う側の人) 向きのコミュニティーです。 システム(主に Movable Type)の運用のスキルやwebツールの 使い方のスキル の向上を目的とした勉強会や意見の交換、たまに技
術的な勉強もしていけたらと思います。 ほぼ月 1回、第 2土曜日の午前中に ”たぶん ”マークメイザンで勉強会 をしています。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 5
今月の勉強会のお題 1. Movable Type( .net) の環境を準備する 2. 【カスタムブロック】レイアウトを選べるチャット風ブロックを読んでみる。 3. ブロックとカスタムブロックとは
4. カスタムスクリプトで何をしているかソースレビューしてみよう! 5. mustache.jsとは 6. これは何しているの? 7. カスタムスクリプトを使うか、 mt:BlockEditorBlocks を使うか を(行けるとこまで)したいと思います。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 6
Movable Type( .net) の環境を準備す る Movable Typeの環境を準備できない方は、 「 Movable Type.net」よ
りアカウントを作成してください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 7
「 【カスタムブロック】レイアウトを選 べるチャット風ブロック」を読んでみ る。 ブロック カスタムスクリプト スタイル ハードルが高そうな Movable Type
の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 8
ブロックとカスタムブロックとは ブロックとは 記事などでブロックエディタを編集する際に候補となるデザインパ ターンの塊(ブロック)のことを意味します。 カスタムブロックとは Movable Type が提供する基本のブロックを組み合わせた塊のこと を意味します。 ポイント
基本のブロックの組み合わせを作ることは可能ですが、基本にない ものを作るのは難しいかもしれません。 ここら辺を理解するにはカスタムスクリプトで実現できることを理 解する必要があります。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 9
カスタムスクリプトで何をしているかソ ースレビューしてみよう! 1. ライブラリを読み込む。 2. テンプレートになる HTMLを記述。テンプレ ートエンジンに mustache.js を利用。
3. メインの処理を記述。入力された画像などを テンプレートに受け渡す。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 10
mustache.jsとは Mustache は Web テンプレート システムです。 Mustache は、 if および
else 条件文や for ループなどの明示的な制 御フロー ステートメントが欠けているため、ロジックのないシステムとして説明されます。 詳しくは「 {{ mustache }}」のページをご覧ください。 ということは ある程度なんでもできる ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 11
これは何しているの? MTBlockEditorSetCompiledHtml() は何をしている? MTBlockEditorSetCompiledHtml(html) を呼び出すと、出力される HTML を指定することができます。 また、編集中の IFRAME 内の内容もここで指定した
HTML に置き換えられます。その結果としてこのカスタムスクリ プトは、 「入力内容の HTML」と「出力される HTML」の両方で評価されます。 document.body.dataset.hasCompiledHtml には何がある? 「出力される HTML」で表示された場合には「 document.body.dataset.hasCompiledHtml」の値が真になります 詳しくは「カスタムスクリプトの仕様」のページをご覧ください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 12
カスタムスクリプトを使うか、 mt:BlockEditorBlocks を使うか 一般的なホームページを作成する場面で、採用するのは「カスタムスクリプト」の方ではないだろうか。 今回のお勉強の内容は「カスタムスクリプト」になります。 また、 mt:BlockEditorBlocks は避けて通れないのでこちらも勉強会で取り上げたいです。 カスタムスクリプト JavaScript
で複雑な加工を行うことができる 編集中のプレビューでも出力と同じ結果を表示することができる mt:BlockEditorBlocks テンプレートタグを組み合わせたカスタマイズを行うことができる 1つのソースから、複数の出力を得ることができる、 AMP対応の出力を行うケースなど 詳しくは「カスタムスクリプトの仕様」のページをご覧ください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 13
まとめ 編集している際のブロックエディタでオリジナルのブロックを作れる カスタムスクリプトの方が良さそう 管理画面の中の話でこれだけじゃ実装が完了しない ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう
© Movable Type 鹿児島 14
次回予告 GitHubと MovableType.net の連携と開発サイクル( Pull request 使うよ) (仮) と思ったけど 実装編をした方がいいんじゃないか・・・
Movable Type 鹿児島 7 月( 2024/07/未定) ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 15