オリジナルwebGL作品をGitHubページを使って公開してみました。
以前下記の記事を公開し、threejsを使ってwebGLを書いてみました。
今回はその時に紹介した「kokeglで使っているツール・機能・言語」のgithub ioつまりGitHub Pageを使ったアップロードをしてみようと思います。
うまく動作しないなどありましたらコメント欄もしくはTwitterのアカウントにご連絡ください。
準備
必要なもの
・PC（macOS or windows10）
（スペックはvisual studio codeとchrome or firefoxが動けばokです。）
（linuxでもできるかもしれませんが自己責任でお願いします。）
（しかし説明はmacOSで行います。主にSourcetreeの操作が違います。しかし基本的なフローは同じですので参考になれば幸いです。）
・インターネット
GitHubに接続をしてコードをアップロードする時に使用します。
インストールが必要なソフトウェア
・visual studio code
・chrome or firefox
（その他ブラウザでも大丈夫だとは思いますがjavascriptやwebGLに非対応だとコードが動作しないので自分の記事のコードを試せない可能性があります。）
・Sourcetree
gitクライアントです。他のクライアントもありますが自分が使い慣れているツールで試していきます。
作成が必要なアカウント
・GitHubアカウント（こちらの作成方法は記事内で紹介します。）
読んでいただきたい記事
こちらの記事で作成したwebGL作品をアップロードします。
オリジナルwebGL作品をGitHubページを使って公開してみます。
GitHubアカウントの作成
GitHubのアカウントを作成します。すでに作成されている方は飛ばしていただいて大丈夫です。
GitHubのメインページにアクセスします。
多分どこかにあるであろうSign upをクリックします。
Usernameとメールアドレス・パスワードを入力し、お読みいただいているあなたが人間でしたらそれを証明していただいて（ロボットの方は残念ながらGitHubにはアップロードできません。。。）、Create accountをクリックします。
登録に使用したメールアドレスに承認を確認するメールが送られていると思いますのでメールから承認をしてください。
作成後のフローに関してはかなり変わる部分でもありますので、行き詰まったら検索していただけるとありがたいです。
作品アップロードリポジトリの作成
無事アカウントのセットアップが終わりましたら自分のメインのページを開いてください。下記のURLで行けると思います。
https:// github.com/アカウント名
Repository nameを決めます。なんでも大丈夫です。
自分はwebGLTestにしました。
Descriptionにこのリポジトリの説明を書きます。
自分は「webGL作品のアップロード用リポジトリです。」としました。
今回は公開したいのでpublicに設定します。
readmeファイルを作成します。このreadmeファイルは作成するリポジトリの説明を書く用です。
作品をアップロードするのでライセンスの設定はしておいた方がいいかもしれません。
おすすめはMIT ライセンスです。"コピー利用、配布、変更の追加、変更を加えたもの再配布、商用利用、有料販売など、どなたも自由にお使いいただくことができ"るライセンスでかなり自由度は高いライセンスですが規約で「著作権表示」と「ライセンスの全文」を記載する事となっていますので自分の作品の著作権を主張することができます。
引用先URL：https://yamory.io/blog/about-mit-License/
もっとちゃんと守りたいとかコピーされたくないなどの強い要望がある場合は他のライセンスを調べてみてください。
しかし今回はライセンス設定しません。
理由は簡単なキューブにグラデーションをかけただけであり加えて、この記事の目的としてはアップロードを行うことであるためです。
諸設定完了しましたらCreate repositoryをクリックします。
下記のURL先が表示されたら完了です。
https:// github.com/アカウント名/作品名
アップロードの準備
次にアップロードの準備をします。Gitクライアントを使ってアップロードをします。今回使用するのはSourcetreeです。
先ほど作成した作品のアップロード用リポジトリのメインページにアクセスします。
「Code」をクリックしHTTPSのURLをコピーします。
Sourcetreeを開きます。
（ここからmacOSのみで説明します。。。）
「新規」をクリックし、「URLからクローン」を選択します。
「ソースURL」に先ほどコピーしたURLを貼り付けます。
すると「保存先のパス」と「名前」が自動的に入力されます。
イメージとしては「ソースURL」がアップロード先のサーバみたいな感じで、「保存先のパス」というのはそのサーバの状態をお手持ちのPCにコピーする場所という感じです。
「保存先のパス」内部の状態を変更してサーバに同期する。このイメージがアップロード作業になります。
YouTubeやブログなどのアップロードとはちょっと違うので混乱するかもしれませんが、簡単に考えると「保存先のパス」の内部にやりたいことを詰め込んで、あとは同期させるだけでウェブページが出来上がります。
「保存先のパス」は基本どこでも大丈夫だと思います。
「Users/ユーザ名/work/作品名」みたいにすると『workの下にGitHubと同期しているディレクトリがあるんだなー』と意識できるので自分はそうしています。
「名前」というのはディレクトリ名なので混乱しないようにリポジトリ名（作品名）と同じにしましょう。
下の図のようなウィンドウが表示されたら準備は完了です。
作品をアップロードする。
作品が置いてあるディレクトリを開きます。
「Threejsを使ってwebGLを書いてみました。」の記事では「Threejs_proj」というディレクトリ名の配下に作品を置いていました。
そこの「index.html」と「static」ディレクトリ配下全てをコピーします。
そしてwebGLTestディレクトリ配下に配置します。
配置できたらSourcetreeに戻ります。
ファイルステータスにはてなアイコンでファイルが追加されていると思います。
保留中のファイルにチェックを入れると全てにチェックがつくと思います。
そしてコメント欄に「はじまり」と入れて「コミット」をクリックします。
「履歴」に移動します。「プッシュ」をクリックします。
「OK」をクリックします。
この時にパスワードが聞かれた場合はGitHubアカウントのパスワードを入れてください。
下の図のようになったらアップロードは完了です。
GitHubのリポジトリも確認するとちゃんとアップロードされていることが確認できました！。
GitHub Pageの設定
さてこれが最後の工程です！！。作品のリポジトリページからSettingsをクリックします。
「Pages」をクリックします。
「None」をクリックします。
「main」を選択します。
「Save」をクリックします。
成功です！。ページが完成しました。
出来上がったページのURLにアクセスして作品がアップロードできているか確認してみます。（反映に時間がかかる場合があります。）
アップロードでき…あれ？なぜだ白い。
記事から修正する箇所がいくつかありました。
記事のコード修正
Visual Studio Codeを開きます。
修正対象のファイルは以下です。
・index.html
・threejsTest.js
Pathを指定してファイルを参照している部分の修正です。
index.htmlでは「/static~~~」となっている部分を全て「static~~~」つまり先頭のスラッシュを削除してください。
<!DOCTYPE html>
<head>
<title>threejs test</title>
<link type="text/css" rel="stylesheet" href="static/css/threejsStyle.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>
<body>
<h1>welcome!!</h1>
<canvas class="mycanvas" id="testCanvas"></canvas>
<script type="text/javascript" src="static/js/threejsTest.js"/></script>
</body>
</html>threejsTest.jsでは「/static~~~」となっている部分を全て「static~~~」つまり先頭のスラッシュを削除してください。
〜 省略 〜
$.ajax({
async: false,
url: 'static/shaders/pachipachi_vertex.vs',
async: false,
cache: false,
error: function(jqxhr, status, exception) {
console.debug('jqxhr', jqxhr);
console.debug('status', status);
console.debug('exception', exception);
}
})
.done(function(response) {
threeVertexShaderText = response;
//console.log(threeVertexShaderText)
})
.fail(function () {
console.log('error');
});
$.ajax({
async: false,
url: 'static/shaders/nurinuri_fragment.fs',
dataType: 'html',
async: false,
cache: false,
error: function(jqxhr, status, exception) {
console.debug('jqxhr', jqxhr);
console.debug('status', status);
console.debug('exception', exception);
}
})
.done(function(response) {
fragmentShaderText = response;
//console.log(fragmentShaderText)
})
.fail(function () {
console.log('error');
});
〜 省略 〜「threejsを使ってwebGLを書いてみました。」のLive Serverはかなり強力なようで大きな間違いがない限りファイルを探してくれるみたいです。
GitHub PageではGitHub上のファイルの場所を正しく指定しないといけないようなので注意が必要でした。
修正した部分をアップロード
少し手間取りましたがこれで最後の工程です。
Sourcetreeに戻ります。
ファイルステータスに三点リーダアイコンでファイルの変更点が示されていると思います。
保留中のファイルにチェックを入れると全てにチェックがつくと思います。
そしてコメント欄に「修正」と入れて「コミット」をクリックします。
「履歴」に移動します。「プッシュ」をクリックします。
「OK」をクリックします。
この時にパスワードが聞かれた場合はGitHubアカウントのパスワードを入れてください。
もう一度作品のURLにアクセスしてみます。
口に入れた瞬間血だらけになりそうな鋭利な飴ちゃんを世界に公開できました！。
最後に
アップロード関連はちょくちょくうまくいかないことがありますが公開できると独り立ちできたような少し実力がついた感じがしていいですね。
ここまでお読みいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか？