HTMLもわからない初心者が、独学で「投稿型SNSサービス」を作ったって本当？【193日間の死闘】

こんにちは！
ねこじょーかー（@nekojoker1234）と申します。

HTMLもわからない状態から193日かけて、何とかWebサービス（Lookmine）を8月17日に立ち上げました。

「なぜWebプログラミングを始めたのか？」など技術以外の話は、note（Webプログラミング「経験０」の私が、「193日間の独学」でWebサービスを立ち上げた話）で公開しているので、あわせてご覧ください。

こちらの記事では、上記の記事で触れなかった「技術的な話」を書いていこうと思います。

では、早速見ていきましょう。

１．立ち上げたサービス「Lookmine」とは？

立ち上げたのは、Lookmineというサービスです。
一言でいうと「投稿型SNSサービス」ですが、たくさん機能があるので、一つずつ紹介していきます。

１−１．カテゴリを登録することができる

以下の画面でカテゴリを登録することが可能です。
これにより、実績を登録する時、毎回カテゴリを手入力する手間がなくなります。

１−２．実績を登録することができる

「自分のために、今日何を努力したのか？」を登録することができます。

１−３．実績を確認することができる

登録した実績をグラフで確認することができます。（日別、月別に対応）

１−４．他のユーザーと競うことができる

努力した時間をランキング形式で確認することができます。

１−５．投稿に「いいね」「コメント」を残すことができる

以下は登録後の画面ですが、いいねとコメントを残すことができます。

１−６．フォロー機能で相手の投稿をチェックできる

フォロー機能を使うことで、相手の投稿が自分のタイムラインに流れるようになります。

１−７．通知を受け取ることができる

「いいね」「フォロー」「コメント」のタイミングで、通知を受け取ることができます。
「通知を受け取る」と言っても、プッシュ通知ではなく右下の「ベルマーク」のところに色が付く感じです。

１−８．日々成長を実感できる

努力の「時間」と「日数」を記録して、ランク付けしています。
小さな成功を積み上げやすくなっているので、日々成長を実感できます。
ちなみに、「時間」のランクは以下のようになっています。
ここでは省略しますが、「日数」のランクもあります。

２．どういった技術で動いているのか？

ここからは、具体的に裏では何が動いているのか？の疑問に答えていこうと思います。

２−１．バックエンド（目に見えない部分）

RubyonRails

ざっくりいうと、「Ruby」という言語を使用したWebアプリケーションフレームワークのことです。
「Rails」とだけ言われることもあります。

Railsは以下のようなメリットがあるので、Webプログラミングをこれから始める人は、Railsがおすすめです。

• SQLを直接発行しなくても、感覚的にデータ操作ができる
• すでに型が用意されているため、どこに何を書くべきかがわかりやすい
• Webでは必須である「セキュリティ」についても、対策しやすい

Rails独自の記法も多々あるため、学習コストはそれなりにかかります。

しかし、一般的に「考慮しておくべきこと」がすでに考慮されているので、
フレームワークを学ぶだけでも非常に勉強になりました。

公式サイト
https://rubyonrails.org/

２−２．フロントエンド（目に見える部分）

Bootstrap Material Design

WebサイトのUIを簡単に作ることができるフレームワークです。

Webプログラミング経験者の方は「Bootstrap」という単語を聞くと、「またか」と思われる人も多いのではないでしょうか？

確かにBootstrapはよく使われていますが、Material Designの方はなぜかあまり有名ではありません。

Material Designの方がオシャレなので、今回はこちらを採用しました。

使えるクラスもほぼ同じなので、普通のBootstrapが使える人は、こちらも問題なく使えます。

公式サイト
https://fezvrasta.github.io/bootstrap-material-design/

CSS

Bootstrapでもある程度は問題ないのですが、すべてのことを実現できるほど万能ではありません。

ベースとしてはBootstrapを使い、細かいデザイン調整などは、CSSを適用しています。

javascript、jQuery

CSSではあくまでも「見た目」の調整なので、少し動きをつけたいときはjavascriptの実装は避けられません。

以下のことはjavascriptやjQueryで実現しました。

• 一定以上、下にスクロールしたら、上矢印のアイコンが出てくる
  • 押したらスルスルッと画面の一番上まで戻る
• スマホで画面を下に引き下げたら、画面を再読込する
  • これはオシャレな実装ができず、若干ダサい感じに・・・

CoffeeScript

javascriptをもう少し読みやすく改良した言語で、グラフの表示はCoffeeScriptを使用しています。

公式サイト
https://coffeescript.org

FontAwesome

いろいろなところに出てくる「アイコン」は、FontAwesomeというサイトから取ってきています。

サイトの名の通り、オシャレで素晴らしいアイコンばかり用意されており、無料です。

有料でしか使えないアイコンもありますが、無料でも「1500種類以上」使えるので、まったく問題ありません。

アイコンを使うとしたら、このサイト一択ですね。

公式サイト
https://fontawesome.com

Slim

Railsは基本的に「erb」という拡張子のファイルにプログラムを書いていきます。

しかし、このerbが激しくだるいのは言うまでもありません。

というのも、この３つの記号「<」「%」「>」をひたすら書く必要があるのですが、正直やっていられません。

そこで、これらを書かなくて済むようにしたのが、Slimです。

あの厄介な記号を、すべて「インデント」に置き換えて実装することができます。
これを使ったら、もうerbの記述には戻れません。

公式ドキュメント
https://github.com/slim-template/slim/blob/master/README.jp.md

２−３．サーバー

Heroku

インフラエンジニアでない限り、自分でサーバーを管理するのは難しいです。

セキュリティ面も心配ですし、プログラムをサーバーにアップロードする「デプロイ」作業も、結構面倒だったりします。

そこで、手軽にデプロイができ、サーバーのメンテナンスも不要な「Heroku」というサービスを利用することにしました。

料金は以下のとおりです。

種別	プラン	料金
Server	Heroku Dyno Hobby	$7
DB	Heroku Postgres Premium	$9

Serverプランを有料にした理由は、独自ドメインを設定したかったためです。
DBプランを有料にした理由は、無料枠のレコード数（1万）を超えたからです。

日本円だと、だいたい月々「約1600円」ですね。（独自ドメイン代も含めると、もう少し）
無料サービスなので、完全に赤字です。
まぁ、勉強代として考えています。

ちなみに、上記の値段は「アプリごと」に加算されます。
「たくさんのアプリを作りたい」という人は、頑張って自分でサーバーを管理したほうが安く済みます。

公式サイト
https://jp.heroku.com/

SendGrid

メール送信機能は、「SendGrid」というサービスを利用しています。
こちらは無料枠が結構あるので、よほどユーザーが増えない限りは無料で使えそうです。
Herokuのアドオンでついているので、簡単に連携することができます。

公式サイト
https://sendgrid.kke.co.jp/

２−４．スマホアプリ化

AppleStoreやGooglePlayには登録していませんが、実はスマホアプリとしてホーム画面に設置することができます。

追加イメージ↓

これは「PWA（Progressive Web Apps）」という技術を使用しており、アプリとしてインストールすることをせずに、Webサイトをホーム画面に追加することができます。

（厳密には、PWAを採用していなくても、単純に"ブックマークとして"ホーム画面に追加することは、どんなサイトでも可能です）

PWAに関してさらに詳しく知りたい人は、以下の記事がおすすめです。
https://qiita.com/minakawa-daiki/items/9276f4ae7567d5a3b820

３．このアプリに込めた想い

世の中には、誰かに公言するわけでもなく、密かに努力を続けている人がたくさんいるはずです。

逆に、「努力をなかなか続けられない」「これから何か始めようと思っている」という人も、たくさんいるはずです。

そういった人が、１人でも多く努力を続けることができるように、努力を続ける助けとなるように、このアプリをつくりました。

努力は、消えません。

消えませんが、時間が経つと忘れてしまいます。

忘れてしまうと、消えたのと同じです。

やった努力を忘れてしまわないように、Lookmineに残してみませんか？

４．最後に

ここまで読んでいただき、ありがとうございました。
最後にリンクをまとめておくので、ご覧いただけると泣いて喜びます。
それでは！

立ち上げたWebサービス
Lookmine

あわせて読みたい
Webプログラミング「経験０」の私が、「193日間の独学」でWebサービスを立ち上げた話

運営しているブログ
https://nekojokerblog.com