Movable Type 鹿児島 7 月（2024/07/13）

Transcript

1. ノーコードなの？ Movable Type.net の かんたんデザイン編集機能 を 触ってみよう！️ デザインスタジオ カンセ フルスタックデザイナー 久富木 慎太郎 Movable Type 鹿児島 7 月（ 2024/07/13） ハードルが高そうな 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. 新しい Stylish Corporate を使ってかんたんデザイン編集を解説 5. ヘッダーメニューのテンプレートで何をしているかソースレビューしてみよう ! 6. 自由にカスタマイズ 質疑応答 を（行けるとこまで）したいと思います。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 6
7. Movable Type（ .net） の環境を準備す る Movable Type の環境を準備できない方は、 「 Movable Type.net」 よりアカウントを作成してください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 7
8. 「サイトデザインの一部をノーコードで 編集できる 「かんたんデザイン編集」機 能を追加しました」を読んでみる。 かんたんデザイン編集機能について 新しい Stylish Corporate を使ってかんたんデザイン編集を 解説 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 8
9. かんたんデザイン編集機能について かんたんデザイン編集機能とは テンプレートの一部をソースコードを触ることなく編集できる新機 能「かんたんデザイン編集」のことです。 ポイント 運用担当者は管理画面の デザイン > かんたんデザイン編集 か ら、該当箇所の画像差し替えやテキスト編集、各種設定変更を コードを触らずに行えます。 「コンテンツ管理者」の権限に、かんたんデザイン編集を利用 できる権限を加えた新しい権限「かんたんデザイン編集者」を 追加しました。 <= これで運用者にテンプレートなどの情報を 非表示にできます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 9
10. 新しい Stylish Corporate を使ってかん たんデザイン編集を解説 新しくなった Stylish Corporate を使って構築した架空のリフォー ム会社のウェブサイトをサンプルに、かんたんデザイン編集の使い 方を説明します。 ポイント mt:var という MT タグを使用します。ここに editor:type モデ ィファイアを設定することで、かんたんデザイン編集で編集可 能なコンポーネントになります。 編集画面の鉛筆アイコンの編集ボタンをクリックすることで直 接編集できます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 10
11. ヘッダーメニューのテンプレートで何を しているかソースレビューしてみよう！ https://movabletype.net/support/design/easy-design- sample.html 1. テンプレートの編集 で mt:Var に editor:type を指定して色々、属性の情報 を設定 こっちが画面になる？ 2. かんたんデザイン編集 で mt:Var に editor:type を指定して色々、属性の情報 を設定 こっちが右側のサイドバー？ ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 11
12. 問題 1 かんたんデザイン編集機能を利用して、 「 Stylish Corporate は 企業サイトです。 」のキャッチコピーを更新してください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 12
13. レビュータイム 思った通りに変更ができましたか？ 質問があれば受け付けます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう © Movable Type 鹿児島 13
14. 問題 2 かんたんデザイン編集機能を利用して、 「グローバルナビゲーション」にメニューを追加してください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 14
15. レビュータイム 思った通りに変更ができましたか？ 質問があれば受け付けます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう © Movable Type 鹿児島 15
16. 問題 3 かんたんデザイン編集機能を利用して、 ロゴ画像を追加してください。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 16
17. レビュータイム 思った通りに変更ができましたか？ 質問があれば受け付けます。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズし てみよう © Movable Type 鹿児島 17
18. 自由にカスタマイズ or 質疑応答 ここまでで、なんとなく どのような場面で「かんたんデザイン編集機能」が有効なのか どのようにしたら作成＆反映できるのか が、わかったかと思います。 ここからはもくもくタイムです。 自由にカスタマイズしたり、質問をしたり、最近どうなの？とか井戸端会議など自由にどうぞ。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 18
19. まとめ 「かんたんデザイン編集機能」を使えば運用者に触って欲しいところを切り分けられる 編集はレイアウトの画面とパネルの画面からできそうだ。 実装はそこまで難しくなさそうな気がする。 ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 19
20. 次回予告 GitHub と MovableType.net の連携と開発サイクル（ Pull request 使うよ） （仮） Movable Type 鹿児島 8 月（ 2024/08/10 予定） ハードルが高そうな Movable Type の ブロックエディタ をカスタマイズしてみよう © Movable Type 鹿児島 20