きらファンの「ブロックきらら」について調査した

＜調査対象＞
・main.js
・kirara.js
・開発者コンソールのNetworkタブ

＜作った会社＞
おそらくカヤック。
根拠は、main.jsのヘッダーの以下の記載や

 * cl-kirarafantasia:
 *   license: MIT (http://opensource.org/licenses/MIT)
 *   author: KAYAC Inc.
 *   homepage: https://github.com/kayac/cl-kirarafantasia#readme
 *   version: 0.0.0

テスト用ホスト

var TEST_HOST="kirarafantasia-aj.kayac.cc";

の記載。

 ＜貰える壁紙＞
・クロモン
・カンナ&ライネ
・クレア＆ポルカ＆コルク
・きらら＆ランプ＆マッチ

ソースは、main.jsに定義されている、update(percent,days)関数。
読みやすい形にしたものが以下。

function update(percent,days){
  var per=Math.round(percent/10),day=String(days).split("");
  this.$per.attr("class","percent-liquid n"+per);
  if(percent>=100){
    this.$percent.addClass("complete");
    this.$day[0].attr("class","left-day ten n"+day[0]);
    this.$day[1].attr("class","left-day one n"+day[1])
  }
  var $wl=$(".present-list a");
  if(percent>=100)
    $wl.eq(3)
    .attr("href","/download/kirara_wallpaper_04_BKOyI6i43b.png")
    .addClass("get")
    .find("img")
    .attr("src","/assets/img/present/wp4_get.png");
  if(percent>=75)
    $wl.eq(2)
    .attr("href","/download/kirara_wallpaper_03_EhSSgyhkhF.png")
    .addClass("get")
    .find("img")
    .attr("src","/assets/img/present/wp3_get.png");
  if(percent>=50)
    $wl.eq(1)
    .attr("href","/download/kirara_wallpaper_02_fa6Y7bcTQt.png")
    .addClass("get")
    .find("img")
    .attr("src","/assets/img/present/wp2_get.png");
  if(percent>=25)
    $wl.eq(0)
    .attr("href","/download/kirara_wallpaper_01_Sp63BWxPiC.png")
    .addClass("get")
    .find("img")
    .attr("src","/assets/img/present/wp1_get.png")
}

＜完成度の判定方法＞
このJSONから得た情報を元に完成度を判定している。
○countdownプロパティ
　アクセスした日からAJ2018初日の3月24日(土)までの日数。
　例えば、03/18にアクセスした場合は、3/24 - 3/16 = 6。
○completionプロパティ
　完成度(％)。

#Percent配下の.percent-flask配下の.percent-liquidに付与される、
「nN」(Nは完成度を10で割って一の位を四捨五入した値)クラスに応じて、
フラスコの内容量が変化する。
完成度が100％以上になった場合の処理は、上記のupdate関数に記載されている通り。

＜どのタイミングで完成度に貢献されているのか＞
シェアボタン(#Share)がクリックされた際に呼び出されるtweet(event)関数を読んだが、
ツイートするウィンドウを表示して、
親ウィンドウにフォーカスされた際にカットイン効果を開始するためのイベントをセットするのみで、
シェアされたことをAPIで外部に送信しているわけではなさそうだった。

function tweet(event){
  var _this2=this;
  event.preventDefault();
  this.sound.playTweet();
  var shareText=this.percent<100?SHARE_TEXT_1:SHARE_TEXT_2,
  url=encodeURIComponent(this.url),
  text=encodeURIComponent(shareText),
  tags=encodeURIComponent(TWITTER_TAG),
  param="url="+url+"&text="+text+"&hashtags="+tags,
  href="http://twitter.com/share?"+param;
  _open({
    url:href,
    title:"ツイッターでシェア",
    w:550,
    h:450,
    x:(window.screen.availWidth-550)/2,
    y:(window.screen.availHeight-450)/2}
  );
  this.$win.one("focus",function(e){
    _this2.cutin.start(_this2.percent,_this2.segment)
  })
}

tweet関数で参照している各定数の宣言は以下の通り。

var TWITTER_TAG="ブロックきらら #きららファンタジア #AnimeJapan2018";
var SHARE_TEXT_1="3/24(土)‒3/25 (日) 開催予定のAnime Japan2018に「きららファンタジア」のブースが登場!みんなのツイートで約75,000ピースのブロックきららを完成させて、Anime Japan2018に召喚しよう! ";
var SHARE_TEXT_2="3/24(土)‒3/25 (日) 開催予定のAnime Japan2018に合計75000ピースのブロックきららを召喚！さらに会場内のQRコードを読み取るとオリジナルステッカーをプレゼント！ぜひ、遊びに来てね！";

そもそも、ツイートウィンドウからツイートしてもしなくても、
閉じた時にカットイン効果が開始されるので、なんとなくそんな気はしていたが…。
考えられるのは、
「TWITTER_TAGで定義されているハッシュタグを使ったツイートをピースとして数えている」説。
おそらくTwitterの検索APIを使うことになると思うが、
通常は検索期間に制限があるため、無制限にツイートを検索して数えられるわけではない。
これも推測だが、企業でTwitterAPIを使う契約をしているため、
無制限に対象のツイートを検索してその数を集計する、ということができるのではないだろうか。
同一ユーザーによるツイートもユーザーIDを見ればフィルタリングできるので、
こちらの方法の方が楽なのかもしれない。

＜カットイン演出について＞
○各バージョンの素材
・キャラ
　https://blockcampaign2018.kirarafantasia.com/assets/img/cutin/krr[1-4].png
・テキスト
　https://blockcampaign2018.kirarafantasia.com/assets/img/cutin/txt[1-4].png

ソースは、.cutin-chara配下の.v[1-4]と、.cutin-text配下の.v[1-4]。

それ以外の詳しい動作の中身は読んでない。
start(percent,segment)関数とか読めばわかるのかもしれない…。

＜その他気になったところ＞
・BGM
・status.json取得に関連する定数

var TEST_HOST="kirarafantasia-aj.kayac.cc";
var DEV_HOST="https://d37ngg8eesko7j.cloudfront.net";
var API_URL="/api/status.json";
var FALLBACK_COMPLETION=50;
var KIRARA_DAY="2018/03/24";

TEST_HOSTでstatus.jsonにアクセスしたら認証を求められ、
DEV_HOSTでstatus.jsonにアクセスしたらテスト用のJSONっぽいのが返ってきた。

コメント

コメントを投稿

このブログの人気の投稿

わたてん！（私に天使が舞い降りた！）の聖地巡礼をしてきた

イメージ
スペシャルイベントの翌日にわたてん！の聖地巡礼をしてきました！ 全部把握してはいないので抜けがあるかもしれませんが、撮った写真を紹介していこうと思います。 ビルはもちろん住宅街のスポットも詳細な場所まで記載したので、是非聖地巡礼の参考にしてください！！ スタート地点は京王多摩センター駅！ 駅を出てすぐ、見慣れた風景が広がっています。 8話のみゃー姉とひなたちゃんがデートに行く前に挿入されたいくつかの写真の一つです。 そこからもう少し歩くと右手にアニメで出てきたビルが見えます。 このビルは ココリア多摩センター 。 8話のみゃー姉とひなたちゃんがデートに行く前に挿入されたいくつかの写真の一つです。 ビルの前にもスポットがいくつかあります。 ベンチはいくつかありますが、これは下り階段付近にあるベンチです。 8話の、みゃー姉とひなたちゃんのデートを追いかける形で向かった乃愛ちゃんと花ちゃんが、 ショッピングを終えてココリアを出たところでみやこ（犬）と遭遇した後のシーンです。 みやこ（犬）の可愛さと怖がる花ちゃんの温度感の差が面白いですw 上記のベンチのやりとりの後に、みやこ（犬）が松本を見つけて走るシーンです。 犬に「みやこ」という名前をつける松本、恐ろしいですね…。 お次はココリアの中へ。（ フロアマップ ） 平日朝ということで人がほとんどおらず快適でした。 逆に人が多いと撮影が難しいかと思います。 2Fの、「LBCマーケット」の尖っているところです。 8話のみゃー姉とひなたちゃんがデートに行く前に挿入されたいくつかの写真の一つです。 2Fの、「アイクロック」と「かんかん」の間です。 8話のみゃー姉とひなたちゃんがショッピングした時の最初のシーン。 店員さんのポケモントレーナー方式の接客が面白いですw 店員さんからみゃー姉を守ろうとするひなたちゃんがかっこかわいかった！ 3Fか4Fの、エスカレーター付近のベンチです。 似たようなのがいくつかありますが、エスカレーターの向きや雰囲気的にここかと思います。 8話のみゃー姉とひなたちゃんが服屋の店員さんといろいろあった後のシーン。 ひなたちゃんの正直すぎる性格、好きだなぁと
続きを読む

2017年の百合アニメを振り返る

今年の百合は今年のうちに…、ということで、 今年2017年の百合アニメを振り返りたいと思います。 ここでの「百合アニメ」とは、「百合があった(感じられた)アニメ」という意味です。 もちろん、私の観たアニメに限りますので、 「なんでこのアニメ入ってないんですか！？！？」と思っても、 優しい心でご覧ください。 冬アニメ ちょぼらうにょぽみ劇場第三幕 あいまいみー～Surgical Friends～ ネット上ではよくネタになる「あいまいみー」の3期。 原作者も百合を推していて、ショートな百合アニメでした。 あの哲学的なノリも私は好きですね。 うらら迷路帖 この期のきらら枠です。 独特な(えっちな)謝り方で話題になりましたね。 きららの名に恥じない百合っぷりでとても良かったです。 生徒組は特定のカップルがおらず、色々な解釈ができたのが、 珍しくもあり面白かったです。 ニナ先生と佐久さんは早く結婚してください、という感じのラブラブっぷりでした。 ストーリー自体もしっかりしていて、全体的にクオリティが高かったと思います。 OPEDも好きです。 けものフレンズ 伝説的な盛り上がりを見せた、伝説的なアニメ。 百合要素も豊富で隙きがなかったですね。 私は狐っ娘の二人の関係性がすごく好きです。 小林さんちのメイドラゴン この期の百合枠と言っても過言ではないでしょう。 トールの小林さんLOVEっぷりや、才川ちゃんのカンナちゃんLOVEっぷりが、 たまらなく愛おしいです。 カンナちゃんが才川ちゃんを押し倒したところは特に印象的でした。 ただ可愛いだけではなく、ギャグあり、ちょっとシリアスありの、 とても濃い内容になっていて、いいバランスだったなあと思いました。 春アニメ フレームアームズ・ガール キービジュアルがちょっとロボ要素あったのでどうしようかと思ったのですが、 ドンドン面白くなっていったので、観てよかったなと思っています。 あおと豪雷の関係、特に豪雷のあおへの想いがすごく百合で、アツかったです。 お話も面白くてしっかりまとまっていたアニメでしたが、 自分の周りではあまり観ている人がいなくて残念でした。 ひなこのーと 原作はコミックキューンです。 実はこのアニメは、
続きを読む

『うらら迷路帖』7巻の感想と、総評

読書メーター に書いたけど、書ききれない想いもあったので、以下に認める。 ＝＝＝＝＝＝ 文句なしの最終巻！！めちゃくちゃ感動して胸がいっぱいです…。途中のストーリーはもちろん、最後のお話がすごく綺麗でただただ感動です…！ 迷路町の神様や禁忌の話と繋がっていたのか！とびっくりしました。もちろんその正体にも。 くろうという名前も気になっていたけどまさか「九郎」だったとは…！さらに驚きました！ 矢見さんの綺麗で飄々とした雰囲気はもちろん、九郎さんと話している時のお茶目な感じも好きです！やり取りが微笑ましい。 眠りにつく時に視た未来から現在の話が繋がるのがうますぎて尊さにあふれました…！そして、去り際の友たちへのセリフが悲しくて涙しました…。 千矢ちゃんが決断するところで、やっぱり千矢ちゃんは強いなと思いました！そういう千矢ちゃんの真っ直ぐなところが大好きです！！ みんなの未来が光り輝くものになることを心の底から願ってます！！ そして、千矢ちゃん紺ちゃんに言いたい。末永くお幸せに！！！！ ＝＝＝＝＝＝ 小梅ちゃんとマリが一緒に旅してるっていうのもめちゃくちゃ好き。 完全に付き合ってますわ…。 1番占＝迷路町の花嫁ってことだけど、一夫(?)多妻制なのかな？とか、 千矢ちゃんと紺ちゃんが結ばれたら裏切り行為になるのかな？とか、 百合的なところで気になりますが、 感動的なお話に比べたらどうでもよいことですね。 でも、はりかも先生自ら、紺ちゃんは千矢ちゃんの運命の人になった、と書かれているので、つまりはそういうことなんでしょう。 最高の極みです。 ＝＝＝＝＝ うらら迷路帖、本当に素晴らしい作品だなあと思う。 絵が可愛いし、表情豊かだし、擬音までこだわりがあって、非常にクオリティが高い。 その上、お話もうまくてすごく引き込まれる。めちゃくちゃおもしろい。 百合的要素もガッツリ含まれているので、全くすきがない。 アニメも最高だった。 特に千矢ちゃん（CV: 原田彩楓さん）がありえん可愛さ！ しかも、無邪気さや強さも可愛さにちゃんとのっていて、完璧だった。 はりかも先生のあとがきを読んでなるほどなあと思った。 はりかも先生、うらら迷路帖という素晴らしい作品をありがとうございます＆お疲れ様でした、という気持ちでいっぱいです。 そして、うらら迷路帖に出てくるみんなが幸せになってほしい
続きを読む