布教箱(初めて作ったWebサービス)のリファクタリングを始めた
去年プログラミングを勉強してから初めて作ったWebサービスの「布教箱」のリファクタリングを始めている。
最初はインデントがガタガタだったりCSSで謎の書き方をしていたりなど、初心者丸出しのコードが散見されてウワーこれは酷いとずっと思っていたんだけど、じわじわと修正を始めたら結構面白い作業なことに気付き始めた。
とりあえず、一気に修正するのはキツいのでまずはログイン周りのviewを少しずつ整えていくためのブランチを切ってここ2日程度(といっても合計5,6時間ぐらいだが)作業していた。
やったこと
・devise周りのviewのCSSを整えて日本語化した
以前のデザインのままだとTwitterでのログインボタンが小さいままだったので、Font Awesomeを使ってTwitterの鳥のアイコンを横に並ばせて大きいボタンを作ってみた。
また、deviseの日本語化*1を行って日本語表記にして統一感を出してみた。
以前のデザインはこれです。
以前よりかは少しマシになった気がするけど、以前としてbootstrap感が強く、サービスのデザインの統一感はまだ出せていない気がする。あとイメージキャラクターの布教ちゃんの画像の位置も前回よりは違和感がなくなったかもだけど、もうちょっとやり方がある気がする。
あと、最近の個人開発者の新規サービスを見ていると、メールアドレスによるアカウント登録機能を作らず、Twitter登録だけのサービスが多いと感じることがある。
それによって、簡易に登録が可能であるというアピールにも繋がってサービスの触りやすさの視覚的なアピールになっている気もする。なので、この際Twitterでログインだけにしても良い気はする。ただ、中には、アクセストークンを簡単に渡したくない人もいるはずなのですごく迷う。とりあえず他の個人開発者のサービスをもう少し見て回って決めようと思う。
・背景画像を消してトップページにログインしてない際に出てくる新規登録orログインへの遷移リンク周りのCSSをちゃんとした見た目にした
去年プログラミングを始めたてに作っていた頃、サイトのデザインが地味で心配になってきてなんかとりあえず色がついている背景画像*2を使ってイメージを変えたつもりだったのだが、デザイン系の本を読んだり、他の個人開発サービスの配色デザインを見ていると、それは逆に悪手でもっとシンプルな色合いにして良いのではと思い、背景を白に戻した。
また、上記の画像で分かるようにCSSにほぼ手を加えたような文字の並びはやめて、下のようにborder: groove;で囲んでpadding: 1%;を加えて余白を作ってみた。line-height: 1.5emで文字の余白も多少幅広くしている。
とりあえずデザイン周りはこれ以上やるとキリがないので一旦打ち止めにした。
・Devise+OmniauthでTwitter認証する際に「OAuth::Unauthorized 403 Forbidden」が出てくるようになったためそれらに関する修正した
ローカル環境でTwitter認証ログインをしてみようとしたら、上記のメッセージが出てきたため、「あれ？」となり調べていた。そしたら、まさに同じ問題にぶつかっている人がいたのでこれを参考にして修正した。
Twitter APIが6月に仕様変更され、今までTwitter Appsに登録していたコールバックURLのままだと弾かれてしまうのが原因の模様でした。上記の記事と同じ流れで修正したところ、再びログインできるようになりました。
・sprocketsのバージョンを上げてherokuにpushできるようにした
Twitterのログインもできるようになったので、よしpushしよう〜と思ったらherokuにpushできない問題が発生。流れてきたエラーログを大まかに読み取ると「Sprocketsのバージョンが今のままだと脆弱性が見られるからバージョンアップしてね」ということでした。
heroku公式にも記事が出ていました。親切だ。
https://devcenter.heroku.com/changelog-items/1437
今後やりたいこととか感じたこととか
・去年との成長具合が分かるので面白い
今年の1月からアルバイトでRailsのサービスを触らせてもらっていることもあって、気になることがたくさん出てきたり、穴があるところがすぐに分かったり、修正の仕方が一人でもすぐ分かったりと一応成長していたんだな…という実感がちょっと出たのでよかった。
先月ぐらいにデプロイしたCrash ChatはWebサービスというよりかはチャットゲームというノリでviewの数も少なくてある程度簡素な作りだけれど、布教箱はある程度Webサービスの構造をしているので色々直すところがあって面白い。
一番最初に作ったというのもあって見返すと恥ずかしい点が多々あり、リファクタリングすることについ億劫になってしまう気持ちがあった。でも、やり始めてみたら以前より詰まる箇所が減り、思ったよりも楽しく作業できた。Webサービス自体を触ることはやっぱり好きなのだと思うし、少しずつリファクタリングを進めていきたい。
・細かい追加機能を増やしていく
とりあえず今のところ思いつくものとしては、スマホからでも見やすくする、Active Storageで画像投稿機能を作ってみる、いいね機能のリファクタリング、トップ画面等を修正して使いやすくする、Twitter公式アカウントを作ってサービスに投稿されたものをbotを作ってランダム紹介できるようにしてみるといったことをやってみたい。考えれば考えるほど無限に思い浮かぶので、1個ずつ地道にやっていこうと思う…。あとjavascript頑張る。
とりあえずそんなところ。課題が盛りだくさんだけれど、毎日草を生やしてじわじわと頑張っていこうと思います。
