Slide 1
Slide 1 text
Webアプリケーション概要 2021
Yakumoチーム, Slash/CyDE-Cチーム
⾚井駿平
Slide 2
Slide 2 text
Introduction
▌Webアプリを作るのに必要な基礎知識を話します
l 割りと雑多な知識
l 必要になった時にキーワードを思い出して⾃分で調べられ
るように
Slide 3
Slide 3 text
whoami
▌⾚井 駿平
l 2013年⼊社
l Yakumoチーム, Slash/CyDE-Cチーム 所属
lAWSやミドルウェアからwebフロントエンドまで⾊々担当
Slide 4
Slide 4 text
Webアプリケーションとはなんぞや
▌Webブラウザをインターフェースとして⼊出⼒するアプリ
ケーション
l 通信はHTTP、表⽰はHTML, CSS
▌実際のアプリはサーバーにある
▌≠ネイティブアプリ、デスクトップアプリ
l 内部的にはWebアプリが提供するAPIを叩いている場合も
▌サイボウズが作っている製品はほとんどがWebアプリ
Slide 5
Slide 5 text
Webサーバーは何をする?
Slide 6
Slide 6 text
Webサーバー
▌HTTPを処理するサーバー
l クライアントからリクエ
ストを受け付けて
l 所望の結果を返す
▌Apache, IIS, nginx...
request:
index.htmlください
response:
index.html どうぞ!
Slide 7
Slide 7 text
Webサーバーがやること
▌リクエストを受け付ける
▌結果を(読み込む|計算する)
▌結果を送り返す
▌通信と計算のセット
l ⼊⼒+計算+出⼒ = プログラムの本質
l 通信をプログラムでどう⾏うか → Socket
Slide 8
Slide 8 text
Socket
▌サーバーとクライアントで通信するためのAPI
l 主にTCP, UDP を使う
l 同じマシン同⼠で通信しても、別のマシンと通信してもよ
い
Slide 9
Slide 9 text
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);
Slide 10
Slide 10 text
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);
Slide 11
Slide 11 text
複数のリクエストが来たら
▌サーバーが1つのリクエストを処理している時に別のリクエス
トが来る
l 前のページのコードだとどうなる?
Slide 12
Slide 12 text
同時に複数のリクエストを捌く
▌リクエストの待受とリクエストの処理を同時に⾏えると良い
l acceptが返ったら処理を開始
l 処理の結果を待たずに、すぐにacceptに戻る
▌プロセスやスレッドを使う
while(1) {
int fd = accept(sock, NULL, NULL);
処理開始(fd); //すぐに返ってくる
}
Slide 13
Slide 13 text
プロセス
▌プログラムの実⾏の単位
l コマンドやアプリを起動するとプロセスが⽴ち上がる
l 別のプロセスのメモリにはアクセスできない
l 異なるプロセスは並列に動くことができる
▌Webサーバーでは
l リクエストを受付
l 処理プロセスを起動してソケットを引き継ぐ
Slide 14
Slide 14 text
スレッド
▌1つのプロセスの中の処理の単位
l プロセスより軽い
l 並列に実⾏可能
l 同じプロセスの別のスレッドのメモリにアクセスできる
▌Webサーバーでは
l リクエストを受付
l 処理スレッドを起動して処理をする
Slide 15
Slide 15 text
▌Socketとプロセス/スレッドを使えば、webサーバーのような
ものを作れる
l 接続数が⾮常に多くなると? (C10K問題) → ⾮同期I/Oなど
を調べてみよう
Slide 16
Slide 16 text
Webアプリケーション
Slide 17
Slide 17 text
動的なWebページ
▌Webは静的なページを返すだけじゃない
l Input-Process-Output (= プログラム)
l“Process” で任意のプログラムを実⾏して結果を返す
l サイボウズOfficeもGaroonもkintoneもメールワイズもこの
タイプ
▌処理の仕⽅はいろいろある
Slide 18
Slide 18 text
CGI: Common Gateway Interface
▌Webサーバーとプログラムがやりとりするためのインターフェース
l リクエストが来るたびにアプリのプロセスを起動する
l リクエストの内容は、環境変数や標準⼊⼒で渡される
l 結果は標準出⼒で返す
▌昔はこのやり⽅が主流
l Perlの時代
l 毎回プロセスを起動するので遅い
l サイボウズ Office / メールワイズは今でもこれ
request
response
program
stdin/env
stdout
Slide 19
Slide 19 text
Webアプリケーションサーバー
▌Webアプリケーションを実⾏するサーバー
l CGIと異なり、通常起動しっぱなし
l Webサーバーがアプリケーションサーバーにリクエストを
中継する
l主にHTTPでやりとり
l アプリケーションサーバーとアプリの間
l特定のメソッドを呼んだりしてやりとり
request
response
App
server
request
response
App
Slide 20
Slide 20 text
永続化/データベース
▌Webアプリを作るとデータを保存したくなる
l プログラムやマシンが終了してもデータが残る
l cf. memcached
▌⾊々なやり⽅
l 素朴にファイルに保存
l ⾃分で競合、不整合などを回避するのは⼤変
l ⼤規模だと⼤変になる
l サイボウズOffice…
l データベース管理システム(DBMS)
l 難しいことの⾯倒を⾒てくれる
Slide 21
Slide 21 text
データベース管理システム(DBMS)
▌RDBMS / SQL
l 「関係モデル」というものを扱うデータベース
l SQLという⾔語で操作する
l 後⽇詳しくやります
▌NoSQL
l SQLへ対抗して出てきたデータベース(⼤抵速いがトレードオフ有り)
l キーバリューストア(KVS)
l キーとバリューのペアの形式だけ保存
l ドキュメント指向データベース
l 柔軟な構造のデータを保存
Slide 22
Slide 22 text
ログイン
▌Webアプリにはほぼ必須な機能
l ユーザー毎にデータを保存/ユーザーを特定
l ログインした後、別のページから戻ってきてもログインさ
れたまま
l どう実現する?
Slide 23
Slide 23 text
Cookie (RFC 6265)
▌サーバー側からクライアントにデータを保存される仕組み
l サーバー:「Set-Cookie: <キー>=<値> 」というヘッダー
を載せてレスポンスを返す
lクライアントはそのペアを保存する
l クライアントはリクエストに「Cookie: <キー>=<値>」
を載せる
lSet-Cookieを返してきたドメインにだけ送る
▌HTTPが状態を持つことができる Set-Cookie: login=true
Cookie: login=true
Slide 24
Slide 24 text
セッション
▌⼀連のアクセスでデータを保持する仕組み
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
…
Slide 25
Slide 25 text
パスワードの保存
▌ログインできるWebアプリを作る場合ユーザー登録が必要
l 多くの場合、ユーザー名とパスワードを登録させる
l パスワードをデータベースに保存していい?
l 情報流出したら?
Slide 26
Slide 26 text
パスワードのハッシュ化
▌パスワードはハッシュ関数を通したハッシュ値を保存する
l ログイン時は⼊⼒されたパスワードのハッシュ値を取り、保存
されているハッシュ値と⽐較
l ⼀致すればOK
▌ハッシュ関数
l 任意の⻑さのバイト列から固定⻑のバイト列を出⼒
l 出⼒から⼊⼒の値の推測が難しい
l SHA-2, SHA-1, MD5 など
l より安全に: salt, HMAC... SHA-1の例
'password' → 5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8
'123456' → 7c4a8d09ca3762af61e59520943dc26494f8941b
Slide 27
Slide 27 text
HTTPS
▌HTTPは通信内容が丸⾒え
l パスワードを送ったら?セッションID⾒られたら?
▌HTTPをTLSで暗号化して通信する→HTTPS
l 内容を⾒られない。改ざんされない。なりすまされない。
l cybozu.comは必ずHTTPSを使う
l 現代では必須 (商⽤なら)
Slide 28
Slide 28 text
HTTPSは事実上必須
▌公的/商業的なサイトで新しく作るならhttpのみはあり得ない
l ブラウザに怒られる
l 古いサイトではhttpがまだまだ残っている
http://abehiroshi.la.coocan.jp
Slide 29
Slide 29 text
QUALYS SSL LABS
cybozu.comはA+評価
Slide 30
Slide 30 text
Webアプリケーションフレームワーク
▌Webアプリを作るのに便利な機能が詰まったライブラリ
l HTTPの処理、Cookie、データベースへのアクセス、テンプ
レートエンジン などなど
l 現代でWebアプリを新たに作るなら、何らかのフレーム
ワークを使うことになる
▌Ruby on Rails, Spring Framework, Django などが有名所
l 死んでいったフレームワーク達も数知れず
l 独⾃のフレームワークが⽣み出されることも…
Slide 31
Slide 31 text
フロントエンド
Slide 33
Slide 33 text
テンプレートエンジン
▌HTMLの中にデータを埋めたり、プログラム的に表⽰を変える
仕組み
l JSP, Freemarker, PHP, Smarty, eRuby, …
▌動的にHTMLを組み⽴てるためのツール
こんにちは! ${user.name}さん。
<#if user.isAdmin >
あなたは管理者です。
#if>
+ user.name = “⾚井”
user.isAdmin = false
こんにちは! ⾚井さん。
Slide 34
Slide 34 text
CSS
▌HTMLの⽂書の⾒た⽬を決めるための仕組み
l ⽂字の⼤きさ、⾊、背景、…。
▌意味と⾒た⽬を分離する
l HTMLには⾒た⽬を書かない
▌地道に調整しないといけないので、⼤変な世界…
Slide 35
Slide 35 text
JavaScript
▌現代のWebアプリはサーバー側だけでは完結しない
l JavaScriptをブラウザで動かしてダイナミックな動作をする
l DOM操作
lJavaScriptを使って、画⾯を書き換える。
l Ajax/XHR
lJavaScriptからHTTP通信を⾏う。画⾯遷移せずに⾊々なアクションを⾏える。
l フレームワーク:
lJavaScriptにもフレームワークがたくさん
lReact, Vue, Closure Libarary, etc.
Slide 36
Slide 36 text
Web API
▌Webアプリケーションの処理をネットワーク越しに呼び出す
l HTMLではなくデータ(JSON, XML等)を返す
l サーバー内のデータを更新する
l JavaScriptから呼ぶ
▌例えば、kintoneはHTMLの⽣成は最低限
l ほとんどAPIを呼び出している
▌サーバーとクライアントの分離が出来てシンプルになる傾向
Slide 37
Slide 37 text
▌Webアプリケーションはここで説明しなかったものも含め、
たくさんの要素が組み合わさって出来ている
l この講義は取っ掛かり。
l 随時知っていきましょう
Slide 38
Slide 38 text
使⽤した画像のライセンス
Slide 39
Slide 39 text
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