基礎演習V_20151006

Web開発技術の基本と
社会的課題解決サービスの現状
2015年10月6日（火）
総合情報学科システム開発コース
助教河野義広

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

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

目次
 河野ゼミの研究方針
 Webシステムの基本
 Webシステム開発の実演
 社会的課題解決サービスの現状
 河野ゼミで学べること
4

社会情報学における課題解決
• 対象：ネット依存、炎上問題、情報モラル、地域情報化
• 課題の抽出が中心
社会学的見地から情報社会の問題を捉える
• 社会的課題を解決するために情報システムの活用・開発
• 情報工学的アプローチ
情報システムを活用し社会的課題を解決する
5
多い
研究事例
情報システムを活用し社会的課題解決に取り組む
少ない

河野ゼミの研究マップ
 ITの上に立ち、社会の側面を見る
 社会的課題に対して、強みであるITを使った課題解決
 課題ベースのため、1からシステム開発を行う場合が多い
6

河野ゼミの研究方針
 概要
 社会的課題を解決するためのシステム開発、
並びにその社会的影響に関する研究
 システム開発と社会調査の両面が必要
 システム開発では『社会を見渡す視点』が必要
 社会調査では『課題を解決する技術力』が必要
 卒業研究テーマ例：
 学生のための第二領域時間管理システム「Self-reflector」
 技術を売り買いできるサービス「TechnicaLink」
 佐原の情報発信Webメディア「佐原ソーシャルライブラリ」の開発
7

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

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

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

ソーシャルメディアの具体例
11

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

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

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

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

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

作成するWebシステムのイメージ
17

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
18

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

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

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

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

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

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

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

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

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

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

WordPressのインストール画面
29

WordPressで作成したサイト
30

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

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

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

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

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

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

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

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

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

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

河野ゼミで学べる技術
41
Web開発
ソーシャル地図情報

河野ゼミで学べること
 システム開発：WebとDB
 DBと連携したWebシステム：Ruby on Rails, jQuery
 ソーシャルサービス：Twitter, Facebook連携アプリ
 地図情報サービス：OpenStreetMap, yelp
 Webサイト・SNS構築：WordPress, Joomla!
 社会性：人と地域
 地域活性化：香取市佐原, 千葉市花見川区
 人生哲学：7つの習慣, ポジティブ心理学
 人材教育：情報リテラシー, パーソナルブランディング
 システム（手段）と社会（問題意識）の両面が重要 42

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

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

基礎演習V_20151006

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to 基礎演習V_20151006

Similar to 基礎演習V_20151006 (20)

More from 義広河野

More from 義広河野 (20)

Recently uploaded

Recently uploaded (7)