【React】Game Usersを一緒に作ろう！【Node.js】 [無断転載禁止]©2ch.net
ゲームユーザーズはゲームユーザーのためのコミュニティサイトです。
現在、開発者を募集しています。
初心者でもWebを触ったことのないプログラマーでもOKです！
ReactやNode.jsを使える、または興味があるみなさん
ぜひ一緒にやりましょう！
デザインできる人も協力してくれると嬉しいです。
開発者募集！
https://gameusers.org/dev/blog/developer/
開発ブログ
https://gameusers.org/dev/blog/
GitHub
https://github.com/gameusers/web
Game Users
https://gameusers.org/
質問・疑問なんでも書き込んでください。
ブログの記事をここにも投稿するので読んでみてね。 今日は配信用の課金システムを作ろうと思います。
Game Usersに実装したい機能なのですが
いつ完成するかわからないので
とりあえず違う場所に作ってみます。
https://youtu.be/0PMdbnKpd_g 今日も課金システムをいじります。
iPhoneでフォームに入力できないと言ってたのでそこを調べます。
https://youtu.be/aIk6c5Z6kMg プログラム配信やります。
ユーザーコミュニティをクローズド設定にした場合
参加者以外には見れなくしたい。
#React #Nodejs #JavaScript
配信URL
https://youtu.be/zF3pRI_SuHQ プログラム配信やります。
ユーザーコミュニティに参加承認した人をメンバーにする処理。
ブロック機能も作りたい。
#React #Nodejs #JavaScript
配信URL
https://youtu.be/eJaZ-C4a-NM React Hook について少し勉強してみました。
これまで状態管理に MobX を利用してきたのですが、
Hook を勉強した結果、これまでのやり方を見直すべきなのではないかと思いました。
Hook を利用してローカルステートで書くのは
とてもわかりやすく、処理が散らばらない点も素晴らしいと感じました。
現状、MobX 上ですべてのステート、すべての処理をまとめているのですが、このやり方はやめるべきじゃないかと。
状態管理の例としてよくあるカウンターの数値を増減させるサンプルのようなものでも
自分はこれまで外部のストアにすべて書き出していました。
でも Hook を学び、コンポーネント内にステートも処理も入れ込んでしまう書き方を試してみたところ
こちらの方が全然扱いやすいように思えるのです。
CSS では emotion というライブラリを利用しているのですが
こちらも HTML のタグにそのままスタイルを書き込んでいきます。
最初は違和感も大きかったのですが、しばらく使ってみると、とても扱いやすいことに気づきました。
配信URL
https://youtu.be/Fcdv9UXVAFU 久しぶりのプログラム配信。かなり完成に近づいています。
GitHubにDockerの解説を載せておいたので
誰でもコードや動作をチェックすることができるようになりました。
今日はユーザーコミュニティ作成ページを作るぞ！
https://youtu.be/-HT1VvxOr3A 完成形が近くなってきました。
プッシュ通知のテストをしたいので
テストに参加してくれる方募集！
https://youtu.be/u3agDYHxtFE ずっと作っていたGame UsersのNode.js版がついに完成しました！
とんでもない新機能が盛りだくさんというわけではないのですが
とりあえず第一段階はやり遂げました。今から解説します！
https://youtu.be/PEDFabpQYVU 今日はみなさんに仮登録していただいたゲームを
本登録にすべく、IT土方的な作業を行おうと思います。
余裕があればゲーム情報を取得するスクレイピングの構想も行いたい。
https://youtu.be/yn9QQsRpu6c GitHubにGame Usersの正式なリポジトリを新たに作って
そちらで作業をしていくつもりです。
それに向けて改めてGitとGitHubについて勉強しようと思います。
プルリクエストってどうやって処理するんだ？というレベルです。
https://youtu.be/75EofG7SmRg 今、Gitの勉強をしています。
Commit時にPrefixを入れた方がいいということを知り
また絵文字も使えるらしいので
コミット用のテンプレートを作っています。
Visual Studio CodeにGitLensとGit Graphという拡張機能も入れました。
僕の得た知識をみなさんにもお知らせしたい！
https://youtu.be/gIwDhX67Ntc ついにGame Usersの正式リポジトリを開設しました。
これから開発者の方にアピールするために
Wikiを充実させていこうと思います。
採用技術について入っているパッケージについてなど
いろいろ書かなければならないことがあります。
Wikiで丁寧に情報を提供することで
みなさんに面白そうなプロジェクトだと思ってもらいたい！
https://youtu.be/36kF7UZxni4 GitHubのWikiに必要な情報を書き出しました。
今日はDiscussionsにアイディアをまとめようと思います。
いい感じになってきてると思うので
みなさんもチェックしてみてください。
https://youtu.be/l327mZrldWU なんと悲惨なことに、このサイトはこれまでずっと
ゲームやコミュニティを簡単に検索することができませんでした。
ついに検索フォームが実装されるのです。
今までなにをしていたんだ…。
https://youtu.be/vmSApI9xtC4 ようやく検索フォームを実装できました。
今日は登録するゲームの情報を取得するために
スクレイピングについていろいろ調べようと思います。
Node.jsっていいライブラリあるんだろうか？
https://youtu.be/ZKvWPLfHj5A Webスクレイピングを行おうとしているのですが
SPAだとページを正常に取得するのが難しいみたいで
Headless ChromeというGUIなしで
ブラウザを利用できる機能を使うのがいいらしいです。
今日はそれを用いてゲーム情報を取得していきます。
https://youtu.be/I6QYSzQYKgQ Headless ChromeでWebスクレイピングを行っています。
各ゲームストアからデータを取得していきます。
保存先のデータベースも用意しないといけいないので
思っていたよりも手間のかかる作業でした。今日も頑張ります！
https://youtu.be/529GIKa9Lwk Headless ChromeでWebスクレイピングを行っています。
レイジーロードの画像の取り方を調べます。
スクロールを下まで行かせると読み込むらしいのですが
それだけで大丈夫なんでしょうか？
https://youtu.be/spqzdqx5V5Q Headless Chrome は非表示なのに、
スクロールしたり、スクロール位置を取得できるの？
やんばるCODE の守護神・たけ、2019/12
【Rails】（送信時のリロード無し！）Action CableでSlack風チャットアプリを作成
www.youtube.com/watch?v=o6PuxDr8Meg
表示されるブラウザでは、こういうように、特定のスクロール位置になったら、
データをサーバーから読み込んで、要素をHTML に追加できる Headless ChromeでWebスクレイピングを行い
データを取得するところは完成しました。
今は取得したデータを変換してゲーム登録に活かす部分を作っています。
今日は画像を圧縮して保存します。
https://youtu.be/KEu-goo0L7c スクレイピングで取得したデータを処理して
本番環境にJSONで取り込もうと思っています。
みんな開発環境で作成したデータを
どうやって本番環境のデータベースに移行してるんだろう？
PHPを使ってたときはphpMyAdminでやってたんですが
本番環境にそういうツールを入れるのは危ないのでやめた方がいいですよね。
となると自作するしかないのか…。
https://youtu.be/uLU8MxO1t7A スクレイピングデータを取得しながら違う作業を進めていきます。
今日は管理者ページでユーザーのアカウント作成日を変更できるようにします。
旧サイトに数年ログインしていない場合
まったく使用されていないアカウントとして
削除する処置をしていたのですが
一部の方は新サイトでも新アカウントを作成して使ってくれているので
作成日だけでも昔の日付に戻せるようにしたいのです。
というわけで今日はこれをやります！
https://youtu.be/hL1xx0x3R94 ブログ機能を追加しようと思います。
それにあたり、いろいろ考えなければならないことがあるので
配信でフォームの構成や、投稿ルールなどを考えようと思います。
https://youtu.be/eWV7aW9WOuc 現在、横道に逸れてSNSと連携した占いサイトを制作しています。
導入部分のフォームとTwitterとの連携部分は完成しました。
今日やるところはタロットカードで占い結果を表示する部分です。
https://youtu.be/25Zel3o-IXQ 占いサイト作成中です。
占いたいことをフォームで送信して結果の表示に利用します。
そして結果をデータベースに保存します。
今日はこの部分を完成させたい！
https://youtu.be/2Lr-LDCSEvE 占い結果を画像＆感想を投稿できるようにする予定ですが
Twitterにも投稿できるようにします。
その際の投稿画像のデザインを自分で作れるようにします。
今日はそこの部分を作るぞ！
https://youtu.be/RONBgVo4EUI 占い結果を投稿し、閲覧できるようにします。
今日はその結果ページを作ります。
占いのカテゴリーごとに表示できるようにもしたい。
https://youtu.be/hXUx1KHHswI 占いサイトが完成に近づいてきました。
今日は依頼するデザインの方向性を考えます。
今のところ神秘的なデザインがいいかなと思ってるんですが
いろんなサイトを見て研究したいです。
時間があればデザイナーさんも探したいですね。
https://youtu.be/lU125l30quI 占いサイトのテスト版が完成しました。
機能的には主なものはすべて動きます。
テストに参加してくれる方募集！
デザイナーさんも探したいです。
https://youtu.be/0UxQSnbbJtg 今日は真剣にデザイナーさんを探そうと思います。
仕事請負サイトをチェックするつもりですが
それ以外にも人の探し方ってあるんでしょうか。
アドバイス求む！
https://youtu.be/Y_lGG2VF-wc レスポンシブ対応なら、Bootstrap を使えば？
最近は、Tailwind と言うものもあるらしい Bootstrapは卒業しました。
本業の方の手を借りたいです。
みなさん仕事請負サイトを経由した形で請け負うことを望まれるのでしょうか。
他の窓口がある場合は直接やり取りを行いたいのですが
それを望まない方も多くいるのでしょうか？
サイト内の実績を積み重ねられますが
手数料の負担をクライアントにお願いしてまで行いたいことなのかと考えると
なんだかこちらとしてはモヤモヤが残ります…。
https://youtu.be/Jh5kHBHVa7w イラストレーターやデザイナーの方にこれまで直接連絡をとってみて
得た実体験なのですが、そもそも連絡が返ってきません。
素性のわからない個人からの依頼は非常にぞんざいに扱われるみたいです。
看板がない者はわかりやすく予算を提示しないとダメなのかもしません。
あとコンペについて言及するのは悪手ですね。
これについてはデザイナー側も思うところがあるのだと思います。
実績や繋がりを得るために安売りを行ってしまっている現状
そこを意識させてしまうのは良くないということに気づきました。
自分はコンペを開催して労働力をただで提供してもらうのは申し訳がないということで
デザイン案に前金を支払う形でやりたかったのですが
参加料が支払われるコンペというイメージになってしまうと
悪印象に繋がってしまうのかもしれません。
https://youtu.be/QeSONOrnEQw デザインとか外側ばっかいじってないで中身どうにかしたら？ 中身の機能はほぼ完成しています。
後はデザインだけなんです。
僕の配信を視聴してくれている
デザイナーの方にいいものを作っていただきました。
完成に向けて修正する部分を考えていこうと思います。
https://youtu.be/JCMbkuILk78 aiファイルから画像を書き出して
コーディングを行っていこうと思います。
SVGを活用したいのですが、背景みたいな画像もSVGにできるんだろうか。
https://youtu.be/1DGNVd0wDJ0 トップページの画像は用意しました。
あとはHTMLのタグに変えていくだけです。
昔テーブルで実現していたような
囲われた箱にデザインを当てはめるのは難しい作業ですね。
毎回、悩みます。
https://youtu.be/O77YI9XdNTE トップページのコーディングが終わりました。
今は結果ページに取り掛かっています。
大まかな部分はできているので
細かな調整とタブレット・スマホ対応の作業も行いたいです。
https://youtu.be/GJIS8_uure0 追加したい機能がどんどん出てきて完成が延びています。
今日こそは占い結果ページのスマホ対応を完成させたい。
ブラウザからインストールした際のアプリアイコン
ファビコンのデザインも選びます。
https://youtu.be/bBY1BvBrc9Q ついにデザインが完成しました！
後は広告関係の作業を行ったら終わりです。
今日はラッキーアイテムに表示する商品を探そうと思います。
おすすめの品があったら教えて下さい。
https://youtu.be/E0bIuGvIz2s ついに占いサイトが完成します！
最終チェックを行うのでみなさんご協力お願いします。
問題がなければデータベースを初期化して正式公開します。
https://youtu.be/HH0fKOfZXeo 完成した占いサイトがどうやったら流行るのか
宣伝方法を考えていこうと思います。
良い案がありましたらぜひご提案ください。
https://youtu.be/4BTw-3JYPzU 無料で宣伝を行うのは限界がある気がしてきました。
ただし予算が潤沢ではないので
できるだけコスパのいい方法で宣伝したいです。
どうすればいいのか考えていこうと思います。
https://youtu.be/xU-O_BcdPdc イラストをベースにして結果を表示できる
新しい占いを作成しようと思います。
イラストレーターの方に依頼をしなければならないのですが
まずはいらすとやの画像を使わせてもらってテスト版を作ります。
https://youtu.be/FMROUVlSBFo イラストをベースにして結果を表示できる
新しい占いのレーティング機能を作成します。
今日はセリフとメッセージを追加できるようにします。
https://youtu.be/prkSD6hvFlk イラスト投稿型占いは
Twitterに結果を投稿できるのですが
返り先のURLのページの機能やデザイン構成を考えます。
https://youtu.be/yCcwhlYgAuM イラスト投稿型占いの課金サービスについて。
投げ銭は法律的に問題があるようなので
どういう形で実現させるか考えます。
https://youtu.be/9O-ormn30Hk イラスト投稿型占いを作成中です。
時間がかかりすぎですが
ようやくガワが完成しそうです。
データベースの操作はまだなので
完成までは日がかかりそうです。
https://youtu.be/cN5Mq4GcMGg 
