まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:animalcrossing

最近マイブームになっている「『あつまれ どうぶつの森(以下『あつ森』)』のマイデザイン」ネタです。いままではエンターテイメント色が濃い内容でしたが、ちょっとだけ業務に寄せてみました(ほんのちょっとだけ)。


『あつ森』の「マイデザイン」は 32x32 のピクセルデータになっています:
EYXVHfAUwAAz0tb


このサイズはノーツ/ドミノのデータベースアイコン(以下『DBアイコン』)と同じです:
2020061500


・・・ということは!! というわけで(?)インポートツールを作ってみました。データが流れるロジックとしてはこんな感じ:
  1. ノーツ/ドミノのデータベース(サーバーとファイルパス)を指定
  2. 指定データベースからアイコン情報を取り出す
  3. 取り出したアイコン情報を『あつ森』のマイデザイン情報に変換
  4. 変換したマイデザイン情報を QR コード化して画面に表示
  5. Nintendo Switch Online アプリで QR コードを読み取り
  6. 『あつ森』からマイデザインにダウンロード

このうち4以降の部分は過去のブログで紹介したものと同じですが、1~3部分が今回挑戦した部分です。内容が内容ということもあってググってもサンプルコードや役立ちそうな情報が見つからず、ほぼ独自実装でした。

で、この1~3部分を実現するウェブアプリケーションを作ったわけですが、そのシステム構成はこのようになります:
2020061500


ご覧のように2つのシステム(赤字部分2つでツールとして成立)から成り立っています。理想を言えば①の Domino Servlet(Java Servlet)のみで QR コードを生成できればよかったのですが、現時点では実現できていません(理由は後述)。Java Servlet のみで実現できなかった部分を補足する②のアプリケーション・サービスを別途足すことで実現しています。


作ったシステムはこちらです。ソースコード含めて MIT ライセンスで公開しています:
https://github.com/dotnsf/nsficon2qr


以下、このシステムのセットアップ方法です。ドミノサーバー環境がある方で『あつ森』ユーザーの方(加えて Nintendo Switch Online 加入済みの方)はぜひ試してみてください。ちなみに自分は CentOS 7.8 上の Domino v10.0.1 で動作確認しています。


まず上記リポジトリを git clone するか zip ダウンロード&展開して、nsficon2qr プロジェクトソースコード一式を手元に用意します。このプロジェクトフォルダには java フォルダと node フォルダが含まれており、それぞれ上述の①、②システムを構成するパーツになっています:
2020061501


では順にセットアップしていきます。まずは①ですが、こちらは Domino 環境側にも事前準備が必要です。管理者 ID で Domino サーバーに接続して Domino ディレクトリのサーバー文書を開きます。そして "Internet Protocols" タブの "Domino Web Engine" を選び、その中の "Java Servlets" カテゴリー内を以下のように設定して保存し、サーバーを再起動します:
  • Java Servlet Support : "Domino Servlet Manager" を選択
  • Servlet URL path : "/servlet" と入力※
  • Class path : "domino/servlet" と入力※

2020061502

※これらの設定をすることでデータディレクトリ(CentOS 版だと /local/notesdata)以下の domino/servlet というフォルダの中に存在しているサーブレットのクラスファイル(例えば a.class)を "/servlet/a" という URL パスで指定して実行できることになります。

加えて、Class path に指定したフォルダ(この例だと /local/notesdata/domino/servlet)はデフォルト状態では存在していないため、このフォルダを作成しておきます:
$ sudo mkdir -p /local/notesdata/domino/servlet

$ sudo chown notes.notes /local/notesdata/domino/servlet


これで Domino Servlet Engine が動くようになりました。改めて github からダウンロードした nsficon2qr プロジェクトを開き、java フォルダ内の nsficon2qr.class ファイルをサーブレットフォルダ(上述の例であれば /local/notesdata/domino/servlet/)にコピーします:
$ cp nsficon2qr.class /local/notesdata/domino/servlet

$ chmod 755 /local/notesdata/domino/servlet/nsficon2qr.class

そして、Domino サーバーコンソールから HTTP タスクを再起動します:
> tell http restart


これで①部分のセットアップは完了です。続いて②部分もセットアップします。なお ②は Domino と同じシステム上に作ってもいいですし、①の Domino サーバーに接続可能な別のシステム上に構築しても構いません。動作確認目的であれば、 localhost (つまり自分の PC )上であっても構いません。

②を構築する環境上に Node.js 環境を構築します。リンク先を参照して、各自のシステムに合わせて最新モジュールをインストールしてください(V10 以上であれば動くはず)。

次に node/settings.js ファイルをテキストエディタで編集します。実質1行だけのファイルですが、この中で定義されている exports.servlet_url の値が①で用意したサーブレットにアクセスするための URL となるように編集して(要するに IP アドレス部を変え、必要であればポート番号を追加して)保存します:
exports.servlet_url = 'http://192.168.xx.xx/servlet/nsficon2qr';

その後、ターミナル(コマンドプロンプト)を開いて node/ フォルダに移り、以下のコマンドを実行して②のアプリケーションを起動します:
$ cd node

$ npm install

$ node app

これで②も準備完了です。ウェブブラウザで②が動いているシステム(自システムであれば localhost)の 8080 番ポートにアクセスしてください。以下のような画面になればセットアップは成功です:
2020061503


実際に2つのデータベースを使って動作確認した様子を紹介します。以下ではこの2つのデータベースをマイデザイン化しています:
2020061509


まずは "Node API Demo" というタイトルのデータベースです。こちらはアプリケーションアイコンが設定されているデータベースです:
2020061504


ちなみにもう1つの "デフォルトアイコン" というタイトルのデータベースではアプリケーションアイコンは設定されておらず、クラシカルアイコンが表示されています。こちらも後で試します:
2020061505


まずは前者のデータベースをマイデザイン化してみましょう。②のアプリケーションにアクセスして、Domino サーバーから見たデータベースファイルを指定します。サーブレットが動いている Domino サーバー上のデータベースを対象とする場合であれば "Domino Server" 欄は空のままとなります。また "FilePath" 欄はデータベースファイルのパスを指定します(通常のデータベース指定方法と同じです)。なおこの機能はサーブレットが動いているサーバーの ID を使って動くため、この ID でデータベースの設計要素にアクセスできる権限が必要です。最後に "NSFICON2QR" と書かれた青いボタンをクリックします:
2020061506


データベース容量や複雑さによってパフォーマンスが変わりますが、数秒で解析が終わり、QR コードが画面内に表示されます:
2020061507


この QR コードをスマホにインストールした Nintendo Switch Online アプリケーションのタヌポータル画面から読み取ります。この QR コードを読み取る箇所から先の手順はこちらで紹介した手順と全く同じなので、必要に応じてこちら(の後半部分)も参照ください。

タヌポータルで読み取って保存した後に Nintendo Switch の『あつ森』を起動し、マイデザインからダウンロードを試みると、QR コードで読み取ったデザインが見つかります。「オッケー!」を選択することで『あつ森』ゲーム内で利用することができるようになります:
EaiWUQ6U8AAQsr2


"Node API Demo" という、データベースタイトルと同じ名前のマイデザインが、アプリケーションアイコンをインポートした形でダウンロードできました:
EaiWUROU0AI6-dL


ダウンロードしたマイデザインを地面の模様として貼り付けてみました。これ以外にアバターのトップスとして身につけたりすることもできます:
EaiWURXUEAAq_wq



同様にしてアプリケーションアイコンのない(クラシカルアイコンだけの)データベースも指定して、QR コードを生成してみました。これもスマホの Nintendo Switch Online アプリ内タヌポータルで読み取って、『あつ森』内にダウンロードできます:
2020061508


クラシカルアイコンのマイデザインも取り込むことができました:
EaiWUQ4UYAADIbh


(注 ↑よく見るとクラシカルアイコンを取り込んだ結果の左右が反転していました。現在のソースコードでは修正済みです)


あらためて元のデータベースアイコンと見比べてみます。ちゃんとエクスポートできていますね:
2020061500




以下に現時点での制限事項などをメモしておきます。

まず、上述の「本来はサーブレットのみで実現したがったができなかった」点について。最終的に表示する QR コード(の画像)をサーブレットの実行結果として返すことができるのが自然だし、理想的な挙動だと思っています。一方でこの『あつ森』マイデザイン用の QR コードは(URL などの文字列ではなく)バイナリ配列データを示す QR コードとなっていて、その意味でも少し特殊な仕様となっています。Java で利用できる QR コード生成ライブラリは有名な ZXing をはじめいくつかありますが、このバイナリ配列データを示す QR コードを生成可能な Java ライブラリを見つけることができなかったため、理想的な挙動を断念したという経緯があります(②がデータ入力部分と QR コード生成部分を担当しています)。もしどなたかバイナリ配列の QR コードを生成可能な Java ライブラリをご存知であれば改良に挑戦したいのでぜひ教えてください。

次にマイデザイン化するアイコンについて。上述のように1つのノーツデータベースには最大2つのアイコンが定義されています:
2020061504


これはノーツ v8.5.2 からの新仕様で、それ以前は特定のカラーパレットから選択した16色(+透明な背景色)だけが利用できるもの(以降「クラシカルアイコン」と呼びます)でした:
2020061500


v8.5.2 からは 32x32 のサイズであれば各種画像ファイルを指定して取り込むことができるようになりました(以降、こちらを「アプリケーションアイコン」と呼びます)。実際にワークスペースなどに表示されるアイコンは
 ・アプリケーションアイコンが設定されている場合はアプリケーションアイコン
 ・アプリケーションアイコンが設定されていない場合はクラシカルアイコン
  (クラシカルアイコンにはデフォルト画像が設定されている)
のように判断されて表示されます:
2020061509


このアプリケーションでも同様の判断基準でアイコン情報を取り出してマイデザイン化しています。ただここでマイデザイン特有のカラーパレットの問題が生じます。

簡単に説明すると、『あつ森』マイデザインに利用できる色は自由に選べるわけではなく、特定の 159 色から選択する必要があります。また1つのマイデザインの中で最大15色(+背景色)までしか選ぶことができない、という制約があります。

一方、ノーツアイコンですが、クラシカルアイコンの場合は16色から選択、アプリケーションアイコンの場合はより自由度高く利用できる、という違いがあります。

今回、このツールを作るにあたり、このカラーパレットの違いを吸収する必要がありました。以下のような仕様にしています:
・背景色は強制的に白
・アプリケーションアイコンの場合はカラーパレット内の利用頻度の高い15色に減色
・クラシカルアイコンの場合は2つの灰色を同一視する形で15色に減色
2020061500


これらの仕様の違いによって、ノーツデータベースアイコンが 100% マイデザインで再現できるわけではない、という点をご了承ください。




最近のマイブームとなっている「あつまれ どうぶつの森」(以下「あつ森」)関連のブログエントリです。

マンホールマップに投稿されている約1万件(2020/05/25 時点)のマンホール画像が「あつ森」のマイデザインとして取り込むことができるようになりました。


以前にニューヨークのメトロポリタン美術館が約40万点の美術作品に対して「あつ森」のマイデザインとして取りこむことができるようになった、というニュースがありました。これのパクり・・インスパイアされた機能で、約1万点(プラス、後述のおまけで1点)のマンホール・デザインをマイデザイン化して登録できるようになりました。既にこの機能は有効です。


ではマンホールマップから「あつ森」マイデザインに登録するための手順を以下に紹介します。「あつ森」を既に所有している前提はもちろん必要ですが、手順の中で Nintendo Switch Online アプリを利用することになります。事前にお手持ちのスマホに Nintendo Switch Online アプリをダウンロードし、「あつ森」利用時に使っているニンテンドーアカウントでセットアップして利用できる状態にしておいてください:
2020051903


マンホールマップから「あつ森」マイデザインに取り込むには、まずマンホールマップにアクセスします。この手順は PC またはスマホのウェブブラウザを使って行いますが、後述の QR コード読み取りをスムーズに行うことを考えると PC での(というか、Nintendo Switch Online アプリをインストールしていないデバイスでの)利用を推奨します:
https://manholemap.juge.me/


マンホールマップから「あつ森」マイデザインとして取り込みたいマンホール画像を1つ選びます。マンホールマップから画像を選択する方法は何通りかありますが、例えばトップページの一覧から1つ選び、プレビュー画面のマンホール画像をタップすることで詳細ページにアクセスできます:
2020052501



マンホールの詳細ページではマンホール画像とそのマンホールが存在する位置を示す地図が表示されます。このページ下部に「QR コード」と書かれたボタンがあるのでタップします:
2020052502


すると画面に QR コードが表示されます:
2020052503


次にこの QR コードを Nintendo Switch Online アプリで読み取る作業になります。つまりこの QR コードが表示されている状態のままアプリを起動する必要がある点に注意してください。場合によっては一度 QR コードのスクリーンショットを撮った上で画像共有アプリと連携したり、PC や他のスマホを併用する必要があると思っています。

改めてこの表示されている QR コードを Nintendo Switch Online アプリの「あつまれ どうぶつの森」サービス内「タヌポータル」の「マイデザイン」を使って読み込みます。まずは Nintendo Switch Online アプリを起動し、「あつまれ どうぶつの森」を選択して、「タヌポータル」から「マイデザイン」を選択します。:
2020051904


マイデザイン内の機能を使って、マンホールマップで表示されている「QR コードを読み取り」ます:
2020051905


正しく読み取りが実行できると、マンホールマップで表示されていたマンホール画像がプレビューされ、保存するかどうか確認されます。マイデザインは 32x32 のサイズで最大 15 色に減色されるためかなり荒くなってしまう点にご注意ください。マイデザインに取り込む作業を続けるには「保存する」を選択します:
2020052504


正しく読み取って保存することができました:
2020052505


ここまでの状態になると「あつ森」ゲームからダウンロードしてマイデザインに取り込むことができるようになります。ここから先は実際に「あつ森」ゲームを使う作業になります。

Nintendo Switch で「あつ森」を起動し、(ゲーム内の)スマホからマイデザインアプリを選択します:
2020051908


マイデザインを開き、画面右下の「ダウンロード」を選択します:
EY2Mr6pU8AAfCHL


すると先程 Nintendo Switch Online アプリで QR コードを読み込んだデザインの情報が表示されます。正しければ「オッケー」を選び、上書きしてもよい保存先を選びます:
EY2Mr6dU4AAmDSw


保存先を選択すると、QR コードを読み取ったマンホール画像が縮小・減色されてマイデザインとして保存されます:
EY2NePfUEAAs4Tl


取り込んだマイデザインは他のマイデザイン同様にゲーム内でトップスとして着たり、島の地面に敷いたりすることができます:
EY2NeOsUMAAWs6I


・・・といったことがマンホールマップ内に登録されている全てのマンホール画像に対して行うことができるようになりました。


【おまけ機能】
マンホールマップの「あつ森 マイデザイン」機能にはおまけがあります。マンホールマップ内に保存されている全マンホール画像に加えて、(マンホールマップにログインする際の)自分の Twitter アイコンも同様にマイデザイン化することができます。

上述のマンホール画像→マイデザインではログインは不要でしたが、このおまけ機能を試す場合はログインの必要があります。マンホールマップに画面右上のメニューからログインします:
2020052501

2020052502


マンホールマップのログインには Twitter の OAuth を使います。したがって Twitter の有効なアカウントが必要です。またこのログインする Twitter アカウントに設定されているプロフィールアイコン画像を対象に QR コードを生成するため、あらかじめ Twitter のプロフィールアイコン画像を設定しておきます:
20200525


改めてログイン後に画面右上のメニューから「アイコンの QR コード化」を選択します:
2020052506


すると上述した時と同じような QR コードが表示されます:
2020052507


ここから先の手順は上述した内容と同じです。Nintendo Switch Online アプリの「あつまれ どうぶつの森」サービスの「タヌポータル」から QR コードを読み取ることで Twitter アイコンをマイデザインとして保存できるようになります:
2020052508


保存すると「あつ森」アプリからダウンロードできるようになります:
2020052509


ここから先は上述した内容と一緒です。「あつ森」アプリのスマホ内「マイデザイン」からダウンロードを選択して、取り込んだ Twitter アイコンをマイデザインとして保存できます:
EY2NePPUEAEV4Sn


そして取り込んだマイデザインはゲーム内で利用できるようになります:
EY2NePLUwAAIkrq


おまけで紹介した Twitter アイコンのマイデザイン化はマンホールマップに投稿したことがなくても(Twitter のアカウントさえ持っていれば)できるので、興味ある方は使ってみてください。ついでに近所のマンホール画像をアップロードしていただけると嬉しいですw


さすがにメトロポリタン美術館の40万点には敵いませんが、約1万点のマンホール画像(と自分の Twitter アイコン)をマイデザインとして利用できるような機能を提供できました。ぜひマンホールマップを(できればログインして)使ってみてください。



【関連エントリ】
お絵描き共有サービスの「あつまれ どうぶつの森」マイデザイン対応


 

このページのトップヘ