みらたか大会サイト作成・当日の画面周りについてつらつらと。
大会サイト
作成班の紹介
あべP
デザイナー見習いの三十路の人。ロゴ・フライヤーなどの制作やってます。
動画編集も勉強中。
名古屋新栄TORIDEポストカード展「春巻き」参加、鶴舞公園ブルーグラスフェスのフライヤー制作など。
（↑ここまでプロフィールからコピペ）
名古屋のDDRプレイヤーさん。
みらたか大会サイトでは、トップページの大会ロゴ・メニュー画像を作成いただきました。

こだま
　
名古屋のDDRプレイヤーさん。
「新・アーバンスクエア大須DDR大会」「DDR SuperTAKASKE-3 朱雀杯」背景イラスト作成に引き続き、
みらたか大会サイトでは、ＤＤＲ甲子園を始めとしたイラスト各種を作成いただきました。

TAKASKE-
皆様ご存知、MiracleTAKASKE-総主催。
みらたか大会サイトの原案・原画、大会ルール・ページ原稿全般の作成。

ひろ
みらたか大会サイトの取りまとめ。あとWDPCのページの手書きを担当しました。

サイト構想

ＤＤＲ甲子園
WDPC
主催
TAKASKE-
ひろ
コンセプト
TAKASKE-くん主催の大会
SuperTAKASKE-のイメージを踏襲　
TAKASKE-くんが主催ではない大会
Double版KAC⇒公式大会っぽさを狙う
カラー
赤
青
フォント
HG正楷書体-PRO
TeXGyreAdventor（＋手書き）

ＤＤＲ甲子園
ページの構想・イメージはかなり早い時期に決まっていました。
主催オーダー「IXのジャケットみたいな感じ」
イラストは4月に完成していて、最初に作った告知絵にも使いました。
ほかHTML構造（難易度カラーリング、注釈など）は一昨年のアーバンスクエア大須DDR大会をベースにしています。


・地域分け
すぱたか３名古屋の時に遠征部門の発表で使おうと思って用意したけど使わなかった白地図の出番。
地図右の文字はHG正楷書体-PROで小さい文字で書くと可読性が下がるので、ふい字Ｐで書いて画像化しました。


・トーナメント表
見せ方に頭を悩ませました。ジャケットを並べたいけど画面に収まらない。
縦にしたり横にしたり試行錯誤した結果、3曲を横に並べて4曲目を下に置く現在の形に。
というかそもそも課題曲が多すぎるｗｗｗｗｗｗｗｗｗｗ
　
※一部、WDPCのジャケットも含まれています。

WDPC
5月末に着手。
TAKASKE-くんのイメージカラーが赤なので、わざと青を基調にしてみました。主催は俺だ（こなみ
3年前から言われている「DDR版SASUKE」「忍者オーディション」のイメージを押し出しています。

・手書き
今でこそ大会告知がWebだったりスコア集計がExcelだったりしますが、
そうなる前は店舗の貼り紙だったりスコアも手集計で壁に貼ったりしていました。
ちょっとアナログに原点回帰してみたくなりましたｗ
当初は全てタブレットで書くつもりでしたが、
「紙に書いてスキャナで取り込んだ方が早くね？」という事で
フリクションボール※に持ち替えて手書き開始。

※消せるボールペン。ラバー部分で文字をこすると消える。インクが60℃で透明に変化する仕組みらしい。

　

・ひたすら書く
・ファミマのコピー機のPDFプリントで取り込む
・PDFの画像をJTrim（ペイントソフト）に取り込む
・白黒反転させる
・そのままだと文字が薄く読み辛いので出来るだけ白をシャープに
・黒を透過色にする
・背景に重ねる

これで本当にページが出来上がった時は感動したけど正直読み辛かったです、ごめんなさい。m(_ _)m
というわけで、ページ上部のトーナメント表に本戦だけでなく
検定試験・予戦含む全ての内容を詰め込んで、手書き文字を見なくても何とかなるようにしてみました。


ちなみにページ公開後に修正が入った時は↓こんな感じで対応しています。
・検定試験にIdola追加：他の検定課題曲の手書きから同じアルファベットを1文字づつ切り抜いて作成
・準備運動、e-AMU不使用ルールの追記：追加で手書きして取り込み直し

トップページ
二つの大会（ＤＤＲ甲子園・WDPC）のポータルというイメージ。
左：原案　右：完成品
　

・Japanese version only
英語版を作る計画がありました。計画だけでした。
Sorry, this site云々でも書いておこうかと思って、Google検索したら
その文言に対する解説をしているサイトを見つけて「Japanese version only」に合わせました。
（大会サイトのこの文言にマウスを合わせると、解説サイトへのリンクになっています。）

・バナー
みらたかには５種類のバナーが存在します。大会サイトに載っているものがメイン（４版）です。
　初版
　２版
　３版
　４版
　５版

ガラケーサイト
みらたか大会サイトはガラケーからの閲覧を意識することなく作りました。
ガラケーからは見えないだろうな。特にWDPCページとか無理だな（こなみ

…というわけで、6月末に即席で作りました。
5月末にTAKASKE-くんからもらった原稿HTMLをほぼそのまま転用して、
原稿時からルールが変わったところを反映しました。意外となんとかなった。
大会サイト内のQRコードをクリック、またはガラケーでQRコードを読み込むと飛びます。

事前登録
・ＤＤＲ甲子園
地域を選ぶと都道府県選択もその地域の先頭になるJavaScriptを組みました。
もともとは、地域を選ぶとリスト内の都道府県が絞られるようにというオーダーでしたが、
修正ボタンを押した時や都道府県選択後の地域変更などプログラム処理がよくわからなくなったので見送り。


・WDPC
画面に出すものって、名前とコメントくらいしか無いんじゃない？
⇒確かに無い！！！！！！！！！！
今までの参加登録フォームの中で一番シンプルな作りになりました。
ここにDDR-CODEを入力してもらって、当日までにDDR公式サイトで課題曲のスコアを調べて
WDPC本戦の中で表示するのも良かったかもと思ってます。


みらたか当日に運用していたシステム
TAKASKE-くんから、コントロールパネル付きで
画像・動画・音声などを表示するシステムの一式をもらって操作しています。
それを使えば大会進行は一通りできるものになっています。
そこに若干のカスタマイズを加えます。

コントロールパネル
インターネットブラウザで動作します。具体的にはInternet Explorer 11です。
但し操作するのはインターネット先ではなく、PC内に保存されたHTMLファイル。
大会中の動画・音声・画像も含め、全てInternet Explorerの画面から制御しています。

左：操作部分　右：左から呼び出されたものを表示するiframe

PCを拡張ディスプレイにして、右側のみをモニター表示。
手配いただいたモニターの表示サイズを調べて、1280x720が良い感じだったのでそれに合わせました。

動画
動画を埋め込むためのobjectタグが書かれたHTMLファイルを呼び出して再生します。
動画ファイルのパスをURLパラメータでHTMLファイルに渡す仕組みになっています。

画像
画像ファイルのパスをURLパラメータでHTMLファイルに渡すと、
指定の画像を背景にした空のHTMLファイルを表示します。
画像の表示方法は以下3種類。
1. 縦横比を無視して画面いっぱいに拡大
2. 縦横比を保持して画面いっぱいに拡大。左右が余ったら黒塗り
3. 拡大せず画面中央に表示。上下左右が余ったら黒塗り

音声
コントロールパネルのHTMLソースに埋め込まれたbgsoundタグで制御しています。
音声を停止する場合は、中身が空のWAVファイルを再生する仕組み。

予戦結果発表（POSSESSION）
昨年SuperTAKASKE-3のリザルト表示プログラムの使い回し。
横長にしてフォントを変えて、背景イラストの追加など一部カスタマイズ。
　

POSSESSION以外の結果発表、トーナメント、ＤＤＲ甲子園スコアボードなど
プログラムで自動化とかGUI化みたいな特別なものは作らず、全て普通のHTMLです。
モニターに映る内容は、現場でリアルタイムに作られたHTMLソースの表示結果です。
（プログラム化を施して当日にバグが出たら対処が間に合わないため）

当日の進行に合わせてどこを編集すれば良いかを瞬時に判断するため、
スコアやプレイヤー名など入力が必要になるところに全角スペースを入れておいて、
サクラエディタで全角スペースを検索→F3キーで追いかけられるように準備してありました。
　

画面周りはＤＤＲ甲子園が最大の山場でした。
各試合の3曲目終了後にスコアボードを更新してトーナメント表も反映して、
次回対戦用のHTMLに勝利チーム名を追記っていう作業を試合ごとにやってました。
特に組み合わせ抽選→1回戦の画面準備までの流れは全く追いつけなかった…。
（WDPCは本戦以降はトーナメント表しか編集しないのですごい楽でした。）

ＤＤＲ甲子園の打順決定カウントダウン
最初に「60」と表示して、
setTimeoutの1000ミリ秒ごとに数字を1ずつ減らして再描写するシンプルなJavaScriptで出来ています。
左：1・2回戦用　中：準決勝用　右：決勝用
　　

トーナメント表
position:absoluteでトーナメント表に合わせて配置したdivタグの
外枠のスタイルシートをいじることで実現しています。
1P側はborder-left、2P側はborder-right。対戦で勝った側のborder-colorは赤に変えるイメージ。
　

プレイヤー紹介
事前参加登録、かつWDPCの参加表明動画に出演されているプレイヤーのものを作りました。
レイアウトは上から順に
・事前参加登録のコメント欄
・事前参加登録の名前
・動画内の肩書き
・動画内の参加表明

作り方の要領は大会サイトのWDPCページと同じです。
　
　

WDPC Extra Stage
幻のイベント。
FEFEMZさん来ないけどWorld Championを名乗るの？
⇒どこかに存在感を出しておきたい。
　⇒FEFEMZさん動画の「World Record」という言葉が目に留まった。
　　⇒抜いてくださいってのはどう？
　　　⇒直前に打診。やらないという結論。

でも、World Recordを画面に出すのは良いのでは？という話になりまして。
ついでに楽曲紹介を作ることにしました。

楽曲紹介
Excelのオブジェクト貼り付けでデザインを作り、それをPrtScしてPNG画像保存しています。
意外と地味な作業ですｗ　いつもの大会告知も作り方の要領は同じ。


レーダーは、専用のJavaScriptで作ったものを画像にして貼り付けています。
ちなみにSkill Attackで使っているものと同じ。
　

フォントはTeXGyreAdventorを使用していますが、
見た目がださくなるものが稀にあるので一部Myriad Proのイタリックも使用しています。
【例】POSSESSION
左：TeXGyreAdventor　右：Myriad Pro(Italic)
　

検定試験の認定証の名前欄
みらたか当日に現地で手書きしました。
間違えても消せるようにフリクションボールを持参して、それで書いていくつもりだったのですが、
No.002まで書いたら黒インクが無くなりましたｗｗｗｗｗ
WDPCのページとかいろいろ書いてここでインクを使い果たしたのかも。
番号ごとに1枚ずつしか無くて失敗できない人生だった。
No.003からは普通のボールペン。「お鶴しゃん」とかノーミスで書けたのは奇跡だと思っている。
カタカナ助かります。アヤツメくんが「Ayatsume」だったら難易度上がってた。