- GitHub Pagesを使ってウェブサイトを公開する
- 簡単なブラウザゲームを作る
稀に、講義で作成したGitHubアカウントが凍結される場合がある。GitHubにログインしようとして「Account suspended」と表示されたら挙手し、教員もしくはTAの指示を待つこと。
MNISTは有名な手書き数字のデータセットだ。これを学習させたモデルをブラウザで読み込み、実際に数字を描いてみてちゃんと認識できるか確認してみよう。
GitHubにログインした状態で、以下のサイトにアクセスせよ。
https://github.com/appi-github/pages-sample
このサイトの右上に「Fork」というボタンがあるので、それを押す。すると「Create a new fork」という画面になるので設定はデフォルトのまま「Create Fork」ボタンを押す。すると、pages-sample
がforkされ、自分のアカウントのリポジトリとしてコピーされる。
GitHubでは、リポジトリの任意のブランチの、任意のディレクトリをホームページとしてウェブに公開することができる。自分のアカウントのpages-sample
リポジトリで、以下の作業を実行せよ。
- 上のタブの「Settings」を選ぶ。
- 左のメニューから「Pages」を選ぶ。
- 「GitHub Pages」という画面になるので、「Source」は「Deploy from a branch」のまま、「Branch」が「None」となっているのでボタンをクリックし、
main
を選ぶ。 - 「
/root
」というボタンが現れるので、クリックして「/docs
」を選んで「Save」ボタンを押す。
そのまま数分待ってから、その画面をリロードしよう。
準備ができていれば
Your site is live at https://ユーザ名.github.io/pages-sample/
という表示がされる。表示されたら、その表示の右にある「Visit site」ボタンを押すと、GitHubのリポジトリをウェブサイトとして公開したサイトが表示される。
先ほどの設定は、main
ブランチにあるスナップショットの、/docs
をルートディレクトリとしてウェブサイトを公開せよ、という意味だ。今回は/docs
以下にindex.html
が置いてあるので、それが表示される。
画面には二つの黒い領域がある。左の「Please draw here」とある方にマウスで数字を入力してみよ。右側の「Input Image」が更新され、「Your figure is ... 1!」などというメッセージが表示されるはずだ。
学習済みモデルは、28x28ピクセルの画像を学習しているため、入力された画像を、まずは28x28ピクセルに変換する必要がある。それが右側の「Input Image」である。この「Input Image」を学習済みニューラルネットワークに入力し、これが何の数字であるかを推定している。本来は前処理をして渡すのだが、それを省いているために認識精度がかなり低くなっているはずだ。いろいろ数字を入力し、どの数字の認識が悪いか試してみよ。
最も「これはないだろう」という判定画面(誰が見ても6なのに4と判定してしまった等)を選び、そのスクリーンショットをレポートとして提出せよ。また、どのような数字が誤判定しやすいか、またそれはなぜかを考察せよ。
Git/GitHubを使った演習の最後に、簡単なブラウザゲームを作ってみよう。
GitHubにログインした状態で、以下のサイトにアクセスせよ。
https://github.com/appi-github/tyrano_sample
このサイトの右上に「Fork」というボタンがあるので、それを押す。すると、tyrano_sample
がforkされ、自分のアカウントのリポジトリとしてコピーされる。
先ほどと同様な手順で、GitHub Pagesを公開しよう。
- 上のタブの「Settings」を選ぶ。
- 左のメニューから「Pages」を選ぶ。
- 「GitHub Pages」という画面になるので、「Source」は「Deploy from a branch」のまま、「Branch」が「None」となっているのでボタンをクリックし、
main
を選ぶ。 - 「
/root
」というボタンが現れるので、クリックして「/docs
」を選んで「Save」ボタンを押す。
そのまま数分待ってから、その画面をリロードしよう。
準備ができていれば
Your site is live at https://ユーザ名.github.io/tyrano-sample/
という表示がされる。表示されたら、その表示の右にある「Visit site」ボタンを押すこと。「走るか寝るかするメロス」という画面が表示されたら成功だ。
GitHubの自分のアカウントのtyrano_sample
をクローンしよう。https://github.com/を開き、Repositoriesから「tyrano_sample」を選ぶ。「Code」ボタンの「Clone」から、リモートリポジトリのURLをコピーしよう。その後、Git Bashでクローンする。
cd
cd github
git clone git@github.com:アカウント名/tyrano_sample.git
cd tyrano_sample
クローンできたら、VS Codeを開き、「フォルダーを開く」から、先ほどクローンしたディレクトリ(/z/github/tyrano_sample
)を開く。
VS Codeの左の「拡張機能」マークをクリックするか、Ctrl+Shift+Xにより拡張機能を開き、「Live Server」を探してインストールする。インストールに成功すると、右下に「Go Live」という表示がされるはずだ。
VS Codeのエクスプローラーからdocs/index.html
を開き、右下の「Go Live」をクリックする。ブラウザが開いて「走るか寝るかするメロス」がプレイできれば成功だ。URLはhttp://127.0.0.1:5500/docs/index.html
となっているであろう。このタブをデバッグで使うので閉じないこと。
VS Codeのエクスプローラーからdocs/data/scenario/first.ks
を開く。冒頭が以下のようになっているはずだ。
*start
[title name="走るか寝るかするメロス"]
[hidemenubutton]
[wait time=200]
[freeimage layer="base"]
この、[title name="走るか寝るかするメロス"]
を書き換えて保存し、先ほどのゲーム画面を開こう。自動でリロードされ、タイトルが変わっていれば成功だ。
シナリオファイルfirst.ks
を修正し、必要があれば画像を追加し、オリジナルゲームを作成せよ。そして、完成したゲームをGitHubにpushせよ。
オリジナルのゲームを作ってみよ。原則として、入力された文字がそのまま画面に表示されるが、「タグ」と呼ばれる機能でゲームを制御する。例えば、
「走るか寝るかするメロス」[l][r]
の[l]
はマウスの入力待ち、[r]
は改行をする命令だ。
選択肢は
[link target=*tag_sleep] →寝る [endlink][r]
[link target=*tag_run] →走る [endlink][r]
[s]
のように作る。[link]
と[endlink]
で囲まれたテキストをクリックすると、target=
で指定されたラベルにジャンプする。例えば「→寝る」をクリックすると*tag_sleep
のある場所にジャンプする。その先はこうなっている。
*tag_sleep
[cm]
[bg storage=sleep.jpg time=500]
メロスは死んだように深く眠った。[l][r]
勇者は、ひどく赤面した。[r]
【 BAD END 】[l][cm]
[jump target=*start]
[cm]
はテキストをクリアする命令だ。[bg]
は背景画像を指定する。bgimage
というディレクトリにある画像をstorage=filename
で指定することで表示する。time
は表示するまでの時間(ミリ秒)だ。
最後に[jump target=*start]
で*start
ラベル、つまりゲームの最初に戻っている。
ここで用いているのはティラノスクリプト Ver. 4というスクリプト言語であり、タグによりゲームを制御する。
よく使うタグを以下にまとめておく。
[l]
このタグに到達すると、マウスのクリック待ちとなる。数字の1ではなく、小文字のLであることに注意。[r]
改行する。[cm]
テキストをクリアする。画面の切り替えの前などに使う。[bg storage=filename.jpg time=500]
docs/data/bgimage
にある背景画像を表示する。すでにrun.jpg
とsleep.jpg
があるので、必要に応じてファイルをそこに追加すること。*label
文頭にアスタリスク*
に続けて文字を並べるとラベルとなる。[jump]
や[link]
と組み合わせて使う。[jump target=*label]
ラベルにジャンプする。ゲームの最初に戻る時などに使う。[link target=*label]
と[endlink]
で囲まれたテキストをクリックすると、*label
で指定された場所にジャンプする。物語を分岐させるのに使う。
その他のタグについては公式サイトのタグリファレンスhttps://tyrano.jp/tag/v4を参照のこと。
ゲームが完成したら、GitHub Pagesにデプロイする。
まずLive Serverにより、ローカルで動作確認を行うこと。特に、シナリオファイルfirst.ks
の保存を忘れないこと。VS Codeのタブの「first.ks」の隣が「●」になっていたら保存されていない。保存されていると「X」となるはずなので、必ず保存すること。
ローカルでの動作確認が済んだら、以下の手順でpushせよ。
- Git Bashで、カレントディレクトリが
/z/github/tyrano_sample
であることを確認する。 - その場所で
git add .
を実行する git commit -m "updates"
を実行する。git push
を実行する(パスフレーズを入力すること)。
pushができたら、数分待ってからGitHubの「Settings」「Pages」にあるhttps://アカウント名.github.io/tyrano_sample
をクリックし、動作確認を行う。特に、画像ファイルの反映には時間がかかる。
オリジナルのゲームを作成し、自分のリポジトリにプッシュしたのち、ブラウザで動作確認したらそのURLを、ゲーム画面のスクリーンショットとともにレポートとして提出せよ。ローカルテスト用のURL(http://127.0.0.1
)ではなく、https://アカウント名.github.io/tyrano_sample
の方を提出すること。
ゲーム内容についての注意:
- 公序良俗に反するような内容にしてはならない。
- (たとえ友人であっても)特定個人を揶揄するような内容にしてはならない。有名人も題材としない。
- 画像を用いる場合は、ライセンスとして再配布して問題ないものを利用する(例えば「いらすとや」や「Pexels」の画像を利用するなど)。
- 面白い作品は別の場所で紹介する可能性があるため、紹介されたくない場合はその旨をレポートに明記すること。
何かベンチャー企業を立ち上げた時、その目標の一つは株式公開となるだろう。未上場企業が新規に株式を証券取引所に上場し、投資家に株式を取得させることを「新規株式公開 (Initial Public Offering)」、略してIPOと呼ぶ。アメリカでIPOを行うためには、米国証券取引委員会(SEC)にForm S-1と呼ばれる証券登録届出書を提出する必要がある。このForm S-1には、事業者の財務諸表など、投資家が株式を購入するのに必要な事項が記述されている。さて、このForm S-1を提出する際、CEOが「この企業を作った時の思い」を手紙にしたためて添付するのが慣習となっている。
2012年2月1日、Facebook(現Meta)はIPOのための書類Form S-1をSECに提出した。この書類には、CEOであるマーク・ザッカーバーグからの手紙が添付されている。原文はSECのサイトから読める。その一部に「The Hacker Way」と題されたパラグラフがあるので、一部を引用しよう。
強力な企業を作るため、Facebookを優れた人材が世界に大きな影響を与え、他の優れた人材から学ぶことができる最高の場所にするために、私たちは努力しています。私たちは、「the Hacker Way」と呼ぶ独自の文化とマネジメントアプローチを培ってきました。(中略)常に前に進むために、社内の壁には「完璧を目指す前にまず終わらせろ(Done is better than perfect)」という言葉が掲げられています。(中略)Facebookのオフィスでは「コードは議論に勝つ (Code wins arguments)」という、ハッカーの信条を良く耳にします。ハッカー文化は、完全にオープンで、かつ実力主義です。ハッカーたちは、アイディアを求めてロビー活動を行う人や、多くの人を部下に持つような人ではなく、最高のアイディアと実装が常に勝つべきだと信じています。
Facebookのハッカー文化を象徴する言葉として良く耳にする「完璧を目指す前にまず終わらせろ(Done is better than perfect)」「コードは議論に勝つ (Code wins arguments)」の記載がある。これ以外にも、Facebookが目指す世界について熱く語られている。当時27歳であったマーク・ザッカーバーグの興奮が伝わってくる文章なので、一読をお勧めする。有志による日本語訳も公開されている。
手紙の最後は、Facebookが目指す「Five core values」について語られている。その最後のcore value、「Build Social Value」を紹介しておこう。
繰り返しになりますが、Facebookは、会社を構築するためだけでなく、世界をよりオープンでつながりのあるものにするために存在しています。私たちFacebookのメンバー全員が、世界にとって真の価値を生み出すために日々努力してまいります。
- Facebook Inc.のForm S-1、「Letter from Mark Zuckerberg」より。https://www.sec.gov/Archives/edgar/data/1326801/000119312512034517/d287954ds1.htm