やったこと

webサービスを作るときに考えたことを垂れ流します

ツイッターアカウント同士でバトルするゲーム作った!

ツイッターアカウント同士でバトルできるゲームを作りました!
その名も「ツイッターバトラーズ!

f:id:absg:20150531173308j:plain
↑こんな感じで某RPG風のスタイルでバトルすることができます。

バトルを通じていろんなツイッターアカウントを仲間にしていって、ラスボスの「青い鳥」を倒すとクリア、というゲームです

本ゲームはjavascriptで制作してるので、PCやスマホから気軽にプレイすることができます。

詳しいゲーム方法はヘルプに載っているのでご参照ください。


 * * * * * * *


その昔「バーコードバトラー」というゲームがあったそうですが、「ツイッターバトラーズ」はそれのパクリ・・ではなくてオマージュとして製作しました。

バーコードバトラーは商品のバーコード情報を元にしてキャラを生成するゲームですが、本ゲームはツイッターidを元にしてキャラを生成しています。

世界中のツイッターアカウントにハッシュ関数を使って、そのキャラ特有の一意な能力値を割り振っています。製作者の私にも一体どのアカウントがどういう能力を持っているのか分かりません・・。

強い能力を持つアカウントを探し当てたり、気になるあの人の能力値を調べてみたり、いろいろな楽しみ方ができるゲームだと思います。

一部の有名人アカウントにはイタズラでヘンテコな特殊能力を与えたりしているので、良かったら探してみてください。

本ゲームはスマホでもPCでもプレイすることができます(頑張って両方で遊べるように作りました)。

お金とかかからないでタダでできるので、ぜひ遊んでみてください!

以上です!

cakePHP 2でエラー404ページを作りたい

CakePHP(2.x系)でエラー404ページを作る方法です。

いろんなブログにやり方が書いてありますが、どれも試してもなかなかうまくいかない・・。

そんな中で、自分が試してうまくいった方法を書きます。

(ちなみに下記作業は /Config/core.php の debugを0にセットした本番環境の設定で行ってます)


■その1 error400.ctpファイルを編集する
「app/View/Errors/error400.ctp」のファイルを編集します。
ここでセットした内容が404エラー時に出力されます。

お目当てなのは「404エラー」ですが、CakePHPでは404エラーのとき400番のエラーファイルが参照されるようです。

設定パラメータがいろいろ面倒なので、私の場合はヒアドキュメントで出力したい内容のHTMLを丸ごと全部記述しました。

<?php
$this->layout = "error";

echo <<< EOF
//ここに出力したいHTMLを全て記述
EOF;
?>

異常系出力ページを作りたい場合は「error500.ctp」ファイルに同じ修正を加えるとできます。


■その2 レイアウトファイルを編集する
「app/View/Layouts/error.ctp」を作成します。

その1の作業で「layout = "error"」をセットしてるため、レイアウトとしてこのファイルを参照するようになります。

設定パラメータがいろいろ面倒なので、私の場合は下記のように「error400.ctp」のヒアドキュメントの内容を丸ごと出力するようにしました。

//たった一行!
<?php echo $this->fetch('content'); ?>


以上です!

bootstrapのモーダルの縦位置を調整する

twitter bootstrapのモーダルウィンドウの縦位置の調整の仕方。

以下のようにcssに新しいクラスを宣言して、お目当てのモーダルに付けてあげるとtop位置が調整できるます。

/* css */
.modal-dialog-center {
  padding-top: 40%;
}

/* html */
<div class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-sm modal-dialog-center">
    <div class="modal-content">
      <div class="modal-body">
        <p>テスト!</p>
      </div>
    </div>
  </div>
</div> <!-- modal  -->

bootstrap progressbarの目盛りを線形に変化させたい

twitter bootstrapのプログレスバーの目盛りを連続的に変化させる処理を書いてるんだけど(ゲームキャラの行動タイマーです)、指定した値にビョイ~ンとした動きで移動してしまって困った。

もっと直線的な動きで変化してほしいんだよね・・。

以下のようにcssを設定すると直線的に変化する動きになってくれた。

/* html */
<div class="progress">
  <div id = "my_timer" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
  </div>
</div>

/* css */
#my_timer{
  -webkit-transition: width 0s linear;
  -moz-transition: width 0s linear;
  -ms-transition: width 0s linear;
  -o-transition: width 0s linear;
  transition: width 0s linear;
}

twitter API制限の「ユーザー単位」「アプリケーション単位」ってなんだ?

twitterAPI制限
twitterAPI(version 1.1)には使用回数の制限(リミット)が設けられている。

例えば「GET users/show」というユーザーアカウント情報を取得するAPIには「ユーザー単位で180回/15分」「アプリケーション単位で180回/15分」と制限が付いている。

実はこの言葉がよく意味が分からなかった。
ユーザー単位とアプリケーション単位ってなんだろう?

特に「アプリケーション単位」っていう言葉が気になる。例えば180人のユーザーが自分の作ったtwitterアプリを利用していて、一斉に一回ずつAPIを使用したとしたら、ユーザー全員が15分もの間APIを使用不可能になってしまうってことなんだろうか?

こんな動作ではおそらくツイッターAPIは使い物にならなさそうだ・・。


■ユーザー認証とアプリケーション認証
twitterOauth認証の方式には二種類あるらしい。

「ユーザー認証」というのは一般によく知られている、あるアプリがあるユーザーの情報にアクセスするために利用するOauth認証のこと。

それとは別に、アプリ単体が(特定ユーザーとは無関係に)APIを利用するために用意された、「アプリケーション認証(Application-only authentication)」という方式もあるらしい。

「ユーザー単位」のAPI制限とは、上記の「ユーザー認証」利用時のAPI使用制限のこと。
「アプリケーション単位」のAPI制限とは、上記の「アプリケーション認証」利用時のAPI使用制限のことを指すらしい。


なるほど、自分が使用しているのは「ユーザー認証」のOauthだから、上記のような180人が一斉に通信不能になってしまうような恐ろしいことは起きないってことか。よかったよかった。

タブロイド思考に陥りがちな人

タブロイド思考という言葉があるらしい。

タブロイド思考とは「複雑なものごとを皮相的に単純化・類型化して把握しようとする態度」のこと。

タブロイド誌に書いてあるようなあやしい情報をそのまま鵜呑みにしちゃうような人から来た言葉なんだって。

最近ネット上でこういう思考パターンの人が増えてきてる気がするんだよね。特になにかをバッシングするときなんかにこの態度が現れることが多い気がする。

自分もついついこういった浅慮な考えにはまってしまいそうなので、自戒の意味も込めてどういう人間がタブロイド思考に陥りがちなのか考えてみた。


■自分に自信が無い人
自分に自信がない人がタブロイド思考に陥りそうだ。

特に、社会的な表の顔では自信満々な態度を見せていて、内心では自分の価値に不安を抱いているような、むっつり低自尊心者タイプが危ない気がする。

こういう人は、自分がまとっている仮想的な自信が氷解して丸裸になってしまうのが恐くて、自分のプライドに関係するような事柄について深く洞察するのを避ける傾向があると思う。

「学歴」「能力」「容姿」といった、自分のプライドにまつわる危ういトピックを扱うときに、自己防衛的な逃げの姿勢が出てしまって、物事を直視せずに自分の都合のよいステレオタイプに当てはめて考える態度を発動させてしまうことがありそうだ。


■ネット論争にはまりすぎてる人
ネット論争にはまりすぎてる人も危ない。

閉鎖的なネット空間では、議論がタコツボ化して極論のような意見がまかり通ることが知られている。

こういう環境では非常に強い内集団バイアスが働いて、自分たちと相対する外集団の意見を激しく叩くことがよく起きる。

自分の気に食わない主張をレッテル張りによって「取るに足らないもの」と一蹴することは、論争のときの攻撃手段としてよく使われるものだ。

あまりネットに入り浸っていると、こういった態度が個人の中に内面化されてしまい、思考パターンの一種として習慣付けられてしまうかもしれない。


■精神的に参ってる人
疲労がたまっていたり、メンタルが病んでる人も危ない。

ヒトのステレオタイプな認知バイアスは、精神的な負荷が高まっているときや、プライドが傷ついているときに強化される傾向があるらしい。

認知的な色メガネをかけることによって、複雑な思考をショートカットして省エネしたり、情報をフィルタリングして弱っている心を防衛しようとする機構が働くのだろう。

特に、自己愛性のパーソナリティを持つ人や境界性のパーソナリティを持つ人は、具合が悪くなったときに、判断基準が0と1しかない二分法的思考や、物事を杓子定規で捉えるステレオタイプ思考に陥りがちだというのを読んだことがある。


タブロイド思考に陥らないためには
以上を踏まえると、タブロイド思考に陥らないためには、以下のようなことに気をつけましょうってことになりそうだ。

・自分に自信を持つこと
仕事に打ち込んだり良好な人間関係を築いたりして、健全な自尊感情を育むこと。自分にネガティブな情報でも内省的に受け止められる心の余裕を持つこと。

・ネットにのめりこみすぎないこと
悪い感情がうずまくネット上の議論からは距離を置くようにして、リアルでの生活の充実させること。お互いの意見を尊重しあう公正な議論を習慣付けること。

・心の健康に気を配ること
メンタルがヘラってくると正常な判断ができなくなるので、過労気味であったら仕事の負荷を減らしたり、ストレスフルな環境から身を引いたりして、心を健康に保つこと。


これは何だか一言でいうと、「人生うまく回ってる心身ともに健康的なリア充になりましょう」っていう風に聞こえるな・・。なかなか実践するのは難しそうだ・・・。

要素一個の配列を宣言するときに注意すべきこと

javascriptで、要素一個の配列を宣言するときにありがちな間違い。

以下のように記述してしまうと、空の値をもつ長さ10の配列が生成されてしまう。

var test = new Array(10);
console.log(test);


以下のように記述すれば、「10」の値が格納された長さ1の配列が生成される。

var test = [10];
console.log(test);