【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/
質問・疑問なんでも書き込んでください。
ブログの記事をここにも投稿するので読んでみてね。 git は、2段階保存が特徴だから、
エラーが出る状態のコードは、
リポジトリには保存せず、自分側だけで保存する
自分だけのブランチを作ってもよい これはですね、あれなんですよ
gitの問題じゃなくてCloud9の問題なんです
Cloud9はブラウザでアクセスできるIDEなんですが
そこに複数人でアクセスして、それぞれが違うファイルを編集していると
誰かがエラーを出した段階で、他の人も全員エラーに巻き込まれるんです
どこかにエラー出ているファイルが存在していると
それ込みで全体をトランスパイルするので全部が動かなくなるって寸法です
結局、独立してトランスパイルする環境を複数作らないといけなくなりました
快適な開発環境を作るのはなかなか難しいですね 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 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 誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』
F5DBU スタイルシートですが、Next.js がデフォルトに定めている styled-jsx よりも
styled-components を使った方がいいような気がしてきました。
複雑な分岐を行う場合などに
クラスの内部にそれ用の function を作ってコンポーネントを返すような構成にすると
styled-jsx がちゃんと反映されません。
Material UI を使うときだけ、styled-components を使うというルールもいまいちしっくりこないので
styled-components に統一した方がいいのかなと思ってきました。
まさかスタイルシートでこんなに悩むとは思いませんでした。
また Next.js のバージョンを 6.0 に変更しました。
babel-plugin-transform-class-properties というプラグインを入れろという警告が出たので
それを入れて設定もしておきました。コードの書き方や、動作には特に変更がないようです。 プログラム配信 - フッターを作ります!
サイト制作とは直接関係ないのですが
数日前にAmazonアソシエイトアカウントが意味不明な理由で閉鎖されました…。
お調べしたところ、Amazonアソシエイト・プログラム運営規約を順守されていないことを確認しましたのでご連絡いたします。
貴殿は、書面による明示的な事前の承認を得ずに
ブラウザー・プラグインにおいて、Amazonサイトのコンテンツ、特別リンク
またはその他Amazonサイトに関連する内容を記載しており
Amazonアソシエイト・プログラム参加要件第7項に抵触いたします。
ブラウザプラグインなんて一度も作ったことがないのに
それを理由にして、警告もなくいきなり閉鎖なんてあんまりだ。
返信でどのブラウザプラグインに問題があるのでしょうか?
と問い合わせても具体性のないテンプレ返答が返ってくるだけ。
わずかな収入がさらに削られるという悲劇、本当に悲惨だ。
今日は頑張ってフッターを作ります。
他のサイトのフッターを参考にしながらデザインを考えようと思います。
配信&IDE URL
>>139 プログラム配信 - ヘッダーの調整とトップページをデザインします!
AmazonアソシエイトアカウントがBANされた件ですが
ブログにまとめました。本当にひどい扱いです。
https://gameusers.org/dev/blog/ban-amazon-associate/
今日は頑張ってヘッダーの気に入らない部分を調整して
トップページのデザインを考えようと思います。
配信&IDE URL
>>139 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 デザインを考えているのですが、機能性といいデザインを両立するのが大変で
かなりしんどいです。基本的に既存のものの切り貼りや
ちょっとしたアレンジで乗り切っていますが、ゼロから想像するセンスがないため
いろいろな面で妥協しないといけなくなるのが辛いです。
現在はカード型デザインでゲームの一覧を表示
検索もできるようになるページのデザインを考えるところです。
トップページはそこそこいい感じになりました
http://35.203.143.160:8080/
配信&IDE URL
>>139 今このページのデザインを考えています
ゲームを検索できるページです
http://35.203.143.160:8080/gc
配信&IDE URL
>>139 トップページ、ゲームコミュニティ一覧、ユーザーコミュニティ一覧
ログインページのデザインが終わり
いよいよメイン機能であるコミュニティページのデザインを行うところまで来ました。
掲示板の使い勝手が悪いので、改善案を出してもらいながら
新しいデザインを考えようと思います。
ユーザーコミュニティ一覧
http://35.203.143.160:8080/uc
ログインページ
http://35.203.143.160:8080/login
配信&IDE URL
>>139 現在、ユーザーコミュニティのデザインを行っています。
掲示板のスレッド一覧、検索、コメント部分などを考えています。
http://35.203.143.160:8080/uc/community 掲示板の画像アップロード・動画投稿機能を作成中です。
アップロードする画像を選択、または投稿する動画のURLを入力した際に
画像がプレビューされるようにします。
複数画像のアップロード、複数動画の投稿に対応しようと考えています。
http://35.203.143.160:8080/uc/community
配信&IDE URL
>>139 自分はReactを触りだしていきなり、Reduxという状態管理パッケージで管理したので
setStateは使っていなくてよくわかりません
今はMobXという同じような状態管理パッケージを使っているのですが
Reduxと比べても非常に簡単に書けるので
Reactに慣れてきたら、これをおすすめしたいですね
なんかあんまり役に立たない答えでごめんなさい
調べてみたところ、この辺りに答えが書いてあるでしょうか?
https://likealunatic.jp/2015/07/reactjs-setstate
https://ja.stackoverflow.com/questions/38711/ 掲示板にアップロードされた画像や動画を表示する部分を作成します。
画像&動画がひとつだけ投稿された場合の表示はすでに完成しています。
次は複数の画像、動画が投稿された場合の表示部分を
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 Swiper で Lightbox(複数の画像を表示するギャラリー) 的な機能を
実装しようと思ったのですが
Swiper は本格的な Lightbox パッケージじゃないようなので
納得の行くものになりませんでした。
そこで React 用の Lightbox パッケージを探し出してきて
それで画像を表示させようと思います。
できれば動画もギャラリー的に表示したかったのですが
以下のものは画像しか対応していないようです。
React Images:?https://jossmac.github.io/react-images/
配信&IDE URL
>>139 ストアの構成を見直していました。APIからどういう形式でデータを受け取って、
表示に反映させるかということを考えなければならなかったので
その間、プログラム配信は行っていませんでした。
だいたいの形は見えてきたので、また再開しようと思います。
現在はユーザーが登録してくれたサムネイルや名前を表示する部分を作成しています。
配信&IDE URL
>>139 ユーザーコミュニティページ内にある掲示板をずっと作っています。
コメントへの返信フォーム、投稿されたコメントを編集するフォームを作成しています。
配信&IDE URL
>>139 Node.js のバージョンを8.11.4にアップグレードしました。
nvm でインストールすると、毎回 npm が v5.6.0 になるんですが、
これはなにか意味があるんでしょうか。
npm もついでにアップグレードしていますが
アップグレードしたらいけないんだろうか。
今日もユーザーコミュニティページの掲示板を作ります。
コメントへの返信フォーム
投稿されたコメントを編集するフォームを作成しています。
配信&IDE URL
>>139 掲示板の画像表示部分を調整しています。
1つだけ画像がアップロードされた場合は大きく表示し
複数の画像や動画が同時にアップロードされた場合は
小さく表示しようとしています。
コメント投稿・編集、返信用フォームも完成していないので、そちらも作成します。
配信&IDE URL
>>139 コメントの投稿フォームと、投稿済みのコメントの画像表示部分が
意図せず連動してしまう問題が起こっていたのですが
コピーが参照になっていたせいでした。
昨日1日使ってしまったのですが、冷静に考えたらすぐにわかりました。
もう少し落ち着いて考えないとだめですね。
今日もコメント投稿・編集、返信用フォーム部分を作成します。
配信&IDE URL
>>139 掲示板の投稿フォームで
画像と動画部分については正常に投稿できるようになりました。
いつまでやってるんだって感じですが
まだコメント投稿・編集、返信用フォームも完成していないので
そちらも作成していきます。
配信&IDE URL
>>139 MongoDB をインストールしてみたものの
全然試さずに外観ばかり触っていたので徐々に不安になってきました。
実際、データベースを使ったときに思っていた処理ができなかったら困るので
データベースを利用しながらログインシステムを作ってみます。
これまでインストールされていた MongoDB は Ver.3 だったのですが
Ver.4 にアップデートしました。
トランザクションが使えるようになったらしいです。
配信&IDE URL
>>139 ログイン、アカウント作成部分を作っています。
クライアント側から 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 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 ログイン機能の reCAPTCHA & CSRF 対策のコードをモジュール化して分離しました。
Node.js は import が使えないため、
クライアント側と同じ書き方ができないのが不便です。
いろいろ調べてはみたのですが
今のところは現実的に import / export 文を使うのは難しいとの結論に達しました。
ES Modules をお試し機能的に使うことはできるようなのですが
安定版として提供されているわけではないので
なにか問題が起こったときに対処ができなくなりそうなので
現時点での利用はやめておこうと思います。
早く使えるようになるといいのですが。
今やろうとしているのはアカウント作成時に
パスワードをハッシュ化して保存し、E-Mail は暗号化して保存する部分です。
配信&IDE URL
>>139 ログインとログアウト機能はほぼ完成しました。
あとはログインしていないときに、ログアウトページにアクセスした場合、
ログインページに飛ばすといった、リダイレクト機能を追加するだけです。
それが終わったらプレイヤーページ
(ログイン後にアクセスする各ユーザーのホーム)を作成しようと思います。
配信&IDE URL
>>139 プレイヤーページ(ログイン後に表示されるホーム)の作成に移ります。
とりあえずプレイヤーカードのデザインを考えようと思います。
プレイヤーカードというのは各ユーザーのプロフィールのようなもので、
カード型のデザインで、プレイヤーの各種情報を表示する機能を持たせる予定です。
できればいろいろなページで使い回せるようなデザインのものにしたい。
配信&IDE URL
>>139 プレイヤーカードのデザインが完成しました。
これからこれをコーディングしていきます。
各ソーシャルサイトへのリンクを掲載でき、
フレンド募集にも活用できるので
なかなか機能的でいいデザインになったのではないかと思います。
https://gameusers.org/dev/blog/wp-content/uploads/2018/02/player-cards.jpg
配信&IDE URL
>>139 私たち日本人の、日本国憲法を改正しましょう。
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。 MongoDB でトランザクションが使えるように設定しました。
レプリカセット構成じゃないと駄目だとのことだったので設定を行いました。
レプリカセットというのは、複数台のデータベースを立ち上げて
それを組み合わせることで安定性をもたらす機能のようです。
同じサーバー内に3つのプロセスを立ち上げて構成しているので
安定性の向上にはあまり期待できない状況ですが
とりあえずトランザクションは使えるようになったので良かったです。
現在はプレイヤーカードのデータベーススキーマを作成して、データを挿入できるようにしようとしています。
配信&IDE URL
>>139 プレイヤーカード(各ユーザーのプロフィールカードのようなもの)を
作っているところで進みが悪くなっています。
Fetch のラッパー関数を作ったり、エラー処理の方法を考え直したり、
アカウント作成・ログイン部分を修正したり、いろいろやっていたのですが
そういった基本的な構成を考えるところで詰まってしまうので
時間がどんどん過ぎていきます。
ひとつ型ができると、それをベースにしていろいろなページを作っていけるのですが
その型を作るのがとても大変ですね。
昨日はページのローディングが終わってからボタンを利用可能にする機能を作っていました。
ページへのアクセス後、現在読み込んでいることを明確に示すために
ローディングアニメーションのアイコンをページのどこかに表示しようと思っています。
配信&IDE URL
>>139 MongoDB でリレーショナル DB と同じような join ができることを知って、
データベースの構成を見直していました。
MongoDB は配列もオブジェクトもそのまま入れることができ
検索も可能であるが故に、どういう構成にすればいいのか余計に悩んでしまいます。
例えば多言語データの扱いで { ja: ‘日本’, en: ‘Japan’ }
こうやってひとつのオブジェクト内にすべて含ませるか
それとも行ごとにデータを分けて必要なデータだけを読み込むか、どっちにすればいいのか迷ってしまいます。
すべてのデータをひとかたまりにすると、データがバラバラに保存されないメリットもあるのですが
一度すべてを読み込んでから
不必要なデータをそこから排除するという手間がかかってしまうため
結局のところ、行ごとに管理して必要なデータだけを読み込む方がいいように思えてきました。
データベースの構成を考えるのは本当に難しいですね。
あとデータベースの中身は容量の関係上で、GitHub 上に掲載しなくなったのですが
すでにデータがないと正常に動かなくなってきているので
簡単に初期データを挿入できる機能をつけました。
詳しくは GitHub の解説をチェックしてください。
今は各ユーザーの名前やサムネイルが表示されている部分にボタンを表示して
それを押すことでプレイヤーカード(プロフィール的なもの)を
ダイアログ(モーダル)で表示する機能を作っています。
配信&IDE URL
>>139 今日はプレイヤーカードのゲームID表示部分を変更します。
綺麗にIDを表示したい!
配信&IDE URL
>>139 現在、Cloud9 を GCE で運用しているのですが、夜9時頃になるととても重くなります。
バンドルファイルが大きくなっていることも関係しているのか、読み込みが正常に終わりません。
VPS は仮想なのでアクセスが集中する時間帯は重くなったりもするのですが
GCE も同じなんですね。クラウドはそういう問題とは縁がないのかなと考えていたのですが
そういうわけではないんでしょうか。というかそもそも GCE はクラウドじゃない??
1年間無料で使える枠であれこれ文句言うのも申し訳ないので
そろそろ VPS に環境を移したほうがいいのかなと考えています。
とにかく夜になると開発ができなくなるのはまずい。
今は ID を登録するフォームを作成しています。
Game Users では何度も同じ ID を入力しなくていいようなシステムにしているのですが
そこのフォーム部分でバリデーションの基本的な型を生み出そうとしています。
テキストフィールドに文字を入力すると
文字数が表示されて、エラーの警告も表示されるようにしたい。
配信&IDE URL
>>139 夜9時になると、サーバーが重いとこの前書いたのですが、
調べてみたところサーバーのせいではなく利用している
プロバイダーが原因である可能性が高くなってきました。
現在、webpack で固めたバンドルファイルのサイズが
4〜6MB くらいなのですが、契約しているプロバイダーは夜になると
速度が 5Mbps 以下になってしまうのです。つまり速度の異常な低下で
バンドルファイルをダウンロードしきれないという状況になっているようです。
無料でお試しができる他のプロバイダーに申し込んで切り替えてみたところ
夜でも開発中のページが表示できるようになりました。
ただそのプロバイダーもあまり速度が速いところではないため
表示が遅いことは遅いのですが
現在契約している bb.excite よりはずっとましな状況です。
bb.excite は 500円ながらも、これまでは普通に使うことはできていたのですが
最近はそれすら無理な速度になってきています。
速度を求める用途がなかったので、500円プロバイダーでも十分だったのですが
さすがにバンドルファイルすら正常にダウンロードできない状態になってしまったのは
非常に辛いです。このままでは開発に影響が出るため、IPv6 IPoE の利用を検討しています。
いいプロバイダーが見つかればいいのですが。
開発は現在、ID 登録フォームをほぼ完成させたところです。
今後、自分でフォームのバリデーションをひとつひとつ書いていくのは時間がかかるため
バリデーションパッケージを選定&利用していこうと思っています。
配信&IDE URL
>>139 夜に開発サーバーが重たくなる問題ですが、プロバイダーが悪いという結論に至りました。
bb.excite がここのところ速度の低下が激しく、
人が多くなる時間帯はまともにページを表示することができなくなっていたのです。
そこで IPv6 IPoE 接続のできるプロバイダーに変更したところ、夜も快適に開発ができる状態に戻りました。
当初 GCE のせいにしていたのは良くなかったですね。
約一年間無料で使わせてもらった GCE ですが、無料期間が終わると
当然有料で継続しなければならなくなるため
他の VPS に開発サーバーを移すことにしました。
理由は料金的な問題です。やはりクラウドは高級感のあるお値段になってしまうので
予算的に VPS しか選択肢がなくなりました。
いろいろ調べてみて、Amazon がやっている Lightsail も魅力的に感じましたが
IPv6 の IP が割り振られないらしい?ので、結局 IPv6 対応サイトにできる
さくら VPS になりました。
今回の件で、Game Users も IPv6 でアクセスできるサイトにしたいと強く感じたので
練習も兼ねて開発サーバーも IPv6 でのアクセスができるようにしておこうと思いました。
IPv6 対応のついでに DNS でサブドメインに割り振っておいたので、URL が変わりました。
ドメインでのアクセスになったのにポート番号を入力しなければならないのは
ちょっとかっこ悪いですが、ここもまた Nginx を導入してリバースプロキシ?
で設定をしないといけないようです。今後はそちらの勉強も頑張っていこうと思います。 なぜIPV6にこだわるのですか?
どんな利点があるのでしょうか。 個人的な経験によってIPv6に対応したいと感じただけで
現状ではそこまで大きな利点はないんじゃないかと思います。
IPv6に対応したいと思ったのは、プロバイダー関連の話になるのですが
自分の場合、新しく申し込んだプロバイダーの設定が一時うまくいかなくて
IPv4 over IPv6 接続が機能していなかったのです。
(IPv4にしか対応していないサイトも、IPv6の経路を使うことによってアクセスが速くなる機能です)
そのためYouTube、Google、NetflixなどのIPv6対応サイトの場合は
IPv6接続ができて速度も非常に快適だったのですが
IPv4にしか対応していないサイトは旧式の接続で、速度も遅いままだったのです。
そういう環境の人はあまりいないと思うんですが
IPv6に対応しておくことで、誰でも快適にアクセスができるようになるのと
対応サイトは、上記有名サイトのように軽くて最先端なサイトのイメージがあるので
できれば早い段階から、うちもその仲間入りをしたい!と思ったのです。
現在、ウェブサイトのSSL化が急激に進んでいるように
いずれどのサイトもIPv6に対応するようになるんじゃないかと思うので
今のうちから勉強しつつやっておこうと思いました。
そんな感じですね。無理してやる必要はまったくないと思うんですが
ちょっとだけメリットを感じるユーザーもいるので
利用できる環境なら、サーバーの設定をいじるついでに
やっておくといいんじゃないでしょうか。 今日はinputで選択した画像をプレビューする機能を作ります
プログラム配信中、詳しくは
>>184 アイコンをキレイにします
Simple IconsというキレイなSVGアイコンが揃っているサイトをみつけたので
それを利用させてもらおうと思います。
https://simpleicons.org/
プログラム配信中、詳しくは
>>184 やっとですが、バリデーションを含めたフォームのガワはできあがりました。
次は API に POST でデータを送って、サーバーに保存する部分に取り組もうと思います。
単純なテキストデータの保存はすでにできているのですが、
画像の処理はまだできていません。srcset に対応するために
複数のサイズにリサイズして、圧縮するという作業が必要になります。
Jimp(リサイズ用パッケージ)
https://github.com/oliver-moran/jimp
imagemin(圧縮用パッケージ)
https://github.com/imagemin/imagemin
良さげなパッケージを発見したので、これらを使わせてもらって実現しようと思います。
プログラム配信中
https://youtu.be/s_XYS2XyFgY
開発について詳しくは
>>184 今日はアップロードしたSVG画像をサーバーに保存する部分を作ります。
プログラム配信中
https://youtu.be/9HVRWHiPq6A 誰でも頭が良くなる、プログラムが書けるようになる方法が発見される 55271
https://you-can-program.hatenablog.jp プレイヤーカード作成フォームの完成を目指します!
プログラム配信中
https://youtu.be/IYx-Q5B0zUY 記事の更新が疎かになってしまいました。
アカウント作成、ログイン、ログイン後のページでIDやパスワードの変更など
基本的な機能はほぼ実装し終わりました。
途中、カスタムエラーの投げ方を学んだり、ログの保存方法を勉強したり
いろいろあって無駄に時間もかかりましたが
各ページのベースになる部分は徐々に固まってきています。
次は横幅の広いデバイスでアクセスした場合に
2カラムでコンテンツを表示できるようにしようと思っています。
サイドに掲示板のスレッド一覧を表示したり
サイドに表示するコンテンツがない場合は
サイト内の更新情報をカードで表示したりしたい。
ttps://gameusers.org/dev/blog/wp-content/uploads/2018/02/2column.jpg
そしてモバイルの場合は、ドロワーメニューで必要な情報を表示しようと考えています。
プログラム配信中
https://youtu.be/gewLTvihd0w 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 ユーザーが作成できるコミュニティページの制作を進めています。
前に掲示板のガワだけは作っていたのですが
開発を進めていくうちに仕様の変更で動かなくなっていたので
それを直しつつ、データベースの構成を考えています。
データベースの知識に自信がない上、MongoDBの扱いにも不慣れなため
どのように構成するといいのか、なかなか見えてきません。
1件1件データを取得するコードをループさせれば望みのものは取得できますが
それだと当然重くなるわけじゃないですか。
だからできるだけ少ない回数でデータを取得するコードを書かなければならないのですが
それが難しい。
多言語に対応することも考えたりするとわけがわからなくなって、頭がごちゃごちゃになります。
プログラム配信中
https://youtu.be/Mp-ZrD-Ml04 今日は掲示板のスレッド作成フォームを完成させたい
プログラム配信中
https://youtu.be/KEboEKUucXs 掲示板の画像&動画表示部分を作ります
キレイに表示させたい!
プログラム配信中
https://youtu.be/HR0NB_ZDypM 二ヶ月以上、掲示板を作っています。
サイト全体の画像や動画の扱い方(投稿・表示)を
統一できるようにしようとしているので、
多少はしょうがないにしても、いろいろ時間がかかりすぎてやばいです。
普通の人はもっとサクッと完成させるもんなんでしょうか?
やっぱり自分自身プログラマーとしての能力がアレなんかなと思わざるを得ません。
ただそれでもめげずに頑張りたい!
プログラム配信中
https://youtu.be/P_PS3w6cUjU 雑食系エンジニア、KENTA の動画
Rubyはオワコン?「滅びゆく5つのプログラミング言語」に関する所感
https://www.youtube.com/watch?v=yBrnuR8YJN4
初心者向きのweb アプリの結論は、Ruby on Rails !
Rails でも、HTML, CSS/SASS, JavaScript, jQuery, Node.js も学ぶと、1年は掛かる フォーラム(掲示板)のページの切り替え部分を作っています。
Next.jsがAPIをデフォルトで扱えるようになったので
その方法に書き換えています。
pages/api
以下にファイルを設置すると、そのアドレスのAPIが使えるようになります。
最初っからあれば書き直さなくて済んだのに。苦しみ…。
https://youtu.be/Ni3pJT90FL8 ようやくフォーラム(掲示板)の完成が近づいてきました。
コメントやスレッドの削除機能をつければ
大まかな機能の実装は終わりです。がんばります!
https://youtu.be/d5u3gZd51bY 今日は配信用の課金システムを作ろうと思います。
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 ■ このスレッドは過去ログ倉庫に格納されています