コードを画像でツイートできるサービスをリリースしました
はじめに
フィヨルドブートキャンプの最終課題である自作サービス TwiCode をリリースしました！
この記事ではサービスの説明、また開発で苦労したことやよかったことなどを書きたいと思います。
目次
自己紹介
yana-gi（やなぎ）です。昨年の2021年からFJORD BOOT CAMP（フィヨルドブートキャンプ） でWebプログラマーになるためにRubyやRuby on Railsなどを勉強していました。現在はフィヨルドブートキャンプを卒業し就職活動をしています。
TwiCodeの紹介
TwiCode(ついこーど) とは
TwiCodeとは、一言でいうとTwitterでちょっとしたソースコードを共有できるサービスです。
getで書いていたルーティングをresourcesで書き換えたいのだけど、シュッとした感じに書けないな〜
— yana-gi (@yana_gis) 2021年12月5日
https://t.co/4U0A9HXLNf #TwiCode
さらに詳しく説明すると、Twitterでソースコードを共有するときにテキストそのままでもなく、画像でもなく、URLで共有すると画像として表示することができます。
ぜひサービスを使ってツイートしてみてください！
ツイートするネタがない人は、
- 好きなメソッドの使用例
- AtCoderのコンテストで提出したコード
- 最近書いたコード
などをぜひツイートして教えてください！
使い方
サービスを使ってコードを共有するまでの大きな流れとしては、以下のようになります。
- Twitterアカウントでログイン
- 「新しくコードを投稿する」からコードを入力
- 画像が作成され、コードの情報が書かれた画面に遷移する
- その画面のURLをツイートで共有する
このサービスが解決できること
サービスの説明にも書いたように、TwiCodeはTwitterでソースコードを共有するときにテキストそのままでもなく、画像でもなく、URLで共有すると画像として表示することが特徴です。
たとえば、AtCoderのコンテスト終了後に自分の回答をTwitterに共有したいとします。
そのままテキストでツイートすると、
このように
といった不便さがあります。
また、この問題を解決しようとして画像として投稿してみると
確かに読みやすくはなりましたが、ソースコードをコピーすることができません。また、画像を作成するのも少し面倒です。
TwiCodeを使うことで、この問題を解決することができます。
TwiCodeが読みやすいコードとして画像を作成することで、読みやすい形で共有できること、またリンク先からコードを参照・コピーが可能になります。
こんな人に使って欲しい
コードを書く人なら誰でも使ってほしいと思っていますが、特にプログラミングを学んで日が浅い人に使って欲しいと思っています。今日学んだコードや、書いたコード、分からなかったコードなどを人に共有できれば、もっとプログラミングを学ぶことが楽しくなるんじゃないかと思っています。
TwiCodeがもっと気軽にコードの話をTwitterでできるきっかけになってくれたら嬉しいです！
サービスを作ろうと思ったきっかけ
自作したnpmを使って貰うことの面白さ
以前フィヨルドブートキャンプの課題で コマンドライン上でGitHubの草を生やす というnpm（JavaScriptのライブラリ）を作りました。
最初は「自分が使いたい・面白そう」と思って作ったものですが、実際に作って公開したところ、いろんな人に使ってもらいました。 純粋に自分が作ったものを利用して貰ったことがとても嬉しかったのですが、自分が想像しないような使い方をしている方もいたのが面白かったです。
自分が作ったものが、ユーザーによって自分が想像していたよりも面白いものにできた初めての体験でした。
この体験から、自作サービスでもこういった「ユーザーがサービスの面白さや価値を広げてくれるようなサービス」を作りたいと思っていました。
Twitter関連サービスへの興味
私はマシュマロやfusetter(ふせったー)というサービスが以前から好きでした。こういったTwitterの機能を拡張させるような、Twitterでは痒いところに手が届かない機能を補完させるようなサービスは普段利用していて、自分でも作ってみたいと思っていました。
自分はすべてサービス内で完結するサービスより、普段よく使っているTwitterの機能を増やせるようなサービスの方が普段使いできそうと思い、Twitterで共有すること前提のサービスを作ることを考えました。
１番のきっかけ
１番のきっかけは、おなじフィヨルドブートキャンプの受講生であり、輪読会メンバーであるタマキさん(id:shirotamaki)が毎日コードをツイートしていたことです。
ツイートを毎日投稿（！）されていたので、自分は毎日「どうにか見やすくできないかな」と思っていたのがこのサービスのアイデアの始まりでした。
タマキさんがこうして毎日投稿していなければ、このサービスは生まれなかったかもしれません。
#100DaysOfCode 3rd_rap Day: 028/100
— タマキ (@tamaki460) 2021年9月7日
I tried AtCoder(B - 200th ABC-200)
n, k = https://t.co/OKDMhaw5pM(&:to_i)
k.times do |i|
n % 200 == 0 ? n /= 200 : n = n*1000 + 200
end
puts n
もっと気軽にコードをツイートするようになって欲しい
自分は今までDiscordでは結構コードを共有することはありましたが、Twitterではあまりコードをツイートしませんでした。その違いは前者がシンタックスハイライトで共有できることが大きな理由だと思っています。
自分もコードを見やすい形でツイートできるなら、ツイッターでもコードを共有するかも。さらには、このサービスがあったらコードを気軽にツイートする文化ができるかも。という淡い期待があります。
技術スタック
- Ruby on Rails 6.1.4
- Ruby 3.0.2
- RSpec
- AWS
- S3
- CI/CD
- GitHub Actions
- Heroku
開発中に苦労したこと
やること・分からないことがとにかく多い
個人開発で1からサービスを作る中ではとにかく
- やること
- 決めること
- 考えること
- 分からないこと
- 調べること
がこんなにも多いのか、と常に思っていました。
「やること」ひとつとっても、想像していたよりもやったことがないこと（= 分からないこと・調べること）がたくさんありました。*1
特に一番難しかったのは「やらないこと」を決めることです。サービスの構想を練っているとあれもこれもとやりたいことはたくさん出てくるのですが、すべてを実装していてはなかなか完成しません。本当に必要なことに絞って、リリースまでの最低限実装することを決めることにしました。
「考えること」が多いというのは、例えばボタン一つとっても
- どんな文言にするのか
- どこに配置するのか
- どの色・サイズにするのか
と考えることがたくさんあります。
こうして1からサービスを作ってみると普段利用しているサービスでも、この仕様やUIは苦労して考えられたんだろうな〜と作った側の気持ちになるようになりました。
誰もやったことがないことをやる難しさ
TwiCode では新規作成画面から「画像を作成」ボタンを押した後、次の画面に遷移するまでに
- (JavaScript側) 画面のDOM要素を画像に変換
- (JavaScript側) その画像をデータURLとしてパラメーターでRails側に渡す
- (Rails側) パラメーターに渡されたデータURLをActive Storageに登録する
をしています。
別の記事で詳しく書いたのでこちらを参照してください。
この一連の処理はそのまま参考にできそうな記事や資料がなく、ライブラリの選定から実装まで自分で考える必要がありました。
ライブラリを見つけるところから、そのライブラリをRailsに導入するまで一つ一つ手探りで進めていきました。 1人で解決できたわけではなく、メンターや受講生の方にはとても助けて頂いたおかげで実装までたどり着くことができました！
画面上で作成した画像をActive Storageに登録する必要があったのですが、canvas形式をRails側に保存する方法が分からず苦労しました。幸運にも同じ時期に自作サービスを作成していた@obregonia1 さんが同じような画像作成処理を実装しており、その処理を参考にさせてもらいました。本当にありがとうございます！
この実装を通して、誰もやったことがないことや不確定のことを実装として落とし込むことの難しさを実感しました。苦労をした分、このサービスの技術的な見どころにもなったと思っています。
開発中にやってよかったこと
自分1人で1からサービスを作ることは、前述したようにとにかくやることが多い上に、自分しか開発を進めてくれる人はいません。
そこで自分は以下のような工夫をしました。
進捗をこまめに共有した
自作サービスの進捗報告会で進捗を報告できるようにした
フィヨルドブートキャンプで毎週水曜日の夜行っている自作サービスの進捗報告会があります。そこで自分は少しでも何かしらの進捗を報告できるようにしていました。1週間の間に何も進捗がなかった場合は水曜の昼間に急いで進捗を出すこともありましたが、それでも報告できる内容ができるので自分の中ではよしとしていました。
自作サービスの課題は締め切りがなくモチベーションを保つのが大変だったのですが、進捗報告会は定期的なモチベーションの補給ポイントになっていました。
リポジトリの動きを共有できるようにした
前述したように週1の進捗報告会はありましたが、週1でしか自分の進捗を伝えられないこと・他の人の進捗が伝わってこないことはモチベーション的な辛さを感じていました。というのも、自作サービスの開発は各自のリポジトリで行うため、チーム開発と比べて自分の進捗が周囲に伝わりにくいうえに他の受講生の進捗も見えにくくなるためです。
そこでもっと頻繁に進捗を共有できるようにするために、komagataさんたちにお願いしてDiscordのWebhook機能を使ってフィヨルドブートキャンプのサーバーにGitHubのリポジトリの通知を送るチャンネルを作って貰い、自分だけでなく自作サービスを作っている受講生にも通知を送れるようにしてもらいました。
設定したリポジトリがpushなどのイベントが発生すると以下のような通知がチャンネルに流れてきます。
リアルタイムで自分の進捗が誰かの目に触れられること、また他の人の進捗が可視化されたことでモチベーションにおおいに繋がりました。
また、自分1人が作業するリポジトリでも「誰かに見られているかもしれない」とコミットメッセージやPRを適当に書かなくなったという思わぬメリットもありました！
分報チャンネルで開発の様子を実況した
フィヨルドブートキャンプが連絡手段として使っているDiscordのサーバーでは、各自で分報チャンネル（Timesチャンネル）が存在します。
私はそこで雑に進捗や分からないことを投稿していました。そこでスタンプなどのリアクションを貰えたり、分からないことに対して受講生やメンター、アドバイザーの方からコメントをもらうことも多々ありました。分報が自作サービス開発の大きな心の支えになっていました。
サービスや実装について質問や相談をした
自作サービスでは、たくさんの分からないこと・やったことがないことに直面しました。
フィヨルドブートキャンプの質問タイムでは、よく質問や相談をしてたくさんの手がかりやヒントをもらいました。自分1人で調べて考えることも重要ですが、1時間以上自分で調べても分からないことは人に聞いて解決するようにしました。時には1回の質問タイムで5個ほど質問することもありました。
メンターへの質問だけでなく、受講生の人にも相談するようにしていました。
どんなサービスを考えるかの段階でエレベーターピッチを見てもらったり、実装中の段階では実際のアプリを見てもらったりしました。サービスの新規投稿画面には最後に選んだ言語を自動で表示できるようにする機能があるのですが、これは受講生の方からもらった意見です。
また、相談する中で「楽しみ」「早く使いたい」と言って貰えることがユーザーのいない状況にとってとても励みになりました……！
不安な実装はこまめに確認してもらっていた
フィヨルドブートキャンプの自作サービスのカリキュラムは、一番最後にコードレビューとデザインレビューを提出すると完了扱いになります。
それまでコードレビューをして貰わなくても開発を進めることはカリキュラム上可能ですが、自分はDB設計やリソース設計を実装に入る前に見てもらったり、不安な実装（ログイン処理など）はマージ前のPullRequestをレビューして貰っていました。
そのおかげで全体的に手戻りの作業はほとんどなく、一番最後のコードレビューも少しの修正で済みました。
DB設計やリソース設計を実装前にレビューして貰うのは他の受講生にも参考にしてもらったり、後ほどプラクティスにも追加してもらったりもしたので嬉しかったです。
「いかに1人で進めないか」を意識した
こうしてみると、「いかに1人で進めないか」が自分にとって自作サービスをリリースするまでにたどり着く一番のポイントだったと思います。
技術的に詰まったこともたくさんありましたが、人に相談することで大体のことは解決できました。時にはあまりにやることが多くモチベーションが下がりそうな時もありましたが、進捗報告会や日報・分報で進捗を共有することを目標にすることでモチベーションを維持できました。
人に質問すること・分報を書くこと、分からないことを文章化するスキルなどは、自作サービスより前のプラクティスで続けてきたことで、自作サービスではそのスキルが十分に発揮できました。
「やることが多すぎて全然進んでいる気がしない」と途方に暮れながら開発していましたが、よく人から「安定して進捗が出ている」「順調に進んでいるように見える」と言って貰えることがありました。自分では進んでいる気がしていなくても、客観的に見るとちゃんと進んでいたということは、人前で作業していないと気づけないところでした。
これからやりたいこと
サービスというものはリリースして終わりではなく、リリースしてからが本番だと思っています。
今回デザインレビューをしていただいたken_c_loさんの言葉を借りると、盆栽のようにちょっとずついじりつづけてサービスをいいものにしていきたいです！
自作サービスはリリースして終わりではなく、自分で使ったり人に使ったりしてもらいつつ、日々盆栽みたいにちょっとずついじり続けることにも醍醐味があると思います
フィヨルドブートキャンプでデザインのメンターをはじめて1ヶ月経ちました #fjordbootcamp - 納豆には卵を入れる派です。
リリース前には後回しにして実装できなかった機能の追加や、リファクタリング、テストのガバレッジをあげること、またユーザーへのフィードバックの反映*2などをやっていきたいです。
さいごに
サービスを作るにあたって、サービスの構想から一緒に考えて頂いた@machidaさん、コードレビューや沢山の質問・相談に答えて頂いた @komagata
さん、デザインレビューをしていただいた@ken_c_loさん、サービスを作るきっかけになった@tamaki460さん、色々教えて頂いたメンターアドバイザーの@cafedomancerさんやDJの@obregonia1
さん、YOU CAN DO ITしてくれた@eatplaynap329さん、日報に温かいコメントをくれたフィヨルドブートキャンプのメンターのみなさん、Discordの分報などでコメントやスタンプを押していただいたフィヨルドブートキャンプの皆さんにはとても感謝しています🙏
*1:今までやったタスク : https://github.com/yana-gi/twicode/projects/1#column-15988092
*2:使ってみた方は是非 #TwiCode や @yana_gis までメンションで是非フィードバックをいただけると嬉しいです！
