体育会系Webエンジニアであることを生かしてスポーツライフをもっと楽しくしてみた

Last updated at 2017-12-16Posted at 2017-12-16

こちらは「体育会系エンジニア Advent Calendar 2017」の17日目の記事です。16日目は @mikity1985 さんの「【Android】Firebase Remote Config で、アプリの挨拶文を変更する」でした。

会社のお昼休みでテニスの壁打ちをしに行く程度にスポーツ好きのWebエンジニアの pawa と申します。

スポーツ歴は

野球
- 中学3年間（軟式野球部）
- 高校1年間（軟式野球部）
- 草野球8年くらい（大学院での軟式野球サークル2年半を含む）
卓球：2017年2月に始めて9ヶ月目の区民大会で大敗を喫してから一時お休み中
テニス：2017年9月11日に始めて3ヶ月目くらい

という具合で、今はテニスを週2＋自主トレ、野球を月1くらいでやっています。卓球・テニスは、40・50・60・70歳と年を取ってもスポーツをしていたくて始めました。20代後半から未経験のスポーツを始めるのは勇気が必要でしたが、これが中々刺激的で、新たな出会いもあり、挑戦して良かったと思っております。

なぜスポーツをするのか……

試合に勝ったあとのお酒の異常なほどのおいしさ
ラリーが続いてお互い笑顔にならざるを得ない楽しい感覚
ゾーンに入って周りの景色がスローになって自身でも驚くようなビッグプレーをしていたときの快感
ビッグプレーをした後の対戦相手・観客の驚く顔を見てゾクゾクする感じ

などは一度覚えるともう止められません。やみつきです。これらの一瞬を目一杯に味わうためにスポーツをしています。

体育会系Webエンジニアであることを生かしてみた

社会人になってもスポーツをしているWebエンジニアである強みが一番生きる場面は、やはりチームのWebサイトを作る場面ではないでしょうか？　私が属する草野球チームでもチームのWebサイトを作らないかという話が出ました。誰が作るかとなると、当然のごとく、チーム内に極稀にいるエンジニアが作ることになります。（__Webエンジニアリングもスポーツもバリバリやる人はかなり希少価値が高い__ようです。）

草野球チームのWebサイト作り

草野球は競技人口も多く、草野球チームのWebサイトを画面上でポチポチするだけで作れるサービスもあります。それらのサービスを使う提案も行ったのですが、チームオリジナルのWebサイトを作りたいという声が圧倒的多数派だったため、スクラッチで開発することにしました。開発時間帯は主に25時〜28時の間の2時間です。（気合だ!）

社会人スポーツチームのWebサイトに必要なものは何か

「どんな内容を掲載すればチームのWebサイトとして機能するか」を最初に考えました。

訪問者は大きく分けて以下の3種類になると考えました。

チームメンバー
所属したいチームを探している方
対戦相手を探しているチームの方

それぞれが何をできればいいかを考えると以下のように考えられました。

チームメンバーが…

チームの活動を確認できる
成績を確認できる

所属したいチームを探している方が…

チームがアクティブであることを確認できる
どんなメンバーが所属しているか確認できる
入団希望である旨をチームメンバーに連絡できる

対戦相手を探しているチームの方が...

チームがアクティブであることを確認できる
どんなメンバーが所属しているか確認できる
試合申込できる

以上より、大まかに

チーム紹介
選手名鑑
ブログ
試合申込
入団希望
日程表（←最近管理できていない）

というメニューがホームにあれば、上記3種類のどの訪問者にも簡潔に対応にできると考えました。

技術構成

以下の構成で作ってみました。

さくらのVPS 2G
Nginx
Perl（Mojolicious）
jQuery（「日程表」表示部分）
HTML5, Compass・SCSS
Munin, Monit（サーバ監視）
WordPress（ブログ）
SQLite3（成績管理）

デザイン

チームのユニフォームのカラーを意識しつつ「迷わせない」ことを意識して「Sketch」でデザインしました。

ロゴはチーム内のデザイナーの方が作ったようで、ロゴ画像だけもらいました。（当時はLINEで画像を送ると激しく劣化したので、管理画面にアップローダを設置して、そこからロゴ画像を送ってもらいました。）

Google Calendar API を利用した日程表

会社の仕事で Google Calendar を使っているので、仕事の合間に更新できるように、Google Calendar に予定を追加するとチームの日程表ページも更新される仕組みが欲しいと思いました。実現方法を調べると「Google::API::Client」「Monthly.js」を使うといい具合にレスポンシブデザインで実現可能であることが分かりました。

チョチョイのチョイとPerlのコードを書いてやると、休日・祝日用のカレンダーデータとチームの練習・試合予定がいい具合に混ぜ合わさった Monthly.js 用のXMLを出力できました。（今だとJSONでも対応していると思います。）

client_secret.json を取得するのが少々面倒だった覚えがあります。（ググって Google API のページから取得してください😅）

Monthly.js用の日程表をXMLで出力するPerlスクリプト

# !/usr/bin/env perl

use strict;
use warnings;
use utf8;
use feature qw/say/;
use open qw/:encoding(utf-8) :std/;
use JSON qw//;
use Time::Moment qw//;
use Google::API::Client;
use Google::API::OAuth2::Client;
use XML::Simple ();
use Cache::FileCache;
use DDP; # cpanm Data::Printer してね

my $myemail = 'xxx@gmail.com';
my $client_secrets_file = 'client_secret.json';
my $client = Google::API::Client->new;
my $gcal = $client->build('calendar', 'v3');
my $auth_driver = Google::API::OAuth2::Client->new_from_client_secrets($client_secrets_file, $gcal->{auth_doc});

my $dat_file = 'token.dat';
get_or_restore_token($dat_file, $auth_driver);

my $my_calender_id      = 'primary';
my $holiday_calendar_id = 'ja.japanese#holiday@group.v.calendar.google.com';

my $cache = Cache::FileCache->new({
    cache_root => '/tmp',
    namespace  => 'calendar',
});

my %cache_duration_of = (
    $my_calender_id      => '5s',
    $holiday_calendar_id => '7d',
);

my $now = Time::Moment->now;

my $first_day_of_month = Time::Moment->new(
    year   => $now->year,
    month  => $now->month,
    day    => 1,
    offset => 540, # +09:00（540分）
);

my $req_body = {
    timeMax => $first_day_of_month->plus_months(6)->to_string,
    timeMin => $first_day_of_month->minus_months(6)->to_string,
};

my $schedule = get_or_cache_event_items($my_calender_id);
my $holidays = get_or_cache_event_items($holiday_calendar_id);

my @events = (@{$schedule->{items}}, @{$holidays->{items}});

print make_xml(\@events);

exit;

sub get_or_restore_token
{
    my ($file, $auth_driver) = @_;

    if (-f $file)
    {
        open (my $fh, '<', $file) or die $!;
        local $/;
        my $access_token = JSON::from_json(<$fh>);
        close($fh);

        $auth_driver->token_obj($access_token);
    }
    else
    {
        my $auth_url = $auth_driver->authorize_uri;
        say 'Go to the following link in your browser:';
        say $auth_url;

        say 'Enter verification code:';
        chomp(my $code = <>);
        $auth_driver->exchange($code);
        store_token($file, $auth_driver);
    }
}

sub store_token
{
    my ($file, $auth_driver) = @_;

    my $access_token = $auth_driver->token_obj;

    open (my $fh, '>', $file) or die $!;
    print {$fh} JSON::to_json($access_token);
    close($fh);
}

sub get_or_cache_event_items
{
    my $calendar_id = shift;
    my $items = $cache->get($calendar_id);

    if ( ! $items )
    {
        $items = $gcal->events->list(calendarId => $calendar_id, body => $req_body)->execute({ auth_driver => $auth_driver });
        $cache->set($calendar_id => $items, $cache_duration_of{$calendar_id}) if $items;
    }

    return $items;
}

sub get_date_using_datetime { local $_ = $_[0]; s/(.+)T.+/$1/; $_; }
sub get_time_using_datetime { local $_ = $_[0]; s/.+T([0-9][0-9]:[0-9][0-9]):[0-9][0-9]\+.+/$1/; $_; }

sub make_xml
{
    my $items = shift;

    my $data = {};
    $data->{event} = ();

    my $i = 0;

    for my $item (@{$items})
    {
        my $event = {};

        my $startdate = $item->{start}{date} ? $item->{start}{date} : get_date_using_datetime($item->{start}{dateTime});
        my $enddate   = $item->{end}{date}   ? $item->{end}{date}   : get_date_using_datetime($item->{end}{dateTime});

        $event->{id}        = ++$i;
        $event->{name}      = $item->{summary};
        $event->{startdate} = $startdate;
        $event->{enddate}   = $enddate;

        $event->{color} = '#ffb128';
        $event->{color} = '#ddeeff' if $item->{organizer}{email} ne $myemail;

        $event->{starttime} = get_time_using_datetime($item->{start}{dateTime}) if $item->{start}{dateTime};
        $event->{endtime}   = get_time_using_datetime($item->{end}{dateTime})   if $item->{end}{dateTime};

        push(@{$data->{event}}, $event);
    }

    return XML::Simple::XMLout($data, RootName => 'monthly', XMLDecl => '<?xml version="1.0"?>', NoAttr => 1);
}