【React】Game Usersを一緒に作ろう！【Node.js】
現在、開発者を募集しています。
初心者でも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/
質問・疑問なんでも書き込んでください。
ブログの記事をここにも投稿するので読んでみてね。
これからはもっとオープンにGame Usersの開発を進めていくぞ！
というわけで、WordPressでブログを開設し、GitHubでコードを公開してみました。
GitHub / Game Users Web リポジトリ
https://github.com/gameusers/web
昔から不特定多数の人間が関わる開発への強い興味があって
プログラムを本格的に勉強し始める前から
共同制作・コラボレーションツールのようなものを作りたいという思いがありました。
例えるならGitHubシステムをもっと誰もが簡単に使えるようにした場所・アプリのようなものです。
ただそんな大規模な構想を自分一人で実現させるのは、とても現実的ではないため
いつの日にか実現させたいアイデアとして今は胸に秘めているのみです。
しかし不特定多数での開発への興味は変わらず強く持っており
機会が来ればGame Usersでもぜひやってみたいと思っていたのです。
いずれコードが綺麗にまとまったときに、他の人が参画しやすいような状況が整った時に
そう思いつつ開発を進めていたのですが
悲しいかな開発が進むにつれコードは汚くなり
中身もグチャグチャになっていくのでした（無能！）
このままでは永久にオープンな開発を進める環境が作れないと考え
無理矢理でもいいのでとりあえず公開してみようと思い行動してみました。
フロントはjQueryでSPA（シングルページアプリケーション）という状況になっています。
スキルの低い開発者がjQueryでSPAを作るとどうなるか？
知識のある方ならだいたい予想はつくのではないでしょうか。
pushStateを使ってコンテンツの切り替えを行うコードがページごとに書かれ
状態はあちこちに保存され、自分で書いたコードながら
時間をかけて読み込まないとなにがどうなっているのかわからないという状況に。
このまま無計画に開発を進めていくのは本当にやばい！
というわけで現在の開発でトレンドになっている手法を調べてみたところ
React + Reduxを発見。
ひとつの場所に状態を保存するという概念に心を打たれ
これしかない！と導入を決意しました。
まだ勉強をし始めて半月も経っていませんが
学習が進むにつれ、サーバーサイドも同じ言語で書いたほうが
良くないかという思いが芽生え（FuelPHPはマイナーすぎるし）
React & Node.jsでの開発に手を出そうとしている現状です。
ガラッとシステムを刷新しようとしている段階での
GitHub公開 ＆ 開発者募集。
しかもライセンスはオープンなものではなく
Game Users プロジェクトに帰属すると書かれている。
こんなプロジェクトに参加する人なんているの？
という話を次の記事で書こうと思います。
WEB+DB vol.94 の特集が、Kotlin, Electron
ある一つの作品を作り上げるのが目標なのか？参加型で様々なプロジェクトの進行管理ができるのがウリなのか？これを使ってほしいのか？作ってほしいのか？
GaneUsers構想というのが己の中にはあるらしいが、そこに関する説明がないから何してるのか分からんぞ
Reactって日本では地味な存在だけど
一応、雑誌で特集もされてるんですね
良さ気な技術なので、もっと流行ってもいいと思うんですが
>>5
今、Game Usersというゲーム関係のSNSを作ってて
一緒に作ってくれる人を探してるんです
普通ウェブサイトを作る時は、企業や個人が主体になって作りますが
もっとフリーダムな感じで、ゲームを好きな開発者が
コンテンツを好き勝手に作れるような場所にしたいのです
庭を用意するので、みなさん好きなお花を植えてくださいという感じです
今のところ自分で植えたお花がポツンとひとつ存在しているだけで
庭園として全然面白みがないので、誰か一緒にやりませんかというスレです
ゲーム好きな開発者のみなさんぜひ一緒にやりましょう！
GitHubでソースコードを公開し、開発者募集！を掲げてみましたが
実際に興味持ってくれる人がいるのか？という問題が。
GitHub自体に宣伝効果はなく
プロジェクトを公開するだけで人が大勢集まってくるわけではないので
他で宣伝しつつ地道に頑張るしかありません。
そもそもソースコードを公開してみたものの
ライセンスが配布自由なオープンソース・ライセンスではないので
平等でクリーンなイメージを持たれないと思います。
ただそこは信頼して欲しいとしか言いようがありません。
できる限りWin-Winな関係を目指します。
怪しい詐欺師のような語り口になっていますが
必要な情報をしっかり公開し
どんな人間なのかを理解してもらいやすいように
自分についての記事も掲載していくつもりです。
（一番問題なのは取り分についてですが、そこについても後日記事にします）
公開しているサービスがすでに面白いか
コンセプトに魅力を感じるか、開発者の人間性に興味を持ったか
そのどれかしかないと思う。Game Usersの現状を考えると
サービスを面白いと感じてくれる人は少ないと思うので
コンセプトと人間性についてアピールしていくしかない。
推していきたいのは
「ゲーム好きな開発者が集まってわちゃわちゃする」
というコンセプトですね。
プログラマーはゲーム好きな人が他の職業に比べて多そうなので
このコンセプト自体に興味を持ってくれる人はいると思うのです。
だからそういう人たちに面白そうだなと
感じてもらえるような場所にしなければなりません。
とりあえずはテキストを充実させること
また簡単に参加できるような仕組みを作ることが大事だと思います。
現状は無能プログラマーによって数年かけて書かれた
変なソースコードを読み込んで
全体像を把握するところから始めなければならないので
ヘビーな仕事レベルのボリュームになっております。
まずここをなんとかしないといけない。
Game Usersの開発に参加するには、
Reactが動かせる環境を作らなければならないのですが
これが本当にめんどくさい！！
なにがめんどくさいかと言えば日本語の情報が少ない上に
いろんなものをインストール＆設定しないとまともに動かせない。
具体的に挙げると以下のものが必要になります。
・ Webサーバーソフト：例）Apache
・ パッケージインストール：Node.js (npm)
・ コードチェック：例）ESLint / airbnb
・ Javascript (ES2015)変換：例）webpack / babel
ややこしいのはESLintとwebpackは
独自のコンフィグファイルを作成しないといけないところ。
React自体の学習コストが高いのに
ES2015、ESLint、webpackについても
同時に学ばなければならないのは非常に大変です。
Game Usersの開発に気軽に参加してもらいたいけど
ひとつひとつ検索して情報を仕入れながら導入してもらうというのは
ちょっとハードルが高すぎると思うので
できるだけ簡単に環境を整えてもらえるような
読みながら設定ができる情報を揃えたい。
自分はHello Worldを表示させるレベルから2、3歩進んだ程度のレベルなので
あまり高度な話はできませんが
Reactに興味を持っている人のために
多少はお役に立てるような情報を提供できれば幸いです。
開発環境の作り方について一通り情報を揃えようと思って、
とりあえずXAMPPのインストール、設定
アップデートについての記事を書いてみたけど、めちゃくちゃ大変でした。
ここ何日かコードを書かずにずっとテキストを書いてる感じなんですが
本当に時間があっという間に過ぎていきます。
世の中、役に立つ記事を書いてる人々はその情報を提供するために
すごい時間を費やしてるんだなということに気づかされました。
そもそもなぜXAMPPの導入記事を書く必要があるんだ
という話なんですが、これは開発環境の構築に
自分もXAMPPを使っているからなんです。
Reactに手を出そうとしてるのに、未だにXAMPP使ってるの？
と言われそうですが、手軽さが気に入って
初心者の頃からずっとXAMPPを愛用しております。
レベルの高いプログラマーの方々は
なんとなくMacや仮想環境のLinuxを使ってそうなイメージですが
実際、みなさんはどういう環境で開発をしているんでしょうか。
ずっとXAMPP使ってるような人間はまれなんかな。
開発環境の作り方をまとめてみたので、ぜひ参考にしてください
XAMPP、Node.js、webpack、EditorConfig、Atomの記事もあるよ
開発環境の作り方 ? まとめページ
https://gameusers.org/dev/blog/environment/index
開発環境の作り方についての記事作成は一通り終わり、
今なにをしているかというと、WordPressのソーシャルボタンを作ろうとしております。
プラグインで良さ気なのを探してみたのですが
外国製は、はてなやLineに対応しておらず
日本製のは公式のソーシャルボタンを使ってるので重く（非同期ではない）
どちらもいまいち気に入らなかったのです。
そこでGame Usersで使ってるソーシャルボタンを
WordPress用に改造して独自につけようと思ったのですが
どうせやるなら他の人も使えるようなプラグインとして公開しようと考え
今、勉強しながら作り始めております。
非同期でカウントを表示して
さらにボタンのデザインをいじれるようなものにしたいと考えています。
テーマやテンプレートのような形で
好きなデザインのボタンをアップロードして使うようなイメージ。
実際できるかどうかわからないので構想だけで終わってしまうかもしれませんが
とりあえず頑張って作ってみます。
この前見つけたGitHubについて書かれてる記事でも
node_modulesは載せないようにと書かれてたので
次、編集するときに消しておきます
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/share_buttons.jpg
ソーシャルボタンのサンプルをスタイルシートで作ってみました。
画像のボタンは全部素材サイトで集めたものです。
こんな感じで同じように画像を集めてアップロードするだけで
誰でも自分好みのソーシャルボタンを作れるようにしたいのです。
ただプラグインの設定画面で画像のアップロードが
自由にできるのかわからないのが不安ですね。
もしできなかったら、プラグインフォルダに
最初から画像を含めるしかないので
サンプルのような多様なボタンが作れなくなってしまいます。
自分がデザインセンスのある人間なら
オリジナルの画像をいろいろ提供できるのですが
こればっかりは才能がないのでどうしようもないですね。
でも、もし構想どおりに作れたら
なかなか面白そうなプラグインになりそうな気がします。
最近始めたブログだけだと広がりがありません
1日のアクセスが10くらいしかないんですよ
現在、WordPressのソーシャルボタンのプラグインを作っているのですが、
適用されているテーマのスタイルシートが邪魔をして
思うようなデザインにできないという問題に直面しました。
WordPress ソーシャルボタンサンプル
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-1.jpg
黒猫の周囲を囲むように存在している
この謎の白枠に2時間以上費やすことに！
marginでもなく、paddingでもなく、borderでもない。
自分なりにいろいろ探してみたのですが
原因がまったく特定できず、お手上げ状態になったのですが
ChromeのDeveloper Toolsにスタイルシートの欄があったことを思い出し
開いてみるとそこに答えが書いてありました！
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-2.png
box-shadow…。ほとんど使わないから存在を忘れていました。
便利なことにDeveloper Toolsの画面でチェックボックスを外すと
ブラウザ上のデザインにも変更が加えられます。
他の人が作ったものはなにが適用されているのかわからないので
この機能は非常にありがたいですね。
ChromeのDeveloper Toolsはいろいろ機能がついてそうなので
一回ちゃんと勉強した方がいいかもしれません。
フリーキャット
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-3.jpg
ちなみにこの黒猫はクレジットを表す画像で
Game Usersのトップにリンクが貼ってあります。
ソーシャルボタンを使ってくれた方のブログから
Game Usersにアクセスしてくれる人が増えたらいいなという目論見でつけております。
こういうのってスパム認定されるんでしょうか？
SEOについての知識がないのでちょっと心配です。
WordPressのプラグイン制作、なかなか手ごわいです。
独自の書き方を学ばないといけないので、慣れるまで調べることが非常に多いです。
WordPressはデフォルトでjQueryが読み込まれるのですが、
そのバージョンが1.12.4でとても古いのです。
今後、jQuery依存のライブラリを利用するときに
バージョンの問題で使えないといったことが起こると困るので
最新のものを読み込もうとしたのですが
そのためにはまず古いものを読み込まないという処理をしなければなりません。
https://gist.github.com/az1979/34dc72976ce5c71be38ab9de3c216d4e#file-optionpackage-php
たったそれだけのことでも上記のような感じで
独自の関数をいくつか利用して書かなければならないのです。
これが本当にわけがわからない。
一応、リファレンスも用意されているのですが
どこになんの項目があるのか分かり辛い上に
解説が難解で理解するまでに時間がかかるのです。
プラグインをサクッと完成させてから
Game Usersの開発も進めていこうと思っていたのですが
世の中そんな簡単には行かないもんですね。
作っているうちに追加したい機能も増えてきたので
当初思ってたよりずっと時間がかかってしまうかもしれません。
プラグインで使うデータベースのテーブルを作成するコードは以下になるのですが
これを書いているときに、便利な日時のデフォルト値の設定方法を知りました。
https://gist.github.com/az1979/e5e85e157ace7d506f8b3fd2c9c5d489#file-createdatabasetable-php
datetime_renewal DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP NOT NULL
データベースの日時のデフォルト値をこのように設定しておけば
Updateするだけで自動的に日時が更新されることを知って
ちょっとしたショックを受けました。
今までデータベースを更新するたびに 0000-00-00 00:00:00 形式で
日時を作成してから保存してたのに、あの手間はなんだったんだという。
すごく便利なので、みなさんもぜひ使ってみてください。
追記: 記事を書いてすぐに
これってもしかして新しい機能なんじゃないかと気になって調べてみたところ
MySQL5.6.5からの機能でした。
またMySQLが古い環境だと、DEFAULT CURRENT_TIMESTAMPが
2つあるとエラーが出るようなので、どのみち上に挙げたSQL文は使えません。
公式によるとWordPressの推奨環境は
MySQL 5.6 / MariaDB 10.0以上ですが、MySQL 5.2.4でも動くようです。
プラグインは環境が様々なので、ちゃんと考えてコードを書かないとダメですね。
プラグインの設定画面
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/wp-option-20170414-1.jpg
プラグインの制作は設定画面を表示するところまで来ました。
Bootstrapのタブを利用しています。これから設定画面の中身を作っていきます。
現在の設定画面
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/wp-option-20170420-1.jpg
前の記事から6日も経ってるのに進みが遅い！
なぜ進みが遅くなっているのかというと、途中で方針転換があったためです。
当初はWordPressで使えるプラグインの構想だったのですが
作っていくうちに、どうせなら普通のウェブサイトにも使える方がいいよな？
ということで一部がやり直しになりました。
WordPressはPHPで動いているのですが
PHPでソーシャルボタンを出力する仕様にすると
利用できない環境が出てきてしまうため
Javascriptでコードを出力する仕様にしたのです。
数日かけて書いたPHPのコードを書き直す悲しさ
モチベーションの上がらなさでこうなってしまいました。
毎回、自分はこうなってしまうんだよなぁ。
自分なりにしっかり構想を練っているつもりなんですが
作っていくうちに構想がどんどん膨らんでいき
同じ部分を何度も書き直して無駄に時間が費やされるのです。
これ客だったら最悪なクライアントですね。
途中で方針転換を繰り返して制作者に余計な作業を増やすという。
他人を巻き込んでこんなことをしていると非難轟々になりそうなので
いい加減学習したいところなのですが
妄想だけは無駄に膨らむタイプなので、この病の治療は無理かもしれません。
いつの日か、誰かに作業を依頼できる身分になれたら
最初から仕様変更ありの契約でお金を上積みしとかないとダメですね。
ブログの更新が疎かになってしまいました。記事を書くのって結構脳を使うので、
制作作業後にやるのは辛いものがある。…という言い訳でしばらく放置してしまいました。
せっかくブログを作ったんだから、もうちょっと真面目に更新しないと。
2017/5/12 進捗状況
https://gameusers.org/dev/blog/wp-content/uploads/2017/05/wp-option-20170512-1.png
画像を見てもらうとわかりますが、エディットする項目が非常に多くなりました。
ずらーっと縦に長いページに羅列されるフォームの数々。
この値も編集できるようにした方がいいよな
と思いつくまま追加していくとこんな感じになりました。
細かく編集できるのはいいのですが
ユーザーの方にめんどくさそうに思われるんじゃないかと、ちょっと心配しております。
進捗状況的には全作業の1/3くらいは終わったかな？というところです。
1ヶ月かけて1/3は、さすがに時間がかかりすぎに思いますが
この後、フキダシを使わないバージョン（画像にシェア数を重ねるタイプ）と
ソーシャルボタンの公式ページ、課金システムを作るつもりなので
まだまだ作業が終わりそうにありません。
課金システムについて説明すると
ソーシャルボタンを使うとネコの画像が表示されてリンクが貼られるのですが
そのリンクを外したい方は課金してくださいというシステムにしようと思っております。
Web制作の現場ではWordPressの案件が結構多いようなので
そういう形でWordPressを商用利用しているユーザーの方が
有料プランを利用してくれるとありがたいな、という思惑で作っています。
WordPressのテーマを作って収益あげてる人もいるみたいなので
うまくいってくれると嬉しいのですが。
https://gameusers.org/dev/blog/notes/20170522-1
記事が長いので興味ある人はブログで読んでね
Kindle Unlimitedで読んだブログ集客本の内容をまとめてみました
すでにソーシャルボタンを出力するコード自体はほぼ完成しており
しばらくソーシャルボタンを作成するページを作っていたのですが
なんと途中でまたもコードの大幅書き直しが発生しました。
画像はWordPressのプラグイン画面なのですが
これはソーシャルボタンを作成するページで
ここで画像をアップロードして設定を行うと
WordPress上でソーシャルボタンが表示されるという仕組みになっています。
普通のサイトでも利用できるように
ソーシャルボタンの作成が行えるページを公式ページとしても
公開する予定なのですが
このページをなにも考えずjQueryで作っていたのです。
WordPressはjQueryが利用されているので、深く考えずにそのまま。
公式ページのコードは共通化しようと考えていたので
当然、Game Users内に設置する公式ページもjQueryになるわけです。
jQueryベースはもうやめて
Reactをメインにして行こうという高い目標を立てたにも関わらず
なぜ未だに古いシステムで作っているんだ？
Game UsersをReactで書き直そうとしていた高い志はどこへ行ったんだ？
という疑念が生じ、jQueryで書いていたソーシャルボタン作成ページを
Reactで書き直すことになりました。
結構、進んでいた段階での書き直し作業。
しかも実際、進めてみるとReactの勝手がわからず
サクサクというわけにも行かず、どんどん時間が過ぎていきます。
本当になにやってんだろうなぁ。
当初すべてPHPで書いていたのをJavascriptに書き直した件も合わせると
2回目の書き直し作業。さすがにアホすぎて怖くなってくる！
日本語でReactについて述べられている記事はまだまだ少なく
英文サイトを読む時間も多い現状ですが
その現状で微実際にReactを使ってアプリケーションを作ってみて感じたことを
ありのままに語ってみようと思います。
現在、日本人でReactを触っている人たちはアーリーアダプター（初期採用者）層に当たるためか
レベルの高い人が多いです。
記事に含まれる専門用語の多さや、語り口の難しさからそういった印象を受けます。
自分のように趣味プログラマーに毛の生えたレベルの人間で
Reactを触っている人は他にいないんじゃないかと思えてくる日々ですが
それでもなんとか頑張っています。
Reactを触ってみて感じたのは、仮想DOMという仕組みはとても優れていると感じます。
サクサク更新されて、一度Viewの部分を作ると
以後は状態を更新するだけで自動的にViewも更新されるのが非常に素晴らしいです。
サイトの規模が大きくなってくると
自分の脳内でDOMを組み立るのが辛くなってくるので
そこに労力を割かなくてよくなるのはすごく楽です。
こんな感じにReactが優れている点について述べられている記事は多いですが
悪い点について述べられている記事はあまりないように思いますので
自分はReactのダメな部分について簡単に語ってみようと思います。
ReactはViewの部分だけを担うというコンセプトで作られています。
View部分だけなのでアプリケーションを作るときに必要になるパッケージは
別途入れなければならないのです。
良いように言えば、作り手が好きなパッケージを採用して
自由度の高い構成にすることができるということになるのですが
実際のところ、あれこれ入れるのは非常にめんどくさく感じます。
他パッケージごとに情報を調べて、それが必要かどうかを判断し
また必要なら学習コストを支払わなければならないのです。
例えばReactについて調べてるとよく名前が上がるパッケージに
Redux、Immutable.jsなどがあると思いますが
Reactユーザー中で、これらのパッケージを採用している人と
採用していない人に別れることになります。当然、双方コードの書き方は変わってきます。
同じ部分について書かれているのに書き方が違うのです。
自分のような初心者は情報を調べているときによく混乱させられるのですが
とにかく一貫性とまとまりがないのです。
非同期通信のやり方でもredux-thunk、redux-saga
コンテナに直接書く派に分かれており、本当にややこしい。
必要最低限の機能を揃えるための道筋が複数あるので
各自がバラバラに進んでいて、複数人で作業するときは大変だろうなと思わされます。
React界隈はとにかく覚えることが多いです。
普通にアプリケーションを作ろうとするだけで、各パッケージの公式サイトや
GitHubにアクセスして英語のドキュメントを眺める作業を強制される状態に陥ります。
ひとつの高いハードルを超えれば終わりという感じではなくて
中サイズのハードルを何度も超えさせられる感じになるのが、逆にしんどいです。
日本語でReactの記事を書いているプログラマーの方々からは
それらをさも簡単にこなしているような印象を受けるのですが
僕のような末端のプログラマーには本当に辛い作業なのです。
概念が難しい、英語の理解に苦しむ、そもそも情報がない。
一通りできるようになるまで、あちこち調べ回る作業をこなさなければなりません。
基本パッケージにまとめて欲しい
自由度が高いせいで、あちこち駆けずり回ることを強制され
学習コストが高くなっている。これらの問題を解決するために
npm install react ?save 全部これだけで済むようにして欲しいです。
ReduxとImmutableは本体に取り込んで
後は非同期通信の方法を公式でしっかり定めて
みんながその方法で実装するようにしてくれればいろいろ楽になりそうなんですが。
ReactはViewだけを担うというコンセプトのせいか、できるだけ小さくなろうとしていて
そのせいで逆に複雑になってしまっているように感じます。
僕のようなレベルの人間がサクサクとReactを扱えるようにならないと
本当の意味での普及は難しいのではないかと思います。
Facebookにいる優秀な開発者の方々には
底辺プログラマーの気持ちはわからないかもしれませんが、切実に願います！
文句が多いのでReactについて調べている人が読むと
印象が悪くなってしまうかもしれませんが
Reactを導入するメリット自体はとても大きいです。
現在、オリジナルのソーシャルボタンを作れるアプリケーションを作っているのですが
途中で方針転換があり、jQueryで書いていた部分をReactに書き直しています。
そこで感じたのは、我流のDOM管理が
React (&Redux)のルールに従って管理されるようになるので
構成がシンプルでわかりやすくなって、ごちゃごちゃしなくなります。
ここが一番のメリットですね。
Viewを各部品ごとに作っていき、それを一回配置すると
後は状態を更新するだけでDOMに反映されるようになる。
昔ながらの手作業をルール化、システム化したような感じです。
学習コストが高くしんどいことも多いですが、その分見返りもあるので
チャレンジする価値はあると思います。
ただし、現状は環境がいいようには思えないので気軽には勧めにくいです。
頭の良さか、学習意欲の高さ・モチベーションが必要になります。
自分の場合はjQueryをベースにサイトを作っていた結果
グチャグチャになってしまって、新しい技術を導入せざるを得ない状況になってReactを始めました。
僕と同じような状況に陥った方なら、賢くなくてもモチベーションでなんとかできるのではないかと思います。
一度、簡単にでも使えるようになると良さを感じられるので
興味のある方はぜひチャレンジしてみてください。
クラスを継承しようと思ったのですが、このエラーが出てうまくいきませんでした。
結論から言うと、拡張子が .js のファイルからクラスを継承しようとすると
このエラーが出るようです。もしかしたらうちの環境だけで
普通はこんなことで行き詰まったりしないのかもしれないですが
自分はこれで一日潰してしまったので同じエラーで困る人が出たときのために情報を残しておきます。
Reactを利用している場合は、JSXの記述がないファイルでも
拡張子はすべて .jsx にしておいた方がいいのかもしれません。
export default class ExtensionJs {
constructor() {
console.log('ExtensionJs');
}
}
// extension-jsx.jsx
export default class ExtensionJsx {
constructor() {
console.log('ExtensionJsx');
}
}
import ExtensionJs from './extension-js';
import ExtensionJsx from './extension-jsx';
class ClassA extends ExtensionJs {
output() {
console.log('Success ClassA');
}
}
const instanceClassA = new ClassA();
instanceClassA.output();// Uncaught TypeError: Class constructor ExtensionJs cannot be invoked without 'new'
class ClassB extends ExtensionJsx {
output() {
console.log('Success ClassB');
}
}
const instanceClassB = new ClassB();
instanceClassB.output();// Success ClassB
https://gist.github.com/az1979/db63d32583ad912406a68c328a6c79fa#file-invoked-without-new-jsx
思いつきでカスタマイズできるソーシャルボタンを作り始めてはや4ヶ月。
どのみちBabelでトランスパイルするんだからということで
XMLHttpRequestをやめてfetchを使い、async awaitも導入
なんだかんだと新しいことを覚えながらやってきたとは言え
さすがに4ヶ月は時間がかかりすぎ。しかもまだ完成してないという。
2017/8/23 進捗状況
https://gameusers.org/dev/blog/wp-content/uploads/2017/08/wp-option-20170823-1.jpg
現在はこんな感じになっています。
画像のコンテンツはアイコンをダウンロードしてくると
こんな感じのソーシャルボタンが作れますと
サンプルを含めた素材サイトを紹介するタブです。
だいたい完成していて、今はソーシャルボタンの公式ページを作るべく
Game UsersをReact化しています。
Game Users内に公式ページを設置するつもりなので
そちらも同時にReactで書き直さないといけないのです。
これがまた結構大変！
PHPで書かれているものを一から書き直しており
しかも他の人が手を加えやすいように意識しながら
ファイルをできるだけひとところにまとめようとしております。
今はひとつのページを表示するために必要なファイルがあちこちに散らばっていて
他の人が状況を把握するのが困難になっているので
それを改善すべく頑張っているのです。
Game Users React化 進捗状況
https://gameusers.org/dev/blog/wp-content/uploads/2017/08/wp-option-20170823-2.jpg
ヘッダーとフッターの表面的な部分はReactで書き直せています。
一度表示すると、以降はサクサク動いてなかなかいい感じです。
MasonryというJavascript製のライブラリーを利用すると
カード型デザインのページ内で
自動的に各カードを並べかえてくれます。
カードのサイズがバラバラな場合
均等に横並びにするだけでは無駄なスペースが出来てしまうので
これを使うことで石段を積んだような綺麗な並びに作り変えられるのです。
このライブラリーはとても気に入っているので
なんとかReact上でも使いたいと思い導入してみたのですが
REST APIにアクセス → データ取得 → カード数の増減
こういった形でDOMに反映してから
ライフサイクルメソッドのcomponentDidUpdate内でレイアウトしてみたところ
ちらつきが発生してしまいました。
DOMに反映されてから並び替えるという順序になるため
どうしても一瞬並び替える前のカードが表示されてしまうのです。
導入しているのか調べてみたところ
有志の方がreact-masonry-componentという
コンポーネントを公開してくれていました。
これを使ってみたところ非常に簡単にカードの並び替え機能を
利用することができるようになり、ちらつきもなし！
並び替え動画
https://gameusers.org/dev/blog/wp-content/uploads/2017/08/2017-08-27-13-09-23.mp4
いやーありがたい！
優秀な人が様々なコンポーネントを提供してくれているおかげで本当に助かります。
なんかこういう無償で何かを提供してくれている人たちに
お礼の寄付をするシステムがあればいいのになと思いますね。
日々の作業が終わった後にファイルをアップロードするだけなのに、
習慣がないので忘れてしまいます。
Atomを使ってるので作業自体はすごく簡単なんですが。
というかアップロードじゃなくてプッシュというのが正しいのかな？
Gitの概念と用語が難しくていまだによくわかっていません。
久しぶりに更新したついでに
GitHubの容量の上限について気になったので調べてみたところ
リポジトリは1GBが上限サイズのようです。
それ以上のサイズになると警告メールが送られてくるらしい。
このアドレスでリポジトリのサイズがチェックできるので
アクセスしてみたところ “size”: 39395 と書かれており
なんとまだ39MBしか使っていないようです。
ローカルファイルだと400MBくらいあったのですが
node_modulesや余計な画像などのファイルを除くと、すごく小さくなりますね。
今後は毎日忘れずにプッシュしてこうと思います。
現在の更新状況
旧デザイン
https://gameusers.org/dev/blog/wp-content/uploads/2017/09/notification-20170903-1.jpg
新デザイン
https://gameusers.org/dev/blog/wp-content/uploads/2017/09/notification-20170903-2.jpg
モーダルで表示する通知を綺麗にしています。
他のデザインに合わせてこちらもカード型にしました。
npmのパッケージは気が向いたときにアップデートしているのですが、
まれにアップデートをしたせいでこれまでどおりに動かなくなることがあります。
現在、react関係のパッケージで起こっている問題を参考までに載せておきます。
もしかするとWindows環境だけで起こる問題で
MacやLinux上では起こらないかもしれませんのであしからず。
eslint-plugin-jsx-a11yのバージョンが5.1.1より上の場合エラーが出る。
コードをルールに沿って正しく記述するためのチェック用パッケージなのですが
6.0.2にアップデートすると以下のエラーが出るようになってしまいました。
definition for rule 'jsx-a11y/href-no-hash' was not found
5.1.1に戻すとエラーが出なくなります。
npm install eslint-plugin-jsx-a11y@5.1.1 --save-dev
ルートの権限でインストールしてくださいと出るのですが
その際、毎回 fsevents 絡みのエラーが出ます。
npm ERR! Please try running this command again as root/Administrator.
npmのバージョンを5.0.4に戻すとエラーが起きません。
npm install -g npm@5.0.4
webpackでbuildする際にファイルを圧縮することができない。
久しぶりにファイルを圧縮してみようと思い
プロダクション版でファイルを出力しようとしたところ
uglifyが正常にできなくなっていました。
Uglify SyntaxError: Unexpected token: punc ())
上記のエラーが表示されます。
調べてみたところ、ES6絡み？で圧縮ができなくなっているようです。
webpackに備え付けられているuglifyだと動かないようなので
パッケージ uglify-js（バージョン2）& uglifyjs-webpack-plugin（最新のβバージョン）を
インストールして利用してみたところ圧縮が可能になりました。
npm install uglify-js@2 --save-dev
npm install uglifyjs-webpack-plugin@1.0.0-beta.2 --save-dev
https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/31
https://stackoverflow.com/questions/44287584/how-to-minify-es6-code-using-webpack/45088328#45088328
https://github.com/webpack-contrib/uglifyjs-webpack-plugin
同じエラーで悩んでいる方がおられましたら参考にしてください。
Reactで作っているサイトの内部にドロワーメニューをつけたい！
というわけで、jQuery製のライブラリーをReact上で動かそうとしてみるも失敗。
React用に公開されているパッケージをいくつか試してみるも失敗。
いろいろやってみたのになぜか正常に動かない…。
仕方がないので自分で作ってみることにしました。
なんとなく難しそうなイメージがあったのですが、
いざ作り始めてみると思ってたよりも簡単でした。
完成品
https://gameusers.org/dev/blog/wp-content/uploads/2017/09/2017-09-17-11-22-39.mp4
アクションを挟み込める velocity-react というパッケージを使うと
シンプルなコードで実装することができます。デモもいい感じです。
https://github.com/twitter-fabric/velocity-react
http://twitter-fabric.github.io/velocity-react/
npm install velocity-react --save
まずnpmでパッケージをインストールしましょう。
コード
https://gist.github.com/az1979/868c058249d4d80505448daed8fd5f32
VelocityComponentはすでに存在している要素に対して
アニメーションをつける際に利用し、VelocityTransitionGroupは
要素を新しく追加したり、削除したりする際に利用します。
上記コードでは、ドロワーメニューのtranslateXをマイナスに指定して
画面外に配置しておき、メニューを表示するボタンをクリックすると
translateXが0に移行し、アニメーションつきで表示されるように設定されています。
VelocityTransitionGroupで作っており
メニューがactiveになった際に要素が追加される形で
表示されるようになっています。
なぜオーバーレイを要素の追加・削除で実装しているかというと
オーバーレイ部分には、クリックするとメニューを閉じる関数が設定がされており
メニューが表示されていない間は、オーバーレイの要素を削除することで
同時にそのクリック判定も消えるようにしているのです
（ずっとオーバーレイのクリック判定が残っていると、コンテンツのリンクが機能しなくなります）
通常スタイルシートのdisplay: noneを設定すれば
クリック判定も消えるようなのですが、なぜかうまくいかなかったので
表示・非表示のたびに追加・削除する形で実装しています。
※ ドロワーメニューのコードは画面遷移で更新されない場所に設置してください。
更新されるコンテンツの内部にメニューを設置すると
画面遷移とともにメニュー自体も再描画されて
ドロワーメニューが閉じるアクションが省略されてしまいます。
できるだけ上の方の階層に設置することをおすすめします。
https://gist.github.com/az1979/95119067ce1f0f62cc3bbf03778f7a5a
デザインは各自好きなように編集してください。
上記スタイルシートではMaterial iconsをリンク横に表示するデザインになっています。
Material iconsを利用したい場合は公式サイトを確認してください。
シンプルなコードでカスタマイズも可能なドロワーメニューを設置したい方は
ぜひこの記事を参考にしてみてください。
参考リンク
http://velocityjs.org/
http://qiita.com/nabepon/items/c005a7d4491fd04b453e
自分は最近知りました。プロジェクトのルートディレクトリーに
見慣れないファイル（postcss.config.js）があったのでチェックしてみたら
パッケージで使用する設定ファイルでした。
自分で作ったのにすっかり忘れていたのです。
npmでいろいろパッケージをインストールして使っていると
別途設定ファイルを作らないといけなくなることがあります。
例えば .babelrc / eslintrc.json / .stylelintrc / postcss.config.js
こんな感じのファイルです。1つや2つくらいなら大して気になりませんが
3つ4つ…と増えていくと、プロジェクトのルートディレクトリーがごちゃごちゃしてくるので
ひとつのファイルにまとめられるならそうしたいと思ったのです。
ツールの設定をpackage.jsonに書く
https://chocolateorange.github.io/2017/05/03/01/
そこでウェブを検索してみたところ、こちらの記事を発見し
詳しく解説してくれていたので、この記事にならって
自分も設定ファイルをpackage.jsonにまとめてみました。
パッと見よくわからないファイルが減ってすっきりしたので
みなさんにもおすすめします。
ちなみに 2017/10/1 現在のpackage.jsonの設定部分はこんな感じになっています。
https://gist.github.com/az1979/2f5578c628a9b35f6866c504560488d3
シェアボタン公式トップページ
https://gameusers.org/dev/blog/wp-content/uploads/2017/10/share-buttons-top-20171008.jpg
シェアボタンの公式ページがだいたい完成しました。
シェアボタンを作成する機能は問題なく動作しており
次は有料プランを申し込むページを作成する段階です。
PayPalのようなネット上で支払いを行えるサービスを提供している企業は
海外にもたくさんあるので、それらを吟味しながら
良さ気なサービスを採用しようと思います。
シェアボタンは海外の人にも使ってもらえるように
いずれ複数言語で提供したいという思いがあるため
支払いサービスも多くの言語に対応している海外のサービスの方がいいのかなと考えています。
なぜかというとWordPressのプラグインは100% GPLで作らないと
公式の場所に置いてもらえません。
ライセンスが100% GPLでない場合
ネットから実行ファイルをダウンロードしてきて使用する
スマホの野良アプリのような扱いになってしまため
Game Users Share Buttons部分のライセンスもGPLで作らないといけないのです。
そのため、Game UsersのWebリポジトリに含めてプッシュすることができなくなっているのです。
一緒にアップロードするとライセンス汚染が発生するようなので。
ローカルのシェアボタンのアドレスは
https://localhost/gameusers/public/app/share-buttons
なのですが、現在、GitHubのリポジトリをクローンして上記URLにアクセスしても
ファイルが足りないためエラーが起こってしまう状況になっています。
完成したら別リポジトリで公開する予定なのですが
正常に動作させるためには、そのファイルを特定の場所に設置してから
アクセスしなければならないという非常にややこしいことになっています。
汚染が発生するライセンスは本当にめんどくさいですね。
DOM に直接アクセスするのは、ref属性
jQuery プラグインをラップした、React コンポーネントを作って、
自分で後片付けなども記述する
詳細は「入門 React ――コンポーネントベースのWebフロントエンド開発」の本の、
8章「DOM操作」を参照
調べてみたんですが
ref属性というものがあったんですね、知りませんでした
jQueryプラグインの動作が怪しい場合などに試してみようと思います
良い情報をありがとうございます！
自分の要素よりも、子孫の要素しか更新していないのなら、何とか使えるけど、
自分の要素よりも親要素や、グローバルな要素を更新しているような、
プラグインなら使えない
つまり、完全にカプセル化できている、プラグインなら使えるけど、
場当たり的に作られているようなものは使えない
知識不足のせいで動かせないのかと思っていましたが
プラグインの作りによっては諦めるしかないこともあるんですね
覚えておきます！
ReactもjQuery並にライブラリが充実してくれると嬉しいんですが
こなれてくる前に、また新しい技術が出てきて
そちらが主流になったりするかもしれないのが悩ましいところですね
Web界隈は本当に流れが早い…
https://gameusers.org/dev/blog/wp-content/uploads/2017/10/files-20171015-1.png
後々のことを考えると、
ディレクトリー構成を変えたほうがいいのではないかという思いに至り
画像のように変更してみました。
ヘッダーやフッターなどの共通部分を分離。
Game Usersは他の人も気軽にコンテンツを追加できるようにしたいという目標があるので
新たにページを追加する場合は共通部分のコードは触らずに
そのページはそのページだけで独立してファイルを作成できるようにしたいのです。
自分の能力を超えてる部分に手を出しているという不安感が漂います。
到達点はわかっているのですが、知識が足りていないので
今やっていることが正しいのかどうかがわかりません。
ディレクトリー構成だけはそれっぽくなっているのですが。
お前まだ自殺してなかったのか
もう38歳だろ
その年齢で職歴なし童貞は自殺以外に社会貢献ないぞ
シェアボタン公式トップページ
https://gameusers.org/dev/blog/wp-content/uploads/2017/10/share-buttons-top-20171028.jpg
最近もクロスドメインの問題でAPI絡みの部分を書き直していたのです。
今まではサイト内で使う自家用APIしか作っておらず
同じノリで公開部分のAPIを作っていたため、違うドメインからAPIにアクセスできなくなっていました。
他にもネットワーク上にアップロードするとなぜか動かなくなる部分が出てきたりで
もっと早く公開するつもりだったのですが、伸びに伸びて11月直前になってしまいました。
以下のURLでチェックできるので、よかったらアクセスしてみてください。
https://gameusers.org/app/share-buttons
シェアボタンを作成して使ってもらってもかまわないのですが
まだローカル環境と gameusers.org 上でしかテストが済んでいないので
その他の環境の場合、なんらかの問題が起こるかもしれません。
あとテーマが一種類しかなく、課金システムもテスト版になっています。
誰もする人はいないと思いますが、まだ課金は行わないようにしてください
（クレジットカードの入力ウィンドウの右上にTEST MODEと書かれている場合はテスト版です）
このブログともう一つテスト用のブログを作成して、プラグインの動作テスト
それが終わったら公式プラグインに申請します。
公式プラグインとして認められたら完成に大きく近づくので、気合を入れて頑張ります。
ちなみにWordPressで使用する場合
公式サイトでシェアボタンを作成してダウンロードして使うよりも、プラグインで使用した方が便利です。
プラグイン版は作成したシェアボタンがWordPressの置いてあるサーバー上に保存され
いちいちダウンロードしなくても使用することができます。
興味のある方はプラグイン版が完成するまで待っていてください。
我ながらなかなかいい感じです。
ブログトップ
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/blog-top-20171102-1.jpg
完成が近いと思っていたのですが、機能をチェックしていると様々な問題が発覚しました。
IEとMicrosoft Edgeでシェアボタンが正常に表示されないという致命的な問題が見つかり
今日はそれを修正していました。
とりあえずシェアボタン自体は表示されるようになったのですが
シェアボタンを作成するページがIEではどうやっても動かず…。
IEのシェアは年々下がっており、20パーセント程度になっているようなので
もうほっておくことにしました。シェアボタン自体は動くので作る時は
新しいブラウザでやってくださいということにします。
その他、認識している問題は2つあります。
・モバイル機器で見るとテーマのボタン画像がぼやける
・モバイル機器で見るとシェア数の文字が1ピクセルずれる
Retinaディスプレイで画像を表示するときは、予め大きめの画像を用意して縮小して
表示しなければならないという情報は知っていたのですが
そんな気になるほどボケないだろうと、いい加減な姿勢でテーマ画像を作ったところ
モバイル機器でチェックすると文字が読めないくらいぼやけていました。
Androidでもぼやけるんですね。Android機器でも
Retinaディスプレイと同じ表示方法が取られているんでしょうか？
まぁこの問題自体は画像を大きく作れば済むので解決できるのですが
問題は2つ目の「モバイル機器で見るとシェア数の文字が1ピクセルずれる」なんです。
なぜかモバイル機器でシェアボタンをチェックすると
1ピクセルだけシェア数の文字が上に表示されます。
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/pc-mobile-1pixel-20171102-2.png
わかりにくい画像で申し訳ないのですが、こんな感じにずれているのです。
同じChromeなのにPCとタブレットでなぜ表示位置が変わるんでしょうか。
原因がさっぱりわからないので、どなたかわかる方がおられましたら教えてください。
モバイルからのアクセスだけ1ピクセル下に表示するという
強引な解決方法もあるのですが、あんまりスマートな解決方法じゃないので気が進まないんですよね。
GitHub リポジトリトップ画像
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/banner.jpg
Game Users Share Buttons リポジトリ
https://github.com/gameusers/share-buttons
GitHubのリポジトリを作成し、シェアボタンのコードを公開しました。
いずれ他のソーシャルサイトのシェア方法・シェア数の取得方法を
知っているプログラマーの方が現れて、爽やかにコードを提供してくれたらいいのになと夢見ております。
このシェアボタンの使用者が増えて知名度が上がれば
そういう方も出てくるかもしれないので、頑張ってテーマや機能を充実させていこうと思います。
前の記事で言っていた IE でシェアボタンの作成ページが動かない問題ですが
なんと Promise の Polyfill を用意するだけで動きました。
最初は babel-polyfill で旧ブラウザ環境に対応しようと思ったのですが
スクリプトのサイズが無駄に大きくなってしまうので、babel-polyfill の使用は諦めたのです。
シェアボタンはシェアボタンを作成するページのスクリプトと
シェアボタンを表示するスクリプトに分かれているのですが
babel-polyfill を充てるとシェアボタンを表示するためのスクリプトが非常に重くなってしまいました。
圧縮前は60KB（圧縮後は30KB）程度なのですが、それが330KBに。さすがにこの膨れ上がり方はやばい。
その場合は IE での動作は諦めるしかないと思っていたのです。
Fetch や Async など、いろいろ IE と相性の悪そうな新機能を使っていましたし。
しかし、それらについてはすでに Polyfill が充てられていたので、
後は Promise だけという状況になっていたようです。
業務で IE への対応に四苦八苦している方がいる中、自分は本当に運が良かったと思います。
制作中、一度も IE での動作環境をしなかったのに、この結果はラッキーとしか言いようがない。
本日、WordPress の公式ディレクトリへ登録してもらうため、プラグイン申請を行いました。
承認してもらえると WordPress のプラグインページから検索してインストールすることができるようになります。
…が、もし拒否られたら…と思うと心配でなりません。
長い時間をかけてプラグインを作成してGitHubまで用意したのに
なにか根本的な問題が見つかって掲載不可になったら…。
大丈夫だろうか？
ある日突然、Chrome の console に以下のような表示が出ていました。
The certificate used to load https://gameusers.org/app/pay uses an SSL certificate
that will be distrusted in Chrome 66. Once distrusted,
users will be prevented from loading this resource.
See https://g.co/chrome/symantecpkicerts for more information.
Google 翻訳
https://gameusers.org/app/payをロードするために使用された証明書は
Chrome 66で信頼されないSSL証明書を使用します。
一度信頼されないと、ユーザーはこのリソースを読み込むことができなくなります。
詳細については、https://g.co/chrome/symantecpkicertsを参照してください。
調べてみたところ、過去に発行されたシマンテックの証明書に問題があるらしいです。
Game Users で使っている Rapid SSL もダメとのこと。
http://security.data-site.info/801.html
2018年3月15日までに証明書を新しいものに書き換えないといけないみたいです。
Rapid SSL は他の高価な証明書に比べると格安で良かったのですが
どうせ更新するならと、他にも新しい発行業者が出ていないか調べてみました。
すると「Let’s Encrypt 」という無料で利用できるとうたっているサービスを発見。
さすがに無料は怪しいだろと思ったのですが、サイトを見てみるとこのように書かれています。
シスコ（Cisco Systems）、Akamai、電子フロンティア財団（Electronic Frontier Foundation）
モジラ財団（Mozilla Foundation）などの大手企業・団体が
ISRG のスポンサーとして Let’s Encrypt を支援しています。
どこかで聞いたことのある名前ばかり。疑念が払拭されたので
これを利用してみよう、仮にまともに使えなかったとしても無料だし
試してみる分には問題ないだろうということで、VPS (Cent OS6) で利用してみました。
使い方はここにすべて書いてあります。
https://letsencrypt.jp/usage/
https://letsencrypt.jp/usage/install-certbot.html
EPEL リポジトリを有効にする
yum install epel-release
certbot-auto を拾ってきて実行
wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto
./certbot-auto
以下、certbot 実行時の黒い画面の文字、Google の翻訳も英文の下に載せておきます。
（長いので気になる方はブログでチェックしてください）
https://gameusers.org/dev/blog/notes/20171110-1
英語ですが数問の対話に答えるだけでウェブサイトへの SSL 導入が完了します。
あとは httpd を再起動するだけで反映されます。
service httpd start
数年前、初めて SSL を導入したときは中間証明書だなんだと難しい処理をした覚えがありますが
今回はたったこれだけで終了。しかも無料！
証明書の期限が三ヶ月しかないという問題はありますが
これは cron で更新すればいいだけなので
実質なにもしなくても無料で SSL がずっと利用できることになります。
証明書
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/ssl.png
ちなみに証明書を更新する方法は以下のような感じです。
毎日、朝の6時45分に証明書の更新を実行する。更新できた場合は httpd も再起動する。
毎日、実行していても、期限の30日前にならないと証明書の更新処理は実行されないので
向こうのサーバーに負荷をかけることもないとのことです。
45 6 * * * /root/certbot-auto renew --post-hook "service httpd restart"
正直、cron を触ることはあまりないので、こっちの設定の方が時間がかかりました。
この書き方が正しいのか更新されるまでわからないので、cron の部分についてはあまり参考にしないでください。
それにしても Let’s Encrypt すごすぎる！
WordPress 公式プラグインページ
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/wordpress-plugin-page.jpg
https://wordpress.org/plugins/game-users-share-buttons/
ようやく完成しました！ちょっと前からプラグイン版は公開されていたのですが
プラグインをアップデートするとテーマが消えるというやっかいな問題が発生し
その対応が終わるまで記事にしないでおきました。
何度も修正を重ねたので、バージョンはすでに1.0.9になっています。
WordPress独特の仕様と、プラグインをアップデートした際に
ファイルがどう扱われるのかについての情報がネットに全然なかったので
その点で苦労しました。
どうもアップデートするとプラグインのディレクトリを
内部のファイルごと入れ替えるようなのです。
そのせいで内部に作成したテーマファイルも一緒に消えてしまうという
ややこしい仕様です。一時的に削除されない場所にディレクトリを作成し
アップデート後にそこからテーマファイルをコピーするという処理で解決したのですが
これはマナー的にどうなのかという思いもあります。
後日、そのことについて詳しく情報を残すつもりなので
詳しい方が見てくれて情報を提供してくれることに期待！
WordPressでブログをやっている方はぜひ使ってみてください！
サクサク動いてなかなかいい感じだと思います。
素材サイトからアイコンをダウンロードすると
オリジナルのシェアボタンを作成することも可能です。
WordPressのダッシュボード > プラグイン > 新規追加ページで
「Game Users Share Buttons」を検索してください。
黒猫のアイコンのプラグインです。
Game Users Share Buttons アイコン
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/icon-256x256.png
頑張って作ったのでみんなに使ってもらいたい！
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/themes-20171123.jpg
テーマを3つ追加しました。ぶっちゃけデザイン的なセンスがないため、
産みの苦しみがすごいです。絵が描けたり、グラフィックデザインができるなら
もうちょっとサクサクと完成させられると思うのですが
自分にはそのどちらの能力もないため、どうしても時間がかかってしまいます。
このシェアボタンはリンクを貼れるので
この機能をアピールしてデザインが行える人にテーマを作ってもらえないだろうかと考えているのですが
はたしてうまくいくでしょうか。
シェアボタンを見てもらえるとわかるのですが
黒猫の画像に公式サイトへのリンクが貼られています。
これを画像ごと他のサイトのリンクに変更できるのです。
画像にロゴを利用して、自サイトへのリンクを貼ると
そのテーマを利用してくれた方のブログからリンクが貼られることになります。
この宣伝効果はすごいと思うのですが、デザイナーの方々に魅力的に感じてもらえるでしょうか。
もし絵が描ける方やデザインができる方で
この記事を見てくれた方はぜひとも前向きにご検討をよろしくお願いします。
時間をかけて作成するだけのメリットはあると思うのでぜひ！
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/free2.png
高さのないシェアボタンを作成したときに
デザイン的にネコの画像も同じくらいの高さにしなければならないのですが
全身の場合、縮小しすぎるとなんの画像なのか認識しづらくなるため
ネコの顔だけの画像を選べるようにしました。全身よりもこっちの方が使いやすそうです。
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/pc-mobile-1pixel-20171102-2.png
以前、モバイル環境でシェアボタンを表示すると文字がずれると記事にしたのですが
あれから時間を設けていろいろ調べてみました。
div 1つか2つくらいのシンプルな構成で
スタイルシートも極力シンプルにした状態で文字位置を比較してみたのですが
それでもPCとモバイル環境で同じ表示にはなりませんでした。
どうも使用しているフォントとサイズによってはズレが生じるようなのです。
Google Fonts を利用し、フォントサイズを変えながら表示してみたところ
ズレがないサイズとズレのあるサイズが出てきたのです。
このため、モバイル環境からのアクセスは
一律表示位置を1ピクセル下げて表示するという方法は使えなくなりました。
そこで iOS と Android でのアクセス時にズレを調整するフォームを用意して
そこで各自設定を行ってくださいという方針にしました。
どちらのハードも所有していて確認が行える人はなかなかいないと思いますが
一応、機能だけは提供しておくことでこの問題の解決を図ります。
機能的にはそれなりのものを提供できていると思うので
後は宣伝を頑張らないといけません。
使ってもらえば、それなりに良さはわかってもらえると思うのですが
なにか良い宣伝方法はないでしょうか？
テーマ募集
https://gameusers.org/app/share-buttons/recruitment
キャンペーン
https://gameusers.org/app/share-buttons/campaign
各ページにメールフォームを設置して、簡単に連絡が取れるようにしました。
テーマを募集しているのですが、作ってもらったシェアボタンを
メールに添付して送ってくださいというのは
テーマを提供してくれる方に負担が大きいのではないかと思うので
専用フォームで必要事項を入力してファイルを送信できるようにしました。
ブログにシェアボタンの紹介記事を書いてくれたら
ビジネスプランの利用券をプレゼントするキャンペーンも開始。
と思っていたところに、ちょうどいい記事を発見。
ポール・グレアムによる「スケールしないことをしよう」
http://postd.cc/do-things-that-dont-scale/
創業者が外回りをしてユーザーを獲得するのを嫌がる理由は、2つあります。
1つは、内気さと怠慢さの両面です。彼らは外に出向いて
恐らく断るであろう大勢の知らない人たちと話をするよりも
家にこもってコードを書くことを好みます。
しかし、スタートアップを成功させるには
最低でも一人の創業者（大抵はCEO）は営業やマーケティングに
たくさんの時間を費やす必要があるのです。
これは本当にそうです。自分もコードを書いてる方が楽なので
宣伝活動にいまいち積極的になれないでいたのですが
それではダメなんですよね。
結局のところ、自分で地道に営業活動を頑張るしかない。
せっかく大きな労力を費やしてシェアボタンを完成させたのに
使ってくれる人を増やす努力をしないのはもったいない。
旅行・ホテル・飲食店などをまとめたサイトも、1件1件、訪問する
客から見ると、どんな得があるのか？ が重要で、
営業マンから、もうかるやり方を、教えてもらえるのが重要
しかも、文書を読まずに、会話で教えてもらえる事が重要。
文書を読んで下さいというのは、まず無理！
他人の作った文章を読むのは、無料でも全員が嫌がる。
有料でも講習会の方が良い。
話を聴けるから
五感すべてを使うので、理解力が高まるから、会話が好まれる。
これをコミュ力と言って、人間社会・集団に欠かせない資質。
つまり成功の条件
技術者を選択する人は、これが嫌いな人が多い。
だから、一般人からは相手にされない。
意思の疎通ができないから
自分も頑張らねば
今、メールでシェアボタンのプラグインを使ってくれそうな人に連絡を取ってみてるんですが
やっぱりメールも文書なので、効果は薄いってことでしょうか
講習会のようにダイレクトな感じでおすすめできる方法があればいいのですが
なかなか難しいですね
コミュ力は自分も発揮しなければならないと常々思っています
どうしても楽な方に逃げてしまうので
ネットで影響力のある人が気に入ってくれて
勝手に流行ってくれないかなとか、ありえない夢を見てしまいますね
確かに技術寄りの人は文系のウェーイという人たちと違って
内向きなイメージがあります
毎日、黙々と作業をしているのでどうしてもそうなってしまうのかもしれませんが
「客から見ると、どんな得があるのか？ が重要で、
営業マンから、もうかるやり方を、教えてもらえるのが重要」
すごく重要な教えな気がするので
今後はこの点をよく考えながらアピールしていこうと思います
営業活動には疎いので、こういう参考になる情報は本当にありがたいです
現在、サーバー側は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系って覚えること多すぎないですか？
範囲が広いのに、一人であらゆることに対応しなければならないので
そろそろ頭がパンクしそうです。
公式が提供するボタンから、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
⇒ http://asaswq3wq.sblo.jp/article/181819223.html
興味がある人だけ見てください。
MY6HSHSQBP
とりあえずWordPress関連の記事を書いていこうと思います。
WordPressにはたくさんの便利なプラグインが用意されています。
こんな機能があったらいいのになと思うものは、だいたい存在していると言っても過言ではありません。
今回はプラグインのインストール方法について詳しく解説していきます。
WordPressを導入したばかりでよくわからない方は
この記事を参考にしてインストール方法を覚えてください。
プラグインのインストールには大きく分けて3つの方法があります。
https://gameusers.org/dev/blog/wordpress-plugin-install/
WordPress を利用していると、ここの見た目を変更したい
こんな機能を追加したいなどなど、さまざまな変更や機能追加をしたくなってきますが
そんなときに必要になるのが CSS（スタイルシート）や JavaScript です。
この記事では自作の CSS・JavaScript・HTLM をブログに追加する方法について解説していきます。
https://gameusers.org/dev/blog/simple-custom-css-and-js/
WordPress で記事を書いていると箇条書きで表現したい項目が出てきます。
この時に利用できるのがリストです。投稿ページのビジュアルエディタで、
番号なしリスト・番号付きリストを選ぶと画像のようなリストを入力することができるようになります。
https://gameusers.org/dev/blog/wordpress-beautiful-list/
WordPress の見た目を変えるときに、まず思いつくのはテーマの変更ですが、その次にはなにが思い浮かびますか？
特にこれといったものは思い浮かばないですよね。
そこでおすすめしたいのがフォントの変更です。
フォントを変えるとブログの印象もガラッと変わります。
WordPress のフォントについて詳しく書かれている記事はあまり見たことがないと思いますので
今回は WordPress のフォントについての情報を集めてみました。
https://gameusers.org/dev/blog/wordpress-font/
綺麗なフォント、おしゃれなフォント、面白いフォントを使いたい！
でも 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/
たまにデータの読み込みに失敗したり
なんらかのエラーが出た時にJavaScriptでerrorと出るようになってます。
このアラートは今となっては意味不明な仕様なんですが
たまにしか出ないから別にいいか、ということでそのままにしていました。
Edgeでもサイトの動作はチェックしてるんですが
たぶん毎回は出ないと思うのであんまり気にしないようにしてください。
Node.js と React で書き直す際にはちゃんと修正します！
今ブログ書くことに必死なので、いつになるかはわからないのですが。
なんてこった！昔の記事を編集して新しい情報を追加したのに、日付が古いまま。
せっかく中身を更新したのに読者に新しい情報だと認識してもらえない。
日付を見ただけでブログから人が離れていってしまうかも？
というわけで、投稿日の代わりに更新日を表示させましょう！
この記事では投稿日や更新日を表示したり非表示にしたりする方法を解説していきます。
スタイルシートを用いて、とても簡単に表示・非表示を切り替えることができますので
更新日を表示させたい方は、ぜひ参考にしてみてください。
https://gameusers.org/dev/blog/wordpress-datetime/
アイキャッチ画像
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/
アイキャッチ画像
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/
アイキャッチ画像
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/
アイキャッチ画像
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/
WordPress のプラグインで利用した際に、Top（記事の上） と
Bottom（記事の下）に指定したシェアボタンの詳細設定を行えるようにしました。
Top & Bottom 詳細設定
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/gusb-v1.2.1-1.png
シェアボタンを表示するページを指定できます。
トップページ、個別投稿ページ、固定ページ、アーカイブページ
それぞれ表示したい場所をチェックして保存してください。
トップページやアーカイブページは通常、記事が一覧で表示されます。
そしてそれぞれの記事部分にシェアボタンが表示されるのですが
各記事のシェア数を個別に取得しているわけではないので
実質トップページならトップページのシェア数が表示されているだけです
（複数のシェアボタンに同じシェア数が表示されています）
そのため、一覧ページでは記事ごとにシェアボタンを
表示する意味はないのではないかと考え、トップページやアーカイブページなどでは
シェアボタンを表示しない設定を行えるようにしました。
またこれまでは余白設定で記事とシェアボタンの間隔を調整していましたが
画像の余白欄で、Top と Bottom のシェアボタンの間隔を個別に設定できるようにしました。
今後はこちらで余白を設定していただけるとありがたいです。
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 の仕様が変更されたようで、シェアが正常に行えなくなっていましたが
v.1.2.1 で修正を行いました。
記事
https://gameusers.org/dev/blog/game-users-share-buttons-v1-2-1/
アイキャッチ画像
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/
アイキャッチ画像
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/
アイキャッチ画像
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/
アイキャッチ画像
https://gameusers.org/dev/blog/wp-content/uploads/2018/01/ec-wordpress-modal-window.jpg
WordPress の記事に追加した画像をクリック（タップ）すると、
ブラウザに画像が読み込まれて大きく表示されますよね？
その際、画像をクリックする → ブラウザに画像が読み込まれる
→ 元のページに戻るという経緯をたどりますが、元のページに戻った時に
再度ページの読み込みが発生するので、ページの表示に時間がかかってしまいます。
パソコンからのアクセスの場合は回線が速いので、あまり気になりませんが
スマートフォンからアクセスしたときに、再度ページを読み込むと
時間がかかるので読者にストレスを与えることになってしまいます。
そこでおすすめしたいのが、モーダルウィンドウでの画像表示です。
記事
https://gameusers.org/dev/blog/wordpress-modal-window/
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci
この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです
掻い摘んで説明すると
・創価学会は、町内会や老人会、ＰＴＡ、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
９０年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた
・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった
・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
防パトに尾行や監視、付き纏いをさせるようになった
・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった
・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた（防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官）
※これに加えて防犯要員が同様のお願いをして回る
・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った
つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕
詳細は下記スレをご覧下さい
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.2ch.sc/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/
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/
サイドバーに表示できるのでシェアボタンが常に目に入るようになります
Game Users Share Buttons v1.3.0 更新情報
ウィジェットを追加しました。ウィジェットを利用すると
サイドバーにシェアボタンを表示できるようになります。
また編集タブのTop設定・Bottom設定で
添付ファイルページにシェアボタンを表示するか表示しないかの設定を行えるようにしました。
記事
https://gameusers.org/dev/blog/game-users-share-buttons-v1-3-0/
https://gaming.youtube.com/channel/UCGmS-B707Sqa19BXRn02JIw/live
未来のプログラム環境を感じられました！
プログラム配信を行っています。
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
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 の利点をまとめた記事を書いてみようと思います。
ただし、WSLでは、Dockerは使えないけど
検索して初めて知りました
自分はDocker Toolboxを使ったので
同時にVirtualBoxもインストールされました
知ってたらDockerを覚えなかったかもしれないですね
でもDockerを使えるようになってよかったと思ってます
慣れたらどんな環境でも簡単に作れるようになるかも？しれないので
Node.jsの勉強中です。MongoDBを使うところから再開します。
今日からまたがんばります！
Teletype for Atom の使い方はこちらの記事で解説しています。
この記事は配信中のみ見れるようにしています。
https://gameusers.org/dev/blog/live/
Teletype 参加者募集中
portal ID: 3a69b9ec-e1a7-4c15-8459-d96c3ea98c58
https://www.youtube.com/watch?v=TjHVgfUMRRg
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.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
fdbe5d72-2a56-442e-8942-0f709d4caf01
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/
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/
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円分あるので、しばらくは大丈夫そうです。
https://www.youtube.com/channel/UCGmS-B707Sqa19BXRn02JIw/live
配信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/
配信URL
>>127
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 を採用するメリットは大きいのではないかと感じています。
使ってみて感じたのですが、いろいろな問題もあります。
・参加人数が 8 人まで
なんでこんな仕様なんだと言いたいところなんですが
自分を入れて計 8 人までしか参加できません。
サーバーの能力依存で参加人数を決めさせてくれればいいのに
最初から IDE 側で人数を制限してるので
どれだけサーバーのリソースに余裕があっても無駄です。
AWS Cloud9 は AWS の管理画面でアカウントを発行して
そのアカウントで IDE に参加してもらう形になっています。
Game Users の開発では、いろいろな人に個人用のアカウントを発行して
時間のあるときに気軽に参加してもらえたらなという思いを持っていたのですが
8 人制限のせいでそれができなくなりました。
今は guest-1〜2、master-1〜5 というアカウントを用意して
そのアカウントにログインして参加してもらう形になっています。
個人用のアカウントの場合、自分を除くと 7 人までしかアカウントを発行できませんが
ひとつのアカウントを複数人で使ってもらう場合は
人数制限が緩和されるのでそういう形にしています。
ただこれだと誰が参加してくれているのかわかりにくく、とても不便です。
そもそも Cloud9 は不特定多数の人が開発に参加するプロジェクトを想定していないのでしょうが
GitHub を経由した push だ pull だと面倒くさい
現在の共同開発環境を変えられるポテンシャルを秘めているので
早急になんとかして欲しいところです。
Atom や Visual Studio Code（触ったことがないのでわからない）は
なんだかんだと言って優秀なんだと思います。
様々な機能が最初から提供されていたり
プラグインなどで後から追加することができたり
個人的に使いやすい設定を細かく突き詰めることができたり
当然のようにいろいろできていたことが、Cloud9 ではできなくなりました。
ブラウザだけで開発ができる・コラボレーションが手軽に行える
というメリットは大きいものの、使いづらい・必要な機能がない
といったデメリットも大きいので
現状、上記のメリットを求めている人以外には勧めづらい環境になっています。
アマゾンが買収したので今後の発展に期待したいところですが
今のところは正直なんとも言えないクオリティです。
本当に辛いところなんですが、ネットに情報がありません。
なんでもそこそこの規模になってくると
日本語の情報はなくても英語の情報があったりするものですが
Cloud9 はその域にも達していません。
例えば今、ESLint で “extends”: “airbnb” が動かない問題を抱えているのですが
調べても情報がなくて困っています。
このプラグインを入れるといいよと英語で書いている情報はひとつ発見したのですが
そのとおりにやっても動かず。
それ以外情報がないので、どうにもならない状態に陥っています。
アマゾンのサポートも利用できるようなのですが
技術的なサポートは有料になっているみたいなので
お金持ちや企業でないとサポートを受けられません。
参加者募集！
Cloud9 の至らなさをいろいろと語ってみましたが
Game Users の開発には手軽なコラボレーション機能が必要なので
利用しないという選択肢はありません。
ゲームが好きな開発者の方おられましたら、ぜひ一緒に開発しましょう。
参加したとして権利や金銭的な問題はどうなるんだということについて
文章にきっちり残していないので
その辺についてもこのブログで記事にしていかないといけないなと思っております。
YouTube でプログラム配信をしながら開発しているので
もし少しでも興味があったら覗いてみてください。
配信中はこのブログのトップページにも配信が見れる記事が掲載されるようになっていますのでぜひ！
いよいよ Game Users を書き直す作業を始めようと思います。
それに当たって調べないといけないことがたくさんあります。
React は状態管理に Redux を使用していたのですが
コードを書く量が多く、学習コストも高いため
同じ状態管理機能を持った MobXというライブラリに興味を持っています。
こちらもいろいろ調べてみようと思います。
配信URL
>>127
昨日、MobX（Reactの状態管理ライブラリ）について調べていたら
Next.jsというフレームワークを発見しました。
これを使うとサーバーサイドレンダリングや、Code Splitting（分割して初期ロードを早くする）
ブラウザの自動更新などの機能が使えるようになるみたいです。
非常に面白そうに感じたので、今日はそれを試してみようと思います。
MobXやMaterial UIなどもついでに触れたらいいなと思っています。
配信＆IDE URL
>>128
サーバーサイドレンダリングの機能や、
コード Splitting をデフォルトで行ってくれるのは非常に便利です。
ただすべての機能を提供してくれるわけではないので
結局、自分で Express 用コードを書かないといけない部分も多くあるのですが。
それと Next.js はデータベースへのアクセスを API で行うことを推奨しているようです。
そこそこの規模のサイトになると、そういった構成が増えてくるのかもしれないのですが
自分は小規模なサイトしか作ったことがないので、初めての経験でちょっと不安です。
変更になりました。
配信＆IDE URL
>>128
誰かがエラーを出すと他の開発者にもエラーが出て
開発がスムーズに進まないという問題が発覚しました。
同じ環境でトランスパイルが行われるわけですから
考えてみれば当然なのですが、今まで気づきませんでした。
同時に違うファイルを触れないというのは結構致命的な問題です。
そこで Cloud9 の環境を複数用意して
それぞれの開発者が別のファイルを気軽に触れるようにしてみました。
マスターアカウントでログインできる方は、そちらの環境でも開発が行えます。
git clone で複製しているだけなので、細かいことは気にせずいろいろ試してみてください。
詳しくはこちら
https://gameusers.org/dev/blog/live/
エラーが出る状態のコードは、
リポジトリには保存せず、自分側だけで保存する
自分だけのブランチを作ってもよい
gitの問題じゃなくてCloud9の問題なんです
Cloud9はブラウザでアクセスできるIDEなんですが
そこに複数人でアクセスして、それぞれが違うファイルを編集していると
誰かがエラーを出した段階で、他の人も全員エラーに巻き込まれるんです
どこかにエラー出ているファイルが存在していると
それ込みで全体をトランスパイルするので全部が動かなくなるって寸法です
結局、独立してトランスパイルする環境を複数作らないといけなくなりました
快適な開発環境を作るのはなかなか難しいですね
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
サーバーサイドレンダリング時にスタイルシートが正常に適用されていない。
なぜか遅れて適用される？ため、設定を見直しました。
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
styled-components を使った方がいいような気がしてきました。
複雑な分岐を行う場合などに
クラスの内部にそれ用の function を作ってコンポーネントを返すような構成にすると
styled-jsx がちゃんと反映されません。
Material UI を使うときだけ、styled-components を使うというルールもいまいちしっくりこないので
styled-components に統一した方がいいのかなと思ってきました。
まさかスタイルシートでこんなに悩むとは思いませんでした。
また Next.js のバージョンを 6.0 に変更しました。
babel-plugin-transform-class-properties というプラグインを入れろという警告が出たので
それを入れて設定もしておきました。コードの書き方や、動作には特に変更がないようです。
>>139
サイト制作とは直接関係ないのですが
数日前にAmazonアソシエイトアカウントが意味不明な理由で閉鎖されました…。
お調べしたところ、Amazonアソシエイト・プログラム運営規約を順守されていないことを確認しましたのでご連絡いたします。
貴殿は、書面による明示的な事前の承認を得ずに
ブラウザー・プラグインにおいて、Amazonサイトのコンテンツ、特別リンク
またはその他Amazonサイトに関連する内容を記載しており
Amazonアソシエイト・プログラム参加要件第7項に抵触いたします。
ブラウザプラグインなんて一度も作ったことがないのに
それを理由にして、警告もなくいきなり閉鎖なんてあんまりだ。
返信でどのブラウザプラグインに問題があるのでしょうか？
と問い合わせても具体性のないテンプレ返答が返ってくるだけ。
わずかな収入がさらに削られるという悲劇、本当に悲惨だ。
今日は頑張ってフッターを作ります。
他のサイトのフッターを参考にしながらデザインを考えようと思います。
配信＆IDE URL
>>139
AmazonアソシエイトアカウントがBANされた件ですが
ブログにまとめました。本当にひどい扱いです。
https://gameusers.org/dev/blog/ban-amazon-associate/
今日は頑張ってヘッダーの気に入らない部分を調整して
トップページのデザインを考えようと思います。
配信＆IDE URL
>>139
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
https://goo.gl/ux7Y7F
掲示板のスレッド一覧、検索、コメント部分などを考えています。
http://35.203.143.160:8080/uc/community
アップロードする画像を選択、または投稿する動画のURLを入力した際に
画像がプレビューされるようにします。
複数画像のアップロード、複数動画の投稿に対応しようと考えています。
http://35.203.143.160:8080/uc/community
配信＆IDE URL
>>139
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 パッケージじゃないようなので
納得の行くものになりませんでした。
そこで React 用の Lightbox パッケージを探し出してきて
それで画像を表示させようと思います。
できれば動画もギャラリー的に表示したかったのですが
以下のものは画像しか対応していないようです。
React Images:?https://jossmac.github.io/react-images/
配信＆IDE URL
>>139
表示に反映させるかということを考えなければならなかったので
その間、プログラム配信は行っていませんでした。
だいたいの形は見えてきたので、また再開しようと思います。
現在はユーザーが登録してくれたサムネイルや名前を表示する部分を作成しています。
配信＆IDE URL
>>139
コメントへの返信フォーム、投稿されたコメントを編集するフォームを作成しています。
配信＆IDE URL
>>139
nvm でインストールすると、毎回 npm が v5.6.0 になるんですが、
これはなにか意味があるんでしょうか。
npm もついでにアップグレードしていますが
アップグレードしたらいけないんだろうか。
今日もユーザーコミュニティページの掲示板を作ります。
コメントへの返信フォーム
投稿されたコメントを編集するフォームを作成しています。
配信＆IDE URL
>>139
1つだけ画像がアップロードされた場合は大きく表示し
複数の画像や動画が同時にアップロードされた場合は
小さく表示しようとしています。
コメント投稿・編集、返信用フォームも完成していないので、そちらも作成します。
配信＆IDE URL
>>139
意図せず連動してしまう問題が起こっていたのですが
コピーが参照になっていたせいでした。
昨日1日使ってしまったのですが、冷静に考えたらすぐにわかりました。
もう少し落ち着いて考えないとだめですね。
今日もコメント投稿・編集、返信用フォーム部分を作成します。
配信＆IDE URL
>>139
画像と動画部分については正常に投稿できるようになりました。
いつまでやってるんだって感じですが
まだコメント投稿・編集、返信用フォームも完成していないので
そちらも作成していきます。
配信＆IDE URL
>>139
全然試さずに外観ばかり触っていたので徐々に不安になってきました。
実際、データベースを使ったときに思っていた処理ができなかったら困るので
データベースを利用しながらログインシステムを作ってみます。
これまでインストールされていた 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
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
Node.js は import が使えないため、
クライアント側と同じ書き方ができないのが不便です。
いろいろ調べてはみたのですが
今のところは現実的に import / export 文を使うのは難しいとの結論に達しました。
ES Modules をお試し機能的に使うことはできるようなのですが
安定版として提供されているわけではないので
なにか問題が起こったときに対処ができなくなりそうなので
現時点での利用はやめておこうと思います。
早く使えるようになるといいのですが。
今やろうとしているのはアカウント作成時に
パスワードをハッシュ化して保存し、E-Mail は暗号化して保存する部分です。
配信＆IDE URL
>>139
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12193781232
あとはログインしていないときに、ログアウトページにアクセスした場合、
ログインページに飛ばすといった、リダイレクト機能を追加するだけです。
それが終わったらプレイヤーページ
（ログイン後にアクセスする各ユーザーのホーム）を作成しようと思います。
配信＆IDE URL
>>139
とりあえずプレイヤーカードのデザインを考えようと思います。
プレイヤーカードというのは各ユーザーのプロフィールのようなもので、
カード型のデザインで、プレイヤーの各種情報を表示する機能を持たせる予定です。
できればいろいろなページで使い回せるようなデザインのものにしたい。
配信＆IDE URL
>>139
これからこれをコーディングしていきます。
各ソーシャルサイトへのリンクを掲載でき、
フレンド募集にも活用できるので
なかなか機能的でいいデザインになったのではないかと思います。
https://gameusers.org/dev/blog/wp-content/uploads/2018/02/player-cards.jpg
配信＆IDE URL
>>139
総ム省の、『憲法改正國民投票法』、でググって
みてください。拡散も含め、お願い致します。
レプリカセット構成じゃないと駄目だとのことだったので設定を行いました。
レプリカセットというのは、複数台のデータベースを立ち上げて
それを組み合わせることで安定性をもたらす機能のようです。
同じサーバー内に3つのプロセスを立ち上げて構成しているので
安定性の向上にはあまり期待できない状況ですが
とりあえずトランザクションは使えるようになったので良かったです。
現在はプレイヤーカードのデータベーススキーマを作成して、データを挿入できるようにしようとしています。
配信＆IDE URL
>>139
作っているところで進みが悪くなっています。
Fetch のラッパー関数を作ったり、エラー処理の方法を考え直したり、
アカウント作成・ログイン部分を修正したり、いろいろやっていたのですが
そういった基本的な構成を考えるところで詰まってしまうので
時間がどんどん過ぎていきます。
ひとつ型ができると、それをベースにしていろいろなページを作っていけるのですが
その型を作るのがとても大変ですね。
昨日はページのローディングが終わってからボタンを利用可能にする機能を作っていました。
ページへのアクセス後、現在読み込んでいることを明確に示すために
ローディングアニメーションのアイコンをページのどこかに表示しようと思っています。
配信＆IDE URL
>>139
データベースの構成を見直していました。
MongoDB は配列もオブジェクトもそのまま入れることができ
検索も可能であるが故に、どういう構成にすればいいのか余計に悩んでしまいます。
例えば多言語データの扱いで { ja: ‘日本’, en: ‘Japan’ }
こうやってひとつのオブジェクト内にすべて含ませるか
それとも行ごとにデータを分けて必要なデータだけを読み込むか、どっちにすればいいのか迷ってしまいます。
すべてのデータをひとかたまりにすると、データがバラバラに保存されないメリットもあるのですが
一度すべてを読み込んでから
不必要なデータをそこから排除するという手間がかかってしまうため
結局のところ、行ごとに管理して必要なデータだけを読み込む方がいいように思えてきました。
データベースの構成を考えるのは本当に難しいですね。
あとデータベースの中身は容量の関係上で、GitHub 上に掲載しなくなったのですが
すでにデータがないと正常に動かなくなってきているので
簡単に初期データを挿入できる機能をつけました。
詳しくは GitHub の解説をチェックしてください。
今は各ユーザーの名前やサムネイルが表示されている部分にボタンを表示して
それを押すことでプレイヤーカード（プロフィール的なもの）を
ダイアログ（モーダル）で表示する機能を作っています。
配信＆IDE URL
>>139
綺麗にIDを表示したい！
配信＆IDE URL
>>139
バンドルファイルが大きくなっていることも関係しているのか、読み込みが正常に終わりません。
VPS は仮想なのでアクセスが集中する時間帯は重くなったりもするのですが
GCE も同じなんですね。クラウドはそういう問題とは縁がないのかなと考えていたのですが
そういうわけではないんでしょうか。というかそもそも GCE はクラウドじゃない？？
1年間無料で使える枠であれこれ文句言うのも申し訳ないので
そろそろ VPS に環境を移したほうがいいのかなと考えています。
とにかく夜になると開発ができなくなるのはまずい。
今は ID を登録するフォームを作成しています。
Game Users では何度も同じ ID を入力しなくていいようなシステムにしているのですが
そこのフォーム部分でバリデーションの基本的な型を生み出そうとしています。
テキストフィールドに文字を入力すると
文字数が表示されて、エラーの警告も表示されるようにしたい。
配信＆IDE URL
>>139
調べてみたところサーバーのせいではなく利用している
プロバイダーが原因である可能性が高くなってきました。
現在、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 を導入してリバースプロキシ？
で設定をしないといけないようです。今後はそちらの勉強も頑張っていこうと思います。
http://dev-1.gameusers.org:8080/pl/user1
開発ブログ
https://gameusers.org/dev/blog/live/
どんな利点があるのでしょうか。
どんな利点があるのでしょうか。
現状ではそこまで大きな利点はないんじゃないかと思います。
IPv6に対応したいと思ったのは、プロバイダー関連の話になるのですが
自分の場合、新しく申し込んだプロバイダーの設定が一時うまくいかなくて
IPv4 over IPv6 接続が機能していなかったのです。
（IPv4にしか対応していないサイトも、IPv6の経路を使うことによってアクセスが速くなる機能です）
そのためYouTube、Google、NetflixなどのIPv6対応サイトの場合は
IPv6接続ができて速度も非常に快適だったのですが
IPv4にしか対応していないサイトは旧式の接続で、速度も遅いままだったのです。
そういう環境の人はあまりいないと思うんですが
IPv6に対応しておくことで、誰でも快適にアクセスができるようになるのと
対応サイトは、上記有名サイトのように軽くて最先端なサイトのイメージがあるので
できれば早い段階から、うちもその仲間入りをしたい！と思ったのです。
現在、ウェブサイトのSSL化が急激に進んでいるように
いずれどのサイトもIPv6に対応するようになるんじゃないかと思うので
今のうちから勉強しつつやっておこうと思いました。
そんな感じですね。無理してやる必要はまったくないと思うんですが
ちょっとだけメリットを感じるユーザーもいるので
利用できる環境なら、サーバーの設定をいじるついでに
やっておくといいんじゃないでしょうか。
プログラム配信中、詳しくは
>>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
プログラム配信中
https://youtu.be/9HVRWHiPq6A
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
それ用に別途コードを書かなければならない必要が生まれます。
しかも 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
https://youtu.be/y7yBWMuIqTU
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
これまで状態管理に MobX を利用してきたのですが、
Hook を勉強した結果、これまでのやり方を見直すべきなのではないかと思いました。
Hook を利用してローカルステートで書くのは
とてもわかりやすく、処理が散らばらない点も素晴らしいと感じました。
現状、MobX 上ですべてのステート、すべての処理をまとめているのですが、このやり方はやめるべきじゃないかと。
状態管理の例としてよくあるカウンターの数値を増減させるサンプルのようなものでも
自分はこれまで外部のストアにすべて書き出していました。
でも Hook を学び、コンポーネント内にステートも処理も入れ込んでしまう書き方を試してみたところ
こちらの方が全然扱いやすいように思えるのです。
CSS では emotion というライブラリを利用しているのですが
こちらも HTML のタグにそのままスタイルを書き込んでいきます。
最初は違和感も大きかったのですが、しばらく使ってみると、とても扱いやすいことに気づきました。
配信URL
https://youtu.be/Fcdv9UXVAFU