Slide 1
Slide 1 text
WordPress で
Web サービスの構築
WordPress で「競技会採点システム」の
プラグインを開発しWeb サービスを始め
ました。
Katsushi Kawamori
@katsushi-kawamori on WordPress.org and Slack
河森 克至
Slide 2
Slide 2 text
自己紹介
•社交ダンス教師 1997年9月〜
ケヅカダンスアカデミー松戸勤務
•プラグイン開発 2013年3月〜
•アドオン販売 2017年8月〜
•Web サービス 2018年11月～
Slide 3
Slide 3 text
社交ダンスの先生？
•12年前までは、プロ競技会に出場していま
した。
•教室で個人レッスン、グループレッスンを
行い、収入を得ています。
•お客様とプロアマミックス競技会、お客様
とパーティーでのデモンストレーションに
出演しています。
Slide 4
Slide 4 text
12年前
教室のパーティーで
の、 プロデモンスト
レーション
Slide 5
Slide 5 text
現在
教室のパーティーでの、 お客様
とのデモンストレーション
Slide 6
Slide 6 text
開発の経緯
２０１８年８月に、関係のある競技団体から、
新システムへの協力の依頼。
概要を聞き、WordPress の管理画面を利用し
てできるのでは？と、閃く。
Slide 7
Slide 7 text
競技団体の新システム
•LAN で、Windows10 の PC と、タブレットを繋いで構築さ
れたシステム。
•長所
•受付システムが秀逸。
•受付からデータが一貫している。
•短所
•機材が多い。
•データ作成が煩雑。（作成者は徹夜必至）
•データや受付でトラブルがあると全てに影響する。
Slide 8
Slide 8 text
WordPress でのシステム
•WordPress の管理画面で、集計(PC)・採点(タブレット)を
行う。
•長所
•マルチプラットフォーム。
•データ作成が簡単（Excelで作成しCSVを読み込む）。
•短所
•インターネット接続が必要。
•受付システムが無い。
Slide 9
Slide 9 text
計画段階
•最初は、Web サービスを作成するつもり
は無く、システムを競技団体に売り込む
予定だった。
•この様な事は、初めてだったので、識者
に意見を伺った。
Slide 10
Slide 10 text
識者に意見を伺う
•キタジマタカシ https://2inc.org/ 様に電話で聞
いてみました。
•主にネットワークの接続の問題を聞いてみ
ました。
•サーバーが遅すぎるので、良いサーバー
に乗り換えた方良い。
•最初にモックをつくるべき。
Slide 11
Slide 11 text
開発ー審査員端末ー予選
•審査員端末のモック作成
•予選はチェック法なので、チェックボッ
クスを使用。
•単純に、Input type=“checkbox” を使用。
•スタイルは、大きくした。
Slide 12
Slide 12 text
予選
Slide 13
Slide 13 text
開発ー審査員端末ー決勝
•決勝は順位法で、iOS のタイマーのようなダ
イヤル式にする事にする。
•決勝の順位法に使用するダイヤルに使える
jQuery が見つからず、Twitter で尋ねる。
•bouya Imamura @s56bouya 様に紹介してい
ただきました。
Slide 14
Slide 14 text
https://www.jqueryscript.net/form/iOS-7-Style-jQuery-3D-Animated-Value-Selector-Drumjs.html
ダイヤルタイプの jQuery
Slide 15
Slide 15 text
決勝
Slide 16
Slide 16 text
請負からWebサービスへの転換
競技団体に売り込むはず。
• すでに予算がついて動きが止められない。
• 自分が競技団体の採点システムのメンバー
に据えられる。
Webサービスへの転向を決意。
Slide 17
Slide 17 text
Webサービスの登録方式１
• WordPress 標準の登録
• メールアドレスのみで登録
• 利用規約のチェックボックスを付加
• プラグイン化 > User Mail Only Register
Slide 18
Slide 18 text
メールアドレスのみで
利用規約チェックボックス付きの登録画面
Slide 19
Slide 19 text
Webサービスの登録方式２
• １人のオペレーターの登録で締め切り
• 同時にそのオペレーターのメールアド
レスで複数のユーザー（審査員端末）
を登録
• プラグイン化 > Add Multiple User
Slide 20
Slide 20 text
１つのメールアドレスで
複数アカウント登録？
通常エラーが出ます！
Slide 21
Slide 21 text
登録直後の通知メール
Slide 22
Slide 22 text
管理画面とデーターベースの確認
Slide 23
Slide 23 text
プラグインの管理画面
Slide 24
Slide 24 text
/* ==================================================
* Construct
* @since 1.00
*/
public function __construct() {
add_action( 'user_register', array($this, 'action_add_user') );
add_action( 'BdcScoringAcountHook', array($this, 'delete_data_acount') );
add_action( 'delete_user', array($this, 'action_delete_user'), 10, 1 );
// User Mail Only Register filter
add_filter( 'umor_not_register_message', array($this, 'bdcregister') );
if ( get_option( 'users_can_register' ) ) {
add_filter( 'allow_minor_auto_core_updates', '__return_true' );
add_filter( 'auto_update_translation', '__return_true' );
add_filter( 'auto_update_plugin', '__return_true' );
add_filter( 'auto_update_theme', '__return_true' );
} else {
add_filter( 'automatic_updater_disabled', '__return_true' );
}
}
/* ==================================================
* Administrator Add User Hook
* @param int $userid The user ID.
* @since 1.00
*/
public function action_add_user( $userid ){
$user = get_userdata($userid);
$role = implode( ', ', $user->roles );
if ( $role === 'bdc_user' ) {
update_option( 'bdc_user_id', $userid );
update_option( 'users_can_register', FALSE );
// 6days
wp_schedule_single_event( time() + 518400, 'BdcScoringAcountHook' );
}
}
採点システム側の登録時
Slide 25
Slide 25 text
/* ==================================================
* Administrator Add User Hook
* @param int $userid The user ID.
* @since 1.00
*/
public function action_add_user( $userid ){
$amu_settings = get_option('addmultipleuser');
$user = get_userdata($userid);
$unm = $user->user_login;
$key = get_password_reset_key($user);
$useremail = $user->user_email;
$role = implode( ', ', $user->roles );
if ( $role === $amu_settings['def_role'] ) {
$amu_meta = get_user_meta( $userid, 'amu_meta', TRUE );
if ( empty($amu_meta) ) {
$prefix1 = substr($useremail, 0, 3);
$prefix2 = date_i18n("ymdHi");
$prefix = $prefix1.$prefix2;
$amu_meta = array(
'add' => 'def',
'number' => $amu_settings['def_number'],
'prefix' => $prefix
);
update_user_meta( $userid, 'amu_meta', $amu_meta );
$this->message = $this->auto_insert_users($useremail, 1, $amu_meta['number'], $prefix,
$amu_settings['add_role']);
}
}
}
Add Multiple User 側の登録時
Slide 26
Slide 26 text
/* ==================================================
* Create multiple user
* @param string $e_mail
* @param int $number_min
* @param int $number_count
* @param string $prefix
* @param string $add_role
* @return string $messgae
* @since 1.00
*/
private function auto_insert_users($e_mail, $number_min, $number_count, $prefix, $add_role) {
$message = __('Multiple users added as follows.', 'add-multiple-user')."¥r¥n¥r¥n";
$user_ids = array();
for ( $i = $number_min; $i <= $number_count; $i++ ) {
$unm = $prefix.sprintf( '%02d', $i );
$pswd = wp_generate_password(8, FALSE, FALSE);
$userdata = array(
'user_login' => $unm,
'user_pass' => $pswd,
'role' => $add_role
);
$user_ids[] = wp_insert_user( $userdata );
}
global $wpdb;
foreach ( $user_ids as $userid) {
$result = $wpdb->query($wpdb->prepare("UPDATE $wpdb->users SET user_email = %s WHERE ID = %d",$e_mail,$userid));
$user_info = get_userdata($userid);
$unm = $user_info->user_login;
$key = get_password_reset_key($user_info);
$message .= sprintf( __('Username').': %s', $unm )."¥n";
$message .= __('To reset your password, visit the following address:').': <'.network_site_url( "wp-
login.php?action=rp&key=$key&login=" . rawurlencode( $unm ), 'login' ) . ">¥r¥n¥r¥n";
}
return $message;
}
複数ユーザーの登録とメール通知
Slide 27
Slide 27 text
審査員端末のパスワードリセットを試す
オペレーターアカウントのメールアドレスにメールが配信される
Slide 28
Slide 28 text
Webサービスの登録方式３
• 課金により、審査員端末のアカウント
を、増やせるようにする。
• Add Multiple User と連携して、PayPal,
Stripe で課金できるようにする。
• プラグイン化 > Simple PayPal Payment,
Simple Stripe Payment
• フィルターフックで連携
Slide 29
Slide 29 text
課金による端末（ユーザー）追加
Slide 30
Slide 30 text
課金による端末（ユーザー）追加の通知
Slide 31
Slide 31 text
// For Simple Stripe Payment
add_filter('simple_stripe_payment_charge', 'stripe_chrage', 10, 7 );
// For Simple PayPal Payment
add_filter('simple_paypal_payment_charge', 'paypal_chrage', 10, 6 );
echo do_shortcode('[simplepaypalpayment locale="'.$locale.'" size="medium" amount='.$amount.'
currency="'.$currency.'" after="'.htmlentities($terminals_paid_html).'" remove=".payment_html"
remove2="#SPPcustomButton" email="'.$email.'" payname="add-multiple-user"]');
echo do_shortcode('[simplestripepayment amount='.$amount.' currency="'.$currency.'" name="BDC Scoring"
description="'.sprintf(__('%d terminals', 'bdc-scoring'), $amu_settings['paid_number']).'"
after="'.htmlentities($terminals_paid_html).'" remove=".payment_html" remove2="#simple_paypal_payment_paypal-
button" email="'.$email.'" payname="add-multiple-user"]');
/* ==================================================
* Filter of Simple PayPal Payment
* @since 1.00
*/
public function paypal_chrage( $data, $payment_data, $email, $amount, $currency, $payname ) {
// Payment TRUE
do_action( 'amu_paid_add_user', $payname );
}
/* ==================================================
* Filter of Simple Stripe Payment
* @since 1.00
*/
public function stripe_chrage( $token, $email, $amount, $currency, $name, $description, $payname ) {
// Payment TRUE
do_action( 'amu_paid_add_user', $payname );
}
採点システム側の課金時
Slide 32
Slide 32 text
ユーザーの自動削除
Wp-cron を利用し６日間ですべてのデータ
とユーザーを削除するようにした。
世の中の競技会は大体日曜日に行われてい
るので、７日間以上だと重複利用される可
能性があるためです。
Slide 33
Slide 33 text
/* ==================================================
* Construct
* @since 1.00
*/
public function __construct() {
add_action( 'BdcScoringAcountHook', array($this, 'delete_data_acount') );
add_action( 'delete_user', array($this, 'action_delete_user'), 10, 1 );
}
/* ==================================================
* Delete User Hook
* @param int $userid The user ID.
* @since 1.00
*/
public function action_delete_user( $userid ){
if ( $userid == get_option( 'bdc_user_id' ) ) {
delete_option( 'bdc_user_id' );
update_option( 'users_can_register', TRUE );
wp_clear_scheduled_hook( 'BdcScoringAcountHook' );
}
}
/* ==================================================
* Delete Acount
* @param none
* @return none
* @since 1.00
*/
public function delete_data_acount() {
// Delete bdc_user
require_once(ABSPATH.'wp-admin/includes/user.php' );
wp_delete_user(get_option('bdc_user_id'));
}
採点システム側の削除時
Slide 34
Slide 34 text
その他の Web サービスとしての機能
• 重複ログインの禁止 Ban Double Login 作者：小川果純様
• https://ja.wordpress.org/plugins/ban-double-login/
• 多国語対応 Locale Auto Switch
• https://ja.wordpress.org/plugins/locale-auto-switch/
• セキュリティ対策 Loginizer 作者： Loginizer （会社）
• https://ja.wordpress.org/plugins/loginizer/
• パスワードリセット対策 Password String Generator
• https://ja.wordpress.org/plugins/password-string-generator/
Slide 35
Slide 35 text
プラグイン一覧
Slide 36
Slide 36 text
採点システム
ボールルーム競技会採点システム
https://bdc-scoring.com/ja/
競技会採点システム
https://compe-scoring.com/ja/
実際の採点システムに関しては以下のサイト
をご覧ください。
Slide 37
Slide 37 text
サービス開始後の反応
誰も登録してくれない。
サイトをみた、ボールルームダンスとは
関連の無いダンス団体から声がかかる。
Slide 38
Slide 38 text
汎用的な競技会採点システム
• ボールルームダンス競技会採点システムをベースに作成
• 一般向け 期間限定 Web サービスとして公開
• 誰でも１回払い６日間の利用で登録可能。
• 団体向け 無期限、月額制 Web サービスとして公開
• 初期費用は、初期設定、サーバー設置費用として。
• 団体独自の付加機能を開発費として。
• 月額料金をサービス使用料、サーバー管理料として。
Slide 39
Slide 39 text
最後に
•Webサービスの利点
•自前のサーバーで動けば良い。
•GPLなどのオープンソースライセンスに
左右されないので、使い易ければ収益
につながる。
•世界中を顧客にできる。