Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

292 views

Published on

授業:2016年度 基礎演習V
内容:Web開発技術の基本と社会的課題解決サービスの現状

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Web開発技術の基本と 社会的課題解決サービスの現状 2016年10月25日(火) 総合情報学科システム開発コース 助教 河野義広
  2. 2. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 自己紹介  名前:河野 義広(かわの よしひろ)  所属:システム開発コース 助教  専門:情報工学、社会情報学  社会的課題をシステムで解決する!  実生活すべてが研究対象  ソーシャルメディアを「いかに人生に活かすか!」  研究テーマ:サイバーワールド  分散仮想環境におけるヒューマンコミュニケーション  仮想化技術を用いた自律分散協調型Webクローラの開発  なりたい自分でつながるソーシャルメディア開発  地域活動を通じた学生の主体性向上と情報発信Webサイト 2
  3. 3. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 河野の情報発信  ソーシャルアカウント  Twitter:@yoshi_kawano  Facebook:河野 義広  ブログ  個人ブログ:「穏やかに楽しく生きる」研究者のブログ  ITmediaでのブログ連載:アカデミックが見た社会 3
  4. 4. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 目次  河野ゼミの研究方針  Webシステムの基本  Webシステム開発の実演  社会的課題解決サービスの現状  河野ゼミで学べること  ゼミの紹介 4
  5. 5. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 社会情報学における課題解決 • 対象:ネット依存、炎上問題、情報モラル、地域情報化 • 課題の抽出が中心 社会学的見地から情報社会の問題を捉える • 社会的課題を解決するために情報システムの活用・開発 • 情報工学的アプローチ 情報システムを活用し社会的課題を解決する 5 多い 研究事例 情報システムを活用し社会的課題解決に取り組む 少ない
  6. 6. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 河野ゼミの研究マップ  ITの視点に立ち、社会の側面を見る  社会的課題に対して、強みであるITを使った課題解決  課題ベースのため、1からシステム開発を行う場合が多い 6
  7. 7. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 河野ゼミの研究方針  概要  社会的課題を解決するためのシステム開発、 並びにその社会的影響に関する研究  システム開発と社会調査の両面が必要  システム開発では『社会を見渡す視点』が必要  社会調査では『課題を解決する技術力』が必要  卒業研究テーマ例:  学生のための第二領域時間管理システム「Self-reflector」  技術を売り買いできるサービス「TechnicaLink」  佐原の情報発信Webメディア「佐原ソーシャルライブラリ」の開発 7
  8. 8. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 目次  河野ゼミの研究方針  Webシステムの基本  Webシステム開発の実演  社会的課題解決サービスの現状  河野ゼミで学べること  ゼミの紹介 8
  9. 9. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 皆さんに質問  Webを知っている?  インターネット上で文書をやり取りする仕組み  正式名称:World Wide Web、WWWやWebと呼称  Webの利用目的は?  ☑ 検索 ☑ メール ☑ 買い物  ☑ ニュース ☑ カレンダー  ☑ SNS(Twitter、Facebookなど)  ☑ データ共有(Googleドライブ、Dropboxなど) 9
  10. 10. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Webの基本的な仕組み 10 あなたのPC ① Webサーバ にアクセス ② ファイルを 受け取る HTML ③ 画面を作って 表示 Webサーバ インターネット
  11. 11. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES クラウド(Cloud)とは?  概要  インターネット上に計算資源、データ領域を確保  多くのサービスがWebブラウザのみで利用可能 11 インターネット SNS 動画 メール 地図 買い物 利用 端末
  12. 12. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 皆さんに質問  この中でいくつのサービスを使っている? 12
  13. 13. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 動的なWebサイトの仕組み 13 あなたのPC ① Webサーバ にアクセス ④ 画面を作って 表示 Webサーバ ② プログラム を実行 データベース プログラム HTML ③ 実行結果を 受け取る インターネット
  14. 14. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 動的Webサイトとは?  何ができるのか?  ユーザの入力に応じて結果が変わるサイト  例)掲示板、Amazon、Twitter、Facebookなど  プログラム  ユーザの入力を受け付けて処理を実行  実行結果をPCに返す  データベース(DB)  ユーザのデータを保管 14 プログラム データベース
  15. 15. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES プログラムの例  概要  アンケートの選択によって結果が分かるページ 15
  16. 16. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 目次  河野ゼミの研究方針  Webシステムの基本  Webシステム開発の実演  社会的課題解決サービスの現状  河野ゼミで学べること  ゼミの紹介 16
  17. 17. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Webシステムプログラミングの実演 実際に簡単なWebシステムを 作ってみます 17
  18. 18. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 作成するWebシステム  概要  遊んだゲームのリストを管理するシステム  基本設計  以下の項目をDBに記録  タイトル、ジャンル、日付、評価(1~5)、感想  データの登録、変更、削除ができること  実装方法  Ruby on Railsを利用(後で説明) 18
  19. 19. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 作成するWebシステムのイメージ 19
  20. 20. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 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
  21. 21. 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 21
  22. 22. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ビューの編集  方針  ジャンルをDBから選択する方式 22 <div class="field"> <%= f.label :genre %><br /> <%= f.collection_select :genre, Genre.all, :name, :name, :selected => @game.genre, :prompt => "選択してください" %> </div>
  23. 23. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES DBの中身を覗いてみよう 23 図. ゲームテーブル 図. ジャンルテーブル
  24. 24. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Ruby on Railsとは  特徴  Webアプリケーション開発の「フレームワーク」  オブジェクト指向スクリプト言語「Ruby」で記述  MVC(Model-View-Controller)アーキテクチャ  モデル、ビュー、コントローラでの役割分担  RubyとRails  Ruby:プログラム言語  Rails:Rubyで記述されたフレームワーク  フレームワーク:ツール、ライブラリ、設定ファイル等 24 Ruby Ruby on Rails 図. RubyとRailsの関係
  25. 25. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES MVCアーキテクチャ  MVCアーキテクチャ  モデル:DBとの連携  ビュー:画面表示  コントローラ:ユーザからのデータ入力 25 コントローラ モデル ビュー DB 図. MVCアーキテクチャの概要 ユーザ 端末
  26. 26. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Rails開発のメリット  迅速にシステムを開発できる  簡単に大枠だけ作って、適宜修正しながら迅速に開発  プロジェクト管理  プロジェクトのディレクトリにすべてが入っている  プログラム、設定ファイル、ログ、DB定義、サーバ機能  ディレクトリをバックアップするだけでよい  DB管理が容易  バージョン管理ができる  コマンドでのバージョンアップ/ロールバックができる  他のDBへの切り替えが容易 26
  27. 27. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 目次  河野ゼミの研究方針  Webシステムの基本  Webシステム開発の実演  社会的課題解決サービスの現状  河野ゼミで学べること  ゼミの紹介 27
  28. 28. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Webシステムの開発最前線 • クラウドの活用 • Amazon Web Services、Microsoft Azure、Heroku • マッシュアップ(プログラムのパーツの組み合わせ) • Web API、ソーシャルログイン、ライブラリ(git) • CMS(Content Management System)の活用 スピーディーな開発 • スタートアップを支援する仕組み • クラウドファンディングによる資金調達 加速するイノベーション 28
  29. 29. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES  Tripline:旅の軌跡を記録するサービス スピーディーな開発の事例 29 地図 認証旅の軌跡 シェア マッシュアップによる開発速度&利便性向上
  30. 30. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ソーシャルアカウントでのログイン 30
  31. 31. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Web APIの活用  ソーシャル連携サービス  Twitter、FacebookのIDによる認証機能  Twitter、Facebookでのつながり情報、登録情報の活用  Web APIの利用  プログラムから外部Webシステムの機能を利用する関数群 31 プログラム 例:ブログ DB A P I ① 問い合わせ ② データ処理③ 返信 インターネット 図. Web APIの仕組み D D Webシステム
  32. 32. 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、サイト全体のデザイン統一 32
  33. 33. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Joomla!によるWebサイト作成例 33
  34. 34. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES WordPressで作成したサイト 34
  35. 35. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Web開発技術の基本  Web開発での必須スキル  HTML/CSSは基本中の基本  Webの仕組み:HTTP/HTTPS、GET/POST  クライアントサイド:ブラウザ、JavaScript、jQuery  サーバサイド:PHP、Ruby、Servlet、SQL、NoSQL  サーバ運用:Linux、Apache、ネットワーク  学び方は実践あるのみ!  まずはWeb開発の全体的な知識を得る  実際に開発をしながら、自分の得意分野を見つける 35
  36. 36. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES なぜWebをやるのか?  Webは情報工学の技術の粋を結集したもの  ネットワーク、画像処理、データマイニング、AI、etc…  数え上げればきりがない  ITの最先端を追うならWebは必須  エンジニアを目指すならWebは当たり前  河野ゼミでは最先端技術を追うためWebに注目します 36
  37. 37. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 加速するイノベーション 37 • スタートアップ=イノベーション&社会貢献 • SF Japan Night • サムライベンチャーサミット スタートアップ支援 • クラウドファンディング=インターネットによる資金調達 • READYFOR? • CAMPFIRE クラウドファンディング
  38. 38. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES SF Japan Night  日本のスタートアップ企業を支援  自社のプロダクトを投資家に英語でプレゼン  評価の高かった発表者はサンフランシスコでの本選出場  投資家に評価されれば資金調達のチャンス!  これまでのファイナリスト  ChatWork、Cacoo、Beatrobo、Monaca  WHILL、Ring、FOVE 38
  39. 39. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES サムライベンチャーサミット  日本最大級のスタートアップカンファレンス  100社以上のスタートアップ、インキュベーターが参加  第11回の2015年は過去最高の1166名が参加  サムライ魂  「できるできないでなく、やるかやらないかで世界を変える」 39
  40. 40. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 社会的課題解決サービスの現状  背景:ソーシャルメディアの急速な普及  様々な情報(人々の考え方、価値観)の流通や人脈形成  社会的課題解決の必須スキル  世の中にあるほとんどの課題は、一人では解決できない  それぞれの人の考え方や価値観が異なるため  ソーシャルメディア活用は社会的課題解決の必須スキル  社会的課題解決サービス  地域や環境、人の心などの課題解決が目的  困っている人と助けたい人をつなぐサービス 40
  41. 41. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES sinsai.ifno  概要  震災情報をみんなで集め公開するサイト  ボランティアのエンジニアが震災直後4時間で立ち上げ 41
  42. 42. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Wantedly  概要  はたらくを面白くするビジネスSNS 42
  43. 43. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ちばレポ  概要  まちのこまった情報を集めて解決していく  一般市民がスマホを利用して実証実験に参加 43
  44. 44. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 第二領域時間管理システム  概要  「7つの習慣」に基づく「重要度」を意識した時間管理 44URL:http://mentoros.tuis.ac.jp/self-reflector
  45. 45. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 目次  河野ゼミの研究方針  Webシステムの基本  Webシステム開発の実演  社会的課題解決サービスの現状  河野ゼミで学べること  ゼミの紹介 45
  46. 46. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 河野ゼミで学べる技術 46 Web開発 ソーシャル 仮想化
  47. 47. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 河野ゼミで学べること  システム開発:WebとDB  DBと連携したWebシステム:Ruby on Rails, jQuery  ソーシャルサービス:Twitter, Facebook連携アプリ  仮想化技術:Docker, Vagrant  Webサイト・SNS構築:WordPress, Joomla!  社会性:人と地域  地域活性化:千葉市若葉区・花見川区、四街道市  人生哲学:7つの習慣, ポジティブ心理学  人材教育:アクティブ・ラーニング, 情報リテラシー  システム(手段)と社会(問題意識)の両面が重要 47
  48. 48. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES プロジェクト研究 1. サイバーセキュリティ対策技術研究プロジェクト  目的:サイバー攻撃に対する人材育成と技術開発  方法:マルウェア検知・解析、仮想化分散システム 2. 地域活性化のためのWebシステム  目的:地域活動と情報発信による学生教育や地域活性化  方法:地域と情報大のヒト・モノ・コトを記録する 3. なりたい自分でつながるソーシャルメディア開発  目的:学生が主体的に行動し自己実現を果たすこと  方法:『7つの習慣』に基づく自己実現支援システムの開発 48
  49. 49. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 目次  河野ゼミの研究方針  Webシステムの基本  Webシステム開発の実演  社会的課題解決サービスの現状  河野ゼミで学べること  ゼミの紹介 49
  50. 50. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ゼミの紹介 河野ゼミについて 50
  51. 51. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ゼミの様子  卒研テーマ  自分自身の問題意識をテーマとする学生が多い  教員との関係  一緒に飲みに行ったり、勉強会に出掛けたりが大切  Facebookやブログで、価値観や活動内容を共有  指導方針  学生の主体性を重視  心配はするけど、手取り足取りは教えない  公正な評価が教員の役割  中途半端な状態で社会に送り出すことはできない 51
  52. 52. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ゼミ合宿の様子 52
  53. 53. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ゼミの進め方  全体を通して  週1回のディスカッション  毎週3~4名程度が研究内容を発表し、全員で議論  サブゼミ  プロジェクト毎に各自の進捗報告  前半  社会調査、参考文献の調査  Webの知識、開発技術の修得  後半  各自のテーマに応じたフィールドワーク、システム開発  卒論中間発表 53
  54. 54. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES プロジェクト研究の進め方  今後の進め方  プロジェクト研究を選択する  1~3のうち、最大で2つまで  ただし、1を選択したらそれのみを担当  本決めは6月頃でもよい  ゼミ活動の準備(1月頃~)  ラズベリーパイによるLinux実習(希望者のみ)  地域活動への参加(随時募集中)  開発スキルの勉強会  Webシステムプログラミング:チームで開発する  連絡手段を整備する  ゼミで使うITツールの登録・練習 54
  55. 55. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ゼミで使うITツール  Facebook:公式な連絡手段  ゼミの連絡、卒論指導、イベント周知  Dropbox:ファイル共有  卒論ファイル、プレゼン資料、開発関連メモ  GitHub:ソースコードのバージョン管理  システムのソースコード共有、変更履歴の確認  Slack:チャットツール  プロジェクト毎のチャット用  Gmail:各種アカウントのID  上記各サービスの登録用アカウント 55
  56. 56. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 目指す就職先!  就職実績  エンジニア:約6割  TISソリューションリンク, ルーセントスクエア, 株式会社BFT  ファソテック, インテリジェンス ビジネスソリューション など  教員が紹介できる/したい企業  Web系エンジニア:採用実績あり  Visso, ミラクル・リナックス, M-SOLUTIONS  キャッチボール・トゥエンティワン など  ソーシャル関係  ループス・コミュニケーションズ, アライドアーキテクツ  トライバルメディアハウス, LIG, grooves, garbs など 56 研究志向なら 大学院を推奨
  57. 57. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES まとめ  やったこと  Webシステムの仕組み  Webシステムプログラミングの実演  Web開発技術と応用事例  皆さんに期待すること  自分でWebシステムを作ってみましょう  勉強会やセミナーに行ってみましょう  分からないことがあれば聞いてみましょう 57
  58. 58. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 終わり  ご質問・コメントなどありましたらお願いします 58 東京情報大学 総合情報学部 総合情報学科 システム開発コース 助教 河野 義広 Tel:043-236-1149 E-mail:ykawano@rsch.tuis.ac.jp ご不明な点がありましたら以下にお問い合わせください

×