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