ノーコード（bubble.io）でファミ通クロスレビュー風のアイコン画像生成サイトを作る

#初めに
[ファミレビュー](https://famireview.bubbleapps.io/)というレビューサイトを作ったのですが、その中にアカウントを作成するとマイページからファミ通クロスレビュー風（荒井清和先生風）のアイコン画像生成を使用できるようにしたのですが、この機能を別サイトとして切り分けようと思います。

#できたもの
ファミレビューアイコンジェネレータ
https://famireview-icon-generator.bubbleapps.io/

![icon.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/c4eb382b-48d5-9e16-17dd-d4fbe912093a.jpeg)


#コピーの前に仕組みの説明
ノーコードラボさんの複数の画像を合成してくれるプラグインを使用させていただいています。
https://blog.nocodelab.jp/entry/elementtopng

##登録した画像データベースをリピートグループで表示
###データベースの構造
・パーツ画像→image
・パーツ名→name
・パーツのカテゴリ→PartsType
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/9d27cb39-4a01-5cbc-713c-d3060d46d6ee.png)

App dataに登録していきます。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/fa28ab99-b3bf-feed-6f93-6e47db07c358.png)

###リピートグループで表示
Custom stateでページ内のみで一時的に使用するデータを紐付けます。
https://note.com/nocoder_k/n/n9aa7093c702a

WorkflowでCustom stateの登録する。

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/8966f710-941e-c6b5-9528-d0cfa00d9850.png)

リピートグループと紐付けてカテゴリにあったデータを絞りこむ
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/9a470ea0-0808-eb90-d43f-3c7bc2acb6ae.png)

###Element Pngで合成できるように紐付ける
workflow
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/8108ecb8-4b5c-c30f-25b8-baf1fd968fcd.png)
design
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/c959e3a1-8a06-7afd-cd9c-5e25a103a54c.png)

workflowのCustom stateで選んでいるリピートグループの画像が紐づくようにする。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/b140387b-de9c-a62f-55fb-1b2b80ca5a3d.png)

##コピー方法
##コピーしていらないページなど削除する
1.ベースのサイトをコピー
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/2c814dd5-1248-9c76-5a3b-6b3a2c2be9cb.png)

2.サイト名とデータベースをコピー
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/762d19c8-54bd-1196-1e63-c5b21a38a99d.png)

3.画像ジェネレータ以外のページは削除
<font color="Red">Workfrowに紐づいた機能も削除されるので、エラーを見ながら調整する</font>
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/ebcae725-401e-8124-d77c-a77abaea8db0.png)

4.indexページを画像ジェネレータページに切り替える
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/e3cdc6a1-1946-7010-f4e1-e3c964da98bf.png)

5.いらないデータベースも削除
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/7f22760a-6bc9-38c7-7353-acbdc2f71eae.png)

##サイトのmeta属性などを変更する
setting > SEO/metatags
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/f73306b6-38b9-bae9-9898-2ddfcd987cef.png)

##開発モード（Develop）のデータベースを本番に移行する
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/72988292-ed56-f027-e154-0cec05e8aa2e.png)

<font color="Red">本番→開発、開発→本番の２つの移行方向があるので注意</font>
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/a786e50c-9e20-72c4-6259-8e1b1f28b89a.png)

文言が表示されるので間違えずに入力すると確定できるようになります。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/2bf50ff7-d39d-f185-4231-651a2d0b7a0f.png)

##google アナリティクスを登録する
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/773b2e49-3eda-737e-43ad-aef381f28bdd.png)


#課題
使用したプラグインだとiPhoneでダウンロードボタンを使用して保存ができなかった。
なので「長押しで画像保存してください。」と補足を入れてカバーした。
自分でプラグインを作ってみたりと原因を探っていきたい。
作成した画像をそのままシェアする機能を実装したかったが、挫折してしまったので再度挑戦しようと思う。