Movable Type 鹿児島 9 月（2024/09/13）- GitHub と MovableType.net の 🔗 連携と 🔄 開発サイクル（前編）

Transcript

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