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