物理情報工学ソフトウェア開発演習
136演習：GitHubの操作(応用編)慶應義塾大学理工学部物理情報工学科渡辺物理情報工学ソフトウェア開発演習
View Slide
236• GitHub Pagesを使ってウェブサイトを公開する• MNISTの学習済みモデルをウェブで試す• 簡単なブラウザゲームを作る
336我々がインターネットを閲覧する時、クライアントとウェブサーバが通信しているクライアント ウェブサーバサーバのローカルデータChromeSafariFirefoxEdgeなどApachenginxなど
436クライアントが要求するのはURL(Uniform Resource Location)https://www.mext.go.jp/a_menu/shotou/new-cs/index.htmプロトコル ホスト＋ドメイン名 ディレクトリ ファイル名https://www.mext.go.jp/a_menu/shotou/new-cs/index.htm
536https://www.mext.go.jp/a_menu/shotou/new-cs/index.htmプロトコル ホスト＋ドメイン名 ディレクトリ ファイル名https://www.mext.go.jp/a_menu/shotou/new-cs/index.htm1. httpsというプロトコルで2. mext.go.jpというドメインに所属する3. wwwというマシンの4. a_menu/shotou/new-csというディレクトリにある5. index.htmlというファイルの情報をくださいサーバのローカルデータサーバブラウザ
636実際にはサーバにはIPアドレスという番号が振られているサーバにアクセスするためにはIPアドレスが必要「www.mext.go.jp」のIPアドレスを教えてください202.238.130.103ですホスト名とドメイン名を合わせて FQDN(Fully Qualified Domain Name)と呼ぶFQDNからIPアドレスを教えてくれるのがDNS (Domain Name System)DNSクライアント
736ウェブページを公開するためには• グローバルIPアドレスを持つサーバの• 適切なディレクトリに• ファイルをアップロードする必要があるサーバのローカルストレージサーバ
836GitHub に公開しているリポジトリから、HTMLやJavaScript,CSSなどを取得し、ウェブサイトを公開できる静的ホスティングサービス外からウェブサイトとして閲覧できるウェブサイトとして公開するリポジトリ、ブランチ、ディレクトリを指定
936リポジトリのForkhttps://github.com/appi-github/pages-sample にアクセスして、Forkボタンを押す
1036こんな画面になるので「Create Fork」ボタンを押す自分のアカウントのリポジトリがコピーされる
1136Pagesの設定Forkされたリポジトリ(自分のアカウントに表示されたもの)のSettingsを押す
1236１2 3 41. Pagesを選ぶ 2. mainブランチを選ぶ 3. フォルダは /docsを選ぶ 4. Saveを押す
1336Saveボタンを押してから数分待ってからリロード「Your site is live at ....」という表示が現れたら「Visit site」をクリック
1436https://github-watanabe.github.io/pages-sample/?1もし404と表示されたら、しばらく待ってからアドレスの最後に「?1」を追加してエンターキーを入力GitHubアカウント名
1536数字認識できることを確認マウスでここに入力判定結果ニューラルネットへの入力画像
1636認識が誤判定する結果を作り、スクリーンショットを提出なぜ誤判定したか考察すること判定失敗
1736https://github.com/appi-github/tyrano_sampleをforkする
1836先ほどと同様の手順でPagesを公開する１23 4 5
1936Saveボタンを押して数分待ってからリロード「Your site is live at ....」という表示が現れたら「Visit site」をクリック
2036こんな画面が出たら成功テストプレイをしてみようマウスクリックでメッセージ送り選択肢が出たらマウスクリックで選ぶ
2136リポジトリのクローンのため、リモートURLをコピー12341. 自分のアカウントの 2. Codeをクリックし 3. SSHを選んで 4. コピーボタンを押す
2236cdcd githubgit clone [email protected]:github-watanabe/tyrano_sample.gitcd tyrano_sampleGit Bashで以下を実行ここはコピーされているはずなので、マウス右クリックから「Paste」
2336VS Codeの「フォルダーを開く」で「/z/github/tyrano_sample」を開くここにTYRANO_SAMPLEと表示される
2436ブラウザは勝手にローカルファイルにアクセスできないもしアクセスできると、悪意あるサイトに個人情報を引き抜かれる可能性があるクライアント ウェブサーバ原則として、ユーザが直接指定したファイルのみサーバに送信できる
2536ブラウザはローカルファイルを自由に見ることができない→ ブラウザゲームのローカルでのテストができない解決策１：ブラウザのセキュリティレベルを下げる(非推奨)解決策２：ローカルにウェブサーバを立てるローカルストレージウェブサーバウェブサーバのローカルなのでアクセスできるブラウザ動作確認ファイル修正
26361. 拡張機能をクリック 2. 検索窓に「Live Server」と入力 3. インストール
27361. docs/index.htmlを開く2. Go Liveをクリック
2836ブラウザが開いてゲームができれば成功このタブはデバッグに使うので閉じない事
2936docs/data/scenario/first.ksを開く
3036*start[title name="怒れセリヌンティウス"][hidemenubutton][wait time=200][freeimage layer="base"]タイトルを変更して保存する
3136タイトルが変更されれば成功
3236first.ksを修正し、オリジナルゲームを作成する必要に応じて画像ファイルを追加する背景画像は docs/data/bgimageにファイルを置く
3336first.ksの保存忘れに注意。push前に保存すること。VS Codeのファイル名のタブの隣が●になっていたら、保存されていないXになっていたら大丈夫
3436Git Bashで、カレントディレクトリが/z/github/tyrano_sampleになっていることを確認以下の手順でpushするgit add .git commit -m “updates”git push
3536GitHub Pagesで動作確認123Visit siteをクリックして現れたページで自分のゲームが表示されれば成功
3636https://アカウント名.github.io/tyrano_sample/ゲームのスクリーンショットと以下のURLをレポートに提出• 公序良俗に反するような内容にしてはならない。• (たとえ友人であっても)特定個人を揶揄するような内容にしてはならない。有名人も題材としない。• 画像を用いる場合は、ライセンスに問題ないものを利用する。• 面白い作品は別の場所で紹介する可能性があるため、紹介されたくない場合はその旨をレポートに明記すること。注意：
kaityo256
bernhardsvt
cbtlibrary
kfujita
oracle4engineer
robinlee
yasulab
resourcesolutions
matleenalaakso
akiraasano
tam07pb915
martine
eileencodes
skipperchong
malarkey
jeffersonlam
reverentgeek
addyosmani
thekraken
sstephenson
lauravandoore
mclloyd
cromwellryan