【個人開発】海とサーフィンが好きすぎて、海のように見え方が変わるサーフィン日記共有サービスを作ってみた。

# **はじめに**

天気が雪の日は雪が降ります。

![https://i.gyazo.com/8a18102d9f03a7b6e44496ba03032d79.gif](https://i.gyazo.com/8a18102d9f03a7b6e44496ba03032d79.gif)

サーフィンをしたことがありますか？

一度きりの人生、自然と一体になれるこんな素晴らしいスポーツをやってみる事もしないなんて勿体ない事です。

私は海とサーフィンを愛しています。

自身の大好きなものを題材に作品を作って誰かの心に届くものにしたい！そんな想いがあります。

初めまして。りゅうじと申します。

【Twitter】

[https://twitter.com/otokomigakimasu](https://twitter.com/otokomigakimasu)

【今回作ったサービス】

[https://www.namikki.jp](https://www.namikki.jp/)

**私はエンジニアの方は全員海の近くに住んでサーフィンをした方がいいと思っています。**

メリット

- 都会で家賃が高い→海の側なら家賃が安い
- ジムで筋トレ→サーフィンで筋トレ
- 日頃PCから電磁波を浴びている→サーフィン(素足で浜辺を歩くことでアーシングする)
- 散歩して日光を浴びてセロトニンを出したい→サーフィンは太陽光を浴びられます
- サウナと水風呂で整いたい→サーフィンは本当に整います
- ダイエット→サーフィンすれば痩せて引き締まります
- メンタルが不安定→サーフィンすると気持ちが明るくなります
- アンチエイジング→サーフィンしてる方は皆さん若々しいです

これら表面的なものは付加価値です。

実際にやってみると本質はここではありません。

自然に発生する波と一体になる感覚は筆舌に尽くし難いものです。

サーフィンの道具を買うといった初期投資も、家賃の差額とジムに通っている方ならジムの会員費1年分あれば十分元が取れてしまうでしょう。

正直きっかけはなんだっていいのです。

さあ、サーフィンしましょう！

## Namikki(なみっき)

[https://www.namikki.jp/](https://www.namikki.jp/)

![C9023211-3001-473C-B2E5-5D259A6F3A26_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990592/c9ced112-c244-6c9a-bf52-bc90edb1e6fc.jpeg)


# **サービス概要**

愛知県田原市の伊良湖エリアのサーファーがサーフィン日記を共有できるSNSサービスです。

エリアを限定して始動しましたが、これから私が様々な地域でサーフィンする中で拡張していく予定です。

## 1. 田原市の3時間ごとの天気予報５日間分を表示

![https://i.gyazo.com/dd7ccfecfbf1db5cf877854d1481f72b.gif](https://i.gyazo.com/dd7ccfecfbf1db5cf877854d1481f72b.gif)

## 2. 投稿機能 (無限スクロールにしました)
サーファーはスマートフォンからSNSに投稿される方が多いので、スマホファーストの実装しています。
そのため、無限スクロールを採用しました。

![https://i.gyazo.com/ad46bc03b942a46dee85f25ef8b00ee7.gif](https://i.gyazo.com/ad46bc03b942a46dee85f25ef8b00ee7.gif)

## 3. いいね・コメントがあった場合に通知機能をつけました。

自身の投稿・自身がコメントした投稿したコメントに反応があると右上のベルに赤いマークがついて通知がきたとわかるようにしました。
このサービスが交流のきっかけになってもらえたらと思い実装しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990592/c9cc69e0-e02c-d56a-d99a-bc234967e020.png)


通知ページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990592/5464c0ee-cb98-fc67-abdf-2d4bcb4cd621.png)


# **使用技術**

- Ruby 2.7.2
- Rails 6.1.4.1
- JavaScript

## **主なGem**

- better_errors
- bullet
- sorcery
- carrier_wave
- rails_admin
- factory-bot
- capybara
- pry-byebug
- rubocop

## テスト

- RSpec

## フロントライブラリ


- JQuery


## ストレージサービス

- Amazon S3

# ER図

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/990592/a3cd365d-0c53-cd3b-c3cf-c0fc3d089925.png)


# **こだわったポイント**

海はその日の天気によって見え方が変わるので

**Namikkiも同様にするために…。**

### 取得した天気予報に応じて背景画像を変化させました

**雨の日**

![https://i.gyazo.com/941197792a82f20ce92221cad0f6187f.gif](https://i.gyazo.com/941197792a82f20ce92221cad0f6187f.gif)

**雷雨の日**

![https://i.gyazo.com/6c933bdc024745051f830dda35363a8d.gif](https://i.gyazo.com/6c933bdc024745051f830dda35363a8d.gif)

**雪の日**

![https://i.gyazo.com/947cd73014cdf4cda87eb49d1d1ab767.gif](https://i.gyazo.com/947cd73014cdf4cda87eb49d1d1ab767.gif)

# **今後実装したい事**

- 今後、自身が実際にサーフィンしたエリアも追加します
- 返信相手を指定してその人にのみ通知がいくようにする(現状は投稿にコメントした人全員に通知がいきます)

# **終わりに**

最後まで読んでいただきありがとうございました。

これからサーフィンを始める方にとっては、初めてサーフィンをした日記からつけていただき感じた事を記録しておくと財産になります。

今回リリース時では私の地元の海、伊良湖エリアを限定にしたサービスにしました。

実際にこれから、様々な海でサーフィンしていき、その都度このサービスを拡張させていきたいと考えています。

自分の作った作品と共に成長したい！と考えています。

【Twitter】

[https://twitter.com/otokomigakimasu](https://twitter.com/otokomigakimasu)

【今回作ったサービス】

[https://www.namikki.jp](https://www.namikki.jp/)