退化しました

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

画像は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についての知識がないのでちょっと心配です。