LoginSignup
3
1

More than 3 years have passed since last update.

SnovelというSNS的なものを作っているのでエコシステムをまとめる

Last updated at Posted at 2019-05-24

ほぼ自分向けの糞記事なので投稿した次の日には私のQiitaアカウントが消えているかもしれません。おや、誰か来たようだ...

駅ノートでつながるSNS Snovel

https://snovel.tinykitten.me/
「Snovel」というネイティブアプリのサービスを思いつきで作ってます。
「完璧を目指すよりまず終わらせろ」とか「爆速」とかいう言葉が流行ってますが、自分はそうは思ってないです。いうて自分の頭上にはザッカーバーグの写真が壁に貼ってありますが...
IMG_7439.jpg

駅ノート、田舎の駅とかに置いてありますよね。
それをソーシャル化したら面白いことが起きるんじゃないだろうか、と特に何も考えずに作っています。
Swarmに似てるとか駅メモクローンとか日本語を理解できない捻くれた人たちに言われてますが、駅ノートでつながるSNSなので独自路線です。全く同じSNSとかは今の所思いつかないですし、他のサービスを代替するようなサービスではありません。それぞれいいサービスです。そんなサービスを潰そうなんて思ってません。

品質の高いアプリを作るための環境を作る

失礼しました。ヘイトが溜まっており愚痴だらけになってしまった・・・。
Snovelの開発を進められているのは、まあ言ってしまえばだいたいお友達のおかげです。
Snovelの開発にはテスターが不可欠です。
テスターがいるからこそ、待ってくれる人がいるというやる気が出る、リアルなフィードバックが得れていいアプリを作るための糧になる。
いいアプリを作る(作ろうとする)環境としては、当然とは言えますが利用者をリスペクトすることだと思います。UXデザインなんてそんなものじゃないでしょうか。
結局アプリを使うのは人間なので、いい椅子、良いパソコン、もちろん重要ですが、人のことを考えることができる環境を持つことがUXを最適化する最適解だと私は思っています。
爆速で作れればいいというわけではないと思います。結局使うのは人間、爆速を否定するつもりは一切ありませんが、ゴミを作ればただのゴミです。

開発言語を見極める

自分はSnovelの開発言語にJavaScript(実際はTypeScript)を用いています。
なぜJSかというと、慣れ親しんでいる言語だからです。
JSは糞とか言われてますが、否定はしませんがやはりフロントエンドエンジニアとして慣れている言語で作るほうが一番品質が良くなると考えたからです。
また、Snovelは勉強目的で作っているというのもあり、フロントエンドエンジニアとして必要なJSで書こうと思ったからです。

アプリエンジニアでObjective-C、SwiftとかKotlin、Javaに慣れているならそちらで作ったほうがいいと思います。

ただ、JSのエコシステムを使ってクロスなアプリを作るのも悪くないと思います。よほどヘビーなアプリを作りたいわけではなければJSのハイブリッド若しくはネイティブアプリ開発のパフォーマンスの過不足はないと感じております。

フレームワークを考える

Snovelの開発では、React Nativeを用いています。
なぜReact Nativeかと言うと、ブラウザで動く必要があまりないアプリであり、それなりにCordova等より高速で動いてほしかったからです。
CordovaとReact Nativeのベンチマークで比較した経験はありませんが、アプリがヌルサクと動くことはUX上重要なことだと思います。Cordovaのアプリがヌルサクで動かないとは言ってはいませんが...

別にCordovaがいいならIonic等使ってもなんの問題もないはずです。個人的にReactが好きでHTMLベースでアプリを書くのは少し抵抗があっただけです。

mBaaSを使う

Snovelでは、Firebaseをバックエンドに用いています(バックエンドと言っていいのだろうか?)
先程爆速について触れましたが、もちろん否定はしていないつもりです。
むしろ、開発者の手の動きが早ければそれだけユーザーに対して迅速にアプリを提供できるということです。これもUXに影響すると思います。

そこで、フロントエンドエンジニアでも迅速により良いUXを提供するために、Firebaseを採用しました。

バックエンドもできるフルスタックは目指してはおりますが、Snovelでバックエンド開発が必須になるような場面が想定できないのでFirebaseで事足りると思います。

いざとなればCloud Functions+ExpressでAPIが提供できるのも強みだと思います。実際、Cloud FunctionsでFirestoreのHookを用いてユーザー情報の登録、投稿された画像のサムネイル生成、ユーザー退会時の後処理等を任せています。

どうでもいいですが、個人的にはバックエンド言語でGoが好きです。

迅速にテスターにデプロイする方法

Snovelは、テスターに対しての迅速なデプロイ手法としてDeployGateを採用しています。
他にはExpoを検討しましたが、Expoはネイティブなモジュールを使用できないため、断念しました。
Snovelではふんだんにreact-native linkが必要なライブラリを使っているので...こっちのほうが絶対テスターにとっては楽だと思うんですけど。

DeployGateは、アプリストアに公開しなくともiOS、Androidに対してアプリを公開できます。
テスター登録をした人に対しては、新しいバージョンを公開するたびに相手に通知が行きます(Androidのみ、iOSはメール通知等)。とても便利です。

迅速なフィードバックを求めるために

Snovelのテスターのほぼ全員には、Snovelテスター用Discordに加入してもらっています。

これは、Snovelテスター同士の議論や、情報交換バグ情報の迅速な共有に非常に役立っていると思います。

また、WebhookとNPM Script、継続的インテグレーションシステムを合わせれば、デプロイ時にテスターに通知することができます。

後述するSemVerの仕組みを同時に用いれば、バージョン番号を用いたテスターに対するバージョン管理の強制に役立ちます。

バージョニングを活用する

Snovelでは、バージョニングの仕組みとして、SemVerを採用しています。
まあ自分は説明が下手なのでSemVerの解説についてはリンクを参照してください。
SemVerを用いれば、バージョニングが楽になります。
開発が楽になるということは、よりよいUXを利用者に迅速に提供することに繋がります。
Snovelでは、SemVerCloud Functios、Cloud Firestore、Expressを用いて、バージョン不一致が発生した場合アプリ内で警告する仕組みを構築しました。
この仕組みで、テスターがすぐに新しいバージョンがリリースされたか気づくことが可能となります。
Screenshot_20190524-202452_Snovel.jpg
また、NPM ScriptとWebhookを連携させることによって、Discordにnpm versionでSemVerを用いたタグ付けを行うだけでpostversionスクリプトが発火し、Discordに新しいバージョンがデプロイされる予定ということを告知することが可能になります。
スクリーンショット 2019-05-24 23.35.48.png

Lintを使わないようなやつをエンジニアと呼ぶな

Lintを知らない人はエンジニアじゃないのは当然ですよね。
Snovelでも当然TSLintを使っています。
最近人気なコードフォーマッターは、Prettierだと思います。Snovelでも採用しています。

テストを書かないやつをエンジニアと呼ぶな

子供の頃はテストが大嫌いで、「大人になればテストなんて書かなくてええんや!!」と思っていましたが、そんな事ありません。エンジニアであればテストを書くのは当然です。
Snovelは、優れたUXを目指しています。当然テストも書きます。継続的インテグレーション(CI)の恩恵も受けます。

おわりに

乱文失礼いたしました。
まだちょっと言い残したことがあれば追記したいと思っています。
正式リリースをお待ち下さい。
公式ウェブサイト
ポートフォリオ内の記載

更新履歴

  • 2019/05/24 初版
  • 2019/05/25 テスター追加、壁の画像追加

スペシャルサンクス(テスター、鍵垢省略)

ぶっちゃん!(@x86q)
kichie(@kichie_dev)
huruya(@huruya2100)
makotia(@hs6a)
かずにゃん(@tearaikazuki_i)
たーる(@taruscript)
はなまる乾燥機(@Kansoki_JK)
くろ(@98kuro)
桜木ねいろ(@nirsmmy)

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1