WordPress で Web サービスの構築

WordPress で「競技会採点システム」のプラグインを開発しWeb サービスを始めました。

Transcript

1. WordPress で Web サービスの構築 WordPress で「競技会採点システム」の プラグインを開発しWeb サービスを始め ました。 Katsushi Kawamori @katsushi-kawamori on WordPress.org and Slack 河森 克至
2. 自己紹介 •社交ダンス教師 1997年9月〜 ケヅカダンスアカデミー松戸勤務 •プラグイン開発 2013年3月〜 •アドオン販売 2017年8月〜 •Web サービス 2018年11月～
3. 社交ダンスの先生？ •12年前までは、プロ競技会に出場していま した。 •教室で個人レッスン、グループレッスンを 行い、収入を得ています。 •お客様とプロアマミックス競技会、お客様 とパーティーでのデモンストレーションに 出演しています。
4. 12年前 教室のパーティーで の、 プロデモンスト レーション
5. 現在 教室のパーティーでの、 お客様 とのデモンストレーション
6. 開発の経緯 ２０１８年８月に、関係のある競技団体から、 新システムへの協力の依頼。 概要を聞き、WordPress の管理画面を利用し てできるのでは？と、閃く。
7. 競技団体の新システム •LAN で、Windows10 の PC と、タブレットを繋いで構築さ れたシステム。 •長所 •受付システムが秀逸。 •受付からデータが一貫している。 •短所 •機材が多い。 •データ作成が煩雑。（作成者は徹夜必至） •データや受付でトラブルがあると全てに影響する。
8. WordPress でのシステム •WordPress の管理画面で、集計(PC)・採点(タブレット)を 行う。 •長所 •マルチプラットフォーム。 •データ作成が簡単（Excelで作成しCSVを読み込む）。 •短所 •インターネット接続が必要。 •受付システムが無い。
9. 計画段階 •最初は、Web サービスを作成するつもり は無く、システムを競技団体に売り込む 予定だった。 •この様な事は、初めてだったので、識者 に意見を伺った。
10. 識者に意見を伺う •キタジマタカシ https://2inc.org/ 様に電話で聞 いてみました。 •主にネットワークの接続の問題を聞いてみ ました。 •サーバーが遅すぎるので、良いサーバー に乗り換えた方良い。 •最初にモックをつくるべき。
11. 開発ー審査員端末ー予選 •審査員端末のモック作成 •予選はチェック法なので、チェックボッ クスを使用。 •単純に、Input type=“checkbox” を使用。 •スタイルは、大きくした。
12. 予選
13. 開発ー審査員端末ー決勝 •決勝は順位法で、iOS のタイマーのようなダ イヤル式にする事にする。 •決勝の順位法に使用するダイヤルに使える jQuery が見つからず、Twitter で尋ねる。 •bouya Imamura @s56bouya 様に紹介してい ただきました。
14. https://www.jqueryscript.net/form/iOS-7-Style-jQuery-3D-Animated-Value-Selector-Drumjs.html ダイヤルタイプの jQuery
15. 決勝
16. 請負からWebサービスへの転換 競技団体に売り込むはず。 • すでに予算がついて動きが止められない。 • 自分が競技団体の採点システムのメンバー に据えられる。 Webサービスへの転向を決意。
17. Webサービスの登録方式１ • WordPress 標準の登録 • メールアドレスのみで登録 • 利用規約のチェックボックスを付加 • プラグイン化 > User Mail Only Register
18. メールアドレスのみで 利用規約チェックボックス付きの登録画面
19. Webサービスの登録方式２ • １人のオペレーターの登録で締め切り • 同時にそのオペレーターのメールアド レスで複数のユーザー（審査員端末） を登録 • プラグイン化 > Add Multiple User
20. １つのメールアドレスで 複数アカウント登録？ 通常エラーが出ます！
21. 登録直後の通知メール
22. 管理画面とデーターベースの確認
23. プラグインの管理画面
24. /* ================================================== * 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' ); } } 採点システム側の登録時
25. /* ================================================== * 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 側の登録時
26. /* ================================================== * 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; } 複数ユーザーの登録とメール通知
27. 審査員端末のパスワードリセットを試す オペレーターアカウントのメールアドレスにメールが配信される
28. Webサービスの登録方式３ • 課金により、審査員端末のアカウント を、増やせるようにする。 • Add Multiple User と連携して、PayPal, Stripe で課金できるようにする。 • プラグイン化 > Simple PayPal Payment, Simple Stripe Payment • フィルターフックで連携
29. 課金による端末（ユーザー）追加
30. 課金による端末（ユーザー）追加の通知
31. // 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 ); } 採点システム側の課金時
32. ユーザーの自動削除 Wp-cron を利用し６日間ですべてのデータ とユーザーを削除するようにした。 世の中の競技会は大体日曜日に行われてい るので、７日間以上だと重複利用される可 能性があるためです。
33. /* ================================================== * 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')); } 採点システム側の削除時
34. その他の 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/
35. プラグイン一覧
36. 採点システム ボールルーム競技会採点システム https://bdc-scoring.com/ja/ 競技会採点システム https://compe-scoring.com/ja/ 実際の採点システムに関しては以下のサイト をご覧ください。
37. サービス開始後の反応 誰も登録してくれない。 サイトをみた、ボールルームダンスとは 関連の無いダンス団体から声がかかる。
38. 汎用的な競技会採点システム • ボールルームダンス競技会採点システムをベースに作成 • 一般向け 期間限定 Web サービスとして公開 • 誰でも１回払い６日間の利用で登録可能。 • 団体向け 無期限、月額制 Web サービスとして公開 • 初期費用は、初期設定、サーバー設置費用として。 • 団体独自の付加機能を開発費として。 • 月額料金をサービス使用料、サーバー管理料として。
39. 最後に •Webサービスの利点 •自前のサーバーで動けば良い。 •GPLなどのオープンソースライセンスに 左右されないので、使い易ければ収益 につながる。 •世界中を顧客にできる。