Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?
@nekojoker

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

こんにちは!
ねこじょーかー(@nekojoker1234)と申します。

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

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

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

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

1.立ち上げたサービス「Lookmine」とは?

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

1−1.カテゴリを登録することができる

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

1−2.実績を登録することができる

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

1−3.実績を確認することができる

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

1−4.他のユーザーと競うことができる

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

1−5.投稿に「いいね」「コメント」を残すことができる

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

1−6.フォロー機能で相手の投稿をチェックできる

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

1−7.通知を受け取ることができる

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

1−8.日々成長を実感できる

努力の「時間」と「日数」を記録して、ランク付けしています。
小さな成功を積み上げやすくなっているので、日々成長を実感できます。
努力の経過

ちなみに、「時間」のランクは以下のようになっています。
ここでは省略しますが、「日数」のランクもあります。
時間のランク

2.どういった技術で動いているのか?

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

2−1.バックエンド(目に見えない部分)

RubyonRails

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

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

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

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

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

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

2−2.フロントエンド(目に見える部分)

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が激しくだるいのは言うまでもありません。

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

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

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

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

2−3.サーバー

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/

2−4.スマホアプリ化

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

追加イメージ↓
PWAイメージ

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

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

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

3.このアプリに込めた想い

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

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

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

努力は、消えません。

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

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

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

4.最後に

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

立ち上げたWebサービス
Lookmine

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

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

19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nekojoker
C#エンジニア。Railsを独学してWebアプリを作成。セキュリティとデータベースの国家資格を保有。ブログではPlayFabの情報を発信中。最近はPlayFabのオンライン書籍を発売しました。Blazorも勉強中です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
19
Help us understand the problem. What is going on with this article?