Game Users 開発ノート – 一緒に開発しよう！

マスターアカウント（master-1～5）でログインできる方は、以下の Cloud9 環境も利用できます。同じ環境で、同時に違うファイルを編集した場合、トランスパイル時にエラーが出ると、他の人もそのエラーに巻き込まれてしまうので、同じ開発環境を複数用意しました。いろいろ試してみたい方は、こちらの環境（URL）にアクセスして、好きなようにファイルを作成・編集してみてください。

git cloneで複製しているだけなので、ぐちゃぐちゃになっても大丈夫です。

※ 現在停止中です。

こちらの環境はメインの環境を定期的にクローンしていくつもりなので、継続して編集したいファイルがある場合は、手動でメイン環境の方にファイルをコピーしてもらうか、手元に作ったファイルをダウンロードしておいてください。クローン後にアップロードしてもらって制作の続きを行ってもらえればと思います。

別の環境とのファイル共有方法ですが、すごくアナログな方法しか思いつかなかったので、もっとスマートな方法があったら、ぜひ教えてください。

共同開発用リポジトリ

https://github.com/gameusers/collaboration

メモ

2019/8/28

二ヶ月以上、掲示板を作っています。

サイト全体の画像や動画の扱い方（投稿・表示）を統一できるようにしようとしているので、多少はしょうがないにしても、いろいろ時間がかかりすぎてやばいです。

普通の人はもっとサクッと完成させるもんなんでしょうか？やっぱり自分自身プログラマーとしての能力がアレなんかなと思わざるを得ません。

ただそれでもめげずに頑張りたい！

2019/6/17

ユーザーが作成できるコミュニティページの制作を進めています。前に掲示板のガワだけは作っていたのですが、開発を進めていくうちに仕様の変更で動かなくなっていたので、それを直しつつ、データベースの構成を考えています。

データベースの知識に自信がない上、MongoDBの扱いにも不慣れなため、どのように構成するといいのか、なかなか見えてきません。

1件1件データを取得するコードをループさせれば望みのものは取得できますが、それだと当然重くなるわけじゃないですか。だからできるだけ少ない回数でデータを取得するコードを書かなければならないのですが、それが難しい。多言語に対応することも考えたりするとわけがわからなくなって、頭がごちゃごちゃになります。

2019/6/3

Next.js で styled-components + Material UI を使う場合、それ用に別途コードを書かなければならない必要が生まれます。しかも Material UI がアップデートすると動かなくなったりするので、とても面倒な組み合わせです。

今回もまた Material UI を Ver.4 にアップデートしてみたところ正常に動かなくなったため、なにか他に方法はないのかと調べてみました。すると emotion という CSS in JS の新しめのライブラリを発見することができました。なんと Material UI では emotion を特別なことをせずにそのまま使えるようなのです。実際、使用してみたところ styled-components との組み合わせよりも、全然相性がいい気がします。

Material UI にスタイルを当てる場合、Material UI がデフォルトで用意している書き方を使う方法もあるのですが、自分はその書き方が気に入らなかったのと、サイト全体のスタイルシートの書き方を統一する意味も込めて、これまでは styled-components を採用していました。

ですが今回使ってみて emotion の感触が良かったので、こちらに移行することにしました。後発のライブラリなので機能的にもいいとこ取りをしていて、とても優秀です。同じように Material UI を利用している方はチェックしてみて欲しいですね。いろいろ楽になると思います。

emotion: https://emotion.sh/docs/introduction

2019/5/22

記事の更新が疎かになってしまいました。

アカウント作成、ログイン、ログイン後のページでIDやパスワードの変更など、基本的な機能はほぼ実装し終わりました。途中、カスタムエラーの投げ方を学んだり、ログの保存方法を勉強したり、いろいろあって無駄に時間もかかりましたが、各ページのベースになる部分は徐々に固まってきています。

次は横幅の広いデバイスでアクセスした場合に、2カラムでコンテンツを表示できるようにしようと思っています。サイドに掲示板のスレッド一覧を表示したり、サイドに表示するコンテンツがない場合は、サイト内の更新情報をカードで表示したりしたい。

そしてモバイルの場合は、ドロワーメニューで必要な情報を表示しようと考えています。

2019/3/20

やっとですが、バリデーションを含めたフォームのガワはできあがりました。次は API に POST でデータを送って、サーバーに保存する部分に取り組もうと思います。単純なテキストデータの保存はすでにできているのですが、画像の処理はまだできていません。srcset に対応するために、複数のサイズにリサイズして、圧縮するという作業が必要になります。

Jimp（リサイズ用パッケージ）

imagemin（圧縮用パッケージ）

良さげなパッケージを発見したので、これらを使わせてもらって実現しようと思います。

2019/2/27

夜に開発サーバーが重たくなる問題ですが、プロバイダーが悪いという結論に至りました。bb.excite がここのところ速度の低下が激しく、人が多くなる時間帯はまともにページを表示することができなくなっていたのです。そこで IPv6 IPoE 接続のできるプロバイダーに変更したところ、夜も快適に開発ができる状態に戻りました。

当初 GCE のせいにしていたのは良くなかったですね。

約一年間無料で使わせてもらった GCE ですが、無料期間が終わると、当然有料で継続しなければならなくなるため、他の VPS に開発サーバーを移すことにしました。理由は料金的な問題です。やはりクラウドは高級感のあるお値段になってしまうので、予算的に VPS しか選択肢がなくなりました。

いろいろ調べてみて、Amazon がやっている Lightsail も魅力的に感じましたが、IPv6 の IP が割り振られないらしい？ので、結局 IPv6 対応サイトにできる、さくら VPS になりました。今回の件で、Game Users も IPv6 でアクセスできるサイトにしたいと強く感じたので、練習も兼ねて開発サーバーも IPv6 でのアクセスができるようにしておこうと思いました。

IPv6 対応のついでに DNS でサブドメインに割り振っておいたので、URL が変わりました。ドメインでのアクセスになったのにポート番号を入力しなければならないのは、ちょっとかっこ悪いですが、ここもまた Nginx を導入してリバースプロキシ？で設定をしないといけないようです。今後はそちらの勉強も頑張っていこうと思います。

2019/2/4

夜9時になると、サーバーが重いとこの前書いたのですが、調べてみたところサーバーのせいではなく利用しているプロバイダーが原因である可能性が高くなってきました。

現在、webpack で固めたバンドルファイルのサイズが 4～6MB くらいなのですが、契約しているプロバイダーは夜になると、速度が 5Mbps 以下になってしまうのです。つまり速度の異常な低下で、バンドルファイルをダウンロードしきれないという状況になっているようです。

無料でお試しができる他のプロバイダーに申し込んで切り替えてみたところ、夜でも開発中のページが表示できるようになりました。ただそのプロバイダーもあまり速度が速いところではないため、表示が遅いことは遅いのですが、現在契約している bb.excite よりはずっとましな状況です。

bb.excite は 500円ながらも、これまでは普通に使うことはできていたのですが、最近はそれすら無理な速度になってきています。速度を求める用途がなかったので、500円プロバイダーでも十分だったのですが、さすがにバンドルファイルすら正常にダウンロードできない状態になってしまったのは非常に辛いです。このままでは開発に影響が出るため、IPv6 IPoE の利用を検討しています。いいプロバイダーが見つかればいいのですが。

開発は現在、ID 登録フォームをほぼ完成させたところです。今後、自分でフォームのバリデーションをひとつひとつ書いていくのは時間がかかるため、バリデーションパッケージを選定＆利用していこうと思っています。

2019/1/31

現在、Cloud9 を GCE で運用しているのですが、夜9時頃になるととても重くなります。バンドルファイルが大きくなっていることも関係しているのか、読み込みが正常に終わりません。

VPS は仮想なのでアクセスが集中する時間帯は重くなったりもするのですが、GCE も同じなんですね。クラウドはそういう問題とは縁がないのかなと考えていたのですが、そういうわけではないんでしょうか。というかそもそも GCE はクラウドじゃない？？

1年間無料で使える枠であれこれ文句言うのも申し訳ないので、そろそろ VPS に環境を移したほうがいいのかなと考えています。とにかく夜になると開発ができなくなるのはまずい。

※ 後日わかったのですが、GCE のせいではない可能性が！

今は ID を登録するフォームを作成しています。Game Users では何度も同じ ID を入力しなくていいようなシステムにしているのですが、そこのフォーム部分でバリデーションの基本的な型を生み出そうとしています。テキストフィールドに文字を入力すると、文字数が表示されて、エラーの警告も表示されるようにしたい。

2018/12/26

MongoDB でリレーショナル DB と同じような join ができることを知って、データベースの構成を見直していました。MongoDB は配列もオブジェクトもそのまま入れることができ、検索も可能であるが故に、どういう構成にすればいいのか余計に悩んでしまいます。

例えば多言語データの扱いで { ja: ‘日本’, en: ‘Japan’ } こうやってひとつのオブジェクト内にすべて含ませるか、それとも行ごとにデータを分けて必要なデータだけを読み込むか、どっちにすればいいのか迷ってしまいます。

すべてのデータをひとかたまりにすると、データがバラバラに保存されないメリットもあるのですが、一度すべてを読み込んでから、不必要なデータをそこから排除するという手間がかかってしまうため、結局のところ、行ごとに管理して必要なデータだけを読み込む方がいいように思えてきました。

データベースの構成を考えるのは本当に難しいですね。

あとデータベースの中身は容量の関係上で、GitHub 上に掲載しなくなったのですが、すでにデータがないと正常に動かなくなってきているので、簡単に初期データを挿入できる機能をつけました。詳しくは GitHub の解説をチェックしてください。

今は各ユーザーの名前やサムネイルが表示されている部分にボタンを表示して、それを押すことでプレイヤーカード（プロフィール的なもの）をダイアログ（モーダル）で表示する機能を作っています。

2018/11/28

プレイヤーカード（各ユーザーのプロフィールカードのようなもの）を作っているところで進みが悪くなっています。

Fetch のラッパー関数を作ったり、エラー処理の方法を考え直したり、アカウント作成・ログイン部分を修正したり、いろいろやっていたのですが、そういった基本的な構成を考えるところで詰まってしまうので、時間がどんどん過ぎていきます。ひとつ型ができると、それをベースにしていろいろなページを作っていけるのですが、その型を作るのがとても大変ですね。

昨日はページのローディングが終わってからボタンを利用可能にする機能を作っていました。ページへのアクセス後、現在読み込んでいることを明確に示すために、ローディングアニメーションのアイコンをページのどこかに表示しようと思っています。

2018/11/5

MongoDB でトランザクションが使えるように設定しました。レプリカセット構成じゃないと駄目だとのことだったので、以下の記事を参考にして設定を行いました。

レプリカセットというのは、複数台のデータベースを立ち上げて、それを組み合わせることで安定性をもたらす機能のようです。同じサーバー内に3つのプロセスを立ち上げて構成しているので、安定性の向上にはあまり期待できない状況ですが、とりあえずトランザクションは使えるようになったので良かったです。

現在はプレイヤーカードのデータベーススキーマを作成して、データを挿入できるようにしようとしています。

2018/10/16

プレイヤーカードのデザインが完成しました。これからこれをコーディングしていきます。各ソーシャルサイトへのリンクを掲載でき、フレンド募集にも活用できるので、なかなか機能的でいいデザインになったのではないかと思います。

2018/10/9

プレイヤーページ（ログイン後に表示されるホーム）の作成に移ります。とりあえずプレイヤーカードのデザインを考えようと思います。プレイヤーカードというのは各ユーザーのプロフィールのようなもので、カード型のデザインで、プレイヤーの各種情報を表示する機能を持たせる予定です。

できればいろいろなページで使い回せるようなデザインのものにしたい。

2018/10/4

ログインとログアウト機能はほぼ完成しました。あとはログインしていないときに、ログアウトページにアクセスした場合、ログインページに飛ばすといった、リダイレクト機能を追加するだけです。

それが終わったらプレイヤーページ（ログイン後にアクセスする各ユーザーのホーム）を作成しようと思います。

2018/9/25

ログイン機能の reCAPTCHA ＆ CSRF 対策のコードをモジュール化して分離しました。Node.js は import が使えないため、クライアント側と同じ書き方ができないのが不便です。いろいろ調べてはみたのですが、今のところは現実的に import / export 文を使うのは難しいとの結論に達しました。

ES Modules をお試し機能的に使うことはできるようなのですが、安定版として提供されているわけではないので、なにか問題が起こったときに対処ができなくなりそうなので、現時点での利用はやめておこうと思います。

早く正式に使えるようになるといいのですが。

今やろうとしているのはアカウント作成時に、パスワードをハッシュ化して保存し、E-Mail は暗号化して保存する部分です。

2018/9/21

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 ミドルウェアを利用しようとしています。

2018/9/10

ログイン、アカウント作成部分を作っています。

クライアント側から POST でログイン ID、ログイン Password を送信して、ユーザー登録を行おうとしたのですが、Fetch で new FormData を利用してデータを送信しようとすると、Node.js + Express 側で POST 情報が受け取れなくなりました。

これまでは body-parser で POST 情報をパースしていたのですが、そのパッケージだと new FormData で作成した情報は受け取れないようなのです。調べてみたところ new FormData は multipart/form-data なので、body-parser では処理ができないとのことでした。そこで multer をインストールして POST 情報を処理できるようにしました。

Node.js + Express は本当にめんどくさいですね。PHP ではなにも考えずにできていたことが簡単にできなくなっています。裏側の理屈を理解できている人なら原因がすぐにわかるのかもしれませんが、自分レベルだといちいち引っかかってしまうのが苦しいところです。

2018/9/3

MongoDB をインストールしてみたものの、全然試さずに外観ばかり触っていたので徐々に不安になってきました。実際、データベースを使ったときに思っていた処理ができなかったら困るので、データベースを利用しながらログインシステムを作ってみます。

これまでインストールされていた MongoDB は Ver.3 だったのですが、Ver.4 にアップデートしました。トランザクションが使えるようになったらしいです。

2018/8/24

コメントの投稿フォームと、投稿済みのコメントの画像表示部分が、意図せず連動してしまう問題が起こっていたのですが、コピーが参照になっていたせいでした。昨日1日使ってしまったのですが、冷静に考えたらすぐにわかりました。

もう少し落ち着いて考えないとだめですね。

コメント投稿・編集、返信用フォームも完成していないので、そちらも作成します。

2018/8/23

掲示板の画像表示部分を調整しています。1つだけ画像がアップロードされた場合は大きく表示し、複数の画像や動画が同時にアップロードされた場合は、小さく表示しようとしています。

コメント投稿・編集、返信用フォームも完成していないので、そちらも作成します。

2018/8/20

Node.js のバージョンを8.11.4にアップグレードしました。nvm でインストールすると、毎回 npm が v5.6.0 になるんですが、これはなにか意味があるんでしょうか。npm もついでにアップグレードしていますが、アップグレードしたらいけないんだろうか。

今日もユーザーコミュニティページの掲示板を作ります。コメントへの返信フォーム、投稿されたコメントを編集するフォームを作成しています。

2018/8/6

ストアの構成を見直していました。APIからどういう形式でデータを受け取って、表示に反映させるかということを考えなければならなかったので、その間、プログラム配信は行っていませんでした。だいたいの形は見えてきたので、また再開しようと思います。

現在はユーザーが登録してくれたサムネイルや名前を表示する部分を作成しています。

2018/7/19

Swiper で Lightbox（複数の画像を表示するギャラリー）的な機能を実装しようと思ったのですが、Swiper は本格的な Lightbox パッケージじゃないようなので、納得の行くものになりませんでした。そこで React 用の Lightbox パッケージを探し出してきて、それで画像を表示させようと思います。

できれば動画もギャラリー的に表示したかったのですが、以下のものは画像しか対応していないようです。

React Images: https://jossmac.github.io/react-images/

2018/7/17

掲示板にアップロードされた画像や動画を表示する部分を作成します。画像＆動画がひとつだけ投稿された場合の表示はすでに完成しています。次は複数の画像、動画が投稿された場合の表示部分を Swiper という Lightbox を利用しながら実装しようと思います。

Swiper: http://idangero.us/swiper/
react-id-swiper: https://github.com/kidjp85/react-id-swiper

2018/7/11

掲示板の画像アップロード・動画投稿機能を作成中です。アップロードする画像を選択、または投稿する動画のURLを入力した際に、画像がプレビューされるようにします。複数画像のアップロード、複数動画の投稿に対応しようと考えています。

2018/6/19

トップページ、ゲームコミュニティ一覧、ユーザーコミュニティ一覧、ログインページのデザインが終わり、いよいよメイン機能であるコミュニティページのデザインを行うところまで来ました。

掲示板の使い勝手が悪いので、改善案を出してもらいながら、新しいデザインを考えようと思います。

2018/6/4

デザインを考えているのですが、機能性といいデザインを両立するのが大変で、かなりしんどいです。基本的に既存のものの切り貼りや、ちょっとしたアレンジで乗り切っていますが、ゼロから想像するセンスがないため、いろいろな面で妥協しないといけなくなるのが辛いです。

現在はカード型デザインでゲームの一覧を表示、検索もできるようになるページのデザインを考えるところです。

2018/5/23

Material UI バージョン 1.0.0 に対応しました。これまでと書き方が変わっていたので、戸惑う方もいるかもしれません。

import Button from '@material-ui/Button';
　　　↓↓↓
import Button from '@material-ui/core/Button';

開発版が終わって、core をつけなければならなくなりました。

あと Next.js を 6.0 にしてから、getInitialProps （最初に処理される constructor みたいなもの）が正常に動かなくなっていたので、こちらのページを参考に裏側の処理を書き直しました。

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Node.js なのですが、ブラウザの表示サイズをサーバー側で取得することができないようです。PHP はできていたような気がするのですが。PC でアクセスしたときとスマホでアクセスしたときに表示の違いを設けたいのですが、CSS のメディアクエリですべてを処理するのは大変なので、JavaScript のサーバー側でも取得したいのです。でも方法がわからず。

2018/5/9

スタイルシートですが、Next.js がデフォルトに定めている styled-jsx よりも styled-components を使った方がいいような気がしてきました。

複雑な分岐を行う場合などに、クラスの内部にそれ用の function を作ってコンポーネントを返すような構成にすると、styled-jsx がちゃんと反映されません。Material UI を使うときだけ、styled-components を使うというルールもいまいちしっくりこないので、styled-components に統一した方がいいのかなと思ってきました。

まさかスタイルシートでこんなに悩むとは思いませんでした。

また Next.js のバージョンを 6.0 に変更しました。babel-plugin-transform-class-properties というプラグインを入れろという警告が出たので、それを入れて設定もしておきました。コードの書き方や、動作には特に変更がないようです。

2018/4/23

Next.js で Material UI を使う方法ですが、前回やっていた方法では、サーバーサイドレンダリング時にスタイルシートが正常に適用されていない。なぜか遅れて適用される？ため、設定を見直しました。

上記サンプルを参考にしながら、設定してみました。

Next.js はデフォルトで styled-jsx というスタイルシートの記述法を採用しているのですが、それを使った場合はサーバーサイドレンダリングする際に、Material UI のコンポーネントに正常にスタイルシートが適用されず、styled-components を使うと正常に適用されるという状況になりました。

設定方法が悪いだけかもしれないのですが、今のところ対処法がわからないので、Material UI のコンポーネントを使うときだけそうしています。

Next.js で Material UI を使う際の書き方がわかる方おられましたら、ぜび教えてください。

2018/4/20

Next.js で Material UI を使おうとしたのですが、Material UI のコンポーネントにスタイルシートを適用する方法がわからず1日を費やしてしまいました。

Material UI の公式ページに書かれている方法と、Next.js が推奨しているスタイルシートの書き方が違うため、どう書けば正常に表示されるのか理解するのに時間がかかりました。

結局、以下の書き方でいけました。Material UI のコンポーネントはグローバルスコープのスタイルシートが必要なようです。

<style jsx global>{`
  .list-1 {
    background-color: #81F7F3;
  }
  .list-2 {
    background-color: pink;
  }
`}</style>

2018/4/18

複数人の開発者で同時に各ファイルを編集した場合、誰かがエラーを出すと他の開発者にもエラーが出て、開発がスムーズに進まないという問題が発覚しました。

同じ環境でトランスパイルが行われるわけですから、考えてみれば当然なのですが、今まで気づきませんでした。同時に違うファイルを触れないというのは結構致命的な問題です。

そこで Cloud9 の環境を複数用意して、それぞれの開発者が別のファイルを気軽に触れるようにしてみました。

マスターアカウントでログインできる方は、そちらの環境でも開発が行えます。git clone で複製しているだけなので、細かいことは気にせずいろいろ試してみてください。

2018/4/17

Next.js を試してみたところ、とても優秀だったので採用することに決めました。サーバーサイドレンダリングの機能や、Code Splitting をデフォルトで行ってくれるのは非常に便利です。ただすべての機能を提供してくれるわけではないので、結局、自分で Express を利用したサーバー用コードを書かないといけない部分も多くあるのですが。

それと Next.js はデータベースへのアクセスをすべて API で行うことを推奨しているようです。そこそこの規模のサイトになると、そういった構成が増えてくるのかもしれないのですが、自分は小規模なサイトしか作ったことがないので、初めての経験でちょっと不安です。

またそれに際して、Cloud9 が提供している URL では、 Fetch → API でのデータ取得が正常にできない問題が出てきました（なぜか Status 499 のエラーが出てしまいます）そのため、サーバー側でファイアーウォールのポートを開けて、普通のウェブサイトとして制作中のサイトにアクセスできるようにしました。

https://df44294c8853471b8ddd609c09af06f3.vfs.cloud9.us-west-2.amazonaws.com/

↓

http://dev-1.gameusers.org:8080/

こちらのアドレスでは、Fetch でのデータ取得が正常に行えます。

React の状態管理で MobX を使ってみました。Redux よりコードの記述量がずっと減る感じなので、Next.js と一緒に採用してみます。後は Material UI の使い方を学んで、デザインを触りながら作っていこうと思います。

2018/4/9

勉強した本の独自の書き方になっていたので、express-generator をディレクトリ構成のベースにしました。

Webpack の最新バージョンがいつの間にか 4 になっていたので、アップデートしました。webpack.config.js もバージョン4に合わせて書き直しました。ビルドが速くなっているそうです！

React が正常に表示されるかテストしてみました。とりあえず Hello World を表示することができたので良かったです。React のサーバーサイドレンダリングに興味があるので、そちらについて調べてみたのですが、手間が非常にかかるようで、やるべきかやらないべきか悩んでいます。

React は状態管理に Redux を使用していたのですが、コードを書く量が多く、学習コストも高いため、同じ状態管理機能を持った MobXというライブラリに興味を持っています。こちらもいろいろ調べてみようと思います。

2018/4/3

IDE のユーザー削除を間違えて行ってしまいました。本来は IDE から削除してから、AWS の IAM でユーザーを削除するという順番で行わければならないのに、先に IAM でユーザーを削除してしまったので、IDE から削除ができなくなってしまいました。

修正方法がわからず、環境を作り直すことになったので、IDE などの URL が変更になりました。ブラウザのお気に入りに入れていた方は、お手数ですが URL の変更をよろしくお願いします。

2018/3/30

GCE 上に Cloud9 を構築していますが、あまりにも重たいのでサーバーをスペックアップしました。参加者が3人集まると止まるので。

f1-micro（vCPU x 1、メモリ 0.6 GB）
↓
g1-small（vCPU x 1、メモリ 1.7 GB）

無料で使えるクレジットが30000円分あるので、しばらくは大丈夫そうです。

node.js のバージョンを 8.11.1 にし、.bashrc に source ~/.nvm/nvm.sh を記述して、ターミナルを立ち上げるたびにパスを通さなくてもいいようにしました。

Node.js を勉強するために利用した本

2 冊とも読み終わりました。

JavaScriptでのWeb開発 ~ Node.js + Express + MongoDB + ReactでWebアプリを開発しよう ~ その１（改訂版）

JavaScriptでのWeb開発 ~ Node.js + Express + MongoDB + ReactでWebアプリを開発しよう ~ その２

Kindle Unlimited を契約している方は読み放題で読めます。

勉強した項目

Node.js のサーバー起動
Hello World の表示
MongoDBの導入、データの挿入・表示
画像のアップロード機能
Passport（ログイン用パッケージ）を利用して、ID & Passord のログインと SNS 認証でのログイン
Winston（エラーログ記録パッケージ）の利用方法
404 ページの表示
エラー処理
Helmet（セキュリティ用ヘッダーを設定するパッケージ）の設定
CSRF対策、トークンをフォームページの <input type=”hidden”> に表示させてチェックする方法
CORS（クロスオリジンリクエスト）の設定、開発環境では正常に機能しなかったのでよくわからず
HTTPS の設定、本番環境じゃないので後回しにしました

Teletype portal ID（利用停止中）

気軽に参加してください！

portal ID:

Teletype for Atom

Atom を使ってコラボレーションができる Teletype というプラグインを使ってみようと思います。実際どんな使用感なのかわからないので手探りになりますが。

※ 利用にはGitHubのアカウントが必要になります。

Teletype for Atom

Teletypeの使い方

1. Teletype プラグインをインストールする

まずは Atom に Teletype のプラグインをインストールしてください。

2. トークンを取得する

以下のページにアクセスして Authorize atom というボタンを押してください。トークンを取得するページに移動します。

https://teletype.atom.io/login

3. トークンを取得します

モザイク部分にトークンが表示されます。それをコピーしましょう。

4. Atom の電波塔アイコンをクリックしてトークンを貼り付けます

Atom の右下に電波塔のアイコンがあるので、そこをクリックしましょう。画像のような画面が表示され、トークンを入力するフォームが表示されます。そこにさきほどコピーしたトークンを貼り付けましょう。

そして Sign in ボタンを押すと、Teletype の利用準備は完了です。

5. portal ID を入力して参加してください

再度、電波塔のアイコンをクリックして、Join a portal と書かれた部分をクリックすると、portal ID を入力するフォームを開けます。そこにこの記事上部に掲載している portal ID を入力して Join ボタンを押してください。

これでプログラム配信のポータルに参加できます。開発に参加したり、アドバイスをしたりしなくても全然構いません。Teletype を試しに触ってみたいという理由でもなんでもいいので、気軽に参加してみてください。

2020年6月8日2020年6月8日

React Hook を利用して状態管理を見直す。Unstated Next？

React Hook について少し勉強してみました。

これまで状態管理に MobX を利用してきたのですが、Hook を勉強した結果、これまでのやり方を見直すべきなのではないかと思いました。

Hook を利用してローカルステートで書くのは、とてもわかりやすく、処理が散らばらない点も素晴らしいと感じました。現状、MobX 上ですべてのステート、すべての処理をまとめているのですが、このやり方はやめるべきじゃないかと。

状態管理の例としてよくあるカウンターの数値を増減させるサンプルのようなものでも、自分はこれまで外部のストアにすべて書き出していました。でも Hook を学び、コンポーネント内にステートも処理も入れ込んでしまう書き方を試してみたところ、こちらの方が全然扱いやすいように思えるのです。

CSS では emotion というライブラリを利用しているのですが、こちらも HTML のタグにそのままスタイルを書き込んでいきます。最初は違和感も大きかったのですが、しばらく使ってみると、とても扱いやすいことに気づきました。

<div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >

こんな感じです。.css ファイルとしてすべて書き出すよりも、その場で済むものはその場に書いた方がいい。状態の管理についてもそういう考え方に傾きつつあります。

そこそこ作り込んでから方針変換を行うのはしんどいですが、納得できない書き方のまま進めていくのもモチベーションの維持が難しくなりそうなので、思い切って Hook をベースにした書き方に変えるべきじゃないかと。

いろいろ調べてみたところ、Unstated Next という、Hook を利用して状態を管理するライブラリーを発見したので、これからこれについて学んでみようと思います。これが良さげなら MobX は卒業か？

2020年3月11日2020年3月11日

Nginx の導入と SSL への対応

開発中のサイトをオープンにして誰でもチェックできるようにしながら開発をしているのですが、ドメインを設定したにも関わらず、これまではポート番号をつけてアクセスしなければなりませんでした。

http://dev-1.gameusers.org:8080/
　↓
https://dev-1.gameusers.org/

ずっと不格好なままだったのですが、今回やっとこの形にできました。

Web Push （ブラウザに届く通知）を利用しようと思い、いろいろ調べていたところ、Service Worker を設定しないといけなくなりました。ですがその Service Worker は、SSL 対応のサイトか localhost でないと動かないとのことだったので、急遽開発サイトも SSL に対応しようと思ったのです。

Nginx はそのうちなんとかしようと思っていたのですが、開発上避けて通れなくなったので、調べながらインストール＆設定を行いました。

とりあえず動かしただけなので、細かい設定は行っていませんが、ポート番号を消すくらいなら思っていたよりも簡単でしたね。大昔に触った Apache がややこしかったので身構えすぎました。

そして Let’s Encrypt を利用させてもらい、SSL にも対応完了。晴れて一般的なサイトと同じ URL のサイトになれました。（certbot の Nginx 用設定を利用すると簡単です –nginx）

参考にしたサイト

https://certbot.eff.org/lets-encrypt/ubuntubionic-nginx
https://qiita.com/yawn_yawn_yawn_/items/c436343f544d13e3be1d
https://blog.tilfin.net/2019/04/08/setup-certbot-for-nginx-on-ubuntu/

サイトの完成形をチェックすべく production build も試してみたところ、めちゃくちゃ表示が軽快でびっくりしました。npm run dev の方は重くてもっさり感がすごいのに、ファイル圧縮後の npm start は快適すぎますね。

静的ファイルを表示してるのかと思うくらい軽くて嬉しいです。データベースにほとんどデータが入っていないので軽いということもあるのですが、自分に特別なスキルがあってそうできているわけでもないので、Next.js が優秀なんでしょうか？

なにが優れているのかわかりませんが、いいものを無料で使わせてくれている世界の優秀な人たちに感謝を忘れないようにしないといけません。

ちなみに普段は開発用ビルドでサイトを表示しているので、重たくてもガッカリしないでください。

2018年5月17日2018年5月17日

AmazonアソシエイトアカウントがBANされました

先日、突然アカウントが BAN されました。警告もなく本当に突然のことでした。まったく覚えのないことで利用を停止され、わずかな額ですが、これまでの紹介料もなかったことにされました。

提示された理由に覚えがないことを伝え、この決定が正しいのか問い合わせましたが、簡単なテンプレメールが返ってくるだけです。

1 回目の Amazon からのメール

いつもAmazon アソシエイト・プログラムをご利用いただき、誠にありがとうございます。

お調べしたところ、Amazonアソシエイト・プログラム運営規約を順守されていないことを確認しましたのでご連絡いたします。

貴殿は、書面による明示的な事前の承認を得ずに、ブラウザー・プラグインにおいて、Amazonサイトのコンテンツ、特別リンク、またはその他Amazonサイトに関連する内容を記載しており、Amazonアソシエイト・プログラム参加要件第7項に抵触いたします。

Amazonアソシエイト・プログラム運営規約については、以下のURLをクリックしてご確認ください。
https://affiliate.amazon.co.jp/gp/associates/agreement

早急に貴サイトから特別リンクを含むすべてのAmazonコンテンツを削除し、使用を中止してください。Amazon.co.jpはその裁量の下で、予告なくご利用中の別アカウントまたは今後作成されるアカウントを閉鎖し、紹介料の支払いを停止する権利を留保します。

ご利用ありがとうございました。

Amazon.co.jp カスタマーサービス　アソシエイト・プログラムスタッフ

1 回目の返信

ご連絡ありがとうございます。

突然のことで驚いているのですが、Amazonアソシエイト・プログラム参加要件第7項とは、以下でよろしいのでしょうか。

7.
甲乙間で別途本参加要件を参照した書面による合意がない限り、乙は、以下の媒体上でまたはそれに関連して、アソシエイト・プログラム・コンテンツもしくは特別リンクを使用またはアマゾン・サイトにリンクさせてはなりません。

(a) コンピューター、携帯電話、タブレットその他の携帯端末を含むあらゆるデバイス上のあらゆるクライアントソフトウェアアプリケーション（ブラウザプラグイン、ツールバー、拡張機能、コンポーネント、ヘルパーオブジェクトその他エンドユーザが実行またはインストール可能なアプリケーション）。ただし、承認モバイル・アプリは除きます。

(b) あらゆるセットトップボックス（地上・BS・CATV受信用ボックス、デジタルビデオレコーダー、ストリーミングビデオプレイヤー、ブルーレイプレイヤー、DVDプレイヤー等）またはインターネットテレビ（Google TV、ソニーBravia、パナソニックViera Cast、Vizioインターネットアプリケーション等）。

https://affiliate.amazon.co.jp/promotion/participationrequirements

具体的にはどのブラウザプラグインについて、違反がなされているとお考えなのでしょうか。ブラウザプラグインというのは、例えばGoogle Chromeの拡張機能などを指すのでしょうか。

当方としましては、ブラウザプラグインを作成したことがなく、またなんらかのプラグインを利用してアフィリエイトリンクを表示させた覚えもないため、非常に困惑しております。

2 回目の Amazon からのメール

Amazonアソシエイト・プログラムにお問い合わせいただき、ありがとうございます。

貴殿のアカウントは、Amazonアソシエイト・プログラム運営規約違反により、アカウント閉鎖および支払差止を実施させていただきました。閉鎖となったアカウントの復帰、および該当のアカウントについての紹介料の支払いは行われません。

アソシエイト · プログラムへ参加を希望される場合は改めての申し込みをお願いします。
https://affiliate.amazon.co.jp/

ただし、アソシエイト・プログラムへの参加にあたりましてはサイト内容を審査しておりますため、サイト内容が審査基準に合致しない場合は参加の承認は致しかねます.。あらかじめご了承いただきますようお願いいたします。

Amazon アソシエイト・プログラムをご利用いただき、ありがとうございました。

Amazon.co.jp カスタマーサービス　アソシエイト・プログラムスタッフ

2 回目の返信

前回のメール内でご指摘いただいたAmazonアソシエイト・プログラム参加要件第7項に違反した覚えがまったくないのです。一度もブラウザプラグインを作成したことがないため、どうしても納得がいきません。

これは具体的にどのプラグインを指しているのでしょうか。例えば誰かによって悪意を持ってこちらのアカウントを利用された場合、それでもアカウントの停止が行われるということなのでしょうか。

自分に非があるのか、それとも誰かのいたずら、嫌がらせによってこうなっているのか判断しかねますので、ご指摘いただいたブラウザプラグインを教えていただけないでしょうか。無断でアカウントを利用されている場合は、こちらで削除するよう交渉してみます。

3 回目の Amazon からのメール

Amazon.co.jpアソシエイト・プログラムにお問い合わせいただき、ありがとうございます。

アカウントの停止および支払差止の根拠に関しましては先日お送りした文書に記載の通りです。

今後もお忙しい中お時間を割いていただき、当サイトへＥメールにてご連絡いただきましてもこれ以上ご案内できる内容がございません。そのため今後、本件に関しましてお問い合わせいただきましても、ご返答はいたしかねますことをご了承下さい。

Amazonアソシエイト・プログラム参加要件を含む運営規約は以下のサイトで確認することができます。
https://affiliate.amazon.co.jp/gp/associates/agreement

アソシエイト・プログラムをご利用いただき、ありがとうございました。

Amazon.co.jp カスタマーサービス　アソシエイト・プログラムスタッフ

当初は Amazon アソシエイト・プログラム参加要件第7項に違反し、ブラウザプラグインを不正に利用しているという理由でしたが、ブラウザプラグインを作ったことも利用したこともないことを伝えると、次のメールでは Amazon アソシエイト・プログラム運営規約違反という広義の理由を用いて、決定の正当性を主張されました。

勝手な予測ですが、Amazon 側はなんらかの不正発見プログラムなどを走らせていて、そこにひっかかったのだと思います。売上の傾向や数字を見るとブラウザプラグインに広告リンクを貼っているケースと酷似していたため、アカウントを閉鎖したのではないでしょうか。

正直、Amazon アソシエイト・プログラム運営規約違反を持ち出されると、なにも反論できません。Amazonアソシエイトに参加している他のサイトも同じことだと思いますが、規約の全項目を把握し、完全に守れていると言い切れるサイトは少ないはずです。

結局のところ、Amazon の考え一つでほとんどのアカウントを閉鎖できますが、売上に繋がる大手サイトや、影響力のある著名人に対しては、違反を見て見ぬふりをしているのが現状なのでしょう。残念ながら当方は年間 2 万円ほどしか収益を上げられていないため、Amazon にとってはいてもいなくてもいいような存在だったのです。それがこの不幸を呼び込みました。

今回のように Amazon アソシエイト・プログラム運営規約違反を持ち出してアカウントを閉鎖するのなら、他の大手参加サイトに対しても平等な対応をとってもらいたいです。おそらくほとんどのサイトから Amazon のリンクが消えることになるのではないでしょうか。

例え不正を行っていなくても、Amazon アソシエイトでは目をつけられただけで、反論の余地なくアカウントが閉鎖されてしまうようです。ごく普通に利用していただけなのに、こんな扱いを受けるのはあまりにも酷すぎます。

2018年4月10日2018年4月10日

現在の開発環境 – AWS Cloud9 の問題点

Teletype for Atom、Docker、共同開発ができる場所を模索して、いろいろなものを試しましたが、結局、AWS Cloud9 がいいのではないのか？というところに落ち着きました。

AWS Cloud9

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 でプログラム配信をしながら開発しているので、もし少しでも興味があったら覗いてみてください。配信中はこのブログのトップページにも、配信が見れる記事が掲載されるようになっていますので、ぜひ！

2018年3月7日2018年3月7日

Dockerってすごくない？

Game Users を Node.js で書き直したいので、本を読みながら Node.js の勉強をし始めました。

JavaScriptでのWeb開発 ~ Node.js + Express + MongoDB + ReactでWebアプリを開発しよう ~ その１（改訂版）

この本を読みながらコードを書きつつ進めていたのですが、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 を利用した方が、のちのち楽になるのではないかと感じています。

Docker実戦活用ガイド

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

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

2018年1月18日2018年2月17日

Game Users Share Buttons v1.2.1 更新情報

WordPress のプラグインで利用した際に、Top（記事の上）と Bottom（記事の下）に指定したシェアボタンの詳細設定を行えるようにしました。

Top & Bottom 詳細設定

シェアボタンを表示するページを指定できます。トップページ、個別投稿ページ、固定ページ、アーカイブページ、それぞれ表示したい場所をチェックして保存してください。

トップページやアーカイブページは通常、記事が一覧で表示されます。そしてそれぞれの記事部分にシェアボタンが表示されるのですが、各記事のシェア数を個別に取得しているわけではないので、実質トップページならトップページのシェア数が表示されているだけです（複数のシェアボタンに同じシェア数が表示されています）

そのため、一覧ページでは記事ごとにシェアボタンを表示する意味はないのではないかと考え、トップページやアーカイブページなどでは、シェアボタンを表示しない設定を行えるようにしました。

またこれまでは、シェアボタン編集 → 余白設定で記事とシェアボタンの間隔を調整していましたが、画像の余白欄で、Top と Bottom の間隔を個別に設定できるようにしました。今後はこちらで余白を設定していただけるとありがたいです。

簡単に貼り付けられる Code を表示

編集タブに表示されているシェアボタンを簡単に貼り付けられるコードを表示するようにしました。

Code 1: 1ページにつきひとつだけ貼ってください。

<script type="text/javascript" src="https://example.com/blog/wp-content/plugins/game-users-share-buttons/js/share-bundle.min.js"></script>

Code 2: シェアボタンを表示したい場所に貼ってください。

<div data-game-users-share-buttons="gameusers1-m2a4oi43"></div>

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 で修正を行いました。

リンク

WordPressのおすすめシェアボタンプラグイン、高速表示＆好きなデザインに変更できます
WordPressでシェアボタンをサイドバーに固定表示する方法
Game Users Share Buttons v1.2.1 更新情報
Game Users Share Buttons v1.3.0 更新情報

2017年12月7日2017年12月29日

ブログの記事を書く時に便利なChrome拡張機能を紹介します！

ブログの記事を書いていてリンクを貼る時ってみなさんどうしていますか？

自分は今までページのタイトルは、右クリック → ページのソースを表示 → <title>タグからコピー、URLはブラウザのアドレス部分からコピーして、WordPress にそれぞれ貼り付けてリンクを作成していたのですが、この作業を右クリックのメニューから一発でできるようになる便利な Chrome 拡張機能を発見したので、紹介させてもらいます。

Lightning Blog Tools / 作者の解説ページ

Chrome上で右クリックしたところ

Lightning Blog Tools を Chrome にインストールしてから、Chrome 上で右クリックしてメニューを開くと、ライトニングツールという欄が出てくるので、そこでHTMLリンクという項目を選択すると、クリップボードに以下のタグがコピーされます（使うときはキーボードの Ctrl + V を押すか、右クリックで貼り付けを選びましょう）

<a href="https://gameusers.org/dev/blog/" target="_blank">Game Users 開発ノート – 一緒に開発しよう！</a>

なんとタグ付きで今見ているページのリンクがコピーされるのです。今までいちいち面倒なことをしてリンクを作成していたのが、一瞬で終わるこの便利さ！リンクは不要でページのタイトルだけ取得したい場合は、サイトタイトル抽出を選ぶとタイトルだけが取得されます。

さらに踏み込んだ使い方

右クリック > ライトニングツール > Options を選ぶと、画像のページが開きます。

難しそうに見えますが、慣れればすごく便利な設定が行えます。テキスト引用、HTMLリンク、サイトタイトル抽出は元から入っている設定で、赤色は自作した機能です。

自作した赤色を使ってみる

画像のように文字を選択してから、右クリック > ライトニングツール > を選ぶと、以下の内容がクリップボードにコピーされます。

<strong style="color: #ff0000;">Game Users Share Buttons</strong>

strong タグは文字を強調するときに使うタグなのですが、選択した文字が strong タグに囲まれてコピーされました。このように設定したタグを自在に扱うことができるようになります。

<pre>コード入力用

このブログではプログラム関係のコードを掲載することが多いので、黒色の <pre> タグをよく使っているのですが、Lightning Blog Tools で設定を行っているので、記事の投稿フォームで右クリックから簡単に貼れるようになっています。

<pre style="color: #ffffff; background-color: #000000;"></pre>

Options のページにコード挿入という欄がありますので、独自のコードを貼り付けたいときはここで設定を行いましょう。

タグ挿入とコード挿入は予め設定しておいたコードを右クリックから簡単に貼り付けることができる機能です。

ブログの記事を書いているときに頻繁に利用するタグがある場合は、予め Lightning Blog Tools で設定しておくと、右クリックから簡単に貼り付けることができるようになってとても便利です。

最後に

プログラム関係の知識がない方には、ちょっと難しく感じるかもしれませんが、慣れれば誰でもできるようになりますので、ブログを持っている方はぜひ活用してみてください。

記事作成の時間が短縮できるのですごくいいですよ！

2017年12月4日

サーバーを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系って覚えること多すぎないですか？範囲が広いのに、一人であらゆることに対応しなければならないので、そろそろ頭がパンクしそうです。

2017年11月10日2017年12月15日

まさか、無料でSSLが利用できるなんて！

ある日突然、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 もダメとのこと。

シマンテックの証明書に対してGoogleからの制裁が確定した話

2018年3月15日までに証明書を新しいものに書き換えないといけないみたいです。Rapid SSL は他の高価な証明書に比べると格安で良かったのですが、どうせ更新するならと、他にも新しい発行業者が出ていないか調べてみました。すると「Let’s Encrypt 」という無料で利用できるとうたっているサービスを発見。さすがに無料は怪しいだろと思ったのですが、サイトを見てみるとこのように書かれています。

非営利団体の ISRG (Internet Security Research Group) が運営しており、シスコ（Cisco Systems）、Akamai、電子フロンティア財団（Electronic Frontier Foundation）、モジラ財団（Mozilla Foundation）などの大手企業・団体が、ISRG のスポンサーとして Let’s Encrypt を支援しています。

どこかで聞いたことのある名前ばかり。疑念が払拭されたので、これを利用してみよう、仮にまともに使えなかったとしても無料だし、試してみる分には問題ないだろうということで、VPS (Cent OS6) で利用してみました。

使い方はここにすべて書いてあります。

EPEL リポジトリを有効にする

yum install epel-release

certbot-auto を拾ってきて実行

wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto
./certbot-auto

以下、certbot 実行時の黒い画面の文字、Google の翻訳も英文の下に載せておきます。

Enter email address (used for urgent renewal and security notices) (Enter 'c' to
cancel): メールアドレスを入力
/opt/eff.org/certbot/venv/lib/python2.6/site-packages/acme/jose/jwa.py:110: DeprecationWarning: signer and verifier have been deprecated. Please use sign and verify instead.
  signer = key.signer(self.padding, self.hash)

電子メールアドレスを入力してください（緊急更新およびセキュリティ通知に使用されます）（ 'c'を
キャンセル）：メールアドレスを入力
/opt/eff.org/certbot/venv/lib/python2.6/site-packages/acme/jose/jwa.py:110：DeprecationWarning：署名者と検証者は廃止されました。代わりに標識を使用して確認してください。
  署名者= key.signer（self.padding、self.hash）


-------------------------------------------------------------------------------
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.1.1-August-1-2016.pdf. You must agree
in order to register with the ACME server at
https://acme-v01.api.letsencrypt.org/directory

利用規約をご覧ください
https://letsencrypt.org/documents/LE-SA-v1.1.1-August-1-2016.pdf。同意する必要があります
ACMEサーバーに登録するには
https://acme-v01.api.letsencrypt.org/directory
-------------------------------------------------------------------------------
(A)gree/(C)ancel: A（Agree / 同意します）

-------------------------------------------------------------------------------
Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about EFF and
our work to encrypt the web, protect its users and defend digital rights.

あなたは電子フロンティアとあなたの電子メールアドレスを共有したいですか？
財団は、Let's Encryptプロジェクトの創設パートナーであり、非営利団体でもあります。
Certbotを開発する組織ですか？ EFFについてのメールをお送りしたいと思います
ウェブを暗号化し、ユーザーを保護し、デジタル権利を守るための私たちの仕事。
-------------------------------------------------------------------------------
(Y)es/(N)o: Y（Yes / はいを選択）


Which names would you like to activate HTTPS for?
HTTPSをどの名前で有効にしますか？
-------------------------------------------------------------------------------
1: gameusers.org
2: www.gameusers.org
-------------------------------------------------------------------------------
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel):
1（gameusers.org は www を利用していないので1を選択）

Obtaining a new certificate
Performing the following challenges:
tls-sni-01 challenge for gameusers.org
Waiting for verification...
Cleaning up challenges
Deploying Certificate for gameusers.org to VirtualHost /etc/httpd/conf.d/ssl.conf


Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
HTTPトラフィックをHTTPSにリダイレクトするかどうかを選択し、HTTPアクセスを削除してください。
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.

1：リダイレクトしない - ウェブサーバーの設定をこれ以上変更しないでください。
2：リダイレクト -  HTTPSアクセスを保護するためにすべての要求をリダイレクトします。これを選択してください
新しいサイト、またはあなたのサイトがHTTPSで動作することを確信している場合。これを元に戻すことができます
Webサーバーの構成を編集して変更します。
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):
2（リダイレクトする設定を選択したら失敗しましたと出ました。
すでに .htaccess で http へのアクセスを
すべて https に飛ばしているので
この設定は必要なかったのかもしれません）

Failed redirect for gameusers.org
Unable to set enhancement redirect for gameusers.org
Unable to find corresponding HTTP vhost; Unable to create one as intended addresses conflict; Current configuration does not support automated redirection

gameusers.orgのリダイレクトに失敗しました
gameusers.orgのエンハンスメントリダイレクトを設定できません
対応するHTTP仮想ホストを見つけることができません。意図したアドレスが競合しているため作成できません。現在の設定では、自動リダイレクトはサポートされていません


IMPORTANT NOTES:
 - We were unable to set up enhancement redirect for your server,
   however, we successfully installed your certificate.
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/gameusers.org/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/gameusers.org/privkey.pem
   Your cert will expire on 2018-02-07. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot-auto
   again with the "certonly" option. To non-interactively renew *all*
   of your certificates, run "certbot-auto renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.

- サーバーの拡張リダイレクトを設定できませんでした。
   ただし、証明書を正常にインストールしました。
  - おめでとう！証明書とチェーンは以下の場所に保存されています：
   /etc/letsencrypt/live/gameusers.org/fullchain.pem
   あなたのキーファイルは以下の場所に保存されています：
   /etc/letsencrypt/live/gameusers.org/privkey.pem
   あなたの証明書は2018-02-07に期限切れとなります。新しい、または微調整された
   将来この証明書のバージョンを取得するには、certbot-autoを実行するだけです
   もう一度、 "certonly"オプションを使用してください。 *対話的に更新する* all *
   証明書の "certbot-auto renew"を実行してください
  - アカウント情報がCertbotに保存されている
   / etc / letsencryptの設定ディレクトリ。あなたは
   このフォルダの安全なバックアップを作成します。この設定ディレクトリは、
   Certbotで取得した証明書と秘密鍵も含まれています。
   このフォルダを定期的にバックアップするのが理想的です。

この間、わずか10分ほどです。なんとこれだけで SSL の設定が完了しました。英語ですが数問の対話に答えるだけでウェブサイトへの SSL 導入が完了します。あとは httpd を再起動するだけで反映されます。

service httpd start

数年前、初めて SSL を導入したときは中間証明書だなんだと難しい処理をした覚えがありますが、今回はたったこれだけで終了。しかも無料！証明書の期限が三ヶ月しかないという問題はありますが、これは cron で更新すればいいだけなので、実質なにもしなくても無料で SSL がずっと利用できることになります。

証明書

ちなみに証明書を更新する方法は以下のような感じです。毎日、朝の6時45分に証明書の更新を実行する。更新できた場合は httpd も再起動する。毎日、実行していても、期限の30日前にならないと証明書の更新処理は実行されないので、向こうのサーバーに負荷をかけることもないとのことです。

45 6 * * * /root/certbot-auto renew --post-hook "service httpd restart"

正直、cron を触ることはあまりないので、こっちの設定の方が時間かかりました。この書き方が正しいのか更新されるまでわからないので、cron の部分についてはあまり参考にしないでください。

それにしても Let’s Encrypt すごすぎる！

参考サイト

最新の記事

デザイン済みのページ

現在、解決できていない問題

AWS Cloud9

共同開発用リポジトリ

メモ

Node.js を勉強するために利用した本

Teletype portal ID（利用停止中）

Teletype for Atom

Teletypeの使い方

1 回目の Amazon からのメール

1 回目の返信

2 回目の Amazon からのメール

2 回目の返信

3 回目の Amazon からのメール

AWS Cloud9 の問題点

参加者募集！

Top & Bottom 詳細設定

簡単に貼り付けられる Code を表示

貼り付けコードを変更しました

Feedly のシェアが行えなくなっていた問題を修正

リンク

さらに踏み込んだ使い方

最後に