Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
演習:GitHubの操作(応用編) / GitHub Practice Github Adva...
Search
kaityo256
PRO
November 05, 2021
Education
2
1.4k
演習:GitHubの操作(応用編) / GitHub Practice Github Advanced
物理情報工学ソフトウェア開発演習
kaityo256
PRO
November 05, 2021
Tweet
Share
More Decks by kaityo256
See All by kaityo256
生成AIとの付き合い方 / Generative AI and us
kaityo256
PRO
9
1.6k
モンテカルロ法(3) 発展的アルゴリズム / Simulation 04
kaityo256
PRO
8
1.5k
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
6
2.7k
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
6
590
論文紹介のやり方 / How to review
kaityo256
PRO
17
86k
デバッグの話 / Debugging for Beginners
kaityo256
PRO
16
1.7k
ビット演算の話 / Let's play with bit operations
kaityo256
PRO
8
620
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
15
5.4k
制限ボルツマンマシンの話 / Introduction of RBM
kaityo256
PRO
3
1.4k
Other Decks in Education
See All in Education
相互コミュニケーションの難しさ
masakiokuda
0
270
2025年度春学期 統計学 第13回 不確かな測定の不確かさを測る ー 不偏分散とt分布 (2025. 7. 3)
akiraasano
PRO
0
140
Réaliser un diagnostic externe
martine
0
190
Entrepreneurship minor course at HSE 2025
karlov
0
100
データで見る赤ちゃんの成長
syuchimu
0
320
生成AI活用セミナー/GAI-workshop
gnutar
0
120
ハッカソンを活用したモノづくり教育について
yusk1450
PRO
2
110
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
710
2025年度春学期 統計学 第14回 分布についての仮説を検証する ー 仮説検定(1) (2025. 7. 10)
akiraasano
PRO
0
160
RSJ2025 ランチョンセミナー 一歩ずつ世界へ:学生・若手研究者のための等身大の国際化の始め方
t_inamura
0
310
~キャラ付け考えていますか?~ AI時代だからこそ技術者に求められるセルフブランディングのすゝめ
masakiokuda
7
500
万博マニアックマップを支えるオープンデータとその裏側
barsaka2
0
890
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Designing for humans not robots
tammielis
254
26k
Gamification - CAS2011
davidbonilla
81
5.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Unsuck your backbone
ammeep
671
58k
How GitHub (no longer) Works
holman
315
140k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
A designer walks into a library…
pauljervisheath
209
24k
The Cult of Friendly URLs
andyhume
79
6.6k
Transcript
1 36 演習:GitHubの操作(応用編) 慶應義塾大学理工学部物理情報工学科 渡辺 物理情報工学ソフトウェア開発演習
2 36 • GitHub Pagesを使ってウェブサイトを公開する • MNISTの学習済みモデルをウェブで試す • 簡単なブラウザゲームを作る
3 36 我々がインターネットを閲覧する時、クライアントとウェブサーバが通信している クライアント ウェブサーバ サーバのローカルデータ Chrome Safari Firefox Edgeなど
Apache nginxなど
4 36 クライアントが要求するのは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 36 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 36 実際にはサーバにはIPアドレスという番号が振られている サーバにアクセスするためにはIPアドレスが必要 「www.mext.go.jp」のIPアドレスを 教えてください 202.238.130.103 です ホスト名とドメイン名を合わせて FQDN(Fully
Qualified Domain Name)と呼ぶ FQDNからIPアドレスを教えてくれるのがDNS (Domain Name System) DNS クライアント
7 36 ウェブページを公開するためには • グローバルIPアドレスを持つサーバの • 適切なディレクトリに • ファイルをアップロードする 必要がある
サーバの ローカルストレージ サーバ
8 36 GitHub に公開しているリポジトリから、HTMLやJavaScript, CSSなどを取得し、ウェブサイトを公開できる静的ホスティ ングサービス 外からウェブサイトとして 閲覧できる ウェブサイトとして公開する リポジトリ、ブランチ、
ディレクトリを指定
9 36 リポジトリのFork https://github.com/appi-github/pages-sample にアクセスして、Forkボタンを押す
10 36 こんな画面になるので「Create Fork」 ボタンを押す 自分のアカウントのリポジトリが コピーされる
11 36 Pagesの設定 Forkされたリポジトリ(自分のアカウントに表示されたもの)のSettingsを押す
12 36 1 2 3 4 1. Pagesを選ぶ 2. mainブランチを選ぶ
3. フォルダは /docsを選ぶ 4. Saveを押す
13 36 Saveボタンを押してから数分待ってからリロード 「Your site is live at ....」という表示が現れたら「Visit site」をクリック
14 36 https://github-watanabe.github.io/pages-sample/?1 もし404と表示されたら、しばらく待ってからアドレスの 最後に「?1」を追加してエンターキーを入力 GitHubアカウント名
15 36 数字認識できることを確認 マウスでここに入力 判定結果 ニューラルネットへの 入力画像
16 36 認識が誤判定する結果を作り、スクリーンショットを提出 なぜ誤判定したか考察すること 判定失敗
17 36 https://github.com/appi-github/tyrano_sample をforkする
18 36 先ほどと同様の手順でPagesを公開する 1 2 3 4 5
19 36 Saveボタンを押して数分待ってからリロード 「Your site is live at ....」という表示が現れたら「Visit site」をクリック
20 36 こんな画面が出たら成功 テストプレイをしてみよう マウスクリックでメッセージ送り 選択肢が出たらマウスクリックで選ぶ
21 36 リポジトリのクローンのため、リモートURLをコピー 1 2 3 4 1. 自分のアカウントの 2.
Codeをクリックし 3. SSHを選んで 4. コピーボタンを押す
22 36 cd cd github git clone
[email protected]
:github-watanabe/tyrano_sample.git cd tyrano_sample
Git Bashで以下を実行 ここはコピーされているはずなので、マウス右クリックから「Paste」
23 36 VS Codeの「フォルダーを開く」で「/z/github/tyrano_sample」を開く ここにTYRANO_SAMPLEと表示される
24 36 ブラウザは勝手にローカルファイルにアクセスできない もしアクセスできると、悪意あるサイトに個人情報を 引き抜かれる可能性がある クライアント ウェブサーバ 原則として、ユーザが直接指定したファイルのみ サーバに送信できる
25 36 ブラウザはローカルファイルを自由に見ることができない → ブラウザゲームのローカルでのテストができない 解決策1:ブラウザのセキュリティレベルを下げる(非推奨) 解決策2:ローカルにウェブサーバを立てる ローカルストレージ ウェブサーバ ウェブサーバの
ローカルなのでアクセスできる ブラウザ 動作確認 ファイル修正
26 36 1. 拡張機能をクリック 2. 検索窓に「Live Server」と入力 3. インストール
27 36 1. docs/index.htmlを開く 2. Go Liveをクリック
28 36 ブラウザが開いてゲームができれば成功 このタブはデバッグに使うので閉じない事
29 36 docs/data/scenario/first.ksを開く
30 36 *start [title name="怒れセリヌンティウス"] [hidemenubutton] [wait time=200] [freeimage layer="base"]
タイトルを変更して保存する
31 36 タイトルが変更されれば成功
32 36 first.ksを修正し、オリジナルゲームを作成する 必要に応じて画像ファイルを追加する 背景画像は docs/data/bgimageにファイルを置く
33 36 first.ksの保存忘れに注意。push前に保存すること。 VS Codeのファイル名のタブの隣が•になっていたら、保存されていない Xになっていたら大丈夫
34 36 Git Bashで、カレントディレクトリが /z/github/tyrano_sampleになっていることを確認 以下の手順でpushする git add . git
commit -m “updates” git push
35 36 GitHub Pagesで動作確認 1 2 3 Visit siteをクリックして現れたページで自分のゲームが表示されれば成功
36 36 https://アカウント名.github.io/tyrano_sample/ ゲームのスクリーンショットと 以下のURLをレポートに提出 • 公序良俗に反するような内容にしてはならない。 • (たとえ友人であっても)特定個人を揶揄するような内容にしてはなら ない。有名人も題材としない。
• 画像を用いる場合は、ライセンスに問題ないものを利用する。 • 面白い作品は別の場所で紹介する可能性があるため、紹介されたくな い場合はその旨をレポートに明記すること。 注意: