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

Web 開発技術の基本と社会的課題解決サービスの現状

2016 年 10 月 25 日（火）　総合情報学科システム開発コース

助教河野義広

TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCESTOKYO UNIVERSITY OF INFORMATION SCIENCES

自己紹介名前：河野義広（かわのよしひろ）所属：システム開発コース助教専門：情報工学、社会情報学

社会的課題をシステムで解決する！実生活すべてが研究対象ソーシャルメディアを「いかに人生に活かすか！」

研究テーマ：サイバーワールド分散仮想環境におけるヒューマンコミュニケーション

仮想化技術を用いた自律分散協調型 Web クローラの開発なりたい自分でつながるソーシャルメディア開発地域活動を通じた学生の主体性向上と情報発信 Web サイト

2


河野の情報発信ソーシャルアカウント

Twitter ： @yoshi_kawano Facebook ：河野義広

ブログ個人ブログ：「穏やかに楽しく生きる」研究者のブログ ITmedia でのブログ連載：アカデミックが見た社会

3

https://twitter.com/yoshi_kawano

https://twitter.com/yoshi_kawano

https://www.facebook.com/yoshi.kawano529

http://www.yoshihirokawano.com/

http://blog.marketing.itmedia.co.jp/yoshi_kawano/


目次河野ゼミの研究方針 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 で記述されたフレームワーク

フレームワーク：ツール、ライブラリ、設定ファイル等

24Ruby

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

プログラム例：ブログ

DBAPI

① 問い合わせ

② データ処理③ 返信


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

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

http://www.slideshare.net/YoshihiroKawano/web-system-b2015kadai

http://www.slideshare.net/YoshihiroKawano/web-system-b2015kadai


ゼミで使う 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 ： [email protected]

ご不明な点がありましたら以下にお問い合わせください

Education

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