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

1あづみ ◆WYiR3RzL3U 2017/03/23(木) 21:09:13.31ID:???
ゲームユーザーズはゲームユーザーのためのコミュニティサイトです。
現在、開発者を募集しています。
初心者でも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/

質問・疑問なんでも書き込んでください。
ブログの記事をここにも投稿するので読んでみてね。

130あづみ ◆WYiR3RzL3U 2018/04/10(火) 12:34:36.77ID:???
現在の開発環境 ? AWS Cloud9 の問題点

Teletype for Atom、Docker、共同開発ができる場所を模索して、
いろいろなものを試しましたが、結局、AWS Cloud9 がいいのではないのか?
というところに落ち着きました。

AWS Cloud9
https://gameusers.org/dev/blog/wp-content/uploads/2018/04/cloud9-ide.png


Cloud9 とはブラウザで使える IDE で
ネットを介して複数人でのコラボレーション開発が行えます。
Teletype for Atom も同じような機能が使えるのですが
実際、他のプログラマーに意見を聞いてみると
Atom を利用しての共同開発にはあまりいい印象を持っていないようでした。

当然、プログラマーはそれぞれ自分の好きな環境をすでに構築しているわけで
わざわざそこに新規の環境を構築して(Atom をインストールして)まで
参加するのは面倒だと感じるようでした。

Game Users の開発はゲームが好きなプログラマー・デザイナーの方々に
気軽に参加してもらいたいという考えがあるので
環境構築で大きな手間がかかるのはやはりいいことではありません。
そうなるとブラウザだけで参加ができる
Cloud9 を採用するメリットは大きいのではないかと感じています。

131あづみ ◆WYiR3RzL3U 2018/04/10(火) 12:36:03.07ID:???
AWS Cloud9 の問題点

使ってみて感じたのですが、いろいろな問題もあります。


・参加人数が 8 人まで

なんでこんな仕様なんだと言いたいところなんですが
自分を入れて計 8 人までしか参加できません。
サーバーの能力依存で参加人数を決めさせてくれればいいのに
最初から IDE 側で人数を制限してるので
どれだけサーバーのリソースに余裕があっても無駄です。

AWS Cloud9 は AWS の管理画面でアカウントを発行して
そのアカウントで IDE に参加してもらう形になっています。
Game Users の開発では、いろいろな人に個人用のアカウントを発行して
時間のあるときに気軽に参加してもらえたらなという思いを持っていたのですが
8 人制限のせいでそれができなくなりました。

今は guest-1〜2、master-1〜5 というアカウントを用意して
そのアカウントにログインして参加してもらう形になっています。
個人用のアカウントの場合、自分を除くと 7 人までしかアカウントを発行できませんが
ひとつのアカウントを複数人で使ってもらう場合は
人数制限が緩和されるのでそういう形にしています。
ただこれだと誰が参加してくれているのかわかりにくく、とても不便です。

そもそも Cloud9 は不特定多数の人が開発に参加するプロジェクトを想定していないのでしょうが
GitHub を経由した push だ pull だと面倒くさい
現在の共同開発環境を変えられるポテンシャルを秘めているので
早急になんとかして欲しいところです。

132あづみ ◆WYiR3RzL3U 2018/04/10(火) 12:37:35.66ID:???
・IDE の出来が今ひとつ

Atom や Visual Studio Code(触ったことがないのでわからない)は
なんだかんだと言って優秀なんだと思います。
様々な機能が最初から提供されていたり
プラグインなどで後から追加することができたり
個人的に使いやすい設定を細かく突き詰めることができたり
当然のようにいろいろできていたことが、Cloud9 ではできなくなりました。

ブラウザだけで開発ができる・コラボレーションが手軽に行える
というメリットは大きいものの、使いづらい・必要な機能がない
といったデメリットも大きいので
現状、上記のメリットを求めている人以外には勧めづらい環境になっています。

アマゾンが買収したので今後の発展に期待したいところですが
今のところは正直なんとも言えないクオリティです。

133あづみ ◆WYiR3RzL3U 2018/04/10(火) 12:38:22.08ID:4V0vKYfM
・ネットに情報がない

本当に辛いところなんですが、ネットに情報がありません。
なんでもそこそこの規模になってくると
日本語の情報はなくても英語の情報があったりするものですが
Cloud9 はその域にも達していません。

例えば今、ESLint で “extends”: “airbnb” が動かない問題を抱えているのですが
調べても情報がなくて困っています。
このプラグインを入れるといいよと英語で書いている情報はひとつ発見したのですが
そのとおりにやっても動かず。
それ以外情報がないので、どうにもならない状態に陥っています。

アマゾンのサポートも利用できるようなのですが
技術的なサポートは有料になっているみたいなので
お金持ちや企業でないとサポートを受けられません。


参加者募集!

Cloud9 の至らなさをいろいろと語ってみましたが
Game Users の開発には手軽なコラボレーション機能が必要なので
利用しないという選択肢はありません。

ゲームが好きな開発者の方おられましたら、ぜひ一緒に開発しましょう。
参加したとして権利や金銭的な問題はどうなるんだということについて
文章にきっちり残していないので
その辺についてもこのブログで記事にしていかないといけないなと思っております。

YouTube でプログラム配信をしながら開発しているので
もし少しでも興味があったら覗いてみてください。
配信中はこのブログのトップページにも配信が見れる記事が掲載されるようになっていますのでぜひ!

134あづみ ◆WYiR3RzL3U 2018/04/10(火) 18:11:00.74ID:4V0vKYfM
Node.js の使い方を学びました。
いよいよ Game Users を書き直す作業を始めようと思います。
それに当たって調べないといけないことがたくさんあります。

React は状態管理に Redux を使用していたのですが
コードを書く量が多く、学習コストも高いため
同じ状態管理機能を持った MobXというライブラリに興味を持っています。
こちらもいろいろ調べてみようと思います。

配信URL
>>127

135あづみ ◆WYiR3RzL3U 2018/04/12(木) 16:36:27.79ID:tx9A8ypJ
プログラム配信 - Next.jsを試します!

昨日、MobX(Reactの状態管理ライブラリ)について調べていたら
Next.jsというフレームワークを発見しました。
これを使うとサーバーサイドレンダリングや、Code Splitting(分割して初期ロードを早くする)
ブラウザの自動更新などの機能が使えるようになるみたいです。
非常に面白そうに感じたので、今日はそれを試してみようと思います。
MobXやMaterial UIなどもついでに触れたらいいなと思っています。

配信&IDE URL
>>128

136あづみ ◆WYiR3RzL3U 2018/04/17(火) 14:23:24.83ID:???
Next.js を試してみたところ、すごく優秀だったので採用することを決めました。
サーバーサイドレンダリングの機能や、
コード Splitting をデフォルトで行ってくれるのは非常に便利です。
ただすべての機能を提供してくれるわけではないので
結局、自分で Express 用コードを書かないといけない部分も多くあるのですが。



それと Next.js はデータベースへのアクセスを API で行うことを推奨しているようです。
そこそこの規模のサイトになると、そういった構成が増えてくるのかもしれないのですが
自分は小規模なサイトしか作ったことがないので、初めての経験でちょっと不安です。

137あづみ ◆WYiR3RzL3U 2018/04/17(火) 14:26:38.36ID:j+RTiem7

138あづみ ◆WYiR3RzL3U 2018/04/17(火) 14:27:07.56ID:???
上のは制作物のURLです。
変更になりました。

配信&IDE URL
>>128

139あづみ ◆WYiR3RzL3U 2018/04/18(水) 17:15:20.33ID:IWskPwsf
複数人の開発者で同時に各ファイルを編集した場合
誰かがエラーを出すと他の開発者にもエラーが出て
開発がスムーズに進まないという問題が発覚しました。



同じ環境でトランスパイルが行われるわけですから
考えてみれば当然なのですが、今まで気づきませんでした。
同時に違うファイルを触れないというのは結構致命的な問題です。


そこで Cloud9 の環境を複数用意して
それぞれの開発者が別のファイルを気軽に触れるようにしてみました。

マスターアカウントでログインできる方は、そちらの環境でも開発が行えます。
git clone で複製しているだけなので、細かいことは気にせずいろいろ試してみてください。

詳しくはこちら
https://gameusers.org/dev/blog/live/

140Name_Not_Found2018/04/19(木) 05:53:30.69ID:???
git は、2段階保存が特徴だから、

エラーが出る状態のコードは、
リポジトリには保存せず、自分側だけで保存する

自分だけのブランチを作ってもよい

141あづみ ◆WYiR3RzL3U 2018/04/20(金) 00:39:40.60ID:???
これはですね、あれなんですよ
gitの問題じゃなくてCloud9の問題なんです

Cloud9はブラウザでアクセスできるIDEなんですが
そこに複数人でアクセスして、それぞれが違うファイルを編集していると
誰かがエラーを出した段階で、他の人も全員エラーに巻き込まれるんです
どこかにエラー出ているファイルが存在していると
それ込みで全体をトランスパイルするので全部が動かなくなるって寸法です

結局、独立してトランスパイルする環境を複数作らないといけなくなりました
快適な開発環境を作るのはなかなか難しいですね

142あづみ ◆WYiR3RzL3U 2018/04/20(金) 12:15:17.13ID:8Q0s53C6
Next.js で Material UI を使おうとしたのですが
Material UI のコンポーネントにスタイルシートを適用する方法がわからず1日を費やしてしまいました。


Material UI の公式ページに書かれている方法と
Next.js が推奨しているスタイルシートの書き方が違うため
どう書けば正常に表示されるのか理解するのに時間がかかりました。



結局、以下の書き方でいけました。
Material UI のコンポーネントはグローバルスコープのスタイルシートが必要なようです。


<style jsx global>{`

.list-1 {
background-color: #81F7F3;

}

.list-2 {

background-color: pink;

}

`}</style>

今日はGame UsersのヘッダーをMaterial UIでデザインします
配信URL
>>139

143あづみ ◆WYiR3RzL3U 2018/04/23(月) 15:16:29.33ID:RA4iHufE
Next.js で Material UI を使う方法ですが、前回やっていた方法では、
サーバーサイドレンダリング時にスタイルシートが正常に適用されていない。
なぜか遅れて適用される?ため、設定を見直しました。


https://github.com/adrianmcli/styled-mui-next
https://github.com/mui-org/material-ui/tree/v1-beta/examples/nextjs


上記サンプルを参考にしながら、設定してみました。

Next.js はデフォルトで
styled-jsx?というスタイルシートの記述法を採用しているのですが
それを使った場合はサーバーサイドレンダリングする際に
Material UI のコンポーネントに正常にスタイルシートが適用されず
styled-components?を使うと正常に適用されるという状況になりました。



設定方法が悪いだけかもしれないのですが
今のところ対処法がわからないので
Material UI のコンポーネントを使うときだけそうしています。


Next.js で Material UI を使う際の書き方がわかる方おられましたら、ぜび教えてください。

今日もGame UsersのヘッダーをMaterial UIでデザインします
配信URL
>>139

144Name_Not_Found2018/05/01(火) 18:21:13.70ID:l1wYHpV1
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

F5DBU

145Name_Not_Found2018/05/02(水) 14:22:10.73ID:???
F5DBU

146あづみ ◆WYiR3RzL3U 2018/05/10(木) 14:11:40.72ID:5dU+YvI2
スタイルシートですが、Next.js がデフォルトに定めている styled-jsx よりも
styled-components を使った方がいいような気がしてきました。

複雑な分岐を行う場合などに
クラスの内部にそれ用の function を作ってコンポーネントを返すような構成にすると
styled-jsx がちゃんと反映されません。
Material UI を使うときだけ、styled-components を使うというルールもいまいちしっくりこないので
styled-components に統一した方がいいのかなと思ってきました。

まさかスタイルシートでこんなに悩むとは思いませんでした。

また Next.js のバージョンを 6.0 に変更しました。
babel-plugin-transform-class-properties というプラグインを入れろという警告が出たので
それを入れて設定もしておきました。コードの書き方や、動作には特に変更がないようです。

147あづみ ◆WYiR3RzL3U 2018/05/10(木) 14:12:08.87ID:???
配信URL
>>139

148あづみ ◆WYiR3RzL3U 2018/05/16(水) 14:59:28.88ID:rMvbZbpc
プログラム配信 - フッターを作ります!

サイト制作とは直接関係ないのですが
数日前にAmazonアソシエイトアカウントが意味不明な理由で閉鎖されました…。

お調べしたところ、Amazonアソシエイト・プログラム運営規約を順守されていないことを確認しましたのでご連絡いたします。

貴殿は、書面による明示的な事前の承認を得ずに
ブラウザー・プラグインにおいて、Amazonサイトのコンテンツ、特別リンク
またはその他Amazonサイトに関連する内容を記載しており
Amazonアソシエイト・プログラム参加要件第7項に抵触いたします。

ブラウザプラグインなんて一度も作ったことがないのに
それを理由にして、警告もなくいきなり閉鎖なんてあんまりだ。
返信でどのブラウザプラグインに問題があるのでしょうか?
と問い合わせても具体性のないテンプレ返答が返ってくるだけ。
わずかな収入がさらに削られるという悲劇、本当に悲惨だ。

今日は頑張ってフッターを作ります。
他のサイトのフッターを参考にしながらデザインを考えようと思います。

配信&IDE URL
>>139

149あづみ ◆WYiR3RzL3U 2018/05/17(木) 14:29:27.76ID:oyAlNBcy
プログラム配信 - ヘッダーの調整とトップページをデザインします!

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


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

配信&IDE URL
>>139

150あづみ ◆WYiR3RzL3U 2018/05/23(水) 15:08:19.53ID:bt1uDDLi
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

151あづみ ◆WYiR3RzL3U 2018/06/04(月) 15:05:33.81ID:Jzx1zEFf
デザインを考えているのですが、機能性といいデザインを両立するのが大変で
かなりしんどいです。基本的に既存のものの切り貼りや
ちょっとしたアレンジで乗り切っていますが、ゼロから想像するセンスがないため
いろいろな面で妥協しないといけなくなるのが辛いです。

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

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

配信&IDE URL
>>139

152あづみ ◆WYiR3RzL3U 2018/06/08(金) 15:54:32.46ID:gbAjjPG9
今このページのデザインを考えています
ゲームを検索できるページです
http://35.203.143.160:8080/gc

配信&IDE URL
>>139

153あづみ ◆WYiR3RzL3U 2018/06/19(火) 16:40:33.66ID:d6n2ghqY
トップページ、ゲームコミュニティ一覧、ユーザーコミュニティ一覧
ログインページのデザインが終わり
いよいよメイン機能であるコミュニティページのデザインを行うところまで来ました。

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

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

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

配信&IDE URL
>>139

154Name_Not_Found2018/06/19(火) 18:15:24.33ID:XYAyToUj
これ作ってみ??
https://goo.gl/ux7Y7F

155あづみ ◆WYiR3RzL3U 2018/06/29(金) 15:47:36.35ID:tmizMzQe
現在、ユーザーコミュニティのデザインを行っています。
掲示板のスレッド一覧、検索、コメント部分などを考えています。



http://35.203.143.160:8080/uc/community

156あづみ ◆WYiR3RzL3U 2018/07/11(水) 14:26:36.28ID:/89dpU86
掲示板の画像アップロード・動画投稿機能を作成中です。
アップロードする画像を選択、または投稿する動画のURLを入力した際に
画像がプレビューされるようにします。
複数画像のアップロード、複数動画の投稿に対応しようと考えています。



http://35.203.143.160:8080/uc/community

配信&IDE URL
>>139

157Name_Not_Found2018/07/11(水) 17:12:17.77ID:???
setStateってすぐに反映されないの??

158あづみ ◆WYiR3RzL3U 2018/07/12(木) 01:47:14.64ID:???
自分はReactを触りだしていきなり、Reduxという状態管理パッケージで管理したので
setStateは使っていなくてよくわかりません

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

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

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

159あづみ ◆WYiR3RzL3U 2018/07/17(火) 13:07:07.03ID:XdzIy2Pg
掲示板にアップロードされた画像や動画を表示する部分を作成します。
画像&動画がひとつだけ投稿された場合の表示はすでに完成しています。
次は複数の画像、動画が投稿された場合の表示部分を
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

160あづみ ◆WYiR3RzL3U 2018/07/19(木) 13:05:33.85ID:uKgCcwfm
Swiper で Lightbox(複数の画像を表示するギャラリー) 的な機能を
実装しようと思ったのですが
Swiper は本格的な Lightbox パッケージじゃないようなので
納得の行くものになりませんでした。

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


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

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

配信&IDE URL
>>139

161あづみ ◆WYiR3RzL3U 2018/08/06(月) 13:26:54.47ID:bn4marhs
ストアの構成を見直していました。APIからどういう形式でデータを受け取って、
表示に反映させるかということを考えなければならなかったので
その間、プログラム配信は行っていませんでした。
だいたいの形は見えてきたので、また再開しようと思います。



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

配信&IDE URL
>>139

162あづみ ◆WYiR3RzL3U 2018/08/13(月) 13:21:52.08ID:A341IOi2
ユーザーコミュニティページ内にある掲示板をずっと作っています。
コメントへの返信フォーム、投稿されたコメントを編集するフォームを作成しています。

配信&IDE URL
>>139

163あづみ ◆WYiR3RzL3U 2018/08/20(月) 09:33:50.94ID:Qd/a5TQU
Node.js のバージョンを8.11.4にアップグレードしました。
nvm でインストールすると、毎回 npm が v5.6.0 になるんですが、
これはなにか意味があるんでしょうか。
npm もついでにアップグレードしていますが
アップグレードしたらいけないんだろうか。

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

配信&IDE URL
>>139

164あづみ ◆WYiR3RzL3U 2018/08/23(木) 11:44:19.72ID:9MY0hfOj
掲示板の画像表示部分を調整しています。
1つだけ画像がアップロードされた場合は大きく表示し
複数の画像や動画が同時にアップロードされた場合は
小さく表示しようとしています。

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

配信&IDE URL
>>139

165あづみ ◆WYiR3RzL3U 2018/08/24(金) 11:35:11.16ID:+bsycatA
コメントの投稿フォームと、投稿済みのコメントの画像表示部分が
意図せず連動してしまう問題が起こっていたのですが
コピーが参照になっていたせいでした。
昨日1日使ってしまったのですが、冷静に考えたらすぐにわかりました。


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



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

配信&IDE URL
>>139

166あづみ ◆WYiR3RzL3U 2018/08/30(木) 13:47:13.34ID:wZTDRyvY
掲示板の投稿フォームで
画像と動画部分については正常に投稿できるようになりました。
いつまでやってるんだって感じですが
まだコメント投稿・編集、返信用フォームも完成していないので
そちらも作成していきます。

配信&IDE URL
>>139

167あづみ ◆WYiR3RzL3U 2018/09/03(月) 12:39:47.65ID:r+pg8jJ9
MongoDB をインストールしてみたものの
全然試さずに外観ばかり触っていたので徐々に不安になってきました。
実際、データベースを使ったときに思っていた処理ができなかったら困るので
データベースを利用しながらログインシステムを作ってみます。

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

配信&IDE URL
>>139

168あづみ ◆WYiR3RzL3U 2018/09/10(月) 13:27:36.43ID:3+yyCdwp
ログイン、アカウント作成部分を作っています。
クライアント側から 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

169あづみ ◆WYiR3RzL3U 2018/09/21(金) 12:51:31.71ID:7csHErno
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

170あづみ ◆WYiR3RzL3U 2018/09/25(火) 11:08:26.71ID:cwz3CX2C
ログイン機能の reCAPTCHA & CSRF 対策のコードをモジュール化して分離しました。
Node.js は import が使えないため、
クライアント側と同じ書き方ができないのが不便です。
いろいろ調べてはみたのですが
今のところは現実的に import / export 文を使うのは難しいとの結論に達しました。

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



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

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

配信&IDE URL
>>139

171Name_Not_Found2018/10/02(火) 21:47:17.57ID:x0gKZze6
【アフィ】元宇宙人のスピリチュアルブログ【詐欺】
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12193781232

172あづみ ◆WYiR3RzL3U 2018/10/04(木) 11:25:48.49ID:Z95FULRK
ログインとログアウト機能はほぼ完成しました。
あとはログインしていないときに、ログアウトページにアクセスした場合、
ログインページに飛ばすといった、リダイレクト機能を追加するだけです。



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

配信&IDE URL
>>139

173あづみ ◆WYiR3RzL3U 2018/10/09(火) 12:59:55.47ID:z4XOfwsr
プレイヤーページ(ログイン後に表示されるホーム)の作成に移ります。
とりあえずプレイヤーカードのデザインを考えようと思います。
プレイヤーカードというのは各ユーザーのプロフィールのようなもので、
カード型のデザインで、プレイヤーの各種情報を表示する機能を持たせる予定です。

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

配信&IDE URL
>>139

174あづみ ◆WYiR3RzL3U 2018/10/16(火) 10:58:21.34ID:TZ6yfb76
プレイヤーカードのデザインが完成しました。
これからこれをコーディングしていきます。
各ソーシャルサイトへのリンクを掲載でき、
フレンド募集にも活用できるので
なかなか機能的でいいデザインになったのではないかと思います。

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

配信&IDE URL
>>139

175Name_Not_Found2018/10/18(木) 02:28:21.13ID:???
 私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。

176あづみ ◆WYiR3RzL3U 2018/11/05(月) 10:12:38.77ID:x+cfXc86
MongoDB でトランザクションが使えるように設定しました。
レプリカセット構成じゃないと駄目だとのことだったので設定を行いました。

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

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

配信&IDE URL
>>139

177Name_Not_Found2018/11/10(土) 21:38:23.52ID:sysZOBce

178あづみ ◆WYiR3RzL3U 2018/11/28(水) 14:48:09.37ID:kUs5nhRu
プレイヤーカード(各ユーザーのプロフィールカードのようなもの)を
作っているところで進みが悪くなっています。

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

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

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

配信&IDE URL
>>139

179あづみ ◆WYiR3RzL3U 2018/12/26(水) 13:30:39.12ID:B8kZJn+2
MongoDB でリレーショナル DB と同じような join ができることを知って、
データベースの構成を見直していました。
MongoDB は配列もオブジェクトもそのまま入れることができ
検索も可能であるが故に、どういう構成にすればいいのか余計に悩んでしまいます。

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

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

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

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

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

配信&IDE URL
>>139

180あづみ ◆WYiR3RzL3U 2019/01/19(土) 11:25:29.78ID:IVdrKGxm
今日はプレイヤーカードのゲームID表示部分を変更します。
綺麗にIDを表示したい!

配信&IDE URL
>>139

新着レスの表示
レスを投稿する