2018-12-20に更新

Microsoftの技術でもちゃんとしたサービスを作れるんだぞ！！

個人開発 Webサービス C# .NETCore Azure React

読了目安：11分

はじめに

個人開発サービスに用いられている技術 Advent Calendar 2018 の18日目です。昨日はShinjiさんの「Firebase Cloud Function をローカルで実行するときにはまった点」でした。

こんにちは、@isaitoです。今回は今年の4月にリリースした「みんなの洋楽ランキング」と言うサービスでMicrosoftの技術をベースに開発しています。巷で「まいくろそふとのぎじゅつ？」と言われることが多いので、それなりに出来るんだそってことを書きたいと思います。

みんなの洋楽ランキングとは？

一言で言うと最新のビルボードチャート(Billboard Hot 100 Chart)からランキング形式で洋楽情報をお届けするサービスです。

「洋楽」、「洋楽ランキング」のワードがGoogleの検索ボリュームが多い※1にも関わらず、昔の情報※2が多く、リアルタイムで「どの曲やアーテイストが流行っているのか？」という視点で洋楽を探せるサービスがないことに気付き、もともと洋楽好きなことを加え、技術的なアプローチによってリアルタイムで情報を発信出来るサービスが作れるのではと思い勢いで作りました。

※1 「洋楽」、「洋楽ランキング」ともに月間２０万近くの検索数があり、これは比較的多い方だと感じています。
※2 日本で流れている洋楽は1年以上前の曲が多く、日本の音楽配信サービスは日本で売れる曲を発信するので最新の曲を発信しない傾向にあります。また、ブログなど筆者が更新しない限り新しい情報に更新されないので、その点で「昔の情報が多い」という表現を使っています。

記事を書こうと思ったきっかけ

あまりサービスの技術について自分のブログ以外で発信することはなかったのですが、Quitaでバズった@hrz31さんの記事を読んだことで考え方が変わりました。@hrz31さんの記事はサービスの想いやなぜこの技術を使ったか明確に言語化されており、僕も少なからずみんなの洋楽ランキングに想いがあるので情報を発信出来る場でちゃんと言語化しないといつか忘れてしまうだろうなぁと思い、ここに書かせてもらいした。この機会を与えていただきだらさんには感謝致します。

はじめたDM使った相手が@hrz31さんでした

個人開発を行う上で心掛けていること

サービスを作る上でユーザーのニーズに答えるのは一番重要ですが、個人開発で運用する上では、運用出来ない、または日常生活に支障が出る恐れがあるので自分が出来ること、出来ないことを含めて考えました。

自分が出来ること

普通の人が知らない知識を発信

10年以上ビルボードを追っかけていたこともあり「洋楽」という点については、普通以上の知識はあります。普通の人が知らない情報を発信することで洋楽に関連のなかった人たちに興味を持ってもらえると思いました。

個人開発ならではの様々な角度からアプローチ

キュレーションサイトを運用するならブログ、WordPressなどのやり方がありますが、決まった機能しか使えないことがあるので多様性に欠けてしまいます。個人開発であればユーザーが欲しい機能や届けたい機能を柔軟に作ることが出来ます。さらに企業がやらないニッチな視点で提供出来ることもあるはずです。

情報を発信するスピード

個人であれば夜中でも早朝でもいつでも発信出来ます。みんなの洋楽ランキングは本家ビルボードのサイトよりも早く発信出来ています。多分どのサイトよりも早いんじゃないかな？

自分が出来ないこと

人を集める

これは出来ないこともないですが、個人と企業の資本（ヒト、モノ、カネ）差を考えると比較的困難なものとなります。さらに私自身、知名度が全くありません（笑）これを前提に会員登録やユーザーがサービスの機能を使ってもらうことは非常に敷居が高いと感じています。そのため、みんなの洋楽ランキングは「閲覧」を主体にしたサービスを提供しています。

大きな機能を継続してリリース

一人でサーバーサイド、フロント、デザインを運用しているので、大きな機能を継続してリリースするのはなかなか難しいのです。さらに週5日で仕事し家族もいるのでサービスに関われる時間は多くても平日１時間＋週末３時間程度となります。作れば作るほど、技術負債がたまるので「作りすぎない」ことを常に心がけています。

開発期間

思い立ってから３ヶ月ぐらいでリリースしました。ただ、実際の開発期間は１週間程度でリリースするまでの間はダラダラと思い悩んでました。個人開発ならではの「これ誰かの役に立つのかな？」「お金の無駄にならないか」などの葛藤と戦っていました。つい最近まで１ヶ月ぐらいは気合いいれて作ったなぁと思ってGithubみたら全然開発してないことに驚愕しました笑

使用技術・開発ツール

ざっくりとした構成図は画像の通りです。

フレームワーク

.NET Core

Microsoft社が提供している.NET Coreを使用しています。.NET Coreからマルチプラットフォームで開発が出来るようになり、Windows以外での開発が可能になりました。.NET Coreは更新が活発でありMicrosoftのメインとなる技術で勉強するにはもってこいと思い選定しました。個人開発サービスに用いられている技術 Advent Calendar 2018で２つのサービスに使われているんだ！マイナーなんて言わせないぞ！

言語

C

こちらもMicrosoft社が提供している言語です。仕事で使っているのですが、C#の仕事ってC#の機能を全く活用していないことが多いのです（矛盾していますがC#の仕事をしている人であればわかってくれるはず）。特にC#が好き！というわけではないのですが、C#の全てを知っているわけでもないのに他の技術に触れるのは抵抗がありましたのでこちらを採用しました。今後はReactを中心に開発する事が多くなりそうなので、がっつりC#を使うことは少なくなりそうです。

React & TypeScript

フロントはReact & TypeScriptで作成しています。添付した画像の部分で活用しています。

SPAで使っているわけじゃないので、アーキテクチャ的にもシンプルなReactを採用しました。Angularは経験があるのでVueの方が抵抗が少ないとおもったのですが、フロントはシンプルなことが鍵となると思い、マークアップが肥大化することで絶望する※jsxの採用、今後の伸び代（ReactNative）も含め触ってみたかったことが選んだ理由です。局所的にReactを使っているのでTypeScriptは必要なかったかなー（めんどくさい）なんて思ったりしてます。あと名前がダントツでかっこいい（笑）

※僕は肥大化すると発狂するので自ずとシンプルに作るだろうという想定

JQuery

わざわざReactでやる必要ないちょこっとしたものも。三行以上書く場合はReactに持っていきます。

PaaS/IaaS

基本はAzureをベースに用途によって様々使い分けています。サーバーのことは詳しくないので、基本的にはAzureにお任せする方向で運用しています。

App Service on Linux

AzureのPaasです。値段の安さとせっかく.NET Coreを使っているのでLinuxサーバー運用しています。AzureのPaasはCIやリソース管理も含まれているのでものすごく楽です。.NET Coreは、Linuxサーバーだと約10%メモリ使用量が増加しました。これはバージョンが上がるにつれて改善するようです。

プルリクエストの数＝リリース数です。175回もしているのか。。

SQL Database

AzureのSQL Serverです。値段の安さと安定感があります。今の所２Gで事足りているので月600円程度で済みます。DBのCRUDに関わる開発を行う場合は、Azure上でテスト用のDB立てて開発終わったら削除しています。

Functions

Azureのサーバーレスで、みんなの洋楽ランキングではバッチ処理に活用しています。毎時のYoutube再生数の更新やWikipedia取り込みのバッチを動かしています。App Serviceに負荷をかけない為にこちらを活用しています。無料枠で事足りています。

Logic Apps

ワークフローを自動化するサービス。こちらも定期処理に活用しています。１ヶ月6円ぐらいでめっちゃ安いです。

メール配信

Send Grid

SendGridはクラウドベースのメール配信サービスです。Azureでは、メールサーバの活用は推奨されていないのでこちらを利用しました。なんと25000通も無料枠があります。メール配信は、問い合わせやエラーが発生したときのログを自分に送る為に活用しているので無料枠で十分にまかなえています。値段も含め、運用面でもSendGridにお任せ出来るので非常に便利です。外国のスパムメールばっかりくる、どうにかして。

SSL

Let's Encrypt

無料でSSLが使えます。非常に助かっています。

バージョン管理

Git & Github

僕はクライアントソフトを全く使わないので基本はコマンドベースで差分確認等はVSCodeで運用しています。自作ライブラリを
submoduleするとfunctionでも使えるのでなかなか使えます。さらにMicrosoftがGithubを買収する前からAzureでの連携はGithubが一番しっくりする気がします。masterブランチにマージされたらApp Serviceが勝手にデプロイしてくれます。SSLで直接サーバーに入ることはほとんどないです。また、GithubのIssueは、個人開発でも活用した方が良いと思います。すごく適当ですが以下のようにIssue作ってコミットと連携しています。

PC

MacBook Air Mid 2017

もともとMacMiniで開発してたのですが、嫁の機嫌を損ねない為にリビングでパソコンをいじる必要がありました。また個人開発は仕事ではなく趣味と思われがちです。家族との会話がないと理解してくれないことが多々あります。寝っ転がりながらテレビを見ながら開発する手法をこいつで身につけました。

C#ライブラリ

ちょっとマニアックな内容になりますが、利用しているライブラリのご紹介をします。

BuildBundlerMinifier

cssやJsをミニファイやバンドルするライブラリ。以下のように指定すると出来ます。

AngleSharp

簡単にスクレイピング出来るライブラリ。C#でスクレイピングだとHtml Agility Packが出てくるのですが、もう全然イケてないのでこれに助けられています。

Sendgrid

SendGridを使う為のライブラリ。Httpベースより簡単に扱えます。こういうのは可能な限りライブラリを使った方がよいです。常に「自分よりライブラリ作者の方が仕事（更新）は早い」と言い聞かせてます。

DapperSlackOff

DapperSlackOffは私が作ったライブラリです。C#で不満なのは、ORマッパーが非常に弱いこと。EntitiyFrameworkがあるのですが、あまりにも遅すぎるのでStackOverFlowがDapperを作ったぐらいです。Dapperはとにかく早いのですが、ビルダーは提供しないけど、マッピングだけするよというライブラリになっています。簡単なクエリなどはいちいちSQL描いてられないので拡張ライブラリを使うのがテッパンなのですが、不満を解決してくれるライブラリがなかったので自分で作成しました。「手抜きしながらDapperをつかう」という意味が込められています。こちらのライブラリは130行程度で出来ています。

テストも書かなきゃ。。

React

react-autosuggest

react-autosuggestは、サジェストを表示するライブラリです。様々なサンプルがあるので、動かしながら使い勝手を確認出来ます。検索機能に利用しています。

react-youtube

react-youtubeは、ReactでYouTube playerが扱えるライブラリです。試聴機能で利用しています。

その他

Twitter

これは外せないですね。公開直後の数日は全く人が来ないのでTwitterでキーワードを絡めたツイートしてコツコツとみてくれる人を増やしました。フォロワーが多いわけではないのですが350人以上いるのである程度はみてくれているようです。誰でもフォローするとサービスの注目度がわからないので、フォローする人は見極めるようになりました。WEBサービスは、広告を打たない限り地道に増やしていくしかないので運用する辛さと面白さを知れましたね。

ImageOptim

画像を圧縮するソフト。APIもあるらしいのですが、使ってません。もうちょっと成熟したら検討しようかと思います。

これから追加する機能

Serilog & BigQuery

攻めのロギング。ログはトラブルの為にあるものではなく、今後の予測をするための重要なツールです。C#のロギングライブラリで一番パフォーマンスが高いSerilogと言わずもがなのデータウェアハウスのBigQueryをAzure Functionで連携して大量のデータを解析出来るようにします。ちなみにアナリティクスは導入当初から入れてますが、ちょっと弱いかなぁ。。

SignalR

C#の双方向通信ライブラリ。ユーザーがアクセスしているときになにかアクション出来ると楽しいはず！夢が広がるなぁ。

Firebase

Azureで出来ることはまとめたかったんですが、GCPすごいっすね。会員サービスを導入することになったら100%使います。アプリ化も検討しているので、成熟したら必然的に使うようになりそう。

コストはどれぐらいかかっているのか

約２ヶ月前にLinuxサーバーに切り替えたのですが、すべてのサービス合わせて月5000円しないぐらいです。Paasを使っている以上、安くはないですが運用面を任せられるのでよしとします。アクセス数も多いときで月３万弱のPVがあったのですが、この値段で余裕で運用出来ていました。

Microsoftの技術を使ってみて

正直、すごく開発しやすく何も不便はありません。.NET Frameworkだと話は変わりますが、.NET Coreであればnode絡みなど自由度が高く継続してサポートもされるので安心感があります。個人的に不満だったVisual Studioの重さから解放され、辛いところを見つけるのが難しいぐらいです。強いて言えば以下の三つ不満があります。

ライブラリが他の言語と比べ貧弱

そこまで不満はないですが、ORマッパーが微妙、RailsのgemみたいなViewを絡めたライブラリが少ないなどやっぱりめんどくさいことが多いかなと思います。他のフレームワークをがっつり触った事ないので比較しようがないですが。

散々文句言っててあれですが、やっぱりDapperは早いので検索APIが30msの速度が出ています。このしょぼいサーバーではかなりパフォーマンスはいいんじゃないでしょうか？

コンパイルがやっぱりめんどくさい

そもそもC#使うな！って言われそうですが、やっぱりいちいちコンパイルするのめんどくさいです。まぁ強いて言うならってところ。

下位互換が優秀過ぎる

これはむしろ最高なところですが、フレームワークが変わって下位互換が優秀だと一生リファクタしないコードが残りやすいかなと思います。C#と言っても物によって全く作りが異なるので言語やフレームワークによって作りが変わっちゃうのはなぁ。。と言う個人的な気持ちがあります。

ただ、ライブラリに関してもオープンソースになった今はかなり活発なので今後の期待値はすごいです。十分にサービスが作れる環境なことは間違いないかなと思います。

今後について

今の課題は「アクセス数が少ない」ことです。ここでのアクセス数が少ないと言うのは、収益＜運用費となっており私のモチベーションだけで運用している状況はサービスとしては不健全な状態なのでこの表現を使っています。洋楽キュレーションとしては必要な機能が揃ってきたと思っているので、野暮ったく素人っぽいデザインから脱出し、記事数もいろんな方法を使って増やしていきたいと思っています。また、サービスを運用する上で一番大事だと思っていることは「継続」であと数年は続けたいので、技術負債を溜めないように.NET Coreアーキテクチャとともに常に更新していく予定です。サービスの発展が第一優先ですが、Microsoftの技術でもここまで出来るんだぞ！と微力ながら発信していきたいと思っています。