Movable Type 鹿児島 12 月（2024/12/13）- ウィジェットって 🪚 簡単に作れるんですか？🔨️

Transcript

1. ウィジェットって 簡単に作れるんです か？ デザインスタジオ カンセ フルスタックデザイナー 久富木 慎太郎 Movable Type 鹿児島 12 月（2024/12/13） GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 1
2. 久富木 慎太郎 （くぶき しんたろう） デザインスタジオ カンセ フルスタックデザイナー 2023 年 4 月創業しました。 Movable Type をプラットフォームにしてホームページを作って ます。 誰の役にも立たない無駄なことをやりたいです！ Movabley Type 鹿児島 というコミュニティでほぼ月 1 回のペー スで勉強会を開いてます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 2
3. 花火は見るより 打ち上げる方が好き デザインスタジオ カンセ という屋号で 鹿児島からインターネットで世界に繋がって ホームページを作ってます。 セキュリティを重視するような場面が多い企業や 大学、行政とかのウェブサイトの制作が得意で す。 主な事業 テーマ・プラグインの開発 ホームページの制作 UI/UX デザイン（アプリやシステム） GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 3
4. 国内導入実績 5 万サイト以上 （私の実績じゃないよ ） Movable Type というソフトウェアを使ってホー ムページを作ってます。 Movable Type は、国内の多くの企業や組織 で CMS プラットフォームとして利用され ています。 見れないということがあってはならない、ランデ ィングページ（広告のサイト）にも向いているん じゃないかな 　詳しくは「Movable Type 導入実績」のペー ジをご覧ください。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 4
5. Movable Type 鹿児島のご紹介 鹿児島を拠点としたエンドユーザー（システムなどを使う側の 人）向きのコミュニティーです。 システム（主に Movable Type）の運用のスキルやｗｅｂツール の使い方のスキル の向上を目的とした勉強会や意見の交換、 たまに技術的な勉強もしていけたらと思います。 ほぼ月 1 回、第 2 土曜日の午前中に”たぶん”マークメイザンで 勉強会をしています。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 5
6. 今月の勉強会のお題 1. Movable Type（ソフトウェア版）のウィジェット触る 2. 【問題 1】記事を 1 件書いてください 3. 【問題 2】ウェブページを 1 件書いてください 4. 【問題 3】ウィジェットを作ってください 5. 【問題 4】ウィジェットセットを作ってホームページへ反映させてください。 を（行けるとこまで）したいと思います。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 6
7. Movable Type（ソフトウェア版） の 環境を準備する 予めログインしててください。 https://demo.******.net/mt8/ アカウントの情報は別の資料で共有します。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 7
8. 問題 1 記事を 1 件書いてください 確認のための記事を 1 件書いてください。 以下のように自由な内容で構いません。 テストタイトル テスト本文 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 8
9. 　レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 9
10. 問題 2 ウェブページを 1 件書いてください 確認のためのウェブページを 1 件書いてくださ い。 以下のように自由な内容で構いません。 テストタイトル テスト本文 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 10
11. 　レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 11
12. 問題 3 ウィジェットを作ってください 管理画面 > デザイン > テンプレート > テンプレー トの管理 の テンプレートモジュール の サイドメニュー の内容を参考にウィジェットを作ってください。 参考 テンプレートを作成する GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 12
13. 　レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 13
14. 問題 4 ウィジェットセットを作ってホーム ページへ反映させてください。 管理画面 > デザイン > テンプレート > テンプレー トの管理 の ウィジェットセット 参考 テンプレートを作成する GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 14
15. 　レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 15
16. 自由にカスタマイズ or 質疑応答 ここまでで、なんとなく ウィジェットの作り方 ウィジェットセットとは何なのか？ が、わかったかと思います。 ここからはもくもくタイムです。 自由にカスタマイズしたり、質問をしたり、最近どうなの？とか井戸端会議など自由にどうぞ。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 16
17. まとめ ウィジェットセットの機能で入れ替えたり、切り替えたりできる 思った通りのウィジェットを作成できる GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 17
18. Movable Type 8 のマニュアル Movable Type 8 のマニュアルです。 Movable Type 8 のマニュアルです。Movable Type では、CMS（Contents Management System）と して安全にコンテンツを管理・運用するために、 ユーザーごとにロール（役割）を指定することで 権限を管理できます。ウェブサイトの運営に必要 な最低限のロールはあらかじめ用意されていま す。ここでは主なロール別に機能や操作方法につ いて説明します。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 18
19. Movable Type の開発者ポー タル Movable Type の開発者ポータルです。 Movable Type は優れた拡張性を持っています。 Data API を活用することによって、柔軟なコンテ ンツ管理、自由なサイト設計が可能です。ここで はエンジニア向けに Data API の利用方法やテーマ の構造、プラグイン開発に関するドキュメントを まとめています。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 19
20. Movable Type.net マニュアル Movable Type.net のマニュアル MovableType.net の基本的な使い方を紹介しま す。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 20
21. Movable Type.net 開発者ポー タル Movable Type.net の開発者ポータル MovableType.net のテンプレートをカスタマイズ される方向けに、マニュアルや関連記事をまとめ ています。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 21
22. トフでもできる！？テーマ開 発講座 トフでもできる！？テーマ開発講座 ベーステーマを使ってサイト更新、スタイルシー トでの デザイン変更もできるようになったけど… 「もっと自由にテンプレートをカスタマイズでき るようになりたい！」 「自分でテーマを開発してみたい！」と思ったこ とはありませんか？ 本コンテンツはそんな方に向けた MovableType.net テーマの 学習＆開発ガイドです。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 22
23. CUSTOM BLOCK LIBTARY CUSTOM BLOCK LIBTARY GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 23
24. MT Hub MT Hub Movable Type 業界の皆様。知識や経 験を共有しませんか？ Movable Type に関する「支援と共有」のコミュ ニティです。 全国の Movable Type のユーザーと繋がりましょ う！ Movable Type 鹿児島のイベント告知によく利用し ております GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 24
25. 次回予告 Storybook と Movable Type テーマ開発（仮） Movable Type 鹿児島 1 月（2025/1/11 の予定） GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 25