tekitoumemo’s diary

.NET CoreとVue、Angularなどの技術ブログを書いています。みんなの洋楽ランキングを運営しています。

車のWebサービスを作った

先月末、「olcar(オルカー)」という車系のサービスを公開した。

 

 

今のところ個人売買のリンク集という感じ。車業界の悪いところを改善したいという思いで作ったので、段階を踏んで改修していく。

 

なぜ作ったか

単純に車に掛かるお金が高すぎるから。日本において車に掛かるお金でおかしな点が多く(後述する)維持するだけでもお金が掛かる。全ては解決出来ないが「車体の値段が高すぎる」という問題はolcarを通じで解決出来るんじゃないかと思っている。「くるまを身近に」がサービスのコンセプトだ。

 

車に掛かるお金はおかしい

日本において車に掛かるお金はおかしな点が多い。代表的なところで言うと、燃料の二重課税、古い車に課せられる重量税の増税エコカー減税という謎制度がある。燃料の二重課税は意味不明で話にならないが、重量税とエコカー減税は政府と企業が一丸になったビジネス戦略で、日本の景気に重要な車メーカーの利益を上げるために、購買を促して新陳代謝をはかるといった施策である。これらの制度から車は贅沢品という感覚になり、車検など車に関わるものがとにかく高くなっているのが現状である。まだまだおかしいと思う点は腐るほどあるが、この程度にしておく。

 

個人売買の闇

個人売買だからと言って業者より安くて良い車が手に入ると言った虫のいい話はない。よく言われている故障のリスクは個人売買で買うぐらいだからそのぐらいのリスクは考えて買うでしょぐらいに思っているが本当の闇はそこではない。個人的には「価格を提示しないこと」が一番の闇だと思っている。価格を提示しないメリットとしては言い値で価格が決まり、購入希望者の見えないところでオークションみたいなことが行われている。いわば闇オークションみたいなものである。olcarが認知されればこれは確実に改善できると思う。

 

技術

使った技術を紹介。

 

Nuxt.js

一番得意で好きなフレームワーク。UIフレームワークはVuetify、typescriptを採用。もしかしたらJamstackで要件満たせるんじゃね?と思ったが、サービスの性質上、Server Side Rendering(SSR)じゃないとダメだった。nuxtはなにをやるにしても明確な答えがあるから作るのが本当に楽。

 

ASP.NET Core

みんなの洋楽ランキングで作った機能を横展開出来るので引き続き採用。firebaseで作ろうと思ったが、みんなの洋楽ランキングで出来なかったことをやろうと思ったので諦めた。知見は貯まって記事書けたので結果的にはよかった。

 

 

Cloud Run

フロント、バックエンドともにCloud Runを採用。インフラはめっちゃ悩んでいて、はじめはフロントfirebase、バックエンドがGAEと考えていた。クラウドサービスは複数に跨がない、低コストで考えており、実現するとなるとAzureかherokuと考えていたが、cloud runの存在を知り採用した。課題はあるが、ひとまずは満足してるし、スケールも問題ないだろう。

 

Cloud SQL

GCPで統一したかったので自ずとcloud sqlになるが、高い。ここでもAzure、herokuに逃げそうになったが、ひとまず安いリージョンで対策した。

 

 

正直1ヶ月もあれば作れるレベルのサービスだが、モチベーションが続かず半年以上放置してしまった。ハマることが1ミリもなかったので、逆に工数が見積もれてしまいモチベーションが低下してしまったのもある。まぁ、なんであれ公開出来てよかったので、しばらくはマーケティングに注力しつつ、細かい改修をやっていく

2021振り返って

今年も同じく

2020振り返って - tekitoumemo’s diary

仕事のこと

正社員になった

大企業なりの環境の良さは感じてるが、悪いとこも感じている。技術的にはサーバー、フロントともに得るものがなかったが、リーダー職として得るものは少なからずあるかも?と感じている。ストレスは死ぬほど溜まる。

リーダー

リーダー職として昇進した。中途入社でいきなりリーダー職になった自分に対してチームメンバーは思うことがあると感じている。実績もない自分に対して信頼がないメンバー間において、チームマネジメントをやろうとしても素直な回る環境ではないので、メンバーと同じように作業をしている。業務知識とか全くないので一番下っ端として作業して、ある程度信頼を得られれば良いかなと思っている。ストレスは死ぬほど溜まる。

個人サービス

癒し。これがないと仕事やってられん。

みんなの洋楽ランキング

細かい機能を追加したぐらい。今年はseoが下がり、アクセスが減った。月平均5万PV程度で、ギリ元は取れているのでまったりと継続していく。

olcar(オルカー)

ローンチしましたって言えるレベルにしたのは12/28。この完成度でまさかの一年掛かった。仕事、子育てと時間が取れないに加え、モチベーションがとてつもなく低く、半年以上放置してた。インフラは結構悩んだけど、今後予定している機能を満たすためにはgcpが一番優れてると判断した。今の完成度はともかくちゃんと課題をもって作ったので、のちに言語化する。


技術

個人サービスはNuxtjsのssrモードやcloud runを使ってるので仕事で満たされない技術欲を満たせている。NuxtJS最高すぎてAngular意味わからんってなってる。cloud runは実際使えるの?みたいな印象を持っていたので、疑問が晴れてよかった。去年はOSSで4PR出したが、今年は0(issue2つだけ)。もう少しやりたい気持ちはあるけど、タイミング合えばやろかなと思ってる。

プライベート

仕事部屋作った

自分と嫁の仕事部屋作った。フリーランス時代は、ラップトップのみで仕事するくっそ無駄なこだわりを持ってたので、適当な場所で仕事してたが、今の会社はExcel地獄な上、PCが酷すぎるのでやむ得ず仕事部屋でディスプレイ置く羽目になった。同時に嫁の仕事部屋も作ったのでリビングが毎日綺麗になって快適だから結果的によかった。

リア充化した

休日は何かしら出掛けたり、友達と会ったりと忙しい日々を過ごしてた。俺、嫁とも友人が多く、嫁は社交的なので友達と家族ぐるみで遊べるのはマジでありがたい。最初は気まずかったけど、嫁の友達の旦那達と遊べて振り返ると楽しかったなと思てる。

総括

プライベートは最高、仕事は激動すぎてしんどみがあった。仕事嫌すぎる分、プライベートは楽しまないと精神を保てないと思ったからこういう結果になったのかも。今年はもう少し安定したい思いと、会社員になった分、家庭を重視したい。家庭を重視するために会社員になったのに、目的を見失いつつあるからペースを乱さず立ち回りたい。

【Nuxt】metaタグが重複する問題を回避する

nuxtjs.org

nuxt.config.jsにこんな感じでmetaタグ書いて

  head: {
    meta: [
      { name: 'description', content: 'Meta description' }
    ]
  }

pagesで同じdescriptionタグをこんな感じで書く

head() {
  return {
    meta: [
      {
        name: 'description',
        content: 'My custom description'
      }
    ]
  }
}

そうするとmetaタグが2つ作られて重複する。

回避方法としてはhidという一意で識別出来るプロパティを指定する。こんな感じ↓

  head: {
    meta: [
      { hid:'description', name: 'description', content: 'Meta description' }
    ]
  }

To avoid duplicated meta tags when used in child component, set up a unique identifier with the hid key for your meta elements (read more ).

普通に書いてあったのでちゃんと読まなきゃだめやなとおもた

サービス作った

まだbetaにすらなってないけど、とりあえずサービス作ってる

 

 

ありきたりなサービスだけど、集客方法が自分の中で固まったからこれにした。基本的にサービス作るときは集客しか考えてないから中身は微妙なことが多い。ただ、今回はみんなの洋楽ランキングみたいにお小遣い稼ぎ程度じゃなくてちゃんと稼ぎたい。

 

技術

フロントはNuxtJS、バックエンドは.NETCore。

インフラはGCPホスティングがcloud run、DBがcloud sqlのmysql8にした。ssrが必須条件で、gae、firebaseと迷ったけどコンテナ化したらcloud runでええやんってなった。Azureは値段的に悪くないけど、バグ多いし、たまに落ちてもアナウンスしなかったりとか微妙な点が多いから今回は外した。DBだけherokuとかちょっと揺らいだが、分散するのは最悪なのでGCPに統一することにした。ざっと見積っても月1000円程度だし、かなり満足してる。

 

開発開始してから一年も経ってるが、モチベーション低すぎて全然進まなかった。個人サービスは開発よりもマーケティングに注力するほうが断然楽しい。地道な開発が一番つまらないので、あと数ヶ月掛けながらのんびりやっていこうと思う。

【Nuxt】ビルド時にFunction.name使うと動かない問題

StringFilterみたいなへルパクラス作って以下のようにfillterを作っていた

Vue.filter(StringFilter.capitalize.name, StringFilter.capitalize)

が、ビルド時に動かない

Function.nameが原因だった。
developer.mozilla.org

単純にminifyするとfunction名が変わっちゃうので定義したfilter名が使えなくなる

SSRか起因してるのかと思ったら全然違った。Nuxtじゃなくてもminifyする場合は全部起きるのでモダンjsでは使わないが吉

アーキテクチャ図かいた

アーキテクチャ図かいた

みんなの洋楽ランキング
f:id:tekitoumemo:20211116000001p:plain

プロフィールサイト
f:id:tekitoumemo:20211116212902p:plain

Qiitaや転職サイトにプロフィールを貼っつけていて、少ないけど多少アクセス数があるのでちゃんとまとめようと思い作った(たまに聞かれるので面倒だからここに集約しちゃおうかなという根端もある)

https://festive-yonath-a04e1e.netlify.app/portfolio/1

約2年ぶりにプロフィールサイトに手を加えたので、変更するのめんどくせーなーって思ってたらマークダウンでポートフォリオページを更新出来るようにしていたので過去の自分、すごく偉いなと思った。バックエンドはコンテナ化してHeroku(無料)へ、フロントはNetlify(無料)でデプロイもクソ楽なので過去の自分、すごく偉いなと思った。最近Angularやってて起動クソ遅くてイライラしてるのでNuxtを選定した過去の自分、すごく偉いなと思った。