【React】Game Usersを一緒に作ろう！【Node.js】 [無断転載禁止]©2ch.net

[過去ﾛｸﾞ] 【React】Game Usersを一緒に作ろう！【Node.js】 [無断転載禁止]©2ch.net (253ﾚｽ)
上下前次 1-新
抽出解除ﾚｽ栞

このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索歴削→次ｽﾚ栞削→次ｽﾚ過去ﾛｸﾞﾒﾆｭｰ

15: あづみ ◆WYiR3RzL3U 2017/04/04(火)00:11 ID:gljrwCoE(1) AAS
ソーシャルボタンのサンプル

https://gameusers.org/dev/blog/wp-content/uploads/2017/04/share_buttons.jpg

ソーシャルボタンのサンプルをスタイルシートで作ってみました。

画像のボタンは全部素材サイトで集めたものです。
こんな感じで同じように画像を集めてアップロードするだけで
誰でも自分好みのソーシャルボタンを作れるようにしたいのです。

ただプラグインの設定画面で画像のアップロードが
自由にできるのかわからないのが不安ですね。
もしできなかったら、プラグインフォルダに
最初から画像を含めるしかないので
省6

18: あづみ ◆WYiR3RzL3U 2017/04/08(土)00:45 ID:??? AAS
Chrome Developer Tools便利！

現在、WordPressのソーシャルボタンのプラグインを作っているのですが、
適用されているテーマのスタイルシートが邪魔をして
思うようなデザインにできないという問題に直面しました。

WordPress ソーシャルボタンサンプル
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-1.jpg

黒猫の周囲を囲むように存在している
この謎の白枠に2時間以上費やすことに！

marginでもなく、paddingでもなく、borderでもない。
自分なりにいろいろ探してみたのですが
省3

19: あづみ ◆WYiR3RzL3U 2017/04/08(土)00:45 ID:9diq8AUi(1) AAS
box-shadow
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/social-buttons-20170408-2.png

box-shadow…。ほとんど使わないから存在を忘れていました。
便利なことにDeveloper Toolsの画面でチェックボックスを外すと
ブラウザ上のデザインにも変更が加えられます。
他の人が作ったものはなにが適用されているのかわからないので
この機能は非常にありがたいですね。

ChromeのDeveloper Toolsはいろいろ機能がついてそうなので
一回ちゃんと勉強した方がいいかもしれません。

フリーキャット
省7

21: あづみ ◆WYiR3RzL3U 2017/04/15(土)00:00 ID:jVmNsNw5(1) AAS
MariaDB 日時のデフォルト値

プラグインで使うデータベースのテーブルを作成するコードは以下になるのですが
これを書いているときに、便利な日時のデフォルト値の設定方法を知りました。

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 形式で
日時を作成してから保存してたのに、あの手間はなんだったんだという。
省13

22: あづみ ◆WYiR3RzL3U 2017/04/20(木)23:34 ID:7/HYbBCV(1) AAS
WordPressのプラグインだけでなく？

現在の設定画面
https://gameusers.org/dev/blog/wp-content/uploads/2017/04/wp-option-20170420-1.jpg

前の記事から6日も経ってるのに進みが遅い！

なぜ進みが遅くなっているのかというと、途中で方針転換があったためです。
当初はWordPressで使えるプラグインの構想だったのですが
作っていくうちに、どうせなら普通のウェブサイトにも使える方がいいよな？
ということで一部がやり直しになりました。

WordPressはPHPで動いているのですが
PHPでソーシャルボタンを出力する仕様にすると
省15

23: あづみ ◆WYiR3RzL3U 2017/05/12(金)16:52 ID:fB8Uql0I(1) AAS
まだ1/3

ブログの更新が疎かになってしまいました。記事を書くのって結構脳を使うので、
制作作業後にやるのは辛いものがある。…という言い訳でしばらく放置してしまいました。
せっかくブログを作ったんだから、もうちょっと真面目に更新しないと。

2017/5/12 進捗状況
https://gameusers.org/dev/blog/wp-content/uploads/2017/05/wp-option-20170512-1.png

画像を見てもらうとわかりますが、エディットする項目が非常に多くなりました。
ずらーっと縦に長いページに羅列されるフォームの数々。
この値も編集できるようにした方がいいよな
と思いつくまま追加していくとこんな感じになりました。
省15

25: あづみ ◆WYiR3RzL3U 2017/06/18(日)12:03 ID:DCperFa8(1) AAS
https://gameusers.org/dev/blog/wp-content/uploads/2017/06/wp-option-20170618-1-300x220.jpg

すでにソーシャルボタンを出力するコード自体はほぼ完成しており
しばらくソーシャルボタンを作成するページを作っていたのですが
なんと途中でまたもコードの大幅書き直しが発生しました。

画像はWordPressのプラグイン画面なのですが
これはソーシャルボタンを作成するページで
ここで画像をアップロードして設定を行うと
WordPress上でソーシャルボタンが表示されるという仕組みになっています。

普通のサイトでも利用できるように
ソーシャルボタンの作成が行えるページを公式ページとしても
省3

34: あづみ ◆WYiR3RzL3U 2017/08/23(水)21:22 ID:rrmCkhEY(1) AAS
ソーシャルボタン開発終盤

思いつきでカスタマイズできるソーシャルボタンを作り始めてはや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

現在はこんな感じになっています。
画像のコンテンツはアイコンをダウンロードしてくると
省2

35: あづみ ◆WYiR3RzL3U 2017/08/23(水)21:26 ID:??? AAS
ソーシャルボタンを表示するコードと設定するページは
だいたい完成していて、今はソーシャルボタンの公式ページを作るべく
Game UsersをReact化しています。
Game Users内に公式ページを設置するつもりなので
そちらも同時にReactで書き直さないといけないのです。

これがまた結構大変！
PHPで書かれているものを一から書き直しており
しかも他の人が手を加えやすいように意識しながら
ファイルをできるだけひとところにまとめようとしております。
今はひとつのページを表示するために必要なファイルがあちこちに散らばっていて
省6

39: あづみ ◆WYiR3RzL3U 2017/09/03(日)12:42 ID:Zb0uKC1A(1) AAS
https://api.github.com/repos/gameusers/web

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

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

現在の更新状況

旧デザイン
https://gameusers.org/dev/blog/wp-content/uploads/2017/09/notification-20170903-1.jpg
省4

47: あづみ ◆WYiR3RzL3U 2017/10/08(日)12:53 ID:??? AAS
現在の開発状況 ? 2017/10/08

シェアボタン公式トップページ
https://gameusers.org/dev/blog/wp-content/uploads/2017/10/share-buttons-top-20171008.jpg

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

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

53: あづみ ◆WYiR3RzL3U 2017/10/15(日)13:11 ID:5MjX4Gd0(1) AAS
Reactのディレクトリー構成を変更

https://gameusers.org/dev/blog/wp-content/uploads/2017/10/files-20171015-1.png

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

58: あづみ ◆WYiR3RzL3U 2017/10/28(土)16:16 ID:??? AAS
ついにβ版が完成しました。ここまで来るのに長かった…。何度も何度も書き直してやっと。

シェアボタン公式トップページ
https://gameusers.org/dev/blog/wp-content/uploads/2017/10/share-buttons-top-20171028.jpg

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

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

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

60: あづみ ◆WYiR3RzL3U 2017/11/02(木)22:53 ID:??? AAS
ブログにプラグイン版をインストールしてシェアボタンを表示してみました。
我ながらなかなかいい感じです。

ブログトップ
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/blog-top-20171102-1.jpg

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

IEのシェアは年々下がっており、20パーセント程度になっているようなので
省9

61: あづみ ◆WYiR3RzL3U 2017/11/02(木)22:55 ID:CS7GAm0c(1) AAS
Androidのタブレットとスマホしか持っていないのですが
Androidでもぼやけるんですね。Android機器でも
Retinaディスプレイと同じ表示方法が取られているんでしょうか？

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

https://gameusers.org/dev/blog/wp-content/uploads/2017/11/pc-mobile-1pixel-20171102-2.png

わかりにくい画像で申し訳ないのですが、こんな感じにずれているのです。
同じChromeなのにPCとタブレットでなぜ表示位置が変わるんでしょうか。
省3

62: あづみ ◆WYiR3RzL3U 2017/11/05(日)00:09 ID:??? AAS
リポジトリ公開＆ IEで動きました！

GitHub リポジトリトップ画像
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/banner.jpg

Game Users Share Buttons リポジトリ
https://github.com/gameusers/share-buttons

GitHubのリポジトリを作成し、シェアボタンのコードを公開しました。
いずれ他のソーシャルサイトのシェア方法・シェア数の取得方法を
知っているプログラマーの方が現れて、爽やかにコードを提供してくれたらいいのになと夢見ております。

このシェアボタンの使用者が増えて知名度が上がれば
そういう方も出てくるかもしれないので、頑張ってテーマや機能を充実させていこうと思います。
省8

66: あづみ ◆WYiR3RzL3U 2017/11/10(金)17:36 ID:2YxqB0kV(1) AAS
この間、わずか10分ほどです。なんとこれだけで SSL の設定が完了しました。
英語ですが数問の対話に答えるだけでウェブサイトへの SSL 導入が完了します。
あとは httpd を再起動するだけで反映されます。

service httpd start

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

証明書
省9

71: あづみ ◆WYiR3RzL3U 2017/11/15(水)18:55 ID:??? AAS
WordPress のプラグイン版が完成しました

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独特の仕様と、プラグインをアップデートした際に
ファイルがどう扱われるのかについての情報がネットに全然なかったので
省9

72: あづみ ◆WYiR3RzL3U 2017/11/15(水)18:57 ID:vK7ATm9A(1) AAS
いろいろ苦戦したのでまだテーマがひとつしかないのですが
WordPressでブログをやっている方はぜひ使ってみてください！
サクサク動いてなかなかいい感じだと思います。
素材サイトからアイコンをダウンロードすると
オリジナルのシェアボタンを作成することも可能です。

WordPressのダッシュボード > プラグイン > 新規追加ページで
「Game Users Share Buttons」を検索してください。
黒猫のアイコンのプラグインです。

Game Users Share Buttons アイコン
https://gameusers.org/dev/blog/wp-content/uploads/2017/11/icon-256x256.png
省1

73: あづみ ◆WYiR3RzL3U 2017/11/23(木)14:59 ID:??? AAS
現在のテーマ

https://gameusers.org/dev/blog/wp-content/uploads/2017/11/themes-20171123.jpg

テーマを3つ追加しました。ぶっちゃけデザイン的なセンスがないため、
産みの苦しみがすごいです。絵が描けたり、グラフィックデザインができるなら
もうちょっとサクサクと完成させられると思うのですが
自分にはそのどちらの能力もないため、どうしても時間がかかってしまいます。

このシェアボタンはリンクを貼れるので
この機能をアピールしてデザインが行える人にテーマを作ってもらえないだろうかと考えているのですが
はたしてうまくいくでしょうか。

シェアボタンを見てもらえるとわかるのですが
省8

上下前次 1-新書関写板覧索設栞歴

ｽﾚ情報赤ﾚｽ抽出画像ﾚｽ抽出歴の未読ｽﾚ AAｻﾑﾈｲﾙ

ぬこの手ぬこTOP 1.583s*