![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect fill-opacity="0"/></svg>)
今日は１日空きがあるので、今から今年の個人開発始めます
お題は「スマホの壁紙を売るサイト」ということでやっていきます
↓ツリーで繋げていくので邪魔な人はミュートしてください
Translate Tweet
Thread
Conversation
Replying to
1. ドメインを取得
今回は 壁紙→ロール→ror.jp ということで、数年前にとって放置されているドメインの再利用です。エコですね
2. ドメインの管理はcloudflareでやるのが便利すぎるのでネームサーバーを向けて管理します
3. 画像を管理するためにAmazon S3にコンテナを作ります
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="287"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="266"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="679" height="143"><rect fill-opacity="0"/></svg>)
4. cloudflareにCNAMEを設定
コンテナ名をドメインにするとCNAME振るだけでキャッシュできるようになる（厳密にはあまり良くないがめんどいのでそれで行く）
CNAME s3 ->
s3.ror\.jp.s3-ap-northeast-1.amazonaws\.com
5. AWSの設定でCloudflareからアクセス出来るように
dev.classmethod.jp/articles/cloud
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="331"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="900" height="297"><rect fill-opacity="0"/></svg>)
6. cloudflareでSSL/TLSを上の記事どおりにフレキシブルにする
7. githubでリポジトリを作る（「Add a README file」しているのは、ファイルを作っておけば手元でcloneするだけで開発始められるから）
8. 手元にcloneして開発開始
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="234"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="324" height="360"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="182"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="188"><rect fill-opacity="0"/></svg>)
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）
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="306"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="679" height="332"><rect fill-opacity="0"/></svg>)
11. rails new、今回はテスト書いてる時間がないので「-T（テストを生成しない）」本当は-j とか色々あった気がするけど全部インストールして自分で消すことにする
12. DB設定をDockerに向けて
13. 使わないものをconfig/application.rbからコメントアウトする
14. rubocopとかを適当に設置
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="304" height="360"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="183"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="252" height="358"><rect fill-opacity="0"/></svg>)
15. Gemfileを適当に整理（過去に使ったものを持ってくる）
16. jsをviteで管理する＼ﾊﾔｲｿﾞ／
17. yarn installしてprettierやlintが動くようにする
18. assets周りを整理 / 個人的に画像は変更される事がほぼない&キャッシュしたいのでpublicに置くよう変更/css,jsはgemによって使うので一応残す
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="297"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="141"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="289" height="212"><rect fill-opacity="0"/></svg>)
19. 開発環境の構築に大切なエディタ周りのプラグインや設定を行っていく / 秘伝のタレみたいになってるので最新は知らないけど自分はこんなプラグインを入れている
せっかくなので軽く紹介すると
> shardulm94.trailing-spaces
最後の空白を消してくれる（今はエディタにデフォでついてる説がある）
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="517" height="667"><rect fill-opacity="0"/></svg>)
> streetsidesoftware.code-spell-checker
英単語をタイポしていると教えてくれる。
> mosapride.zenkaku
全角スペースを教えてくれる
> usernamehw.errorlens
エラーの箇所が1枚目の画像のように背景色ありで見えるようになる
> github.copilot
コードのタイプ量が半分くらいになる
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="583" height="165"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="272" height="123"><rect fill-opacity="0"/></svg>)
20. 今回はTwitter連携アプリにするので、適当に過去に作ったTwitterアカウント（開発申請済み）を再利用する @ror_jp
21. 開発用にキーを発行する
22. 手元で環境変数を設定する
23. 起動確認
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="291"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="259"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="247"><rect fill-opacity="0"/></svg>)
24. deploy先としてrender.com を使う
25. redis, postgresqlを設定
26. 環境変数をセットにする
27. render.com 用の設定ファイルを書いてpush
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="177"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="262"><rect fill-opacity="0"/></svg>)
28. render.comの設定を行う
29. ドメインとDNSを設定するように指定されるので
30. cloudflareで設定を行う。この時proxyはオフにすること
31. verify
ということで1時間ほどかかりましたが事前準備は終了です。あとは開発すれば終わりです
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="222"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="150"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1166" height="171"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="679" height="187"><rect fill-opacity="0"/></svg>)
ここで今回のサービスコンセプト
僕はスマホの壁紙を一切設定しないタイプの人間なのですが、なんだかんだ設定している人は多いなーと感じまして
その理由を考えていたのですが僕が設定しない理由のいくつかは
1. 非公式
2. サイズが合わない
ここらへんが大きいかなーと
そこで自分のデバイスに合わせてサイズを最適化した状態でダウンロード出来て、かつ公式であれば1画像100円～1000円くらいの値段感ならサクサク使えるかな？と、思いました
要は「公式 ちいかわスマホ壁紙 500円」とかみたいなやつですね
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="554" height="680"><rect fill-opacity="0"/></svg>)
サービスのどこを最初に作るか？
と言うのはみんな悩むところだと思いますが、個人的には「ヘッダー、フッター、ヘルプページ」の順をおすすめしています
サイトの雰囲気を決める重要な部分と、プログラムを組まなくても完成度を上げられるのが良いです
ヘルプに関しては手間をかけないならNotion,頑張るならmicroCMSが良き（ベタ書きは編集するたびにgitログを汚染するのでめんどくなるのでおすすめしません）
今回はめんどくさいのでnotionで作っていきます
以下のように仮ページを置いておいて、リンクを貼ればOK
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="680" height="362"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="211"><rect fill-opacity="0"/></svg>)
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="298" height="900"><rect fill-opacity="0"/></svg>)
余談ですが、フッターが長くて大きいほどしっかりしたオフィシャル感のあるサイトになります
参考として以下のように横に並べただけのものと見比べると一個前の組み方のほうがしっかりしたサイトに感じませんか？
今回は販売サイト＝お金を扱うサイトなので信頼度を上げる形でデザインを見ます
![Image](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="311"><rect fill-opacity="0"/></svg>)
New to Twitter?
Sign up now to get your own personalized timeline!
Trending now
What’s happening
Food · Trending
スタバの新作
7,327 Tweets
Music · Trending
紅白の曲順
18.5K Tweets
Entertainment · Trending
アイネスフウジン
9,357 Tweets