目的

フィンランド発祥のホビー「モルック」は、現在日本では競技スポーツとして親しまれることが多くなっています。

私は4年ほどプレーしていますが、昨今は体験会や練習会、大会などのイベントがかなり多くなり、多いときは週末に全国で40件以上開催されていることも珍しくなくなりました。

そんなモルックのイベントですが、初心者やモルックをもっとやってみたい新規ユーザーにとっては探すのが難しいというのが課題になっていました。現状主に旧TwitterなどSNSを自力で調べるか、なんとか既存のモルックプレーヤーと知り合いになるしか方法はありませんでした。

そういった「新規が入りづらくなりつつある状態」によって、大会情報をみつけてもすでにエントリーが終了していた、などといった課題も発生しています。

そんな状況を打開し、より新規が入りやすくする環境をつくるために、誰でもイベント情報を見つけることができるHPを作ろうというのが表題の目的です。

GitHub

HP作成メモ

どのようにHPを作成したのかを記載します。

元データ

HP作成以前に、もともとGoogleスプレッドシートに溜め込んでいるイベント情報一覧データがあるので、これを元データとしていきます。

このデータについては完全に人力で集めています。主に旧TwitterなどのSNSを #モルック で検索してみつかった体験会・練習会・大会などのイベントを記録していたり、日本モルック協会のHPに掲載されているイベント情報、ハッシュタグはついていないものの既存ユーザーの間で認知されているイベント情報などが対象です。

「全国のあらゆるイベントを集める」というのがコンセプトなので、少人数や小規模なイベントも対象としています。また、「インターネット上に公開されていること」を条件としているので、たとえば非公開アカウントが投稿しているもの、LINEのオープンチャットなどでしか知り得ないものは対象外にしています。

また、イベント主催者や参加者からの情報提供も受け付けており、Googleフォームを用意しています。全体の1割以下ですが、情報提供を送ってくれる方もおりとても助かっています。

このスプレッドシートにGASを埋め込み、WebAPIを叩くとイベント情報一覧のJSONを返してくれるようにしています。

イベントカレンダーHP

HPは以下。

当初AWSなどをいい感じに使ってHPを建てようとしていましたが、思い立ったその日にHPを構築したい、スピード感を優先したため、すぐに運用できるレンタルサーバーを選択しました。

サービス選びですが、もともとドメインを「ムームードメイン」で取得していたので、系列である「ロリポップサーバー」で立てることにしました。AWSなどであればもっと安価に済みそうな気もしますが、とりあえず月500円ほどで収まるので許容範囲です。

設定において特別なことはしておらず、説明に従ってHTMLやJavaScriptなどの資材をアップロードしています。

CSS

サイトのデザインは大事ですが、スピード感を持って作りたかったのでシンプルなCSSライブラリを探し、結果として「Spectre」を選択しました。

設定する内容が少ないこと、シンプルな書き方でレスポンシブデザインになることが特徴です。モルックユーザーはスマホユーザーのほうがPCよりも圧倒的に多い（高いときは9割がスマホ）ので、スマホ画面で見やすくなるのがありがたかったです。

イベント情報についてはカード型のオブジェクトを使用しました。例として表示されていたイメージが自分のやりたいことに一致していたので、ほぼほぼそのまま流用しています。

また、Spectre.cssはCSSだけでフィルタを作ることができるライブラリも用意しているので、これをイベントの「都道府県フィルタ」や「イベント種別フィルタ」などに利用しています。いちいち通信が発生しないのでユーザーにとってありがたいと思います。

イベントカードは以下のようにJS内で力技で追加しています。

// イベントカード要素の追加
$('#event-columns').append(
    `<div name="outer-card-upper-${i}" class="column ${cardCol} col-xs-12 p-2 filter-item ${dataTag}" data-tag="${dataTag}">
        <div name="card-${i}" class="card ${cardClass}">
            <div name ="card-header-${i}" class="card-header text-large">
                <div name="card-title-${i}" class="card-title h3">${eventTitle}</div>
                <div name="card-subtitle-${i} class="card-subtitle text-gray">
                    <i class="lar la-calendar"></i> ${eventDate} ${youbi} ${eventTime}
                    <span class="label label-rounded label-${labelColor}"> ${event['category']}</span>
                    ${detailLabel}
                </div>
                ${imageArea}
            </div>
            <div name="card-body-${i}" class="card-body">
                <ul class="menu">
                    <li class="menu-item btn"><a class="btn btn-link text-left" href="${event['source']}" target="_blank"> <i class="icon icon-link"></i> ソース（情報取得元）</a></li>
                    ${articleLink}
                    <li class="menu-item"> <small class="label text-bold">主催</small> ${event['org']}</li>
                    <li class="menu-item"> <small class="label text-bold">シリーズ</small> ${event['seriesName']}</li>
                    <li class="menu-item"> <small class="label text-bold">場所</small> <span class="label label-rounded">${event['prefecture']} </span> ${event['place']}</li>
                    <li class="menu-item"> <small class="label text-bold">ルール</small> ${composition}</li>
                    <li class="menu-item"> <small class="label text-bold">チーム/人</small> ${event['teamNum']}</li>
                    <li class="menu-item"> <small class="label text-bold">エントリー開始</small> ${event['entryStart']}</li>
                    <li class="menu-item"> <small class="label text-bold">参加費</small> ${event['entryFee']}</li>
                </ul>
            </div>
            ${remarks}
            <div name="card-footer-${i}" class="card-footer"></div>
            <small class="text-gray text-small p-2">更新日: ${updateDate}</small>
        </div>
        <div name="outer-card-lower-${i}" class=""></div>
    </div>`
);

イベントカードはPCだと以下のように表示されますが、スマホでは1行に1枚ずつ表示されます。

jQuery

画面の表示や更新については、オーソドックスなjQueryを用いています。これも色々とJSフレームワークを使いたいところではありましたが、スピード感を意識しました。

主に以下の操作に使用しています。

初期表示時、スプレッドシートのGASを叩いて情報一覧を取得、結果表示
都道府県フィルタ設定時、GASでフィルタ済み情報一覧を取得、結果表示
他細かい動き

正直、画面表示ごとにGASを叩いているのは非効率で、100人近くが一斉にアクセスすると動きが止まってエラーになる可能性があるのですが、現状はそこまで大人数に見られているサイトではないので、そのあたりの優先度は下げています。将来的にはDBアクセスの形にして、GASを直接叩くような状態からは脱却したいと思います。

広告

毎月のサーバー費やドメイン費などがかかってしまっているので、申し訳程度に広告を設置しています。これに関しても特別な作業はしておらず、オーソドックスな手順でHTMLファイルに追加している形です。あくまで趣味であり営利目的ではないため、邪魔にならない最小限な設置に抑えています。

詳細記事

一部の大規模なイベントについては別途運用しているブログのほうに詳細記事を作成し、そこに飛べるようなリンクを設置しています。

ブログサービスははてなブログですが、取得したドメイン jajapatatas.com のサブドメインを使用できるよう、ロリポップ・はてなブログ側双方で設定を行っています（設定方法の詳細はオーソドックスなので割愛）。

本来であればこのHP内で完結したいですが、ここも妥協案として現状はこのような形となっています。

HPをつくってみて

上記の通りHPをつくる手順はかんたんなものであり、特別何かをしたとかモダンな技術を用いたというのはアリませんでした。

ですが、いままで（練習以外で）サービスをつくって公開する、ということはしたことがなかったので、HPをひとつ公開するにはこのような手順が必要になる、ということが実感を持って得られたのは良い経験になったと思います。趣味で動画も作っているのですが、「何も公開しないよりまず出す」というのはやはり大事で、一つ完走することでその次に出すもののクオリティが確実に上がっていくと思います。

今後の方針

とりあえず運用を開始して現状は落ち着けていますが、今後利便性の向上や拾っていく情報の範囲を広げることを目標としています。

一応目指しているところはあって、個人的に趣味でよく見ている「格ゲーチェッカー」のモルック版になりたいと考えています。

格ゲーチェッカーは、その名の通り格闘ゲームに関してあらゆる情報が載っているサイトです。もともとは格闘ゲームの配信をしているチャンネルを表示するものだったそうですが、現在はそこから拡大し、プロシーンやコミュニティの大会情報、配信イベント、選手情報、大型アップデートや最新作情報などのニュースなど、「ここさえ見ておけば全部わかる」といっていいくらい網羅されているポータルサイトと化しています。

モルックは格闘ゲームと比較するとまだまだ小規模なコミュニティですが、コミュニティを維持するためには常に新規ユーザーが入り続けることが重要であり、そのために「既存ユーザーのみが情報を握っている」状態を脱却し、平等に情報へアクセスできるような状態に持っていく必要があります。たとえば、

どのような大会があるのか、中心となる重要な大会はなにか
はじめたては何をすればよいのか、近くに参加しやすい団体やコミュニティはあるのか
遊びのモルックと試合や大会ではどう違うのか
うまい選手や注目の選手・チームは誰なのか
上達するための教材や動画はどこにあるのか
最新情報はなにか

などにすぐにアクセスできるようになるべきで、そのために本サイトが「ここさえ見ておけば全部わかる」になりたいと考えています。

そういった方針があり、技術的にはワードプレス化やデータベース運用、イベント情報収集の半自動化などを検討していく必要があります。

また、設置している広告費は現状まだまだサーバー費などを賄えるまでになっていませんが、プラス担った場合はモルックコミュニティに還元できるような仕組みを検討しています。