Movable Type 鹿児島 10 月（2024/10/12）

GitHub と MovableType.net の 🔗 連携と 🔄 開発サイクル（後編）

Transcript

1. GitHub と MovableType.net の 連携と 開発サイクル（後編） デザインスタジオ カンセ フルスタックデザイナー 久富木 慎太郎 Movable Type 鹿児島 10 月（ 2024/10/12） 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/3） 1. Movable Type.net の環境を準備する 2. GitHub の環境を準備する 3. マニュアル「 GitHub 連携機能の使い方」を読んでみる。 4. Git 使えますか？ 5. 今回の勉強会での制作のサイクル 次ページへ続く GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 6
7. 今月の勉強会のお題（ 2/3） 1. 【問題 1】 GitHub に任意のリポジトリーを作ってください 2. 【問題 2】開発環境に git clone してください 3. 【問題 3】 Movable Type.net からテーマをエクスポートしてください 4. 【問題 4】 VS Code を使ってコミットしてください。 5. 【問題 5】 Movable Type.net で GitHub連携 をしてください。 6. 【問題 6】コピーライトのタグを <p> から <div> へ変更してください 9 月の勉強会はここまで 次ページへ続く GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 7
8. 今月の勉強会のお題（ 3/3） 10 月の勉強会はここから 1. マニュアル「 GitHub 連携機能をステージングで利用できるようになりました」 を読んでみる。 2. どういう運用でステージングして公開するか考えてみる 3. 【問題 7】見出しを 最新情報 から 最新のお知らせ へ変更してステージングに反 映してください。 4. 【問題 8】プルリクエストにコメントしてください。 5. 【問題 9】 本番環境へ適用 してください。 6. 【問題 10】ステージングを main ブランチへマージしてください。 を（行けるとこまで）したいと思います。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 8
9. Movable Type.net の環境を準備する 予めログインしててください。 Movable Type.net のアカウントを持ってない方は、 「 Movable Type.net」よりアカウントを作成してください。 制作者向け評価ライセンスもあります。長く検証したい方はこ ちらがオススメです。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 9
10. GitHub の環境を準備する 予めログインしててください。 GitHub の環境を準備できない方は、 「 GitHub」よりアカウント を作成してください。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 10
11. マニュアル「 GitHub 連携機能の使い 方」を読んでみる。 GitHub と連携する方法 GitHub 連携でデザインを管理する GitHub 連携機能でウェブサイトと配下のブログのテー マをまとめて管理する GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 11
12. Git 使えますか？ 「 Git 使えますか？」と聞いてくる人は何を確認しているの か？ 例えば 数人で 1 つのホームページを制作した経験があるかの確認 制作のサイクルのイメージを共有できるかの確認 課題を立てる習慣の確認 課題に対してどのように解決したかを記録に残す習慣ある か確認 などが予想できます。どうでしょう Git 使えますか？ GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 12
13. 今回の勉強会での制作のサイクル 1. GitHub でイシュー（課題）を作る 2. GitHub で対応したいイシューを開いてブランチを作る 3. VSCode でプルして、対応したいブランチに切り替える 4. コーディングなどの作業を行う 5. VSCode でプッシュする 6. 作業が終わる or レビューしたかったら GitHub でプルリクエストを作る 7. GitHub のプルリクエストでレビューしてもらう 8. OK だったら GitHub でマージする（してもらう） GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 13
14. 問題 1 GitHub に任意のリポジトリーを作ってください。 GitHub の画面で Add a README file にチェックを入れると後々イメージしやすいです。 例えば movabletype-kagoshima-202409 とかに名前を決めます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 14
15. 　レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 15
16. 問題 2 開発環境に git clone してください コマンドプロンプトを開いて作業するディレクト リーに移動します。 そこで、 GitHub から Clone の パスをコピーして git clone します。 例えば cd D:¥development でディレクトリ を移動して git clone git@github.com:shintaro- kubuki/movabletype-kagoshima- 202409.git とコマンドを打ちます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 16
17. 　レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 17
18. 問題 3 Movable Type.net からテーマをエクスポートしてください ダッシュボード > デザイン > テーマ から「 Stylish Corporate」を適用して 画面右上の「書き出す」ボタンよりテーマをエクスポートしてください。 参考 テーマのエクスポート（書き出す） GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 18
19. 　レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 19
20. 問題 4 VS Code を使ってコミットしてください。 問題 3 でエクスポートしたテーマのファイル一式（ _theme フォルダー ）を、開発環境へコピーします。 VSCode のソース管理からコミットします。 参考 GitHub 連携機能でウェブサイトと配下のブログのテーマをまとめて管理する GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 20
21. 　レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 21
22. 問題 5 Movable Type.net で GitHub連携 をしてください。 マニュアルを参考に進めたらできると思います。 参考 GitHub 連携 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 22
23. レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 23
24. 問題 6 コピーライトのタグを <p> から <div> へ変更してください ブラウザの要素を調べる機能や VSCode の検索機能を使って、コピーライトの箇所のタグを探し出し、変更してく ださい。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 24
25. レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 25
26. マニュアル「 GitHub 連携機能をステ ージングで利用できるようになりま した」を読んでみる。 ステージング機能を利用する（一覧／新規） GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 26
27. どういう運用でステージングして公開するか考えてみる main （メイン）のブランチ staging-xxx （ステージング）のブランチ issue1 （課題 1）のブランチ issue2 （課題 2）のブランチ 例えばこのような運用？ issue1 のマージ先は staging-xxx staging-xxx のマージ先は main GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 27
28. 問題 7 見出しを 最新情報 から 最新のお知らせ へ変更してステージングに反映してください。 ブラウザの要素を調べる機能や VSCode の検索機能を使って、 最新情報 の見出しを探し出し、変更してください。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 28
29. レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 29
30. 問題 8 プルリクエストにコメントしてください。 GitHub のプルリクエストの画面で、今回どのような変更を行ったか変更を入れたソースの箇所にコメントを入れて ください。 メンションを飛ばしてみたり 気を付けるポイントをコメントしたり GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 30
31. レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 31
32. 問題 9 本番環境へ適用 してください。 Movable Type.net の管理画面より 本番環境へ適用 ボタンをクリックして本番へ反映してみてください。 　 GitHub の main ブランチには反映されている？ GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 32
33. レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 33
34. 問題 10 ステージングを main ブランチへマージしてください。 GitHub の管理画面よりプルリクエストをマージしてください。 　 GitHub の staging-xxx ブランチは削除する？ GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 34
35. レビュータイム 質問があれば受け付けます。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 35
36. 自由にカスタマイズ or 質疑応答 ここまでで、なんとなく どのような場面で「ステージング」が使われるのか どのブランチとどのブランチをマージするのか どのようにプルリクエストで何をログに残すのか が、わかったかと思います。 ここからはもくもくタイムです。 自由にカスタマイズしたり、質問をしたり、最近どうなの？とか井戸端会議など自由にどうぞ。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 36
37. まとめ ステージング機能を使えば怖くない。 ステージングをお客様に確認してもらってから公開できる ステージング機能を使えば、ローンチ（公開）が楽かも GitHub 連携をしたら、ローンチ（公開）が楽かも GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 37
38. Movable Type 8 のマニュアル Movable Type 8 のマニュアルです。 Movable Type 8 のマニュアルです。 Movable Type では、 CMS（ Contents Management System）と して安全にコンテンツを管理・運用するために、 ユーザーごとにロール（役割）を指定することで 権限を管理できます。ウェブサイトの運営に必要 な最低限のロールはあらかじめ用意されていま す。ここでは主なロール別に機能や操作方法につ いて説明します。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 38
39. Movable Type の開発者ポー タル Movable Type の開発者ポータルです。 Movable Type は優れた拡張性を持っています。 Data API を活用することによって、柔軟なコンテ ンツ管理、自由なサイト設計が可能です。ここで はエンジニア向けに Data API の利用方法やテーマ の構造、プラグイン開発に関するドキュメントを まとめています。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 39
40. Movable Type.net マニュアル Movable Type.net のマニュアル MovableType.net の基本的な使い方を紹介しま す。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 40
41. Movable Type.net 開発者ポー タル Movable Type.net の開発者ポータル MovableType.net のテンプレートをカスタマイズ される方向けに、マニュアルや関連記事をまとめ ています。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 41
42. トフでもできる！？テーマ開 発講座 トフでもできる！？テーマ開発講座 ベーステーマを使ってサイト更新、スタイルシー トでの デザイン変更もできるようになったけど … 「もっと自由にテンプレートをカスタマイズでき るようになりたい！」 「自分でテーマを開発してみたい！」と思ったこ とはありませんか？ 本コンテンツはそんな方に向けた MovableType.net テーマの 学習＆開発ガイドです。 GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 42
43. CUSTOM BLOCK LIBTARY CUSTOM BLOCK LIBTARY GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 43
44. MT Hub MT Hub Movable Type 業界の皆様。知識や経 験を共有しませんか？ Movable Type に関する「支援と共有」のコミュ ニティです。 全国の Movable Type のユーザーと繋がりましょ う！ Movable Type 鹿児島のイベント告知によく利用し ております GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 44
45. 次回予告 Storybook と Movable Type テーマ開発（仮） Movable Type 鹿児島 11 月（ 2024/11/09 の予定） GitHub と MovableType.net の 連携と 開発サイクル（後編） © Movable Type 鹿児島 45