モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

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

 『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』自体初めて触っているので、もっと良い方法があるかもしれません。

広告を非表示にする