name: exercises-unix class: title, smokescreen, shelf, no-footer # 第04回 Unix演習<br><small>メモリの様子を調べる</small> <div class=footnote> <small><small> </small></small> </div> --- class: compact, img-right # 例題: メモリの様子を調べる ![](../../images/top-U-admin-o-RES.png) <div class=footnote> <small><small> はい、みなさんも起動して! </small></small> </div> <small> - topコマンドを使い、EC2の様子を調べましょう - とりあえずtopコマンドを覚えておけば便利かな?と思って </small> --- class: compact, img-right # topコマンドの使い方 ![](../../images/top-U-admin-o-RES.png) <small> - topコマンドの便利なオプション - `-U ユーザ名`(大文字のユー;UniformのU)<br> ... 特定のユーザのプロセスのみを表示 <br> 例: ユーザadminのみのプロセスを表示するなら`-U admin` - `-o 欄`(小文字のオー;OscarのO)<br> ... ソートしたい欄の名前を指定 <br> 例: 実際のメモリ仕様量RESの大きな順に表示するには`-o RES` - 右図: EC2上でwww.pyを実行し <br> ``` top -U admin -o RES ``` <br> を実行した様子 </small> --- class: compact # 解説: topコマンド(上部)の読み方 <div class=footnote> <small><small> (脚注) 各項目の話は省略します。 OSの動作原理が分からないと理解できませんから </small></small> </div> <small> ``` op - 20:10:00 up 9:09, 3 users, load average: 1.30, 1.42, 1.63 Tasks: 262 total, 4 running, 258 sleeping, 0 stopped, 0 zombie %Cpu(s): 11.7 us, 2.8 sy, 0.0 ni, 78.4 id, 6.4 wa, 0.0 hi, 0.8 si, 0.0 st MiB Mem : 32059.7 total, 291.0 free, 2237.2 used, 29531.5 buff/cache MiB Swap: 16272.0 total, 16160.2 free, 111.8 used. 29027.8 avail Mem ``` - 上部にはシステムのサマリが表示されています。ここをみれば、大体の様子が分かります。便利 - メモリは下の2行分です - 特に<B>右下の「29027.8 avail Mem 」に注目</B>ですね。 これが<B>空いている物理メモリの総量</B>です。 - このサンプルは、けっこうハードに使っていた状態のスナップショットなのですが、 メモリの9割くらいが遊んでいることが分かります。 - 空行をはさんで7行め以降は各プロセスの様子です - おおむね出力項目はpsコマンドと同じなので解説は省略 </small> --- name: exercises-aws class: title, smokescreen, shelf, no-footer # 第04回 AWS演習<br><small>FORM文(値の入力)の復習</small> <div class=footnote> <small><small> </small></small> </div> --- class: compact,img-right # はじめに - 第04-05回: 簡易ショッピングサイトの作成 - <div class=footnote> <small><small> (脚注) 上の図は最終の必須課題の概念図です。 例によって自由課題は何でもOKなので、 出来る人はジャンジャンどうぞ </small></small> </div> ![](../../exercise/images/sysbuild-plan-minimum.png) <small> - 最終課題(右図)へ向けて部品を作っていきます - 第04-05回はHTML(FORM文)の復習 - HTMLを書くだけです - www.pyの変更は不要。 www.py側(のFORM文の受け側)は作りこんであります - <B>このHTMLは最終課題(必須)でも使います</B> </small> --- class: compact,col-2 # 課題(必須): 簡易ショッピングサイトのHTMLを作成する <div class=footnote> <small><small> (脚注) ヒント: とりあえずFORM文の属性を8個書けば動きます。見ばえは、ともかく... </small></small> </div> - 右図のようなカートを作って下さい - htdocs/index.htmlを編集し - 3個の入力欄があるカートを作成 - item01 item02 item03 の3商品の欄 - FORMのACTIONで指定するCGIサーバは <br> `http://www1.学籍番号.cloud.fml.org/api/lsform/v1` <br> <small> - lsformの先頭文字は<b>limaのl、数字ではない</b> - 注: 「学籍番号」の部分は各自で異なる - 注: `/api/lsform/v1`(API)はwww.pyに実装済なので、<B>そのままwww.pyを使って下さい。</B> つまりwww.pyの変更は不要/仕込み済 </small> ![](../images/cart.png) --- class: compact, img-right # 動作確認 <div class=footnote> <small><small> (脚注) でも、とりあえず、ジャンケンでHTMLの練習から始めましょうかね〜 </small></small> </div> ![](../images/cart-submit.png) ![](../images/cart-result.png) <small> 1. EC2でwww.pyを起動し 1. カートに適当な個数を入れ(右図(上)) 1. 「一時保存」をクリックすると 1. CGIサーバは受け取ったアイテムと個数(KEY,VALUE)の組をHTML形式で返す 1. 右図(下)のような「おうむ返し」の出力が表示されればOK </small> --- class: compact # 課題(自由) <div class=footnote> <small><small> </small></small> </div> 1. ホームページにISBN検索の機能を追加しなさい - 直接ISBN検索のAPIを呼んでよい <br> (www.pyを改造する課題ではない) - 詳しくは https://openbd.jp/ を参照 1. 世の中には、さまざまなウエブAPIが公開されている。 そのうちのどれかを使う機能をホームページに追加してみなさい。 APIの一覧は、たとえば以下のとおり - https://qiita.com/hamaup/items/cd7212aa1d0b1f0e37de - https://github.com/lectures-fmlorg/os-2022/issues/4 <br> (2022年度のOSの授業より) 1. 文法的に正しいHTML5のホームページにしなさい <small> - 見栄えは頑張らないでいいから(<- 見栄えを評価できる人がいないから頑張られても困る) - 以下の文法チェッカをパスすることを示せ <br> https://validator.w3.org/ </small> <!-- section-begin unix.edit.index.html --> --- name: www.html.form.janken-api-v2 class: title, smokescreen, shelf, no-footer # Unix上でのファイル編集<br><small>- index.htmlを編集する -</small> <div class=footnote> <small><small> </small></small> </div> --- class: compact # 手順の詳細 1. いまどこにいるか?を確認する 1. ファイルがあることを確認する 1. エディタでファイルを編集する --- class: compact # いまどこにいるか?を確認する - pwd - <small> - あなたがいる場所は`/home/admin`です - `/`は区切り文字、箱の境界線が`/` - `/home`という箱の中に、さらに`/admin`という箱があり、あなたは、その中にいて作業をしています - この箱のなかにいる状態を、全部つなげて「`/home/admin`にいる」と呼んでいます - EC2にSSHでログインした場所で作業をします。そういう想定で、このマニュアルは書かれています - そういうわけで`/home/admin`にいるはずなのですが、不安な場合は? - 実はプロンプトに`admin@IPアドレス:~/htdocs$`のように今どこにいるか?が表示されています <br> ちなみに`~`はホームディレクトリつまり`/home/admin`の別名です(UNIXの慣習) - `pwd`コマンドを使うと「今どこにいるか?」を確認できます - てっとりばやいのは<B>`cd`コマンドを実行して`/home/admin`に戻ることです</B> ``` admin@ip-172-31-83-21:~/htdocs$ pwd /home/admin/htdocs admin@ip-172-31-83-21:~/htdocs$ cd admin@ip-172-31-83-21:~$ pwd /home/admin admin@ip-172-31-83-21:~$ ``` </small> --- class: compact # ファイルがあることを確認する - ls - <small> - ls (list の頭文字)で、その場所のなかにあるファイルやディレクトリ一覧が表示されます - 「引数で指定する箱の中身を見せろ」という命令ですね - もっと詳しい見方は第7回にやります ``` admin@ip-172-31-83-21:~$ ls htdocs index.html admin@ip-172-31-83-21:~$ ``` </small> --- class: compact,img-right # エディタでファイルを編集する ![height320px](../images/nano.png) <small> - エディタでファイルを開いて編集してください - viですかね、とりあえず <br> (viは色々不思議なエディタなので、無理にviを使わなくてもいいと思うんですけど...) - Windowsのメモ帳のような普通の使い勝手の nano エディタとか使えばいいのに(右図) - Ctrl + s で「保存」 - Ctrl + x で「終了」 ``` admin@ip-172-31-83-21:~$ vi htdocs/index.html admin@ip-172-31-83-21:~$ admin@ip-172-31-83-21:~$ nano htdocs/index.html admin@ip-172-31-83-21:~$ ``` - コマンドの引数には箱とファイルの列を指定できます </small> --- class: compact # <small>移動したい派は移動して作業しても同じです、好きな方でどうぞ!</small> <small> - cdコマンドで移動して作業しても同じです。じつのところ作業方法の正解は複数あります - スマートフォン世代はアプリが横に並んでいるだけの平坦な世界に生きているから箱が嫌いなの? - 次のように作業しても同じです。好きな方でやってください ``` admin@ip-172-31-83-21:~$ cd htdocs/ admin@ip-172-31-83-21:~/htdocs$ ls index.html admin@ip-172-31-83-21:~/htdocs$ vi index.html admin@ip-172-31-83-21:~/htdocs$ cd admin@ip-172-31-83-21:~$ pwd /home/admin admin@ip-172-31-83-21:~$ ``` </small> <!-- section-end unix.edit.index.html --> <!-- section-begin www.html.form.janken-api-v2 --> --- name: www.html.form.janken-api-v2 class: title, smokescreen, shelf, no-footer # <small>じゃんけんAPIを呼ぶHTML FORM文を書く</small> <div class=footnote> <small><small> </small></small> </div> --- class: compact # 例題: じゃんけんAPIを呼ぶHTML FORM文 <div class=footnote> <small><small> 備考 <br> HTML内の空白は無視されます。 読みやすいように空白を入れているだけで深い意味はありません </small></small> </div> ``` <FORM METHOD=POST ACTION=http://api.fml.org/api/janken/v2> <INPUT TYPE=TEXT NAME=jibun> <INPUT TYPE=submit VALUE=jankenpon> </FORM> ``` 1. 上のHTMLをindex.html (/home/admin/htdocs/index.html)に追加してください <small> <br> 【実行例】 ブラウザには、次のような入力欄とクリックするボタンが現れるはずです ![](../images/www-html-form-janken-api-v2.png) </small> 1. 自分のサーバ`http://www1.学籍番号.cloud.fml.org/`でジャンケンができることを確認して下さい <small> - 0か1か2(ぐ〜、ちょき、ぱ〜)を入れ、jankenponをクリックすると、 <br> `jibun = 1, aite = 0, kekka = 1`などと結果が表示されるはずです </small> --- class: compact, col-2 # [HTMLの解説] 総論 <small>- 細かいことは知らなくても動くからOK -</small> <div class=footnote> <small><small> (脚注) HTML原理主義者(?)に怒られますけど、インフラ屋さんはサーバの動作確認をしたいだけなので最低限わかればOK。 <br> ウエブデザイナになりたい人は真面目にHTML5を勉強してください:-) </small></small> </div> <small><small> ``` <HTML> <HEAD> <TITLE>ブラウザの上に表示されるタイトル</TITLE> </HEAD> <BODY> <P>新しい段落(paragraph)を始める時はP。 この辺に書いた文章は適当に折り返される <br>改行を意味するbrもある 空白、空行、インデントすべて無視される </BODY> </HTML> ``` </small></small> <small> - タグ`<TAG>`でWWWブラウザの表示を制御する指示が書けます (汎用プログラミング言語ではないが、プログラム=WWWブラウザに指示を与えるという意味で一種のプログラミング言語) - 右例は古代のHTMLです。v1.0とかv2.0とか? <br> (ダサいといわれますが)ホームページの作成では、これくらい知っていれば十分です - ブラウザは適当に補正してくれます。 <b>タグを全然しらなくてもOK</b>。 ただ<B>読みにくいので、 `<p>`か`<br>`くらいは使ってほしい</B> - タグ外の文字は全部表示されます - レイアウトはブラウザにおまかせになります </small> --- class: compact # [HTMLの解説] FORM文の例 <small> ``` <BODY> <FORM METHOD=POST ACTION=http://api.fml.org/api/janken/v2> <INPUT TYPE=TEXT NAME=jibun> <INPUT TYPE=submit VALUE=jankenpon> </FORM> </BODY> ``` </small> <small> - FORM文はBODYブロックのなかに書きます。BODYタグは無くても大丈夫です - `<FORM>`から`</FORM>`までが一つのFORM文(のブロック)です </small> --- class: compact # [HTMLの解説] FORM文(1): 外枠 <small> ``` <FORM METHOD=POST ACTION=http://api.fml.org/api/janken/v2> ... 後で説明 ... </FORM> ``` </small> <small> - `<FORM ...>`部分の説明です - FORMタグの中に書く指示は属性と呼びます。一種のオプションですね - HTTPにも動作の種類の指定があります。 - `METHOD`で、その種類を指定します。FORM文では、たいていPOSTを指定します - `ACTION`はサーバのURLです。指定されたものを書いてください - www.pyの場合は、 `http://www1.学籍番号.cloud.fml.org/api/lsform/v1`などとなります。 - メソッドを自作した場合、サーバ名の右側の部分も当然ことなるでしょう。 `do_POST()`に書いたコードと合わせることになります (各自、理解して書いてください) </small> --- class: compact # [HTMLの解説] FORM文(2): 入力欄 ``` <INPUT TYPE=TEXT NAME=jibun> ``` ![](../images/www-html-form-janken-api-v2.png) <small> - このINPUT文が上図(左)の入力欄を作ってくれます - `NAME`部分が入力した値をいれる変数名の指定になると考えて下さい - ちなみに、 ``` <INPUT TYPE=TEXT NAME=jibun VALUE=0> ``` と書くと初期値として0が入った入力欄になります </small> --- class: compact # [HTMLの解説] FORM文(3): 送信ボタン ``` <INPUT TYPE=submit VALUE=jankenpon> ``` ![](../images/www-html-form-janken-api-v2.png) <small> - このINPUT文が上図(右)のクリックするボタンを作ってくれます。いわゆる送信ボタンです - ボタンの名前は`VALUE`で指定できます </small> --- class: compact # FORM文 今回のまとめ <small> ``` <FORM METHOD=POST ACTION=CGIサーバのURL> <!-- この<!--印ではじまるブロックはコメント --> <!-- item01 〜 item03 の入力欄と送信ボタンを作る --> <P><INPUT 属性1 属性2> </FORM> ``` | タグ名 | 属性 | 例 | 説明 | 備考 | |-------- |--------- |---------------------------------- |---------------------------------- |------------------------------------ | | FORM | | | | | | | ACTION | http://www1.学籍番号.cloud.fml.org/api/lsform/v1 | URI | | | | METHOD | METHOD=POST | メソッドの指定 | HTTPの細かな動作モードの指定 | | INPUT | | | | | | | TYPE | TYPE=submit | 送信ボタン | | | | TYPE | TYPE=text | 文字列の入力欄 | | | | NAME | NAME=item01 | 変数名 | 変数名と考えておいてOK | | | VALUE | VALUE=送信 | デフォルト値 or ラベル | 「送信」ボタン | | P | | | 段落のはじまり | 改行もする | </small> <!-- section-end www.html.form.janken-api-v2 -->