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

リンク


現在の開発状況 – 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にアクセスしても、ファイルが足りないためエラーが起こってしまう状況になっています。完成したら別リポジトリで公開する予定なのですが、正常に動作させるためには、そのファイルを特定の場所に設置してからアクセスしなければならないという非常にややこしいことになっています。

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

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

退化しました

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

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

普通のサイトでも利用できるように、ソーシャルボタンの作成が行えるページを公式ページとしても公開する予定なのですが、このページをなにも考えずjQueryで作っていたのです。WordPressはjQueryが利用されているので、深く考えずにそのまま。

このWordPressのページと、公式ページのコードは共通化しようと考えていたので、当然、Game Users内に設置する公式ページもjQueryになるわけです。

jQueryベースはもうやめて、Reactをメインにして行こうという高い目標を立てたにも関わらず、なぜ未だに古いシステムで作っているんだ?Game UsersをReactで書き直そうとしていた高い志はどこへ行ったんだ?という疑念が生じ、jQueryで書いていたソーシャルボタン作成ページをReactで書き直すことになりました。

結構、進んでいた段階での書き直し作業。しかも実際、進めてみるとReactの勝手がわからず、サクサクというわけにも行かず、どんどん時間が過ぎていきます。

本当になにやってんだろうなぁ。当初すべてPHPで書いていたのをJavascriptに書き直した件も合わせると2回目の書き直し作業。さすがにアホすぎて怖くなってくる!

Chrome Developer Tools便利!

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

WordPress ソーシャルボタンサンプル

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

marginでもなく、paddingでもなく、borderでもない。自分なりにいろいろ探してみたのですが、原因がまったく特定できず、お手上げ状態になったのですが、ChromeのDeveloper Toolsにスタイルシートの欄があったことを思い出し、開いてみるとそこに答えが書いてありました!

box-shadow

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

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

 

フリーキャット

ちなみにこの黒猫はクレジットを表す画像で、Game Usersのトップにリンクが貼ってあります。ソーシャルボタンを使ってくれた方のブログから、Game Usersにアクセスしてくれる人が増えたらいいなという目論見でつけております。

こういうのってスパム認定されるんでしょうか?SEOについての知識がないのでちょっと心配です。