Help us understand the problem. What is going on with this article?

JavaScriptをラブライブ!のロゴに変換するトランスレーター作った

More than 5 years have passed since last update.

【ピザハット日和、です!】「ラブライブ! × ピザハット」のページソースを見たら愛溢れすぎてたwwwwwww : はちま起稿を見て思い付いたので作ってみました。

alucky0707/lovelive-logo
lovelive-logo

どんなの?

こんなを実行すると、

sample.js
console.log(
  require('lovelive-logo').lovelivalize('console.log("Hello, World!");')
);

こんなのが出力されて、

20140215152527.png

(長いしQiitaだと折り返されてしまって残念なので、完全なものはGistに貼っておきます。=> https://gist.github.com/alucky0707/8998777)

きちんと実行できるって奴です。

> node sample.js | node
Hello, World!

実用性は?

そんなものなかった。

というか、Perlで言う Acmeモジュール みたいなものなので実用性なんて必要ないのです。笑わせたら勝ちなんです。

どうやってやってるの?

黒魔術っぽいですが大したことありません。

ロゴの中にある、$KOSAKAHONOKAXJHDM$SAXVSONODAUMIOHIUY8ZAといった変数をglobalに対する__defineGetter__で捕捉して、

lovelive-logo.js(line69-70,97-114)
//lovelive-logo.jsの69-70行目らへん
setA = ["$KOSAKAHONOKAXJHDM", "$SAXVSONODAUMIOHIU", "$HOSHIZORARINNZAC$", "$KOIZUMIHANAYOXAZ$"],
setB = ["Y8", "ZA", "WA", "CO"];

//lovelive-logo.jsの97-114行目らへん
var
as = [],
bs = [],
lovelived = [];

setA.forEach(function (a, i) {
  global.__defineGetter__(a, function () {
    as.push(i);
    return 1;
  });
});

setB.forEach(function (b, i) {
  global.__defineGetter__(b, function () {
    bs.push(i);
    return 1;
  });
});

ロゴの一番最後にあるp_r_o_j_e_c_tのゲッターで一つ一つのロゴについてまとめていき、

lovelive-logo.js(line116-120)
global.__defineGetter__('p_r_o_j_e_c_t', function () {
  lovelived.push([as.join(''), bs.join('')]);
  as = []; bs = [];
  return 1;
});

一通り実行したら呼ばれるsetImmediateでそれを文字列にして、ソースコードとして実行します。

lovelive-logo.js(line91-95,129-131)
//lovelive-logo.jsの91-95らへん
function unlovelivalize(lovelived) {
  return new Buffer(lovelived.map(function (xs) {
    return inverse[xs[0]] * 24 + inverse[xs[1]];
  })).toString();
}

//lovelive-logo.jsの129-131行目らへん
setImmediate(function () {
  Function(unlovelivalize(lovelived))();
});

inverseというのは0から3までの数値の組み合わせの配列のインデックスと値を逆にしたもので、18文字の変数と2文字の変数の出てくる順番を変えることで、一つのロゴに一文字分の情報を持たせているわけです。

変換の場合はソースコードを文字に分解して、その文字コードの数値に合わせて変数名をロゴのテンプレートに埋め込み、つなげています。

言葉で説明するのが苦手なので、そんなに長いソースコードではないし1ファイルなので、ぜひ読んでみてください。

閑話

艦これにケッコンカッコカリが実装されたのですが、どんなにページを更新してもサーバーに入れません。
辛くなってきたので(どうせ99レベの艦娘いないし)、Acme::DoubleHelixみたいなnpmパッケージを作ってみようかと思ったのですが、JavaScriptの仕様的に、

A----T

が、

(A--)-- T

のように解釈されてしまったりするので不可能な気がしてきて、代替案も思い付かないし、じゃあどうしようか、と考えた末に30分くらいで作ったものです、これは。

PerlのAcmeモジュールって面白そうだなー、と思うのですがnode.jsにはああいうのはできないんですかね…。
npmにpublishするときも結構躊躇しました。こんな不真面目なパッケージ上げていいのかなぁ…と。
まあ、結局上げましたが。

そんなわけで、このパッケージは、

npm install lovelive-logo

で一発でインストールできるはずです。
インストールして遊んでみてもらえたら幸いです。

追記

ブラウザでも動くようにしてみました。

lovelive-logo - http://alucky0707.github.io/lovelive-logo/

20140215152730.png

新しめのブラウザじゃないと上手く動かないかもしれませんが遊んでみてください。

最後に、こんな下らない記事を最後まで読んでくださりありがとうございました。感謝感激です。

alucky0707
ウィルキンソンジンジャエールを片手にコードを書く人。JavaScriptぐらいしかまともに書けない…。東京都内の工業高校に通うザコ学生。
http://alucky0707.hatenablog.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした