Webシステムプログラミング20161003

Webシステムプログラミング
2016年10月3日（月）
総合情報学科システム開発コース
助教河野義広

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

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

河野の情報発信
 ソーシャルアカウント
 Twitter：@yoshi_kawano
 Facebook：河野義広
 ブログ
 個人ブログ：「穏やかに楽しく生きる」研究者のブログ
 ITmediaでのブログ連載：アカデミックが見た社会
4

演習（1）
1. コンピュータと聞いて、思い付くのは何ですか？
 PC、スマホ、ゲーム、ATM、Suica、家電、車、etc…
2. IT企業で知っている会社はどこですか？
 Google、Apple、Microsoft、Facebook、Amazon
 ソフトバンク、NTTドコモ、富士通、ソニー、任天堂
3. IT企業は何をしている会社だと思いますか？
 仕様策定、システム設計、プログラミング
 テスト、デバッグ、マニュアル作成、運用保守
4. IT企業では何を作っているでしょうか？
 Web、アプリ、ゲーム、金融システム、流通システム
 PC、ネットワーク機器（ルータ、ハブ）
5

皆さんに質問
 Twitterを使っている？
6

皆さんに質問
 Facebookを使っている？
7

皆さんに質問
 LINEを使っている？
8

皆さんに質問
 ブログを持っている？
9

ソーシャルメディアとは？
 質問
 ソーシャルメディアという言葉を聞いた事がありますか？
10
ソーシャルメディア（Social Media）
社会性のある媒体＝情報を伝えるもの

ソーシャルメディアの特徴
 マスメディアの特徴
 例：新聞、テレビ、雑誌、ラジオなど
 新聞社、放送局などから大衆に向けた一方的な情報発信
 一部のプロのみが情報発信する
 ソーシャルメディアの特徴
 例：ブログ、Twitter、Facebookなど
 誰もが参加・発言できる
 双方向でのやり取り
 情報の拡散（リツイート、いいね！）
11
一人ひとりが主役、個人が活躍する時代

皆さんに質問
 この中でいくつのサービスを使っている？
12

皆さんに質問
 Webを知っている？
 インターネット上で文書をやり取りする仕組み
 正式名称：World Wide Web、WWWやWebと呼称
 Webの利用目的は？
 ☑ 検索 ☑ メール ☑ 買い物
 ☑ ニュース ☑ カレンダー
 ☑ SNS（Twitter、Facebookなど）
 ☑ データ共有（Googleドライブ、Dropboxなど）
13

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

Webの基本的な仕組み
15
あなたのPC
① Webサーバ
にアクセス
② ファイルを
受け取る
HTML
③ 画面を作って
表示
Webサーバ

動的なWebサイトの仕組み
16
あなたのPC
① Webサーバ
にアクセス
④ 画面を作って
表示
Webサーバ
② プログラム
を実行
データベース
プログラム
HTML ③ 実行結果を
受け取る

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

プログラムの例
 概要
 アンケートの選択によって結果が分かるページ
18

DBの例
 概要
 メンバーの名前と学年を記録
 1行に1人分のデータ
19

Webシステムプログラミングの実演
実際に簡単なWebシステムを
作ってみます
20

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

Webシステムのデモ
22

演習（2）
 ワークシートの5, 6について書く（目安5分）
5. あなたが作ってみたいWebシステムは？
 どのような情報を整理しておきたいか？
 ゲーム以外（勉強、部活、趣味など）で考えてみましょう
6. あなたのWebシステムで保存するデータは？
 例1）ゲーム：タイトル、ジャンル、評価、感想
 例2）部活：練習メニュー、試合の予定・結果
23

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
24

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

ビューの編集
 方針
 ジャンルをDBから選択する方式
26
<div class="field">
<%= f.label :genre %><br />
<%= f.collection_select :genre, Genre.all, :name,
:name, :selected => @game.genre,
:prompt => "選択してください" %>
</div>

DBの中身を覗いてみよう
27
図. ゲームテーブル
図. ジャンルテーブル

Ruby on Railsとは
 特徴
 Webアプリケーション開発の「フレームワーク」
 オブジェクト指向スクリプト言語「Ruby」で記述
 MVC（Model-View-Controller）アーキテクチャ
 モデル、ビュー、コントローラでの役割分担
 RubyとRails
 Ruby：プログラム言語
 Rails：Rubyで記述されたフレームワーク
 フレームワーク：ツール、ライブラリ、設定ファイル等
28
Ruby
Ruby on Rails
図. RubyとRailsの関係

MVCアーキテクチャ
 MVCアーキテクチャ
 モデル：DBとの連携
 ビュー：画面表示
 コントローラ：ユーザからのデータ入力
29
コントローラ
モデル
ビュー
DB
図. MVCアーキテクチャの概要
ユーザ
端末

Rails開発のメリット
 迅速にシステムを開発できる
 簡単に大枠だけ作って、適宜修正しながら迅速に開発
 プロジェクト管理
 プロジェクトのディレクトリにすべてが入っている
 プログラム、設定ファイル、ログ、DB定義、サーバ機能
 バックアップが簡単（ディレクトリの保存のみ）
 DB管理が容易
 バージョン管理ができる
 コマンドでのバージョンアップ／ロールバックができる
 DBの切り替えが容易
30

“イマドキの”Webシステム開発
Webシステム開発の
最前線を紹介します
31

Webシステムの開発最前線
• クラウドの活用
• Amazon Web Services、Microsoft Azure、Heroku
• マッシュアップ（プログラムのパーツの組み合わせ）
• Web API、ソーシャルログイン、ライブラリ（git）
• CMS（Content Management System）の活用
スピーディーな開発
• スタートアップを支援する仕組み
• クラウドファンディングによる資金調達
加速するイノベーション
32

 Tripline：旅の軌跡を記録するサービス
スピーディーな開発の事例
33
地図
認証旅の軌跡
シェア
マッシュアップによる開発速度＆利便性向上

ソーシャルアカウントでのログイン
34

Web APIの活用
 ソーシャル連携サービス
 Twitter、FacebookのIDによる認証機能
 Twitter、Facebookでのつながり情報、登録情報の活用
 Web APIの利用
 プログラムから外部Webシステムの機能を利用する関数群
35
プログラム
例：ブログ
DB
A
P
I
① 問い合わせ
② データ処理③ 返信
図. Web APIの仕組み
D
D
Webシステム

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

CMS（Content Management System）
 CMSとは
 Webの専門知識がなくても、Webサイト管理ができる
 一般利用者でもWebサイト運用が可能
 コンテンツとレイアウトの分離
 ライターとデザイナーの分業が容易
 代表的なCMS
 WordPress：ブログ、Webサイトとして広く利用
 Movable Type：企業のWebサイトとして利用
 OpenPNE：mixi同様のSNSを構築可
 NetCommons：eラーニングサイトに利用
 Joomla!：高機能なCMS、サイト全体のデザイン統一
37

Joomla!によるWebサイト作成例
38

WordPressで作成したサイト
39

加速するイノベーション
40
• スタートアップ＝イノベーション＆社会貢献
• SF Japan Night
• サムライベンチャーサミット
スタートアップ支援
• クラウドファンディング＝インターネットによる資金調達
• READYFOR？
• CAMPFIRE
クラウドファンディング

SF Japan Night
 日本のスタートアップ企業を支援
 自社のプロダクトを投資家に英語でプレゼン
 評価の高かった発表者はサンフランシスコでの本選出場
 投資家に評価されれば資金調達のチャンス！
 これまでのファイナリスト
 ChatWork、Cacoo、Beatrobo、Monaca
 WHILL、Ring、FOVE
41

サムライベンチャーサミット
 日本最大級のスタートアップカンファレンス
 100社以上のスタートアップ、インキュベーターが参加
 第11回の2015年は過去最高の1166名が参加
 サムライ魂
 「できるできないでなく、やるかやらないかで世界を変える」
42

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

sinsai.ifno
 概要
 震災情報をみんなで集め公開するサイト
 ボランティアのエンジニアが震災直後4時間で立ち上げ
44

Wantedly
 概要
 はたらくを面白くするビジネスSNS
45

ちばレポ
 概要
 まちの困った情報を集めて解決していく
 一般市民がスマホを利用して実証実験に参加
46

第二領域時間管理システム
 概要
 「７つの習慣」に基づく「重要度」を意識した時間管理
47URL：http://mentoros.tuis.ac.jp/self-reflector

まとめ
 やったこと
 Webシステムの仕組み
 Webシステムプログラミングの実演
 Web開発技術と応用事例
 皆さんに期待すること
 自分でWebシステムを作ってみましょう
 勉強会やセミナーに行ってみましょう
 今日の感想を書きましょう（ワークシート7）
48

終わり
 ご質問・コメントなどありましたらお願いします
49
東京情報大学総合情報学部総合情報学科
システム開発コース助教
河野義広
Tel：043-236-1149
E-mail：ykawano@rsch.tuis.ac.jp
ご不明な点がありましたら以下にお問い合わせください

Webシステムプログラミング20161003

More Related Content

What's hot

Viewers also liked

Similar to Webシステムプログラミング20161003

More from 義広 河野

Webシステムプログラミング20161003

More from 義広河野