【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/

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

99あづみ ◆WYiR3RzL3U 2018/01/18(木) 17:29:11.74ID:???
簡単に貼り付けられる 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 の表示を行います。

コードを貼り付けて利用している方がおられましたら
お手数ですがシェアボタンを再ダウンロードし、貼り付けコードの変更を行ってください。

100あづみ ◆WYiR3RzL3U 2018/01/18(木) 17:30:00.81ID:UUOw2NCC
Feedly のシェアが行えなくなっていた問題を修正

Feedly の仕様が変更されたようで、シェアが正常に行えなくなっていましたが
v.1.2.1 で修正を行いました。


記事
https://gameusers.org/dev/blog/game-users-share-buttons-v1-2-1/

101あづみ ◆WYiR3RzL3U 2018/01/19(金) 21:25:09.27ID:og0B/uTs
WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/ec-wordpress-eye-catching.png

アイキャッチ画像とは各記事の看板画像のことです。
WordPress では、個別の記事ページだけでなく、記事が一覧で表示されるときにも利用されています。

記事
https://gameusers.org/dev/blog/wordpress-eye-catching-image/

102あづみ ◆WYiR3RzL3U 2018/01/23(火) 16:32:23.70ID:9Ax8QTMK
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/

103あづみ ◆WYiR3RzL3U 2018/01/24(水) 18:34:08.50ID:FhvGf0Tt
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/

104あづみ ◆WYiR3RzL3U 2018/01/30(火) 18:19:43.29ID:oM3Kg40K
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/

105Name_Not_Found2018/01/31(水) 10:35:29.31ID:???
やりすぎ防犯パトロール、特定人物を尾行監視 2009年3月19日19時7分配信 ツカサネット新聞
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci

この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです

掻い摘んで説明すると

・創価学会は、町内会や老人会、PTA、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
 90年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた

・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
 防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった

・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
 創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
 防パトに尾行や監視、付き纏いをさせるようになった

・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
 不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった

・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
 私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
 防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた(防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官)
 ※これに加えて防犯要員が同様のお願いをして回る

・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った

つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕

詳細は下記スレをご覧下さい
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/

106あづみ ◆WYiR3RzL3U 2018/02/03(土) 17:17:51.66ID:iOCvlFCm
結構めんどくさい記事だったのですが、シェアボタンにも関係するので頑張って書きました。
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/

107あづみ ◆WYiR3RzL3U 2018/02/16(金) 18:33:58.25ID:ybdPmUwO
ついでに投稿ページの設定方法も解説しておきました


WordPress ? All in One SEO Pack ? 投稿ページの設定方法

アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/02/ec-aiosp-post-settings.jpg

All in One SEO Pack の基本的な設定が終わったら、次は実際に投稿するときの設定について学んでいきましょう。

記事
https://gameusers.org/dev/blog/all-in-one-seo-pack-post-settings/

108あづみ ◆WYiR3RzL3U 2018/02/17(土) 17:31:10.29ID:7dIwuVqU
シェアボタンにウィジェット機能を追加しました
サイドバーに表示できるのでシェアボタンが常に目に入るようになります


Game Users Share Buttons v1.3.0 更新情報

ウィジェットを追加しました。ウィジェットを利用すると
サイドバーにシェアボタンを表示できるようになります。

また編集タブのTop設定・Bottom設定で
添付ファイルページにシェアボタンを表示するか表示しないかの設定を行えるようにしました。

記事
https://gameusers.org/dev/blog/game-users-share-buttons-v1-3-0/

109あづみ ◆WYiR3RzL3U 2018/02/23(金) 18:03:37.82ID:P6576PNO
プログラム配信中です。Atom使ってるプログラマーの方来てください。Teletypeを試したいのです。

https://gaming.youtube.com/channel/UCGmS-B707Sqa19BXRn02JIw/live

110あづみ ◆WYiR3RzL3U 2018/02/23(金) 19:30:51.45ID:???
参加ありがとうございました。
未来のプログラム環境を感じられました!

111あづみ ◆WYiR3RzL3U 2018/02/26(月) 16:41:24.77ID:UmjbGJ8X
プログラム配信 - 本を読みながらNode.jsを勉強します

プログラム配信を行っています。
Teletype for Atom というリアルタイムのコラボレーションツールを利用して
勉強・開発を行っていくので、よかったら見てみてください。
Node.jsに詳しい方おられましたら教えてください。

https://www.youtube.com/channel/UCGmS-B707Sqa19BXRn02JIw/live

Teletype の使い方はこちらの記事で解説しています。
この記事は配信中のみ見れるようにしています。

https://gameusers.org/dev/blog/live/

112あづみ ◆WYiR3RzL3U 2018/02/28(水) 14:39:15.92ID:wAmdcwsd
プログラム配信中。
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

113あづみ ◆WYiR3RzL3U 2018/03/07(水) 18:47:46.14ID:???
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 ページが表示できるところまでは行けました。

114あづみ ◆WYiR3RzL3U 2018/03/07(水) 18:49:33.76ID:xkWIc9k3
本当に初心者レベルなのですが、触ってみて感じたのは
Docker(コンテナ技術)はすごいということです。
なにがすごいのかというと、例えば Node.js の Docker イメージ(コンテナを作るための元)が
オフィシャルから提供されており、それを簡単なコマンドで導入することができるのです。
WordPress や各種データベースも公式からイメージが提供されているので
それを元にして、わずか数行のコマンドで開発環境を構築することができます。

これがやばい!Docker を利用すれば本当に簡単に開発環境が作れるのです。
Docker はバックエンド臭が強くて(解説サイトは難解な専門用語だらけ!)
導入障壁が高いように思われますが
ローカルに開発環境を作るだけなら、そこまで難しいものではないです。

黒い画面に恐怖を感じる人は触りたいと思えないかもしれませんが
そういう人にこそ Docker をお勧めしたいですね。
最初に Docker についての学習コストを支払う必要はありますが
昔ながらの方法で手動で開発環境を構築していくよりも
Docker を利用した方が、のちのち楽になるのではないかと感じています。

https://www.amazon.co.jp/dp/B01ID3FE60/

自分はこの本を読みながら(値段が高いので Kindle Unlimited で読むことをオススメします)
1週間くらいで、とりあえず使うことはできるようになりました。
そのくらいのコストで、今後の開発環境構築の手間と憂いが除かれるなら
安いものではないかと思います。

具体性のないぼんやりした内容なので、いまいち良さが伝わってこないかもしれませんが
もうちょっと使いこなせるようになったら
雑魚プログラマー視点からの Docker の利点をまとめた記事を書いてみようと思います。

115Name_Not_Found2018/03/08(木) 07:31:37.33ID:???
Windows10なら、WSL のUbuntu で、MongoDB は出来ないのか?

ただし、WSLでは、Dockerは使えないけど

116あづみ ◆WYiR3RzL3U 2018/03/09(金) 15:12:28.55ID:???
Windows Subsystem for Linuxなんてあるんですね
検索して初めて知りました

自分はDocker Toolboxを使ったので
同時にVirtualBoxもインストールされました
知ってたらDockerを覚えなかったかもしれないですね

でもDockerを使えるようになってよかったと思ってます
慣れたらどんな環境でも簡単に作れるようになるかも?しれないので

117あづみ ◆WYiR3RzL3U 2018/03/12(月) 16:51:33.12ID:yZ89TkPv
PCのディスプレイが壊れていたので、プログラム配信がしばらくできていませんでした。
Node.jsの勉強中です。MongoDBを使うところから再開します。
今日からまたがんばります!

Teletype for Atom の使い方はこちらの記事で解説しています。
この記事は配信中のみ見れるようにしています。
https://gameusers.org/dev/blog/live/

Teletype 参加者募集中
portal ID: 3a69b9ec-e1a7-4c15-8459-d96c3ea98c58

118あづみ ◆WYiR3RzL3U 2018/03/12(月) 16:54:22.94ID:yZ89TkPv

119あづみ ◆WYiR3RzL3U 2018/03/13(火) 14:54:04.31ID:DrEIrYBA
プログラム配信中。
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

120Name_Not_Found2018/03/15(木) 04:39:38.51ID:???
Node の本がある。
Node.js超入門、掌田津耶乃、2017

YouTube に、外人の動画もある

Node.js & Express From Scratch [Part 1] - Intro & Environment
https://www.youtube.com/watch?v=k_0ZzvHbNBQ

121あづみ ◆WYiR3RzL3U 2018/03/15(木) 14:38:01.76ID:???
良さそうな本だったけどお金がないので読めない…。
Visual Studio Code を使おうという項目があったので気になりました。
自分はAtomを使ってるんですが、VSCにもコード共有機能があるようなないような話なので
ちょっと気になっています。

ドットインストールみたいにYouTubeにも解説動画があるんですね。
英語なので理解に時間がかかりそうですが。
良い情報をありがとうございます!

122あづみ ◆WYiR3RzL3U 2018/03/15(木) 14:52:31.73ID:+oWZmFMR
プログラム配信中。
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

123あづみ ◆WYiR3RzL3U 2018/03/15(木) 16:26:26.68ID:???
再起動したので portal IDが変わりました
fdbe5d72-2a56-442e-8942-0f709d4caf01

124あづみ ◆WYiR3RzL3U 2018/03/20(火) 17:22:48.38ID:tfXj5GMQ
プログラム配信中
Node.jsでPassport(ログイン機能)を実装するところから始めます。

AWS Cloud9で開発しています。
AWSのアカウントを作成して気軽に参加してください。

ブログで開発について詳しく解説しています。
https://gameusers.org/dev/blog/live/

Cloud9 開発ページ
https://us-west-2.console.aws.amazon.com/cloud9/ide/592e5c99fbf1446d803867cf6100218d

開発中のウェブサイト(リアルタイムでコードが反映されます)
https://592e5c99fbf1446d803867cf6100218d.vfs.cloud9.us-west-2.amazonaws.com/

Mongo Express(ID: gameusers Pass: password で入室できます)
https://592e5c99fbf1446d803867cf6100218d.vfs.cloud9.us-west-2.amazonaws.com:8081/

125あづみ ◆WYiR3RzL3U 2018/03/23(金) 15:56:21.57ID:gL3Kbj8A
プログラム配信 - 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/

126あづみ ◆WYiR3RzL3U 2018/04/02(月) 16:17:09.92ID:Vzji5ib4
プログラム配信 - 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円分あるので、しばらくは大丈夫そうです。

127Name_Not_Found2018/04/02(月) 17:11:38.31ID:Vzji5ib4

128あづみ ◆WYiR3RzL3U 2018/04/04(水) 13:08:23.33ID:wHlH4Xig
プログラム配信 - 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/

129あづみ ◆WYiR3RzL3U 2018/04/05(木) 15:13:18.88ID:pVHcjgLv
2冊目の本を進めています。Express アプリケーションと CSS という項目から勉強を続けます。

配信URL
>>127

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

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