“イマドキの” Webサイト構築！～Ruby on RailsによるWebサイト開発デモ～

1. “イマドキの” Webサイト構築！
～Ruby on RailsによるWebサイト開発デモ～
2015年8月2日（日）
総合情報学科システム開発コース
助教 河野義広
東京情報大学 オープンキャンパス2015 体験授業

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

3. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
皆さんに質問
 Webを知っている？
 インターネット上で文書をやり取りする仕組み
 正式名称：World Wide Web、WWWやWebと呼称
 Webの利用目的は？
 ☑ 検索 ☑ メール ☑ 買い物
 ☑ ニュース ☑ カレンダー
 ☑ SNS（Twitter、Facebookなど）
 ☑ データ共有（Googleドライブ、Dropboxなど）
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サーバ
にアクセス
④ 画面を作って
表示
Webサーバ
② プログラム
を実行
データベース
プログラム
HTML ③ 実行結果を
受け取る
インターネット

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
DBの例
 概要
 メンバーの名前と学年を記録
 1行に1人分のデータ
9

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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