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

こんにちは！
ねこじょーかー（[@nekojoker1234](https://twitter.com/nekojoker1234)）と申します。

**HTMLもわからない状態から193日かけて、何とかWebサービス（[Lookmine](https://lookmine.herokuapp.com/)）を8月17日に立ち上げました。**

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

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

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

## １．立ち上げたサービス「Lookmine」とは？
立ち上げたのは、[Lookmine](https://lookmine.herokuapp.com/)というサービスです。
一言でいうと「**投稿型SNSサービス**」ですが、たくさん機能があるので、一つずつ紹介していきます。

### １−１．カテゴリを登録することができる
以下の画面でカテゴリを登録することが可能です。
これにより、実績を登録する時、毎回カテゴリを手入力する手間がなくなります。
<img width="328" alt="カテゴリ登録画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/4650d7ab-37b0-4a16-c4b7-e4377cdb5d73.png">

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

「自分のために、今日何を努力したのか？」を登録することができます。
<img width="328" alt="実績登録画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/aea9bb19-b335-76e8-3c3f-11d94d711fa0.jpeg">

### １−３．実績を確認することができる
登録した実績をグラフで確認することができます。（日別、月別に対応）
<img width="328" alt="実績のグラフ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/015dcef5-d346-65b1-e1f9-431d9de480ac.jpeg">

### １−４．他のユーザーと競うことができる
努力した時間をランキング形式で確認することができます。
<img width="328" alt="ランキング" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/ba2438e3-9347-101d-9694-e3ad9ce213e7.jpeg">

### １−５．投稿に「いいね」「コメント」を残すことができる
以下は登録後の画面ですが、いいねとコメントを残すことができます。
<img width="328" alt="実績登録後画面" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/fccfde4d-1657-dc2c-eb28-a1204fd08dae.jpeg">

### １−６．フォロー機能で相手の投稿をチェックできる
フォロー機能を使うことで、相手の投稿が自分のタイムラインに流れるようになります。
<img width="322" alt="フォロー機能" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/3f5d40e5-99b1-8a15-9a83-11458eb38c64.png">

### １−７．通知を受け取ることができる
「いいね」「フォロー」「コメント」のタイミングで、通知を受け取ることができます。
「通知を受け取る」と言っても、プッシュ通知ではなく右下の「ベルマーク」のところに色が付く感じです。
<img width="322" alt="通知機能" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/3de9a758-267b-21f3-8961-da5515de807c.jpeg">

### １−８．日々成長を実感できる
努力の「時間」と「日数」を記録して、ランク付けしています。
小さな成功を積み上げやすくなっているので、日々成長を実感できます。
<img width="332" alt="努力の経過" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/aad226ee-8e56-915b-bd42-f9a001a6fdcb.png">

ちなみに、「時間」のランクは以下のようになっています。
ここでは省略しますが、「日数」のランクもあります。
<img width="316" alt="時間のランク" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/ec8a309b-8647-0486-06d1-87871b337771.png">

## ２．どういった技術で動いているのか？
ここからは、具体的に裏では何が動いているのか？の疑問に答えていこうと思います。

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

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

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

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

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

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

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

### ２−２．フロントエンド（目に見える部分）
#### Bootstrap Material Design
**WebサイトのUIを簡単に作ることができるフレームワーク**です。

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

確かに[Bootstrap](https://getbootstrap.com/)はよく使われていますが、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には登録していませんが、実はスマホアプリとしてホーム画面に設置することができます。**

追加イメージ↓
<img width="328" alt="PWAイメージ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/81e376cf-310b-d826-0b20-cf2a30480a85.png">

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

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

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

## ３．このアプリに込めた想い
世の中には、誰かに公言するわけでもなく、密かに努力を続けている人がたくさんいるはずです。

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

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

努力は、消えません。

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

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

**やった努力を忘れてしまわないように、[Lookmine](https://lookmine.herokuapp.com/)に残してみませんか？**

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

立ち上げたWebサービス
[Lookmine](https://lookmine.herokuapp.com/)

あわせて読みたい
[Webプログラミング「経験０」の私が、「193日間の独学」でWebサービスを立ち上げた話](https://note.mu/nekojoker/n/nabe32d6d961f)

運営している PlayFab 専用ブログ
https://playfab-master.com