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
7
1.4k
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
5
2.2k
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
4
510
論文紹介のやり方 / How to review
kaityo256
PRO
15
84k
デバッグの話 / Debugging for Beginners
kaityo256
PRO
12
1.6k
ビット演算の話 / Let's play with bit operations
kaityo256
PRO
8
570
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
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
16k
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1.1k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
480
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
620
プレゼンテーション実践
takenawa
0
11k
2025/06/05_読み漁り学習
nag8
0
180
演習問題
takenawa
0
11k
仮説の取扱説明書/User_Guide_to_a_Hypothesis
florets1
4
340
万博非公式マップとFOSS4G
barsaka2
0
710
日本の教育の未来 を考える テクノロジーは教育をどのように変えるのか
kzkmaeda
1
230
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
350
ARアプリを活用した防災まち歩きデータ作成ハンズオン
nro2daisuke
0
140
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
A designer walks into a library…
pauljervisheath
207
24k
We Have a Design System, Now What?
morganepeng
53
7.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Become a Pro
speakerdeck
PRO
29
5.5k
Navigating Team Friction
lara
188
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
RailsConf 2023
tenderlove
30
1.2k
Into the Great Unknown - MozCon
thekraken
40
2k
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をレポートに提出 • 公序良俗に反するような内容にしてはならない。 • (たとえ友人であっても)特定個人を揶揄するような内容にしてはなら ない。有名人も題材としない。
• 画像を用いる場合は、ライセンスに問題ないものを利用する。 • 面白い作品は別の場所で紹介する可能性があるため、紹介されたくな い場合はその旨をレポートに明記すること。 注意: