BLEACHの20周年特設サイトとは
この度週刊少年ジャンプの大人気漫画BLEACHが連載20周年を記念して、大発表があるみたいです。
その特設サイトがとてもオサレでかっこいいので、簡単にですがサイトの調査をしてみました。
公式サイトはこちら
ちなみに僕は斑目一角の卍解が大好きです。
OSR値（オサレち）とは
週刊少年ジャンプ2007年17号で、瀕死の死神がパワーアップした敵を返り討ちにするという、従来のバトル漫画理論では説明のつけられないシーンが描かれた。この現象を説明する為に、「The男爵ディーノ」のかがみ氏が提唱したのがOSR値である。
OSR値の登場により「主人公より強い敵が倒される」「本来は強いのに、能力をひた隠しにしたために劣勢になる」といった作中の理不尽な現象に一応の説明をつける事ができたため、多くの人々がOSR理論を支持している。1
サイトの全容
公式サイトを開くとアニメーションが動き、どでかく愛染様が出現しました。
いますぐ黒棺の詠唱しそうですね。
そして、発表までのカウントダウンが始まります。
アニメーションもオサレなので実際に飛んでみてください。
カウントダウンも発表まで〇〇日〇〇時間〇〇秒などという簡単なものではなく、オサレさが漂っております。
WILL BE IN 290Hours 25Minutes 10Seconds
開発言語やシステム構成は？
Webサイトやアプリに使われている言語等が見られるWappalyzerを使ってみていきます。
静的サイトにあたるのでHTML/CSSとthree.jsが使われています。
three.jsは３Dコンテンツを制作するのに得意とされています。このオサレさはthree.jsのおかげということですね。
もう一つ着目する点はAWSのCloudfrontを使っている点でしょうか。
Cloudfrontは、静的、動的コンテンツをユーザーの最も近いサーバーから読み取るので超はやい！というものです。これのおかげでサーバーの負荷が減らせたりします。色んなファイルとかキャッシュをサーバーに置いとくよ〜というものです。
ハイテクですね〜BLEACH。
検証画面を開いてみる
さて、次はサイトの構造を見ていきます。
ブラウザはChromeです。
右クリック⇨検証します。
すると、、、、、、、、！！！！
反転したBLEACHの文字が現れました！！！
反転させているのがまたオサレですね。。。。しかも緑色、このチョイスがBLEACHらしいですね。
開発した人も絶対BLEACH好きですね。
背景画像について
先ほどの画像は愛染様でしたが、リロードすると別のキャラクターになります。
一体何種類のキャラクターがいるのか気になりませんか？
エンジニアっぽく探してみます。
検証⇨source⇨assets⇨cut_pcというフォルダの中にありました！！
合計で35枚のイラストが入っています。
ネタバレされたくない方もいると思うので気になる方は探してみてください。
僕のお気に入りはファイル名「31.jpg」です。
まとめ
漫画の特設サイトのコードを読んだりするのは初めてだったのでとても面白く、他のサイトも見てみたくなりました。
BLEACH20周年、何が起きるかとても楽しみです。
皆さんの好きな卍解は何ですか？