【React】Game Usersを一緒に作ろう！【Node.js】 [無断転載禁止]©2ch.net

**あづみ** ◆WYiR3RzL3U · 2018/05/17(木) 14:29:27.76

プログラム配信 - ヘッダーの調整とトップページをデザインします！

AmazonアソシエイトアカウントがBANされた件ですが
ブログにまとめました。本当にひどい扱いです。
https://gameusers.org/dev/blog/ban-amazon-associate/

今日は頑張ってヘッダーの気に入らない部分を調整して
トップページのデザインを考えようと思います。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/05/23(水) 15:08:19.53

Material UI バージョン 1.0.0 に対応しました。これまでと書き方が変わっていたので、戸惑う方もいるかもしれません。

import Button from '@material-ui/Button';
　　　↓↓↓
import Button from '@material-ui/core/Button';

開発版が終わって、core をつけなければならなくなりました。

あと Next.js を 6.0 にしてから、getInitialProps （最初に処理される constructor みたいなもの）
が正常に動かなくなっていたので、こちらのページを参考に裏側の処理を書き直しました。

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Node.js なのですが、ブラウザの表示サイズをサーバー側で取得することができないようです。
PHP はできていたような気がするのですが。
PC でアクセスしたときとスマホでアクセスしたときに表示の違いを設けたいのですが
CSS のメディアクエリですべてを処理するのは大変なので
JavaScript のサーバー側でも取得したいのです。でも方法がわからず。

今日もトップページのデザインを行います。
カード型デザイン

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/06/04(月) 15:05:33.81

デザインを考えているのですが、機能性といいデザインを両立するのが大変で
かなりしんどいです。基本的に既存のものの切り貼りや
ちょっとしたアレンジで乗り切っていますが、ゼロから想像するセンスがないため
いろいろな面で妥協しないといけなくなるのが辛いです。

現在はカード型デザインでゲームの一覧を表示
検索もできるようになるページのデザインを考えるところです。

トップページはそこそこいい感じになりました
http://35.203.143.160:8080/

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/06/08(金) 15:54:32.46

今このページのデザインを考えています
ゲームを検索できるページです
http://35.203.143.160:8080/gc

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/06/19(火) 16:40:33.66

トップページ、ゲームコミュニティ一覧、ユーザーコミュニティ一覧
ログインページのデザインが終わり
いよいよメイン機能であるコミュニティページのデザインを行うところまで来ました。

掲示板の使い勝手が悪いので、改善案を出してもらいながら
新しいデザインを考えようと思います。

ユーザーコミュニティ一覧
http://35.203.143.160:8080/uc

ログインページ
http://35.203.143.160:8080/login

配信＆IDE URL
>>139

**Name_Not_Found** · 2018/06/19(火) 18:15:24.33

これ作ってみ？？
https://goo.gl/ux7Y7F

**あづみ** ◆WYiR3RzL3U · 2018/06/29(金) 15:47:36.35

現在、ユーザーコミュニティのデザインを行っています。
掲示板のスレッド一覧、検索、コメント部分などを考えています。

http://35.203.143.160:8080/uc/community

**あづみ** ◆WYiR3RzL3U · 2018/07/11(水) 14:26:36.28

掲示板の画像アップロード・動画投稿機能を作成中です。
アップロードする画像を選択、または投稿する動画のURLを入力した際に
画像がプレビューされるようにします。
複数画像のアップロード、複数動画の投稿に対応しようと考えています。

http://35.203.143.160:8080/uc/community

配信＆IDE URL
>>139

**Name_Not_Found** · 2018/07/11(水) 17:12:17.77

setStateってすぐに反映されないの？？

**あづみ** ◆WYiR3RzL3U · 2018/07/12(木) 01:47:14.64

自分はReactを触りだしていきなり、Reduxという状態管理パッケージで管理したので
setStateは使っていなくてよくわかりません

今はMobXという同じような状態管理パッケージを使っているのですが
Reduxと比べても非常に簡単に書けるので
Reactに慣れてきたら、これをおすすめしたいですね

なんかあんまり役に立たない答えでごめんなさい

調べてみたところ、この辺りに答えが書いてあるでしょうか？
https://likealunatic.jp/2015/07/reactjs-setstate
https://ja.stackoverflow.com/questions/38711/

**あづみ** ◆WYiR3RzL3U · 2018/07/17(火) 13:07:07.03

掲示板にアップロードされた画像や動画を表示する部分を作成します。
画像＆動画がひとつだけ投稿された場合の表示はすでに完成しています。
次は複数の画像、動画が投稿された場合の表示部分を
Swiper という Lightbox を利用しながら実装しようと思います。

Swiper: http://idangero.us/swiper/
react-id-swiper: https://github.com/kidjp85/react-id-swiper

http://35.203.143.160:8080/uc/community

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/07/19(木) 13:05:33.85

Swiper で Lightbox（複数の画像を表示するギャラリー）的な機能を
実装しようと思ったのですが
Swiper は本格的な Lightbox パッケージじゃないようなので
納得の行くものになりませんでした。

そこで React 用の Lightbox パッケージを探し出してきて
それで画像を表示させようと思います。

できれば動画もギャラリー的に表示したかったのですが
以下のものは画像しか対応していないようです。

React Images:?https://jossmac.github.io/react-images/

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/08/06(月) 13:26:54.47

ストアの構成を見直していました。APIからどういう形式でデータを受け取って、
表示に反映させるかということを考えなければならなかったので
その間、プログラム配信は行っていませんでした。
だいたいの形は見えてきたので、また再開しようと思います。

現在はユーザーが登録してくれたサムネイルや名前を表示する部分を作成しています。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/08/13(月) 13:21:52.08

ユーザーコミュニティページ内にある掲示板をずっと作っています。
コメントへの返信フォーム、投稿されたコメントを編集するフォームを作成しています。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/08/20(月) 09:33:50.94

Node.js のバージョンを8.11.4にアップグレードしました。
nvm でインストールすると、毎回 npm が v5.6.0 になるんですが、
これはなにか意味があるんでしょうか。
npm もついでにアップグレードしていますが
アップグレードしたらいけないんだろうか。

今日もユーザーコミュニティページの掲示板を作ります。
コメントへの返信フォーム
投稿されたコメントを編集するフォームを作成しています。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/08/23(木) 11:44:19.72

掲示板の画像表示部分を調整しています。
1つだけ画像がアップロードされた場合は大きく表示し
複数の画像や動画が同時にアップロードされた場合は
小さく表示しようとしています。

コメント投稿・編集、返信用フォームも完成していないので、そちらも作成します。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/08/24(金) 11:35:11.16

コメントの投稿フォームと、投稿済みのコメントの画像表示部分が
意図せず連動してしまう問題が起こっていたのですが
コピーが参照になっていたせいでした。
昨日1日使ってしまったのですが、冷静に考えたらすぐにわかりました。

もう少し落ち着いて考えないとだめですね。

今日もコメント投稿・編集、返信用フォーム部分を作成します。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/08/30(木) 13:47:13.34

掲示板の投稿フォームで
画像と動画部分については正常に投稿できるようになりました。
いつまでやってるんだって感じですが
まだコメント投稿・編集、返信用フォームも完成していないので
そちらも作成していきます。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/09/03(月) 12:39:47.65

MongoDB をインストールしてみたものの
全然試さずに外観ばかり触っていたので徐々に不安になってきました。
実際、データベースを使ったときに思っていた処理ができなかったら困るので
データベースを利用しながらログインシステムを作ってみます。

これまでインストールされていた MongoDB は Ver.3 だったのですが
Ver.4 にアップデートしました。
トランザクションが使えるようになったらしいです。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/09/10(月) 13:27:36.43

ログイン、アカウント作成部分を作っています。
クライアント側から POST でログイン ID、ログイン Password を送信して
ユーザー登録を行おうとしたのですが
Fetch で new FormData を利用してデータを送信しようとすると
Node.js + Express 側で POST 情報が受け取れなくなりました。

これまでは body-parser で POST 情報をパースしていたのですが
そのパッケージだと new FormData で作成した情報は受け取れないようなのです。
調べてみたところ new FormData は multipart/form-data なので
body-parser では処理ができないとのことでした。
そこで multer をインストールして POST 情報を処理できるようにしました。

Node.js + Express は本当にめんどくさいですね。
PHP ではなにも考えずにできていたことが簡単にできなくなっています。
裏側の理屈を理解できている人なら原因がすぐにわかるのかもしれませんが
自分レベルだといちいち引っかかってしまうのが苦しいところです。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/09/21(金) 12:51:31.71

Next.js を Ver.7.0.0 にしました。すると以下のエラーが出ました。

Error: [BABEL] /home/cloud9/collaboration/pages/login/index.js:
The decorators plugin requires a ‘decoratorsBeforeExport’ option,
whose value must be a boolean.
If you want to use the legacy decorators semantics,
you can set the ‘legacy: true’ option.

MobXで利用しているデコレーター（@）で問題が起きているようです。

・babel-plugin-transform-class-properties
・babel-plugin-transform-decorators-legacy

上記の Babel 用プラグインでデコレーターを利用していたのですが
Babel 7 から新しいプラグインが用意されたようです。

・@babel/plugin-proposal-class-properties
・@babel/plugin-proposal-decorators

Babel 7 から関係するパッケージは @ つきのパッケージ名になり（スコープ化というらしいです）
同じような機能のものが新しく作られたみたいなので
そちらを利用することにしました。

引き続きログイン、アカウント作成部分を作っているのですが
ロボットの不正ログイン対策で reCAPTCHA を導入しました。
そしてさらに CSRF 対策で、csrf ミドルウェアを利用しようとしています。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/09/25(火) 11:08:26.71

ログイン機能の reCAPTCHA ＆ CSRF 対策のコードをモジュール化して分離しました。
Node.js は import が使えないため、
クライアント側と同じ書き方ができないのが不便です。
いろいろ調べてはみたのですが
今のところは現実的に import / export 文を使うのは難しいとの結論に達しました。

ES Modules をお試し機能的に使うことはできるようなのですが
安定版として提供されているわけではないので
なにか問題が起こったときに対処ができなくなりそうなので
現時点での利用はやめておこうと思います。

早く使えるようになるといいのですが。

今やろうとしているのはアカウント作成時に
パスワードをハッシュ化して保存し、E-Mail は暗号化して保存する部分です。

配信＆IDE URL
>>139

**Name_Not_Found** · 2018/10/02(火) 21:47:17.57

【アフィ】元宇宙人のスピリチュアルブログ【詐欺】
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12193781232

**あづみ** ◆WYiR3RzL3U · 2018/10/04(木) 11:25:48.49

ログインとログアウト機能はほぼ完成しました。
あとはログインしていないときに、ログアウトページにアクセスした場合、
ログインページに飛ばすといった、リダイレクト機能を追加するだけです。

それが終わったらプレイヤーページ
（ログイン後にアクセスする各ユーザーのホーム）を作成しようと思います。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/10/09(火) 12:59:55.47

プレイヤーページ（ログイン後に表示されるホーム）の作成に移ります。
とりあえずプレイヤーカードのデザインを考えようと思います。
プレイヤーカードというのは各ユーザーのプロフィールのようなもので、
カード型のデザインで、プレイヤーの各種情報を表示する機能を持たせる予定です。

できればいろいろなページで使い回せるようなデザインのものにしたい。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/10/16(火) 10:58:21.34

プレイヤーカードのデザインが完成しました。
これからこれをコーディングしていきます。
各ソーシャルサイトへのリンクを掲載でき、
フレンド募集にも活用できるので
なかなか機能的でいいデザインになったのではないかと思います。

https://gameusers.org/dev/blog/wp-content/uploads/2018/02/player-cards.jpg

配信＆IDE URL
>>139

**Name_Not_Found** · 2018/10/18(木) 02:28:21.13

　私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。

**あづみ** ◆WYiR3RzL3U · 2018/11/05(月) 10:12:38.77

MongoDB でトランザクションが使えるように設定しました。
レプリカセット構成じゃないと駄目だとのことだったので設定を行いました。

レプリカセットというのは、複数台のデータベースを立ち上げて
それを組み合わせることで安定性をもたらす機能のようです。
同じサーバー内に3つのプロセスを立ち上げて構成しているので
安定性の向上にはあまり期待できない状況ですが
とりあえずトランザクションは使えるようになったので良かったです。

現在はプレイヤーカードのデータベーススキーマを作成して、データを挿入できるようにしようとしています。

配信＆IDE URL
>>139

**Name_Not_Found** · 2018/11/10(土) 21:38:23.52

http://r2.upup.be/wV2qsULdHm

**あづみ** ◆WYiR3RzL3U · 2018/11/28(水) 14:48:09.37

プレイヤーカード（各ユーザーのプロフィールカードのようなもの）を
作っているところで進みが悪くなっています。

Fetch のラッパー関数を作ったり、エラー処理の方法を考え直したり、
アカウント作成・ログイン部分を修正したり、いろいろやっていたのですが
そういった基本的な構成を考えるところで詰まってしまうので
時間がどんどん過ぎていきます。

ひとつ型ができると、それをベースにしていろいろなページを作っていけるのですが
その型を作るのがとても大変ですね。

昨日はページのローディングが終わってからボタンを利用可能にする機能を作っていました。
ページへのアクセス後、現在読み込んでいることを明確に示すために
ローディングアニメーションのアイコンをページのどこかに表示しようと思っています。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2018/12/26(水) 13:30:39.12

MongoDB でリレーショナル DB と同じような join ができることを知って、
データベースの構成を見直していました。
MongoDB は配列もオブジェクトもそのまま入れることができ
検索も可能であるが故に、どういう構成にすればいいのか余計に悩んでしまいます。

例えば多言語データの扱いで { ja: ‘日本’, en: ‘Japan’ }
こうやってひとつのオブジェクト内にすべて含ませるか
それとも行ごとにデータを分けて必要なデータだけを読み込むか、どっちにすればいいのか迷ってしまいます。

すべてのデータをひとかたまりにすると、データがバラバラに保存されないメリットもあるのですが
一度すべてを読み込んでから
不必要なデータをそこから排除するという手間がかかってしまうため
結局のところ、行ごとに管理して必要なデータだけを読み込む方がいいように思えてきました。

データベースの構成を考えるのは本当に難しいですね。

あとデータベースの中身は容量の関係上で、GitHub 上に掲載しなくなったのですが
すでにデータがないと正常に動かなくなってきているので
簡単に初期データを挿入できる機能をつけました。
詳しくは GitHub の解説をチェックしてください。

今は各ユーザーの名前やサムネイルが表示されている部分にボタンを表示して
それを押すことでプレイヤーカード（プロフィール的なもの）を
ダイアログ（モーダル）で表示する機能を作っています。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2019/01/19(土) 11:25:29.78

今日はプレイヤーカードのゲームID表示部分を変更します。
綺麗にIDを表示したい！

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2019/01/31(木) 13:52:32.98

現在、Cloud9 を GCE で運用しているのですが、夜9時頃になるととても重くなります。
バンドルファイルが大きくなっていることも関係しているのか、読み込みが正常に終わりません。

VPS は仮想なのでアクセスが集中する時間帯は重くなったりもするのですが
GCE も同じなんですね。クラウドはそういう問題とは縁がないのかなと考えていたのですが
そういうわけではないんでしょうか。というかそもそも GCE はクラウドじゃない？？

1年間無料で使える枠であれこれ文句言うのも申し訳ないので
そろそろ VPS に環境を移したほうがいいのかなと考えています。
とにかく夜になると開発ができなくなるのはまずい。

今は ID を登録するフォームを作成しています。
Game Users では何度も同じ ID を入力しなくていいようなシステムにしているのですが
そこのフォーム部分でバリデーションの基本的な型を生み出そうとしています。
テキストフィールドに文字を入力すると
文字数が表示されて、エラーの警告も表示されるようにしたい。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2019/02/04(月) 11:40:45.84

夜9時になると、サーバーが重いとこの前書いたのですが、
調べてみたところサーバーのせいではなく利用している
プロバイダーが原因である可能性が高くなってきました。

現在、webpack で固めたバンドルファイルのサイズが
4～6MB くらいなのですが、契約しているプロバイダーは夜になると
速度が 5Mbps 以下になってしまうのです。つまり速度の異常な低下で
バンドルファイルをダウンロードしきれないという状況になっているようです。

無料でお試しができる他のプロバイダーに申し込んで切り替えてみたところ
夜でも開発中のページが表示できるようになりました。
ただそのプロバイダーもあまり速度が速いところではないため
表示が遅いことは遅いのですが
現在契約している bb.excite よりはずっとましな状況です。

bb.excite は 500円ながらも、これまでは普通に使うことはできていたのですが
最近はそれすら無理な速度になってきています。
速度を求める用途がなかったので、500円プロバイダーでも十分だったのですが
さすがにバンドルファイルすら正常にダウンロードできない状態になってしまったのは
非常に辛いです。このままでは開発に影響が出るため、IPv6 IPoE の利用を検討しています。
いいプロバイダーが見つかればいいのですが。

開発は現在、ID 登録フォームをほぼ完成させたところです。
今後、自分でフォームのバリデーションをひとつひとつ書いていくのは時間がかかるため
バリデーションパッケージを選定＆利用していこうと思っています。

配信＆IDE URL
>>139

**あづみ** ◆WYiR3RzL3U · 2019/02/27(水) 14:24:26.63

夜に開発サーバーが重たくなる問題ですが、プロバイダーが悪いという結論に至りました。
bb.excite がここのところ速度の低下が激しく、
人が多くなる時間帯はまともにページを表示することができなくなっていたのです。
そこで IPv6 IPoE 接続のできるプロバイダーに変更したところ、夜も快適に開発ができる状態に戻りました。

当初 GCE のせいにしていたのは良くなかったですね。

約一年間無料で使わせてもらった GCE ですが、無料期間が終わると
当然有料で継続しなければならなくなるため
他の VPS に開発サーバーを移すことにしました。
理由は料金的な問題です。やはりクラウドは高級感のあるお値段になってしまうので
予算的に VPS しか選択肢がなくなりました。

いろいろ調べてみて、Amazon がやっている Lightsail も魅力的に感じましたが
IPv6 の IP が割り振られないらしい？ので、結局 IPv6 対応サイトにできる
さくら VPS になりました。

今回の件で、Game Users も IPv6 でアクセスできるサイトにしたいと強く感じたので
練習も兼ねて開発サーバーも IPv6 でのアクセスができるようにしておこうと思いました。

IPv6 対応のついでに DNS でサブドメインに割り振っておいたので、URL が変わりました。
ドメインでのアクセスになったのにポート番号を入力しなければならないのは
ちょっとかっこ悪いですが、ここもまた Nginx を導入してリバースプロキシ？
で設定をしないといけないようです。今後はそちらの勉強も頑張っていこうと思います。

**あづみ** ◆WYiR3RzL3U · 2019/02/27(水) 14:25:45.08

現在開発中のページ
http://dev-1.gameusers.org:8080/pl/user1

開発ブログ
https://gameusers.org/dev/blog/live/

**Name_Not_Found** · 2019/02/28(木) 13:28:29.49

なぜIPV6にこだわるのですか？
どんな利点があるのでしょうか。

**あづみ** ◆WYiR3RzL3U · 2019/02/28(木) 16:50:28.32

個人的な経験によってIPv6に対応したいと感じただけで
現状ではそこまで大きな利点はないんじゃないかと思います。

IPv6に対応したいと思ったのは、プロバイダー関連の話になるのですが
自分の場合、新しく申し込んだプロバイダーの設定が一時うまくいかなくて
IPv4 over IPv6 接続が機能していなかったのです。
（IPv4にしか対応していないサイトも、IPv6の経路を使うことによってアクセスが速くなる機能です）

そのためYouTube、Google、NetflixなどのIPv6対応サイトの場合は
IPv6接続ができて速度も非常に快適だったのですが
IPv4にしか対応していないサイトは旧式の接続で、速度も遅いままだったのです。

そういう環境の人はあまりいないと思うんですが
IPv6に対応しておくことで、誰でも快適にアクセスができるようになるのと
対応サイトは、上記有名サイトのように軽くて最先端なサイトのイメージがあるので
できれば早い段階から、うちもその仲間入りをしたい！と思ったのです。

現在、ウェブサイトのSSL化が急激に進んでいるように
いずれどのサイトもIPv6に対応するようになるんじゃないかと思うので
今のうちから勉強しつつやっておこうと思いました。

そんな感じですね。無理してやる必要はまったくないと思うんですが
ちょっとだけメリットを感じるユーザーもいるので
利用できる環境なら、サーバーの設定をいじるついでに
やっておくといいんじゃないでしょうか。

**あづみ** ◆WYiR3RzL3U · 2019/03/07(木) 12:44:43.14

今日はinputで選択した画像をプレビューする機能を作ります

プログラム配信中、詳しくは
>>184

**あづみ** ◆WYiR3RzL3U · 2019/03/08(金) 14:28:00.41

アイコンをキレイにします
Simple IconsというキレイなSVGアイコンが揃っているサイトをみつけたので
それを利用させてもらおうと思います。
https://simpleicons.org/

プログラム配信中、詳しくは
>>184

**あづみ** ◆WYiR3RzL3U · 2019/03/20(水) 12:48:28.91

やっとですが、バリデーションを含めたフォームのガワはできあがりました。
次は API に POST でデータを送って、サーバーに保存する部分に取り組もうと思います。
単純なテキストデータの保存はすでにできているのですが、
画像の処理はまだできていません。srcset に対応するために
複数のサイズにリサイズして、圧縮するという作業が必要になります。

Jimp（リサイズ用パッケージ）
https://github.com/oliver-moran/jimp

imagemin（圧縮用パッケージ）
https://github.com/imagemin/imagemin

良さげなパッケージを発見したので、これらを使わせてもらって実現しようと思います。

プログラム配信中
https://youtu.be/s_XYS2XyFgY

開発について詳しくは
>>184

**あづみ** ◆WYiR3RzL3U · 2019/03/22(金) 15:16:06.10

今日はアップロードしたSVG画像をサーバーに保存する部分を作ります。

プログラム配信中
https://youtu.be/9HVRWHiPq6A

**Name_Not_Found** · 2019/03/26(火) 19:50:41.11

誰でも頭が良くなる、プログラムが書けるようになる方法が発見される 55271
https://you-can-program.hatenablog.jp

**あづみ** ◆WYiR3RzL3U · 2019/03/27(水) 12:58:33.19

プレイヤーカード作成フォームの完成を目指します！

プログラム配信中
https://youtu.be/IYx-Q5B0zUY

**あづみ** ◆WYiR3RzL3U · 2019/05/22(水) 14:13:50.46

記事の更新が疎かになってしまいました。

アカウント作成、ログイン、ログイン後のページでIDやパスワードの変更など
基本的な機能はほぼ実装し終わりました。
途中、カスタムエラーの投げ方を学んだり、ログの保存方法を勉強したり
いろいろあって無駄に時間もかかりましたが
各ページのベースになる部分は徐々に固まってきています。

次は横幅の広いデバイスでアクセスした場合に
2カラムでコンテンツを表示できるようにしようと思っています。
サイドに掲示板のスレッド一覧を表示したり
サイドに表示するコンテンツがない場合は
サイト内の更新情報をカードで表示したりしたい。

ttps://gameusers.org/dev/blog/wp-content/uploads/2018/02/2column.jpg

そしてモバイルの場合は、ドロワーメニューで必要な情報を表示しようと考えています。

プログラム配信中
https://youtu.be/gewLTvihd0w

**あづみ** ◆WYiR3RzL3U · 2019/06/03(月) 10:57:11.55

Next.js で styled-components + Material UI を使う場合、
それ用に別途コードを書かなければならない必要が生まれます。
しかも Material UI がアップデートすると動かなくなったりするので、とても面倒な組み合わせです。

今回もまた Material UI を Ver.4 にアップデートしてみたところ正常に動かなくなったため
なにか他に方法はないのかと調べてみました。
すると emotion という CSS in JS の新しめのライブラリを発見することができました。
なんと Material UI では emotion を特別なことをせずにそのまま使えるようなのです。
実際、使用してみたところ styled-components との組み合わせよりも、全然相性がいい気がします。

Material UI にスタイルを当てる場合
Material UI がデフォルトで用意している書き方を使う方法もあるのですが
自分はその書き方が気に入らなかったのと
サイト全体のスタイルシートの書き方を統一する意味も込めて
これまでは styled-components を採用していました。

ですが今回使ってみて emotion の感触が良かったので、こちらに移行することにしました。
後発のライブラリなので機能的にもいいとこ取りをしていて、とても優秀です。
同じように Material UI を利用している方はチェックしてみて欲しいですね。いろいろ楽になると思います。

emotion: https://emotion.sh/docs/introduction

プログラム配信中
https://youtu.be/jZ0kcMrT0DA

**あづみ** ◆WYiR3RzL3U · 2019/06/17(月) 13:14:39.73

ユーザーが作成できるコミュニティページの制作を進めています。
前に掲示板のガワだけは作っていたのですが
開発を進めていくうちに仕様の変更で動かなくなっていたので
それを直しつつ、データベースの構成を考えています。

データベースの知識に自信がない上、MongoDBの扱いにも不慣れなため
どのように構成するといいのか、なかなか見えてきません。

1件1件データを取得するコードをループさせれば望みのものは取得できますが
それだと当然重くなるわけじゃないですか。
だからできるだけ少ない回数でデータを取得するコードを書かなければならないのですが
それが難しい。
多言語に対応することも考えたりするとわけがわからなくなって、頭がごちゃごちゃになります。

プログラム配信中
https://youtu.be/Mp-ZrD-Ml04

**あづみ** ◆WYiR3RzL3U · 2019/07/10(水) 11:07:20.63

今日は掲示板のスレッド作成フォームを完成させたい

プログラム配信中
https://youtu.be/KEboEKUucXs

**あづみ** ◆WYiR3RzL3U · 2019/07/26(金) 10:42:03.13

掲示板の画像＆動画表示部分を作ります
キレイに表示させたい！

プログラム配信中
https://youtu.be/HR0NB_ZDypM

**あづみ** ◆WYiR3RzL3U · 2019/08/28(水) 10:43:54.98

二ヶ月以上、掲示板を作っています。

サイト全体の画像や動画の扱い方（投稿・表示）を
統一できるようにしようとしているので、
多少はしょうがないにしても、いろいろ時間がかかりすぎてやばいです。

普通の人はもっとサクッと完成させるもんなんでしょうか？
やっぱり自分自身プログラマーとしての能力がアレなんかなと思わざるを得ません。

ただそれでもめげずに頑張りたい！

プログラム配信中
https://youtu.be/P_PS3w6cUjU

**あづみ** ◆WYiR3RzL3U · 2019/08/28(水) 11:08:18.10

配信のURLが変わりました
https://youtu.be/y7yBWMuIqTU

**Name_Not_Found** · 2019/08/29(木) 08:01:27.37

雑食系エンジニア、KENTA の動画

Rubyはオワコン？「滅びゆく5つのプログラミング言語」に関する所感
https://www.youtube.com/watch?v=yBrnuR8YJN4

初心者向きのweb アプリの結論は、Ruby on Rails !

Rails でも、HTML, CSS/SASS, JavaScript, jQuery, Node.js も学ぶと、1年は掛かる

**あづみ** ◆WYiR3RzL3U · 2019/09/18(水) 09:10:30.99

フォーラム（掲示板）のページの切り替え部分を作っています。
Next.jsがAPIをデフォルトで扱えるようになったので
その方法に書き換えています。
pages/api
以下にファイルを設置すると、そのアドレスのAPIが使えるようになります。
最初っからあれば書き直さなくて済んだのに。苦しみ…。

https://youtu.be/Ni3pJT90FL8

**あづみ** ◆WYiR3RzL3U · 2019/10/10(木) 13:56:59.36

ようやくフォーラム（掲示板）の完成が近づいてきました。
コメントやスレッドの削除機能をつければ
大まかな機能の実装は終わりです。がんばります！

https://youtu.be/d5u3gZd51bY

**あづみ** ◆WYiR3RzL3U · 2019/11/01(金) 11:50:04.30

今日は配信用の課金システムを作ろうと思います。
Game Usersに実装したい機能なのですが
いつ完成するかわからないので
とりあえず違う場所に作ってみます。

https://youtu.be/0PMdbnKpd_g

**あづみ** ◆WYiR3RzL3U · 2019/11/07(木) 12:54:37.30

今日も課金システムをいじります。
iPhoneでフォームに入力できないと言ってたのでそこを調べます。

https://youtu.be/aIk6c5Z6kMg

**AZ三日月** ◆WYiR3RzL3U · 2020/01/27(月) 13:43:15.31

プログラム配信やります。
ユーザーコミュニティをクローズド設定にした場合
参加者以外には見れなくしたい。
#React #Nodejs #JavaScript

配信URL
https://youtu.be/zF3pRI_SuHQ

**AZ三日月** ◆WYiR3RzL3U · 2020/02/03(月) 13:55:35.70

プログラム配信やります。
ユーザーコミュニティに参加承認した人をメンバーにする処理。
ブロック機能も作りたい。
#React #Nodejs #JavaScript

配信URL
https://youtu.be/eJaZ-C4a-NM

**AZ三日月** ◆WYiR3RzL3U · 2020/06/08(月) 14:39:41.39

React Hook について少し勉強してみました。

これまで状態管理に MobX を利用してきたのですが、
Hook を勉強した結果、これまでのやり方を見直すべきなのではないかと思いました。

Hook を利用してローカルステートで書くのは
とてもわかりやすく、処理が散らばらない点も素晴らしいと感じました。
現状、MobX 上ですべてのステート、すべての処理をまとめているのですが、このやり方はやめるべきじゃないかと。

状態管理の例としてよくあるカウンターの数値を増減させるサンプルのようなものでも
自分はこれまで外部のストアにすべて書き出していました。
でも Hook を学び、コンポーネント内にステートも処理も入れ込んでしまう書き方を試してみたところ
こちらの方が全然扱いやすいように思えるのです。

CSS では emotion というライブラリを利用しているのですが
こちらも HTML のタグにそのままスタイルを書き込んでいきます。
最初は違和感も大きかったのですが、しばらく使ってみると、とても扱いやすいことに気づきました。

配信URL
https://youtu.be/Fcdv9UXVAFU

**AZ三日月** ◆WYiR3RzL3U · 2020/10/19(月) 13:59:10.72

久しぶりのプログラム配信。かなり完成に近づいています。
GitHubにDockerの解説を載せておいたので
誰でもコードや動作をチェックすることができるようになりました。
今日はユーザーコミュニティ作成ページを作るぞ！

https://youtu.be/-HT1VvxOr3A

**AZ三日月** ◆WYiR3RzL3U · 2020/11/03(火) 12:27:33.47

完成形が近くなってきました。
プッシュ通知のテストをしたいので
テストに参加してくれる方募集！

https://youtu.be/u3agDYHxtFE

**AZ三日月** ◆WYiR3RzL3U · 2021/01/19(火) 15:45:25.70

ずっと作っていたGame UsersのNode.js版がついに完成しました！
とんでもない新機能が盛りだくさんというわけではないのですが
とりあえず第一段階はやり遂げました。今から解説します！

https://youtu.be/PEDFabpQYVU

**AZ三日月** ◆WYiR3RzL3U · 2021/01/27(水) 15:43:03.38

今日はみなさんに仮登録していただいたゲームを
本登録にすべく、IT土方的な作業を行おうと思います。
余裕があればゲーム情報を取得するスクレイピングの構想も行いたい。

https://youtu.be/yn9QQsRpu6c

**AZ三日月** ◆WYiR3RzL3U · 2021/03/08(月) 15:29:29.12

GitHubにGame Usersの正式なリポジトリを新たに作って
そちらで作業をしていくつもりです。
それに向けて改めてGitとGitHubについて勉強しようと思います。
プルリクエストってどうやって処理するんだ？というレベルです。

https://youtu.be/75EofG7SmRg

**AZ三日月** ◆WYiR3RzL3U · 2021/03/11(木) 16:45:38.84

今、Gitの勉強をしています。
Commit時にPrefixを入れた方がいいということを知り
また絵文字も使えるらしいので
コミット用のテンプレートを作っています。
Visual Studio CodeにGitLensとGit Graphという拡張機能も入れました。
僕の得た知識をみなさんにもお知らせしたい！

https://youtu.be/gIwDhX67Ntc

**AZ三日月** ◆WYiR3RzL3U · 2021/03/15(月) 12:31:43.56

ついにGame Usersの正式リポジトリを開設しました。
これから開発者の方にアピールするために
Wikiを充実させていこうと思います。
採用技術について入っているパッケージについてなど
いろいろ書かなければならないことがあります。
Wikiで丁寧に情報を提供することで
みなさんに面白そうなプロジェクトだと思ってもらいたい！

https://youtu.be/36kF7UZxni4

**AZ三日月** ◆WYiR3RzL3U · 2021/03/29(月) 13:55:56.36

GitHubのWikiに必要な情報を書き出しました。
今日はDiscussionsにアイディアをまとめようと思います。
いい感じになってきてると思うので
みなさんもチェックしてみてください。

https://youtu.be/l327mZrldWU

**AZ三日月** ◆WYiR3RzL3U · 2021/04/02(金) 12:51:03.63

なんと悲惨なことに、このサイトはこれまでずっと
ゲームやコミュニティを簡単に検索することができませんでした。
ついに検索フォームが実装されるのです。
今までなにをしていたんだ…。

https://youtu.be/vmSApI9xtC4

**AZ三日月** ◆WYiR3RzL3U · 2021/04/09(金) 14:35:34.22

ようやく検索フォームを実装できました。
今日は登録するゲームの情報を取得するために
スクレイピングについていろいろ調べようと思います。
Node.jsっていいライブラリあるんだろうか？

https://youtu.be/ZKvWPLfHj5A

**AZ三日月** ◆WYiR3RzL3U · 2021/04/12(月) 16:03:04.41

Webスクレイピングを行おうとしているのですが
SPAだとページを正常に取得するのが難しいみたいで
Headless ChromeというGUIなしで
ブラウザを利用できる機能を使うのがいいらしいです。
今日はそれを用いてゲーム情報を取得していきます。

https://youtu.be/I6QYSzQYKgQ

**AZ三日月** ◆WYiR3RzL3U · 2021/04/19(月) 14:59:35.80

Headless ChromeでWebスクレイピングを行っています。
各ゲームストアからデータを取得していきます。
保存先のデータベースも用意しないといけいないので
思っていたよりも手間のかかる作業でした。今日も頑張ります！

https://youtu.be/529GIKa9Lwk

**AZ三日月** ◆WYiR3RzL3U · 2021/04/28(水) 13:50:58.18

Headless ChromeでWebスクレイピングを行っています。
レイジーロードの画像の取り方を調べます。
スクロールを下まで行かせると読み込むらしいのですが
それだけで大丈夫なんでしょうか？

https://youtu.be/spqzdqx5V5Q

**Name_Not_Found** · 2021/04/30(金) 12:31:35.05

Headless Chrome は非表示なのに、
スクロールしたり、スクロール位置を取得できるの？

やんばるCODE の守護神・たけ、2019/12

【Rails】（送信時のリロード無し！）Action CableでSlack風チャットアプリを作成
www.youtube.com/watch?v=o6PuxDr8Meg

表示されるブラウザでは、こういうように、特定のスクロール位置になったら、
データをサーバーから読み込んで、要素をHTML に追加できる

**AZ三日月** ◆WYiR3RzL3U · 2021/05/21(金) 13:38:48.22

Headless ChromeでWebスクレイピングを行い
データを取得するところは完成しました。
今は取得したデータを変換してゲーム登録に活かす部分を作っています。
今日は画像を圧縮して保存します。

https://youtu.be/KEu-goo0L7c

**AZ三日月** ◆WYiR3RzL3U · 2021/05/29(土) 14:47:18.10

スクレイピングで取得したデータを処理して
本番環境にJSONで取り込もうと思っています。
みんな開発環境で作成したデータを
どうやって本番環境のデータベースに移行してるんだろう？
PHPを使ってたときはphpMyAdminでやってたんですが
本番環境にそういうツールを入れるのは危ないのでやめた方がいいですよね。
となると自作するしかないのか…。

https://youtu.be/uLU8MxO1t7A

**AZ三日月** ◆WYiR3RzL3U · 2021/06/10(木) 12:49:35.27

スクレイピングデータを取得しながら違う作業を進めていきます。
今日は管理者ページでユーザーのアカウント作成日を変更できるようにします。
旧サイトに数年ログインしていない場合
まったく使用されていないアカウントとして
削除する処置をしていたのですが
一部の方は新サイトでも新アカウントを作成して使ってくれているので
作成日だけでも昔の日付に戻せるようにしたいのです。
というわけで今日はこれをやります！

https://youtu.be/hL1xx0x3R94

**AZ三日月** ◆WYiR3RzL3U · 2021/06/14(月) 16:30:44.71

ブログ機能を追加しようと思います。
それにあたり、いろいろ考えなければならないことがあるので
配信でフォームの構成や、投稿ルールなどを考えようと思います。

https://youtu.be/eWV7aW9WOuc

**AZ三日月** ◆WYiR3RzL3U · 2021/06/25(金) 14:37:36.78

現在、横道に逸れてSNSと連携した占いサイトを制作しています。
導入部分のフォームとTwitterとの連携部分は完成しました。
今日やるところはタロットカードで占い結果を表示する部分です。

https://youtu.be/25Zel3o-IXQ

**AZ三日月** ◆WYiR3RzL3U · 2021/06/28(月) 14:22:30.57

占いサイト作成中です。
占いたいことをフォームで送信して結果の表示に利用します。
そして結果をデータベースに保存します。
今日はこの部分を完成させたい！

https://youtu.be/2Lr-LDCSEvE

**AZ三日月** ◆WYiR3RzL3U · 2021/07/02(金) 15:05:15.22

占い結果を画像＆感想を投稿できるようにする予定ですが
Twitterにも投稿できるようにします。
その際の投稿画像のデザインを自分で作れるようにします。
今日はそこの部分を作るぞ！

https://youtu.be/RONBgVo4EUI

**Name_Not_Found** · 2021/07/04(日) 12:05:53.57

ココ↓は？

https://twitter.com/rokkotsukasa/status/1410902330979979265
https://twitter.com/5chan_nel (5ch newer account)

**AZ三日月** ◆WYiR3RzL3U · 2021/07/09(金) 15:16:04.35

占い結果を投稿し、閲覧できるようにします。
今日はその結果ページを作ります。
占いのカテゴリーごとに表示できるようにもしたい。

https://youtu.be/hXUx1KHHswI

**AZ三日月** ◆WYiR3RzL3U · 2021/08/02(月) 14:59:13.64

占いサイトが完成に近づいてきました。
今日は依頼するデザインの方向性を考えます。
今のところ神秘的なデザインがいいかなと思ってるんですが
いろんなサイトを見て研究したいです。
時間があればデザイナーさんも探したいですね。

https://youtu.be/lU125l30quI

**AZ三日月** ◆WYiR3RzL3U · 2021/08/14(土) 15:13:49.46

占いサイトのテスト版が完成しました。
機能的には主なものはすべて動きます。
テストに参加してくれる方募集！
デザイナーさんも探したいです。

https://youtu.be/0UxQSnbbJtg

**AZ三日月** ◆WYiR3RzL3U · 2021/08/16(月) 13:32:58.13

今日は真剣にデザイナーさんを探そうと思います。
仕事請負サイトをチェックするつもりですが
それ以外にも人の探し方ってあるんでしょうか。
アドバイス求む！

https://youtu.be/Y_lGG2VF-wc

**Name_Not_Found** · 2021/08/18(水) 13:29:16.68

レスポンシブ対応なら、Bootstrap を使えば？

最近は、Tailwind と言うものもあるらしい

**AZ三日月** ◆WYiR3RzL3U · 2021/08/20(金) 15:23:00.10

Bootstrapは卒業しました。
本業の方の手を借りたいです。

みなさん仕事請負サイトを経由した形で請け負うことを望まれるのでしょうか。
他の窓口がある場合は直接やり取りを行いたいのですが
それを望まない方も多くいるのでしょうか？
サイト内の実績を積み重ねられますが
手数料の負担をクライアントにお願いしてまで行いたいことなのかと考えると
なんだかこちらとしてはモヤモヤが残ります…。

https://youtu.be/Jh5kHBHVa7w

**AZ三日月** ◆WYiR3RzL3U · 2021/08/25(水) 14:27:14.00

イラストレーターやデザイナーの方にこれまで直接連絡をとってみて
得た実体験なのですが、そもそも連絡が返ってきません。
素性のわからない個人からの依頼は非常にぞんざいに扱われるみたいです。
看板がない者はわかりやすく予算を提示しないとダメなのかもしません。
あとコンペについて言及するのは悪手ですね。
これについてはデザイナー側も思うところがあるのだと思います。
実績や繋がりを得るために安売りを行ってしまっている現状
そこを意識させてしまうのは良くないということに気づきました。
自分はコンペを開催して労働力をただで提供してもらうのは申し訳がないということで
デザイン案に前金を支払う形でやりたかったのですが
参加料が支払われるコンペというイメージになってしまうと
悪印象に繋がってしまうのかもしれません。

https://youtu.be/QeSONOrnEQw

**Name_Not_Found** · 2021/08/28(土) 10:07:09.27

デザインとか外側ばっかいじってないで中身どうにかしたら？

**AZ三日月** ◆WYiR3RzL3U · 2021/08/28(土) 15:26:44.03

中身の機能はほぼ完成しています。
後はデザインだけなんです。

僕の配信を視聴してくれている
デザイナーの方にいいものを作っていただきました。
完成に向けて修正する部分を考えていこうと思います。

https://youtu.be/JCMbkuILk78

**AZ三日月** ◆WYiR3RzL3U · 2021/09/13(月) 13:04:05.34

aiファイルから画像を書き出して
コーディングを行っていこうと思います。
SVGを活用したいのですが、背景みたいな画像もSVGにできるんだろうか。

https://youtu.be/1DGNVd0wDJ0

**Name_Not_Found** · 2021/09/14(火) 18:03:48.66

来て。

**AZ三日月** ◆WYiR3RzL3U · 2021/09/17(金) 10:36:15.15

トップページの画像は用意しました。
あとはHTMLのタグに変えていくだけです。
昔テーブルで実現していたような
囲われた箱にデザインを当てはめるのは難しい作業ですね。
毎回、悩みます。

https://youtu.be/O77YI9XdNTE

**AZ三日月** ◆WYiR3RzL3U · 2021/10/01(金) 14:20:09.66

トップページのコーディングが終わりました。
今は結果ページに取り掛かっています。
大まかな部分はできているので
細かな調整とタブレット・スマホ対応の作業も行いたいです。

https://youtu.be/GJIS8_uure0

**AZ三日月** ◆WYiR3RzL3U · 2021/10/14(木) 15:21:49.96

追加したい機能がどんどん出てきて完成が延びています。
今日こそは占い結果ページのスマホ対応を完成させたい。
ブラウザからインストールした際のアプリアイコン
ファビコンのデザインも選びます。

https://youtu.be/bBY1BvBrc9Q

**AZ三日月** ◆WYiR3RzL3U · 2021/10/22(金) 14:24:41.27

ついにデザインが完成しました！
後は広告関係の作業を行ったら終わりです。
今日はラッキーアイテムに表示する商品を探そうと思います。
おすすめの品があったら教えて下さい。

https://youtu.be/E0bIuGvIz2s

**AZ三日月** ◆WYiR3RzL3U · 2021/10/28(木) 14:03:01.93

ついに占いサイトが完成します！
最終チェックを行うのでみなさんご協力お願いします。
問題がなければデータベースを初期化して正式公開します。

https://youtu.be/HH0fKOfZXeo

**AZ三日月** ◆WYiR3RzL3U · 2021/10/29(金) 13:41:55.65

完成した占いサイトがどうやったら流行るのか
宣伝方法を考えていこうと思います。
良い案がありましたらぜひご提案ください。

https://youtu.be/4BTw-3JYPzU

**AZ三日月** ◆WYiR3RzL3U · 2021/11/11(木) 14:04:48.43

無料で宣伝を行うのは限界がある気がしてきました。
ただし予算が潤沢ではないので
できるだけコスパのいい方法で宣伝したいです。
どうすればいいのか考えていこうと思います。

https://youtu.be/xU-O_BcdPdc

**AZ三日月** ◆WYiR3RzL3U · 2021/11/24(水) 13:12:26.20

イラストをベースにして結果を表示できる
新しい占いを作成しようと思います。
イラストレーターの方に依頼をしなければならないのですが
まずはいらすとやの画像を使わせてもらってテスト版を作ります。

https://youtu.be/FMROUVlSBFo

**Name_Not_Found** · 2021/12/17(金) 17:22:17.64

雑談ジジイ来て。

**AZ三日月** ◆WYiR3RzL3U · 2022/03/09(水) 14:51:16.08

イラストをベースにして結果を表示できる
新しい占いのレーティング機能を作成します。
今日はセリフとメッセージを追加できるようにします。

https://youtu.be/prkSD6hvFlk

**AZ三日月** ◆WYiR3RzL3U · 2022/03/14(月) 13:29:28.40

イラスト投稿型占いは
Twitterに結果を投稿できるのですが
返り先のURLのページの機能やデザイン構成を考えます。

https://youtu.be/yCcwhlYgAuM

**AZ三日月** ◆WYiR3RzL3U · 2022/03/23(水) 12:30:02.37

イラスト投稿型占いの課金サービスについて。
投げ銭は法律的に問題があるようなので
どういう形で実現させるか考えます。

https://youtu.be/9O-ormn30Hk

**AZ三日月** ◆WYiR3RzL3U · 2022/05/16(月) 13:27:32.08

イラスト投稿型占いを作成中です。
時間がかかりすぎですが
ようやくガワが完成しそうです。
データベースの操作はまだなので
完成までは日がかかりそうです。

https://youtu.be/cN5Mq4GcMGg