【個人開発】リモートワーク時代なので、デスク周りに特化した写真投稿サービスを作りました

こんにちは、Barry（ばりゅー）と申します。
いきなりですが言わせてください。
このサービスは今読んでいるあなたのために作ったサービスです！


## はじめに

リモートワークが当たり前になった今、みなさんは**どんなデスクで作業してますか？**

「もっと快適にしたい。」「もっとオシャレにしたい。」
デスクワーカーなら一度、いや、二度三度思ったことがあると思います。
そんなとき、**他人のデスク**が参考になったりしますよね。

そこでこんなサービスを開発しました。

## どんなサービス？
**デスク周りに特化した写真投稿サービス「Buildesk（ビルデスク）」**です。
![app_ogp_new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/fe5f3185-387f-980b-715f-531d248de5a2.png)
【サービスURL】https://buildesk.app
【GitHub】https://github.com/en-Barry/buildesk

Buildeskの一番の特徴は、**使ってるアイテムも登録できる**こと。投稿者がどんなアイテムを使っているのか瞬時に分かるようになっています。



|投稿デモ|投稿詳細ページ|投稿詳細ページ|
|---|---|---|
|![buildesk_post_sample2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/a59be18c-2e49-7e2e-3e4b-2dc6aa5b99e1.gif)|![Screenshot_20210728-191205_Chrome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/015032f1-7d63-56d6-3ee6-d3576a4a45c0.jpeg)|![Screenshot_20210728-191231_Chrome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/ff2281f5-0aa6-9538-473a-de32e77e79cc.jpeg)|

**参考にしたい投稿を保存**しておくことも可能です。気になったデスク、アイテムの型番や名前を忘れる心配がありません。

|投稿保存ページ|
|---|
|![Screenshot_20210728-190254_Chrome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/8fb41a17-f98b-2645-0889-422bd7c40324.jpeg)|


シェアするときもいい感じで表示されるようになってます。

https://buildesk.app/posts/24

https://buildesk.app/posts/16

https://buildesk.app/posts/1


## どうして作った？

プログラミングの勉強を始めたときに抱えた悩み。
それは、「身体が痛くて集中できない！」ということでした。

デスクワークに慣れていなかった自分は作業環境を整える必要があり、暇さえあればTwitterやインスタで参考になるデスク写真を探す日々。
ただ、Twitterやインスタで見かけるのは**写真のみの投稿が多く、見た目しか参考になりません。**

何のアイテムを使ってるんだろう？使い心地はどんなもんだろう？
実際に知りたいことが分からないもどかしさがありました。

そこで、**みんながデスク周りに使ってるアイテムを瞬時に分かるサービス**を開発しました。

## 使用技術
- Rails '6.0.3.5'
- Ruby '2.6.6'

### 主なGem
- rakuten_web_service
    - 商品価格ナビ製品検索API
- sorcery
- carrierwave
- ransack
- enum_help
- meta-tags
- hanmoto

### フロント
- jQuery
- Swiper
- Bulma

### インフラ
- AWS
    - EC2, S3, CloudFront, RDS
- puma
- Nginx

## 工夫 ・ 苦労した点

#### jQuery x FormObject x 楽天APIで実装したアイテム登録機能
サービスの肝であり、一番苦労したのもこの部分。

スクールの講師にも実装が難しいと判断され、「Amazonのリンクを貼ればいいんじゃない？」と提案を受けていました。
ただ、世に出ているサービスとの違いはここ！といったこだわりがあったため、どうしても提案を受け入れられず。
現にjsonファイルの扱い、jQueryのDOM操作、複数モデルのデータ保存など分からないことが次々に待ち受けており実装にも1~2ヶ月かかってしまいましたが、理想に近い機能を実装できました。

|![Screenshot_20210728-184626_Chrome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/7331c9d8-954b-b89c-1ebf-e182cb72d45d.jpeg)|![Screenshot_20210728-184653_Chrome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/04a65f47-ee62-8684-1ec1-e2061fdd4401.jpeg)|
|---|---|



#### デザイン
一度使ったら終わりのアプリではなく、ユーザーが長く滞在するのを想定しているアプリなので見た目にはこだわりました。
ただ、デザイン知識やCSSの知識が乏しかったためCSSフレームワークの[Bulma](https://bulma.io/)に頼って何とか仕上げました。フレームワーク様様です。
また、投稿するとなるとスマホからの利用が多いと思ったので、スマホで操作しやすいように画面下にナビゲーションバーを自作で作りました。

|TOPページ|投稿一覧ページ|
|---|---|
|![Screenshot_20210728-204753_Chrome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/9b463cc3-4b53-694f-7381-d08be19b21b8.jpeg)|![Screenshot_20210728-190450_Chrome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/231e2d8b-34b5-0b98-912e-0d82bf7924a4.jpeg)|

    
#### マネタイズ
マネタイズと言えるほどでもないですが、一応収益が出る仕組みになっています。
楽天APIの利用ではアフィリエイトIDが必要になり、商品情報取得時点で自動的にアフィリンクが作成されます。
これを利用して、アイテム詳細ページにアフィリンクを設置し、自然な形で収益につながる設計ができました。
![Screenshot_20210728-204612_Chrome.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/707098/b055462d-1529-1a22-3f46-aa27a6eb2dec.jpeg)

## 今読んでるあなたに使ってもらいたい

Qiitaを読んでいるあなたこそBuildeskの対象者です。
デスクワーカーである、あなたのために作ったサービスと言っても過言ではありません！

**「自慢できるほどのデスクじゃないしな。。」**
そんな方も現時点のデスクを登録するメリットがあります。
  
  - デスク遍歴がひと目で分かるので、エモさを感じれる
  - デスク周りでオススメを聞かれたときに、使ってるアイテムを思い出す手間が省ける
  - 他人にデスクを見られると思うと、自然に片付け始める

などなど..


もちろん、**ガチガチにこだわってる人も大いに自慢してください！**
今後のアップデートで人気の投稿はトップページで紹介する予定です。
イケてるデスクを投稿した際にはぜひTwitterでシェアしてくださいね。必ずいいねしに行きます。

記事は以上となります、ここまで読んでくださってありがとうございました！！

https://buildesk.app

### Special Thanks

プログラミングに関しての知識が全くの0だった自分が開発、リリースできるまでになったのは[RUNTEQ](https://runteq.jp/)のサポートがあったから他なりません。

また@aiandroxさんをはじめとした@sho171さんや@krpk1900さんなど、RUNTEQコミュニティで出会えた方々のサポートもすごく大きかったです。

この場を借りて御礼申し上げます。