ç´ äººãŒåŠå¹´é ‘å¼µã£ã¦Webサービスを作った話

半年ほどかけてWebサービスのプロトタイプを公開するところにこぎつけたのでその記録をしておこうと思います。

 

作ったもの

一言で言うと「Webブラウザで閲覧したページの履歴を共有するSNS」です。

History（履歴）を流す（stream）ということでHistreamと名付けました。

Chrome拡張をインストールして、ウィンドウを選択し、オンにするとそのウィンドウで見たページ履歴を自動でアップロードします。

そしてWebサービスでアップロードされた履歴を整理された状態で確認したり、友達の履歴を読めたりします。

 

 

Chrome拡張:　Histream-Extension - Chrome Web Store

Webサービス:　https://histream.io

 

作ろうと思ったきっかけ

今から一年前、大学２年の冬にワンタップダイエットというアプリを作っていました。プログラミングするのはほとんど初めてで、やりたいことを実現するためにGoogleで検索しては疑問が出て、それを更に検索しての繰り返しでした。

一日中多くのページを閲覧していくと、あの情報どこでみたっけ？と言った問題や、そもそも自分と全く同じようにプログラミングについて検索し続けた人は過去にもたくさんいたはず、その人の履歴を見たいな と考えていました。なので、

1. 自分の検索履歴をトピックごとに、重要なものだけ表示する
2. 他の人の履歴を眺めて参考にできるWebサイトを作る

この二つを実現するサービスを作ろうと決めました。

 

具体例

やりたいことは「Webサービスを作る」ために調べた履歴のみが欲しい ということです。ブラウザ標準の履歴から「Web」と検索しても、タイトルに「Web」というキーワードが含まれていないとヒットしません。

もし「Webサービスを作る」ために調べた履歴のみが抽出できたら、後からそれを見返して復習ができたり、学校の後輩に「僕の履歴を見たら作り方が分かるよ」と教えてあげることが出来ます。

 

まずプロトタイプを作る

前回アプリを作ったとき、コードを書く前に仕様をしっかり決めるということが一番反省すべき点でした。一つの機能を思いついて、すぐに実装を始めても後からこの機能はやっぱりいらなかったということが数多くあり、モチベーションやスピード感が落ちていきました。

 

今回、初めに行ったのはAdobe XDでコードを書かずモックを作る作業でした。それをたたき台にして、話し合いをし作るべき機能をリストアップしていきました。

実装の第一段階として、閲覧した履歴を全て公開するプロトタイプを作ってみました。Firebaseを使えばサーバーサイドのコードを記述せず端末間のデータのやり取りを用いたサービスを素早く作ることが出来ます。

友人に使ってもらい、友人がページを訪れた瞬間に自分の画面にその情報が送られてきたのを見て、とてもジワジワきたのを覚えています。これがもし、知り合い１００人に使ってもらい、遠くからブラウジングの様子を見れたらとても楽しいと思いました。

 

 とは言っても履歴を公開するのはハードルが高い

プロトタイプを作って必要だと思ったことが２つあります。

ユーザーが何の履歴を公開するか選択できるようにする

最初のプロトタイプでは全ての履歴を強制的にポストしていました。人には見られたくないものはフィルターに掛ける必要があります。そこで取った手法が「ウィンドウにタグを付ける」というものです。これは「今からこのウィンドウで調べたことは全て公開するよ！」と設定出来るようにすることであり、その際「これから〜〜について調べるよ！」と同時にタグを付けることで、履歴を後から分類することもできます。

もう一つ必要だと思ったことは

個人で使っても使えるツールにする

調べ物をする際に便利な機能を用意することでまず一人のユーザーに使ってもらいます。SNSを作る際に「人が集まらないとサービスとして成り立たない」では素人が作るにはかなりハードルが高いと思いました。

Histreamには選択した文章を速攻で保存できる機能や、検索過程を要約する機能などがあります。

 

締め切り

Histreamは大学の友人と二人で作りました。最初の４ヶ月くらいはプロトタイプを作って、チームメンバーにレビューを求めると言ったことを繰り返し、作るものがようやく確定したころバックエンドの作り込みを始めました。

締切がない時期はふたりとも作業が全く進まなかったりということがありました。このような素人の学生が集団で趣味でサービスを作る際に締め切りを決めるというのが一番重要だと感じます。その締切も、人前で発表すると言った逃れられないものが効果を発揮しました。

Histreamを作る前にコンテストに出ると決めていました。むしろコンテストあり気で開発をしたと言った具合です。このコンテストは九州の学生のみが参加出来るというコンテストで半年間に渡りイベントが開催され、メンターさんにSlackで質問ができたりします。最近、福岡はこのような支援が盛んなのでとても助かります。優勝賞金が３０万というのもモチベーションが上がります。

できたもの

ぼくがSwiftを始めようと思って検索した履歴がこんな感じになってます。

https://histream.io/user/maltz/hub/swift

履歴の重要度は、お気に入りをしたか、選択した文章を保存したか、何回訪れたかで判定しています。よく調べものをする人や、これから何か勉強しようと言った人に使ってもらえると嬉しいです。

 

情報発信、収集ツール界隈の位置づけとして図を作ってみました。

左下が文脈が低く（断片的な情報）プライベート。右上が文脈が高くソーシャル。と言ったプロット図です。Histreamは、ブラウザ標準の履歴に比べて圧倒的にソーシャルであり、Qiitaに投稿するほどトピックについて精査された情報ではないけど、読み手がマイニングしたら価値のあるものと言った感じです。

 

本当にやりたかったこと

僕たちが開発を始めた根本的なきっかけは「ソーシャル・ネットワーク」の世界観に憧れを抱いたからです。夜な夜なファミレスに集まり、タスクやプライバシーポリシーを決めたりするのが楽しかったし、コンテスト前の緊張で徹夜でプレゼン資料を作ったり、無駄にインフラを整えたりそんなことを真剣にするのがやりたかった という感じです。

ですがせっかく頑張って作ったので、少しでも多くの人に使ってもらえるように開発を続けていきたいです。

 

Chrome拡張:　Histream-Extension - Chrome Web Store

Webサービス:　https://histream.io

 

以下、無駄に整えたインフラや、開発に用いたツールなどをまとめておきたいと思います。

 

開発に用いたもの

コードを描かずモックを作る

画面遷移を作るAdobe XDと、グラフィックをデザインするSketchを使用しました。

1. コードを書いてプロトタイプを作っても大幅な変更をする際に、腰を上げづらい
2. コードでやりづらい表現も画像なら直ぐやれる

Githubの環境を整える

todoやマイルストーンの管理、機能の議論、後からメンバーが増えた時のためにGithubを使ったissueベースの開発にしました。

モバイル向けのCode Hubとデスクトップ向けのJasperを使用しました。

Chrome拡張を作る

https://github.com/yeoman/generator-chrome-extension

これを用いてchrome拡張の雛形を作成しました。ライブリロードやminiy、uglifyもやってくれます。ES6の文法も同梱されているESLintで学ぶことが出来ました。gulpの使い方も参考になります。

バックエンドはまずはBaaS

いきなりバックエンドのコードを書かず、以下の理由で最初はFirebase用いてAPIを作成しました。

1. 大幅な変更をする際に、腰を上げづらい
2. リアルタイム通信が簡単にできる
3. バックエンドのデプロイ等必要なくスピードが速い

バックエンドを作る

Firebaseでサービスの全体が決まったら、バックエンドを自前で開発します。Chrome拡張はjavascriptで開発します。バックエンドも同じ言語でやりたかったので、Node.jsで開発しました。

http://blog.slatepeak.com/creating-a-real-time-chat-api-with-node-express-socket-io-and-mongodb/

https://yoshiokatsuneo.gitbooks.io/meanstack3/content/chapter1.html

が最初の取っ掛かりに参考になりました。

バックエンドをデプロイする

当初はEC2で環境を構築していましたが諸々面倒に感じ、周辺環境が整っていて扱いやすいHerokuにデプロイしました。mongoDBやSocketのアドオンも揃っています。そして、標準でhttpsなので対応の必要もありませんでした。

Webサイトを作る

今回のサービスは、 Chrome拡張 ↔ Node.js ↔ Webフロントという構成です。フロントはバックエンドと分離し、Angular.jsで作成しました。APIを叩いて表示するだけのサービスでしたら速攻でつくれます。ですが、HashbangなどSPAのデメリットも痛感しました

https://github.com/yeoman/generator-angular

Chrome拡張と同じようにyeomanのgeneratorでひな形を作成します。

この本でAngularを知って以来、ずっと使っています。

CSSフレームワークにAngular materialを用いたので簡単にいい感じの要素が作れます。

Webサイトをデプロイする

APIと完全分離したので、静的なファイルをホスティングするだけで済みます。S3とCloud Frontを用いて配信しました。Cloud Frontの設定でhttpsの対応も無料で可能です。

ドメインを取る

S3などAWSを使っているのでroute53で取得しました。

histream.ioで年間4000円です。

Rollbarの導入

クラスの友達に使ってもらった結果、様々なバグでサーバーが落ちました。ログを取って自動でGithubにIssueを立ててくれるRollbarを導入しました。Rollbarは無料でプライベートレポジトリを登録できます。

CIツールの導入

werkerを導入しました。こちらも無料でプライベートレポジトリを登録できます。

プルリクエストを送ったら、マージする前にwerkerでテストを行い、通ったらマージ出来るように、そしてMasterにマージしたら自動でデプロイするようにしました。

werkerはChrome拡張、Node API、Webフロントの三つのレポジトリで活用しています。

メールサーバー

無料で独自ドメインに対応したメールサーバーを借りれるサービスとしてZohoを使用しました。無料で25アカウント管理できます。