Webシステムプログラミング20150413

Webシステムプログラミング
2015年4月13日（月）
総合情報学科システム開発コース
助教河野義広
出張講義＠佐倉西高校, April 13, 2015

TOKYO JOHO UNIVERSITYTOKYO UNIVERSITY OF INFORMATION SCIENCES
目次
 自己紹介
 Webの基本的な仕組み
 Webシステムプログラミングの実演
 Web開発技術
 Webの応用事例
2

自己紹介
 名前：河野義広（かわのよしひろ）
 所属：システム開発コース助教
 専門：情報工学、社会情報学
 社会的課題をシステムで解決する！
 研究テーマ：ソーシャルメディアの社会的影響
 ソーシャルメディア活用＆パーソナルブランディング
 ソーシャルメディアを「いかに人生に活かすか！」がテーマ
 各ソーシャルメディアを自ら使い込んで実践研究
 学生のキャリアデザイン支援、教育現場における情報教育
3

河野の情報発信
 ソーシャルアカウント
 Twitter：@yoshi_kawano
 Facebook：河野義広
 ブログ
 個人ブログ：「穏やかに楽しく生きる」研究者のブログ
 ITmediaでのブログ連載：アカデミックが見た社会
4

皆さんに質問
 Twitterを使っている？
5

皆さんに質問
 Facebookを使っている？
6

皆さんに質問
 LINEを使っている？
7

皆さんに質問
 ブログを持っている？
8

ソーシャルメディアとは？
 質問
 ソーシャルメディアという言葉を聞いた事がありますか？
9
ソーシャルメディア（Social Media）
社会性のある媒体＝情報を伝えるもの

ソーシャルメディアの特徴
 マスメディアの特徴
 例：新聞、テレビ、雑誌、ラジオなど
 新聞社、放送局などから大衆に向けた一方的な情報発信
 一部のプロのみが情報発信する
 ソーシャルメディアの特徴
 例：ブログ、Twitter、Facebookなど
 誰もが参加・発言できる
 双方向でのやり取り
 情報の拡散（リツイート、いいね！）
10
一人ひとりが主役、個人が活躍する時代

ソーシャルメディアの具体例
11

皆さんに質問
 Webを知っている？
 インターネット上で文書をやり取りする仕組み
 正式名称：World Wide Web、WWWやWebと呼称
 Webの利用目的は？
 ☑ 検索 ☑ メール ☑ 買い物
 ☑ ニュース ☑ カレンダー
 ☑ SNS（Twitter、Facebookなど）
 ☑ データ共有（Googleドライブ、Dropboxなど）
12

クラウド（Cloud）とは？
 概要
 インターネット上に計算資源、データ領域を確保
 多くのサービスがWebブラウザのみで利用可能
13
インターネット
SNS
動画
メール
地図
買い物
利用
端末

Webの基本的な仕組み
14
あなたのPC
① Webサーバ
にアクセス
② ファイルを
受け取る
③ 画面を作って
表示
HTML
Webサーバ

動的なWebサイトの仕組み
15
あなたのPC
① Webサーバ
にアクセス
② プログラム
を実行
④ 画面を作って
表示
HTML
Webサーバ
データベース
プログラム
③ 実行結果を
受け取る

動的Webサイトとは？
 何ができるのか？
 ユーザの入力に応じて結果が変わるサイト
 例）掲示板、Amazon、Twitter、Facebookなど
 プログラム
 ユーザの入力を受け付けて処理を実行
 実行結果をPCに返す
 データベース（DB）
 ユーザのデータを保管
16
プログラム
データベース

プログラムの例
 概要
 アンケートの選択によって結果が分かるページ
17

DBの例
 概要
 メンバーの名前と学年を記録
 1行に1人分のデータ
18

Webシステムプログラミングの実演
実際に簡単なWebシステムを
作ってみます
19

作成するWebシステム
 概要
 遊んだゲームのリストを管理するシステム
 基本設計
 以下の項目をDBに記録
 タイトル、ジャンル、日付、評価（1～5）、感想
 データの登録、変更、削除ができること
 実装方法
 Ruby on Railsを利用（後で説明）
20

作成するWebシステムのイメージ
21

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

Webシステム作成（2）
 4．表示の日本語化
 ビューのファイルを編集
 5. ジャンルを一覧から選択できるようにする
 ジャンルをDBに追加
 一覧から選択できるようビューを編集
 # rails g scaffold Genres name:string
 # rake db:migrate
 6. サーバの再起動
 # rails s –p 3005
23

ビューの編集
 方針
 ジャンルをDBから選択する方式
24
<div class="field">
<%= f.label :genre %><br />
<%= f.collection_select :genre, Genre.all, :name,
:name, :selected => @game.genre,
:prompt => "選択してください" %>
</div>

DBの中身を覗いてみよう
25
図. ゲームテーブル
図. ジャンルテーブル

Ruby on Railsとは
 特徴
 Webアプリケーション開発の「フレームワーク」
 オブジェクト指向スクリプト言語「Ruby」で記述
 MVC（Model-View-Controller）アーキテクチャ
 モデル、ビュー、コントローラでの役割分担
 RubyとRails
 Ruby：プログラム言語
 Rails：Rubyで記述されたフレームワーク
 フレームワーク：ツール、ライブラリ、設定ファイル等
26
Ruby
Ruby on Rails
図. RubyとRailsの関係

MVCアーキテクチャ
 MVCアーキテクチャ
 モデル：DBとの連携
 ビュー：画面表示
 コントローラ：ユーザからのデータ入力
27
コントローラ
モデル
ビュー
DB
図. MVCアーキテクチャの概要
ユーザ
端末

Rails開発のメリット
 迅速にシステムを開発できる
 簡単に大枠だけ作って、適宜修正しながら迅速に開発
 プロジェクト管理
 プロジェクトのディレクトリにすべてが入っている
 プログラム、設定ファイル、ログ、DB定義、サーバ機能
 ディレクトリをバックアップするだけでよい
 DB管理が容易
 バージョン管理ができる
 コマンドでのバージョンアップ／ロールバックができる
 他のDBへの切り替えが容易
28

Webシステム開発技術
Webシステムの開発技術を
紹介します
29

Webシステムの現状
 現状
 ほとんどのサービスがWeb上で提供
 エンジニアもWeb開発のスキルは必須
 背景
 デバイスの普及→多様な端末で提供できる仕組み
 クラウドの普及→端末は情報提示に利用
 Web APIの公開→マッシュアップによるサービス開発
 Google Maps、Twitter、Facebook、Yahoo!など
30

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

Web開発技術の基本
 Web開発での必須スキル
 HTML/CSSは基本中の基本
 Webの仕組み：HTTP、GET/POST
 クライアントサイド：ブラウザ、JavaScript、jQuery
 サーバサイド：PHP、Ruby、Servlet、DB
 サーバ運用：Linux、Apache、ネットワーク
 学び方は実践あるのみ！
 まずはWeb開発の全体的な知識を得る
 実際に開発をしながら、自分の得意分野を見つける
33

CMS（Content Management System）
 CMSとは
 Webの専門知識がなくても、Webサイト管理ができる
 一般利用者でもWebサイト運用が可能
 コンテンツとレイアウトの分離
 ライターとデザイナーの分業が容易
 代表的なCMS
 WordPress：ブログ、Webサイトとして広く利用
 Movable Type：企業のWebサイトとして利用
 OpenPNE：mixi同様のSNSを構築可
 NetCommons：eラーニングサイトに利用
 Joomla!：高機能なCMS、サイト全体のデザイン統一
34

Joomla!によるWebサイト作成例
35

WordPressで作成したサイト
36

社会的課題解決サービスの現状
 背景：ソーシャルメディアの急速な普及
 様々な情報（人々の考え方、価値観）の流通や人脈形成
 社会的課題解決の必須スキル
 世の中にあるほとんどの課題は、一人では解決できない
 それぞれの人の考え方や価値観が異なるため
 ソーシャルメディア活用は社会的課題解決の必須スキル
 社会的課題解決サービス
 地域や環境、人の心などの課題解決が目的
 困っている人と助けたい人をつなぐサービス
37

sinsai.ifno
 概要
 震災情報をみんなで集め公開するサイト
 ボランティアのエンジニアが震災直後4時間で立ち上げ
38

Wantedly
 概要
 はたらくを面白くするビジネスSNS
39

ちばレポ
 概要
 まちの困った情報を集めて解決していく
 一般市民がスマホを利用して実証実験に参加
40

第二領域時間管理システム
 概要
 「７つの習慣」に基づく「重要度」を意識した時間管理
41URL：http://mentoros.tuis.ac.jp/self-reflector

まとめ
 やったこと
 Webシステムの仕組み
 Webシステムプログラミングの実演
 Web開発技術と応用事例
 皆さんに期待すること
 自分でWebシステムを作ってみましょう
 勉強会やセミナーに行ってみましょう
 分からないことがあれば聞いてみましょう
42

終わり
 ご質問・コメントなどありましたらお願いします
43
東京情報大学総合情報学部総合情報学科
システム開発コース助教
河野義広
Tel：043-236-1149
E-mail：ykawano@rsch.tuis.ac.jp
ご不明な点がありましたら以下にお問い合わせください

Webシステムプログラミング20150413

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (6)

Destaque

Destaque (9)

Semelhante a Webシステムプログラミング20150413

Semelhante a Webシステムプログラミング20150413 (20)

Mais de 義広河野

Mais de 義広河野 (20)