Upgrade to Pro — share decks privately, control downloads, hide ads and more …

演習:GitHubの操作(応用編) / GitHub Practice Github Advanced

A10e41b0a61d59f2258d7f6172c33479?s=47 kaityo256
PRO
November 05, 2021

演習:GitHubの操作(応用編) / GitHub Practice Github Advanced

物理情報工学ソフトウェア開発演習

A10e41b0a61d59f2258d7f6172c33479?s=128

kaityo256
PRO

November 05, 2021
Tweet

Transcript

  1. 1 31 演習:GitHubの操作(応用編) 慶應義塾大学理工学部物理情報工学科 渡辺 物理情報工学ソフトウェア開発演習

  2. 2 31 • MNISTの学習済みモデルをウェブで試す • 簡単なゲーム作成

  3. 3 31 我々がインターネットを閲覧する時、クライアントとウェブサーバが通信している クライアント ウェブサーバ サーバのローカルデータ Chrome Safari Firefox Edgeなど

    Apache nginxなど
  4. 4 31 クライアントが要求するのは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
  5. 5 31 https://www.mext.go.jp/a_menu/shotou/new-cs/index.htm プロトコル ホスト+ドメイン名 ディレクトリ ファイル名 https://www.mext.go.jp/a_menu/shotou/new-cs/index.htm 1. httpsというプロトコルで

    2. mext.go.jpというドメインに所属する 3. wwwというマシンの 4. a_menu/shotou/new-csというディレクトリにある 5. index.htmlというファイルの情報をください サーバのローカルデータ サーバ ブラウザ
  6. 6 31 実際にはサーバにはIPアドレスという番号が振られている サーバにアクセスするためにはIPアドレスが必要 「www.mext.go.jp」のIPアドレスを 教えてください 202.238.130.103 です ホスト名とドメイン名を合わせて FQDN(Fully

    Qualified Domain Name)と呼ぶ FQDNからIPアドレスを教えてくれるのがDNS (Domain Name System) DNS クライアント
  7. 7 31 ウェブページを公開するためには • グローバルIPアドレスを持つサーバの • 適切なディレクトリに • ファイルをアップロードする 必要がある

    サーバの ローカルストレージ サーバ
  8. 8 31 GitHub に公開しているリポジトリから、HTMLやJavaScript, CSSなどを取得し、ウェブサイトを公開できる静的ホスティ ングサービス 外からウェブサイトとして 閲覧できる ウェブサイトとして公開する リポジトリ、ブランチ、

    ディレクトリを指定
  9. 9 31 リポジトリのFork https://github.com/appi-github/pages-sample にアクセスして、Forkボタンを押す 自分のアカウントにforkされる Settingsが現れる

  10. 10 31 Pagesの設定 Forkされたリポジトリ(自分のアカウントに表示されたもの)のSettingsを押す

  11. 11 31 1 2 3 4 1. Pagesを選ぶ 2. mainブランチを選ぶ

    3. フォルダは /docsを選ぶ 4. Saveを押す
  12. 12 31 こんな画面がでたら数分待ってからクリック

  13. 13 31 もしクリックが早すぎると・・・

  14. 14 31 https://github-watanabe.github.io/pages-sample/?1 もし、しばらくまってリロードしても404のままだったら、 アドレスの最後に「?1」を追加してエンターキーを入力 GitHubアカウント名

  15. 15 31 数字認識を確認 マウスでここに入力 判定結果 ニューラルネットへの 入力画像

  16. 16 31 認識が誤判定する結果を作り、スクリーンショットを提出 なぜ誤判定したか考察すること 判定失敗

  17. 17 31 ブラウザは勝手にローカルファイルにアクセスできない もしアクセスできると、悪意あるサイトに個人情報を 引き抜かれる可能性がある クライアント ウェブサーバ 原則として、ユーザが直接指定したファイルのみ サーバに送信できる

  18. 18 31 ブラウザはローカルファイルを自由に見ることができない → ブラウザゲームのローカルでのテストができない 解決策1:ブラウザのセキュリティレベルを下げる(非推奨) 解決策2:ローカルにウェブサーバを立てる ローカルストレージ ウェブサーバ ウェブサーバの

    ローカルなのでアクセスできる ブラウザ 動作確認 ファイル修正
  19. 19 31 https://github.com/appi-github/tyrano_sample をforkする

  20. 20 31 先ほどと同様の手順でPagesを公開する 2 3 4 5 1

  21. 21 31 こんな画面が出たら成功 テストプレイをしてみよう マウスクリックでメッセージ送り 選択肢が出たらマウスクリックで選ぶ

  22. 22 31 リポジトリのクローンのため、リモートURLをコピー 1 2 3 4 1. 自分のアカウントの 2.

    Codeをクリックし 3. SSHを選んで 4. コピーボタンを押す
  23. 23 31 cd cd github git clone git@github.com:github-watanabe/tyrano_sample.git Git Bashで以下を実行

    ここはコピーされているはずなので、マウス右クリックから「Paste」
  24. 24 31 VS Codeの「フォルダーを開く」で「/z/github/tyrano_sample」を開く ここにTYRANO_SAMPLEと表示される

  25. 25 31 1. 拡張機能をクリック 2. 検索窓に「Live Server」と入力 3. インストール

  26. 26 31 1. docs/index.htmlを開く 2. Go Liveをクリック

  27. 27 31 ブラウザが開いてゲームができれば成功

  28. 28 31 docs/data/scenario/first.ksを開く

  29. 29 31 *start [title name="怒れセリヌンティウス"] [hidemenubutton] [wait time=200] [freeimage layer="base"]

    タイトルを変更して保存する
  30. 30 31 タイトルが変更されれば成功

  31. 31 31 1. first.ksを書き換えてオリジナルのゲームを作成する 2. ローカル(Live Server)で動作確認する 3. git add,

    commit, pushする 4. GitHub Pagesで動作確認する https://アカウント名.github.io/tyrano_sample/ 以下のURLをレポートに提出 • 公序良俗に反するような内容にしてはならない • (たとえ友人であっても)特定個人を揶揄するような内容にしてはならない。有名人も題材としない • 画像を用いる場合は、ライセンスとして問題ないものを利用する(例えばPexelsの画像を利用するなど)。 • 面白い作品は別の場所で紹介する可能性があるため、紹介されたくない場合はその旨をレポートに明 記すること 注意: