1
0

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 3 years have passed since last update.

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

Last updated at Posted at 2021-02-07

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

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

icon.jpg

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

##登録した画像データベースをリピートグループで表示
###データベースの構造
・パーツ画像→image
・パーツ名→name
・パーツのカテゴリ→PartsType
10.png

App dataに登録していきます。
11.png

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

WorkflowでCustom stateの登録する。

12.png

リピートグループと紐付けてカテゴリにあったデータを絞りこむ
13.png

###Element Pngで合成できるように紐付ける
workflow
14.png
design
15.png

workflowのCustom stateで選んでいるリピートグループの画像が紐づくようにする。
17.png

##コピー方法
##コピーしていらないページなど削除する
1.ベースのサイトをコピー
1.png

2.サイト名とデータベースをコピー
2.png

3.画像ジェネレータ以外のページは削除
Workfrowに紐づいた機能も削除されるので、エラーを見ながら調整する
3.png

4.indexページを画像ジェネレータページに切り替える
4.png

5.いらないデータベースも削除
5.png

##サイトのmeta属性などを変更する
setting > SEO/metatags
6.png

##開発モード(Develop)のデータベースを本番に移行する
7.png

本番→開発、開発→本番の2つの移行方向があるので注意
8.png

文言が表示されるので間違えずに入力すると確定できるようになります。
9.png

##google アナリティクスを登録する
19.png

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

1
0
0

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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?