webサービス超入門 · 次の絵の大前提...
TRANSCRIPT
WEBサービス超入門 ～技術のわからない人がWEBサービス開発を目指す第一歩～
サークルアラウンド株式会社 代表取締役 佐藤正志
自己紹介
2
• サークルアラウンド代表取締役 • 契約社員・フリーランス等で技術者として活動し、2012年5月起業佐藤正志
• 現役プログラマー • プログラミングトレーナー • いつか島を買って仲間と楽しく仕事します
• 現役プログラマー • プログラミングトレーナー • いつか島を買って仲間と楽しく仕事します
自己紹介しましょう
•お名前とかニックネームとか •今日こちらに来たきっかけ、動機など。
•普段こんなことしてますよ～。
3
アジェンダ•基礎知識編 •WEBサービスとは •一般的なシステム •言葉・語彙 •開発初期編 •企画を形にするコツ •表現手法とプロセス •まとめ
4
基礎知識編 ～ WEBサービスとは ～
WEBサービスとは？
6
ネットワーク （HTTP通信）
クライアント サーバー
アプリケーション WEBブラウザ
データベース（DB）
WEBサービスの一生
7
運用リリース製造設計企画
テスト
実装 （コーディング）
β
α
運用に入っても新機能追加・機能修正で成長する
方法論•ウォーターフォール •設計・実装…と順番に行う。手順を戻す事はしない。
•アジャイル •ごく小さな実装から繰り返し開発でリリースへ向ける。
•リーンスタートアップ8
～ 一般的なシステム ～
そもそも何をするのか
•クライアント（見た目） •ブラウザにHTMLで表示する • CSS、JavaScript • アプリ（Android、iOS） •サーバー（保存・情報集約）
10
LAMP（ランプ）
11
Linux（OS）
Apache （HTTPサーバー）
MySQL （DBサーバー）
PHP （言語）
LAMP（ランプ）
12
Linux（OS）
Apache （HTTPサーバー）
MySQL （DBサーバー）
PHP （言語）
WEBサービスの技術者だったらまず間違いなく知っている基礎の基礎
HTML
PHPでHTMLを作る
保存・検索
当日解説入りで見てください！
最近の話•LAMPに従わない形も増えてきています（ex. Rubyの開発など）
•Herokuのようなサービスを利用するとLAMP等の知識が少なくてもシステム開発自体はできたりします。
•ただし、最低限の事は勉強しないと後で苦労します。
13
当日解説入りで見てください！
～ 言葉・語彙 ～
言葉を合わせるとイイこと
•業界や、背景の違う人と話す時、同じ言葉が別の意味で捉えられてしまう場合があります。
•ある程度合わせることができると勘違いが減り、遠回りが減ります。
15
次の絵の大前提•役割分担を絵にしただけなので、こういう職種の人が全ていなければいけないわけではない。
•この絵は言葉の定義を合わせるためにも使用している。 •一般的なIT技術者の社会・現場で通じる言葉で定義している。 •通常はこのうちの複数を兼ねる人達がお互いの領域を住み分けながらモノを作る。
•ex.「サーバープログラマがインフラエンジニアも兼ねる」「クライアントプログラマがサーバのフロントエンドも見ている」
•これを統括する製品のオーナーがいる形もあることは多い兼任もありうる。
16
当日解説入りで見てください！
IT技術者（エンジニア）の世界
サーバー
ブラウザ
ネイティブアプリ
クラウド
DB
サービスWEBAPI
デザイナー
クライアントプログラマ
サーバーエンジニア
ネットワークエンジニア
データベースエンジニア
インフラエンジニア
UI
UI
Logic
Logic
テスター
フロントエンドバックエンド
UXデザイナー
サーバープログラマ
当日解説入りで見てください！
IT技術者（エンジニア）の世界
サーバー
ブラウザ
ネイティブアプリ
クラウド
DB
サービスWEBAPI
デザイナー
クライアントプログラマ
サーバーエンジニア
ネットワークエンジニア
データベースエンジニア
インフラエンジニア
UI
UI
Logic
Logic
テスター
フロントエンドバックエンド
API設計
画面設計
DB設計
ビジネスロジック設計
マッシュアップ
UI設計
セキュリティ
パフォーマンス
OSインストール
xUnit自動テスト
テストシナリオ
運用・保守
サーバープログラマ
UXデザイナー
当日解説入りで見てください！
IT技術者（エンジニア）の世界
サーバー
ブラウザ
ネイティブアプリ
DB
UI
UI
Logic
Logic フロントエンドバックエンド
Objective-C
JavaScript
Java
PHP
Ruby
Java
C#
Python
JavaScript
HTML
エンタープライズ（企業向け）に多い
・技術者の熟練度
・周辺ライブラリ/環境
・システムの用途
Swift
当日解説入りで見てください！
休憩
～ 言語を取り巻くエトセトラ ～
この辺の話をします
22
Linux（OS）
Apache （HTTPサーバー）
MySQL （DBサーバー）
PHP （言語）
フレームワーク
アプリケーション
ライブラリ・SDK
言語
プラグイン・アドオン テーマ
当日解説入りで見てください！
PHP
24
•LAMPの「P」 •比較的理解しやすい言語 •WordpressやECCubeがこれで作られている
•受託でシステム開発するフリーランスに使い手が多い
当日解説入りで見てください！
Ruby（Rails）
25
•Ruby on Railsというフレームワークで開発することが多い
•比較的理解しやすい言語 •顧客に価値を届けることに特化している（開発効率 > 実行効率）
•スタートアップで利用されることが多い
当日解説入りで見てください！
Java
26
•コンパイルしてコードに関するチェックと実行速度の最適化が行われる
•比較的理解しやすい言語 •大人数での開発によく用いられてきた •社内の業務システムや金融系でよく利用されている / 最近ではAndroidの開発に利用される
当日解説入りで見てください！
JavaScript
27
•ブラウザ上で動く言語として知られていたが、最近はサーバーでも使われることもある
•比較的理解しやすい言語だが、奥が深い •jQueryのようなライブラリとセットで使われている事が多い
•ブラウザ上で演出したい場合にはほぼ必須
当日解説入りで見てください！
開発初期編 ～ 企画を形にするコツ ～
WEBサービスの一生
29
運用リリース製造設計企画
要求から要件へ•要求「人が xx したい」 •ex. 限定されたユーザだけが投稿したい •要件「システムが xx すべき」 •ex. ログイン機能を提供すべき •ex. ログインユーザだけが投稿機能を利用できるべき
•ログインはメールとパスワード？指紋認証？30
当日解説入りで見てください！
表現手法とプロセス
32
•サービスの目的 •機能の洗い出し、細分化 •優先度
大きい単位から小さく
当日解説入りで見てください！
サービスの目的
•「誰に対して」 •「何を提供する」
33
当日解説入りで見てください！
例：ブログサービスの目的
•「文章の書き手に対して」 •「多くの人に文章を閲覧させられる仕組みを提供する」
34
当日解説入りで見てください！
機能の洗い出し、細分化
•登場人物の整理 •各人物が行える操作
35
当日解説入りで見てください！
UML/ユースケース図
36
記事を書く
記事を編集する
記事を削除する
記事を読む
記事にコメントする
書き手
閲覧者
当日解説入りで見てください！
優先度•現在の開発ではサービスを作りながら育てるようなリーンスタートアップなどを適用するので重要になってくる。
•「削ること」でシステムは早くリリースできて、時間/コストで有利になる
37
当日解説入りで見てください！
優先度を考えるヒント
•「最も大事なことは何か」 •「何が無ければシステムが成り立たないか」
38
当日解説入りで 見てください！
優先度をつける
39
記事を書く
記事を編集する
記事を削除する
記事を読む
記事にコメントする
書き手
閲覧者
当日解説入りで見てください！
次は主に機能要件を決める
•画面遷移図 •ワイヤーフレーム •DB設計
40
当日解説入りで見てください！
画面遷移図
41
ログイン マイページ （投稿一覧）
投稿編集
新規投稿
投稿閲覧トップ （公開投稿一覧）
当日解説入りで見てください！
ワイヤーフレーム
42
フッター
ヘッダー（グローバルメニュー）
サイドバー （最新投稿一覧）
Emailパスワード
ログイン
当日解説入りで見てください！
DB設計
43
ユーザー情報 email パスワード
•ER図まで描けるならそれは素晴らしいですが、難しいですし相談しながらになると思います。
•最低でも「こんな情報が保存しておきたい（抜け漏れはあるかも）」くらいがあると会話しながら他のことも合わせられるでしょう。
投稿情報 タイトル 本文
コメント情報 本文
ユーザー一人に たくさんの投稿の意味
投稿一つに たくさんのコメントの意味
当日解説入りで見てください！
まとめ
•最低限の概念を会得するべし •チームのメンバーと言葉を合わせるべし
•目的から機能を細分化すべし •優先度を付けられると尚よし
44
当日解説入りで見てください！
気になること 聞いてみたいこと ありますか？
普段の弊社の活動について
自分のペースで開発できて 経験者になんでも質問できる場
【初心者歓迎】 プログラミング相談所兼 もくもく会＠渋谷
https://circlearound.doorkeeper.jp
毎週土曜日
のんびり成長している 時間はない！
さらに！
ありがとう ございました！