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

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

Node.js には npm という便利なパッケージ管理ツールがあります。これはプロジェクト内に package.json というファイルを用意し、その中にプロジェクトで利用したいオープンソースライブラリを記述しておくだけで、後は
$ npm install
と実行するだけでそれらのオープンソースライブラリをまとめてインストールしてくれる、という機能があるのです。しかもその記述されたライブラリだけでなく、それらのライブラリが必要とするライブラリもまとめて調べ、まだインストールされていないものがあればそれだけを(2重にインストールしたりせずに)選別してインストールしてくれる、というものです。要するに深く考えずに npm install すれば、そのプロジェクトの実行に必要なライブラリがまとめてインストールすることができるようになります。

ただ実行環境を揃えるだけならこのように簡単なのですが、どのようなライブラリがインストールされることになり、そしてそれぞれのライブラリはどのような種類のオープンソースライセンスのもとで配布されているのか、を改めて調べようとするとちと面倒なことになります。まず上述のように導入されるライブラリは package.json に記述されたものだけではなく、それらが必要とするライブラリや、更にそれらが必要とするライブラリ・・・と、再帰的に含まれるので、小さなプロジェクトでも実際に調べる対象となるライブラリの数は膨大になってしまいます。試しに先程ウェブフレームワークとして有名な express(v4.17.1) だけを指定して npm install してみたところ、express 自身も含めて 49 個ものライブラリがインストールされました:
2019080401


なので express だけを使うプロジェクトであっても、利用するオープンソースライブラリのライセンスを調べるには、これら 49 個のライブラリそれぞれのライセンスを調べる必要がある、ということになります。

これはさすがに面倒・・・ということで、まとめて調べるツールを作ってみました:
https://github.com/dotnsf/licenses

2019080402


このツールはローカルファイルシステム内のプロジェクトフォルダ(ディレクトリ)を指定して、そのプロジェクトの中で使われるオープンソースライブラリを調べて一覧表示します。ウェブの UI をもたせることも考えたのですが、ローカルファイルシステムを指定するということは対象プロジェクトのソースコード一式をローカルシステム内に(ダウンロードなり git clone なりで)取得しているということになるので、GUI がなくても使える人が大半だろう、、、と思って付けませんでした。GUI でパイチャートとか付けたい人は改造しちゃってください。なおこのツール自体は MIT ライセンスです。

利用するにはまず上記プロジェクトをダウンロードか git clone します。実質的に licences.js だけを使います。そしてこのファイルの3行目あたりにある target_folder 変数の値を調査対象とするプロジェクトのフォルダとなるよう書き換えてください(例: "../myproject" など)。

そして Node.js で実行します:
$ node licenses

成功すると target_folder で指定したフォルダ内の node_modules/ サブフォルダの中を調べ、更に導入済みライブラリのサブフォルダを調べて各ライブラリ毎に配布ライセンスを推測します。そして全てのライブラリを調べ終わったら、結果を一覧表示します(下は例、赤字はコメント):
$ node licenses
target_folder = '../myproject'  対象フォルダ名
MIT: 73.52% MITライセンスが73.52%
[ 'accepts',  MIT ライセンスと推測されたライブラリ一覧
  'abbrev',
  'append-field',
     :
]
ISC: 21.32% ISCライセンスが21.32%
[ 'are-we-there-yet', ISCライセンスと推測されたライブラリ一覧
  'chownr',
  'console-control-strings',
    :
]
Apache: 4.41% Apacheライセンスが4.41%
[ 'detect-libc', Apacheライセンスと推測されたライブラリ一覧
  'ejs',
  'cfenv',
    :
]
BSD: 0.73% BSDライセンスが0.73%
[ 'esprima' ] BSDライセンスと推測されたライブラリ一覧

これでいちいちフォルダ毎に調べなくても依存ライブラリのライセンスがわかります。たぶん。



ふと思い立って「モールモール」というパズルゲームを作ってみました。ただし「ゲーム内で使う画像はいらすとや様から入手できるものに限る」という制約を自分に課してみました。つまりいらすとや様から提供されている画像のみを、そのまま(書き足したり、一部だけ切り取ったりせずに)使ってゲームを作る、という条件にしてみました。

「モールモール」はもともと 1985 年に当時のビクター音楽産業(現JVCケンウッド・ビクターエンタテインメント)から MSX 向けにリリースされた、主人公のモグラを操作するパズルゲームでした。その後、他機種への移植や続編のリリースなどもされましたが、シンプルなルールや操作性もあってか、当時の素人プログラマー達が自分の所有していた機種に勝手に移植して雑誌で発表されていることも珍しくありませんでした。

※雑誌にプログラムコードが数ページに渡って記載されていたり、「ソノシート」と呼ばれる片面レコードにプログラム情報が記載されて付録になっていたりした時代がありました。。

実は自分もその一人 σ(^^) です。僕はパソコンの所有が大学4年生になってからと比較的遅かったのですが、高校生の頃にポケットコンピュータ(当時の通称は「ポケコン」)と呼ばれる、コンピュータというよりもプログラミング機能付き電卓を持っていました。その中の1つがシャープの PC-1350 で、当時では画期的な縦4行表示とグラフィック機能を備えており、BASIC によるプログラミングもできるものでした。この「縦複数行表示」が当時のポケコンでは珍しく、広い画面を使って「モールモール」をはじめとするゲームを勝手に移植して遊んでいたのでした。その意味で今でも思い入れあるゲームの1つです。

この「モールモール」、キャラクターとして必要な画像は6種類(ドア、はしご、土、石、イモ、主人公)と比較的少なく、また基本操作も(パズルをギブアップする時などは例外ですが)上下左右の移動のみなので矢印キーだけで実現できます。敵という概念もないので考えている間にやられてしまったり、敵を撃つ必要もありません。リソース的にも非力なポケコンにピッタリのゲームでした(笑)。

で、今回のゲーム制作にあたり、いらすとや様から以下6個の画像を使わせていただいております:

ドア =いろいろな状態のドアのイラスト



はしご =木のはしごのイラスト



 =デジタルデータ風の背景素材(緑)



 =石垣のイラスト(背景素材)



イモ =スネークフルーツのイラスト



主人公 =もぐらのイラスト



これらの画像に手を加えず、そのまま使っています。モールモールでは「土」がなぜか緑色なのですが、デジタルデータ風背景画像が遠くからみるとそれっぽく見えるのが大発見でした(苦笑)。また「イモ」の画像は数種類あったのですが、一番イモっぽく見えたのが「スネークフルーツ」だったのも新発見でした。 (^^;


で、作ってみました。github リポジトリはこちらです:
https://github.com/dotnsf/molemole


リポジトリには画像は含まれていません。必要な画像はすべて動的にいらすとや様から直接ダウンロードして使っています:
2019071801


実質 index.html ファイルだけなので GitHub Pages でも公開しました。PC ブラウザでこちらのリンク先から遊ぶことができます:
https://dotnsf.github.io/molemole/

2019071701


簡単なルールなどは README.md に記載しているので、上記ページを参照ください。簡単に言うと「すべてのイモを取ってからドアまで行けばクリア」です。ただ重力を意識する必要があることと、落ちてくる石をうまく使わないとクリアできない面があったりします。

例えば上図は第0ステージですが、この面は普通にイモを取りに行って、そのままドアまで向かえばゴールです。よほど捻くれた取り方をしない限りは詰むことはないと思います。

でも第1ステージはこうなります:
2019071703


この面の場合、何も考えずにイモを取りに行ってしまう↓と・・・、ドアにたどり着く術がなくなってしまいます。こうなると "retry" ボタンでリセットするしかありません。石をうまく誘導しながらイモを取る必要があります:
2019071704

 
先に進むともう少し複雑なステージも待っています:
2019071702


README.md にステージ追加のカスタマイズ方法も乗せているので、興味ある人はダウンロード後に自分でステージを考えて追加して遊んでみてください。



マンホーラーのコレクションアイテムの1つがマンホールカードです:
http://www.gk-p.jp/mhcard/

マンホールマップもお世話になっている GKP (下水道広報プラットフォーム)様が無料で発行しており、対象となる自治体の市役所や駅近くの観光案内などで配布されています。マンホールの模様だけでなく、その模様の成り立ちなどの情報が(裏面に)記載されています:
IMG_7752
 

このマンホールカードには、カードに写っているマンホール蓋がどの位置で撮影されたものか(要するに「どこにあるマンホールか」)が記載されています。カード表の左下部分です:
20190715


つまりこの位置が示す場所にいけばこのマンホールが撮影できる、、ことになっているのですが、上記の表記で場所はわかるでしょうか? 分かる人は分かると思いますが、例えば緯度や経度って「北緯○○度」とか「東経△△度」という表現が一般的だと思っていて、上記のような表現でそれがわかるか? という問題があります。

例えば上記のデータをそのまま読み取って「北緯(N)35.43420 度、東経(E)139.54265 度」と理解していいかというと、どうも違いそうです。試しに緯度経度地図でこれらの値を入力してみました:
https://fukuno.jig.jp/app/printmap/latlngmap.html

2019071601


神奈川県横浜市戸塚区の地図が表示されました。少なくとも市川市ではない、と。 では改めてマンホールカードに記載された位置情報を緯度経度に読み変えるにはどうすればよいのでしょうか?


答はこちらです。実はこの表記は 60 進法で記述されていたのでした。例えばカードに「○○°△△'□□''」と書かれていた場合、これを数値変換するには
  ○○ + △△/60 + □□/3600
の値を計算します。例えば上記市川市のカードにかかれていた情報であれば以下のようになります:
  北緯: 35 + 43/60 + 42.0/3600 = 35.72833333
  東経: 139 + 54/60 + 26.5/3600 = 139.90736111

試しにこれらの値を上記の緯度経度地図サービスに入力してみると、無事JR市川駅近くの地図になりました:
2019071601



このページのトップヘ