Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webアプリケーション概要 2021 / Web Application Overview 2021

Cybozu
April 26, 2021

Webアプリケーション概要 2021 / Web Application Overview 2021

Cybozu

April 26, 2021
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

  1. Socket: クライアント側 ▌やること l 初期化 socket() l サーバーと接続 connect() l

    送信 write() / 受信 read() l 終了 close() int sock = socket(AF_INET, SOCK_STREAM, 0); connect(sock, アドレス, len); write(sock, buf, buflen); read(sock, buf, buflen); close(sock);
  2. Socket: サーバー側 ▌やること l socket() l アドレスを設定 bind() l リクエスト受付

    listen() l リクエストを確⽴ accept() l read()/write() l close() int sock = socket(AF_INET, SOCK_STREAM, 0); bind(sock, アドレス, len); listen(sock, 128); while(1) { int fd = accept(sock, NULL, NULL); write(fd, buf, buflen); read(fd, buf, buflen); close(fd); } close(sock);
  3. CGI: Common Gateway Interface ▌Webサーバーとプログラムがやりとりするためのインターフェース l リクエストが来るたびにアプリのプロセスを起動する l リクエストの内容は、環境変数や標準⼊⼒で渡される l

    結果は標準出⼒で返す ▌昔はこのやり⽅が主流 l Perlの時代 l 毎回プロセスを起動するので遅い l サイボウズ Office / メールワイズは今でもこれ request response program stdin/env stdout
  4. 永続化/データベース ▌Webアプリを作るとデータを保存したくなる l プログラムやマシンが終了してもデータが残る l cf. memcached ▌⾊々なやり⽅ l 素朴にファイルに保存

    l ⾃分で競合、不整合などを回避するのは⼤変 l ⼤規模だと⼤変になる l サイボウズOffice… l データベース管理システム(DBMS) l 難しいことの⾯倒を⾒てくれる
  5. データベース管理システム(DBMS) ▌RDBMS / SQL l 「関係モデル」というものを扱うデータベース l SQLという⾔語で操作する l 後⽇詳しくやります

    ▌NoSQL l SQLへ対抗して出てきたデータベース(⼤抵速いがトレードオフ有り) l キーバリューストア(KVS) l キーとバリューのペアの形式だけ保存 l ドキュメント指向データベース l 柔軟な構造のデータを保存
  6. Cookie (RFC 6265) ▌サーバー側からクライアントにデータを保存される仕組み l サーバー:「Set-Cookie: <キー>=<値> 」というヘッダー を載せてレスポンスを返す lクライアントはそのペアを保存する

    l クライアントはリクエストに「Cookie: <キー>=<値>」 を載せる lSet-Cookieを返してきたドメインにだけ送る ▌HTTPが状態を持つことができる Set-Cookie: login=true Cookie: login=true
  7. セッション ▌⼀連のアクセスでデータを保持する仕組み l Cookieじゃセキュリティ的に… l パスワードを毎回送る? 勝⼿に書き換えられたら? l データ量に限界 ▌セッション開始時(ログイン時に)ランダムな

    IDを発⾏ l それをCookieに保持する l データはIDをキーにサーバー側に保存する Set-Cookie: lD=42 Cookie: ID=42 42, user = aono 42, loginTime= 10:12 104, user=akai …
  8. HTML ▌⽂書に構造や意味を与えるための⾔語 l ⾒出し、段落、他の⽂書へのリンク、… l <h1></h1>, <p></p>, <a href=”https://〜”></a>, …

    ▌それぞれのタグがどういう意味を持つからルールで決まっている l https://www.w3.org/TR/html5/ l 正しい使い⽅をする→機械が読める→スクリーンリーダが読め る→アクセシブル ▌講義では詳しくはやらないので、⾃分で調べてね
  9. テンプレートエンジン ▌HTMLの中にデータを埋めたり、プログラム的に表⽰を変える 仕組み l JSP, Freemarker, PHP, Smarty, eRuby, …

    ▌動的にHTMLを組み⽴てるためのツール <div> こんにちは! ${user.name}さん。 <#if user.isAdmin > あなたは管理者です。 </#if> </div> + user.name = “⾚井” user.isAdmin = false <div> こんにちは! ⾚井さん。 </div>
  10. Web API ▌Webアプリケーションの処理をネットワーク越しに呼び出す l HTMLではなくデータ(JSON, XML等)を返す l サーバー内のデータを更新する l JavaScriptから呼ぶ

    ▌例えば、kintoneはHTMLの⽣成は最低限 l ほとんどAPIを呼び出している ▌サーバーとクライアントの分離が出来てシンプルになる傾向
  11. By RRZEicons [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons https://commons.wikimedia.org/wiki/File%3AServer-multiple.svg

    By Sir Stig (Own work (Transfered by Mono)) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons https://commons.wikimedia.org/wiki/File%3AAluminium_MacBook.png