sugicyanです。
アニメイトタイムズにて複数のアニメコラボキャンペーンページを公開してきましたので、ここで一度まとめてみようと思います。
9/12（月）に「クオリディア・コード×アニメイトタイムズコラボキャンペーン!」をリリースしました。
皆様是非ご参加ください。
キャンペーンページをやる意味とは？
そもそも、なぜコラボキャンペーンをやっているのかというと、社内でも目的はわかれると思いますが、今まで使ったことない技術を気軽に試せるというのが大きいと思っています。
技術というのは日々新しい物が出てきます。
現在運用するサービスで使うのはためらうが、試してみたい技術というものが出てくると思います。
キャンペーンページは企画内容にもよりますが、期間が短く保守する必要がない（キャンペーン終了後、静的ページにしてしまえば良い）という特徴があり、これによっていろいろ挑戦することができます。
キャンペーンページ作成を始めたときに立てた最初の技術的目標は
「 React + TypeScript を使ったサービスを作ってみたい 」
というものでした。
今回の 「クオリディア・コード×アニメイトタイムズコラボキャンペーン!」 にて、最初の技術的目標としていた React + TypeScript を使ったサービスのリリースを達成したのでこれまで作成してきたキャンペーンページについてまとめ、簡単な補足を記載していきたいと思います。
TVアニメ「ご注文はうさぎですか？？」×アニメイトTV ホワイトデー企画
■ 技術的目標
- コラボキャンペーンページを作る
- Reactを使う
■ 使用技術
- React
アニメとコラボしたHPを作成してみたいという思いから作成を開始しています。
このときの私の技術力はHTMLをほとんど書いたことがない状態でした。
結果できあがったページはスマートフォン（以下SPと略します）対応もしていないページになりましたがはじめてキャンペーンページを公開する/Reactを試してみるという目的を達成できました。
どこにReactを使っているかというとページ下部のキャラクターと吹き出しの表示です。
『夢王国と眠れる100人の王子様』×『あんさんぶるスターズ！』×アニメイトタイムズ コラボ企画
■ 技術的目標
- レスポンシブでSP対応する
こちらは「ご注文はうさぎですか？？」を実施したことによって始まった企画になります。
PC向けのページを作成したのでこのキャンペーンでの目標は PC, SP での表示に対応させることでした。
レスポンシブにするまではできませんでしたが、PC向け、SP向けの表示をすることはできるようになりました。
TVアニメ「NEW GAME!」 × アニメイトタイムズ コラボキャンペーン
■ 技術的目標
- レスポンシブ対応
- API通信
- ビルド環境構築（gulp）
■ 使用技術
こちらのキャンペーンは擬似的に出退勤をしてもらうキャンペーンで、参加者数に応じて「制作現場の方たちへ クリエイティブドリンク・pixiv DORADO を送る」という企画内容を多くの方に取り上げて頂きました。
レスポンシブ対応・API通信を初めて行いました。
以前の企画でReactを使用したことがあったので、API通信の結果を受けてviewの表示を変更するということに挑戦しました。
劇場版アイカツスターズ！×アニメイトタイムズコラボキャンペーン!
■ 技術的目標
- レスポンシブ対応
- ディレクターがキャンペーンページを作成する
- ビルド環境構築（npm script）
■ 使用技術
こちらのキャンペーンは、弊社のディレクターと共同で作成しました。
このころから、HTMLでも共通の項目をまとめたいと思い pug を使い始めました。
開発初期にレスポンシブになる仕組みとビルド環境だけを作成しました。
そこから先はディレクターが自分でHTMLを組んでと、社内でもかなり珍しい開発になりました。
クオリディア・コード×アニメイトタイムズコラボキャンペーン!
■ 技術的目標
- React + Typescript
■ 使用技術
キャンペーンページを作り始めてからずっと React + Typescript の組み合わせを試してみたいという目標を達成できたキャンペーンです。
こちらのキャンペーンは NEW GAME! とはちょっと違いますが、毎日ボタンをクリックして戦ってポイントを貯めていき自分の所属都市を勝利へ導くことが目標です。
皆さんも是非遊んでみてください。