作ってます!

初心者がProgateでプログラミングを学びRailsアプリをデプロイした

2018年の2月頃?にProgateさんで初めてHTML/CSSからプログラミングに触れて苦節1年半、ようやくRailsでサービスを作れました!(時間かかりすぎじゃね?といった感じですが)

ちなみに勉強に関する軌跡に関しては別記事にありますん。

初心者がHTMLから勉強を始めてRailsアプリデプロイするまでの勉強時間と勉強代

自分でサービスを作るというのはひとつの節目ではあったので、作って間もないうちに頭の中の雑多なあれこれを吐き出すため、兼、数年後なりに振り返るとき用の記録として記事を書いている次第です。

また、プログラミングをこれから始めるあるいはこれから初めてサービスを作ると言った方の背中を少しでも後押しできればなと。

作ったもの

https://www.gizzlogg.com

GizzLoggギジログと(無理やり)読みます。

完全にFizzBuzzからの着想ですね。

プレイヤーは円状に座る。最初のプレイヤーは「1」と数字を発言する。次のプレイヤーは直前のプレイヤーの次の数字を発言していく。ただし、3で割り切れる場合は「Fizz」(Bizz Buzzの場合は「Bizz」)、5で割り切れる場合は「Buzz」、両者で割り切れる場合(すなわち15で割り切れる場合)は「Fizz Buzz」(Bizz Buzzの場合は「Bizz Buzz」)を数の代わりに発言しなければならない。発言を間違えた者や、ためらった者は脱落となる。

https://ja.wikipedia.org/wiki/Fizz_Buzz

コンセプト

コンセプトとしては登録不要議論専用匿名掲示板という中国語みたいになってますが、要は2ch(匿名性)と知恵袋(質問→回答)とTwitter(手軽)のごった煮です。

ニュースにあれこれ偉そうに物申したい時ってTwitterは匿名でないから発言に責任持つ羽目になって気軽さが薄いし最近マウンティングがひどいしそもそも文字数足らないこともある……。

かといって2chはスマホだと使いづらいし、知恵袋は登録が面倒だなぁ、みたいなノリで作っていったのですが、自分の理想が高すぎたせいで技術力が追いつかずモチベーション低下のもっとも大きな原因になってしまいました orz

最初は「せっかくだし3日くらいかけてしっかりとしたLP風の概要ページ作り込もう!(キラキラ」なんて考えていたのですが、途中で心がポッキリとイカれ申したので1〜2時間のやっつけページになってしまいました。

そのうち作り直すんだ……そのうち……。

https://www.gizzlogg.com/about
どうでもいいですが、aboutページのキャッチフレーズ的な部分(上画像でいう「集え、論客。」部分)はリロードするたびに変わったりします。
https://twitter.com/gizzlogg

それっぽいTwitterアカウント(@GizzLogg)も作成して多少それっぽくなったので概ね満足。

ルートドメインへの移行(wwwを取る)とか301リダイレクトとかメールアドレスによる登録ができるようにしたりだとか……

まだ色々とやらなきゃいけないことは残っていますが、マターリやっていきます。

やりたいことを手広く思い浮かべすぎて途中でキャパオーバーになるという大学受験生あるあるの『合格必至の過密スケジュールに身体が追いつかなくて全てを投げ出したくなる』と同じことをやっちまいました。

使ってるもの

  • Rails
  • ちょっとのJS
  • ちょっとBootstrap
  • ちょっとのPhotoshop
  • Heroku
  • Googleのツール各種(アナリティクス等)

お世話になったサイト

aboutページなどで使用している素材は通常のWeb制作時でもよく活用することのあるfreepikさんで。

検索窓の左部『ベクター』にチェックを入れて好みのキーワード入力すれば良い感じのフラット絵がわらわら出てきます。

https://jp.freepik.com/

グラデーションはitmeoさんのツールが綺麗でいつも利用しています〜。

https://webgradients.com/

sassも一応書けるのですが変なcssギミックをサイト上でちょこちょこ利用しており、

そういうのはだいたいcopypetさんcodepenさんから拝借したものです。

https://copypet.jp/

https://codepen.io/

テーマカラーみたいなものはサルワカさんのツールを利用させていただきました。

https://saruwakakun.com/design/gallery/palette

アイコンはFontAwesomeさん、タイトルのフォントはGoogleFontさんです。

https://fontawesome.com/

https://fonts.google.com/

ややしんどい画像制作はフォトショですが一瞬で済みそうな簡単な画像制作はCanvaさんです〜

https://www.canva.com/

制作費用

Herokuのhobbyプランに$7/月と独自ドメインで90円/月くらいです。

なのでランニングコストとしてはだいたい1000円弱/月です。

安いですね〜、ソフトバンクさんへの2万円/月の上納k……お布施に比べれば相当安い(白目)

せっかく作ったので半年〜1年くらいはこの環境で回してみようかなぁ

制作期間

ちょうど1ヶ月くらい

主要機能自体は多分1〜2週間段階で終わっていたのですが、細部にこだわってしまったり本来必要なかったであろう調整で2〜3週間といった内訳になります。

僕なりの今回の教訓としては、「とにかく早くデプロイすべき。細かい調整もデプロイしてから」に尽きます。

早く公開すべき理由はもう前述した通りなのですが、もうとにかく熱が冷める。途中で何のためにこんなことしてんだろって思いながらやってました。

なので、ローカル環境に留めずに人の目に触れる場所に出してしまった方がいいなぁって。

外出るときは最低限のライン守った外見でいるけど家の中にずっといると髪ボサボサ髭ボーボー服テキトーみたいなギリ現代のヒト科の枠組みから外れてしまう僕みたいな怠惰な人は余計同じタイプだと思います〜

苦労したこと

いざ自分でやってみて一番苦労したのがデザイン面かもしれません。

GizzLoggはそんな大層なデザインじゃないのですが、それでもかなり苦労しました。

その時に参考になった記事をシェアしておきます。

これだけ守れば見やすくなるデザインの基礎
https://speakerdeck.com/kinakobooster/koredakeshou-rebajian-yasukunarudezainfalseji-chu

非デザイナーも必見!「4大原則」を知るだけで見違えるデザインに
https://bulan.co/swings/design4principals/

ブサイクなUIデザインを劇的に改善するための10のチェックリスト
https://note.mu/tiekey/n/n99eb01fa6a45

だいぶざっくりとした総括で恐縮ですが、

  • 余白の使い方
  • 薄い色の使い方
  • 要素を綺麗に揃える

が上手くなればもっとデザインが上手になるのかなぁなんて思っています〜

ちなみに通常はChromeのdevツール使っているのですがfirefoxのdevツールはガイドラインがデフォルトで出てくれるのでかなり重宝しました。

デザイン面に関する反省点としては、もっとBootstrapだとかMaterializeだとかのCSSフレームワークへの造詣を深めれば良かったなぁとは思いつつも、それとは裏腹に自分でSassしこしこ書くのは好きだったりするので、自作のフレームワーク的なものを作っていけば今後の作業が楽になるのかなぁなんて思っていたりもします。

励みになったもの

構築前や構築中というよりはデプロイへの一歩がなかなか踏み出せずにいた時の自分にとって価値を感じた言葉たちです。

好きな開発者であるせせりさんのツイート

先に述べたとおり、初期段階でもう公開しても良い程度には出来上がっていたのですがなかなか公開に踏み込めなかった理由を全て上記のツイートが解決してくれたのでこのツイートを見たその日にデプロイしました。

せせりさんは毎月ツイ消ししてらっしゃるのでそのうち消えてしまうかもしれませんので心にきた人はスクショでもしておきましょう。

※ご本人に直接お訊きした時にツイートをスクショされるのは別に構わないと仰っていたのでガンガン撮って専用フォルダにぶち込みましょう

ジョブズ尊師の御言葉

どうせ作るなら多少なりとも人に使ってもらえたら喜んでもらえたらなんて気持ちはあるわけですが、マーケティングとやらに精通してらっしゃる御仁はそういう場面では『市場調査』なるものをすなるそう。

けれどジョブズ尊師は『ブツを見せなきゃ人はそのブツが欲しいか判断できない』だなんて言ったそうな。

要は開発中に「こんなの使われない」とか「こんなの要らない」なんてことを数百回は思うわけですが、とりあえずデプロイしちゃえ、何がウケるかなんて誰にもわかんねえYOという至言です。

まとめ

高すぎる理想に技術が追いつかずに挫折・妥協点が山のように積み上がった構築でしたが、とりあえずは1年半からの目標であった『1からサイトを作る』が達成できたので清々しい気持ちでいっぱいです。

何か人のためになるようであったり、あったら少し楽しいと思えるようなサイトを作れたらなぁなんて思います。

今後も楽しめる範囲でやっていきます〜

コメントを残す

メールアドレスが公開されることはありません。