ノーコードツールBubbleで夢小説サイトを復活させてみた
おはようございます。noteではお久しぶりのoz（@ozoz_witch）です。
2022年は「自分のプロダクトをつくる」を目標にしてみたので、非エンジニアでも簡単にサービスが立ち上げられると話題のBubbleに1年ぶりに挑戦しました。
タイトルに「The best way to build web apps without code」と入っているとおり、コーディングなしでWebアプリが立ち上げられるという便利な代物です。
今回は、Bubble習熟も兼ねて学生時代死ぬほどお世話になっていた「夢小説サイト」を復活させてみたので、それについて書きます。
夢小説とはいわゆる二次創作小説のサイトで、ユーザーが自分のニックネームを設定すると、登場人物がそのニックネームを呼んでくれるのでものすごい没入感が得られます。（効能が感じられるかは個人差があります）
復活させたサイトはこちら。
なぜ「夢小説サイト」にしたかというと、まだ誰もやっていなさそうだったのと、immersive（没入感がある）な仕組みにはアナログであれデジタルであれ潜在的な需要があるんじゃないかなと思ったためです。
正月にハリーポッターを全巻一気読みした影響で、TikTokにハリーポッターの関連動画しか出て来なくなる謎の時期があったのですが、その時に動画に「name」とテロップが付いてキャラクターがこちらに呼びかける演出があったんですね。
この「name」は勝手に自分の名前を思い浮かべてね、ということなのですが、ここが自動変換されたら面白いSNSになるのでは？と思ったのです。
しかもこれ昔お世話になった夢小説じゃんwというオチ。
ちなみに、当方はマーケターや企画をやっている非エンジニア。
HTMLやCSSの基礎は理解していますが、既存のコードを少し調整するくらいなら可能ですが、自分でコーディングをすることはできません。
前置きが長くなりましたが、本noteでは下記についてしたためます。
＜書くこと＞
・どのような機能をBubbleで実現させたか
・どのようなサイトを参照して実装したか
＜書かないこと＞
Bubbleの具体の技術的なことがら
基本機能① ユーザー登録機能
Bubbleの機能を使って簡単にログイン画面を作成することができました。
夢小説サイトにメールアドレス登録はハードルが高いかな？と思ったのですが、Bubbleの機能を使った方が手間が省けそうなので一旦作ってみました。
実装にはこういうページを参考にしています。
基本機能② ホーム画面
夢小説を一覧で見ることができるホーム画面を作成しました。
裏側では夢小説のタイトル・本文・いいね数を管理できるデータテーブルを作成し、ホーム画面にタイトル・本文・いいね数に加えて作成者の名前とアイコンが表示できるようにしています。
表側では Repeated Group を使ってそれらが最新投稿順に表示されるように設定しました。
また、ボトムメニューとしてホーム・投稿・お知らせの3種類のアイコンを設置しました。（お知らせの紙飛行機に更新バッジを設定しようとして挫折し、常時表示される仕様になっていますw）
Repeated Group はコツを掴むのに少し時間がいりましたが、こういったサイトを参考にして慣れていきました。
基本機能③ 閲覧画面
こちらはホーム画面の夢小説をクリックすると遷移する閲覧画面です。
こちらも Repeated Group を使い、ホーム画面からクリックした夢小説のタイトル・本文などを引き継いで作成しています。
画面下部にはハートマークのいいね機能を設置し、1人1回タップして総いいね数が表示されるようになっています。
尚、いいねをした後、もう一度いいねをすると解除されるようになっており、1人複数回いいねできないようにしました。
基本機能④ 投稿画面
投稿画面は主にInput機能を使って構成しています。
Instant text を使うことで、本文を入力すると右下に文字数カウントが表示されるようになっています。
後述しますが、本文に「夢の主人公」と入力すると、自動でユーザー名に変換されて表示されるようになっています。
作品タグ機能についても後述します。
基本機能⑤ お知らせ画面
ここまでで基本的な読み書き機能はできたものの、サイトの進歩が見れないとちょっと寂しいし、自分の小説にいいねが付いたことが知れた方が良いだろうと思い、お知らせ画面を作成しました。
現状は Repeated Group を使って管理人のお知らせを表示できるだけの画面にしています。
ただ毎日更新箇所を記入しているだけですが、それでもなんとなくらしくなるから不思議。
基本機能⑥ ご意見画面
お知らせだけで一方通行のコミュニケーションにならないよう、ユーザーが匿名で投稿できるご意見画面を設置しました。
青い矢印をクリックすると、ご意見への管理人の返信も見ることができます。
返信が来ていないご意見は、青い矢印が薄くなるように Conditional 設定をしています。
ご意見詳細画面はこちら。
発展① 名前登録機能
ここからが発展編というか、夢小説ならではの機能です。
夢小説の肝は「推しがユーザーが設定した名前を呼んでくれる」ことです。
本サイトではユーザー登録の次のステップで名前を登録し、作品ごとに名前を設定する必要がない形を取りました。
Inputでユーザーテーブルのデータを更新する簡単な仕組みです。
発展② 名前変換機能
一つ前で設定した名前を夢小説に反映させる機能がこちらです。
事前に下記の Find&Replaceプラグイン を入れておき、「夢の主人公」というテキストを User Name に一斉置換するようにしています。
発展③ 作品タグ機能
好きな作品を探すにはタグが不可欠・・・と思い、タグ付け機能を設定しました。
下記サイトを参考にしたのですが、HTMLを設定してその中に insert dynamic dataをする感じです。
複数のタグを設置することも可能です。
番外編 ロゴを無料で作成する
ロゴがないとなんだかしまらないので、下記サイトで無料でロゴを作成しました。
くじらのロゴで夢見心地な感じになりました。
最後に
以上が夢小説サイトを復活させるのにあたって活用した機能です。
デザイン面や夢小説検索機能などまだまだ改善すべき点は多いのですが、一旦基礎は整備できたので、一区切りだと思っています。
Bubbleの勉強にもなって非常に良かったです。
本サイトは本番稼働しておりますので、下記お待ちしております！
本サイトで夢小説を書いてくれる人
「こうしたらもっと良くなるよ」的なご意見・ご感想