銀行員からのRailsエンジニア

銀行員からのRailsエンジニア

銀行員から転身したサービス作りが大好きなRailsエンジニアのブログです。個人で開発したサービスをいくつか運営しており、今も新しいサービスを開発しています。転職して日々感じていること、個人開発サービス運営のことなどを等身大で書いていきます。

Twitterにグラフをシェアできるサービスを3つ作りました!〜サービスの紹介、作った背景、使った技術など〜

今月は久々にwebサービスを開発していて、似たようなサービスですが3つリリースすることができました💪 

サービスの紹介作った背景使った技術などをまとめたのでご興味ある方は是非ご覧ください!

いつも僕がどんな感じでサービスを作っているのかも書いています。

(記事は読まなくてもいいので是非サービスだけでも触ってみてください(> <))

f:id:ysk_pro:20181224204243p:plain

作ったサービスの紹介

1. いちにちをシェア

自分の1日をかんたんにシェアできるサービスです。


2. いちねんをシェア

いちにちをシェアの1年バージョンです。

 

3. いちねんのさいてん

レーダーチャートで1年を振り返れるサービスです。
1年を振り返る以外の用途でも、レーダーチャートでステータスを表示して遊べます。

 

なんで作ったの?

仕事の1日のスケジュールや、休日の1日のスケジュールをTwitterでシェアしたい、また他の人のスケジュールを見てみたいなー、と思ったことが開発のきっかけです。
 
余談ですが、webサービスのアイデアは思いついたらすぐにEvernoteにメモをするようにしており、もう既に開発したものを合わせて現在64個のアイデアがたまってます。作り切れない、、、笑
 
いちにちをシェアを作った後に、年末なので1年を振り返れる機能をつけたいなーと思って、いちねんをシェア、いちねんのさいてんを開発しました。
 
手書きのデザイン案が残っていたので一応載せます。

いつもこんな感じで手書きでざっくり書いてます。f:id:ysk_pro:20181224192909j:plain

 

どんな技術を使っているの?

当初予定していた構成

バックエンド Firebase × フロントエンド Vue.js でいこうと思っていました...
 
理由はモダンでかっこいいから!
 
どちらも使ったことはなく、本やチュートリアルで勉強したりしながら頑張りましたが挫折してしまいました、、、
 
やっぱり一気に新しい技術を使いすぎるのは良くないですね...みたいなことはこの記事に書いているので是非読んでみてくださいー!

 

採用した構成

結局はいつもの構成に落ち着きました。
 
バックエンド Ruby on Rails × フロントエンド jQuery
 
jQueryをまだ使いこなせていないレベルだったので、今回はjQueryをたくさん使って使いやすいサービスにすることをテーマとしました。
 
例えば、
値を入力したら自動でグラフが生成されたり

1つ前の時間以降しか表示させなくしたりしました(触ってみてね!)

 
チャート生成は chart.js というJavaScriptのライブラリを使っています。
このドキュメントはもう暗記するぐらい読み込みました 笑
ドキュメントが日本語でしっかりまとまっているのでとてもやりやすかったです。
 
サーバーは、いつも通り Heroku です。
使いすぎて無料枠の月1,000時間をオーバーするようになってしまったので、現在は苦肉の策としてアカウントを2つに分けて運用しています。
 
画像の保存は Amazon S3 を利用しています。
 

どれくらい時間がかかったの?

Rails × jQuery で作り始めてからは土日を5日くらい使って完成させました。
 
僕の開発の仕方は、自分で書いたチュートリアルを組み合わせてベースを作り、そこからやったことがないことに挑戦していくスタイルです。
今回であれば、このチュートリアルを見ながら進めました。

 
僕が技術チュートリアルを書いているのは他の人の役に立てばいいなというのが一番ですが、このように将来の自分のためでもあります。
過去に作ったものも、コードしか残っていないと自分のコードであっても分からなくなってしまうことがありますが、チュートリアルであれば他人でもわかるように書くので自分で後から理解できておすすめです。
 
今回もできればチュートリアルにまとめたいと思ってます。
(コードがぐっちゃぐちゃなのでリファクタするのが面倒ですが、、、個人開発はどんなにコードが汚くても動けばOK、テストコードも書かない派です)
 

おわりに

みんな是非遊んでみてねー!!!