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

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

タグ:manholemap

人気のテキストエディタである Visual Studio Code(以下 "VSCode")の機能を独自に拡張するプラグインの開発に挑戦してみました。以下で紹介するプラグインの開発は主にこのページにかかれている内容を参照し、参考にさせていただきました。ありがとうございます:
Visual Studio Codeの拡張機能を一通り触って自分用に公開するまで


作った拡張機能は MOTD(Manhole of this day) といいます:
https://marketplace.visualstudio.com/items?itemName=dotnsf.manholeofthisday

2020062305


機能は名前そのままですが、拙作マンホールマップの機能の1つである「今日のマンホール」を VSCode 内に表示する、というマンホーラー向けのものです。

VSCode にこのプラグインをインストールするには左ペインから「拡張機能」を選ぶか、Ctrl + Shift + X を押して拡張機能画面に移動し、検索バーに "manholeofthisday" と入力します("manholeof" あたりまで入力すると、検索候補が一つになります)。そして「インストール」と書かれた箇所をクリックしてインストールします:
2020062301


インストール後、実際に MOTD 機能を利用する場合は Ctrl + Shift + P でコマンドパレットを開き、このパレットに "MOTD" と入力してコマンドを検索し、最後に見つかった MOTD 部分をクリックします:
2020062302


MOTD コマンドを実行した日(月&日)のマンホールがマンホールマップの「本日のマンホール」に記録されて存在していた場合は VSCode 内の新しいタブが一つ追加され、その中で「本日のマンホール」画像と説明が表示されます。なおこの機能の実現には Webview API を使っています:
2020062303


画像部分をクリックすると、ブラウザで該当マンホールのマンホールマップ内ページが開き、より詳しい情報を参照することができる、というものです:
2020062304



この MOTD プラグインのソースコードはこちらで公開しています。開発言語として TypeScript を選ぶこともできましたが、今回は JavaScript で開発しました。この手軽さもハードル低くていいですね:
https://github.com/dotnsf/manholeofthisday

 

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

マンホールマップに投稿されている約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 アイコン)をマイデザインとして利用できるような機能を提供できました。ぜひマンホールマップを(できればログインして)使ってみてください。



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


 

"Hash File Storage" という、(IBM Cloud を使って)無料でも運用できるウェブストレージサービスのソースコードを公開します:
https://github.com/dotnsf/hfs


もともとはマンホールマップという自作の位置情報付き画像投稿サービスの機能の一部として開発したものだったのですが、画像投稿機能部分を切り出して、かつハッシュ計算を加えた上で API を整備しました。基本ストレージとして IBM Cloudant を使いますが、IBM Cloud のライトアカウント(無料)の範囲内でランタイム含めて運用可能なので、よかったら IBM Cloud と合わせてお使いください。


機能そのものは「ファイルストレージ」です。用意されたサンプルページや API を使ってファイルをアップロードしたり、アップロードしたファイルをダウンロードしたり、というよくあるものです。各種機能を REST API や Swagger ドキュメントでも提供しており、容易に外部アプリケーションから呼び出して利用することも可能です。

最大の特徴は格納時のファイル ID をファイルバイナリのハッシュ値で管理している点です。したがって既に登録されているファイルと(ファイル名などは異なっていても)バイナリレベルで全く同じファイルを登録しようとすると、同じファイル ID が既に存在しているため「登録できない」というエラーが返ります。またファイルを登録する以外にも「このファイルと同じものが既に登録されているか?」だけを調べる API が用意されていて、一度登録した後になんらかの変更が加わっているか/いないかを ID(ハッシュ値)で調べることができる、という特徴があります。 このサービス自体には含まれていませんが、ブロックチェーンと連携することでバイナリファイルの真偽性保証や、対改ざん性の強化を実現するものです。


実際に動作を確認するにはソースコードを git clone するかダウンロード&展開し、IBM Cloudant のクレデンシャル情報を指定した上で Node.js で起動します。詳しくは README.md を参照ください。



毎年恒例のマンホールマップ年間アクセスランキングを発表します。2019 年にマンホールマップでもっとも人気のあったマンホール蓋をベスト10形式で紹介します。また今年新たに投稿された蓋の中で最も人気があった「新人賞」と、今年最も多くの蓋画像を投稿いただいた方「最多投稿賞」を紹介します。


集計のルールとしては 2019/01/01 から 2019/12/20 までの集計期間における、PC およびスマホのブラウザから単独ページとしてのアクセス数を集計しています。ページビューとしての集計なので、例えば同じページの画面をリロードした場合は1回とだけカウントされます。

なお、過去5回の結果はこちらを参照ください:


2019 最多投稿賞

まず今年は集計期間中に 1006 枚ものマンホール画像が投稿されました(有効投稿のみ)。この集計を取り始めた 2014 年以降では最多で、初の年間 1000 枚投稿を達成しました!マンホールブームは確実に来てます!! 改めて投稿に協力いただいた皆様、ありがとうございました。

そして今年マンホールマップに最も多くの画像を投稿いただいたユーザーに与えられる賞、それが最多投稿賞です。今年もマンホールマップに有効に投稿された全画像の大半が昨年も激しく一位を争った 
minamu4545 様と 42ER03 様の2名のユーザーによって提供されたものでした。今年も感謝の限りでございます。 m(__)m

今年も昨年を上回るレベルでの激しい1位争いの結果、 42ER03 様が今年1年間で 354 枚もの蓋画像を投稿いただき、2年連続での1位となりました!おめでとうございます!!

そして今年もハイレベルな一騎打ちを演出いただき、惜しくも僅差で2位となった minamu4545 様、ありがとうございました。来年もお二人の争いになるのか、はたまた新星が現れるのか? 楽しみにしたいです。

ちなみに私自身は今年は5位でした。自分自身も含めて上位陣の投稿総数という意味では僅かな減少が見られますが、それでも総投稿数が上昇しているという事実も有り、つまるところユーザーの裾野が広がり、全体的な底上げができつつあるように感じられました。2020 年のマンホールは上昇確実銘柄と期待できます!(※投資は自己判断でお願いします)



2019 総合ランキングベスト10

いよいよ 2019 年マンホールマップ年間アクセス数ランキングを発表する時がやってまいりました。総合ランキング1位となる MVM(Most Variable Manhole) の座はどの蓋に!?


まずは 10 ~ 4 位です。

実は今年の10位が大激戦でした。2票差の中に5つの候補がひしめく大激戦を制して神10入りを果たした今年の第10位!

順位昨年順位市区町村投稿者画像
10 - 埼玉県比企郡滑川町iamokura_2


埼玉県滑川町の地名が大きく書かれた地味蓋、マンホールナイト実行委員の新人でもある iamokura_2 さんによる今年5月の投稿でした。iamokura_2 さんのこういう独特な着眼点が僕大好きです!


続いて9位ではなく、8位は同数だったので1つ目の第8位!

順位昨年順位市区町村投稿者画像
8 - 静岡県島田市minamu4545


静岡県島田市島田大祭を描いたカラー蓋、この年間統計ではおなじみ minamu4545 さんによる 2018年10月の投稿作品です。最近多くなったカラフルな蓋作品です。


もう1つの第8位!

順位昨年順位市区町村投稿者画像
8 - 東京都江東区morimo_t

東京都江東区、というかお台場のガンダムと無理やりコラボした morimo_t さんの作品です。2012 年6月の投稿作品です。蓋というよりもガンダム人気で上位に来たような気がしていますw


第7位!

順位昨年順位市区町村投稿者画像
7 - 東京都中央区dotnsf

東京都中央区日本橋のたもとにある日本国道路元標の疑似蓋が第7位でした。東海道の起点としての印なんですが、お江戸日本橋のシンボルにもなっています。ちなみに投稿者は dotnsf つまり僕です σ(^^; 。投稿は 2011 年8月でした。


第6位!

順位昨年順位市区町村投稿者画像
6 - 岡山県倉敷市eRP1pgRkR6B4mSu

岡山県倉敷市ジーンズストリートに飾られたジーンズ地の蓋です。 eRP1pgRkR6B4mSu さんによる 2017 年4月の投稿作品でした。ジーンズ地でジーンズストリート周辺地図を描いた蓋になっています。


第5位!

順位昨年順位市区町村投稿者画像
5 - 静岡県静岡市SakiYumeno

静岡県静岡市、登呂遺跡のイメージキャラクターである『トロベー』が描かれたカラー蓋です。 SakiYumeno さんによる 2019 年 2 月の投稿作品でした。今回のランクイン蓋の中では珍しいキャラクター蓋でした。


第4位!

順位昨年順位市区町村投稿者画像
4 - 静岡県富士市meaculpax3

日本以外でも話題になった、静岡県富士市かぐや姫マンホールです。meaculpax3 さんによる 2011 年 6 月の投稿作品です。 この年間アクセス数ランキングではこのようなメジャーな蓋が上位に来ない、という謎の伝統(?)があったのですが、この有名な蓋が年間アクセス数で4位になったというのはやはりマンホールブームの裾野の広がりを感じさせる結果にもつながります。


昨年・一昨年とマンホールカード勢による新作マンホールが上位を席巻したベスト10でしたが、今年はここまで新作蓋が比較的苦戦している印象を受けます。昔ながらのマンホールが見直されつつあるというのは(そっち好みの)マニアとしては嬉しい限りですが、このあとのベスト3ではどうなるのでしょう!?



どきどきのベスト3の発表です。第3位!!

順位昨年順位市区町村投稿者画像
3 - 香川県小豆郡小豆島町42ER03

香川県小豆郡小豆島町空気弁蓋。最多投稿賞にも輝いた 42ER03 さんによる作品です。マンホールマップへの投稿は 2019 年 6 月と記録されていますが、投稿メッセージに「平成28年12月撮影」とあるので、3年前の撮影画像ということになりますね。

マンホールマップ年間統計ではおなじみのセリフなんですが、「なんでこの蓋がそんなに人気あるの?」が謎の第3位となりました(笑)。


第2位!!

順位昨年順位市区町村投稿者画像
2 - 埼玉県入間郡毛呂山町Nikki_papa

埼玉県入間郡毛呂山(もろやま)町のカエル(ケロ?)が描かれたデザインマンホールが第2位でした。 Nikki_papa さんによる 2011 年7月の投稿作品でした。菊、山吹、つつじという地元の名物が描かれたデザイン・マンホールらしい蓋が第2位となりました。



ここまで古参マンホール勢と静岡県勢が大健闘している 2019 年マンホールマップ年間アクセス数ランキングの上位争い。では 2019 年マンホールマップ年間アクセス数ランキング・第1位となった MVM(Most Variable Manhole) は!?

第1位!!!

 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓
 ↓




順位昨年順位市区町村投稿者画像
1 - 静岡県富士市minamu4545


1位のマンホール画像は 2019 年の3月に minamu4545 さんによって投稿された静岡県富士市岳南排水路の蓋画像でした。

中央にこの地方が全国トップシェアを誇る加工品であるトイレットペーパーとその工場、下方に駿河湾とその名物である桜エビ&シラス、そして上方には世界遺産・富士山が描かれています。情報をいっぱい詰め込んだ、ある意味でデザインマンホールらしいデザインマンホールが今年の MVM に輝きました。

なお、この画像は今年投稿されたものでもあるため 2019 年新人賞蓋でもあります。 minamu4545 さんはなんと3年連続で新人賞と MVM の同時受賞を達成しました!快挙だと思います、あらためておめでとうございます。


今年はこれまでの新人蓋が上位を席巻するような流れが一変し、以前に投稿された蓋のあらためて慈しむ流れが発生した結果となりました。一方で今年のベスト10画像には昨年のベスト10画像が1つも含まれないという結果となりました。 ただそのような新しい流れの中でも牙城を崩さずに MVM を死守しただけでなく、唯一人ベスト 10 に2枚の蓋を送り込んだ minamu4545 さんの強さ(=行動力?)を確認した 2019 年となりました。



そして最後にマンホールマップ開発者&運営者としての自分からのメッセージです。今年は天災による停電の影響に加え、マンホールマップ自体のメジャーバージョンアップやその後の調整作業などもあって、サービス全体としては比較的不安定な運営となった1年だったと思っています。ご不便をおかけして失礼しました。

一方で調整後の12月になってからは比較的安定した運用ができていると思っています。また新機能であるブロックチェーン連携によって投稿画像の著作権を保護する、という(地味にwすごい)先進技術によって、利用いただくみなさんが安心して使えるサービスをこれからも提供できればと思っています。

加えて、実はマンホールマップの運用開始から約10年が経過しましたが大きな変化がありました。マンホールマップにはいわゆる「いいね!」に相当する「ナイスマンホ!」機能があり、利用者による人気ランキング投票が実現できていましたが、この10年の間、人気1位はほぼ不動で石川県のこの蓋となっていました:


が、今年はついにこの1位に変化があり、12月21日時点で渋谷のこの蓋が同率1位となっています。1位に変化があったのは10年間で初です:



さて来年の今頃、この人気投票はどのような順位になっているのでしょうか? その結果も楽しみにしつつ、来年以降も引き続きマンホールマップを宜しくおねがいします。

マンホールマップの新バージョンを開発中です。暇を見つけて開発しているので、作業が進む時期も進まない時期もあったりしていましたが、とりあえず最低限の機能の実装はできつつあり、だんだんアプリケーションとしての形になってきました。まだ開発中なので、画面は変更する可能性もありますが、一部の機能をチラ見せしつつ予告編のような形で紹介します。


【新バージョンのテーマ】
ずばり「地図へのこだわり」と「技術の無駄遣い」です。現行版もおなじテーマで開発しており、マップのネーミング通り、地図機能にこだわりつつも、人工知能など比較的あたらしい技術要素を含んだりしていましたが、自分的にはそろそろ更に新しい技術テーマにも挑戦したいと考えていました。既存バージョンからの機能拡張では済まないような、基盤よりの新技術テーマにも挑戦したかったので、新バージョンという形でまったくゼロからのスクラッチ開発に取り組みました。

ちなみに開発言語は現行版が Java でしたが、新バージョンでは Node.js を使います。過去のマンホールマップのプラットフォームは Google App Engine だったり、J2SE だったりしましたが、開発言語はずっと Java を使っていました。その意味でも全くのゼロからの作り直しとなります。


【新バージョンの技術目標】
大きなものは以下の3つです:
- レスポンシブ対応を含めた新ユーザーインターフェース
- ハイブリッドクラウド化
- ブロックチェーン対応

「レスポンシブ対応」とは「PC ブラウザでもスマホブラウザでも、使っているデバイスの画面サイズにあわせてそれなりに使えるようにする」ことを意味しています。現行版も一応スマホ対応していますが、これはスマホ用の画面を PC 用とは別に作っていて、「スマホの人はこっちのページ」という対応でした。 この方法はメンテナンス時に互いの影響を少なくすることはできますが、2つのアプリを同時に開発するような側面もあって、開発する側としては面倒なものでもありました(現実的にはスマホからは使えない機能も多くあります)。 今回ははじめからレスポンシブ化を目指して開発を進めています。今の所 100% レスポンシブ対応できるようになるかどうかは微妙な予感がしていますが(苦笑)、数カ所を除いてなんとかがんばる予定です(←既に数箇所諦めています (^^;)

なお、現在開発中の画面の一部を公開します:
2019091601


2019091602


このカレンダー機能は実は現行版にも含まれていますが「隠し機能」的な位置づけでした。新バージョンではメニューから表示できるようにします:
2019091603


ゲーム要素にも新しい画面を取り入れる予定です。これは「アタック25」モードのページ:
2019091604



次に「ハイブリッドクラウド化」。まず現行版は私の自宅にある ThinkPad 内にアプリケーションサーバーとデータベースサーバーをインストールして動いています。要は(一部の機能は外部APIを使っていますが)ほとんどを自宅内のリソースで提供しています。クラウド時代をある意味で逆行しているものです(ただ個人開発者としては今でもこの形のアドバンテージはあると思っています)。これを一部パブリッククラウドに移して(一部は自宅に残して)コンテナ化するようなハイブリッドシステムを構築する方向で進めています。詳しいシステム構成は後述します。

最後の「ブロックチェーン対応」、これは改ざんが困難な仕組みである「ブロックチェーン」の技術を使い、利用者がマンホールマップにアップロードしたデータが正しいものである(改ざんされていないものである)ことを保証する仕組みを提供するつもりです。


【新バージョンのシステム構成(予定)】
上記の要素を取り入れ、マンホールマップのシステム構成は現行のこの形から、
2019091501


最終的にはこのような形に変更する予定です。今まで以上に公私混同具合が大きくなります(苦笑):
2019091502
(↑ブロックチェーン部分のネットワーク構成は面倒なのでかなり省略)


なお、データベースサーバーのみ独立して自宅サーバーで稼働し続ける形になりますが、これもいずれはパブリッククラウド化を考えています(当面自宅に残す理由はコストパフォーマンスの問題です。クラウドのデータベースサービスは高い・・)。


リリースを優先する意志もあるので、新バージョン公開段階でどこまで実装できているかはまだ不確定要素もありますが、この最終形を目指して開発を進めていくつもりです。なお UI はまだ変更の可能性が高いのですが、ハイブリッドクラウド化とブロックチェーン対応は試験的にはもう動いていて、技術的な目処はついています。


【新バージョンの公開予定】
新バージョンは現時点では令和元年11月2日に開催予定の「マンホールナイト11」にてお披露目予定です。可能であれば(そして大きなトラブルがなければ)この日に前後する形でシステム公開するつもりでいます。




 

このページのトップヘ