UnityのWebGLでBuildしたGameをGistとbl.ocks.orgで公開する

## はじめに①

他者向けに書いてはありますが、
個人のメモ的要素が強いです。

## はじめに②

本方法はおすすめしません。
Gistは、手軽に利用出来るのが、
素人としては最大のメリットなのですが、
バイナリファイルのアップロードは、
git clone を使用しないと無理なようです。
gitのインストールなどが必要なのであれば、
GitHub Pages を利用した方が良いのではないかと思われます...

https://qiita.com/iwaken71/items/c32760e1cc2ba01e8f9a

https://qiita.com/tonkotsuboy_com/items/f98667b89228b98bc096

## Gistとは

GistはGitHubのサービスの一つです。
詳しくは詳しく書いているところを参照ください（他力本願）

https://qiita.com/hkusu/items/18cbe582abb9d3172019

https://qiita.com/YumaInaura/items/d8ba7ce702d844f11ae0

## Githubのアカウント

GistはGitHubのサービスの一つなので、
Githubのアカウントが必要です。
Githubのアカウントの作成に関して、
詳しくは詳しく書いているところを参照ください（他力本願）

https://qiita.com/mfunaki/items/e01762475967d4e05a1f

https://qiita.com/negisys/items/04700c688382a0865947

## Gistにファイルをアップロード

GistはhtmlやcssなどのテキストファイルのアップロードをWeb上で出来ます。
pngやjpegなどの一部のバイナリファイルのアップロードもWeb上で出来ます。
詳しくは詳しく書いているところを参照ください（他力本願）

https://iwb.jp/uploading-multiple-files-to-gist-github/

https://yuoishi.github.io/gh-pages/Gist.html

https://gist.github.com/hana-mignon/9268e34046e6c3436c25

https://yongjinkim.com/gist%E3%81%AB%E7%94%BB%E5%83%8F%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E8%B6%85%E7%B0%A1%E5%8D%98%E6%96%B9%E6%B3%95/

## bl.ocks.org

html,css,js,png,jpegで出来ている一般的なWebSiteであれば、
上記までの情報でGistにアップロード可能と思います。
bl.ocks.orgを通せばブラウザでの確認も勿論可能です。
詳しくは詳しく書いているところを参照ください（他力本願）

https://qiita.com/hnakamur/items/ad1346bc9cfb0288ff60

## gitのインストール

UnityでWebGL用にBuildして作成されたデータには、
画像データではないバイナリファイルが含まれています。
そのため、Web上のみの作業で済ませられません。

gitのインストールが必要です。
詳しくは詳しく書いているところを参照ください（他力本願）

gitのインストールに関しては、
ググると他にも沢山検索結果が出てきて、
公開鍵(SSH)の設定をしなければならないような記載なのですが、
公開鍵(SSH)の設定は自分は行ないませんでした。
後述の git clone の箇所にも記載しますが、
SSHではなくHTTPSを自分は使ったため。

https://qiita.com/taketakekaho/items/75161e1273dca98cb4e1

https://qiita.com/manabu-watanabe/items/ecf1b434baf305adaa00

https://qiita.com/Ancient_Scapes/items/7d86cd78417a3c39fee2

https://qiita.com/chroju/items/67da13c672efcd2bc787

https://qiita.com/1natsu172/items/a4a3357a0481440ec6a5

## gitのconfig

gitで clone add commit push するのですが、
自分の場合は一部作業中にエラーが出たので、
user.name と user.email と core.autoCRLF を設定しました。
必要に応じて設定してください。
詳しくは詳しく書いているところを参照ください（他力本願）

https://qiita.com/myy/items/af37a794a12b08a3ee77

https://qiita.com/one-a/items/d85f12351e9e2e286624

https://qiita.com/shionit/items/fb4a1a30538f8d335b35

https://qiita.com/suzuki-koya/items/6b9f1e79b9d662e15afe

## index.html

[Gistはフォルダ分けできません](https://teratail.com/questions/13282)が、
UnityでWebGL用にBuildして作成されたデータはフォルダ分けされているので、
まず index.html をテキストエディタで開きいて以下の修正をします。
その他に修正が必要な箇所があれば同様に修正してくだい。

```html
    <!-- 修正前 -->
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <!-- 修正後 -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="style.css">

     <!-- 修正前 -->
      var buildUrl = "Build";
     <!-- 修正後 -->
      var buildUrl = ".";
```

## index.htmlのアップロード

ひとまずリポジトリを作成したいのでindex.htmlをアップロードします。

[Gist](https://gist.github.com/)にアクセスします。
[Gist](https://gist.github.com/)にサインインしていない場合は、
Githubのアカウントでサインインしてください。

「Gist description」
コードの説明を書きます。
Qiitaで言えばタイトルですね。

「Filename including extension」
ファイル名と拡張子の記入欄ですが記入不要です。
index.htmlをdrag&dropしてください。
Gistが勝手に埋めてくれます。

「Create public gist」か「Create secret gist」
を押します。

`https://gist.github.com/ユーザー名/謎の文字列`
というURLが出来れば完了です。

詳しくは詳しく書いているところを参照ください（他力本願）

https://note.com/ojk/n/nc18e9a15af2a

https://yuoishi.github.io/gh-pages/Gist.html#h39

## 謎の文字列

余談。

`https://gist.github.com/ユーザー名/謎の文字列`
`謎の文字列`の正式名称が自分には分かりません。
Visual Studio Code では Gist ID と言うらしい...?
（以後は`謎の文字列`部分は`Gist-ID`と記載します）

https://meshikui.com/2018/03/09/164/

## Git Bash

gitの操作を利用する際に使うターミナルを立ち上げます。
基本の操作に関して、
詳しくは詳しく書いているところを参照ください（他力本願）

https://www.granfairs.com/blog/staff/gitbash-setting-shortcut

## Git Bash で pwd

Git Bash で、
pwd
と打ってEnterを押すと、
現在のカレントディレクトリが表示されます。

https://ja.wikipedia.org/wiki/Pwd

## Git Bash で git clone

GistのWebに生成された、
`https://gist.github.com/ユーザー名/Gist-ID`
をローカルに持ってきます。

Git Bash で、
`git clone [リポジトリ]`
または、
`git clone [リポジトリ] [ディレクトリ]`
と打つのですが、
`[リポジトリ]`の指定方法がググるとまちまちで自分のような素人は困ります...
自分はSSHを設定していないため、
httpsでアクセスしたいわけなので、
下記内容を統合して以下としました。

`git clone https://gist.github.com/Gist-ID.git`

※1 `ユーザー名/`を抜き、末尾に`.git`を追加
※2 以下の公式情報ですと`ユーザー名/`は抜かなくてもよいのかも。

https://eng-entrance.com/git-clone

https://qiita.com/YumaInaura/items/b1377bb69947a5707fb0

https://gist.github.com/t-nissie/9580883

## Gist-IDフォルダ

git clone により、
Git Bash のホームディレクトリに、
Gist-IDのディレクトリが出来ており、
index.htmlが入っていると思います。

Windows10で、
Gist-IDフォルダを開き、
UnityでWebGL用にBuildして作成されたデータの内、
index.html以外をGist-IDフォルダにコピーします。

※1
前述した通り、
[Gistはフォルダ分けできません](https://teratail.com/questions/13282)ので、
UnityでWebGL用にBuildして作成されたデータは階層分けされてますが、
フォルダの中に入って中のファイルをGist-IDフォルダにコピーします。

※2
[フォルダとディレクトリの意味はほぼ同意](https://uxmilk.jp/27546)。

## Git Bash で git add commit push

Git Bash で、

`cd Gist-ID`

Gist-IDディレクトリに移動します。

`git add -A`

前述でGist-IDフォルダにコピーされた、
UnityでWebGL用にBuildして作成されたデータを、
gitに追加します。

`git commit -m "任意のコメント"`

前述によりgitに追加されたファイルを[コミット](https://talking-english.net/commit/)します。
コメントを書かないとエラーで怒られます。

`git push`

前述までの内容をGistにアップロードします。

以下参考

https://qiita.com/konweb/items/621722f67fdd8f86a017

https://qiita.com/2m1tsu3/items/6d49374230afab251337

https://qiita.com/kohga/items/dccf135b0af395f69144

https://qiita.com/uhooi/items/c26c7c1beb5b36e7418e

https://qiita.com/hshimo/items/99811144bf4a081319e5

https://qiita.com/seri1234/items/e651b3e108a695a92809

https://qiita.com/momotaro98/items/cdecd9a5630dd52c5572

https://qiita.com/nasutaro211/items/c590994a5d5091206c08

## bl.ocks.org で確認

`https://gist.github.com/ユーザー名/Gist-ID`であれば、
`http://bl.ocks.org/ユーザー名/raw/Gist-ID/`をブラウザで開きます。