ジムモン画像をデコードしてついでにGoogleのロゴを書き換えちゃおう -コピペで出来るよ-

はじめに

※簡単に説明しますが、ただただ試したい方は最後のコードをコピペ de OK
ジムモンは１日５回トランザクション手数料だけでフルオンチェーンのNFTモンスターがゲットできます
https://xym-monster.netlify.app/

ここでのフルオンチェーンとはMetalと呼ばれるプロトコルを使用して作成しています。
https://github.com/OPENSPHERE-Inc/metal-on-symbol

このMetalIDをモザイクのメタデータに保存していますが、もちろん誰でもデコードすることが可能です。

デコードできたか試すために本記事ではGoogleトップのロゴを書き換えて成功しているか判断します

symbol sdk v2 とmetal on symbol sdk は xembookさんがブラウザで使えるようbrowserifyにしてくれてますのでこれを使わせていただきます。

用意するもの

• GoogleChrome
• ジムモンモザイクID

コード解説

まずはGoogleを開いてください
https://www.google.com/

次にコンソールを開きます
MACならCommand + Option + i
Windowsならalt+command + i

ここから先、コード箇所は全てコンソールに貼り付けてEnterです。

次にbrowserifyを読み込みます。
このbrowserifyの読み込みと他のコードは必ず一度に行わないこと。先にスクリプトを読み込まないとモジュールのインポートができません

(script = document.createElement('script')).src = 'https://xembook.github.io/nem2-browserify/symbol-sdk-pack-2.0.4.js';
document.getElementsByTagName('head')[0].appendChild(script);

(script = document.createElement('script')).src = 'https://xembook.github.io/symbol-browserify/metal-on-symbol-0.2.2.js';
document.getElementsByTagName('head')[0].appendChild(script);

次に初期設定

NODE = "https://node.symbol-community.com:3001";

sym = require("/node_modules/symbol-sdk");
metal = require("/node_modules/metal-on-symbol");

repo = new sym.RepositoryFactoryHttp(NODE);
metaRepo = repo.createMetadataRepository();

function uint8ArrayToBase64(bytes) {
    let binary = '';
    const len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

symbolService = new metal.SymbolService({node_url: NODE});
metalService = new metal.MetalService(symbolService);

ノードはメインネットでhttps通信ができればなんでもOKです。もしノード運営をしているならせっかくなら自分のノードを使うとネットワークに参加してる感が味わえます。
あとは、メタデータを取り扱うのでメタデータリポジトリの準備とmetalではuint8Arrayでデータを取得するのでそれをbase64文字列に変換する関数、最後にsymbolServiceとmetalServiceの作成

mosaicId = new sym.MosaicId("0B1775B69E917FC0");

meta = await metaRepo.search({targetId: mosaicId, scopedMetadataKey: "F1974BA6F6CE5A63"}).toPromise();
metadata = JSON.parse(meta.data[0].metadataEntry.value)

result = await metalService.fetchByMetalId(metadata.MetalID);

ここでモザイクIDを保有するジムモンのモザイクIDに変えてください。例ではフレイムエッグ
モザイクIDに登録されているメタデータ（key: F1974BA6F6CE5A63）でモンスターの情報を取得します
すると以下のようなJSONで返ってきます

{
	"Rarity": "Common",
	"Name": "フレイムエッグ",
	"MosaicID": "0B1775B69E917FC0",
	"MetalID": "FeFBpLAiivCF929eV86eixZvQrGrXZnKJncsrYoPPggPWX"
}

ここからmetalIDを使用して最後にfetchしてデータを取得します。

let imgElements = document.getElementsByClassName('lnXdpd'); // img要素を取得
let uint8Array = result.payload // Uint8Arrayを取得
let base64 = uint8ArrayToBase64(uint8Array); // Base64に変換
let newSrc = 'data:image/png;base64,' + base64;

let img = new Image();
img.onload = function() {
    for (let i = 0; i < imgElements.length; i++) {
        imgElements[i].src = newSrc;
        imgElements[i].srcset = newSrc;
        imgElements[i].style.transform = 'scale(4)';
    }
};
img.src = newSrc;

最後にGoogleのロゴの要素を取得して画像ソースをmetalから取得したモンスター画像に書き換えちゃいましょう。ついでにサイズが小さかったので大きくしてます。

これで、うまく行けばGoogleのロゴがジムモン画像に変わるはずです。

以上！！！！！

コード全文　コピペ用

まず、以下を貼り付けてEnter

(script = document.createElement('script')).src = 'https://xembook.github.io/nem2-browserify/symbol-sdk-pack-2.0.4.js';
document.getElementsByTagName('head')[0].appendChild(script);

(script = document.createElement('script')).src = 'https://xembook.github.io/symbol-browserify/metal-on-symbol-0.2.2.js';
document.getElementsByTagName('head')[0].appendChild(script);

あとはモザイクIDだけ書き換えて全部貼り付けてEnter

NODE = "https://node.symbol-community.com:3001";

sym = require("/node_modules/symbol-sdk");
metal = require("/node_modules/metal-on-symbol");

repo = new sym.RepositoryFactoryHttp(NODE);
metaRepo = repo.createMetadataRepository();

function uint8ArrayToBase64(bytes) {
    let binary = '';
    const len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

symbolService = new metal.SymbolService({node_url: NODE});
metalService = new metal.MetalService(symbolService);

mosaicId = new sym.MosaicId("0B1775B69E917FC0");

meta = await metaRepo.search({targetId: mosaicId, scopedMetadataKey: "F1974BA6F6CE5A63"}).toPromise();
metadata = JSON.parse(meta.data[0].metadataEntry.value)

result = await metalService.fetchByMetalId(metadata.MetalID);

let imgElements = document.getElementsByClassName('lnXdpd'); // img要素を取得
let uint8Array = result.payload // Uint8Arrayを取得
let base64 = uint8ArrayToBase64(uint8Array); // Base64に変換
let newSrc = 'data:image/png;base64,' + base64;

let img = new Image();
img.onload = function() {
    for (let i = 0; i < imgElements.length; i++) {
        imgElements[i].src = newSrc;
        imgElements[i].srcset = newSrc;
        imgElements[i].style.transform = 'scale(4)';
    }
};
img.src = newSrc;