2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ノーコード(bubble.io)でファミコンのレビューサイトを作ってみた。

Last updated at Posted at 2021-01-16

#はじめに
今まで何度か自分のサービスを作ろうとしては挫折していたのですが、ノーコード(bubble.io)を触り1時間もかからずアカウント登録の実装ができたので、「これなら完成までいける!」と確信し挑戦してみました。

#やりたかったこと
・ファミ通のクロスレビュー風のレビューサイト
・荒井清和先生風タッチの画像ジェネレーター
・twitterログインあり
・SNSっぽく「いいね」をつける

#挫折
vue.js+firebaseで作ろうとするも環境構築で挫折。
プログラマーの人は本当にすごいと思います。webpackの設定だったり、つまづきポイントが多すぎてリリースまでいける気配がしませんでした。

#触り慣れてくると機能を増やしたくなる
マーク・ザッカーバーグの名言

Done is better than perfect.
(完璧であることより、まず終わらせることが重要だ)

を自分に言い聞かせて、作業しながら「あれもしたいこれもしたい」という欲望を捨て、やりたいことだけを実装してリリースすることだけに集中しました。

#できたもの
ファミレビュー
https://famireview.bubbleapps.io/
https://famireview.bubbleapps.io/version-test/
ファミレビュー.png

トップページ

レビューとデータベース.jpg
ファミコンのデータベースとジェネレータ

デザインツールなど
figmaを使用してロゴやアイコン作成。ベクター編集ツールとして使用。
画像ジェネレータの素材作成は、使い慣れたphotoshopを使用し筆圧感知ありのペンタブで素材を準備。

#全体として
ページ数は23ページで特にサイトマップなどは作らず行き当たりばったりで作りました。
sitemap.jpg
共通エレメントはヘッダーとフッターのみ共通で使用しています。もっと使うべきな気がします...

#辛かったこと
##ファミコンソフトのデータベース登録
googleで「ファミコン データベース CSV」などで検索すると様々な方がまとめていたので、使用させてもらおうと思ったのですが、
bubble.ioは無料枠の場合、データベースの更新にCSVアップロードが使えません!
なので
1000本以上あるのをファミコンソフトを手動でデータベースに登録したのですが
実はこの作業が一番時間がかかった箇所になりました...(40時間くらいだったと思います)

##bubble.ioの基本repeat groupの理解
登録されているデータベースの表示にはrepeat groupを使用するのですが、どう紐付けたらいいか今だにわからない時があります。
(サンプルなどにRGと名前付けされていてrepeat groupの略だとわかるのにも時間がかかりました。)
ちゃんと紐づいていない時はわかりやすくエラーが表示されるので、一旦保留にして違う作業をするなどして頭をリセットしてから調べ直すなど、焦らずちょっとずつ解決していきました。

##レスポンシブ対応
レイアウト周りは結構癖があるなと感じました。
なのでスマホのみで横幅375pxで1カラムとしました。
リリースするのが目的なのもあり、割り切るのも大事かなと思います。

##助けてもらったサイト
###ノーコード ラボ
https://blog.nocodelab.jp/
手順をおって解説がありわかりやすいです。画像も多く理解が慣れるまで何度も訪れました。
ノーコードラボさんはプラグインも作成しており、ジェネレータ部分は
Element to PNG
https://blog.nocodelab.jp/entry/elementtopng
を使用させていただいています。
すごい!

###Bubble Forum
https://forum.bubble.io/
「bubble.io 英単語A 英単語B」くらいで検索すると基本的にbubble.ioのフォーラムが出てきます。つまづいた時はこれしかないです。ここに載っていない、読んでも理解できないのは実装せず(夢を膨らませず)次の工程に一旦進むのがいいです。

#リリースしてみての不安
・youtubeのサムネイルを使用していることは問題ないか?(一応youtubeにはリンクさせている)
・画像ジェネレータの素材は荒井清和先生が描いた似顔絵をトレースしていること
・ファミ通のクロスレビューを意識しすぎて怒られるのではないか。
・利用規約などはざっくりと準備
などありますが、突っ込まれたら取り下げたり直したりなどしていこうと思います...

#まとめ
作業を始めてから3ヶ月ほどで作ることができ、コードを全く書かずにそれっぽいサービスができ上がるのには驚きました。
コードを書かずにといっても、ノーコードの仕様だったりUIなどに慣れるのにはやはり時間はかかりました。
結果的に合計100時間くらいはかけたと思います。
ですがリリースまで辿り着けるという成功体験を得られるのは大きいことでした。
今後はちびちびとバージョンアップをしていこうかなと思っています。

2
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?