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_20151006

373 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

基礎演習V_20151006

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

×