基礎演習V 河野ゼミ紹介20161025

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

TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
自己紹介
 名前：河野義広（かわのよしひろ）
 所属：システム開発コース助教
 専門：情報工学、社会情報学
 社会的課題をシステムで解決する！
 実生活すべてが研究対象
 ソーシャルメディアを「いかに人生に活かすか！」
 研究テーマ：サイバーワールド
 分散仮想環境におけるヒューマンコミュニケーション
 仮想化技術を用いた自律分散協調型Webクローラの開発
 なりたい自分でつながるソーシャルメディア開発
 地域活動を通じた学生の主体性向上と情報発信Webサイト
2

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

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

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

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

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

目次
 ゼミの紹介
8

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

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

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

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

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

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

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

目次
 ゼミの紹介
16

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

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

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

Webシステム作成（1）
 1．プロジェクト（プログラム作業場所）の作成
 # rails new game_list -d mysql
 2. DBの作成
 Gemfileに「gem ‘execjs’ gem ‘therubyracer’」を追加
 # 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
20

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

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

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

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

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

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

目次
 ゼミの紹介
27

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

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

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

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

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

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

WordPressで作成したサイト
34

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

なぜWebをやるのか？
 Webは情報工学の技術の粋を結集したもの
 ネットワーク、画像処理、データマイニング、AI、etc…
 数え上げればきりがない
 ITの最先端を追うならWebは必須
 エンジニアを目指すならWebは当たり前
 河野ゼミでは最先端技術を追うためWebに注目します
36

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

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

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

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

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

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

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

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

目次
 ゼミの紹介
45

河野ゼミで学べる技術
46
Web開発
ソーシャル仮想化

河野ゼミで学べること
 システム開発：WebとDB
 DBと連携したWebシステム：Ruby on Rails, jQuery
 ソーシャルサービス：Twitter, Facebook連携アプリ
 仮想化技術：Docker, Vagrant
 Webサイト・SNS構築：WordPress, Joomla!
 社会性：人と地域
 地域活性化：千葉市若葉区・花見川区、四街道市
 人生哲学：7つの習慣, ポジティブ心理学
 人材教育：アクティブ・ラーニング, 情報リテラシー
 システム（手段）と社会（問題意識）の両面が重要 47

プロジェクト研究
1. サイバーセキュリティ対策技術研究プロジェクト
 目的：サイバー攻撃に対する人材育成と技術開発
 方法：マルウェア検知・解析、仮想化分散システム
2. 地域活性化のためのWebシステム
 目的：地域活動と情報発信による学生教育や地域活性化
 方法：地域と情報大のヒト・モノ・コトを記録する
3. なりたい自分でつながるソーシャルメディア開発
 目的：学生が主体的に行動し自己実現を果たすこと
 方法：『7つの習慣』に基づく自己実現支援システムの開発
48

目次
 ゼミの紹介
49

ゼミの紹介
河野ゼミについて
50

ゼミの様子
 卒研テーマ
 自分自身の問題意識をテーマとする学生が多い
 教員との関係
 一緒に飲みに行ったり、勉強会に出掛けたりが大切
 Facebookやブログで、価値観や活動内容を共有
 指導方針
 学生の主体性を重視
 心配はするけど、手取り足取りは教えない
 公正な評価が教員の役割
 中途半端な状態で社会に送り出すことはできない
51

ゼミ合宿の様子
52

ゼミの進め方
 全体を通して
 週1回のディスカッション
 毎週3～4名程度が研究内容を発表し、全員で議論
 サブゼミ
 プロジェクト毎に各自の進捗報告
 前半
 社会調査、参考文献の調査
 Webの知識、開発技術の修得
 後半
 各自のテーマに応じたフィールドワーク、システム開発
 卒論中間発表
53

プロジェクト研究の進め方
 今後の進め方
 プロジェクト研究を選択する
 1～3のうち、最大で2つまで
 ただし、1を選択したらそれのみを担当
 本決めは6月頃でもよい
 ゼミ活動の準備（1月頃～）
 ラズベリーパイによるLinux実習（希望者のみ）
 地域活動への参加（随時募集中）
 開発スキルの勉強会
 Webシステムプログラミング：チームで開発する
 連絡手段を整備する
 ゼミで使うITツールの登録・練習
54

ゼミで使うITツール
 Facebook：公式な連絡手段
 ゼミの連絡、卒論指導、イベント周知
 Dropbox：ファイル共有
 卒論ファイル、プレゼン資料、開発関連メモ
 GitHub：ソースコードのバージョン管理
 システムのソースコード共有、変更履歴の確認
 Slack：チャットツール
 プロジェクト毎のチャット用
 Gmail：各種アカウントのID
 上記各サービスの登録用アカウント
55

目指す就職先！
 就職実績
 エンジニア：約6割
 TISソリューションリンク, ルーセントスクエア, 株式会社BFT
 ファソテック, インテリジェンスビジネスソリューションなど
 教員が紹介できる／したい企業
 Web系エンジニア：採用実績あり
 Visso, ミラクル・リナックス, M-SOLUTIONS
 キャッチボール・トゥエンティワンなど
 ソーシャル関係
 ループス・コミュニケーションズ, アライドアーキテクツ
 トライバルメディアハウス, LIG, grooves, garbs など
56
研究志向なら
大学院を推奨

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

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

基礎演習V 河野ゼミ紹介20161025

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Destacado

Destacado (18)

Similar a 基礎演習V 河野ゼミ紹介20161025

Similar a 基礎演習V 河野ゼミ紹介20161025 (20)

Más de 義広河野

Más de 義広河野 (20)

Último

Último (7)