class: title, smokescreen, shelf, no-footer # www.py (partials) <div class=footnote> <small><small> </small></small> </div> <div class=www.py-prep-begin></div> --- class: title, smokescreen, shelf, no-footer # 用語、凡例 <div class=footnote> <small><small> </small></small> </div> --- class: compact # <small>登場するコマンドたち</small> <div class=footnote> <small><small> (脚注) もともとUnixにsu(えすゆー)コマンドがあって、 のちにsudo登場なので、すなおに「えすゆーどぅー」な気がするんですけどね </small></small> </div> <small> - コマンド - コンピュータに与える命令で擬似英語っぽい単語(+文章)、スペース区切りに注意 - curl - ダウンロードやブラウザの代わりが出来る便利なコマンド(発音:しーゆーあーるえる or かーる) - HTTPを話すことが出来る - sudo - 引数を管理者権限で実行できる特殊なコマンド(発音:えすゆーどぅー or すどう(日本人限定?))。 - 管理権限が必要な作業の時に使う。 Linuxのシステム構築で頻出するコマンド - python3 - プログラミング言語Python(発音:ぱいそん)のプログラムを実行するコマンド(インタープリタ) </small> --- name: hands-on-www class: compact # <small>[凡例] Unixマニュアルorドキュメントの読み方(事前講習)</small> <div class=footnote> <small><small> </small></small> </div> <small> ``` [コマンドの記述例] $ sudo python3 www.py ``` - 左端の`$`をプロンプトと呼んでいます。<B>OSが「入力まち」を意思表示</B>していると考えてください - プロンプト`$`部分はOSやユーザごとに異なるので、あくまでも一例です - 通常、<B>左端にある特殊文字部分</B>は、プロンプトとして無視してください(そのうち慣れます) - <B>英語なので空白区切り</B>です。初心者は日本語のつもりか連続して文字を打ちこみがちなので注意 - ユーザが打ちこむ部分は `sudo python3 www.py` です。そしてENTERキーを押します - 通常マニュアルにENTERキーは書きませんので、ユーザが頭の中で補完してください - 雑誌や書籍では、組版(くみはん)の際にデザイナさんがENTER印を書きこんでくれているのです - 上の例では、sudoが実行するコマンド、sudoコマンドの引数が`python3 www.py`です </small> --- class: compact # <small>[凡例] テキストの書き方(事前講習兼もういちど)</small> <div class=footnote> <small><small> (脚注) 自由課題は出題のみです。 いまのところ自由課題の解答編の動画を作る予定はありませんが、リクエスト数しだい? </small></small> </div> <small> - ユーザ名などについて - 演習環境へのログイン時、<B>ユーザ名はadmin、ホームディレクトリ(フォルダ)は/home/admin</B>です - (授業ではAWS Academyを用いてEC2を作成し、その上で作業しています) <br> 本テキストも他の授業資料とあわせるため、AWS提供のDebianのデフォルト値に合わせてあります - <B>困った時はCtrl-C</B>。たとえば<B>www.pyの止め方もCtrl-C</B>です(書いてないけど) - <B>Ctrl-Cは「CtrlとCのキーを同時に押す」操作で、実行中のコマンドを途中で止める</B>時の定番 - 本動画特有の注意点 - この動画では、実際に手を動かしている想定のところに <B>「(アーカイブ動画で見ている人は)一時停止して手を動かしてみましょう」</B> というスライドが挿入されています。 <B>アーカイブで見ている方は、動画を一時停止して、手を動かしてから、再生をリスタートしてください</B> - 演習時間を30分程度におさえるため、ダウンロードとコピー&ペーストのみにしてあります。 <br> もう少し時間のかかるものは、付録に「自由課題」として収録してあるので、 各自で取り組んでみてください。ちなみに、自由課題の難易度は「やさしい」から「むずかしい」まで色々です </small> --- class: compact # <small>[凡例] www.pyの止め方</small> ``` [実行例] admin@user99:~$ sudo python3 www.py /home/admin/www.py:26: DeprecationWarning: 'cgi' is deprecated ... (<-警告文)略 ... (debug) serving at port 80 ... (止めたいときは、ターミナルにCtrl-Cを打ちこむ) ... ^CTraceback (most recent call last): File "/home/admin/www.py", line 200, in <module> httpd.serve_forever() File "/usr/lib/python3.7/socketserver.py", line 232, in serve_forever ready = selector.select(poll_interval) File "/usr/lib/python3.7/selectors.py", line 415, in select fd_event_list = self._selector.poll(timeout) KeyboardInterrupt admin@user99:~$ ``` <div class=www.py-prep-end></div> <div class=www.py-homepage-begin></div> --- name: hands-on-www class: compact,img-right # [解説] ホームページ(WWW)のしくみ <div class=footnote> <small><small> (脚注) これを「サーバ(給仕)・クライアント(お客様)モデル」と呼んでいます </small></small> </div> ![](/slides/skill-exp/images/www-internal-htdocs.png) <small> - (1)URL(`http://b2902900.cloud.fml.org/`)をブラウザでクリックすると - (2)WWWサーバはURL右端の`/`を`/index.html`と解釈しindex.htmlの中身をブラウザへ返します - (3)ブラウザが、WWWサーバ(b2902900.cloud.fml.orgで動いているwww.py)にリクエストを送り返します - URL = サーバ名+見たいコンテンツ - サーバ名が`b2902900.cloud.fml.org` - サーバ名の右側部分(ここでは`/`)がサーバ上でのコンテンツの場所の指定 <br> (注: `/`=`/index.html`は相対位置です。 WWWサーバ(www.py)には`/index.html`の実在する位置は`/home/admin/htdocs/index.html`であると解釈する設定が入っています) </small> --- class: title, smokescreen, shelf, no-footer # 例題: ホームページを作ろう <div class=footnote> <small><small> Colitas の支援を受けながら、各自がんばってみましょう </small></small> </div> --- class: compact # [例題] ホームページを作ろう(1) <div class=footnote> <small><small> Colitas の支援を受けながら、各自がんばってみましょう </small></small> </div> 正確には(ホームページを作るために)WWWサーバの構築をする演習です。 <br> 次の3ステップからなります 1. WWWサーバをダウンロード 1. WWWサーバを起動 1. ブラウザで動作を確認 --- class: compact # [例題] ホームページを作ろう(2): <small>ダウンロード</small> <div class=footnote> <small><small> (脚注) あとで curl の -o (小文字のオー)オプションも出てきます。 -O (大文字)は-o www.py (URLの右端にあるファイル名)の省略形 </small></small> </div> - 各自の演習環境で、curlコマンドを利用し、次のPythonスクリプト(www.py)をダウンロードしてください - 実行するコマンド - 具体的には `curl -O http://api.fml.org/dist/www.py` - `-O`は「マイナス」「大文字のオー」(OscarのO) <small> ``` [コマンド] $ curl -O http://api.fml.org/dist/www.py [実行例] admin@user99:~$ curl -O http://api.fml.org/dist/www.py % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 2933 100 2933 0 0 3230 0 --:--:-- --:--:-- --:--:-- 3226 ``` </small> --- name: pause class: title, smokescreen, shelf, no-footer # <small><small>(アーカイブ動画で見ている人は)</small></small><br>一時停止して<br>手を動かしてみましょう <div class=footnote> <small><small> 困っている人は「手をあげる」かチャットで合図を! ブレイクアウトルームでTAさんが相談にのります </small></small> </div> --- class: compact # [例題] ホームページを作ろう(3): WWWサーバの起動 <div class=footnote> <small><small> (脚注) www.pyには、さまざまな仕込みが入っていて、 初回起動時には自動的に簡単なホームページ(コンテンツ)を作成します </small></small> </div> - WWWサーバを起動するには`sudo python3 www.py`コマンドを実行してください <small> ``` [コマンド] $ sudo python3 www.py [実行例] admin@user99:~$ sudo python3 www.py /home/admin/www.py:26: DeprecationWarning: 'cgi' is deprecated ... (<-警告文)略 ... (debug) serving at port 80 ``` - デバッグメッセージ`(debug) serving at port 80`が表示されれば無事に起動しています - これは 80/tcp (TCPポートの80番)で待ち受けを始めましたという意味です - この演習はTCPなどの知識編を飛ばしているので、ここでは、そういうものだと思ってください </small> --- name: pause class: title, smokescreen, shelf, no-footer # <small><small>(アーカイブ動画で見ている人は)</small></small><br>一時停止して<br>手を動かしてみましょう <div class=footnote> <small><small> 困っている人は「手をあげる」かチャットで合図を! ブレイクアウトルームでTAさんが相談にのります </small></small> </div> --- class: compact # [例題] ホームページを作ろう(4): 動作確認 <div class=footnote> <small><small> (脚注) 30年前の商用インターネット黎明期には、みんな、これだけで大喜びできたものです。 なにもかもみな懐かしい... </small></small> </div> ``` Welcome to my homepage ``` <small> - 各自、手元のPCのブラウザでURL(`http://学籍番号.cloud.fml.org/`)にアクセスしてください <br>上のように無事に表示されましたか? - URLの`ユーザ名`の部分を各自の学籍番号(例: b2902900)に差し替えてください <br> 例: b2902900 の人はURL(`http://b2902900.cloud.fml.org/`)にアクセス - [解説] - www.pyの初回起動時に /home/admin/htdocs/index.html というファイル(ホームページのコンテンツ)を自動作成します。 `Welcome to my homepage`というコンテンツは、このindex.htmlの中身です - 気になる人は、あとで、このファイルをエディタ等で開いて見てください </small> --- name: pause class: title, smokescreen, shelf, no-footer # <small><small>(アーカイブ動画で見ている人は)</small></small><br>一時停止して<br>手を動かしてみましょう <div class=footnote> <small><small> 困っている人は「手をあげる」かチャットで合図を! ブレイクアウトルームでTAさんが相談にのります </small></small> </div> <div class=www.py-homepage-end></div> --- name: exercises class: title, smokescreen, shelf, no-footer # 課題 --- class: compact # 課題(必須) - ホームページを編集し「Welcome to 学籍番号」としてください - 例: 学籍番号が b2902900 のひとは「Welcome to b2902900」です - エディタで index.html ファイルを編集します - エディタは好きなものでかまいません。 vi で良い人は vi をどうぞ。 ただ、vi は難しすぎるので、我々はWindowsのメモ帳風の nano をおすすめしています ``` [実行例] $ nano htdocs/index.html ``` --- class: compact # 課題(自由) - ホームページをもっとリッチなコンテンツにしてみましょう - やりかたはインターネットに聞いてください。星の数ほど教えてくれる人が見つかるでしょう