きらファンの「ランプの気まぐれ占い」について調査した
＜作った会社＞
ドリコム。
Webサイトに書いてある。
＜トップページ＞
○JSファイル(見てもあまり面白くない)
・common.js…OSやUAの判定など
・app.common.js…デザインの調整など
・app.dia.js…アニメーションの処理など
→bodyタグに付与したdata属性で処理の判別を行っている
○画面表示時の処理
・キーワード入力欄(#keyword)が空の場合は、占うボタン(#submitButton)を無効化する処理を行う
→無効化された状態で画面を表示するようにすれば良いのでは…？
・btn-disabledクラスを追加して、見た目を透過させる
・disabledプロパティをtrueにして、操作などを無効にする
・キーワード入力欄(#keyword)に文字を入力した時の処理をセットする
・20字を超えた場合は、占うボタン(#submitButton)を無効化する処理を行い、警告文(<div class="caution">20文字以内で入力してください。</div>)を.input-notesに追加する
→ログ文が残っているのはよろしくないのでは…？
→文字入力で20字を超えるたびに処理が実行されるため、btn-disabledクラスが無限に追加されていく。これは酷い。
・1字以上20字以下の場合は、占うボタン(#submitButton)無効化処理をリセットして、警告文を削除する
・それ以外(0字以下)は、占うボタン(#submitButton)を無効化する処理を行う
・占うボタン(#submitButton)をクリックした時の処理をセットする
・キーワード入力欄(#keyword)の文字列を、フォーム(#frm)のinputタグ(#text)にセットする
・フォーム送信を行う
占うボタン(#submitButton)を無効化する処理が何度も書かれており、冗長。
○フォームについて
フォームは以下のようになっている。
<form id="frm" method="post" action="/game/kirarafantasia/dia-301-B8G/diagnosis/">
<input type="hidden" id="text" name="text">
</form>
○ユーザーシナリオ(正常系)に沿った処理の流れ
1.ユーザーがキーワードを入力
2.占うボタンをクリック
3.inputタグ(#text)に入力したキーワードがセットされる
4.フォーム送信が実行される
5.キーワードに応じた結果画面が表示される
○フォーム送信について
HTMLをいじって空文字や21字以上の文字列を送信した場合、サーバでエラー判定されるっぽい。
＜結果画面＞
※URLは一例
○URLについて
・result以下の2つの値の法則は不明。ランダムっぽい。
→存在しない値を入れるとトップページが表示される
○画面表示時の処理
・もう一度占うボタン(#retryButton)をクリックした時の処理をセットする
・トップページに遷移する
・share(type)関数を定義する
・各結果ごとに、どのサービスでシェアされたかを集計しているっぽい。
function share(type) {
$.ajax({
type: "POST",
url: '/game/kirarafantasia/dia-301-B8G/diagnosis/point/96718/' + type + '/',
data: {},
dataType: 'json'
}).done(function(json) {
});
}
ちなみに、集計用APIに投げた結果(typeはtweet)として、以下のようなJSONが返ってくる。
{"result":"1"}
本当にシンプルなJSONだ…。
typeを「test」にしてみたが同様のレスポンスが返ってきた。
done関数で何も処理をしていないあたり、固定のレスポンスを返しているのだろうか。
○占いの結果
URLは一例。
.img配下のimgタグのsrc属性から画像URLが取得できる。
パラメータが付いているが、無視できる。
テキストは.textの値だが、すでに埋め込み済みなので、
どの画像がどういうテキストなのか、という法則は見つけられず…。
以下の画像のURLを見れば分かる通り、
https://c-image.asfes.jp/zR4gfSJw/22/301/media/result_a19.jpg
各画像に番号が振られており、01〜72まで確認した。
存在しない番号を指定すると、HTTP 403が返ってくる。
全結果画像をダウンロードするPythonスクリプトを書いたので、リンクを貼っておきます。
2018/03/20 18:51、追記。
result_aというのが気になっていましたが、同様に、bとcもあるっぽい。
bは01〜79、cは01〜28。
つながりとしては、b01〜b72→c01〜c28で、
b73〜b79はきらファンのキャラクター枠。
2018/03/22 16:02、追記。
dもあった。
dは数字なしで、全員集合絵。
「かわいい」で占うと表示されるらしい。
○シェアする際の処理
.tw配下のボタンをクリックした時に、以下のシェアの処理が実行される。
share('tweet');
window.open(
'http://twitter.com/intent/tweet?text=' +
encodeURIComponent($('#share').attr('data-text')) +
encodeURIComponent(' ' + $('#share').attr('data-hashtag')) +
'&url=' + $('#share').attr('data-url')
, 'tweetwindow'
, 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1');
return false;
まず、share関数を呼んで集計用のAPIにポイントを送信。
その後、#shareの各data属性の値を使って、ツイートウィンドウを表示。
ちなみに、#shareはフォームタグ配下のinputタグである。
何故、送信していないフォームを使っているのか、inputタグにシェア情報が含まれているのか、よくわからない…。
シェアするURLは、#shareのdat-url属性の値から取得できる。
シェア画面の詳細は後述。
＜シェア画面＞
※URLは一例
○URLについて
・結果画面のresultがshareに変わっただけ。
○画面表示時の処理
・TOPへ戻るボタン(#retryButton)をクリックした時の処理をセットする
・トップページに遷移する
・#submitButtonをクリックした時の処理をセットする
・#keywordの文字列を、フォーム(#frm)のinputタグ(#text)にセットする
・フォーム送信を行う
#submitButtonも#keywordも存在しないため、2番目は記事執筆時点では意味がない処理。
#retryButtonも実際のボタン名と一致してないし、使い回し感が隠しきれていない…。
ちなみに、フォームは、トップページと同様のものが存在している。
記事執筆時点では、意味をなしていないが…。
以上です。
全体的に突貫工事だな〜という印象。
全画像見た中で未参戦なのは、
・桜Trickの一部のキャラクター
・スロウスタート
・ゆるキャン
全員すでに、公式の画像で登場済みなので、特に面白みもなく。
あとは、以下のコードが気になった。
<script src="/collect/"></script>
や
<script src="/collect/c/301/22/"></script>
アクセスしてもHTTP 200で何も返ってこない不思議。
ドリコム。
Webサイトに書いてある。
＜トップページ＞
○JSファイル(見てもあまり面白くない)
・common.js…OSやUAの判定など
・app.common.js…デザインの調整など
・app.dia.js…アニメーションの処理など
→bodyタグに付与したdata属性で処理の判別を行っている
○画面表示時の処理
・キーワード入力欄(#keyword)が空の場合は、占うボタン(#submitButton)を無効化する処理を行う
→無効化された状態で画面を表示するようにすれば良いのでは…？
・btn-disabledクラスを追加して、見た目を透過させる
・disabledプロパティをtrueにして、操作などを無効にする
・キーワード入力欄(#keyword)に文字を入力した時の処理をセットする
・20字を超えた場合は、占うボタン(#submitButton)を無効化する処理を行い、警告文(<div class="caution">20文字以内で入力してください。</div>)を.input-notesに追加する
→ログ文が残っているのはよろしくないのでは…？
→文字入力で20字を超えるたびに処理が実行されるため、btn-disabledクラスが無限に追加されていく。これは酷い。
・1字以上20字以下の場合は、占うボタン(#submitButton)無効化処理をリセットして、警告文を削除する
・それ以外(0字以下)は、占うボタン(#submitButton)を無効化する処理を行う
・占うボタン(#submitButton)をクリックした時の処理をセットする
・キーワード入力欄(#keyword)の文字列を、フォーム(#frm)のinputタグ(#text)にセットする
・フォーム送信を行う
占うボタン(#submitButton)を無効化する処理が何度も書かれており、冗長。
○フォームについて
フォームは以下のようになっている。
<form id="frm" method="post" action="/game/kirarafantasia/dia-301-B8G/diagnosis/">
<input type="hidden" id="text" name="text">
</form>
○ユーザーシナリオ(正常系)に沿った処理の流れ
1.ユーザーがキーワードを入力
2.占うボタンをクリック
3.inputタグ(#text)に入力したキーワードがセットされる
4.フォーム送信が実行される
5.キーワードに応じた結果画面が表示される
○フォーム送信について
HTMLをいじって空文字や21字以上の文字列を送信した場合、サーバでエラー判定されるっぽい。
＜結果画面＞
※URLは一例
○URLについて
・result以下の2つの値の法則は不明。ランダムっぽい。
→存在しない値を入れるとトップページが表示される
○画面表示時の処理
・もう一度占うボタン(#retryButton)をクリックした時の処理をセットする
・トップページに遷移する
・share(type)関数を定義する
・各結果ごとに、どのサービスでシェアされたかを集計しているっぽい。
function share(type) {
$.ajax({
type: "POST",
url: '/game/kirarafantasia/dia-301-B8G/diagnosis/point/96718/' + type + '/',
data: {},
dataType: 'json'
}).done(function(json) {
});
}
ちなみに、集計用APIに投げた結果(typeはtweet)として、以下のようなJSONが返ってくる。
{"result":"1"}
本当にシンプルなJSONだ…。
typeを「test」にしてみたが同様のレスポンスが返ってきた。
done関数で何も処理をしていないあたり、固定のレスポンスを返しているのだろうか。
○占いの結果
URLは一例。
.img配下のimgタグのsrc属性から画像URLが取得できる。
パラメータが付いているが、無視できる。
テキストは.textの値だが、すでに埋め込み済みなので、
どの画像がどういうテキストなのか、という法則は見つけられず…。
以下の画像のURLを見れば分かる通り、
https://c-image.asfes.jp/zR4gfSJw/22/301/media/result_a19.jpg
各画像に番号が振られており、01〜72まで確認した。
存在しない番号を指定すると、HTTP 403が返ってくる。
全結果画像をダウンロードするPythonスクリプトを書いたので、リンクを貼っておきます。
2018/03/20 18:51、追記。
result_aというのが気になっていましたが、同様に、bとcもあるっぽい。
bは01〜79、cは01〜28。
つながりとしては、b01〜b72→c01〜c28で、
b73〜b79はきらファンのキャラクター枠。
2018/03/22 16:02、追記。
dもあった。
dは数字なしで、全員集合絵。
「かわいい」で占うと表示されるらしい。
○シェアする際の処理
.tw配下のボタンをクリックした時に、以下のシェアの処理が実行される。
share('tweet');
window.open(
'http://twitter.com/intent/tweet?text=' +
encodeURIComponent($('#share').attr('data-text')) +
encodeURIComponent(' ' + $('#share').attr('data-hashtag')) +
'&url=' + $('#share').attr('data-url')
, 'tweetwindow'
, 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1');
return false;
まず、share関数を呼んで集計用のAPIにポイントを送信。
その後、#shareの各data属性の値を使って、ツイートウィンドウを表示。
ちなみに、#shareはフォームタグ配下のinputタグである。
何故、送信していないフォームを使っているのか、inputタグにシェア情報が含まれているのか、よくわからない…。
シェアするURLは、#shareのdat-url属性の値から取得できる。
シェア画面の詳細は後述。
＜シェア画面＞
※URLは一例
○URLについて
・結果画面のresultがshareに変わっただけ。
○画面表示時の処理
・TOPへ戻るボタン(#retryButton)をクリックした時の処理をセットする
・トップページに遷移する
・#submitButtonをクリックした時の処理をセットする
・#keywordの文字列を、フォーム(#frm)のinputタグ(#text)にセットする
・フォーム送信を行う
#submitButtonも#keywordも存在しないため、2番目は記事執筆時点では意味がない処理。
#retryButtonも実際のボタン名と一致してないし、使い回し感が隠しきれていない…。
ちなみに、フォームは、トップページと同様のものが存在している。
記事執筆時点では、意味をなしていないが…。
以上です。
全体的に突貫工事だな〜という印象。
全画像見た中で未参戦なのは、
・桜Trickの一部のキャラクター
・スロウスタート
・ゆるキャン
全員すでに、公式の画像で登場済みなので、特に面白みもなく。
あとは、以下のコードが気になった。
<script src="/collect/"></script>
や
<script src="/collect/c/301/22/"></script>
アクセスしてもHTTP 200で何も返ってこない不思議。
コメント
コメントを投稿