モーリーのメモ

アプリ開発等（プログラミング、CG作成）、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

GitHub Pageで『HTML5パッケージ』を公開

GitHub SourceTree Cocos Mac

　『GitHub Pages』とは、『GitHub』が提供するサービスの一つです。
　『GitHub』と同様の操作で『JavaScriptを使ったウェブページ』、つまりは『Cocos』で作成した『HTML5パッケージ』を公開することができます。
　
　それでは実際にやってみます。
　
　『GitHub』アカウントの取得と『SourceTree』のインストールについてはGitHubを使用するための各種設定 - モーリーのメモをご参考下さい。

目次

GitHub Pageの作成

リポジトリの作成

1.『SourceTree』（『アプリケーション』-『SourceTree』）を起動
2.『+ 新規リポジトリ』-『リモートリポジトリを作成』をクリック
f:id:mmorley:20150912141724p:plain
3.次のように設定し、『Create』をクリック

  • 『名前』：リポジトリ名を入力（URLの一部になります。）
  • 『説明』：リポジトリの説明文を入力（必須ではありません。）
  • 『This is a private repository』：チェックを外す（無料プランの場合、このチェックを外さないとリポジトリが作成されません。）

f:id:mmorley:20150912212610p:plain

クローンの作成

1.『リモート』を選択し、『クローン』をクリック
f:id:mmorley:20150912150230p:plain
2.『保存先のパス』を確認（必要に応じて変更）し、『クローン』をクリック
f:id:mmorley:20150912151106p:plain

『gh-pages』ブランチの作成

1.『Finder で開く』をクリック
f:id:mmorley:20150912155828p:plain
　『Finder』で先ほど確認した『保存先のパス』が開きます。
2.『Finder』で、『保存先のパス』のフォルダ内に『HTML5パッケージ』をコピー

  • 『HTML5パッケージの作成 - モーリーのメモ』で作成した『HTML5パッケージ』を使用しました。
    • 『HTML5パッケージ』は『HelloCocos/publish/html5』フォルダの中のファイル一式です。
    • ただし『HelloCocos/publish/html5』フォルダ内の『build.xml』は、アプリの実行には不要です。
  • 『hellococos01』フォルダを作成して、その中にコピーしました。

f:id:mmorley:20150912165131p:plain
3.『SourceTree』で『作業ツリーのファイル』にチェックをし、画面上部の『コミット』をクリック
　＊手順2の後、画面が更新されるまでに時間が掛かる場合があります。
f:id:mmorley:20150912165445p:plain
4.下記の情報を入力し、『コミット』をクリック

  • 『コミット』ボタンの上のコメント欄：コミットメッセージ（変更理由等の説明）を入力（必須ではありません。）
  • 『コミットを直ちにプッシュする』：チェックを外す

f:id:mmorley:20150912165724p:plain
5.画面上部の『ブランチ』をクリック
f:id:mmorley:20150912160749p:plain
6.下記の情報を入力し、『選択...』をクリック

  • 『新規ブランチ』："gh-pages"を入力（『GitHub Pages』を利用するには必ずこの名前にする必要があります。）
  • 『コミット』：『指定のコミット：』を選択

f:id:mmorley:20150912161427p:plain
7.先ほどのコミットを選択し、『OK』をクリック
f:id:mmorley:20150912170334p:plain
8.『ブランチを作成』をクリック
f:id:mmorley:20150912162513p:plain
9.画面上部の『ブランチ』をクリックし、『削除するブランチを選択』で『master』を選択した後、『ブランチを削除』をクリック
f:id:mmorley:20150912170714p:plain
10.『ブランチ削除の確認』ウィンドウで『OK』をクリック
11.画面上部の『プッシュ』をクリックし、『プッシュするブランチ』で『gh-pages』を選択した後、『OK』をクリック
f:id:mmorley:20150912171243p:plain
　これで、ウェブページが作成されました。

『GitHub Pages』のURL

　肝心のURLですが、『http://（GitHubアカウント名）.github.io/（リポジトリ名）/』となります。
　今回作成したウェブページの場合は、『hellococos01』フォルダの中に『index.html』が入っているので
http://githubmorley.github.io/cocosprojects-pages/hellococos01/
となります。
　このページそのものは『Hello World』的な感じで作ったものなのでしょぼいです。（ボタンを押したら、一度ボタンの位置が変わるだけです。）
　下記のブラウザでの動作を確認しました。

リポジトリの削除

　『GitHub Pages』の作成には、直接関係ありませんが、リポジトリの削除方法を紹介します。
　『GitHub』のサイトで削除しています。
1.『https://github.com/login』を開き、ログイン
2.削除したいリポジトリをクリック
f:id:mmorley:20150912214617p:plain
3.『Settings』をクリック
f:id:mmorley:20150912215100p:plain
4.ページ最下部の『Danger Zone』の『Delete thie repository』をクリック
f:id:mmorley:20150912225057p:plain
5.『Please type in the name of the repository to confirm.（リポジトリ名をタイプして下さい。）』の下の入力欄に、リポジトリ名を入力し、　『I understand the consequences, delete this repository.（このリポジトリが削除されることを理解しています。）』をクリック
f:id:mmorley:20150912225013p:plain
　これで、リポジトリが削除されます。
　
以上です。

あとがき

　『GitHub Page』は、リポジトリを作り、"gh-pages"という名前のブランチを作成し、『index.html』を配置すれば作成できる、ということが分かったのですが、『SourceTree』からの操作等も含めて、理解するのに手間取りました。
　私は『GitHub』自体初めて触っているので、もっと良い方法があるかもしれません。