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
モンテカルロ法(3) 発展的アルゴリズム / Simulation 04
kaityo256
PRO
8
1.4k
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
5
2.3k
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
5
540
論文紹介のやり方 / How to review
kaityo256
PRO
15
85k
デバッグの話 / Debugging for Beginners
kaityo256
PRO
13
1.6k
ビット演算の話 / Let's play with bit operations
kaityo256
PRO
8
580
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
15
5.3k
制限ボルツマンマシンの話 / Introduction of RBM
kaityo256
PRO
3
1.3k
論文の読み方 / How to survey
kaityo256
PRO
223
180k
Other Decks in Education
See All in Education
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
takashi_toyosaki
1
210
みんなのコード 2024年度活動報告書/ 2025年度活動計画書
codeforeveryone
0
250
AWSと共に英語を学ぼう
amarelo_n24
0
140
Transición del Management al Neuromanagement
jvpcubias
0
170
Pythonパッケージ管理 [uv] 完全入門
mickey_kubo
22
22k
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.8k
Alumnote inc. Company Deck
yukinumata
0
1.6k
2025年度春学期 統計学 第6回 データの関係を知る(1)ー相関関係 (2025. 5. 15)
akiraasano
PRO
0
180
教える側は、初学者に谷越えまで伴走すべき(ダニング・クルーガー効果からの考察)
hysmrk
3
120
American Airlines® USA Contact Numbers: The Ultimate 2025 Guide
lievliev
0
250
ビジネスモデル理解
takenawa
0
14k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
510
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Navigating Team Friction
lara
189
15k
The Pragmatic Product Professional
lauravandoore
36
6.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing Experiences People Love
moore
142
24k
Optimizing for Happiness
mojombo
379
70k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
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をレポートに提出 • 公序良俗に反するような内容にしてはならない。 • (たとえ友人であっても)特定個人を揶揄するような内容にしてはなら ない。有名人も題材としない。
• 画像を用いる場合は、ライセンスに問題ないものを利用する。 • 面白い作品は別の場所で紹介する可能性があるため、紹介されたくな い場合はその旨をレポートに明記すること。 注意: