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 鹿児島 7 月(2024/07/13)
Search
Shintaro KUBUKI
July 12, 2024
0
64
Movable Type 鹿児島 7 月(2024/07/13)
Shintaro KUBUKI
July 12, 2024
Tweet
Share
More Decks by Shintaro KUBUKI
See All by Shintaro KUBUKI
Movable Type 鹿児島 2 月(2025/02/08)- プラグイン `MyAdminPack for Movable Type` を👩💻ローカル環境で触ってみよう!
shintaro_kubuki
0
3
Movable Type 鹿児島 1 月(2025/01/11)- MTML
shintaro_kubuki
0
40
Movable Type 鹿児島 12 月(2024/12/13)- ウィジェットって 🪚 簡単に作れるんですか?🔨️
shintaro_kubuki
0
9
Movable Type 鹿児島 10 月(2024/10/12)- GitHub と MovableType.net の 🔗 連携と 🔄 開発サイクル(後編)
shintaro_kubuki
0
18
Movable Type 鹿児島 9 月(2024/09/13)- GitHub と MovableType.net の 🔗 連携と 🔄 開発サイクル(前編)
shintaro_kubuki
0
32
Movable Type 鹿児島 6 月(2024/06/08)
shintaro_kubuki
0
90
Movable Type 鹿児島 4 月(2024/04/13)
shintaro_kubuki
0
65
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Practical Orchestrator
shlominoach
186
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Unsuck your backbone
ammeep
669
57k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
ノーコードなの? Movable Type.net の かんたんデザイン編集機能 を 触ってみよう!️ デザインスタジオ カンセ フルスタックデザイナー
久富木 慎太郎 Movable Type 鹿児島 7 月( 2024/07/13) ハードルが高そうな 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. 新しい Stylish Corporate を使ってかんたんデザイン編集を解説 5. ヘッダーメニューのテンプレートで何をしているかソースレビューしてみよう ! 6. 自由にカスタマイズ 質疑応答 を(行けるとこまで)したいと思います。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 6
Movable Type( .net) の環境を準備す る Movable Type の環境を準備できない方は、 「 Movable
Type.net」 よりアカウントを作成してください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 7
「サイトデザインの一部をノーコードで 編集できる 「かんたんデザイン編集」機 能を追加しました」を読んでみる。 かんたんデザイン編集機能について 新しい Stylish Corporate を使ってかんたんデザイン編集を 解説
ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 8
かんたんデザイン編集機能について かんたんデザイン編集機能とは テンプレートの一部をソースコードを触ることなく編集できる新機 能「かんたんデザイン編集」のことです。 ポイント 運用担当者は管理画面の デザイン > かんたんデザイン編集 か
ら、該当箇所の画像差し替えやテキスト編集、各種設定変更を コードを触らずに行えます。 「コンテンツ管理者」の権限に、かんたんデザイン編集を利用 できる権限を加えた新しい権限「かんたんデザイン編集者」を 追加しました。 <= これで運用者にテンプレートなどの情報を 非表示にできます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 9
新しい Stylish Corporate を使ってかん たんデザイン編集を解説 新しくなった Stylish Corporate を使って構築した架空のリフォー ム会社のウェブサイトをサンプルに、かんたんデザイン編集の使い
方を説明します。 ポイント mt:var という MT タグを使用します。ここに editor:type モデ ィファイアを設定することで、かんたんデザイン編集で編集可 能なコンポーネントになります。 編集画面の鉛筆アイコンの編集ボタンをクリックすることで直 接編集できます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 10
ヘッダーメニューのテンプレートで何を しているかソースレビューしてみよう! https://movabletype.net/support/design/easy-design- sample.html 1. テンプレートの編集 で mt:Var に editor:type
を指定して色々、属性の情報 を設定 こっちが画面になる? 2. かんたんデザイン編集 で mt:Var に editor:type を指定して色々、属性の情報 を設定 こっちが右側のサイドバー? ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 11
問題 1 かんたんデザイン編集機能を利用して、 「 Stylish Corporate は 企業サイトです。 」のキャッチコピーを更新してください。 ハードルが高そうな
Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 12
レビュータイム 思った通りに変更ができましたか? 質問があれば受け付けます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう
© Movable Type 鹿児島 13
問題 2 かんたんデザイン編集機能を利用して、 「グローバルナビゲーション」にメニューを追加してください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう
© Movable Type 鹿児島 14
レビュータイム 思った通りに変更ができましたか? 質問があれば受け付けます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう
© Movable Type 鹿児島 15
問題 3 かんたんデザイン編集機能を利用して、 ロゴ画像を追加してください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう
© Movable Type 鹿児島 16
レビュータイム 思った通りに変更ができましたか? 質問があれば受け付けます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう
© Movable Type 鹿児島 17
自由にカスタマイズ or 質疑応答 ここまでで、なんとなく どのような場面で「かんたんデザイン編集機能」が有効なのか どのようにしたら作成&反映できるのか が、わかったかと思います。 ここからはもくもくタイムです。 自由にカスタマイズしたり、質問をしたり、最近どうなの?とか井戸端会議など自由にどうぞ。 ハードルが高そうな
Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 18
まとめ 「かんたんデザイン編集機能」を使えば運用者に触って欲しいところを切り分けられる 編集はレイアウトの画面とパネルの画面からできそうだ。 実装はそこまで難しくなさそうな気がする。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう
© Movable Type 鹿児島 19
次回予告 GitHub と MovableType.net の連携と開発サイクル( Pull request 使うよ) (仮) Movable
Type 鹿児島 8 月( 2024/08/10 予定) ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 20