class: compact # <small>第10回おしながき</small> <div class=footnote> <small><small> </small></small> </div> <small> 1. おしらせ - ポータルのパスワード ... gecm - 学籍番号.cloud.fml.org のドメインを設定しました(-> Colitasが動くか確認?) - 口頭試問の解説は年末にでもやります or (時間がなかったら動画) - 今後のスケジュールと少し再編成した演習案 1. EL (確認テスト) 1. 今回のハイライト 1. 演習 </small> --- class: compact # <small>演習: クラウド編(12月)以降の案</small> <div class=footnote> <small><small> (脚注) いまのところの案、ですけど、たぶん合ってると思います </small></small> </div> <small> - 第10回 ... 簡易ショッピングカートの作成(復習)、Cookie - 第11回 ... キャッシュの利用 - 第12回 ... 1号機のwww.pyを2号機にコピー、どちらでも同じ動作であることを確認 - EC2をもう一台つくっておいてください(宿題) - ELBは動作見本だけデモします (ELBのドキュメントなら完備) - よいお年を！ - (第13回〜第14回 ... もくもく会) <br> (第14回は補講で枠が異なるので注意) - (第15回 ... 最終課題のプレゼン) </small> --- class: title, smokescreen, shelf, no-footer # ハイライト＆演習パート --- class: compact # <small>第10回のハイライト</small> <div class=footnote> <small><small> </small></small> </div> <small> </small> --- class: compact # <small>【復習】簡易ショッピングカート (HTMLの例)</small> <div class=footnote> <small><small> (脚注) いわゆるFORM文です。 わからない人は、春学期の復習をしてください -> <A HREF="https://lectures.fml.org/slides/skill-intro/janken/#html"> https://lectures.fml.org/slides/skill-intro/janken/ </A> </small></small> </div> <small> ``` <p>簡易ショッピングカート <FORM METHOD=POST ACTION="http://学籍番号.cloud.fml.org/api/lsform/v1"> <P>item01 = <INPUT TYPE="text" NAME="item01"> 個 <P>item02 = <INPUT TYPE="text" NAME="item02"> 個 <P>item03 = <INPUT TYPE="text" NAME="item03"> 個 <P> <INPUT TYPE="SUBMIT" VALUE="一時保存"> </FORM> ``` </small> --- class: compact,col-3 # <small>【復習】FORM文の動作例</small> <div class=footnote> <small><small> (脚注1) 簡易ショッピングカートです。 商品を追加・削除する機能はありません。 カート操作の充実は本題ではないので省略 <br> (脚注2) キーと値、いわゆるKEY-VALUEです。KEY-VALUE STOREという表現もありますね </small></small> </div> <small>  商品と数量を入れる欄を表示  値を入力し、送信(ここではbuy)  サーバが受け取ったキーと値を表示している様子 </small> --- name: www-cookie class: title, smokescreen, shelf, no-footer # WWW技術: Cookie --- class: compact # 復習: HTTPはステートレスプロトコル - ステートレスとは「すべてのHTTPが独立」という意味です - TCPのような<B>状態という概念が無い</B> - ブラウザで<B>クリックするたびに新しくHTTPの通信を行います</B> - たとえ同じページを見る場合でも直前のクリックと今のクリックは別あつかいです - <B>同じユーザが連続アクセスしていることすらWWWサーバでは判断できません</B> <small> - 同じIPアドレスから連続してきていても同じユーザとは限らないし... - 例: 大学からのHTTPは区別できません。WWWサーバは1000人を一緒くた </small> - これがHTTP本来の仕様です - <B>これではログイン(=状態)すら実現できない</B>し、ショッピングサイトが作れないので... <br> -> 対策として考え出されたのがCookieという仕組みです --- class: compact, img-right # ブラウザを特定したいときはcookieを使う  - ブラウザ追跡技術の代表例が<B>Cookie</B> - <B>ブラウザの標準仕様</B> - ブラウザの中に小さなファイル置き場(ストレージ)がある - <B>サーバがブラウザに一時的に与えるパスワード</B>と思って下さい <small> - 各サーバは、そこに小さな文字列を書きこめます。許可は不要で書きこめます - <B>ブラウザはサーバにアクセスする際、その文字列を送り返すという「お約束」</B>にしました - この文字列を追跡すればユーザの行動を追跡できるよね？ね？ </small> --- class: compact, img-right # cookieの理屈(1) <div class=footnote> <small><small> (脚注) 本物のCookie文字列の例: sidts-CjEBPVxjSh4Ju8uC4obz5zgRbn4iCtdnNViQjVB0bQ0Ne7MSPk1ZlKidHj5ZpihY-iQvEAA </small></small> </div>  - (a)ユーザがアクセスすると - (b)<B>WWWサーバからCookieが渡され</B>、 - (c)次回以降、ブラウザは、 そのサーバへアクセスする際に、 <B>そのCookie文字列をサーバへ送信</B>する <br> そういう<B>お約束(Protocol)</B>です --- class: compact, img-right # cookieの理屈(2) <div class=footnote> <small><small> (脚注1) 本物のCookie文字列の例: sidts-CjEBPVxjSh4Ju8uC4obz5zgRbn4iCtdnNViQjVB0bQ0Ne7MSPk1ZlKidHj5ZpihY-iQvEAA <br> (脚注2) ユーザを特定するには、Cookie以外の色々な情報を組み合わせないと無理ですが、やろうと思えば相当できるでしょう </small></small> </div>  - Coookie文字列をランダムに生成し - <B>ブラウザごとに異なるCookieを割当</B>ます - ブラウザから送り返されてくるCookieはブラウザごとに異なるので、 <B>どのブラウザからのアクセスかを特定</B>できます - ブラウザの特定 ≒ ユーザの特定 <small> - cookieだけで個人の特定は無理です - PCとスマートフォンで同じサイトを見たとしたら別人あつかいです - 逆に、つねにiPhoneでSafariを使うユーザは移動しようが(iphoneを)追跡されまくりです </small> --- class: compact,img-right # 例題: じゃんけんサーバにアクセスしてCookieを見てみる <div class=footnote> <small><small> (脚注) Google Chromeブラウザを使ってください or ブラウザのデバッグモードを呼び出してください </small></small> </div>  http://api.fml.org/janken-simple.html 1. 「じゃんけんぽん」をクリック 1. キーF12を押してChromeのデベロッパーツールを起動 1. URL直下の横並びメニューから「アプリケーション」を選択 1. 縦に現れるメニューの「Cookie」を選択 1. http://api.fml.orgをクリックするとcookieの値が読めます 1. リロードするとCookieの値も変わっていくことも確認してください <small> (このサーバは毎回ことなるCookieを与える仕様です) </small> --- class: compact # <small>課題: cookie を確認する</small> <div class=footnote> <small><small> (脚注1) 今回は授業のデモ用Web APIサーバで演習しますが、 次回以降は各自のEC2でWeb APIサーバ(www.py)を動かしてもらいます <br> (脚注2) 言われたとおり手を動かすと何かが動くのは今日までです。 次回以降はhtmlもwww.pyも変更していきます <br> (脚注3) よくわからないところとか、手抜き作業をしてると、来週から破綻します(予言) </small></small> </div> <small> 1. EC2に簡易ショッピングカートのHTML(cart.html)をダウンロードし ``` $ cd htdocs $ curl -O https://api.fml.org/dist/cart.html ``` 1. EC2でwww.pyを起動、 1. さらに、デベロッパーコンソールを起動してください 1. 上のcart.htmlにアクセスして、何か送信し、cookieが与えられる様子を確認しなさい <br> アクセス先は、次のようなURLです ``` http://学籍番号.cloud.fml.org/cart.html ``` - スクリーンショットをポータルのレポートボックスに提出してもらおうか </small> --- class: compact,center # <small></small> <div class=footnote> <small><small> </small></small> </div> 