-
- いいね！0
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
今日は１日空きがあるので、今から今年の個人開発始めます お題は「スマホの壁紙を売るサイト」ということでやっていきます ↓ツリーで繋げていくので邪魔な人はミュートしてください
2022-12-23 19:30:34
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
1. ドメインを取得 今回は 壁紙→ロール→ror.jp ということで、数年前にとって放置されているドメインの再利用です。エコですね 2. ドメインの管理はcloudflareでやるのが便利すぎるのでネームサーバーを向けて管理します 3. 画像を管理するためにAmazon S3にコンテナを作ります pic.twitter.com/HOOWOd3q3a
2022-12-23 19:35:23
拡大
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
4. cloudflareにCNAMEを設定 コンテナ名をドメインにするとCNAME振るだけでキャッシュできるようになる（厳密にはあまり良くないがめんどいのでそれで行く） CNAME s3 -> s3.ror\.jp.s3-ap-northeast-1.amazonaws\.com 5. AWSの設定でCloudflareからアクセス出来るように dev.classmethod.jp/articles/cloud… pic.twitter.com/v4pfJK87kV
2022-12-23 19:44:24
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
6. cloudflareでSSL/TLSを上の記事どおりにフレキシブルにする 7. githubでリポジトリを作る（「Add a README file」しているのは、ファイルを作っておけば手元でcloneするだけで開発始められるから） 8. 手元にcloneして開発開始 pic.twitter.com/CcF5wa9XXj
2022-12-23 19:49:14
拡大
拡大
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
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） pic.twitter.com/akcbfugU67
2022-12-23 19:55:45
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
11. rails new、今回はテスト書いてる時間がないので「-T（テストを生成しない）」本当は-j とか色々あった気がするけど全部インストールして自分で消すことにする 12. DB設定をDockerに向けて 13. 使わないものをconfig/application.rbからコメントアウトする 14. rubocopとかを適当に設置 pic.twitter.com/J94AKCMkKd
2022-12-23 20:05:05
拡大
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
15. Gemfileを適当に整理（過去に使ったものを持ってくる） 16. jsをviteで管理する＼ﾊﾔｲｿﾞ／ 17. yarn installしてprettierやlintが動くようにする 18. assets周りを整理 / 個人的に画像は変更される事がほぼない&キャッシュしたいのでpublicに置くよう変更/css,jsはgemによって使うので一応残す pic.twitter.com/lVnywP5WpD
2022-12-23 20:11:47
拡大
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
19. 開発環境の構築に大切なエディタ周りのプラグインや設定を行っていく / 秘伝のタレみたいになってるので最新は知らないけど自分はこんなプラグインを入れている せっかくなので軽く紹介すると > shardulm94.trailing-spaces 最後の空白を消してくれる（今はエディタにデフォでついてる説がある） pic.twitter.com/bkfBfURCaw
2022-12-23 20:13:52
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
> streetsidesoftware.code-spell-checker 英単語をタイポしていると教えてくれる。 > mosapride.zenkaku 全角スペースを教えてくれる > usernamehw.errorlens エラーの箇所が1枚目の画像のように背景色ありで見えるようになる > github.copilot コードのタイプ量が半分くらいになる pic.twitter.com/NrnwPb7mwQ
2022-12-23 20:19:03
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
20. 今回はTwitter連携アプリにするので、適当に過去に作ったTwitterアカウント（開発申請済み）を再利用する @ror_jp 21. 開発用にキーを発行する 22. 手元で環境変数を設定する 23. 起動確認 pic.twitter.com/Nki2lSmfao
2022-12-23 20:30:21
拡大
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
24. deploy先としてrender.com を使う 25. redis, postgresqlを設定 26. 環境変数をセットにする 27. render.com 用の設定ファイルを書いてpush pic.twitter.com/vEJwSDpc0p
2022-12-23 20:37:57
拡大
拡大
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
28. render.comの設定を行う 29. ドメインとDNSを設定するように指定されるので 30. cloudflareで設定を行う。この時proxyはオフにすること 31. verify ということで1時間ほどかかりましたが事前準備は終了です。あとは開発すれば終わりです pic.twitter.com/UXObafx7l2
2022-12-23 20:47:45
拡大
拡大
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
ここで今回のサービスコンセプト 僕はスマホの壁紙を一切設定しないタイプの人間なのですが、なんだかんだ設定している人は多いなーと感じまして その理由を考えていたのですが僕が設定しない理由のいくつかは 1. 非公式 2. サイズが合わない ここらへんが大きいかなーと
2022-12-23 20:57:36
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
そこで自分のデバイスに合わせてサイズを最適化した状態でダウンロード出来て、かつ公式であれば1画像100円～1000円くらいの値段感ならサクサク使えるかな？と、思いました 要は「公式 ちいかわスマホ壁紙 500円」とかみたいなやつですね
2022-12-23 20:59:03
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
というわけで休憩している間にDNSも浸透してこのようにアクセス出来るようになりました ror.jp ここから肉付けをしていきます pic.twitter.com/cLbyosvBbu
2022-12-23 21:00:26
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
サービスのどこを最初に作るか？ と言うのはみんな悩むところだと思いますが、個人的には「ヘッダー、フッター、ヘルプページ」の順をおすすめしています サイトの雰囲気を決める重要な部分と、プログラムを組まなくても完成度を上げられるのが良いです
2022-12-23 21:03:45
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
ヘルプに関しては手間をかけないならNotion,頑張るならmicroCMSが良き（ベタ書きは編集するたびにgitログを汚染するのでめんどくなるのでおすすめしません） 今回はめんどくさいのでnotionで作っていきます 以下のように仮ページを置いておいて、リンクを貼ればOK brawny-technician-d01.notion.site/ROR-JP-f18fa54…
2022-12-23 21:08:06
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
ということで、上のURLをコピーしてベタ書きします（もっとちゃんとやる方法はあるけどコスパ悪いのでパス） 適当にデザインを整えればそれっぽくなります pic.twitter.com/jtmbyItUwB
2022-12-23 21:12:46
拡大
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
余談ですが、フッターが長くて大きいほどしっかりしたオフィシャル感のあるサイトになります 参考として以下のように横に並べただけのものと見比べると一個前の組み方のほうがしっかりしたサイトに感じませんか？ 今回は販売サイト＝お金を扱うサイトなので信頼度を上げる形でデザインを見ます pic.twitter.com/9u8BNXvK7O
2022-12-23 21:16:25
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
次に決めるべきは「ロゴ」です これも本来は発注したいところですが、貧乏個人開発者は「google font」か「ためしがき」で良さげなものを探しましょう 日本語名ならtameshigaki.jp 英語なら fonts.google.com 今回は一旦これにしました pic.twitter.com/X1PSHhriKf
2022-12-23 21:25:32
拡大
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
ヘッダーも同じ事が言えて、1枚目よりも、2枚目のほうが信頼度が高いサイトに感じます 不思議ですね あと、信頼度高いっぽいサイトを作りたいならデザインセンスない人はとりあえず白黒を採用しておくのが楽です 勝手にとてもかっちりした雰囲気になります pic.twitter.com/sSQEYdkYUU
2022-12-23 21:31:04
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
ちなみにどのようにデザインを組んでいくかというと、似たようなコンテンツを扱う大手サイトを参考にするのが良くて、今回は「instagram」を意識すると良いのですが、あまりにもそれを意識しすぎるとデザインが引っ張られるのでpinterestで「instagram redesign」で参考になるデザインを探します pic.twitter.com/KGiCM55LE7
2022-12-23 21:44:19
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
少し話はずれますが販売サイトを作るときは主体となるのが「コンテンツ」なのか「クリエイター」なのかをしっかり考える必要があります コンテンツが主体の場合はひたすらコンテンツを並べれば売れます（1枚目）が、クリエイターが主体の場合は逆にクリエイターの一覧を並べる必要があります pic.twitter.com/HNEBiuQ9ZG
2022-12-23 21:47:55
拡大
拡大
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
1. 自分のサイトを利用する人がどこから来るのか？ 2. コンテンツは公であるべきか？ などの軸から考えると良いです 検索流入を意識するなら「猫 スマホ 壁紙」でしょうし、個人を意識するなら「せせり イラスト」になるでしょう 今回は後者を選びます
2022-12-23 21:51:39
せせり｜※発言は個人web開発者のバッドノウハウです
@sesere115
以上から、次に考えるのは「販売ページ」「一覧ページ」「クリエイターページ」のデザインとなります boothさんで言うなら以下の3ページがしっかり作れればあとはおまけなので適当でもOKです （※特集で販売されているものなので貼っても大丈夫だと思いますが問題あれば教えてください） pic.twitter.com/nXQIkdU80G
2022-12-23 22:07:02
拡大
拡大
拡大