ヨーロッパで働くIT土方社長のブログ

クロアチアのザグレブって所で受託会社やってます。Webサイトはこちら https://clover.studio/

[ソースコード付き!]ReactNativeとFirebaseでメッセンジャーアプリを作ったよ。

弊社では結構前から自社製のメッセンジャーソリューションを展開しているのですが、そもそもの始まりはこのエントリーで分かるように5年前にむしゃくしゃして作ったSpikaというオープンソースのメッセンジャーでした。

その後オープンソース製品をベースにビジネスをなんかうまい事構築できて、売上のまぁそこそこの割合を製品からの売上で建てられるようになりました。ココらへんの話もいつか記事にする予定です。

現在はオープンソースは閉じて、Spika for Business という製品を展開しています。ただ、今年に入って競合がめちゃくちゃ増えて売上は落ちまくりで、まぁどしたもんだろと思っている感じです。。

もう殆どのソーシャル系のアプリにチャット機能ってあるんですが、今の所の選択肢は

・SaaS形式のSDK (無料〜、カスタマイズ不可)

・自前で作る (iOS/Android/バックエンドで、まぁ諸々300万円はかかる&サーバー管理費用)

の2択で、なんかちょうどいい感じの真ん中がありません。弊社のビジネスモデルはソースコード売り切りで、どっちかと言うと自前形式なのですが、 1から作らなくて良い分コストダウンが可能です。まぁそれでもiOS/Android/NodeJS知ってる人が居て、AWSでもなんでもいいのですがサーバーを構築する必要が出てきます。

もっと簡単に出来ないものかと色々試していたのですが、ReactNativeとFirebaseが一番良さそうって事になって実際に作ってみました。 弊社みたいな零細企業で研究開発なんてコストを掛けられないので、自分のプライベートの時間でほとんど作りました。

と言う大義面分があって頑張ったアピールしちゃったけど、ぶっちゃけ好きだからやっただけです。 本当にReactというかReactとReduxの組み合わせって好き過ぎてドキドキしてくるんですが、昔好きだったPHPのフレームワークへの愛に似てる気がしますね。 Ubuntuのデスクトップが好きだった時もそういう感じでしたね、どうでもいいけど。

長々と書いた上記は全部後付っすね

というわけでホイッと

github.com

テストコードとか書いてないし、まぁDisられるんだろうな。。。 なんかブラック企業とかコメント欄で言われてたし。。 まぁいいんだけどね。好きなだけDisってくれ

というか、建設的な意見を言ってくれる人はIssueに英語でコメントお願いします。

RNとFirebaseの組み合わせについて

家族が寝てからの2,3時間毎日やって1ヶ月半くらいですかね。ざっくりで100時間位かかった気がします。いやぁいいですよ、ますますReact愛が深まりました。Firebaseも必要最小限なものを超簡単に使える形で利用できるのでサクサク進みます。最初はLambdaをベースにAWSって考えてたんだけど、結構複雑で途中で折れました。仕事だったらやるけど、シンプルなものを作るには合わないかなー。AWSとFirebaseを比較すること自体間違っているんだけど、とりあえずメッセンジャーに必要なものはFirebaseだけでもどうにかなりそうです。

利用しているReactのライブラリは

ちょっと癖があるけど便利なUI集です。

Firebaseのアプリ版のRN用のラッパーですね。RNでFirebase使うなら必須だと思います。 ライブラリ自体のバグとか今の所ないし、大体の機能が今のところ使えてる

チャットのUIのみのライブラリ。これだけで2週間は開発工数を減らせた気がする。

タブからスタック型のナビゲーションまで全部面倒見てくれます。ナビゲーションはReduxとは独立して動かしたくて それがちゃんと出来たから更に好きになりました。

がっつりReactNativeを使ってみて気になった所

序盤のよくわからないままやってる時が辛い

CRNAとかExpoとかの関係性がわかってなくて、とりあえず動いているけどなんかよくわからない時期が結構辛かった気がします。 ちょっとしたことでググりまくって2,3日たったとか。まぁなんでも最初はそうっちゃそうですが。。 ReactとReduxとかはWebで結構やってるので、Javascript周りもあやふやな知識の人がやると大分辛い気がする。

XcodeとAndroidStudioを結構開く

ハイブリッドと言いつつも、iOSとAndroidの基本的な知識がないと辛い。 例えば、"react-native link" というコマンドがあるのですが、これがいつも使えなくて、Redditにクソ投稿する位頭にきました で返信をみると、めんどくさいですが手動でリンクしたほうが良いという結論に致しました。

iOSだけで実装を進めちゃうとAndroidで実行した時に死ぬ

デバッグは常に二つのデバイスでチェックしないとすげー巻き戻しをするリスクがありそうです。

このくらいかなぁ。まぁ一通り山を超えたらサクサク進むようになった気がします。

まとめ

メッセンジャーを立ち上げたい場合って、iOS/Android/NodeJS/サーバー管理のかなり幅広い知識が必要とされるのですが、ReactNativeでマルチプラットフォーム化して、Firebaseでサーバーレス化することで、まぁ知識量的には1/3か1/4位になる気がします。もちろん、経営者視点ではコストも下げる事ができると思います。 すべて1から作る場合はまぁ1000万円くらいの予算は必要だと思います。まだMVPの段階でそんなコストもかけられず、エンジニアも確保できず、歩留まりしてる人ってかなりいると思います。そういう人こそこういう製品を賢く使ってコストダウンして次に繋げるプロダクトが作れるようになったらいいですね。

まだまだ機能的には全然なので、今後ゆっくり開発していく予定です。

将来的には、簡易SNSがさくっと立ち上げられるような製品にしたいですね。昔OpenPNEという製品があって、みんなこぞってコピってマイナーなSNSを立ち上げていたじきがあったのですが、そんな感じで誰でも気軽に自分のソーシャルアプリを作れるようにしたいです。

もし関わりたいという人が居たら気軽に声をかけてください。

会社を立ち上げた頃に経験したありえないスタッフの言動 Top10

炎上に便乗した自虐ネタがヒットしてるので、ついでに温めていたネタを投稿します。

弊社はまぁもうなんだかんだで10年でいろいろ問題も勿論ありますが、安定してきた感が出てきました。 自分もエンジニアで、業務でも普通に書いているし、子どもたちが寝てからもコードを書いてたりするので、 まぁどちらかと言うと職人気質の奴らが集まってきます。(プライベートで勉強はしないけど)

なので、まぁ最近は変なやつみたいなのはめっきり居なくなって、特に問題は起きていないのですが、 会社を始めた3年はまともな人材なんて全然来ないのでもうホント大変でした。

そんな期間に起きた今じゃ考えられないことをリストアップしてみました。

第10位「二日酔いだから遅刻します」

このくらいはもう普通ですね。ヨーロッパでは新卒は一番立場が低くうちのような小さい会社は 新卒ばかりで、学生気分が抜けないんでしょうね。

第9位 「二日酔いだから早退します」

むしろもう今日は帰れって言ったこともありますね。

第8位 「二日酔いだからちょっと寝てくる」

寝てスッキリしてその後仕事に集中したいと言う気持ちの現れなので、逆に関心しました。

第7位 (昼飯時に)「ビール飲んで良い?」

顔では笑いながらぶっ殺してやろうかと思いましたが、聞いてくるだけまともだと自分に言い聞かせました。

第6位 (アプリ何個も作ったのを実績に入社した社員)「if文ってどうやって書くんですか?」

試用期間だったので、次の日にクビにしました。

第5位 社内恋愛中のスタッフの母親がオフィスに殴り込みして、別の関係ない女性社員を殴打

殴打された女性社員は割とテキトーな奴だったので事なきを得ました。社内恋愛中のスタッフはバイト だったのでしばらく時間を置いて契約を打ち切りました。

第4位 (育児休暇に入ったスタッフにちょっとした事をお願いしたら) 「追加費用出すならやるけど?」

いや、こっちも悪いけど、務めてた頃は早退とか遅刻とかまぁある程度目をつぶるじゃないですか。 お互い様だしねって。で、育児休暇に入った後に、彼女しか出来ない事があって1時間位の作業をお願いしたら 追加費用払えと。勿論お願いはせず、プライベートでも使ってる会社で支給してるPCを速攻で返却してもらいました。 改めて文章にすると自分も子供だったなって気はする。。。

第3位 「恋をしちゃったから仕事に集中できない」

大真面目にちょっと話があるって別室に連れてかれてこのセリフを言われました。 爆笑を全力で抑えつつ、「出来るだけがんばって」って伝えました。。

第2位 「ソファーにコンドーム(使用済み)があるんですけど。。。」

犯人は未だに分からず

第1位 「二日酔いだから休むわ」(出社初日)

出社の初日にメールで連絡がありました。もう怒りというか自分の人を見る目の無さに頭を撃ち抜きたくなりましたね。 そして彼は更に出社初日に減給され、伝説の社員になりました。 しかし、自頭は良いのか今は僕の次に高い給料を貰ってるエースエンジニアですね。が相変わらず酒癖は悪いです。。

会社を立ち上げたすぐはこういう人たちをまとめ上げて売上を立てないといけないので大変でしたが それはそれで楽しい思い出だった気もしますね(白目)

弊社がプライベートでは一切勉強させない3つの理由

axia.co.jp

これが話題になっていますね。

弊社のエンジニアでプライベートで勉強している人は殆ど居ないと思います。業務内でエンジニアが自然とスキルアップ出来る様にマネージャーが作業を割り振ります。会社としてエンジニアのスキルアップまで面倒見るのが今の時代風なのかと思いますが、自分なりになぜそうなったか考えてみたのでまとめてみました。

1. そんなこと強要したりそんな雰囲気を出したら退職しちゃう

一回社員を集めてそんな話をしたんですよね。そしたら、全員で大反対に合い、その後何人か辞めていきました・・笑えないですね。 個を重んじるヨーロッパの文化の気合の入りようは半端ないです。こいつらは死んでもプライベートを優先します。 欧米の会社も、一緒に遊んだりしてる写真をアップしたりして、うちは楽しいよ!アピールが凄いのもわかりますね。

2. 放っておいたら売上が下がる

まぁんじゃ好きにせーよってほっとくじゃないですか。一生その給料でやってろよ。と。そうなると会社としてのレベルが上がらないので売上が上がらないどころか下がります。そうすると給料が上がらないので不満が溜まってもっと給料のいい会社に行っちゃいます。お前ら一旦なんなんだよって感じですよね。なのでしょうがないので業務内で社員のスキルアップの面倒も会社が見ます。そうじゃないと自然淘汰されます。

3. そもそも勉強しているような人は零細企業には来ない

せいぜい20人位の会社にそんな優秀な人は来ても速攻でもっと良いところ行っちゃいます。

まとめ

いろいろ辛いよ

最近ブログ書いてなかったのでネタとして投稿してみましたww

上記の会社はなんか最近良く聞くし、業界でも有名だし優秀な人が来るんだなぁって気がします。 羨ましいですね。

はてなだと優秀な人が多いからわからんかもしれないけど、プライベートの時間で勉強する人って凄い優秀だからね! 自信持ってください。仮にあなたが経営者でプライベートで勉強する社員が居たら大切にしてください。

うちでも何人かそういう人が居ますが、今はマネージャーで一番いい給料貰っています。 感謝感謝ですよ。

起業したい人はがんばってね!

追記

↓会社立ち上げ時に苦労した事を記事にしました。

cloverstudioceo.hatenablog.com

爆速フルスタック開発のスタックを考える

フルスタックってなんなんでしょうね。

まぁどうでもいいですが、前回の投稿の流れで色々調べていました。ちょっとGraphQLを理解していなくて、GraphQLだけではどうやら完全自動でデータベースのつなぎ込みは出来ず、Resolverの部分でGraphQLとDBもしくは別のデータソースとつなぎ込みのロジックを定義する必要があるみたいです。 どうせなら、テーブル定義だけしてあとは全自動でAPIを作ってくれると爆速で嬉しいので、調べたところできるっぽいです。

バックエンド

どうやら、ORマッピングツールでモデルを書き出してからそれからGraphQLのスキーマを生成するみたいです。 これをやれば全自動でテーブル定義からAPIを吐き出してドキュメントまでデキそう(多分)

フロントエンド

これつかってWebアプリも出来たらフルフルスタックになっていいね。 https://github.com/vincentriemer/react-native-dom

こんな感じかなー、フロントのいい感じのBoilerplateあったら誰か教えて。

バックエンドに関してはこれを参考にしました。 https://medium.com/@tomlagier/scaffolding-a-rock-solid-graphql-api-b651c2a36438

GraphQL + Lambda + ReactNativeを使えば爆速でアプリ開発できそう。

www.slideshare.net

これみたんだけど、多分だけどスキーマさえ定義すれば、とりあえず読み書きだけするAPIに関してはロジックを書かないでいいってことだよねぇ。 ちょっと複雑なAPIは書く必要ありそうだけど。クライアント側でロジック書くのは気持ち悪いし。

しかし、タイトルにもあるけど

  • GraphQL

  • Lambda

  • ReactNative の3点セットで爆速でアプリ開発できそうじゃないかねぇ。 ついでに

callstack.github.io

UIはこれにすればデザインももう出来てるというね。。 やるとしたら掲示板チックな何かかなぁ

500ブックマーク行ったらやろうかな(行かないで終わるパターン)

PHP製の軽量CMSの紹介

現在会社のマーケティング改革を行っていまして、会社のWebサイトを作り直したり、製品の個別サイトとかもリニューアルしています。 で、なんかチョイ前まではWordpressでいいじゃんって風潮だったと思うのですが(今もかな)、前回Webサイトをリニューアルした時に 自称Wordpress知ってるマンを雇って、のちのちはデジタルマーケティングをやってもらおうと思っていたのですが、ものすごい時間がかかった挙句に ありえないHTMLを吐き出していて、デザインもよく見るとマージンとパディングが所々バラバラでそれはもう酷い物でした。

で、結局僕が自分でHTMLを書き出してブログ部分だけ適当なテンプレートを入れたWordpressを使ってサクッと終わらせました。

何が悪かったのかその酷いWordpressのテンプレートとかを見てみたのですが、VisualEditor的なプラグインが入っていて、WYSIWYG方式でやっていました。 それで、要素ごとにStyleパラメーターでマージンやらパディングやらを設定していました。。

Wordpressが悪いわけじゃないけど、全体的にそういう使われ方をしているのがなんかWeb標準(古っっw)時代のWebサイトの制作に合わない気がして、なんかいい感じのCMSが無いかなーと思って探して下記の2つを実際に使ってみました。

getgrav.org

picocms.org

どちらも主な機能的にはこんな感じです。

  • データベースを使わないで、ファイルとフォルダの構造でコンテンツを作っていく

  • Markdown形式でかける

  • テンプレートはTwigフォーマットが使える

どちらも素晴らしいのが、DBを使わないのでGitでコンテンツも管理できるところですね。 Gravの方が所謂CMSっぽくて機能は豊富です。管理画面とか簡易アクセス解析も入っていたりしますが、僕のおすすめはPicoですね。 なんか3日くらいで自分でも作っても良いんじゃないかってレベルの薄さなのですが、それが逆によくて、シンプルなサイトだったらこれでいい気がします。 ブログとか入ってくると厳しいので、その場合はGravで良いと思います。

なんか流れ的にはWordpressみたいにリッチなものよりもこういうシンプルなものが主流になってくる気がします。 新しくWebサイトを作るときに参考にして見てください。

ReactNativeがAndroidTVアプリをサポート

なんとなく0.55のリリースノートを見ていたら。

Building For Apple TV · React Native

Android TV device support

ってしれっと書いてあるじゃないですか。AndroidTVアプリって動画関連の自社サービスでもやっていない限りそこまで本腰を入れて開発する物でも無いと思うので、ReactNativeでサクッと簡単にかけるとなると色々アイデアがありそうな気がします。オフィスにある無駄にスペックが高いのに使っていないテレビ用になにか表示したりとか。。

やってみたいなー