もふくま

は~くまくま

JavaScript言語仕様拡張大作戦1 ~!すでのな 編~

JavaScriptは柔軟すぎる言語である

人によってはprototypeを使わずに俺クラス生成用関数を作って 俺オブジェクト指向したり、Arrayとかのネイティブメソッドに そのままメソッドを追加したり、ネイティブメソッドを俺関数にすり替えたり。

言語自体を変えちゃうことができるような、そういうカオスさ、 自由さはJavaScriptの魅力の一つだとくまは思っているくま。

(可読性低下とかもあるけど、それも引いてもお釣りが来る!)

色々工夫して関数を作ったりして、普通に色々できちゃう。

・・・のですが、本稿ではもっと踏み込んで、JavaScriptでは通常出来ないような 書き方を可能にすること、つまり言語仕様を変えちゃってオレオレ言語にしちゃう 拡張を色々やってみる、のだ!

基本コンボ 関数.toString()→eval()

JavaScriptは関数オブジェクトにtoStringが使える。

書いたコードが文字列で取得できちゃうので自由に自分自身を書き換えて 違うコードに変えてからevalすればよい。

例えば。

!すでのな

//日本語を含む""内を全部逆にする大日本帝国言語仕様
function $s(fn) {
    dat = fn.toString();

    dat = dat.replace(/"(.*[^\x01-\x7E].*)"/gm, function(va, v1) {

    var r = [];
        for (var i = v1.length; i--;) {
            r.push(v1[i]);
        }
        return '"' + r.join('') + '"';
    });

    return eval(["(", dat, ")()"].join(''));
}

受け取った関数オブジェクトからプログラムを文字列で取得し 全角を含む""文字列があった場合、書き換えている。

そして以下のように書くとオレオレ仕様のJavaScriptでコーディングできる。

$s(function() { //この中は独自仕様になる

console.log("しまかぜ");
console.log("なのです!");

//....

});

実行結果

ぜかまし
!すでのな

まとめ

普通に書いたJavaScriptの関数オブジェクトからtoStringで コードを文字列で取得し、自由に書き換えてしまうことで オレオレ拡張JavaScriptが作れる。

これを元にyieldとか5.timesとかも作ってみる予定ですくま。

つづく。

くら寿司のみかんジュースが最高クラスに凄い件について

みかんジュースこそすべて

私事で恐縮ですが、ぼくはみかんジュースのマニアです。 なぜなら、みかんジュースが好きすぎるからです。

好きすぎてみかんジュースが神格化されているレベル…


さて、やはり我が家でも一般的なポンジュースが主に飲まれていますが、 たまにはさらにうまい超高級みかんジュースが飲みたくなります。

そんな最強クラスのみかんジュースが簡単に手に入る場所を 偶然見つけたので紹介したいと思います。


それは謎の寿司屋、くら寿司である。

f:id:mofukuma:20080114124212j:plain


なぜくら寿司のみかんジュースが最高クラスなのか?

そもそも最高クラスのみかんジュースとは 長年の研究の結果、以下であることがわかってきました。


  • うんしゅうみかん100%であること。

混合してしまうとどうしても別の味になってしまうので、真のみかんジュースとはいえません。 例えばポンジュースはうんしゅうみかんとオレンジ(または夏みかん)の50%混合だったりします。


  • 砂糖やビタミンCなどを添加していないこと。

甘みを強めたり、保存のためにビタミンCが添加されることも多いです。

これもみかん本来の味が消えてしまうため、除外です。


  • 濃縮還元していないこと。

濃縮還元とは、産地から輸送する際にジュースから水分を抜いて濃縮した状態で 運び、それをパッケージする際に水を加えて還元させる方法です。

これで輸送コストが減り、たくさんのジュースを運ぶことができるわけですね。 ですがこれをすると、繊細な風味が失われてしまいます。


無添加にこだわりすぎくら寿司

こんな厳しい条件、特に濃縮還元してないものは 見つけるほうが難しいレベルで、手軽に買ったりできないのですが…

そう、くら寿司は完全無添加を掲げる寿司屋。

みかんジュースも本当に無添加だった!

特に保存料を使わない・濃縮還元しない方法は 特殊すぎて販路確保とかすごい厳しそうなものですが、 新鮮なネタを届ける寿司屋独自ネットワークがあるのでしょうか。

無添加に異常にこだわるくら寿司執念が垣間見えます。


レポート

というわけで最強みかんジュースを頂くため、くら寿司に。

f:id:mofukuma:20130929195433j:plain

いただきます!

f:id:mofukuma:20130522200706j:plain

確かに濃縮還元していない。

f:id:mofukuma:20130929195447j:plain f:id:mofukuma:20130929195451j:plain

だばぁ。

プラスティックながらグラスも冷やしてある点にも好感が持てます。

f:id:mofukuma:20130929195459j:plain

無濃縮還元ならではの、みかんの内皮の風味がします。

うんしゅうみかん100%の優しい甘さ。

210円です。

子供だけ飲ませるには勿体無いと言わざるを得ない。

ごちそうさまでした。

まとめ

くら寿司は食べ終わった皿5枚を投入するとと液晶演出が始まって、当選するとガチャポンが排出されるという 射幸性のある寿司屋だったり、萌えキャラであるくららちゃんのトレーニングカードを50円で売ってたり・・・

ともかくハイテクかつ謎の寿司屋なので、みかんジュースの他もちょっと楽しいです。


しかし、お寿司とみかんジュースは……最悪の食い合せです…………

まったくあわないのでお寿司食べ終わってからどうぞ。

手軽に吹き出しUIが作れるjQueryプラグイン作った

f:id:mofukuma:20130927130240p:plain

jQuery SmartPopover

http://mofukuma.github.io/jquery.smartpopover/

これは何?

吹き出しウインドウを作るjQueryプラグイン。

吹き出しを出すだけのライブラリはたくさんありますが、こいつは他のライブラリには無いすごい機能を持っていて、吹き出しを表示するべき場所を判断して、必ず画面内に表示してくれます。

端に寄せてもウインドウをリサイズしても決してはみ出ないよ!

このプラグインは、1画面表示系のWebアプリのウインドウとか、ゲームの会話吹き出しなどに使うことを想定して作ってあります。

ライセンスはMITです。

使い方

表示するHTMLを指定するだけ、簡単です。

$("#foo").smartPopover("<div>Hello World!</div>");

詳しくはGithubのサンプル見てみてください。

子供とおでかけするとき絶対ぐずらずに行動する方法とは

f:id:mofukuma:20130809225723j:plain

おそとであそぼ

ぼくはよく週末に子供ふたりを連れて、お外に遊びに行く。
パパひとりで4歳と1歳を遠くまで連れていくとかすごい、などとよく驚かれる。


もちろんふたりとも良い子だからできるのだけど、それでも、特に何も策を講じないままだと普通は「つかれた~」「もうあるかないベビーカーのりたい」「でんしゃまてないよ!」など、ぐずりまくる。

そして、折角のお出かけなのに親も子も無駄につかれてしまう。


そうならないために、上手に子供と行動するにはどうすればいいのだろうか。


実はこれ、ちょっとしたコツがあるので、
育児の小技として以下に紹介します。


子供に任せる

基本は簡単。


子供に、目的地までどうやって行けばいいか、
自分で考えさせればいいのだ!


そうすることで「目的地まで行く」ということ自体に
使命感を感じ、使命をクリアするという楽しい遊びになる。


必死に考えるので、ものすごく静かになる。

  • どうすれば行ける?電車?
  • 電車に乗るにはどうすれば?駅?
  • 駅まではどうやってあるく?
  • どの駅で降りるの?
  • 降りるときは教えてね?


という感じで全部聞いて、子供に付いて行けばよいのである。

(もちろん、うまくヒントも出しつつ・・・)


一緒に乗り過ごす覚悟は完了しているか

電車で降りる駅になっても何も言わなかったら、
もちろん一緒に乗り過ごそう。

乗り過ごさないと解らないこともあるし、
何より、「こいつは本気で、自分に任せているのだ」と
わからせることができる。

失敗を先回りするのは、過保護なだけで本人のためにならない。大人でも同じですね。

こんな感じなので、電車の中では真剣だしぐずることもなく、
そのうちどの駅で降りればどこに行けるのかということも把握するようになる。


子供に頼ろう

一人で二人連れの場合、上の子には色々頼まないとさすがに厳しい。

電車やバスにベビーカーを乗せるのも、上の子に先に乗ってもらったり、
何か作業してる時は下の子がどっかにいかないように気をつけてもらう必要がある。

子供は頼られるのが先天的に好きなのだ。

奴らは色々なことができるようになりたいという向上心を自然と持っているので、困ったら子供に頼ればいい。
子供の問題解決能力も向上するので、一石二鳥である。


目的地についたことを心から喜ぼう

こうして目的地に着いたら無邪気に喜んでバンザイしよう!

一緒に成し遂げた達成感はプライスレスである。


まとめ

子供を信じて、手本を見せ、任せてみるといったプロセスは別に
おでかけに限らず重要である。

子供に自分で考える力を付けさせるという意味も含んで、
この技はおすすめだ。


は~くまくま
f:id:mofukuma:20130809225734j:plain

About

くまくま

くまです。mofukumaです。

つくったの

スペースくま

https://itunes.apple.com/jp/app/space-kuma-hungry-bear-space/id532903481?mt=8

f:id:mofukuma:20140122015232p:plain

マミ☆まう

f:id:mofukuma:20140122014327p:plain

http://www.ne.jp/asahi/digital/dokuichigo/mami/mouth.htm


ゲームのきょく


うた

まめ☆でん

スペースくまのうた

略歴

にんげんに追われてプルプルする。高校中退。

 ↓

引き篭もりを契機にくま人間になることを決意。ついでに大学進学。

 ↓

引き篭もりつつもなぜか彼女ができる。

 ↓

研究室のゼミとか1回しか出なかったけどなぜか大学卒業。

 ↓

その後も引き篭もりつつ 「微妙な研究開発がなぜか学会で学生奨励賞をもらう」 「1回しか就職活動していないのになぜかすごいところに受かる」 などの謎の幸運を繰り返しいまに至る

活動

小学校の作文でゲームクリエイターになりたいとか書いてしまったために死ぬまでゲームを開発するハメに・・・

・ブラウザ、スマートフォン用ゲーム開発

Webサービス開発

・ゲームの曲をつくる

・2匹のこぐまの育成ゲーム

・かわいいけどワガママな嫁の家事手伝い

要するに

は~くまくま

【知育アプリ】スペースくまのABCれっしゃ

pr.png
スペースくまの新作リリースしました!
ABCをならべてれっしゃをつくる、幼児向けの知育アプリだよ。
ぽっぽー
screenshot2.pngscreenshot3.png
【ダウンロード】 Android版 https://play.google.com/store/apps/details?id=jp.grrr.kumaden.abc iPad/iPhone版 審査待ち
次は奇抜な物理パズルゲーを近日リリース予定。 16x16のドット絵いっぱい描いてます。
クリップボード01.png

ゲーム用語の各国語訳をJSONに変換して取り込んでみた

01_m.png 自分のゲームのローカライズを考えているインディーズゲーム製作者のために、よくつかう ゲーム関連用語の各国語訳が作られたそうな。 参考: GIGAZINEの記事

 

ゲーム関連用語の各国語訳: https://docs.google.com/spreadsheet/ccc?key=0Al1cNCkGdEJfdF8xX0dsaHl6ZVpzMDF2OW9JaWVWMVE#gid=0

 
 
 

「新しいゲーム」「セーブ」とかシステム系をはじめ、 「ダガー」とか「サムライ」とかRPGによく出てくるものまで。 ありとあらゆるゲーム用語が有志によって翻訳されている。 英語、日本語だけじゃなく、中国語やアラビア語まで!

これは便利だ!
 
 

でも、ベターっとGoogleスプレッドシートに貼ってあるだけじゃ 実際に多国語対応するとき大変だ。

 

なので使いやすいようにJSONに変換してみた。

 

ダウンロードはこちら。→ transdb.json

 
 

使い方: HTML5 (jQuery使用時)

 
 
 

Unity(jsonfx使用時)

 
 
 
訳を探すときのために、簡単な検索機能もつくった。こちら。→ゲーム用語翻訳検索
 
 
 
 

実際の変換方法とスクリプトの例も書いておきます。

 
 

1.以下に飛んでデータのコピーを作成(Googleのアカウントが必要です) https://docs.google.com/spreadsheet/ccc?key=0Al1cNCkGdEJfdF8xX0dsaHl6ZVpzMDF2OW9JaWVWMVE#gid=0 WS000000.png

 
 

2.コピーを作ったら、ウェブに公開 WS000001.png

 
 

3.公開開始する。 WS000002.png

 
 

4.公開データへのリンクを取得の「ウェブページ」を「CSV」に変更し、 「すべてのシート」→各シートを選択するとCSVがダウンロードできるURLがわかる。

 

こんな感じ。 https://docs.google.com/spreadsheet/pub?key=0AgPcSiCUAktOdElmU0lfeTZIdy1NUHowaG9VWV9zLXc&single=true&gid=0&output=csv

・・・・

 
 

5.jQueryで取得してCSVをパース。以下のjavascriptコードを使用。

 
 
 
 
あとは出力されたJSONを保存して終了。
 

ただし、更新されるたびにコピー作成しなきゃいけないです。 めんどくさいので提供元でJSONに整形してほしいね、自動化も簡単だし。

 
 
 
 

はー、くまくま