CloudSpiral 2014年度 Webアプリ講義（2日目）

Cloud Specialist Program Initiative for Reality-based Advanced Learning
分野・地域を越えた実践的情報教育協働ネットワーク
Webアプリ
クライアントサイド講義（2日目）
神戸大学
まつ本真佑
佐伯幸郎

© Cloud Spiral partners 2014/9/3,4 2
講義の位置付け
Java
サーバサイド
Ruby
PHPREST
API
DWR
Java
Jersey
Java
REST
API
T4J
Rails
REST
API
REST
API
HTML5
API
REST
API
REST
API
REST
APIJS
jQuery
HTML
CSS
http://
{json}
<xml>
独自
API
独自
API
program
API
data
library
REST framework
クライアントサイド
外部サービス自開発サービス

 SVNコミットしてください
 bigdata, webapp 両方
 模範解答設置しました
 http://192.168.100.10/svn/share/bigdata_ans
 http://192.168.100.10/svn/share/webapp_ans
 Alpacaサーバサイドのソースコード
 http://192.168.100.10/svn/share/Alpaca
お知らせ

 10分で分かる.*
10分で分かるJavaScript
10分で分かるjQuery
 各種API
REST API 演
HTML5 API 演
Google Maps API 演
 総合演習
alpaca+ 演
公開サーバへのデプロイ演
 アーキテクチャ設計
 pre-PBL

Webアプリを1から作れるようになる
• 要求～設計（UML講義）
• Java・DB・テスト（前期Spiral）
• サーバサイドのRESTサービス化（小出先生）
• クライアントサイドでのAPI呼び出し・UI構築
• クラウド環境への開発アプリのデプロイ
GOAL 1/2
By Maurizio D'Arrigo (https://www.flickr.com/photos/keylosa/184606430)

 Wikipediaより
 キーワード：
非同期通信とインターフェイスの構築
 論より証拠，次ページへ
（余談） Ajaxって何？
余
ウェブブラウザ内で非同期通信とインターフェイスの構築などを
行う技術の総称。通信結果に応じてダイナミックHTMLで動的に
ページの一部を書き換えるというアプローチを取る。
http://ja.wikipedia.org/wiki/Ajax

 サンプル
 http://localhost:50080/webapp/example/ajax.html
Ajaxによる非同期通信
<body>
<textarea></textarea><br>
<img src="image/alpaca-half.png">
<script src="js/jquery-2.1.1.min.js"></script>
<script>
// 処理に時間のかかる重たいAPI（仮）を呼び出す
$.ajax({
url : 'http://192.168.100.10:8080/lama/api/heavy',
async : true, // 非同期にするかどうか（デフォルトではtrue）
});
</script>
</body>
余

 サンプル
 http://localhost:50080/webapp/example/ajax.html
Ajaxによる非同期通信
<body>
<textarea></textarea><br>
<img src="image/alpaca-half.png">
<script src="js/jquery-2.1.1.min.js"></script>
<script>
// 処理に時間のかかる重たいAPI（仮）を呼び出す
$.ajax({
url : 'http://192.168.100.10:8080/lama/api/heavy',
async : true, // 非同期にするかどうか（デフォルトではtrue）
});
</script>
</body> ブラウザの挙動とは非同期にサーバ通信可能
＝ブラウザが固まらない
余

 サンプル
 https://twitter.com/signup
Ajaxによるインタフェースの構築
余
画面遷移なしにサーバと通信できる
＝動的なWebアプリが作れる

 Wikipediaより
 非同期通信
 ブラウザの挙動とは非同期にサーバ通信可能
 インターフェイスの構築
 画面遷移なしにサーバと通信できる
Ajaxまとめ
余
ウェブブラウザ内で非同期通信とインターフェイスの構築などを
行う技術の総称。通信結果に応じてダイナミックHTMLで動的に
ページの一部を書き換えるというアプローチを取る。
http://ja.wikipedia.org/wiki/Ajax
リアルタイム & インタラクティブなWebアプリが可能

 1．サーバセットアップ
• Webサーバの立ち上げ（AWSチュートリアルと同等）
• SSH接続
• Tomcat/MongoDBのインストール
 2．開発アプリの修正
• サーバサイドのソースコードを取得
• クライアントサイドのソースコードをマージ
• ビルド
 3．サーバへのデプロイ
• ビルド結果を転送
• Tomcat起動
• ブラウザで確認
公開サーバへのデプロイの流れ

• SSH接続
• ビルド
• Tomcat起動
ADSLの
限界への挑戦

• SSH接続
• ビルド
• Tomcat起動

1．サーバセットアップ

DNS名をメモ

 SSH接続
 Rlogin起動（C:¥pbl¥rlogin_x64¥RLogin.exe）
 SFTPできるSSHクライアント
C:¥pbl¥ssh_key¥
CloudSpiral_Key.pem
★合宿後追記

 SSH接続

 Tomcat/MongoDBのインストール
 SSH （RLogin上）で操作
 コマンドはこちら参照
 http://192.168.100.10/docs/2014/0903_webapp/ec2_setup.txt

• SSH接続
• ビルド
• Tomcat起動

 Eclipse上でサーバサイドのコードをチェックアウト
 http://192.168.100.10/svn/share/Alpaca
 WebContentフォルダに
開発したクライアントの
ソースコードをコピペ
 コピペ後のフォルダ構成
2．開発アプリの修正

 API呼び出しのエンドポイントを書き換える
• 修正前）絶対パス指定による合宿サーバAPIの呼び出し
• 修正後）相対パス指定によるEC2サーバ自身のAPI呼び出し
var endpoint = 'api';
だけでよい

 ビルドする（クライアント & サーバをひとまとめに）

• SSH接続
• ビルド
• Tomcat起動

 RLoginからファイル転送
3．サーバへのデプロイ
C:¥pbl¥workspace¥Alpaca¥
Drag&Drop
/tmp/ （★合宿後追記）

 転送したwarを/tmpから移動
$ cd /var/lib/tomcat7/webapps/
$ sudo mv /tmp/alpaca.war .
 Tomcat起動
$ sudo service tomcat7 start
 ブラウザから確認
 http://ec2-...com:8080/alpaca/alpaca+.html
3．サーバへのデプロイ
★合宿後追記

 アーキテクチャ設計の感覚を身につけよう
 クライアント/サーバどちらからでもAPIは利用できる
 クライアント/サーバのどちらにどの機能を実装するかが重要
Webアプリのアーキテクチャ
JavaJS
jQuery
サーバサイドクライアントサイド
REST
API
外部サービス自開発サービス

 題材：「ダウｗｗｗ」
 SNSの総ｗ数と日経平均株価の推移を比較するWebアプリ
 マッシュアップアプリ
 利用するAPI
• 各種SNSのAPI + Yahoo Finance API + Google Chart API
考える題材Webアプリ
ダウ
ｗｗｗ

極端な例：クライアントサイドマッシュアップ
API API APIhttpd
HTML JS
外部サービスクライアントダウｗｗｗサーバ
http://dauwww.com/
1.投稿の取得
2.ｗカウント
3.ダウの取得
4.グラフの生成
5.HTML更新

極端な例：サーバサイドマッシュアップ & CGI風
API API APIhttpd Java
1.投稿の取得
2.ｗカウント
3.ダウの取得
6.HTML設置
5.HTML生成
http://dauwww.com/

MVC風アーキテクチャ
API API APIhttpd Java
1.投稿の取得
2.ｗカウント
3.ダウの取得
http://dauwww.com/
JS
6.HTML更新
API
4.マッシュアップ済みデータの取得（REST API）
HTML

 MVCが一つの基準（理屈）
 サーバ：機能やデータをREST APIの形で提供する
（+HTMLとJSを提供する）
 クライアント：ユーザインタフェースを提供する
 ただし・・・（現実）
 アプリの要求に強く依存
• リアルタイム系かバッチ系か？
• キャッシュ/DBを使うか？
• 利用者の数はどの程度か？
• クライアントで全てUI制御して良いか？
• 負荷の問題はないか？
どうアーキテクチャを決めるか？

 以前のアーキテクチャ（MVC風）
 サーバサイドはREST APIサーバに徹底
 クライアントサイドでAPIの結果をレンダリング
 問題点
 最初のタイムラインの表示に時間がかかっていた
• JSでのレンダリングが重い
• 特にモバイル環境で性能上の問題
 対処：新旧折衷案
 タイムラインの初期ページはサーバ側で埋め込んでおく（CGI風）
 続きのページはJSで非同期に読み込む（API風）
Twitterのアーキテクチャ見直し事例*
* "Improving performance on twitter.com", https://blog.twitter.com/2012/improving-performance-on-twittercom

Webアプリを1から作れるようになる
• 要求～設計（UML講義）
• Java・DB・テスト（前期Spiral）
• サーバサイドのRESTサービス化（小出先生）
• クライアントサイドでのAPI呼び出し・UI構築
• クラウド環境への開発アプリのデプロイ
GOAL 1/2
（再掲）
By Maurizio D'Arrigo (https://www.flickr.com/photos/keylosa/184606430)

API ＝レゴオブジェクト

API ＝レゴオブジェクト
REST
API
独自
API
HTML5
API

Webの世界
By kakela (https://www.flickr.com/photos/kakela/9658243)

・激動の時代を楽しむ
GOAL 2/2
Webの世界
By kakela (https://www.flickr.com/photos/kakela/9658243)

 10分で分かる.*
10分で分かるJavaScript
10分で分かるjQuery
 各種API
REST API 演
Geolocation API 演
Google Maps API 演
 総合演習
alpaca+ 演
公開サーバへのデプロイ演
 アーキテクチャ設計
 pre-PBL

後期PBLの概要
 分散PBL
 学生主体で進めるPBL
 各大学でオンラインで実施
 3つのミニPBL
 PBL1：ビッグデータ
 PBL2： Webアプリ
 PBL3：ビジネス

PBL全体スケジュール
10/3
10/17
10/31
11/14
12/5
PBL1開始
PBL1発表会 & PBL2開始
（クラウドセミナー）
PBL2発表会 & PBL3開始
PBL3発表会
2weeks
4weeks
3weeks

 CloudSpiralコンペティション（仮）
 世界に通用する日本の若いITエンジニアを発掘すべく，
これまでにない新たなWebアプリのアイデアを募集し，
その内容を競います
 審査基準
 アプリの新規性・独自性
 アプリのユニークさ・魅力
 市場価値や社会課題の解決性
 アイデアの説得力，プレゼン力
 企画から開発までの計画力・実現力
PBL2の設定
設定

 応募締切： 10月17日
 一次審査： 11月14日
 企画提案 & アプリのデモンストレーション
 審査員と一般聴衆による投票審査
 二次審査： 1月16日
 開発アプリの一般公開
 Web利用者からの一般投票開始
 最終審査：・・・
コンテストの流れ
設定

 応募締切： 10月17日（PBL2開始，1週目）
 一次審査： 11月14日（PBL2発表会，4週目）
 審査員（教員）と一般聴衆（学生）による投票審査
 二次審査： 1月16日
真意

 応募締切： 10月17日（PBL2開始，1週目）
 一次審査： 11月14日（PBL2発表会，4週目）
 審査員（教員）と一般聴衆（学生）による投票審査
 二次審査： 1月16日（13週目＝3ヶ月）
真意

 外部APIを一つ以上利用すること
 既存のAPIを利用して新たな価値を生むものであること
 夢物語にならないこと
 「夢を語るのは高校生まで」「形にしないと嘘でしょ」
 実現可能性を必ず検討すること
 技術面・コスト面共に実現可能であること
 利用する（したい）外部APIが存在するかも調べること
 開発チームの能力・限界を見極めること
 開発の見通しが立つこと
 最終的な開発完了までは13週間（3ヶ月）
PBLとしての企画上の制約
BLACK

 クライアント・サーバの両方を開発すること
 サーバサイド
 外部APIの呼び出し部分はモック（見せかけ）でもよい
• 特に認証や利用料が必要なAPIは大変
• 企画として「ここが提供しているこのAPIを使う」という点を主張すればよい
 クライアントサイド向けへのREST APIを公開すること
 クライアントサイド
 HTML + JS （CSS等デザインの作り込みは任意）
 開発したサーバサイドのREST APIを呼び出すこと
PBLとしての開発上の制約

 企画提案とアプリのデモンストレーション
 当然全て完成していなくて良い
 アプリの全体像が聴衆に伝わるように工夫すること
 審査基準（再掲）
 アプリの新規性・独自性
 アプリのユニークさ・魅力
 市場価値や社会課題の解決性
 アイデアの説得力，プレゼン力
 企画～開発までの計画力・実現力
PBL2の発表会で求めるもの

 プロセスについては特に制約は与えない
 チームで工夫して下さい
• Assignment制約をどう捉えるか？
• どのようなツールを使うか？
• 遠隔という難しさをどう工夫するか？
 最低限，前期合宿と同等の開発環境はこちらで用意します
• SVNやTrac等
 2週目（10/31）クラウドセミナー
 午前中はフリー，チームで対面できる機会なので活用して下さい
 技術的な質問・相談も受け付けます
その他

CloudSpiral 2014年度 Webアプリ講義（2日目）

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CloudSpiral 2014年度 Webアプリ講義（2日目）

Similar to CloudSpiral 2014年度 Webアプリ講義（2日目） (20)

Recently uploaded

Recently uploaded (20)

CloudSpiral 2014年度 Webアプリ講義（2日目）