現在、PHP と JavaScript で作られている Game Users を React & Node.js で書き直したいと思っています。そのために Node.js の使い方を覚えなければならないので勉強しながら作っていきます。
今やっていること – 2018/9/10
ログイン、アカウント作成部分を作っています。
クライアント側から 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 ではなにも考えずにできていたことが簡単にできなくなっています。裏側の理屈を理解できている人なら原因がすぐにわかるのかもしれませんが、自分レベルだといちいち引っかかってしまうのが苦しいところです。
http://35.203.143.160:8080/login
デザイン済みのページ
作成中のページをリアルタイムでチェックできるようにしています。機能的なことは置いておいて、とりあえず見た目だけを優先的に作っています。ボタンなど、正常に機能しない部分も多いですが、現時点では気にしないでください。
トップページ
http://35.203.143.160:8080/
ユーザーコミュニティ一覧
http://35.203.143.160:8080/uc
ゲームコミュニティ一覧
http://35.203.143.160:8080/gc
ログイン
http://35.203.143.160:8080/login
ログアウト
http://35.203.143.160:8080/logout
ユーザーコミュニティ（現在ここを作成中）
http://35.203.143.160:8080/uc/community
現在、解決できていない問題
Cloud9 の IDE で ESLint が正常に動きません。airbnb の構文チェックを利用したいのですが機能せず。
以下のページで Cloud9 に入れるといいプラグインについて書かれていたので、入れてみたのですが、それでも動きません。どなたか詳しい方おられましたら教えてください。
https://stackoverflow.com/questions/45572719/use-eslint-on-cloud-9-ide
プラグイン：https://github.com/michaelmitchell/c9.ide.language.javascript.eslintd
AWS Cloud9
Cloud9 を VPS 上に設定して、ブラウザさえあれば、みんなで開発できる環境を作ってみました。
ゲストアカウント
- アカウントID：956477059000
- ユーザー名（どちらか）：guest-1, guest-2
- パスワード：Password12345
ゲストアカウントでログインすると以下のページが見れるようになります。管理者がいないときは、ゲストアカウントは Read Only になっています。
ログアウトするときはブラウザを閉じるだけで OK です。ゴミ箱ボタンは押さないようにしてください。
マスターアカウント
プログラマーやデザイナーの方、または HTML ＆ CSS が理解できる方にはマスターアカウントのログイン情報を、IDE のチャット欄で提供しています。マスターアカウントを利用したい方はいつでも言ってください。
マスターアカウント（master-1～5）でログインできる方は、以下の Cloud9 環境も利用できます。同じ環境で、同時に違うファイルを編集した場合、トランスパイル時にエラーが出ると、他の人もそのエラーに巻き込まれてしまうので、同じ開発環境を複数用意しました。いろいろ試してみたい方は、こちらの環境（URL）にアクセスして、好きなようにファイルを作成・編集してみてください。
git cloneで複製しているだけなので、ぐちゃぐちゃになっても大丈夫です。
こちらの環境はメインの環境を定期的にクローンしていくつもりなので、継続して編集したいファイルがある場合は、手動でメイン環境の方にファイルをコピーしてもらうか、手元に作ったファイルをダウンロードしておいてください。クローン後にアップロードしてもらって制作の続きを行ってもらえればと思います。
別の環境とのファイル共有方法ですが、すごくアナログな方法しか思いつかなかったので、もっとスマートな方法があったら、ぜひ教えてください。
共同開発用リポジトリ
https://github.com/gameusers/collaboration
メモ
2018/9/3
MongoDB をインストールしてみたものの、全然試さずに外観ばかり触っていたので徐々に不安になってきました。実際、データベースを使ったときに思っていた処理ができなかったら困るので、データベースを利用しながらログインシステムを作ってみます。
これまでインストールされていた MongoDB は Ver.3 だったのですが、Ver.4 にアップデートしました。トランザクションが使えるようになったらしいです。
2018/8/24
コメントの投稿フォームと、投稿済みのコメントの画像表示部分が、意図せず連動してしまう問題が起こっていたのですが、コピーが参照になっていたせいでした。昨日1日使ってしまったのですが、冷静に考えたらすぐにわかりました。
もう少し落ち着いて考えないとだめですね。
コメント投稿・編集、返信用フォームも完成していないので、そちらも作成します。
2018/8/23
掲示板の画像表示部分を調整しています。1つだけ画像がアップロードされた場合は大きく表示し、複数の画像や動画が同時にアップロードされた場合は、小さく表示しようとしています。
コメント投稿・編集、返信用フォームも完成していないので、そちらも作成します。
2018/8/20
Node.js のバージョンを8.11.4にアップグレードしました。nvm でインストールすると、毎回 npm が v5.6.0 になるんですが、これはなにか意味があるんでしょうか。npm もついでにアップグレードしていますが、アップグレードしたらいけないんだろうか。
今日もユーザーコミュニティページの掲示板を作ります。コメントへの返信フォーム、投稿されたコメントを編集するフォームを作成しています。
2018/8/6
ストアの構成を見直していました。APIからどういう形式でデータを受け取って、表示に反映させるかということを考えなければならなかったので、その間、プログラム配信は行っていませんでした。だいたいの形は見えてきたので、また再開しようと思います。
現在はユーザーが登録してくれたサムネイルや名前を表示する部分を作成しています。
2018/7/19
Swiper で Lightbox（複数の画像を表示するギャラリー） 的な機能を実装しようと思ったのですが、Swiper は本格的な Lightbox パッケージじゃないようなので、納得の行くものになりませんでした。そこで React 用の Lightbox パッケージを探し出してきて、それで画像を表示させようと思います。
できれば動画もギャラリー的に表示したかったのですが、以下のものは画像しか対応していないようです。
React Images: https://jossmac.github.io/react-images/
2018/7/17
掲示板にアップロードされた画像や動画を表示する部分を作成します。画像＆動画がひとつだけ投稿された場合の表示はすでに完成しています。次は複数の画像、動画が投稿された場合の表示部分を Swiper という Lightbox を利用しながら実装しようと思います。
Swiper: http://idangero.us/swiper/
react-id-swiper: https://github.com/kidjp85/react-id-swiper
2018/7/11
掲示板の画像アップロード・動画投稿機能を作成中です。アップロードする画像を選択、または投稿する動画のURLを入力した際に、画像がプレビューされるようにします。複数画像のアップロード、複数動画の投稿に対応しようと考えています。
2018/6/19
トップページ、ゲームコミュニティ一覧、ユーザーコミュニティ一覧、ログインページのデザインが終わり、いよいよメイン機能であるコミュニティページのデザインを行うところまで来ました。
掲示板の使い勝手が悪いので、改善案を出してもらいながら、新しいデザインを考えようと思います。
2018/6/4
デザインを考えているのですが、機能性といいデザインを両立するのが大変で、かなりしんどいです。基本的に既存のものの切り貼りや、ちょっとしたアレンジで乗り切っていますが、ゼロから想像するセンスがないため、いろいろな面で妥協しないといけなくなるのが辛いです。
現在はカード型デザインでゲームの一覧を表示、検索もできるようになるページのデザインを考えるところです。
2018/5/23
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 のサーバー側でも取得したいのです。でも方法がわからず。
2018/5/9
スタイルシートですが、Next.js がデフォルトに定めている styled-jsx よりも styled-components を使った方がいいような気がしてきました。
複雑な分岐を行う場合などに、クラスの内部にそれ用の function を作ってコンポーネントを返すような構成にすると、styled-jsx がちゃんと反映されません。Material UI を使うときだけ、styled-components を使うというルールもいまいちしっくりこないので、styled-components に統一した方がいいのかなと思ってきました。
まさかスタイルシートでこんなに悩むとは思いませんでした。
また Next.js のバージョンを 6.0 に変更しました。babel-plugin-transform-class-properties というプラグインを入れろという警告が出たので、それを入れて設定もしておきました。コードの書き方や、動作には特に変更がないようです。
2018/4/23
Next.js で Material UI を使う方法ですが、前回やっていた方法では、サーバーサイドレンダリング時にスタイルシートが正常に適用されていない。なぜか遅れて適用される？ため、設定を見直しました。
上記サンプルを参考にしながら、設定してみました。
Next.js はデフォルトで styled-jsx というスタイルシートの記述法を採用しているのですが、それを使った場合はサーバーサイドレンダリングする際に、Material UI のコンポーネントに正常にスタイルシートが適用されず、styled-components を使うと正常に適用されるという状況になりました。
設定方法が悪いだけかもしれないのですが、今のところ対処法がわからないので、Material UI のコンポーネントを使うときだけそうしています。
Next.js で Material UI を使う際の書き方がわかる方おられましたら、ぜび教えてください。
2018/4/20
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>
2018/4/18
複数人の開発者で同時に各ファイルを編集した場合、誰かがエラーを出すと他の開発者にもエラーが出て、開発がスムーズに進まないという問題が発覚しました。
同じ環境でトランスパイルが行われるわけですから、考えてみれば当然なのですが、今まで気づきませんでした。同時に違うファイルを触れないというのは結構致命的な問題です。
そこで Cloud9 の環境を複数用意して、それぞれの開発者が別のファイルを気軽に触れるようにしてみました。
マスターアカウントでログインできる方は、そちらの環境でも開発が行えます。git clone で複製しているだけなので、細かいことは気にせずいろいろ試してみてください。
2018/4/17
Next.js を試してみたところ、とても優秀だったので採用することに決めました。サーバーサイドレンダリングの機能や、Code Splitting をデフォルトで行ってくれるのは非常に便利です。ただすべての機能を提供してくれるわけではないので、結局、自分で Express を利用したサーバー用コードを書かないといけない部分も多くあるのですが。
それと Next.js はデータベースへのアクセスをすべて API で行うことを推奨しているようです。そこそこの規模のサイトになると、そういった構成が増えてくるのかもしれないのですが、自分は小規模なサイトしか作ったことがないので、初めての経験でちょっと不安です。
またそれに際して、Cloud9 が提供している URL では、 Fetch → API でのデータ取得が正常にできない問題が出てきました（なぜか Status 499 のエラーが出てしまいます）そのため、サーバー側でファイアーウォールのポートを開けて、普通のウェブサイトとして制作中のサイトにアクセスできるようにしました。
https://df44294c8853471b8ddd609c09af06f3.vfs.cloud9.us-west-2.amazonaws.com/
↓
こちらのアドレスでは、Fetch でのデータ取得が正常に行えます。
React の状態管理で MobX を使ってみました。Redux よりコードの記述量がずっと減る感じなので、Next.js と一緒に採用してみます。後は Material UI の使い方を学んで、デザインを触りながら作っていこうと思います。
2018/4/9
勉強した本の独自の書き方になっていたので、express-generator をディレクトリ構成のベースにしました。
Webpack の最新バージョンがいつの間にか 4 になっていたので、アップデートしました。webpack.config.js も バージョン4に合わせて書き直しました。ビルドが速くなっているそうです！
React が正常に表示されるかテストしてみました。とりあえず Hello World を表示することができたので良かったです。React のサーバーサイドレンダリングに興味があるので、そちらについて調べてみたのですが、手間が非常にかかるようで、やるべきかやらないべきか悩んでいます。
React は状態管理に Redux を使用していたのですが、コードを書く量が多く、学習コストも高いため、同じ状態管理機能を持った MobXというライブラリに興味を持っています。こちらもいろいろ調べてみようと思います。
2018/4/3
IDE のユーザー削除を間違えて行ってしまいました。本来は IDE から削除してから、AWS の IAM でユーザーを削除するという順番で行わければならないのに、先に IAM でユーザーを削除してしまったので、IDE から削除ができなくなってしまいました。
修正方法がわからず、環境を作り直すことになったので、IDE などの URL が変更になりました。ブラウザのお気に入りに入れていた方は、お手数ですが URL の変更をよろしくお願いします。
2018/3/30
GCE 上に Cloud9 を構築していますが、あまりにも重たいのでサーバーをスペックアップしました。参加者が3人集まると止まるので。
f1-micro（vCPU x 1、メモリ 0.6 GB）
↓
g1-small（vCPU x 1、メモリ 1.7 GB）
無料で使えるクレジットが30000円分あるので、しばらくは大丈夫そうです。
node.js のバージョンを 8.11.1 にし、.bashrc に source ~/.nvm/nvm.sh を記述して、ターミナルを立ち上げるたびにパスを通さなくてもいいようにしました。
Node.js を勉強するために利用した本
2 冊とも読み終わりました。
JavaScriptでのWeb開発 ~ Node.js + Express + MongoDB + ReactでWebアプリを開発しよう ~ その１（改訂版）
JavaScriptでのWeb開発 ~ Node.js + Express + MongoDB + ReactでWebアプリを 開発しよう ~ その２
Kindle Unlimited を契約している方は読み放題で読めます。
勉強した項目
- Node.js のサーバー起動
- Hello World の表示
- MongoDBの導入、データの挿入・表示
- 画像のアップロード機能
- Passport（ログイン用パッケージ）を利用して、ID & Passord のログインと SNS 認証でのログイン
- Winston（エラーログ記録パッケージ）の利用方法
- 404 ページの表示
- エラー処理
- Helmet（セキュリティ用ヘッダーを設定するパッケージ）の設定
- CSRF対策、トークンをフォームページの <input type=”hidden”> に表示させてチェックする方法
- CORS（クロスオリジンリクエスト）の設定、開発環境では正常に機能しなかったのでよくわからず
- HTTPS の設定、本番環境じゃないので後回しにしました
Teletype portal ID（利用停止中）
気軽に参加してください！
portal ID:
Teletype for Atom
Atom を使ってコラボレーションができる Teletype というプラグインを使ってみようと思います。実際どんな使用感なのかわからないので手探りになりますが。
※ 利用にはGitHubのアカウントが必要になります。
Teletypeの使い方
1. Teletype プラグインをインストールする
まずは Atom に Teletype のプラグインをインストールしてください。
2. トークンを取得する
以下のページにアクセスして Authorize atom というボタンを押してください。トークンを取得するページに移動します。
https://teletype.atom.io/login
3. トークンを取得します
モザイク部分にトークンが表示されます。それをコピーしましょう。
4. Atom の電波塔アイコンをクリックしてトークンを貼り付けます
Atom の右下に電波塔のアイコンがあるので、そこをクリックしましょう。画像のような画面が表示され、トークンを入力するフォームが表示されます。そこにさきほどコピーしたトークンを貼り付けましょう。
そして Sign in ボタンを押すと、Teletype の利用準備は完了です。
5. portal ID を入力して参加してください
再度、電波塔のアイコンをクリックして、Join a portal と書かれた部分をクリックすると、portal ID を入力するフォームを開けます。そこにこの記事上部に掲載している portal ID を入力して Join ボタンを押してください。
これでプログラム配信のポータルに参加できます。開発に参加したり、アドバイスをしたりしなくても全然構いません。Teletype を試しに触ってみたいという理由でもなんでもいいので、気軽に参加してみてください。
