Memo
あなたのソウルジェムメーカーをリリースしました
劇場版魔法少女まどか☆マギカ 叛逆の物語で泣いたわたしです。
なんかもう、もう、ね！公開初日とその先週と観てきました。
さて、そんなまどマギがまどマギでまどマギな状態でして、魔法少女になりたくてソウルジェム作るサービス作ってみました。
以下の説明はきゅうべぇ風にいきますね
Contents
どんなサービス？
自分の名前と誕生日から擬似的にソウルジェムを作り出すサービスだよ。
ソウルジェムの色や状態を確認するだけのものだから、残念だけど実際に魔法が使えるようにはならないよ。
遊び方
名前の項目に自分の名前を入力してくれ。好きな人や気になる人の名前でも構わないよ。
文字数は30文字以内でお願いするよ。あんまり長いと覚えられないからね。
次に誕生日を選択項目から選ぶんだ。
簡単でしょ？たったのこれだけで色と状態がチェックできる。
オプションで、確認画像に君の名前を入れたり入れなかったりできるから、確認してね。
作った画像には個別URLが付与されるから、後から確認も出来るよ。
ただし、最新の約1000個までしか保存されないから、注意してね。どうしても必要な時はローカルに保存しておいてね。
時間が経つとソウルジェムの穢れ具合も変わるから、気になるようだったら時々チェックしてみてもいいかもね。
と、まぁこんな感じのサービスです。
作った動機や経緯などなど
先日作った「カラログ」で、色の計算を勉強したわけなんですが、それでふと、自分の名前から色を計算出来るのでは？と思いついちゃったんです。
名前の数値化には、半角英数字で計算する数秘術のしくみを取り入れて、さらにこれに誕生日を組み合わせれば、その人だけの色が創り出せちゃうじゃん！って。
んで、劇場版まどかマギカを観た後だったんで、これはもう色の表現はソウルジェムにするしかない！
しかし、大人気のまどマギですし、私が知らないだけで実際はそういうサービスあるんじゃない？と色々ぐぐってみたけど、意外や意外、これがまたない。
じゃあ、つくっちゃえ☆
ただ色が分かるだけじゃつまらないので、時間が変わればソウルジェムも濁ったり輝いたりするようにしてーと、ざかざか作って、水曜日には公開したんですね。
で、公開したよーとTwitterで宣伝してたら、
「生成ボタンが押せない…」「真っ黒になっちゃう」と質問がきたりしてしまいました。
みんな結構「日本語」でやろうとしてて、ブラウザによっては全角でも押せちゃったり。
どうも、診断メーカーのノリで使ってくれてるみたいで、半角英数字だけってのは浸透しないようです。
なので、ひらがなとカタカナにも数字を割り振り、全角も大丈夫にしてみました。
JavaScriptで色を決めたりしてるんで、Unicodeで判別しないといけないというまたちょっと面倒なあれだったんですが、ちまちま作って動いたので、日本語対応版としてリリースしました。
しくみ
ちなみに、文字の数値化のJSはこんな感じ。
$(function(){
$('#yourName, #bdMonth, #bdDay').change(function(){
nameVal = $('#yourName').val();
bdmVal = $('#bdMonth').val();
bddVal = $('#bdDay').val();
if(nameVal != '' && bdmVal != '' && bddVal != ''){
SoulColor(nameVal, bdmVal, bddVal);
}
});
});
function SoulColor(yourName, bdM, bdD){
//数字化システム配列
//半角英数字
var modern = { A:'1',B:'2',C:'3',D:'4',E:'5',F:'6',G:'7',H:'8',I:'9',J:'1',K:'2',L:'3',M:'4',N:'5',O:'6',P:'7',Q:'8',R:'9',S:'1',T:'2',U:'3',V:'4',W:'5',X:'6',Y:'7',Z:'8',_:'9' };
//ひらがな
var hira = {
'\u3040':'1','\u3041':'2','\u3042':'3','\u3043':'4','\u3044':'5',
'\u3045':'6','\u3046':'7','\u3047':'8','\u3048':'9','\u3049':'0',
'\u304A':'1','\u304B':'9','\u304C':'3','\u304D':'4','\u304E':'5',
'\u304F':'6','\u3050':'7','\u3051':'8','\u3052':'2','\u3053':'0',
'\u3054':'1','\u3055':'2','\u3056':'3','\u3057':'4','\u3058':'5',
'\u3059':'6','\u305A':'7','\u305B':'8','\u305C':'9','\u305D':'0',
'\u305E':'1','\u305F':'2','\u3060':'3','\u3061':'4','\u3062':'5',
'\u3063':'6','\u3064':'7','\u3065':'8','\u3066':'2','\u3067':'0',
'\u3068':'1','\u3069':'9','\u306A':'9','\u306B':'4','\u306C':'5',
'\u306D':'6','\u306E':'7','\u306F':'8','\u3070':'3','\u3071':'0',
'\u3072':'1','\u3073':'2','\u3074':'3','\u3075':'4','\u3076':'5',
'\u3077':'6','\u3078':'7','\u3079':'8','\u307A':'9','\u307B':'0',
'\u307C':'1','\u307D':'2','\u307E':'9','\u307F':'4','\u3080':'5',
'\u3081':'9','\u3082':'7','\u3083':'8','\u3084':'6','\u3085':'0',
'\u3086':'1','\u3087':'2','\u3088':'3','\u3089':'4','\u308A':'5',
'\u308B':'6','\u308C':'7','\u308D':'8','\u308E':'3','\u308F':'0',
'\u3090':'1','\u3091':'2','\u3092':'3','\u3093':'4','\u3094':'5',
'\u3095':'6','\u3096':'7','\u3097':'8','\u3098':'9','\u3099':'0',
'\u309A':'1','\u309B':'2','\u309C':'3','\u309D':'4','\u309E':'5',
'\u309F':'6'};
//カタカナ
var kata = {
'\u30A0':'1','\u30A1':'2','\u30A2':'3','\u30A3':'4','\u30A4':'5',
'\u30A5':'6','\u30A6':'7','\u30A7':'8','\u30A8':'9','\u30A9':'0',
'\u30AA':'1','\u30AB':'9','\u30AC':'3','\u30AD':'4','\u30AE':'5',
'\u30AF':'6','\u30B0':'7','\u30B1':'8','\u30B2':'2','\u30B3':'0',
'\u30B4':'1','\u30B5':'2','\u30B6':'3','\u30B7':'4','\u30B8':'5',
'\u30B9':'6','\u30BA':'7','\u30BB':'8','\u30BC':'9','\u30BD':'0',
'\u30BE':'1','\u30BF':'2','\u30C0':'3','\u30C1':'4','\u30C2':'5',
'\u30C3':'6','\u30C4':'7','\u30C5':'8','\u30C6':'2','\u30C7':'0',
'\u30C8':'1','\u30C9':'9','\u30CA':'9','\u30CB':'4','\u30CC':'5',
'\u30CD':'6','\u30CE':'7','\u30CF':'8','\u30D0':'3','\u30D1':'0',
'\u30D2':'1','\u30D3':'2','\u30D4':'3','\u30D5':'4','\u30D6':'5',
'\u30D7':'6','\u30D8':'7','\u30D9':'8','\u30DA':'9','\u30DB':'0',
'\u30DC':'1','\u30DD':'2','\u30DE':'9','\u30DF':'4','\u30E0':'5',
'\u30E1':'9','\u30E2':'7','\u30E3':'8','\u30E4':'6','\u30E5':'0',
'\u30E6':'1','\u30E7':'2','\u30E8':'3','\u30E9':'4','\u30EA':'5',
'\u30EB':'6','\u30EC':'7','\u30ED':'8','\u30EE':'3','\u30EF':'0',
'\u30F0':'1','\u30F1':'2','\u30F2':'3','\u30F3':'4','\u30F4':'5',
'\u30F5':'6','\u30F6':'7','\u30F7':'8','\u30F8':'9','\u30F9':'0',
'\u30FA':'1','\u30FB':'2','\u30FC':'3','\u30FD':'4','\u30FE':'5',
'\u30FF':'6'};
//名前を配列に
yourName = yourName.split('');
var nameNum = 0;
for(var i = 0; i < yourName.length; i ++){
if(yourName[i].match(/[0-9]/)){
nameNum += Number(yourName[i]);
}else if(yourName[i].match(/[A-Za-z_]/)){
key = yourName[i].toUpperCase();
nameNum += Number(modern[key]);
}else if(yourName[i].match(/[\u3040-\u309F]/)){
Key = yourName[i];
nameNum += Number(hira[Key]);
}else if(yourName[i].match(/[\u30A0-\u30FF]/)){
Key = yourName[i];
nameNum += Number(kata[Key]);
}else{
nameNum += 1;
}
}
このコードで、その人の名前＋誕生日の数字が出せるようになってます。
ひらがなやカタカナで「かなめまどか」誕生日を「10月3日」にするとピンク色のソウルジェムになるように数字の配列を弄ってますが、気にしないでください。
これで求めた数字をもとに、色相の角度を求めて、彩度や明度も決めて、色が出来上がるようになってます。
以下のサンプルがベースになってます。
名前と誕生日入れると、カラーコードを返すようになってるので、遊んでみてください。
リリースして３日とかですが、ものすごいはやさでソウルジェムがぼこぼこ作られてて、ちょっとビックリしてます。
まどマギの人気を目の当たりにした感じです。
そんなわけで、あなたのソウルジェムメーカー、よろしくお願いします。
あなたのソウルジェムメーカー : http://soulgem.ark-under.net/
