pixiv insideは移転しました! ≫ http://inside.pixiv.blog/

ピクシブとニジエで野球!? — コードを書いて学んだ草野球チームの運営

こちらは「ピクシブ株式会社 Advent Calendar 2016」20日目の記事です。

qiita.com

16卒エンジニアの pawa です。社内では「pixivコミック」「pixivノベル」の開発に携わっています。趣味では「青空文庫」のイベントや草野球チームに参加しています。

私は野球に恋をしているので、就活時は

「エンジニアになっても野球ができるのか」

というのが、とても気がかりでした!

今回は、エンジニアの私が、いかにしてコードを書いて草野球チームの運営ノウハウを学び、ピクシブとニジエの連合草野球チームの運営に関わるに至ったのかについて、キーボードを打鍵してみようと思います。

野球を通じて受けた恩を返そうとした結果、コードを書くことになった

私には心に矢を受け続けた後遺症があります。大学院生の時に支えていただいたカウンセラーの先生との対話で、それを緩和するには「野球が好きな人らと関わる」のが最良であることが分かっていました。

ピクシブ内定後に真っ先に訊いたのは「部活動があるか」だったと思います。 さすがに会社内では野球の活動はなく、会社内にチームを作るほどの動機づけもありませんでした。諦めて、社外の草野球チームに参加することにしました。

所属してから数ヶ月が経ち、練習後にチームメイトとファミレスで肉を食らっていると、「チームのWebサイトをつくろう!」という話になりました。練習・試合・忘年会などを通じて非常によくしてもらっている恩を返す絶好の機会だと捉えて「つくりたい」と申し出ました。ここから草野球チームのWebサイトづくりが始まりました。

草野球チームのWebサイトを作る専用のサービスがある

私はヤキュウヲヤメルトシニタクナル病にかかっているため、部活動以外での草野球の経験も長く、浪人生の頃から今までずっと続けています。そのため、草野球のWebサイトもたくさん見てきました。

草野球チームのWebサイトをつくるためのサービスとして、大学生の頃は「行くぜ!」を、大学院生の頃は「草野球オンライン」と大学院のWebサーバを利用した専用のWebサイトの2つを併用し、草野球を楽しんでいました。

「行くぜ!」は2000年代前半の佇まいを残した味のあるデザインです。一方、「草野球オンライン」は企業運営だけに洗練されたデザインです。ごく最近だと、「草野球オンライン」の運営会社が、2016年8月31日に「Teams」という草野球チーム専用のWebサービスをリリースしています。

f:id:devpixiv:20161220213341p:plain:w250 f:id:devpixiv:20161220213347p:plain:w250 f:id:devpixiv:20161220213358p:plain:w250

これだけ草野球チームのWebサイトを作れるサービスが揃っていて「わざわざスクラッチでWebサイトを作る必要があるのか?」と考えにふけっていました。ところが…

熱意に負けた

Webサイトについて、チームメンバーにアンケートをとってみました。質問項目は以下のような感じです。

  • 「草野球オンライン」を利用するかオリジナルのWebサイトを創るか?
  • サーバをどうするか?(許容できる費用と欲しい機能などを訊きました)
  • スマホとPCどちらで見るか?

実は当初、「Google スプレッドシート」に回答を書き込んでもらおうとしたのですが、最終的にはLINEで回答してもらったものを集計することになりました。なぜなら、ITに疎いチームメンバーにとって、Google スプレットシートへの入力はとても難しかったのです。IT企業に属していない方々のITリテラシーを知る良い機会となりました!

楽をしたかったので、私としては「草野球オンライン」を使いたかった。しかし、スクラッチでオリジナリティの高いWebサイトをつくりたいという意見が多数でした。チームメンバーみんなで何か1つのものを作りたい! という想いがヒシヒシと伝わってきました。

熱意に負けた。これは、いいことだ。そうなければ、いけないのだ。かれらの勝利は、また私のあすのWeb開発にも、光を与える。

かくして、ITに疎い草野球チームにマッチしたWebサイトを開発することになりました。

草野球チームの運営に適した機能とデザインについて再考した

Webサイトはこれまで何度も作ってきました。ただ、草野球チームのためにWebサイトを作るのは初めてだったので、草野球チームのWebサイトに必要な機能は何なのか調査することにしました。

他の草野球チームのWebサイトを眺めながらあれこれ考えていると、3種類のユーザーがいて、以下のようなユースケースがあるということが分かってきました。

草野球チームを探している人:

  • トップページを見るだけで現在も活動していることが分かる
  • トップページを見るだけで東京で活動していることが分かる
  • 絶対に迷うことなくメンバー募集に応募できる
  • どんなメンバーがいるかについてある程度詳しく知ることができる

対戦相手を探している人:

  • トップページを見るだけで現在も活動していることが分かる
  • トップページを見るだけで東京で活動していることが分かる
  • 絶対に迷うことなく対戦申込できる
  • スケジュールが空いていることを確認できる

チームメンバー:

  • スケジュールを確認できる
  • 他のメンバーのことを知ることができる
  • 試合の成績を確認できる
  • 休んだときにどんな活動をしたか知ることができる
  • 活動していることを世界中に発信できる

上記の3種類のユーザを念頭に置きつつ、大体のデザインのイメージや雰囲気を伝えられるよう、トップページだけ Sketch でデザインし、メンバーと共有しました。

f:id:devpixiv:20161220213323p:plain

この他のページは行き当たりばったりでデザインしました。

コードを書いて解決しなくてはいけない所のうち、特筆すべき点があるとするなら「スケジュールの管理」「メンバーの情報」「成績の管理」でしょうか。ブログを書いてもらうのも骨が折れる問題だったので一筆しましょう。

あえてPerlでつくる

仕事では滅多に使わない Perl をあえて使うことにしました。この当時、私にとってこの規模のWebサイトを最速で構築できる言語がたまたま Perl だったからです。完全に趣味です。

フレームワークは、オールインワンであるがゆえに依存ライブラリのアップデートで壊れにくい「Mojolicious」を使いました。(選定というほど Perl のWebアプリケーション・フレームワークに選択肢があるわけでもありませんが。)

サーバにSSHで潜って、Mojolicious で欲しいページへのルートを生成しつつ、25時〜27時頃に独りシコシコと開発していきました。

余談ですが、pixiv本体は開発環境の構築が容易ではなく、pixiv本体に触れる場合は、開発専用サーバーにSSHで潜ってエディタを立ち上げてコードを書くという、同様なスタイルで開発しています。

スケジュールの管理

日程表ページには Googleカレンダーの情報をレスポンシブ対応で貼り付けたかったので、レスポンシブウェブデザイン対応のカレンダーjQueryライブラリの「monthly.js」を利用してページ作成していきました。

サーバサイドで「http://seekerz.tokyo/schedule.xml」のようなXMLを返してやると monthly.js がいい具合に表示してくれます。(最近 JSON にも対応したみたいです。)Googleカレンダーの情報は、「Google::API::Client」で取得して適当にキャッシュしつつ、昔ながらの「XML::Simple」で返しています。

Google::API::Client はドキュメントが貧弱で、cpanratings のレビューでもそのことが指摘されていますが、ライブラリの eg/ 以下のディレクトリが充実していて、

辺りのコードを読めば充分使えるかと思います。

Google Calender API」を叩けるようになるまでが少々手間でしたが、ドキュメントを丁寧に辿れば問題ありません。このようなPerlのコードを書くといい具合にXMLが出力されます。

祝日の情報はGoogleカレンダーに標準でついていた「日本の祝日」を利用しました。天気などもちょこっといじれば表示できると思います。変にハマるポイントは、「○時〜x時」の情報がないGoogleカレンダーのイベントがあったり(上記のコードはそれを考慮していない)、monthly.js と Google Calendar API では終了時刻それ自体をイベントの期間に含めるか否か(不等号にイコールが付くか否かのような)の違いがあったりするというようなところです。

うまく処理できれば以下のように表示されます。

f:id:devpixiv:20161220213436p:plain:w250 f:id:devpixiv:20161220213432p:plain:w250

ITに疎いチームメンバーにもブログを書いてもらえるようになる秘密道具

ブログといったらWordPress。WordPress 3.0 が出た頃からサーバにインストールして使っていて、開発コストを下げるなら WordPress かと思って利用しました。チームメンバーのITの疎さを考えるとログインして投稿してもらうのも難しいと考えて、メールを送ればブログの記事として投稿されるプラグイン「Postie」を採用しました。余裕があればメンバーにも記事を投稿してもらっています。 このプラグインは写真をメールに添付してもうまく投稿してくれる中々の優れものです。

f:id:devpixiv:20161220213420p:plain:w250 f:id:devpixiv:20161220213511p:plain:w250

メンバーが管理画面に入るための定番のアレを実装する

よくある社会人サークルのWebサイトには、管理画面へのログインページがあります。メンバーのみがアクセスできるようなページを作る機能です。Webサイトの素材をアップロードしてもらうのと、メンバーの追加・編集・成績更新は管理画面から行いたかったので、Mojolicious::Routes::Route の under メソッドを利用して、よくある管理画面を実装しました。

f:id:devpixiv:20161220213440p:plain:w250

成績の管理

メンバーの情報変更画面は以下の通りで、成績は、試合ごとに管理するのではなく、年度ごとのデータに対して UPDATE 文を詠唱します。(私が間違えて更新することを前提としない手抜き仕様)

f:id:devpixiv:20161220213445p:plain:w250

よく訓練されたマネージャが以下のように成績を書いてくれるので、草野球の成績にしては珍しく、「走塁」と「守備」のデータも出すようにしました。 (成績が話のタネになったりするのがまた楽しい。)

f:id:devpixiv:20161220145902j:plain:w600

こだわりポイントは、「行くぜ!」のスマホ版が「打率」「打点」「打席」「打数」「安打」しか表示されない(「本塁打」は欲しいぞ)のに対して、 横スクロールさせることでPC版と同じ成績を見られるようにしたことです。野球を愛しているならスマホ版でもこれらを省略表示するわけにはいきません!

f:id:devpixiv:20161220213428p:plain:w250 f:id:devpixiv:20161220213424p:plain:w250

草野球チームを運営する

Webサイトは完成し、以下の体制で運営していきました。

  • Twitter 更新:マネージャ
  • スコア入力(紙):マネージャ
  • スコア入力(Web):私
  • ブログ更新:私かメンバーの1人
  • 入団希望者対応:私

Web以外のチームの運営にも、

  • 試合を組む
  • 派遣審判を手配する
  • グラウンドを確保する(←これが一番大変)
  • ヘルメット・キャッチャー道具・ボールを運ぶ
  • 「白球ボーイ」でボールを洗う

などの仕事があるのですが、キャプテンと分担しつつうまくやっていました。試合を組んだりグラウンドを確保するノウハウなども溜まっていきました。

試合をやりたいメンバーとそうでないメンバーとのいざこざなど複雑な事情があって、Twitter の書き込みが1つしか残っていなかったり、ごく最近の活動の形跡はありませんが、 ここで深く語る必要もないでしょう。ただ1つどうしても言っておきたいことは、チームの目指す所を早い段階で共有しないと不幸が起こるということです。

ピクシブ✖ニジエ連合チームの設立・運営へ

もっと野球がしたいと悶々とした日々を過ごしていたときに、ピクシブ社員とニジエを中心とした有志で野球チームを結成しようという機運が高まっていたようで、 草野球チーム運営の経験がある私に話が舞い込んできました。居酒屋で草野球チーム運営のアドバイスをしているうちに、私の頭の中に草野球チーム運営のノウハウが恐ろしいほど溜まっていることに気づきました。

2016年7月2日に荒川河川敷運動公園 野球場での第0回 練習会の後の、

  • 第1回:8月6日 18:30〜20:30 「北区 中央公園野球場」
  • 第2回:9月19日 14:00〜18:00 「豊島区 総合体育場 野球場」
  • 第3回:10月15日 15:00〜17:00 「新宿区 西戸山公園 野球場」

は私がグラウンドを確保しました。 (グラウンド予約経験者だけに分かる豪華な球場ラインナップ)

技術面でも進化。練習の出欠確認に対する回答の呼びかけに LINE の「Messaging API」を活用。疲れ知らずのBOTさんにチーム運営のお手伝いをさせていました。Perl だと「LINE::Bot::API」を利用するとごく簡単なコードでLINEのグループトークで発言させることができます。Googleカレンダーの情報を取得して cron で練習・試合の予定を発言させると草野球の運営が捗ります!

連合チームのメンバーには早いうちに試合の楽しさを味わってもらい「野球をやめられない病気にさせてしまおう」と思い、第2回は、私のチームとの合同練習からの軽い試合を企画したりもしました。

f:id:devpixiv:20161221203137j:plain

f:id:devpixiv:20161221203131j:plain:w400

私も野球でもっとドキドキしたい!

とっても楽しそうに卓球をする女の子を見て、「私も野球でもっとドキドキしたい!」と思い、私は連合チームの運営からは手を引きました。グラウンド確保者になるとどうしてもそのチームの活動を休むことができなくなるのです。対外試合をしていこうという感じでもなかったため、毎週対外試合がしたい草野球中毒の私は、連合チームを抜け出しました。

今は「アンバージャック」という草野球中毒者向けのチームのお世話になっています。忘年会の翌日の昼から試合をしたり、2時間の試合後にもう2時間練習するようなバカ野郎(褒め言葉)たちと毎週ドキドキして、週半ばで次の試合の連絡が回ってきて、またドキドキして、いいリズムで仕事ができるようになったと感じています(重症)。

まとめ・知見

  • 趣味の創作はピクシブでの仕事にもよく活きる(逆もまた然り)
  • 行動するだけでも信頼を得られる
  • スポーツチームが目指すべきところを早い段階で共有しないと不幸が起こることが多い
  • 大好きが共通する人と大好きなことをすると、とんでもなく楽しい(スポーツに限らず)
  • 「好きって気持ちは何よりも強い」かどうかは分からないが、人を動かす大きな力を持っている
  • 会社内のメンバーと親睦を深めるなら会社内のメンバーとスポーツするほうがいいが、刺激やリフレッシュを優先するなら誰も知らないチームに飛び込むのがいい

好きなスポーツがあれば、ぜひ、気になるチームに飛び込んでみてください! 楽しくてドキドキ✖ワクワクな未来が君を待っています。

21日のアドベントカレンダーは、@consomme72 さんの Android のお話です。乞うご期待!