出張講義：Webシステムプログラミングの概要です。

1. Webシステムプログラミング
2015年6月30日（火）
総合情報学科システム開発コース
助教 河野義広
出張講義＠中央大学, June 30, 2015

2. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
目次
 自己紹介
 Webの基本的な仕組み
 Webシステムプログラミングの実演
 Web開発技術
 Webの応用事例
2

3. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
自己紹介
 名前：河野 義広（かわの よしひろ）
 所属：システム開発コース 助教
 専門：情報工学、社会情報学
 社会的課題をシステムで解決する！
 研究テーマ：ソーシャルメディアの社会的影響
 ソーシャルメディア活用＆パーソナルブランディング
 ソーシャルメディアを「いかに人生に活かすか！」がテーマ
 各ソーシャルメディアを自ら使い込んで実践研究
 学生のキャリアデザイン支援、教育現場における情報教育
3

4. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
クラウド（Cloud）とは？
 概要
 インターネット上に計算資源、データ領域を確保
 多くのサービスがWebブラウザのみで利用可能
4
インターネット
SNS
動画
メール
地図
買い物
利用
端末

5. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Webの基本的な仕組み
5
あなたのPC
① Webサーバ
にアクセス
② ファイルを
受け取る
③ 画面を作って
表示
HTML
Webサーバ
インターネット

6. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
動的なWebサイトの仕組み
6
あなたのPC
① Webサーバ
にアクセス
② プログラム
を実行
④ 画面を作って
表示
HTML
Webサーバ
データベース
プログラム
③ 実行結果を
受け取る
インターネット

7. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
動的Webサイトとは？
 何ができるのか？
 ユーザの入力に応じて結果が変わるサイト
 例）掲示板、Amazon、Twitter、Facebookなど
 プログラム
 ユーザの入力を受け付けて処理を実行
 実行結果をPCに返す
 データベース（DB）
 ユーザのデータを保管
7
プログラム
データベース

8. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
プログラムの例
 概要
 アンケートの選択によって結果が分かるページ
8

9. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
作成するWebシステム
 概要
 遊んだゲームのリストを管理するシステム
 基本設計
 以下の項目をDBに記録
 タイトル、ジャンル、日付、評価（1～5）、感想
 データの登録、変更、削除ができること
 実装方法
 Ruby on Railsを利用（後で説明）
9

10. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
作成するWebシステムのイメージ
10

11. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Webシステム作成（1）
 1．プロジェクトの作成
 プログラムの作業場所
 # rails new game_list -d mysql
 2. DBの作成
 # rails g scaffold Games title:string genre:string date:date
rating:integer review:text
 # rake db:create
 # rake db:migrate
 3. サーバの起動
 # rails s –p 3005
11

12. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Webシステム作成（2）
 4．表示の日本語化
 ビューのファイルを編集
 5. ジャンルを一覧から選択できるようにする
 ジャンルをDBに追加
 一覧から選択できるようビューを編集
 # rails g scaffold Genres name:string
 # rake db:migrate
 6. サーバの再起動
 # rails s –p 3005
12

13. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
DBの中身を覗いてみよう
13
図. ゲームテーブル
図. ジャンルテーブル

14. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Webシステムの現状
 現状
 ほとんどのサービスがWeb上で提供
 エンジニアもWeb開発のスキルは必須
 背景
 デバイスの普及→多様な端末で提供できる仕組み
 クラウドの普及→端末は情報提示に利用
 Web APIの公開→マッシュアップによるサービス開発
 Google Maps、Twitter、Facebook、Yahoo!など
14

15. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Web APIの活用
 Twitter連携サービスの開発
 Twitter Bot、Twitter連携アプリなどのシステム開発
 Twitter APIの調査
 外部プログラムからTwitterの機能を利用するための関数群
 Web開発技術の習得
 WebやDBの知識、推奨フレームワーク：Ruby on Rails
15
プログラム
例：ブログ
Twitter
DB
A
P
I
① 問い合わせ
② データ処理③ 返信
インターネット
図. Twitter APIの仕組み
D
D

16. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Web開発技術の基本
 Web開発での必須スキル
 HTML/CSSは基本中の基本
 Webの仕組み：HTTP、GET/POST
 クライアントサイド：ブラウザ、JavaScript、jQuery
 サーバサイド：PHP、Ruby、Servlet、DB
 サーバ運用：Linux、Apache、ネットワーク
 学び方は実践あるのみ！
 まずはWeb開発の全体的な知識を得る
 実際に開発をしながら、自分の得意分野を見つける
16

17. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
社会的課題解決サービスの現状
 背景：ソーシャルメディアの急速な普及
 様々な情報（人々の考え方、価値観）の流通や人脈形成
 社会的課題解決の必須スキル
 世の中にあるほとんどの課題は、一人では解決できない
 それぞれの人の考え方や価値観が異なるため
 ソーシャルメディア活用は社会的課題解決の必須スキル
 社会的課題解決サービス
 地域や環境、人の心などの課題解決が目的
 困っている人と助けたい人をつなぐサービス
17

18. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
まとめ
 やったこと
 Webシステムの仕組み
 Webシステムプログラミングの実演
 Web開発技術と応用事例
 皆さんに期待すること
 自分でWebシステムを作ってみましょう
 勉強会やセミナーに行ってみましょう
 分からないことがあれば聞いてみましょう
18