【出張講義】Webシステムプログラミング20161003 茂原高校

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

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

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

6. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
皆さんに質問
 Twitterを使っている？
6

7. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
皆さんに質問
 Facebookを使っている？
7

8. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
皆さんに質問
 LINEを使っている？
8

9. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
皆さんに質問
 ブログを持っている？
9

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

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

12. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
皆さんに質問
 この中でいくつのサービスを使っている？
12

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

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

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

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

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

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

19. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
DBの例
 概要
 メンバーの名前と学年を記録
 1行に1人分のデータ
19

20. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Webシステムプログラミングの実演
実際に簡単なWebシステムを
作ってみます
20

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

22. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Webシステムのデモ
22

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

24. 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
24

25. 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
25

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

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

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

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

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

31. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
“イマドキの”Webシステム開発
Webシステム開発の
最前線を紹介します
31

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

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

34. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
ソーシャルアカウントでのログイン
34

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

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

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

38. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Joomla!によるWebサイト作成例
38

39. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
WordPressで作成したサイト
39

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

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

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

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

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

45. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
Wantedly
 概要
 はたらくを面白くするビジネスSNS
45

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

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

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

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