様々な問題が発覚

ブログにプラグイン版をインストールしてシェアボタンを表示してみました。我ながらなかなかいい感じです。

ブログトップ

完成が近いと思っていたのですが、機能をチェックしていると様々な問題が発覚しました。IEとMicrosoft Edgeでシェアボタンが正常に表示されないという致命的な問題が見つかり、今日はそれを修正していました。とりあえずシェアボタン自体は表示されるようになったのですが、シェアボタンを作成するページがIEではどうやっても動かず…。

IEのシェアは年々下がっており、20パーセント程度になっているようなので、もうほっておくことにしました。シェアボタン自体は動くので作る時は、新しいブラウザでやってくださいということにします。

※ 追記:後日、動きました!

その他、認識している問題は2つあります。

・モバイル機器で見るとテーマのボタン画像がぼやける
・モバイル機器で見るとシェア数の文字が1ピクセルずれる

Retinaディスプレイで画像を表示するときは、予め大きめの画像を用意して縮小して表示しなければならないという情報は知っていたのですが、そんな気になるほどボケないだろうと、いい加減な姿勢でテーマ画像を作ったところ、モバイル機器でチェックすると文字が読めないくらいぼやけていました。

Androidのタブレットとスマホしか持っていないのですが、Androidでもぼやけるんですね。Android機器でもRetinaディスプレイと同じ表示方法が取られているんでしょうか?

まぁこの問題自体は画像を大きく作れば済むので解決できるのですが、問題は2つ目の「モバイル機器で見るとシェア数の文字が1ピクセルずれる」なんです。なぜかモバイル機器でシェアボタンをチェックすると、1ピクセルだけシェア数の文字が上に表示されます。

わかりにくい画像で申し訳ないのですが、こんな感じにずれているのです。同じChromeなのにPCとタブレットでなぜ表示位置が変わるんでしょうか。原因がさっぱりわからないので、どなたかわかる方がおられましたら教えてください。

モバイルからのアクセスだけ1ピクセル下に表示するという、強引な解決方法もあるのですが、あんまりスマートな解決方法じゃないので気が進まないんですよね。

Game Users Share Buttons β版公開!

ついにβ版が完成しました。ここまで来るのに長かった…。何度も何度も書き直してやっと。

シェアボタン公式トップページ

最近もクロスドメインの問題でAPI絡みの部分を書き直していたのです。今まではサイト内で使う自家用APIしか作っておらず、同じノリで公開部分のAPIを作っていたため、違うドメインからAPIにアクセスできなくなっていました。

他にもネットワーク上にアップロードするとなぜか動かなくなる部分が出てきたりで、もっと早く公開するつもりだったのですが、延びに延びて11月直前になってしまいました。

以下のURLでチェックできるので、よかったらアクセスしてみてください。

https://gameusers.org/app/share-buttons

シェアボタンを作成して使ってもらってもかまわないのですが、まだローカル環境と gameusers.org 上でしかテストが済んでいないので、その他の環境の場合、なんらかの問題が起こるかもしれません。あとテーマが一種類しかなく、課金システムもテスト版になっています。誰もする人はいないと思いますが、まだ課金は行わないようにしてください(クレジットカードの入力ウィンドウの右上にTEST MODEと書かれている場合はテスト版です)

後はファイルをZipでまとめてプラグイン形式にして、このブログともう一つテスト用のブログを作成して、プラグインの動作テスト、それが終わったら公式プラグインに申請します。公式プラグインとして認められたら完成に大きく近づくので、気合を入れて頑張ります。

ちなみにWordPressで使用する場合、公式サイトでシェアボタンを作成してダウンロードして使うよりも、プラグインで使用した方が便利です。プラグイン版は作成したシェアボタンがWordPressの置いてあるサーバー上に保存され、いちいちダウンロードしなくても使用することができます。興味のある方はプラグイン版が完成するまで待っていてください。

Reactのディレクトリー構成を変更

後々のことを考えると、ディレクトリー構成を変えたほうがいいのではないかという思いに至り、画像のように変更してみました。

<main></main>タグの内部のコンテンツ部分と、ヘッダーやフッターなどの共通部分を分離。

Game Usersは他の人も気軽にコンテンツを追加できるようにしたいという目標があるので、新たにページを追加する場合は共通部分のコードは触らずに、そのページはそのページだけで独立してファイルを作成できるようにしたいのです。

ただこの作業をやってると、自分の能力を超えてる部分に手を出しているという不安感が漂います。到達点はわかっているのですが、知識が足りていないので、今やっていることが正しいのかどうかがさっぱりわかりません。

ディレクトリー構成だけはそれっぽくなっているのですが。

現在の開発状況 – 2017/10/08

シェアボタン公式トップページ

シェアボタンの公式ページがだいたい完成しました。シェアボタンを作成する機能は問題なく動作しており、次は有料プランを申し込むページを作成する段階です。

PayPalのようなネット上で支払いを行えるサービスを提供している企業は海外にもたくさんあるので、それらを吟味しながら良さ気なサービスを採用しようと思います。シェアボタンは海外の人にも使ってもらえるようにいずれ複数言語で提供したいという思いがあるため、支払いサービスも多くの言語に対応している海外のサービスの方がいいのかなと考えています。

最近、GitHubにファイルを上げていませんでした。なぜかというとWordPressのプラグインは100% GPLで作らないと公式の場所に置いてもらえません。ライセンスが100% GPLでない場合、ネットから実行ファイルをダウンロードしてきて使用するスマホの野良アプリのような扱いになってしまうため、Game Users Share Buttons部分のライセンスもGPLで作らないといけないのです。そのため、Game UsersのWebリポジトリに含めてプッシュすることができなくなっているのです。一緒にアップロードするとライセンス汚染が発生するようなので。

ローカルのシェアボタンのアドレスは https://localhost/gameusers/public/app/share-buttons なのですが、現在、GitHubのリポジトリをクローンして上記URLにアクセスしても、ファイルが足りないためエラーが起こってしまう状況になっています。完成したら別リポジトリで公開する予定なのですが、正常に動作させるためには、そのファイルを特定の場所に設置してからアクセスしなければならないという非常にややこしいことになっています。

汚染が発生するライセンスは本当にめんどくさいですね。

※ 追記 クローンしてもエラーを表示しないようにしました。ただし画像のように内部のコンテンツは表示されません。ヘッダーと左のメニューとフッターしか表示されません。

package.jsonに設定を書けるって知ってました?

自分は最近知りました。プロジェクトのルートディレクトリーに見慣れないファイル(postcss.config.js)があったのでチェックしてみたら、パッケージで使用する設定ファイルでした。自分で作ったのにすっかり忘れていたのです。

npmでいろいろパッケージをインストールして使っていると、別途設定ファイルを作らないといけなくなることがあります。例えば .babelrc / eslintrc.json / .stylelintrc / postcss.config.js こんな感じのファイルです。1つや2つくらいなら大して気になりませんが、3つ4つ…と増えていくと、プロジェクトのルートディレクトリーがごちゃごちゃしてくるので、ひとつのファイルにまとめられるならそうしたいと思ったのです。

ツールの設定をpackage.jsonに書く

そこでウェブを検索してみたところ、こちらの記事を発見し、詳しく解説してくれていたので、この記事にならって自分も設定ファイルをpackage.jsonにまとめてみました。パッと見よくわからないファイルが減ってすっきりしたので、みなさんにもおすすめします。

ちなみに 2017/10/1 現在のpackage.jsonの設定部分はこんな感じになっています。

Reactでドロワーメニューを作る

Reactで作っているサイトの内部にドロワーメニューをつけたい!

というわけで、jQuery製のライブラリーをReact上で動かそうとしてみるも失敗。React用に公開されているパッケージをいくつか試してみるも失敗。いろいろやってみたのになぜか正常に動かない…。

仕方がないので自分で作ってみることにしました。なんとなく難しそうなイメージがあったのですが、いざ作り始めてみると思ってたよりも簡単でした。

完成品

 

画面遷移が起こる際にフェードイン・フェードアウトなどのアクションを挟み込める velocity-react というパッケージを使うとシンプルなコードで実装することができます。デモもいい感じです。

npm install velocity-react --save

まずnpmでパッケージをインストールしましょう。

 

コード

VelocityComponentはすでに存在している要素に対してアニメーションをつける際に利用し、VelocityTransitionGroupは要素を新しく追加したり、削除したりする際に利用します。

上記コードでは、ドロワーメニューのtranslateXをマイナスに指定して画面外に配置しておき、メニューを表示するボタンをクリックすると、translateXが0に移行し、アニメーションつきで表示されるように設定されています。

メニュー外側の黒い半透明のオーバーレイ部分はVelocityTransitionGroupで作っており、メニューがactiveになった際に要素が追加される形で表示されるようになっています。なぜオーバーレイを要素の追加・削除で実装しているかというと、オーバーレイ部分には、クリックするとメニューを閉じる関数が設定されており、メニューが表示されていない間は、オーバーレイの要素を削除することで、同時にそのクリック判定も消えるようにしているのです(ずっとオーバーレイのクリック判定が残っていると、コンテンツのリンクが機能しなくなります)

通常スタイルシートのdisplay: noneを設定すれば、クリック判定も消えるようなのですが、なぜかうまくいかなかったので、表示・非表示のたびに追加・削除する形で実装しています。

※ ドロワーメニューのコードは画面遷移で更新されない場所に設置してください。更新されるコンテンツの内部にメニューを設置すると、画面遷移とともにメニュー自体も再描画されて、ドロワーメニューが閉じるアクションが省略されてしまいます。できるだけ上の方の階層に設置することをおすすめします。

 

スタイルシート

デザインは各自好きなように編集してください。上記スタイルシートではMaterial iconsをリンク横に表示するデザインになっています。Material iconsを利用したい場合は公式サイトを確認してください。

 

シンプルなコードでカスタマイズも可能なドロワーメニューを設置したい方は、ぜひこの記事を参考にしてみてください。

 

参考リンク

React関連パッケージのバージョンによって起こる問題

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

※ 2017/11/23 追記:eslint 4.11.0, eslint-config-airbnb 16.1.0, eslint-plugin-jsx-a11y 6.0.2 の環境ではエラーが出なくなっています。もう最新版にしても問題ありません。

 

webpackをインストールする際にfsevents絡みでエラーが出てしまう。ルートの権限でインストールしてくださいと出るのですが、その際、毎回 fsevents 絡みのエラーが出ます。

npm ERR! Please try running this command again as root/Administrator.

npmのバージョンを5.0.4に戻すとエラーが起きません。

npm install -g npm@5.0.4

※ 2018/1/10 追記:npm@5.6.0 で改善したようです。もしエラーメッセージが出る場合は、クリーンインストールしてくださいとのことです。

 

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

同じエラーで悩んでいる方がおられましたら参考にしてください。

※ 2018/1/10 追記:現在は webpack 付属の UglifyJsPlugin で正常に動作しています。uglify-js と uglifyjs-webpack-plugin は必要ありません。

GitHubを使う習慣がない

GitHubを全然更新していませんでした。日々の作業が終わった後にファイルをアップロードするだけなのに、習慣がないので忘れてしまいます。Atomを使ってるので作業自体はすごく簡単なんですが。というかアップロードじゃなくてプッシュというのが正しいのかな?Gitの概念と用語が難しくていまだによくわかっていません。

久しぶりに更新したついでに、GitHubの容量の上限について気になったので調べてみたところ、リポジトリは1GBが上限サイズのようです。それ以上のサイズになると警告メールが送られてくるらしい。

https://api.github.com/repos/gameusers/web

このアドレスでリポジトリのサイズがチェックできるので、アクセスしてみたところ “size”: 39395 と書かれており、なんとまだ39MBしか使っていないようです。ローカルファイルだと400MBくらいあったのですが、node_modulesや余計な画像などのファイルを除くと、すごく小さくなりますね。

今後は毎日忘れずにプッシュしていこうと思います。

 

現在の更新状況

旧デザイン

新デザイン

モーダルで表示する通知を綺麗にしています。他のデザインに合わせてこちらもカード型にしました。

ReactでMasonryを使用する

MasonryというJavascript製のライブラリーを利用すると、カード型デザインのページ内で自動的に各カードを並べかえてくれます。カードのサイズがバラバラな場合、均等に横並びにするだけでは無駄なスペースが出来てしまうので、これを使うことで石段を積んだような綺麗な並びに作り変えられるのです。

このライブラリーはとても気に入っているので、なんとかReact上でも使いたいと思い導入してみたのですが、REST APIにアクセス → データ取得 → カード数の増減、こういった形でDOMに反映してからライフサイクルメソッドのcomponentDidUpdate内でレイアウトしてみたところ、ちらつきが発生してしまいました。DOMに反映されてから並び替えるという順序になるため、どうしても一瞬並び替える前のカードが表示されてしまうのです。

そこで他の人がどのようにReactにMasonryのライブラリーを導入しているのか調べてみたところ、有志の方がreact-masonry-componentというコンポーネントを公開してくれていました。これを使ってみたところ非常に簡単にカードの並び替え機能を利用することができるようになり、ちらつきもなし!

並び替え動画

いやーありがたい!優秀な人が様々なコンポーネントを提供してくれているおかげで本当に助かります。なんかこういう無償で何かを提供してくれている人たちに、お礼の寄付をするシステムがあればいいのになと思いますね。

ソーシャルボタン開発終盤

思いつきでカスタマイズできるソーシャルボタンを作り始めて、はや4ヶ月。どのみちBabelでトランスパイルするんだからということで、XMLHttpRequestをやめてFetch APIを使い、async awaitも導入、なんだかんだと新しいことを覚えながらやってきたとは言え、さすがに4ヶ月は時間がかかりすぎ。しかもまだ完成してないという。

2017/8/23 進捗状況

現在はこんな感じになっています。画像のコンテンツはアイコンをダウンロードしてくると、こんな感じのソーシャルボタンが作れますと、サンプルを含めた素材サイトを紹介するタブです。

ソーシャルボタンを表示するコードと設定するページは、だいたい完成していて、今はソーシャルボタンの公式ページを作るべく、Game UsersをReact化しています。Game Users内に公式ページを設置するつもりなので、そちらも同時にReactで書き直さないといけないのです。

これがまた結構大変!PHPで書かれているものを一から書き直しており、しかも他の人が手を加えやすいように意識しながら、ファイルをできるだけひとところにまとめようとしております。今はひとつのページを表示するために必要なファイルが、あちこちに散らばっていて、他の人が状況を把握するのが困難になっているので、それを改善すべく頑張っているのです。

Game Users React化 進捗状況

ヘッダーとフッターの表面的な部分はReactで書き直せています。一度表示すると、以降はサクサク動いてなかなかいい感じです。