Thread

Conversation

9. 開発環境をセットアップ → Docker使うと簡単に作成できる。とりあえず以下をベースにする redis6.2.5, postgresql 14, ruby 3.1.2, node.js 14, yarn 1.22 Dockerさえ用意しておけば1分もあれば上の環境を独立して作れる。便利 10. Gemfile作って（bundle init）、インストール（bundle install）

5,357

せせり@webサービス開発

@sesere115

Dec 23

11. rails new、今回はテスト書いてる時間がないので「-T（テストを生成しない）」本当は-j とか色々あった気がするけど全部インストールして自分で消すことにする 12. DB設定をDockerに向けて 13. 使わないものをconfig/application.rbからコメントアウトする 14. rubocopとかを適当に設置

15. Gemfileを適当に整理（過去に使ったものを持ってくる） 16. jsをviteで管理する＼ﾊﾔｲｿﾞ／ 17. yarn installしてprettierやlintが動くようにする 18. assets周りを整理 / 個人的に画像は変更される事がほぼない&キャッシュしたいのでpublicに置くよう変更/css,jsはgemによって使うので一応残す

19. 開発環境の構築に大切なエディタ周りのプラグインや設定を行っていく / 秘伝のタレみたいになってるので最新は知らないけど自分はこんなプラグインを入れているせっかくなので軽く紹介すると > shardulm94.trailing-spaces 最後の空白を消してくれる（今はエディタにデフォでついてる説がある）

> streetsidesoftware.code-spell-checker 英単語をタイポしていると教えてくれる。 > mosapride.zenkaku 全角スペースを教えてくれる > usernamehw.errorlens エラーの箇所が1枚目の画像のように背景色ありで見えるようになる > github.copilot コードのタイプ量が半分くらいになる

20. 今回はTwitter連携アプリにするので、適当に過去に作ったTwitterアカウント（開発申請済み）を再利用する @ror_jp 21. 開発用にキーを発行する 22. 手元で環境変数を設定する 23. 起動確認

24. deploy先としてrender.com を使う 25. redis, postgresqlを設定 26. 環境変数をセットにする 27. render.com 用の設定ファイルを書いてpush

28. render.comの設定を行う 29. ドメインとDNSを設定するように指定されるので 30. cloudflareで設定を行う。この時proxyはオフにすること 31. verify ということで1時間ほどかかりましたが事前準備は終了です。あとは開発すれば終わりです

ここで今回のサービスコンセプト僕はスマホの壁紙を一切設定しないタイプの人間なのですが、なんだかんだ設定している人は多いなーと感じましてその理由を考えていたのですが僕が設定しない理由のいくつかは 1. 非公式 2. サイズが合わないここらへんが大きいかなーと

そこで自分のデバイスに合わせてサイズを最適化した状態でダウンロード出来て、かつ公式であれば1画像100円～1000円くらいの値段感ならサクサク使えるかな？と、思いました要は「公式ちいかわスマホ壁紙 500円」とかみたいなやつですね

というわけで休憩している間にDNSも浸透してこのようにアクセス出来るようになりました ror.jp ここから肉付けをしていきます

サービスのどこを最初に作るか？と言うのはみんな悩むところだと思いますが、個人的には「ヘッダー、フッター、ヘルプページ」の順をおすすめしていますサイトの雰囲気を決める重要な部分と、プログラムを組まなくても完成度を上げられるのが良いです

ヘルプに関しては手間をかけないならNotion,頑張るならmicroCMSが良き（ベタ書きは編集するたびにgitログを汚染するのでめんどくなるのでおすすめしません）今回はめんどくさいのでnotionで作っていきます以下のように仮ページを置いておいて、リンクを貼ればOK

brawny-technician-d01.notion.site

ということで、上のURLをコピーしてベタ書きします（もっとちゃんとやる方法はあるけどコスパ悪いのでパス）適当にデザインを整えればそれっぽくなります

5,010

せせり@webサービス開発

@sesere115

余談ですが、フッターが長くて大きいほどしっかりしたオフィシャル感のあるサイトになります参考として以下のように横に並べただけのものと見比べると一個前の組み方のほうがしっかりしたサイトに感じませんか？今回は販売サイト＝お金を扱うサイトなので信頼度を上げる形でデザインを見ます

Translate Tweet

12:16 PM · Dec 23, 2022

Replying to

次に決めるべきは「ロゴ」ですこれも本来は発注したいところですが、貧乏個人開発者は「google font」か「ためしがき」で良さげなものを探しましょう日本語名ならtameshigaki.jp 英語なら fonts.google.com 今回は一旦これにしました

ヘッダーも同じ事が言えて、1枚目よりも、2枚目のほうが信頼度が高いサイトに感じます不思議ですねあと、信頼度高いっぽいサイトを作りたいならデザインセンスない人はとりあえず白黒を採用しておくのが楽です勝手にとてもかっちりした雰囲気になります

ちなみにどのようにデザインを組んでいくかというと、似たようなコンテンツを扱う大手サイトを参考にするのが良くて、今回は「instagram」を意識すると良いのですが、あまりにもそれを意識しすぎるとデザインが引っ張られるのでpinterestで「instagram redesign」で参考になるデザインを探します

少し話はずれますが販売サイトを作るときは主体となるのが「コンテンツ」なのか「クリエイター」なのかをしっかり考える必要がありますコンテンツが主体の場合はひたすらコンテンツを並べれば売れます（1枚目）が、クリエイターが主体の場合は逆にクリエイターの一覧を並べる必要があります

1. 自分のサイトを利用する人がどこから来るのか？ 2. コンテンツは公であるべきか？などの軸から考えると良いです検索流入を意識するなら「猫　スマホ　壁紙」でしょうし、個人を意識するなら「せせり　イラスト」になるでしょう今回は後者を選びます

以上から、次に考えるのは「販売ページ」「一覧ページ」「クリエイターページ」のデザインとなります boothさんで言うなら以下の3ページがしっかり作れればあとはおまけなので適当でもOKです（※特集で販売されているものなので貼っても大丈夫だと思いますが問題あれば教えてください）

販売ページは基本的にコンテンツを大きく見せたい……とおもいきや、大きく見せるよりも少し小さめにしたほうが上品が出るときもあります例えば1枚目のようにとにかく大きく出すのではなく、2枚目のようにわざと小さく出す方法ですねついでにshadowをかけると良さげになります

上に「20/100」などと書いてありますが、デジタルコンテンツの難点として「無限にコピーできる」というものが上げられます極論、誰かが1枚買ってweb上に放流されたらその画像を買う気はあんまりなくなってしまうという人も多いのではないでしょうか今回はそれを解決するために→

版画で用いられる「エディションナンバー」を採用します例えば最初に「累計100個売ります」のように数を指定して、購入した場合「x/100」の数値がランダムに割り振られます＋買ったイラストをダウンロードする時に画像にナンバーを入れることが出来ます（もちろんオフにもできます）→従って

購入者は以下の画像1（ナンバーなし）と、画像2の両方を入手することが出来ます簡単に言えばエディションナンバーありを持っていれば本物という感じですね。なんちゃってNFTみたいなもんですもちろん自分でエディションナンバーを書き足せばごまかせますが、そこまでするよりは買うと思います

画像（＝販売item）のmodel設計ですが 1. 値段 2. user_id 3. 商品名 4. image_file が最低限で、そこに+して限定数と何個売れたかと公開、非公開フラグを持たせる商品名は一旦10文字までにして、商品説明を持たないことでシンプルな設計にする→

1. 現実で例えばスマホケースなどを買う時にわざわざ商品名を確認することは殆どない 2. 従って本来は「商品名」すらいらない 3. しかしそれを指す個体名が無いとSNSで共有され辛くなる　例「壁紙買った」→「『猫ちゃんパーク』の壁紙買った」 4. 従って妥協し10文字程度の商品名を持つことにする

余談 Twitterログインの機能を作るときにサイトのテイストを壊したくなくて青以外でログインボタンを設定している場合がありますがその場合は「Twitterでログイン」のように「Twitter」まで文言を入れないとリアクション率が下がりますそれがTwitter色を使っておくと「ログイン」だけで良くなります

本来は「ログイン」と「新規登録」を上の黒いデザインで2つ作ってそれぞれ別ページに遷移させるのが正しい振る舞いなのですが当サイトは「Twitter連携で使う気楽なサイトなんだな」という感も同時に持たせたいのでデザインを犠牲にしてもログインボタンを青色で設置しますダサいけどトレードオフです

ついでにそのままログイン・ログアウトを作ります twitter側でcallback URLを設定するのを忘れずにあとは内部的にログイン、ログアウトを実装すればOKです画像などのデータも取得できていますね

販売サイトの場合は「ユーザーが退会したらどうするか」を先に考えておく必要がありますパターンとして以下の2点が問題になりそう 1. itemを販売した事のある人が退会した→既に購入しているuserの購入履歴の表示 2. itemを購入した事のある人が退会した→購入されたcreatorの購入履歴での表示

どちらの対応もユーザー部分を「退会したユーザー」とだけ表示すると決めましたのでuserが削除された場合はnullを入れるという方法にしますこの場合、一度退会すると購入履歴等が消えてしまうのですがそれは問題発生時に確認できれば良いので定期バックアップを取ることで回避します

これまた余談ですが、最近はアイコン＝丸にするという風潮がありますが四角いアイコン＝企業感、しっかりした印象を与え丸いアイコン＝ユーザー感、カジュアルな印象を与えるのでクリエイターは四角いアイコン、ユーザー（購入者）は丸の方が良いか考え中です

ついでに、日本語というのは文字数の関係からどうしてもおしゃれにするのが難しい言語＋Twitterから引っ張ってきた場合は名前以外の情報が入っている場合が多くこれによりサイトのテイストを統一するのが非常に難しくなるので基本的にこういったID表示は英語を採用したい気持ちがあります

好みの問題でもあるのですが、カジュアル感とデザインのバランスでクリエイターをスーパー楕円、ユーザーを円形にすることにしましたこの2つのアイコンを両方丸ではなく、それぞれ形を分ける理由は長くなるので割愛しますスーパー楕円はdaisyuiを使うと楽に実装できます daisyui.com/components/ava