UnityのWebGLでBuildしたGameをGistと

bl.ocks.orgで公開する

はじめに①

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

はじめに②

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

Gistとは

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

Githubのアカウント

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

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

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

gitのインストール

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

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

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

gitのconfig

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

index.html

Gistはフォルダ分けできませんが、
UnityでWebGL用にBuildして作成されたデータはフォルダ分けされているので、
まず index.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にアクセスします。
Gistにサインインしていない場合は、
Githubのアカウントでサインインしてください。

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

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

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

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

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

謎の文字列

余談。

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

Git Bash

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

Git Bash で pwd

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

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 以下の公式情報ですとユーザー名/は抜かなくてもよいのかも。

Gist-IDフォルダ

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

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

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

※2
フォルダとディレクトリの意味はほぼ同意。

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に追加されたファイルをコミットします。
コメントを書かないとエラーで怒られます。

git push

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

以下参考

bl.ocks.org で公開不可能

https://stackoverflow.com/questions/69086876/#76263787
Mike Bostock took "bl.ocks.org" offline in Dec 2022.

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