エンジニアが1人でWebサービスを自作する方法

  • このエントリーをはてなブックマークに追加
増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜サービスデザイン編
第1回:2014年4月1日公開 01:00:00

増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜サービスデザイン編

受講する

本授業では、私が昨年のゴールデンウイークに作った、シンプルなメモ帳WEBアプリ「wri.pe」をどうやって作っていったのかを解説します。

普段、プログラマとして仕事をしていると、企画やデザイナーの人と組んで分担して作業しますが、個人サービスでは全てを一人で行う必要があります。これらを一人で行うために全体をどうデザインするか、についてお話しするので、みなさんのWEBサービス企画の参考になればと思います。

授業一覧
増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜サービスデザイン編
2014年4月1日公開
01:00:00

本授業では、私が昨年のゴールデンウイークに作った、シンプルなメモ帳WEBアプリ「wri.pe」をどうやって作っていったのかを解説します。

第1回目の今回は、サービスを作る動機・設計・デザインについてお話しします。1年ほど、個人としてWebサービスを作っていなかったので、個人的に欲しいと思っていたアプリを、新しい事を試しつつ作る事にしました。

今回の授業ではメモ帳アプリを1週間で完成させることを目標に、アプリの企画を立てる方法、時間の割り振りの仕方から、ページのデザインを考えるところまでを解説します。

普段、プログラマとして仕事をしていると、企画やデザイナーの人と組んで分担して作業しますが、個人サービスでは全てを一人で行う必要があります。これらを一人で行うために全体をどうデザインするか、についてお話しするので、みなさんのWEBサービス企画の参考になればと思います。

  • 自己紹介&アジェンダ
  • 02:42
  • wri.peってなに?
  • 02:36
  • wri.peを作る動機
  • 04:17
  • 風呂グラミングでPCを水没させたとしたら
  • 04:40
  • 日常の煩雑なメモを整理したくなった
  • 04:20
  • メモアプリに欲しい機能とは?
  • 02:00
  • サービス設計
  • 02:59
  • 技術選択にあたっての基準
  • 03:26
  • デザイン
  • 03:05
  • 参考となるデザインがある、dribbble
  • 05:00
  • 印象に残らないサイトに手を加える
  • 03:57
  • まとめ
  • 03:38
  • Q:無料のサービスの場合は、サーバー代等の費用はどうまかないますか?
  • 01:02
  • Q:コードを書く前に設計図は書きますか?
  • 00:57
  • Q:デザインとプログラムではどっちから先に始めたのですか?
  • 00:37
  • Q:「wri.pe」の名前の由来は何ですか?
  • 01:09
  • Q:ブックマークのアプリ気になります。
  • 02:06
  • Q:自分のアイデアを作る前に既存アプリの調査はしないのですか?
  • 00:52
  • Q:「自分が使いたい」という以外に、サービスを作る上で大切な企画の部分って、どういったものになりますか?
  • 01:20
  • Q:プロトタイプを作る時に、テストコードは書きますか?
  • 01:03
  • Q:趣味で作った自作のWebサービスがヒットして、個人だけで対応できなくなったら、法人化して、人を雇った方がいいですか?
  • 01:39
  • Q:海外と国内のユーザー比率はどのくらいですか?
  • 00:40
  • Q:すらすらっとプログラミング可能だと言うRubyに興味があるんですが、どれくらいオススメですか?
  • 01:10
  • Q:「増井予約システム」ってなんですか!?
  • 02:22
  • 課題発表
増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの作り方〜開発編
2014年4月8日公開
01:00:00

本授業では、私が昨年のゴールデンウイークに作った、シンプルなメモ帳Webアプリ「wri.pe」をどうやって作っていったのかを解説します。第2回目の今回は、【開発編】です。

wri.peは、メモを取得、保存するためのAPIを提供するサーバ部と、ユーザインタフェースを提供するHTML5で書かれたクライアント部の二つから構成されています。

サーバ側は、Ruby on Railsを使い、全部で500行程度で構成されており、PHPなどRails以外の言語/フレームワークを使っても手軽に実装出来るサイズになっています。

クライアント側は、HTML5の機能を積極的に使い、軽快に動く事を第一に考えています。wri.peで一番評価されているのは、この軽快な動作によるものです。

HTML5を駆使したアプリというと、UIに凝った重厚なアプリを指すことが多いですが、wri.peではHTML5 Application Cache、Local Storage、Session Storageなどを積極的に使い、ブラウザながらネイティブの様な操作感を提供しています。

本授業では、これらのサーバ・クライアント側の開発についてコードを示しながら解説します。

増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの広め方〜リリース編
2014年4月15日公開
01:00:00

本授業では、私が昨年のゴールデンウイークに作った、シンプルなメモ帳Webアプリ「wri.pe」をどうやって作っていったのかを解説します。第3回目の今回は、【リリース編】です。

前回作ったコードを実装し、ユーザーに使っていただくためのリリース作業を行います。リリースの前には、各種OS/ブラウザを行いたいのですが、一人で、色々な環境でテストをするのは大変です。そこで、Seleniumというブラウザを用いた自動テストツールを使い、多様な環境でwri.peのテストを自動的に行う環境を構築します。

wri.peでは、メンテナンスを自分で行わないで済ませるために、Ruby on RailsをサポートしたPaaSの「Heroku」を使っています。

Herokuは、一般的なRailsの実行環境以外に、全文検索や監視、統計情報などをアドオンとして提供しており、これを駆使することで、サーバ管理者が居なくても24時間、安定してサービスを提供することができます。

本授業では、リリースにあたって行った上記、についてを解説できればと思います。

  • 自己紹介&アジェンダ
  • 01:43
  • 前回の振り返り
  • 03:40
  • Herokuへデプロイ
  • 04:55
  • VPSをかつては使っていた
  • 00:30
  • PaaSとは?
  • 03:30
  • PaaSのデメリット
  • 04:20
  • PaaSの維持コストの内訳
  • 03:34
  • Railsを使うなら、New Delic
  • 02:04
  • 自動テスト
  • 03:32
  • ブラウザを使った各環境のテスト
  • 04:19
  • Capybaraを使ってより簡単にテストする
  • 04:41
  • 自動でのテストの動かし方を確認する
  • 03:00
  • まとめ
  • 00:09
  • Q:テストは全ロジックを通すテストコードを書いているのでしょうか?
  • 01:02
  • Q:herokuを使わないとしたら、postgresqlとmysqlどっちを使いますか?
  • 01:02
  • Q:herokuの場合、dyno / workerのスケールアウトはどのように判断しますか?
  • 01:04
  • Q:初心者が簡単にWebサービス開発できるRailsのチュートリアル入門書があれば紹介してください。
  • 00:41
  • Q:アクセス負荷の話が少しありましたが、レスポンスタイムの計測などはしましたか?
  • 00:39
  • Q:テストではOSやブラウザ毎のテストも全て走るようにしているのでしょうか?
  • 03:11
  • Q:オープンソースにするとソースにバグがあった時に悪意のあるハッキングなどされないか怖い気がしてしまうのですが、そのあたりは如何でしょうか。
  • 02:22
  • Q:poltergeistなどサイレントなWebドライバーもありますが、そのあたりのものは実用性はどうでしょうか?
  • 01:27
  • Q:d3.jsなどの凝ったjavascriptのライブラリもどのPaaSでも動くものでしょうか?
  • 01:05
  • Q:ローカル開発環境はVagrantを利用しているのでしょうか?
  • 01:57
  • 課題発表
増井雄一郎の「wri.pe」を事例に学ぶ、自作サービスの広め方〜PR・継続できる目標の立て方・改善編
2014年4月22日公開
01:00:00

本授業では、私が昨年のゴールデンウイークに作った、シンプルなメモ帳Webアプリ「wri.pe」をどうやって作っていったのかを解説します。第4回目の今回は、【リリース後の広め方・継続できる目標の立て方・改善編】です。

私が「wri.pe」をリリースした後には、多くの人に使って貰うために広報活動を行う事にしました。広報活動も、仕事であれば社内のPR部門の人が行ってくれるのですが、今回は一人で行いました。

「wri.pe」を多くの人の目に触れてもらうため、プレスリリースやHacker News、ブログ、ソーシャルメディアを駆使する方法を解説します。

リリースした後も、継続的にバージョンアップを行っていますが、機能を増やすことよりアプリの世界観を壊さないことを第一にしています。「世界観が大切だと考えている理由」についても、ここで解説します。

また、「wri.pe」は現在では1万を越えるユーザーに利用していただき、ネット上には多くのレビューやご意見をいただいています。ここから、私が「wri.pe」を1人で作り、広める活動の中で得たものや、サービスを自作するべき理由についても、振り返って考えてみたいと思います。

タグ
担当の先生
この授業を受けたい(884人)
その他 806人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×