Webシステムプログラミング20150413
Download as PPTX, PDF1 like1,561 views
Webシステムプログラミング20150413
- 2. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 目次 自己紹介 Webの基本的な仕組み Webシステムプログラミングの実演 Web開発技術 Webの応用事例 2
- 3. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 自己紹介 名前：河野 義広（かわの よしひろ） 所属：システム開発コース 助教 専門：情報工学、社会情報学 社会的課題をシステムで解決する！ 研究テーマ：ソーシャルメディアの社会的影響 ソーシャルメディア活用＆パーソナルブランディング ソーシャルメディアを「いかに人生に活かすか！」がテーマ 各ソーシャルメディアを自ら使い込んで実践研究 学生のキャリアデザイン支援、教育現場における情報教育 3
- 4. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 河野の情報発信 ソーシャルアカウント Twitter：@yoshi_kawano Facebook：河野 義広 ブログ 個人ブログ：「穏やかに楽しく生きる」研究者のブログ ITmediaでのブログ連載：アカデミックが見た社会 4
- 5. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 皆さんに質問 Twitterを使っている？ 5
- 6. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 皆さんに質問 Facebookを使っている？ 6
- 7. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 皆さんに質問 LINEを使っている？ 7
- 8. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 皆さんに質問 ブログを持っている？ 8
- 9. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ソーシャルメディアとは？ 質問 ソーシャルメディアという言葉を聞いた事がありますか？ 9 ソーシャル メディア（Social Media） 社会性のある 媒体＝情報を伝えるもの
- 10. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ソーシャルメディアの特徴 マスメディアの特徴 例：新聞、テレビ、雑誌、ラジオなど 新聞社、放送局などから大衆に向けた一方的な情報発信 一部のプロのみが情報発信する ソーシャルメディアの特徴 例：ブログ、Twitter、Facebookなど 誰もが参加・発言できる 双方向でのやり取り 情報の拡散（リツイート、いいね！） 10 一人ひとりが主役、個人が活躍する時代
- 11. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ソーシャルメディアの具体例 11
- 12. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 皆さんに質問 Webを知っている？ インターネット上で文書をやり取りする仕組み 正式名称：World Wide Web、WWWやWebと呼称 Webの利用目的は？ ☑ 検索 ☑ メール ☑ 買い物 ☑ ニュース ☑ カレンダー ☑ SNS（Twitter、Facebookなど） ☑ データ共有（Googleドライブ、Dropboxなど） 12
- 13. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES クラウド（Cloud）とは？ 概要 インターネット上に計算資源、データ領域を確保 多くのサービスがWebブラウザのみで利用可能 13 インターネット SNS 動画 メール 地図 買い物 利用 端末
- 14. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Webの基本的な仕組み 14 あなたのPC ① Webサーバ にアクセス ② ファイルを 受け取る ③ 画面を作って 表示 HTML Webサーバ インターネット
- 15. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 動的なWebサイトの仕組み 15 あなたのPC ① Webサーバ にアクセス ② プログラム を実行 ④ 画面を作って 表示 HTML Webサーバ データベース プログラム ③ 実行結果を 受け取る インターネット
- 16. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 動的Webサイトとは？ 何ができるのか？ ユーザの入力に応じて結果が変わるサイト 例）掲示板、Amazon、Twitter、Facebookなど プログラム ユーザの入力を受け付けて処理を実行 実行結果をPCに返す データベース（DB） ユーザのデータを保管 16 プログラム データベース
- 17. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES プログラムの例 概要 アンケートの選択によって結果が分かるページ 17
- 18. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES DBの例 概要 メンバーの名前と学年を記録 1行に1人分のデータ 18
- 19. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Webシステムプログラミングの実演 実際に簡単なWebシステムを 作ってみます 19
- 20. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 作成するWebシステム 概要 遊んだゲームのリストを管理するシステム 基本設計 以下の項目をDBに記録 タイトル、ジャンル、日付、評価（1～5）、感想 データの登録、変更、削除ができること 実装方法 Ruby on Railsを利用（後で説明） 20
- 21. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 作成するWebシステムのイメージ 21
- 22. 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 22
- 23. 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 23
- 24. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ビューの編集 方針 ジャンルをDBから選択する方式 24 <div class="field"> <%= f.label :genre %><br /> <%= f.collection_select :genre, Genre.all, :name, :name, :selected => @game.genre, :prompt => "選択してください" %> </div>
- 25. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES DBの中身を覗いてみよう 25 図. ゲームテーブル 図. ジャンルテーブル
- 26. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Ruby on Railsとは 特徴 Webアプリケーション開発の「フレームワーク」 オブジェクト指向スクリプト言語「Ruby」で記述 MVC（Model-View-Controller）アーキテクチャ モデル、ビュー、コントローラでの役割分担 RubyとRails Ruby：プログラム言語 Rails：Rubyで記述されたフレームワーク フレームワーク：ツール、ライブラリ、設定ファイル等 26 Ruby Ruby on Rails 図. RubyとRailsの関係
- 27. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES MVCアーキテクチャ MVCアーキテクチャ モデル：DBとの連携 ビュー：画面表示 コントローラ：ユーザからのデータ入力 27 コントローラ モデル ビュー DB 図. MVCアーキテクチャの概要 ユーザ 端末
- 28. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Rails開発のメリット 迅速にシステムを開発できる 簡単に大枠だけ作って、適宜修正しながら迅速に開発 プロジェクト管理 プロジェクトのディレクトリにすべてが入っている プログラム、設定ファイル、ログ、DB定義、サーバ機能 ディレクトリをバックアップするだけでよい DB管理が容易 バージョン管理ができる コマンドでのバージョンアップ／ロールバックができる 他のDBへの切り替えが容易 28
- 29. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Webシステム開発技術 Webシステムの開発技術を 紹介します 29
- 30. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Webシステムの現状 現状 ほとんどのサービスがWeb上で提供 エンジニアもWeb開発のスキルは必須 背景 デバイスの普及→多様な端末で提供できる仕組み クラウドの普及→端末は情報提示に利用 Web APIの公開→マッシュアップによるサービス開発 Google Maps、Twitter、Facebook、Yahoo!など 30
- 31. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Web APIの活用 Twitter連携サービスの開発 Twitter Bot、Twitter連携アプリなどのシステム開発 Twitter APIの調査 外部プログラムからTwitterの機能を利用するための関数群 Web開発技術の習得 WebやDBの知識、推奨フレームワーク：Ruby on Rails 31 プログラム 例：ブログ Twitter DB A P I ① 問い合わせ ② データ処理③ 返信 インターネット 図. Twitter APIの仕組み D D
- 32. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ソーシャルアカウントでのログイン 32
- 33. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Web開発技術の基本 Web開発での必須スキル HTML/CSSは基本中の基本 Webの仕組み：HTTP、GET/POST クライアントサイド：ブラウザ、JavaScript、jQuery サーバサイド：PHP、Ruby、Servlet、DB サーバ運用：Linux、Apache、ネットワーク 学び方は実践あるのみ！ まずはWeb開発の全体的な知識を得る 実際に開発をしながら、自分の得意分野を見つける 33
- 34. 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、サイト全体のデザイン統一 34
- 35. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Joomla!によるWebサイト作成例 35
- 36. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES WordPressで作成したサイト 36
- 37. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 社会的課題解決サービスの現状 背景：ソーシャルメディアの急速な普及 様々な情報（人々の考え方、価値観）の流通や人脈形成 社会的課題解決の必須スキル 世の中にあるほとんどの課題は、一人では解決できない それぞれの人の考え方や価値観が異なるため ソーシャルメディア活用は社会的課題解決の必須スキル 社会的課題解決サービス 地域や環境、人の心などの課題解決が目的 困っている人と助けたい人をつなぐサービス 37
- 38. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES sinsai.ifno 概要 震災情報をみんなで集め公開するサイト ボランティアのエンジニアが震災直後4時間で立ち上げ 38
- 39. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES Wantedly 概要 はたらくを面白くするビジネスSNS 39
- 40. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES ちばレポ 概要 まちの困った情報を集めて解決していく 一般市民がスマホを利用して実証実験に参加 40
- 41. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 第二領域時間管理システム 概要 「７つの習慣」に基づく「重要度」を意識した時間管理 41URL：http://mentoros.tuis.ac.jp/self-reflector
- 42. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES まとめ やったこと Webシステムの仕組み Webシステムプログラミングの実演 Web開発技術と応用事例 皆さんに期待すること 自分でWebシステムを作ってみましょう 勉強会やセミナーに行ってみましょう 分からないことがあれば聞いてみましょう 42
- 43. TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES 終わり ご質問・コメントなどありましたらお願いします 43 東京情報大学 総合情報学部 総合情報学科 システム開発コース 助教 河野 義広 Tel：043-236-1149 E-mail：[email protected] ご不明な点がありましたら以下にお問い合わせください