初めてWebサービスを作ってみた結果

FavClipperについて詳細

Negipoyoc

はじめに

Fav ClipperというWebサービスを年始の休みを利用して作ったのですが、公開直後より予想以上にバズってしまってありがたい限りです。

「個人でアクセス数が短時間に大量に来るサービスを作って、リアルタイムで監視していた」という経験はなかなかないな～と思いました。加えて、それを踏まえて得た知見があったので、いくつか共有しておこうかと思います。

前提

FavClipperについて

GoogleAppEngine(GAE)にのっけたサービスで、ビュー以外の部分はGo言語で記述されています。

例えばOauth認証してTwitter APIを叩いたり、APIから取得したツイートデータの処理などはGoで組んだロジックで行っています。

自分について

作り始めた頃のスキルはこんな感じ

  • GAE使ったことある。Golangはある程度書いたことがある。(趣味レベル)
  • HTML/CSS/JSはほぼ書いたことない。(このサイトもサイトジェネレーター使っているので)
  • TwitterAPI使ったことなし。Oauth認証もわからない。
  • 前職の研修でGAE/GoでWebサービスを作る練習はした。

つまり、 GAE/Goの扱いはなんとなく慣れてきたけど、やろうとしてることへの知識はほぼない って感じです。
趣味で何か作る時は知らない要素を必ず1つは入れるようにしているので、期間的にも内容的にも良いハードル設定ができたかなと思います。

3日から作り始めて10日の深夜にリリースしました。

何から手を付けたか

当然ながらまずは知らないことを理解しなくてはいけないということで、やることの要素分解をしました。

やること

  • TwitterAPIを叩くためにOAuth認証について学ぶ。
  • OAuth認証していいね欄からツイートを取得する
  • 取得したツイート群(JSON)をパースして配列にする。
  • サイトのベースとなるデザインを考える
  • HTML/CSSの雛形を作る
  • HTMLテンプレートに↑のロジックで得たツイート情報を流し込む。
  • GoogleAppEngineにデプロイする

という感じですね。 赤文字が知らないこと、青文字が知っていることです。

わかんないことは全部ググって早く解決します。以下が解決の流れ。

TwitterAPIを叩くためにOAuth認証について学ぶ。

一番分かりやすい OAuth の説明

ここを参考にしました。短時間で読める割に、画像つきで解説してくれているので理解が捗りました。

OAuth認証していいね欄からツイートを取得する

Go言語でGoogle,Twitter,FacebookのOauth認証をしてメールアドレスを取得するまで

ここを参考にしました。 認証のサンプルを用意してくれているので、これと上で得たOAuthの理解を元に、組み替えて自分で扱いやすいようにパッケージ名や関数を変えたりしました。
(MVCパターンで作っているので、それに合うように。)

HTML/CSSの雛形を作る

以前、0から全部自分でやろうとして地獄を見たので、何もわからないうちはBootstrapに頼ろうと思いました。(それが本質でもないのでこだわりの優先度が低い。)

というわけで、 Framework Template Editor というものを使ってみました。

Bootstrapで共通ヘッダーを作るだけでしたが、雛形のHTMLをわかりやすく出力してくれたので、有効利用できました。

サイトのベースとなるデザインを考える。

「誰がターゲットか」「どんな情報を見せたいか」というのをベースに考えます。(当たり前)

こういう時、「自分が欲しいものを作る」という考え方をすると、すっとデザインが頭に思い浮かぶので楽です。

とはいえ、やっぱり試行錯誤していくないので、作って壊す勇気が大事だなぁとしみじみ思います…。

※今回は何もわからなかったので、デザイナーの人に意見を聞いたりしました。

前職同期のデザイナーの人がそんなこと言ってたのをふと思い出したのですが、実体験を伴うとより身にしみますね。

得たもの

GoogleAppEngineの便利さ

個人サービスで怖いのが、鯖落ち 、課金死です。ですが、GAEではそこらへんも対策する機能があります。

鯖落ち対策

GAEの仕組みとして、鯖落ちしにくいようになっています。

アクセス数などに応じて自動でスケールするため、例えば今回のように急激に伸びて凄い数のアクセスが来ても、重くなったり落ちるといったことは無いだろうと考えています。
(実際に苦情などはありませんでした。)

アプリケーション自体がGoogleのインフラに乗るので安定しますね。ありがとうGoogle。

従量課金制ゆえの課金死対策

GAEでは(厳密には違うけど)アクセスが多いと課金が発生して、個人で払うのが難しい額が請求される可能性ももちろんあります。

ここはGAEで用意されている「割り当て」機能によって、防いでいます。
割り当ては、アプリケーションが設定した費用制限を超えて実行されることがないようにするという機能です。つまり設定した額以上課金が発生するとサービスが落ちる！

初日は、多くの人の目に触れて欲しかったのである程度お金かかってもいいかなと思って、大きめに設定してました。

この2点で対策が取れたので夜も安心してぐっすりと眠れたというわけです。良かったですね。

アクセスの分類

時間

平日は12時~13時がかなり多かったです。一方午前4時5時はほぼアクセス無かったですね。

休日は、特にどこがというのは無かった印象です。

アクセスの種類

iOSが45%、Androidが27%、Windowsが25%、Macとその他が3%でした。

スマホやタブレットが72%のユーザということで、こういうサービスはPC向けよりもスマホ向けに設計するのがいいかもですね。

これが1番勉強になりました。

アクセスの特徴

初日は気になってGoogleAnalyticsを眺めていました。それで、フォロワー10万超えのような人にRTされた瞬間、リアルタイムアクティブユーザがすごい勢いで増えました。

そりゃそうでしょって話なんですが、実際目にするとびっくりします。

HTML/CSSの学び、jQueryの便利さ

Webデザインに関しては、Tipsを公開している方がとても多いので、やりたいことを元にキーワードをググっていくと良いのだなと思いました。

便利なjQueryプラグインを公開している方もいますので、調べてて楽しかったです。

FavClipper自体は機能が少ないので要らなかったですが、凝り出すと自分でJSを書く必要は出てくるので、その時はまたググってやっていきましょう。