【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/
質問・疑問なんでも書き込んでください。
ブログの記事をここにも投稿するので読んでみてね。 Google でも基本は、1件1件、電話する。
旅行・ホテル・飲食店などをまとめたサイトも、1件1件、訪問する
客から見ると、どんな得があるのか？ が重要で、
営業マンから、もうかるやり方を、教えてもらえるのが重要
しかも、文書を読まずに、会話で教えてもらえる事が重要。
文書を読んで下さいというのは、まず無理！
他人の作った文章を読むのは、無料でも全員が嫌がる。
有料でも講習会の方が良い。
話を聴けるから
五感すべてを使うので、理解力が高まるから、会話が好まれる。
これをコミュ力と言って、人間社会・集団に欠かせない資質。
つまり成功の条件
技術者を選択する人は、これが嫌いな人が多い。
だから、一般人からは相手にされない。
意思の疎通ができないから Googleでもそんな地道な営業をしてるんですね
自分も頑張らねば
今、メールでシェアボタンのプラグインを使ってくれそうな人に連絡を取ってみてるんですが
やっぱりメールも文書なので、効果は薄いってことでしょうか
講習会のようにダイレクトな感じでおすすめできる方法があればいいのですが
なかなか難しいですね
コミュ力は自分も発揮しなければならないと常々思っています
どうしても楽な方に逃げてしまうので
ネットで影響力のある人が気に入ってくれて
勝手に流行ってくれないかなとか、ありえない夢を見てしまいますね
確かに技術寄りの人は文系のウェーイという人たちと違って
内向きなイメージがあります
毎日、黙々と作業をしているのでどうしてもそうなってしまうのかもしれませんが
「客から見ると、どんな得があるのか？ が重要で、
営業マンから、もうかるやり方を、教えてもらえるのが重要」
すごく重要な教えな気がするので
今後はこの点をよく考えながらアピールしていこうと思います
営業活動には疎いので、こういう参考になる情報は本当にありがたいです サーバーをNode.jsにしたい気持ちが高まる
現在、サーバー側はPHPで動いているのですが、いずれNode.jsにして、
すべてをJavascriptで動く環境にしたいと思っています。
結構な時間をかけてPHPの処理を書いていると
そのうちJavascriptに書き換えることになるのに
どうしてこんなに力を入れてPHPを書いてるんだろうという気持ちになってしまいます。
その思いが重なり重なり、いよいよNode.jsの本でサーバー側の処理を勉強し始めました。
ちょっと読んだ感じでは、それほど難しい印象は持たなかったので
比較的簡単にNode.jsで動くページを作成できるかもしれません。
しかし現在動いているログインやプッシュ通知など
手間のかかるシステムをNode.jsに置き換えるのは楽じゃないと思うので
サーバー側を短時間に一新することは現実的にできそうにありません。
そこで一部のページから徐々に置き換えていくことを考えたのですが
そうした場合にApacheとNode.jsを同居させなければなりません。
この構成で運営されている方はすでにいるようなので
やり方については調べがついたのですが、問題はドメインやサブドメイン単位ではなく
ページ単位でサーバーを振り分けることができるのかということと
SSLが問題なく動くのかわからないという点です。
Node.jsにnode-http-proxyというパッケージがあって
それを利用すればサーバーを振り分けられることまではわかったのですが
ページ単位での振り分けについてはネットに書かれていませんでした。
さらにこの前、設定したLet's EncryptのSSLですが
これがNode.jsのサーバー上でも普通に動いてくれるのかわからないのです。
本当にもうわからないことだらけなんですが
そもそもの話、Web系って覚えること多すぎないですか？
範囲が広いのに、一人であらゆることに対応しなければならないので
そろそろ頭がパンクしそうです。 ブログをやっているなら絶対に設置しておきたいSNSのシェアボタン。
公式が提供するボタンから、WordPressのプラグインで表示できるものまで様々なものがありますが、
今回、ご紹介するのは、公式のものと比較すると表示速度は10倍！選べるテーマは無限大！
世界中の素材サイトからアイコンをダウンロードして
シェアボタンの画像として利用できる画期的なプラグインです。
絵を描いたりデザインが行える方なら
他にない世界でひとつのシェアボタンを作成することもできる、まさに夢のプラグインです！！
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/banner.jpg
画像を見てください。これは世界中で提供されている
SNSのアイコンを利用させてもらって作ったオリジナルのシェアボタンです。
今回、紹介する「Game Users Share Buttons」を利用すると
誰でもこんなオシャレなシェアボタンをブログで使うことができるようになります。
これまではデザインに統一性のない公式のシェアボタンを並べて使うか
プラグインとして提供されている決まったデザインのシェアボタンを使うかで
見た目を変更する選択肢がほとんどなく、おしゃれなデザインのシェアボタンを設置しようとすれば
HTML・CSS・Javascript など Web 制作の知識が必要になったり
自分で画像を作る場合はデザインセンスが求められたり
誰でも簡単にできるというものではありませんでした。
しかし Game Users Share Buttons ならそれが可能です。誰にでも簡単にです！
この記事ではインストール方法、使い方について詳しく解説していきますので、ぜひ一度、使って試してみてください。
自分で紹介記事を書いてみました
長いのでブログの記事のURLを貼っておきます。
https://gameusers.org/dev/blog/wordpress/game-users-share-buttons HPで友達が稼げるようになった情報とか
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
MY6HSHSQBP しばらくブロガーになります！
とりあえずWordPress関連の記事を書いていこうと思います。
WordPressにはたくさんの便利なプラグインが用意されています。
こんな機能があったらいいのになと思うものは、だいたい存在していると言っても過言ではありません。
今回はプラグインのインストール方法について詳しく解説していきます。
WordPressを導入したばかりでよくわからない方は
この記事を参考にしてインストール方法を覚えてください。
プラグインのインストールには大きく分けて3つの方法があります。
https://gameusers.org/dev/blog/wordpress-plugin-install/ WordPressに自作のCSS・JavaScript・HTMLを追加するには？
WordPress を利用していると、ここの見た目を変更したい
こんな機能を追加したいなどなど、さまざまな変更や機能追加をしたくなってきますが
そんなときに必要になるのが CSS（スタイルシート）や JavaScript です。
この記事では自作の CSS・JavaScript・HTLM をブログに追加する方法について解説していきます。
https://gameusers.org/dev/blog/simple-custom-css-and-js/ WordPressのリスト（箇条書き）をCSSで綺麗に表示しよう！
WordPress で記事を書いていると箇条書きで表現したい項目が出てきます。
この時に利用できるのがリストです。投稿ページのビジュアルエディタで、
番号なしリスト・番号付きリストを選ぶと画像のようなリストを入力することができるようになります。
https://gameusers.org/dev/blog/wordpress-beautiful-list/ WordPressのフォントを変更して印象をガラッと変えてみよう
WordPress の見た目を変えるときに、まず思いつくのはテーマの変更ですが、その次にはなにが思い浮かびますか？
特にこれといったものは思い浮かばないですよね。
そこでおすすめしたいのがフォントの変更です。
フォントを変えるとブログの印象もガラッと変わります。
WordPress のフォントについて詳しく書かれている記事はあまり見たことがないと思いますので
今回は WordPress のフォントについての情報を集めてみました。
https://gameusers.org/dev/blog/wordpress-font/ WordPress ? Webフォントの使い方
綺麗なフォント、おしゃれなフォント、面白いフォントを使いたい！
でも OS に備え付けられているフォントにはいいものがない。
そういった方におすすめしたいのが Webフォントです。
Webフォントは日々、世界中で新しいものがデザインされており、
有名なフォントサイトのものを軽く数えるだけでも、数百、数千に達します。
この記事では、外国製の英数字 Webフォントから日本製の日本語 Webフォントまで
WordPress での使い方を詳しく解説していきますので、ぜひ参考にしてください。
https://gameusers.org/dev/blog/wordpress-web-font/ あけましておめでとうございます
今年もブログの記事を書いていこうと思います
WordPress関連の記事を書いて
その記事を読んでくれた方がシェアボタンを使ってくれたらいいなと考えております
WordPressのパーマリンクおすすめ設定
WordPress を設置したらまず最初にやっておきたい、パーマリンクの設定について説明していきます。
これだけやっておけば間違いない！というおすすめ設定を紹介しますので、ぜひ参考にしてください。
https://gameusers.org/dev/blog/wordpress-options-permalink/
WordPressの記事の一部を折りたたんで表示する方法 ? ネタバレ防止
WordPress の記事を書いていて、ここの説明長くなっちゃうから
折りたたんで必要な人だけに表示したいな、と思うことありませんか？
このブログは解説系のブログなので、慣れている人には必要ないけど
初心者の人に向けた情報などを掲載したいときに、記事の一部を折りたたんで表示しています。
https://gameusers.org/dev/blog/wordpress-slide-contents/ Game Usersにアクセスしたときに出るエラーのことなら
たまにデータの読み込みに失敗したり
なんらかのエラーが出た時にJavaScriptでerrorと出るようになってます。
このアラートは今となっては意味不明な仕様なんですが
たまにしか出ないから別にいいか、ということでそのままにしていました。
Edgeでもサイトの動作はチェックしてるんですが
たぶん毎回は出ないと思うのであんまり気にしないようにしてください。
Node.js と React で書き直す際にはちゃんと修正します！
今ブログ書くことに必死なので、いつになるかはわからないのですが。 WordPress ? 投稿日の代わりに更新日を表示する方法（日付操作）
なんてこった！昔の記事を編集して新しい情報を追加したのに、日付が古いまま。
せっかく中身を更新したのに読者に新しい情報だと認識してもらえない。
日付を見ただけでブログから人が離れていってしまうかも？
というわけで、投稿日の代わりに更新日を表示させましょう！
この記事では投稿日や更新日を表示したり非表示にしたりする方法を解説していきます。
スタイルシートを用いて、とても簡単に表示・非表示を切り替えることができますので
更新日を表示させたい方は、ぜひ参考にしてみてください。
https://gameusers.org/dev/blog/wordpress-datetime/ WordPressのサイドバーを固定しよう ? スクロールに追従させる
アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/ec-wordpress-fixed-sidebar.jpg
文字数の多い記事を書くと、サイドバーよりも記事が大幅に長くなることってよくありますよね。
ブラウザでその記事を表示すると、サイドバーの部分になにもない空間が生まれてしまいます。
記事を読み終わった時に、サイドバーのメニューから他の記事も読んでもらいたいけど、
読者がサイドバーをチェックするには
わざわざスクロールを行ってページの上まで戻ってもらわなければなりません。
これはちょっと気が利いてないですよね。ページの回遊率も下がってしまいます。
だからサイドバーの位置を固定しましょう。スクロールに追従させれば
常にメニューが表示されるようになって、他の記事も読んでもらいやすくなります。
この記事ではプラグインを利用してサイドバーを固定する方法と
スタイルシートを利用して固定する方法の2つを解説しています。
完成品の動画
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/wordpress-fixed-sidebar.mp4
記事
https://gameusers.org/dev/blog/wordpress-fixed-sidebar/ WordPress ページトップに戻るボタンをつけよう ? WPFront Scroll Top
アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/ec-wpfront-scroll-top.jpg
スクロールが非常に長くて、上まで戻るのが大変！
ブログトップはもちろん、文字数の多い記事や
カテゴリー、タグページなどでもそうなりがちですよね。
読者に優しいブログにするために、ワンクリックでページトップに戻るボタンをつけましょう。
この記事では、ページトップに戻るボタンをつけられるプラグインについて詳しく解説しています。
完成品の動画
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/wpfront-scroll-top.mp4
記事
https://gameusers.org/dev/blog/wpfront-scroll-top/ WordPress ページID・記事ID・pidの取得方法
アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/ec-wordpress-pid.jpg
WordPress のプラグインを設定していると、pid という設定項目が出てくることがあります。
これは ページ ID という各記事ごとに割り振られている固有の ID を入力する項目です。
ページ ID は記事や固有ページを作成した際に自動で設定されます。
この記事ではページ ID の取得方法をスクリーンショット付きで解説していますので、
必要な方は参考にしてください。
記事
https://gameusers.org/dev/blog/wordpress-pid/ WordPress 記事にソースコードを埋め込むテクニック＆プラグイン紹介
アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/ec-wordpress-e-source-code.jpg
解説系の記事を書いていると、HTML のタグや、JavaScript、スタイルシートなどの
ソースコードを埋め込んで紹介したくなるときがあります。
この記事ではそんな時に使える、簡単にコードを貼れるタグ
ウェブサービス、おすすめのプラグインを紹介していきます。
記事
https://gameusers.org/dev/blog/wordpress-embed-source-code/ Game Users Share Buttons v1.2.1 更新情報
WordPress のプラグインで利用した際に、Top（記事の上） と
Bottom（記事の下）に指定したシェアボタンの詳細設定を行えるようにしました。
Top & Bottom 詳細設定
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/gusb-v1.2.1-1.png
シェアボタンを表示するページを指定できます。
トップページ、個別投稿ページ、固定ページ、アーカイブページ
それぞれ表示したい場所をチェックして保存してください。
トップページやアーカイブページは通常、記事が一覧で表示されます。
そしてそれぞれの記事部分にシェアボタンが表示されるのですが
各記事のシェア数を個別に取得しているわけではないので
実質トップページならトップページのシェア数が表示されているだけです
（複数のシェアボタンに同じシェア数が表示されています）
そのため、一覧ページでは記事ごとにシェアボタンを
表示する意味はないのではないかと考え、トップページやアーカイブページなどでは
シェアボタンを表示しない設定を行えるようにしました。
またこれまでは余白設定で記事とシェアボタンの間隔を調整していましたが
画像の余白欄で、Top と Bottom のシェアボタンの間隔を個別に設定できるようにしました。
今後はこちらで余白を設定していただけるとありがたいです。 簡単に貼り付けられる Code を表示
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/gusb-v1.2.1-2.png
編集タブに表示されているシェアボタンを簡単に貼り付けられるコードを表示するようにしました。
Code ボタンを押すとテキストエリアが開いてコードが表示されます。
記事の上部・下部以外に貼り付けたい場合は
テキストエリアに表示されているコードを利用してください。
貼り付けるコードが変更されました
これは大きな変更なのですが、シェアボタンを貼り付けるためのコードを変更しました。
変更前
<div id="game-users-share-buttons" data-theme="gameusers1-olxdmwzh"></div>
変更後
<div data-game-users-share-buttons="gameusers1-olxdmwzh"></div>
HTML の仕様では、同じ id が複数存在しているのは間違いということを知り、修正を行いました。
今後は id ではなく、data 属性を利用して、Game Users Share Buttons の表示を行います。
コードを貼り付けて利用している方がおられましたら
お手数ですがシェアボタンを再ダウンロードし、貼り付けコードの変更を行ってください。 Feedly のシェアが行えなくなっていた問題を修正
Feedly の仕様が変更されたようで、シェアが正常に行えなくなっていましたが
v.1.2.1 で修正を行いました。
記事
https://gameusers.org/dev/blog/game-users-share-buttons-v1-2-1/ WordPress カテゴリー別に人気記事ランキングを表示するプラグイン − WPP Plus Widget
アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/ec-wpp-plus-widget-popular.jpg
当ブログでサイドバー（スマホの場合はページ下部）に表示している
アイキャッチ画像（サムネイル）付きの人気記事ランキングと新着記事を表示する方法を紹介していきます。
プラグインをインストールして、コードをコピペするだけで
このブログと同じランキングを利用することができるようになります。
HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。
この記事では、カスタマイズ方法についても解説していきますので
ぜひ参考にしながらチャレンジしてみてください。
記事
https://gameusers.org/dev/blog/wpp-plus-widget-popular/ WordPress カテゴリー別に新着記事を表示するプラグイン − WPP Plus Widget
アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/ec-wpp-plus-widget-new.png
検索サイトからのユーザーが目的の記事を読んだ後、
他の記事も読んでくれたら嬉しいですよね。
そういう考えで「最近の投稿」をサイドバーに掲載している方は多いと思います。
ですが、ここで自分のブログについて考えてみてください。
検索サイトから来てくれた方が必要としている記事が「最近の投稿」にしっかりと並んでいると思いますか？
テーマをひとつに絞って書かれてるブログの場合は問題ないと思います。
ただ雑多な内容になってしまっているブログの場合は
アクセスしてくれた方が求める記事へのリンクを的確に提供できているとは言えないのではないでしょうか。
記事
https://gameusers.org/dev/blog/wpp-plus-widget-new/ WordPressの画像をモーダルウィンドウで表示しよう！
アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/ec-wordpress-modal-window.jpg
WordPress の記事に追加した画像をクリック（タップ）すると、
ブラウザに画像が読み込まれて大きく表示されますよね？
その際、画像をクリックする → ブラウザに画像が読み込まれる
→ 元のページに戻るという経緯をたどりますが、元のページに戻った時に
再度ページの読み込みが発生するので、ページの表示に時間がかかってしまいます。
パソコンからのアクセスの場合は回線が速いので、あまり気になりませんが
スマートフォンからアクセスしたときに、再度ページを読み込むと
時間がかかるので読者にストレスを与えることになってしまいます。
そこでおすすめしたいのが、モーダルウィンドウでの画像表示です。
記事
https://gameusers.org/dev/blog/wordpress-modal-window/ やりすぎ防犯パトロール、特定人物を尾行監視 2009年3月19日19時7分配信 ツカサネット新聞
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci
この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです
掻い摘んで説明すると
・創価学会は、町内会や老人会、ＰＴＡ、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
９０年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた
・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった
・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
防パトに尾行や監視、付き纏いをさせるようになった
・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった
・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた（防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官）
※これに加えて防犯要員が同様のお願いをして回る
・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った
つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕
詳細は下記スレをご覧下さい
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/ 結構めんどくさい記事だったのですが、シェアボタンにも関係するので頑張って書きました。
All in One SEO Packを使ってる方は、よかったら参考にしてください。
WordPress ? All in One SEO Packの使い方＆設定を徹底解説！翻訳付き
https://gameusers.org/dev/blog/all-in-one-seo-pack/
WordPress ? All in One SEO Pack ? XMLサイトマップの設定方法
https://gameusers.org/dev/blog/all-in-one-seo-pack-xml-sitemap/
WordPress ? All in One SEO Pack ? ソーシャルメディアの設定方法
https://gameusers.org/dev/blog/all-in-one-seo-pack-social-media/ シェアボタンにウィジェット機能を追加しました
サイドバーに表示できるのでシェアボタンが常に目に入るようになります
Game Users Share Buttons v1.3.0 更新情報
ウィジェットを追加しました。ウィジェットを利用すると
サイドバーにシェアボタンを表示できるようになります。
また編集タブのTop設定・Bottom設定で
添付ファイルページにシェアボタンを表示するか表示しないかの設定を行えるようにしました。
記事
https://gameusers.org/dev/blog/game-users-share-buttons-v1-3-0/ 参加ありがとうございました。
未来のプログラム環境を感じられました！ プログラム配信 - 本を読みながらNode.jsを勉強します
プログラム配信を行っています。
Teletype for Atom というリアルタイムのコラボレーションツールを利用して
勉強・開発を行っていくので、よかったら見てみてください。
Node.jsに詳しい方おられましたら教えてください。
https://www.youtube.com/channel/UCGmS-B707Sqa19BXRn02JIw/live
Teletype の使い方はこちらの記事で解説しています。
この記事は配信中のみ見れるようにしています。
https://gameusers.org/dev/blog/live/ プログラム配信中。
Node.js の Express で Hello Worldを表示したところから勉強を再開します。
今日はもっとスピードを上げて進めていきたい。
https://www.youtube.com/channel/UCGmS-B707Sqa19BXRn02JIw/live
Teletype for Atom の使い方はこちらの記事で解説しています。
この記事は配信中のみ見れるようにしています。
https://gameusers.org/dev/blog/live/
Teletype 気軽に参加してください。
portal ID: a06d1a7b-41e8-4e70-af4f-0ea4f2f92e99 Dockerってすごくない？
Game Users を Node.js で書き直したいので、本を読みながら Node.js の勉強をし始めました。
https://www.amazon.co.jp/dp/B077ZY61ZL/
この本を読みながらコードを書きつつ進めていたのですが
MongoDB の導入部分で詰まってしまいました。
これまでは XAMPP や Node.js などの Windows 用インストーラーを利用して
開発環境を簡単に構築していたのですが
MongoDB は Windows の設定がややこしそうなので
ここらへんで一度、今後の環境構築について見直すべきではないかと考え
新たな道を模索することにしました。
比較的、新しい技術や機能を使おうとしたときに、Windows はやっぱり不便なんですよね。
Mac を使っているプログラマーが多い理由が理解できました。
そこで勉強しようと思ったのが、なにかと話題になっている Docker。
ネットでプログラム関連の記事を調べていると
あちこちで目につくので名前だけは知っていたのですが
開発環境構築に便利だと聞いて手を出してみました。
とりあえず Docker Toolbox を利用して
ローカル環境で Node.js の Hello World ページが表示できるところまでは行けました。 本当に初心者レベルなのですが、触ってみて感じたのは
Docker（コンテナ技術）はすごいということです。
なにがすごいのかというと、例えば Node.js の Docker イメージ（コンテナを作るための元）が
オフィシャルから提供されており、それを簡単なコマンドで導入することができるのです。
WordPress や各種データベースも公式からイメージが提供されているので
それを元にして、わずか数行のコマンドで開発環境を構築することができます。
これがやばい！Docker を利用すれば本当に簡単に開発環境が作れるのです。
Docker はバックエンド臭が強くて（解説サイトは難解な専門用語だらけ！）
導入障壁が高いように思われますが
ローカルに開発環境を作るだけなら、そこまで難しいものではないです。
黒い画面に恐怖を感じる人は触りたいと思えないかもしれませんが
そういう人にこそ Docker をお勧めしたいですね。
最初に Docker についての学習コストを支払う必要はありますが
昔ながらの方法で手動で開発環境を構築していくよりも
Docker を利用した方が、のちのち楽になるのではないかと感じています。
https://www.amazon.co.jp/dp/B01ID3FE60/
自分はこの本を読みながら（値段が高いので Kindle Unlimited で読むことをオススメします）
1週間くらいで、とりあえず使うことはできるようになりました。
そのくらいのコストで、今後の開発環境構築の手間と憂いが除かれるなら
安いものではないかと思います。
具体性のないぼんやりした内容なので、いまいち良さが伝わってこないかもしれませんが
もうちょっと使いこなせるようになったら
雑魚プログラマー視点からの Docker の利点をまとめた記事を書いてみようと思います。 Windows10なら、WSL のUbuntu で、MongoDB は出来ないのか？
ただし、WSLでは、Dockerは使えないけど Windows Subsystem for Linuxなんてあるんですね
検索して初めて知りました
自分はDocker Toolboxを使ったので
同時にVirtualBoxもインストールされました
知ってたらDockerを覚えなかったかもしれないですね
でもDockerを使えるようになってよかったと思ってます
慣れたらどんな環境でも簡単に作れるようになるかも？しれないので PCのディスプレイが壊れていたので、プログラム配信がしばらくできていませんでした。
Node.jsの勉強中です。MongoDBを使うところから再開します。
今日からまたがんばります！
Teletype for Atom の使い方はこちらの記事で解説しています。
この記事は配信中のみ見れるようにしています。
https://gameusers.org/dev/blog/live/
Teletype 参加者募集中
portal ID: 3a69b9ec-e1a7-4c15-8459-d96c3ea98c58 プログラム配信中。
Node.js&ExpressでMongoDBにデータの挿入に成功しました。
次は挿入したデータを表示するところからです。
Teletype for Atom の使い方はこちらの記事で解説しています。
この記事は配信中のみ見れるようにしています。
https://gameusers.org/dev/blog/live/
Teletype 参加者募集中
portal ID: f88f92c1-0f8c-40a5-a377-c9df3481f932
配信URL
https://www.youtube.com/channel/UCGmS-B707Sqa19BXRn02JIw/live Node の本がある。
Node.js超入門、掌田津耶乃、2017
YouTube に、外人の動画もある
Node.js & Express From Scratch [Part 1] - Intro & Environment
https://www.youtube.com/watch?v=k_0ZzvHbNBQ 良さそうな本だったけどお金がないので読めない…。
Visual Studio Code を使おうという項目があったので気になりました。
自分はAtomを使ってるんですが、VSCにもコード共有機能があるようなないような話なので
ちょっと気になっています。
ドットインストールみたいにYouTubeにも解説動画があるんですね。
英語なので理解に時間がかかりそうですが。
良い情報をありがとうございます！ プログラム配信中。
Node.jsでMongoDBのデータを挿入＆表示することができました。
今日は画像アップロード機能を実装する項目からです。
Teletype 気軽に参加してください。
portal ID: 0a1c7b4e-5d1e-4ee4-bad9-17e0c341490f
Teletype for Atom の使い方はこちらの記事で解説しています。
この記事は配信中のみ見れるようにしています。
https://gameusers.org/dev/blog/live/
配信URL
https://www.youtube.com/channel/UCGmS-B707Sqa19BXRn02JIw/live 再起動したので portal IDが変わりました
fdbe5d72-2a56-442e-8942-0f709d4caf01 プログラム配信 - Node.js勉強、Passport（ログイン用パッケージ）の使い方
Teletype for Atomの利用をやめて、AWS Cloud9で開発することにしました。
参加者各自がAWSのアカウントを作らないといけないのかと思ったら
こっち側で用意するだけでいいみたいです
ブラウザだけあれば開発に参加できます
ブログで開発について詳しく解説しています。
https://gameusers.org/dev/blog/live/
Cloud9 IDEのページにアクセスするとログイン画面が出てくるので
この情報を入力してください
アカウントID：956477059000
ユーザー名（どれかひとつ）：guest-1, guest-2, guest-3, guest-4, guest-5
パスワード：Password12345
Cloud9 IDE
https://us-west-2.console.aws.amazon.com/cloud9/ide/592e5c99fbf1446d803867cf6100218d
開発中のウェブサイト（リアルタイムでコードが反映されます）
https://592e5c99fbf1446d803867cf6100218d.vfs.cloud9.us-west-2.amazonaws.com/
Mongo Express（Basic認証が表示されますが未入力で入れます）
https://592e5c99fbf1446d803867cf6100218d.vfs.cloud9.us-west-2.amazonaws.com:8081/ プログラム配信 - Node.js勉強、第二部開始
PCが壊れそうになったので
パーツを買って新しいPCに組み直しました。
お金がないのでRyzen 2200Gという微妙なCPUになりましたが
OSをSSDに載せ替えたのもあって非常に快適です。
Passport（ログイン機能）を簡単に理解できました。
正常に認証ができなくて一日を潰してしまいましたが
協力してくれた方のおかげで問題が解決しました
フォームのタグにこれがついているとダメなようです
enctype="multipart/form-data"
このせいでだいぶ時間を無駄にしてしまいましたが
とりあえず原因が特定できてよかったです
今日は2冊目の本を利用して勉強を進めていこうと思います。
https://www.amazon.co.jp/dp/B077RGMSHB/
Cloud9をグーグルの無料サーバー上に設置していますが
参加人数が増えるとすぐにCPU使用率が100%を超えてしまいます
あまりにも重たいのでサーバーをスペックアップしました。
f1-micro（vCPU x 1、メモリ 0.6 GB）
↓
g1-small（vCPU x 1、メモリ 1.7 GB）
無料で使えるクレジットが30000円分あるので、しばらくは大丈夫そうです。 プログラム配信 - Node.js勉強、Passport（ログイン用パッケージ）の使い方
配信URL
https://www.youtube.com/channel/UCGmS-B707Sqa19BXRn02JIw/live
Cloud9（IDE） を VPS 上に設定して、ブラウザさえあれば、みんなで開発できる環境を作ってみました。
アカウントID：956477059000
ユーザー名（どれかひとつ）：guest-1, guest-2
パスワード：Password12345
ゲストアカウントでログインすると以下のページが見れるようになります。
Cloud9 IDE
https://us-west-2.console.aws.amazon.com/cloud9/ide/df44294c8853471b8ddd609c09af06f3
開発中のウェブサイト（リアルタイムでコードが反映されます）
https://df44294c8853471b8ddd609c09af06f3.vfs.cloud9.us-west-2.amazonaws.com/
Mongo Express（Basic認証が表示されますが空欄で入れます）
https://df44294c8853471b8ddd609c09af06f3.vfs.cloud9.us-west-2.amazonaws.com:8081/
ログアウトするときはブラウザを閉じるだけでOKです。
ゴミ箱マークは押さないようにしてください。
ブログで開発について詳しく解説しています。
https://gameusers.org/dev/blog/live/ 2冊目の本を進めています。Express アプリケーションと CSS という項目から勉強を続けます。
配信URL
>>127 現在の開発環境 ? 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 を採用するメリットは大きいのではないかと感じています。 AWS Cloud9 の問題点
使ってみて感じたのですが、いろいろな問題もあります。
・参加人数が 8 人まで
なんでこんな仕様なんだと言いたいところなんですが
自分を入れて計 8 人までしか参加できません。
サーバーの能力依存で参加人数を決めさせてくれればいいのに
最初から IDE 側で人数を制限してるので
どれだけサーバーのリソースに余裕があっても無駄です。
AWS Cloud9 は AWS の管理画面でアカウントを発行して
そのアカウントで IDE に参加してもらう形になっています。
Game Users の開発では、いろいろな人に個人用のアカウントを発行して
時間のあるときに気軽に参加してもらえたらなという思いを持っていたのですが
8 人制限のせいでそれができなくなりました。
今は guest-1〜2、master-1〜5 というアカウントを用意して
そのアカウントにログインして参加してもらう形になっています。
個人用のアカウントの場合、自分を除くと 7 人までしかアカウントを発行できませんが
ひとつのアカウントを複数人で使ってもらう場合は
人数制限が緩和されるのでそういう形にしています。
ただこれだと誰が参加してくれているのかわかりにくく、とても不便です。
そもそも Cloud9 は不特定多数の人が開発に参加するプロジェクトを想定していないのでしょうが
GitHub を経由した push だ pull だと面倒くさい
現在の共同開発環境を変えられるポテンシャルを秘めているので
早急になんとかして欲しいところです。 ・IDE の出来が今ひとつ
Atom や Visual Studio Code（触ったことがないのでわからない）は
なんだかんだと言って優秀なんだと思います。
様々な機能が最初から提供されていたり
プラグインなどで後から追加することができたり
個人的に使いやすい設定を細かく突き詰めることができたり
当然のようにいろいろできていたことが、Cloud9 ではできなくなりました。
ブラウザだけで開発ができる・コラボレーションが手軽に行える
というメリットは大きいものの、使いづらい・必要な機能がない
といったデメリットも大きいので
現状、上記のメリットを求めている人以外には勧めづらい環境になっています。
アマゾンが買収したので今後の発展に期待したいところですが
今のところは正直なんとも言えないクオリティです。 ・ネットに情報がない
本当に辛いところなんですが、ネットに情報がありません。
なんでもそこそこの規模になってくると
日本語の情報はなくても英語の情報があったりするものですが
Cloud9 はその域にも達していません。
例えば今、ESLint で “extends”: “airbnb” が動かない問題を抱えているのですが
調べても情報がなくて困っています。
このプラグインを入れるといいよと英語で書いている情報はひとつ発見したのですが
そのとおりにやっても動かず。
それ以外情報がないので、どうにもならない状態に陥っています。
アマゾンのサポートも利用できるようなのですが
技術的なサポートは有料になっているみたいなので
お金持ちや企業でないとサポートを受けられません。
参加者募集！
Cloud9 の至らなさをいろいろと語ってみましたが
Game Users の開発には手軽なコラボレーション機能が必要なので
利用しないという選択肢はありません。
ゲームが好きな開発者の方おられましたら、ぜひ一緒に開発しましょう。
参加したとして権利や金銭的な問題はどうなるんだということについて
文章にきっちり残していないので
その辺についてもこのブログで記事にしていかないといけないなと思っております。
YouTube でプログラム配信をしながら開発しているので
もし少しでも興味があったら覗いてみてください。
配信中はこのブログのトップページにも配信が見れる記事が掲載されるようになっていますのでぜひ！ Node.js の使い方を学びました。
いよいよ Game Users を書き直す作業を始めようと思います。
それに当たって調べないといけないことがたくさんあります。
React は状態管理に Redux を使用していたのですが
コードを書く量が多く、学習コストも高いため
同じ状態管理機能を持った MobXというライブラリに興味を持っています。
こちらもいろいろ調べてみようと思います。
配信URL
>>127 プログラム配信 - Next.jsを試します！
昨日、MobX（Reactの状態管理ライブラリ）について調べていたら
Next.jsというフレームワークを発見しました。
これを使うとサーバーサイドレンダリングや、Code Splitting（分割して初期ロードを早くする）
ブラウザの自動更新などの機能が使えるようになるみたいです。
非常に面白そうに感じたので、今日はそれを試してみようと思います。
MobXやMaterial UIなどもついでに触れたらいいなと思っています。
配信＆IDE URL
>>128 Next.js を試してみたところ、すごく優秀だったので採用することを決めました。
サーバーサイドレンダリングの機能や、
コード Splitting をデフォルトで行ってくれるのは非常に便利です。
ただすべての機能を提供してくれるわけではないので
結局、自分で Express 用コードを書かないといけない部分も多くあるのですが。
それと Next.js はデータベースへのアクセスを API で行うことを推奨しているようです。
そこそこの規模のサイトになると、そういった構成が増えてくるのかもしれないのですが
自分は小規模なサイトしか作ったことがないので、初めての経験でちょっと不安です。 上のは制作物のURLです。
変更になりました。
配信＆IDE URL
>>128 複数人の開発者で同時に各ファイルを編集した場合
誰かがエラーを出すと他の開発者にもエラーが出て
開発がスムーズに進まないという問題が発覚しました。
同じ環境でトランスパイルが行われるわけですから
考えてみれば当然なのですが、今まで気づきませんでした。
同時に違うファイルを触れないというのは結構致命的な問題です。
そこで Cloud9 の環境を複数用意して
それぞれの開発者が別のファイルを気軽に触れるようにしてみました。
マスターアカウントでログインできる方は、そちらの環境でも開発が行えます。
git clone で複製しているだけなので、細かいことは気にせずいろいろ試してみてください。
詳しくはこちら
https://gameusers.org/dev/blog/live/ 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 ■ このスレッドは過去ログ倉庫に格納されています
