2015年11月22日
ツクールMV Git Hubで管理/公開する方法
◆ツクールMV製ゲームをGit Hubで管理/公開する方法
これはツクールMV製ゲームのWEBアプリ版を、WEB上で公開する手段です。
サーバーがない方も、この方法を使えば無料で公開することが可能です。
この記事は非プログラマがコマンドを使わずにGUI(マウスメインの操作)で完結するように作成しました。
※Git Hubの入門記事で良く表記されているコマンド操作は、この記事では一切使用しません
※上手くいかない時は、半角英数字で命名されているか、手順を戻ってやりなおし、WEBで調べるなどで試してみてください
[必要なもの]
・パソコン
・登録用のメールアドレス
・WEB上の情報を調べ、実践する技術(調べる力、自己解決力)
◆Git Hubとは
Git Hubとは主にソースコードなどの創作物を保存/共有するシステムです。
プログラマの方による技術共有や、企業のプロジェクト管理などに利用されているようです。
またツクールMVにおいては、プラグインの公開にGit Hubを扱われる方が多いです。
基本利用は無料です。アクセス制限などの管理機能は有料で提供されています。
◆手順
【Git Hubアカウントの取得〜認証】
(1)次のサイトにアクセスし、上から「ユーザー名」「メールアドレス」「パスワード」を入力し、「Sign up for Git Hub」をクリックします。
https://github.com/

※ユーザー名が既に使われていたり、パスワードが簡単だとエラーが出て進まないようなので、よく確認しましょう
(2)Plan選択画面になるので、「Free」を選択し、「Finish Sign up」へと進みます。

(3)登録したメールアドレス宛に、確認のメールが送信されます。
メール内の「Verify email address」をクリックして認証に進みます。

(4)上のフォームにはユーザー名かメールアドレスを、下のフォームには設定したパスワードを入力し、「Sign In」へと進みます。

【リポジトリの作成】
(5)登録完了すると、この画面になります。
次は保存先である「リポジトリ」という場所を作るため、「+New repository」をクリックします。

(6)次の部分を半角英数字で入力します。
repository name:リポジトリの名前=本来はプロジェクト名など分かりやすい命名が良いと思います。
ここではGit Hub Windowsのインストール画面に進むため、testのような暫定的な名前にとどめておきます。
Description:リポジトリの説明部分です。必須ではありません。
入力を終えたら「Create repository」をクリックします。

※以後、Git Hub Windowsのインストールが完了したら、基本的にはGit Hub Windowsの方で操作をするので、WEBを使わないようにします。(WEBとGit Hub Windowsで操作が混在すると、トラブルの元になります)
【Git Hub Windowsのインストール】
コマンドラインを使わずに設定するため、Git Hub Windowsをインストールします。
(7)「Set up in Desktop」をクリックします。

(8)次のようなポップアップが上がるので「インストール」を選択します。

(9)インストールが完了すると、次のアイコンがデスクトップに登録されます。
「GitHub」をクリックして起動します。

【Git Hub Windowsの設定】
(10)「GitHub」を起動後はアプリケーションにアカウント情報を入力します。
上のフォームにはユーザー名かメールアドレスを
下のフォームには設定したパスワードを入力し、「Log In」へと進みます。

(11)(10)の設定が入力されていると思いますので、そのまま「Continue」をクリックします。

(12)レポジトリの作成/選択画面になりますがここでは「Skip」で飛ばします。

【RPGツクールMVのプロジェクトを確認】
(13)ツクールMVを起動し、公開したいプロジェクトを開いた状態で、ゲーム>「フォルダを開く」をクリックします。

(14)フォルダが開くので、このプロジェクト場所を覚えておきます。

【RPGツクールMVのプロジェクトをブラウザゲームとして公開】
(15)Git Hub Windowsに戻り、左上の「+」マークをクリックします。

(16)「Create」タブにして次の入力を行います
name:プロジェクト名のような分かりやすい名前(半角英数字)
Local Path:特に変更不要
既定では「C:\Users\ユーザー名\Documents\GitHub\nameで入力した名前」となります。

完了したら「Create repository」をクリックします。
※既に同じ名前のフォルダが先に存在するとエラーが出ます。名前を変えるなどしましょう。
(17)(16)のLocal Pathに移動します。
既定通りなら、C:\Users\ユーザー名\Documents\GitHub\nameで入力した名前の場所を開いてみてください。

「.gitattributes」「.gitignore」という2つのファイルがあることを確認します。
(18)(14)で調べていた場所からプロジェクトをコピーします。
※移動すると、ツクールMVで起動したときに場所を見失うので、コピーが良いでしょう。
※コピーするファイル群はプロジェクトの「Index.html」がある階層です。

上手くいくとこのようになります。

(19)上から「Changes」タブ、「サマリ」ボックスには日付など分かりやすいものを半角英数字で入力し、「Commit to master」をクリックします。

(20)「Publish」をクリックします。

(21)次のボックスを確認します。
name:入力されているので変更不要です
description:必要に応じて分かりやすい説明を半角英数字で入力します

問題がなければ「Publish XX(名前)」をクリックします。
この工程はGit Hubにアップロードしているため、ファイルの量により時間がかかります。
アップロード中は「Publish」が「Syncing」マークになっており、回転しています。

(22)元の画面に戻るので、Yに似たマークをクリックします。

(23)nameに「gh-pages」を入力し、「Create new branch」をクリックします。
※1文字でも間違えるといけないので、コピー&ペーストをお勧めします。
gh-pages

(24)Yマークの隣「Master▼」をクリックし、(23)で作成した「gh-pages」を選択します。

(25)「gh-pages」に変わったことを確認して、「Publish」をクリックします。
今回は切り替えるだけなので(21)ほど時間はかかりません。

(26)公開されているか、アクセスして確認します。
http://<ユーザー名>.github.io/<リポジトリ名>
IEでは動作しませんので、Firefox,Chrome,safariなどでご確認ください。
【作品例】
いじわるなダンジョン
http://rpgmakerer.github.io/meandungeon/
manurpg
http://rpgmakerer.github.io/manurpg/
【公開したゲームをバージョンアップする場合】
1.(18)で作成したフォルダに、最新のデータを上書きします。
※逆方向に上書きするとデータが巻戻るのでご注意ください
2.上から「Changes」タブ、「サマリ」ボックスには日付など分かりやすいものを半角英数字で入力し、「Commit to master」をクリックします。

3.「Publish」をクリックします。

4.Yマークの隣「Master▼」をクリックし、「gh-pages」を選択します。

5.「gh-pages」に変わったことを確認して、「Update from master」をクリックします。

6.「Sync」をクリックします。

10分ほどすると更新されるので、アクセスして確認します。
http://<ユーザー名>.github.io/<リポジトリ名>
IEでは動作しませんので、Firefox,Chrome,safariなどでご確認ください。
これはツクールMV製ゲームのWEBアプリ版を、WEB上で公開する手段です。
サーバーがない方も、この方法を使えば無料で公開することが可能です。
この記事は非プログラマがコマンドを使わずにGUI(マウスメインの操作)で完結するように作成しました。
※Git Hubの入門記事で良く表記されているコマンド操作は、この記事では一切使用しません
※上手くいかない時は、半角英数字で命名されているか、手順を戻ってやりなおし、WEBで調べるなどで試してみてください
[必要なもの]
・パソコン
・登録用のメールアドレス
・WEB上の情報を調べ、実践する技術(調べる力、自己解決力)
◆Git Hubとは
Git Hubとは主にソースコードなどの創作物を保存/共有するシステムです。
プログラマの方による技術共有や、企業のプロジェクト管理などに利用されているようです。
またツクールMVにおいては、プラグインの公開にGit Hubを扱われる方が多いです。
基本利用は無料です。アクセス制限などの管理機能は有料で提供されています。
◆手順
【Git Hubアカウントの取得〜認証】
(1)次のサイトにアクセスし、上から「ユーザー名」「メールアドレス」「パスワード」を入力し、「Sign up for Git Hub」をクリックします。
https://github.com/

※ユーザー名が既に使われていたり、パスワードが簡単だとエラーが出て進まないようなので、よく確認しましょう
(2)Plan選択画面になるので、「Free」を選択し、「Finish Sign up」へと進みます。

(3)登録したメールアドレス宛に、確認のメールが送信されます。
メール内の「Verify email address」をクリックして認証に進みます。

(4)上のフォームにはユーザー名かメールアドレスを、下のフォームには設定したパスワードを入力し、「Sign In」へと進みます。

【リポジトリの作成】
(5)登録完了すると、この画面になります。
次は保存先である「リポジトリ」という場所を作るため、「+New repository」をクリックします。

(6)次の部分を半角英数字で入力します。
repository name:リポジトリの名前=本来はプロジェクト名など分かりやすい命名が良いと思います。
ここではGit Hub Windowsのインストール画面に進むため、testのような暫定的な名前にとどめておきます。
Description:リポジトリの説明部分です。必須ではありません。
入力を終えたら「Create repository」をクリックします。

※以後、Git Hub Windowsのインストールが完了したら、基本的にはGit Hub Windowsの方で操作をするので、WEBを使わないようにします。(WEBとGit Hub Windowsで操作が混在すると、トラブルの元になります)
【Git Hub Windowsのインストール】
コマンドラインを使わずに設定するため、Git Hub Windowsをインストールします。
(7)「Set up in Desktop」をクリックします。

(8)次のようなポップアップが上がるので「インストール」を選択します。

(9)インストールが完了すると、次のアイコンがデスクトップに登録されます。
「GitHub」をクリックして起動します。

【Git Hub Windowsの設定】
(10)「GitHub」を起動後はアプリケーションにアカウント情報を入力します。
上のフォームにはユーザー名かメールアドレスを
下のフォームには設定したパスワードを入力し、「Log In」へと進みます。

(11)(10)の設定が入力されていると思いますので、そのまま「Continue」をクリックします。

(12)レポジトリの作成/選択画面になりますがここでは「Skip」で飛ばします。

【RPGツクールMVのプロジェクトを確認】
(13)ツクールMVを起動し、公開したいプロジェクトを開いた状態で、ゲーム>「フォルダを開く」をクリックします。

(14)フォルダが開くので、このプロジェクト場所を覚えておきます。

【RPGツクールMVのプロジェクトをブラウザゲームとして公開】
(15)Git Hub Windowsに戻り、左上の「+」マークをクリックします。

(16)「Create」タブにして次の入力を行います
name:プロジェクト名のような分かりやすい名前(半角英数字)
Local Path:特に変更不要
既定では「C:\Users\ユーザー名\Documents\GitHub\nameで入力した名前」となります。

完了したら「Create repository」をクリックします。
※既に同じ名前のフォルダが先に存在するとエラーが出ます。名前を変えるなどしましょう。
(17)(16)のLocal Pathに移動します。
既定通りなら、C:\Users\ユーザー名\Documents\GitHub\nameで入力した名前の場所を開いてみてください。

「.gitattributes」「.gitignore」という2つのファイルがあることを確認します。
(18)(14)で調べていた場所からプロジェクトをコピーします。
※移動すると、ツクールMVで起動したときに場所を見失うので、コピーが良いでしょう。
※コピーするファイル群はプロジェクトの「Index.html」がある階層です。

上手くいくとこのようになります。

(19)上から「Changes」タブ、「サマリ」ボックスには日付など分かりやすいものを半角英数字で入力し、「Commit to master」をクリックします。

(20)「Publish」をクリックします。

(21)次のボックスを確認します。
name:入力されているので変更不要です
description:必要に応じて分かりやすい説明を半角英数字で入力します

問題がなければ「Publish XX(名前)」をクリックします。
この工程はGit Hubにアップロードしているため、ファイルの量により時間がかかります。
アップロード中は「Publish」が「Syncing」マークになっており、回転しています。

(22)元の画面に戻るので、Yに似たマークをクリックします。

(23)nameに「gh-pages」を入力し、「Create new branch」をクリックします。
※1文字でも間違えるといけないので、コピー&ペーストをお勧めします。
gh-pages

(24)Yマークの隣「Master▼」をクリックし、(23)で作成した「gh-pages」を選択します。

(25)「gh-pages」に変わったことを確認して、「Publish」をクリックします。
今回は切り替えるだけなので(21)ほど時間はかかりません。

(26)公開されているか、アクセスして確認します。
http://<ユーザー名>.github.io/<リポジトリ名>
IEでは動作しませんので、Firefox,Chrome,safariなどでご確認ください。
【作品例】
いじわるなダンジョン
http://rpgmakerer.github.io/meandungeon/
manurpg
http://rpgmakerer.github.io/manurpg/
【公開したゲームをバージョンアップする場合】
1.(18)で作成したフォルダに、最新のデータを上書きします。
※逆方向に上書きするとデータが巻戻るのでご注意ください
2.上から「Changes」タブ、「サマリ」ボックスには日付など分かりやすいものを半角英数字で入力し、「Commit to master」をクリックします。

3.「Publish」をクリックします。

4.Yマークの隣「Master▼」をクリックし、「gh-pages」を選択します。

5.「gh-pages」に変わったことを確認して、「Update from master」をクリックします。

6.「Sync」をクリックします。

10分ほどすると更新されるので、アクセスして確認します。
http://<ユーザー名>.github.io/<リポジトリ名>
IEでは動作しませんので、Firefox,Chrome,safariなどでご確認ください。
【このカテゴリーの最新記事】
-
no image
-
no image
この記事へのトラックバックURL
https://fanblogs.jp/tb/4439774
※ブログオーナーが承認したトラックバックのみ表示されます。
この記事へのトラックバック
さてご質問の件ですが、私もGitHubをゲーム共有くらいにしか使っておらず、あまりお力になれるほど知識があるわけではありません。
参考までにという前置きがありますが、私はスクリーンショットの通りになっていたと思います。(確か作りながらスクリーンショットを撮影していたので)
なので[gitattributes]と[gitignore]がない時点で私の知っている状態ではありません。
またエラーメッセージからするとブランチ作成に失敗しているようなので、一旦別名で「Create repository」を作るなど切り分けてみてはいかがでしょうか。
またWEBで調べるのもいいかもしれませんね。
お力に慣れずすみません。
わからないことがあるのでお聞きしたいのですが
まず(18)の時点でコピーもとにすでに
[gitattributes]と[gitignore]というファイルが画像では入ってますが
まねをしても こちら側ではその二つはプロジェクト内にはないのですよね
それは気にしなくても良いのでしょうか。
というのと(20)のpublishを押す部分で
publishをすると[failed to publish this branch]エラーがでます