pixiv insideは移転しました! ≫ https://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 のお話です。乞うご期待!

社内で勝手にアプリを作ってみんなでワイワイした話

この記事は ピクシブ株式会社 Advent Calendar 2016 の21日目の記事です。

みなさん初めまして。初めてじゃない方はお久しぶりです。ピクシブ株式会社でAndroidアプリを担当しております @consomme72です。
ピクシブでは、エンジニアが勝手にいろんなものを作って、いつの間にかそれが社内で広く使われているといったケースが多くあります。特にSlackのBOTは毎週のように新しいものが追加されていて、ある日突然チャットに登場してビックリすることも少なくありません。 今年のAdvent Calendarでも、LINE BOTでpixivコミックをおすすめしてくれる司書の話が紹介されました。

そしてスマートフォンアプリでも、エンジニアが勝手に作って社内で公開しているプロダクトがいくつかあります。今回は、その中からいくつかの事例を紹介したいと思います。

pixiv Spotlight(現pixivision)のスマートフォンアプリ

pixivに投稿された作品をテーマを決めて特集形式で紹介したり、イラスト講座やクリエイターインタビューなど、pixivの魅力を幅広く伝える場、それがpixivisionです。

pixivisionの前身であるpixiv Spotlight時代、弊社エンジニアの@fromatomが勝手にiOSアプリを作りました。 f:id:consomme72:20161221141417p:plain

iOS版ができたのであれば、Android版も作らなければいけません。Androidエンジニアとしての使命です。
f:id:consomme72:20161221141426p:plain

RSSを読み込んでRecyclerViewに並べて記事はWebViewで開く、新着記事が公開されたら通知を出す、といった非常に簡素なアプリですが、Spotlightチームの社員にも好評でした。 何より社内限定で非常に小さいとはいえ、久々にアプリを一から作って公開して、エンジニア以外の方からも感想をいただけたというのは嬉しかったです。 f:id:consomme72:20161221164137p:plain

社内版Gyazoのスマートフォンアプリ

PCのスクリーンショットを簡単にアップロードできるGyazoというサービスがありますが、画像が公開されてしまうため、会社で使うとなるとセキュリティの面で使うのが難しいです。
そこでピクシブでは、独自でサーバを用意して社内ネットワークからのみアクセスできる「pyazo」というものを使っています。 サイトの動作確認だったり、デザインが崩れているといった場合にエンジニアに伝える手段として、pyazoは非常に便利な存在です。

PCからはキャプチャしてpyazoにアップロードまで自動で行うツールが用意されているのですが、スマートフォンからはできませんでした。 そこで弊社エンジニアの@fromatomが、iOSから画像をpyazoにアップロードするアプリを勝手に作って社内に公開しました。 f:id:consomme72:20161221104104p:plain

iOS版ができたのであれば、Android版も作らなければいけません。Androidエンジニアとしての使命です。
f:id:consomme72:20161221162935p:plain

今回のAdvent Calendarの記事で何を書こうかと悩んでいたときに、ちょうど@fromatomがiOS版について話していたのを見て、そうだこれをネタにしようと思いついて3時間ぐらいで作りました。
短時間で作った割にはちゃんと動いてくれて、なおかつ業務にも使えるアプリとして仕上がったのではないかと思います。(動画はなぜか横になってしまったので首を横にして再生してください)

まとめ

このように、ピクシブでは普段の業務とは少し違った、あるとちょっと便利だよねといったプロダクトがいつの間にかできていたりします。
今回のアプリの例に限らず、エンジニアじゃない社員からこういうものが欲しいと言われたことをエンジニアが作って提供することで、業務の効率化につながり、さらにはユーザーのみなさんのよりよいpixivの体験につながるという好循環が生まれます。

また、エンジニアとして新しいものを作ること、それを使ってもらえることはとても嬉しいことで、普段の業務のテンションアップにもつながるという、まさにWin-Winな関係を築くことができます。
みなさんの職場や学校などでも、小さなものでもいいのでぜひいろんなプロダクトを作ってみてください。

最後になりますが、この記事を読んでいるあなた、そう、あなたです!
ピクシブ株式会社ではエンジニア(特にスマートフォンアプリエンジニア)を大募集しています!
私達と一緒によりよいアプリを作っていきたいという人はぜひ一緒に仕事しましょう!お待ちしています!!

次回予告

明日は @moyashipanの出番です。お楽しみに。