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

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

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

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

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

2017/8/23 進捗状況

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

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

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

Game Users React化 進捗状況

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

退化しました

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

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

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

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

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

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

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

まだ1/3

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

2017/5/12 進捗状況

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

進捗状況的には全作業の1/3くらいは終わったかな?というところです。1ヶ月かけて1/3は、さすがに時間がかかりすぎに思いますが、この後、フキダシを使わないバージョン(画像にシェア数を重ねるタイプ)と、ソーシャルボタンの公式ページ、課金システムを作るつもりなので、まだまだ作業が終わりそうにありません。

課金システムについて説明すると、ソーシャルボタンを使うとネコの画像が表示されてリンクが貼られるのですが、そのリンクを外したい方は課金してくださいというシステムにしようと思っております。Web制作の現場ではWordPressの案件が結構多いようなので、そういう形でWordPressを商用利用しているユーザーの方が有料プランを利用してくれるとありがたいな、という思惑で作っています。

WordPressのテーマを作って収益あげてる人もいるみたいなので、うまくいってくれると嬉しいのですが。

WordPressのプラグインだけでなく?

現在の設定画面

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

なぜ進みが遅くなっているのかというと、途中で方針転換があったためです。

当初はWordPressで使えるプラグインの構想だったのですが、作っていくうちに、どうせなら普通のウェブサイトにも使える方がいいよな?ということで一部がやり直しになりました。

WordPressはPHPで動いているのですが、PHPでソーシャルボタンを出力する仕様にすると利用できない環境が出てきてしまうため、Javascriptでコードを出力する仕様にしたのです。数日かけて書いたPHPのコードを書き直す悲しさ、モチベーションの上がらなさでこうなってしまいました。

毎回、自分はこうなってしまうんだよなぁ。自分なりにしっかり構想を練っているつもりなんですが、作っていくうちに構想がどんどん膨らんでいき、同じ部分を何度も書き直して無駄に時間が費やされるのです。

これ客だったら最悪なクライアントですね。途中で方針転換を繰り返して制作者に余計な作業を増やすという。他人を巻き込んでこんなことをしていると非難轟々になりそうなので、いい加減学習したいところなのですが、妄想だけは無駄に膨らむタイプなので、この病の治療は無理かもしれません。

いつの日か、誰かに作業を依頼できる身分になれたら、最初から仕様変更ありの契約でお金を上積みしとかないとダメですね。

MariaDB – DEFAULT CURRENT_TIMESTAMP

WordPressのプラグイン制作、なかなか手ごわいです。独自の書き方を学ばないといけないので、慣れるまで調べることが非常に多いです。

WordPressはデフォルトでjQueryが読み込まれるのですが、そのバージョンが1.12.4でとても古いのです。今後、jQuery依存のライブラリを利用するときに、バージョンの問題で使えないといったことが起こると困るので、最新のものを読み込もうとしたのですが、そのためにはまず古いものを読み込まないという処理をしなければなりません。

たったそれだけのことでも上記のような感じで、独自の関数をいくつか利用して書かなければならないのです。これが本当にわけがわからない。

WordPress Codex 日本語版

一応、リファレンスも用意されているのですが、どこになんの項目があるのか分かり辛い上に、解説が難解で理解するまでに時間がかかるのです。

プラグインをサクッと完成させてから、Game Usersの開発も進めていこうと思っていたのですが、世の中そんな簡単には行かないもんですね。作っているうちに追加したい機能も増えてきたので、当初思ってたよりずっと時間がかかってしまうかもしれません。

MariaDB 日時のデフォルト値


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

datetime_renewal DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP NOT NULL

データベースの日時のデフォルト値をこのように設定しておけば、Updateするだけで自動的に日時が更新されることを知って、ちょっとしたショックを受けました。今までデータベースを更新するたびに 0000-00-00 00:00:00 形式で日時を作成してから保存してたのに、あの手間はなんだったんだという。

すごく便利なので、みなさんもぜひ使ってみてください。


追記: 記事を書いてすぐに、これってもしかして新しい機能なんじゃないかと気になって調べてみたところ、MySQL5.6.5からの機能でした。またMySQLが古い環境だと、DEFAULT CURRENT_TIMESTAMPが2つあるとエラーが出るようなので、どのみち上に挙げたSQL文は使えません。

公式によるとWordPressの推奨環境は、MySQL 5.6 / MariaDB 10.0以上ですが、MySQL 5.2.4でも動くようです。プラグインは環境が様々なので、ちゃんと考えてコードを書かないとダメですね。

 

プラグインの設定画面

プラグインの制作は設定画面を表示するところまで来ました。Bootstrapのタブを利用しています。これから設定画面の中身を作っていきます。

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

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

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

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

ただプラグインの設定画面で画像のアップロードが自由にできるのかわからないのが不安ですね。もしできなかったら、プラグインフォルダに最初から画像を含めるしかないので、サンプルのような多様なボタンが作れなくなってしまいます。

自分がデザインセンスのある人間なら、オリジナルの画像をいろいろ提供できるのですが、こればっかりは才能がないのでどうしようもないですね。

でも、もし構想どおりに作れたら、なかなか面白そうなプラグインになりそうな気がします。

WordPressのソーシャルボタンを作りたい

開発環境の作り方についての記事作成は一通り終わり、今なにをしているかというと、WordPressのソーシャルボタンを作ろうとしております。

プラグインで良さ気なのを探してみたのですが、外国製は、はてなやLineに対応しておらず、日本製のは公式のソーシャルボタンを使ってるので重く(非同期ではない)、どちらもいまいち気に入らなかったのです。

そこでGame Usersで使ってるソーシャルボタンをWordPress用に改造して独自につけようと思ったのですが、どうせやるなら他の人も使えるようなプラグインとして公開しようと考え、今、勉強しながら作り始めております。

非同期でカウントを表示して、さらにボタンのデザインをいじれるようなものにしたいと考えています。テーマやテンプレートのような形で、好きなデザインのボタンをアップロードして使うようなイメージ。

実際できるかどうかわからないので構想だけで終わってしまうかもしれませんが、とりあえず頑張って作ってみます。