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

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

タグ:manhole

2018年11月3日(土・祝)に第10回マンホールナイトが開催されます。また同日に会場で投票が行われるマンホール写真コンテストの応募作品の募集が開始されました。

第10回マンホールナイト併設写真コンテスト作品募集

mn10keyvisual


今回は第10回記念大会ということもあり、例年に増してレアなグッズが賞品として用意されているとかいないとか・・・ そんな写真コンテストへの応募方法をご紹介します。

今回、応募はメールで行う必要があります。応募作品画像を添付して、photo@manholenight.info へ送付ください。またその際に本文内に以下の情報を記載してください:
・作品タイトル
・作者名(ペンネーム・ハンドルネーム可)


加えて、当日会場に来られない方の場合は、副賞を送付する必要が生じる可能性があるため、以下の情報も合わせて記載ください:
・住所
・お名前(こちらは本名)
・電話番号


青字は必須、橙字は会場不参加予定の方のみ


(メール例)
2018090501

(添付画像例)
funabashi_sapporo



なお、例年のコンテストでは写真につけるタイトルが受賞の鍵となっている傾向があります。どんな作品にどんなタイトルをつけて応募するのがよいのか、昨年の受賞作も参考にしながら「これぞ!」という応募作品タイトルをつけてご応募ください。

応募締切は9月30日(日)10月14日(日)必着。応募資格はなく(プロ・アマ問わず)、応募そのものに料金はかかりません。お一人何点応募しても構いません(ただし似た画像だと得票が割れて不利になる可能性あり)。詳しくは公式応募ページを参照ください。


多くの皆様のご応募をお待ちしております。合わせて第10回マンホールナイトのチケットも絶賛発売中です!今年の文化の日はマンホール文化を嗜みましょう!!



大阪府吹田市が市内の観光名所をテーマにしたデザインマンホール3種を作成し、先日公開されました:
吹田市がデザインマンホール蓋3種類 楽しみながら探して

この3種は「三色彩道の紅葉」、「ガンバ大阪」、そして「大阪モノレール」をテーマにしたもので、設置場所についてはヒントだけが公開されていました。ちょうど万博公園の「太陽の塔」の内部公開を見に行くタイミングと重なったので、この3つを探してきました。そしてそれぞれマンホールマップに投稿したので、以下は結果的に場所のネタバレを含む内容になっています(苦笑)。

















まず1つ目、「三色彩道の紅葉」


これは阪急千里線「北千里」駅からテーマになっている「三色彩道」に向かって歩いた途中の保育園の近くで見つけました。
http://manholemap.juge.me/page.jsp?id=5607739796554497828



2つ目、「ガンバ大阪」、ガンバのマスコットであるガンバボーイと、吹田市のイメージキャラクター「すいたん」がサッカーで共演しているマンホールです:



これは当然パナソニック吹田スタジアム・・・かと思いきや、結構難問でした。結論として最寄り駅は大阪モノレール公園東口駅で、ここから吹田スタジアムに向かって南下し、中国自動車道をくぐった直後の植え込みの中に設置されていました。↑の写真を見ると周囲が植え込みっぽくなっていることがわかると思います。

http://manholemap.juge.me/page.jsp?id=6283324744500361540



そして3つ目、「大阪モノレール」



こちらは大阪モノレール万博記念公園駅から東のららぽーとに向かって歩きます。そしてららぽーとに入るのではなく、万博記念公園に向かう橋も渡らず、ららぽーとの北側にある、モノレールと並行して伸びる側道(自転車の駐輪場? ちょっとわかりにくい)に入ります。そして入ってすぐの所に設置されていました。発見難易度はこれが一番難しかったと思います。

http://manholemap.juge.me/page.jsp?id=1433437503660013763


ちなみに、2番目のガンバマンホールに万博記念公園駅から向かう場合、この3番目のマンホールが設置されている側道をそのまま東に向かって歩き続けることで最短距離で移動できます(ららぽーとに入ったり、ぐるっと廻って吹田スタジアム経由で向かおうとすると手間取ることになります)。



なお、これら3種すべてのマンホールに suitable city という文字が表記されています。この "suitable city" を直訳すると「適度な市」とか「ちょうどいい市」みたいな感じだと思いますが、同時に suita(吹田)という部分が強調されていて、ダジャレマンホールになっています。こんなオチを隠し含めるあたりは大阪の意地なんでしょうかね。。。


吹田を訪ねる予定があり、これらのマンホールを探したいけど、滞在時間の関係などでどうしても効率よく周りたい、という方は参考にしてください。 (^^;


2017年のマンホール界(?)は、マンホールサミットマンホールナイトといった、定番となったイベントだけでなく、各種メディアでの紹介やグッズの発売など、例年以上に盛り上がった・・・いや盛り下がった感があります(マンホールだけに)。

そんなマンホールの盛り下がりの様子をウェブマーケティング的に、具体的にはグーグルトレンドツイッターを使って1年間の経緯を調べてみました。なんとなく「グーグルトレンドの使い方」みたいな内容になっています(苦笑)が、まあ専門分野ではないということでご容赦ください:


まずは単純に「マンホール」が検索された回数の推移をグーグルトレンドで調べたみたらこんな感じでした:
2017122401


年末の山は 12/3 の週で、これはまさに「マツコの知らない世界」でマンホールが取り上げられたタイミングと一致しています。テレビメディアの影響の大きさを改めて感じますねー。

で、問題はその時をも上回る 4/30 週のトレンドスパイクです。このタイミングはマンホールサミットやマンホールナイトではないし、韓国ドラマ「マンホール」の放映にもまだ早い時期です。ではこのタイミングで「マンホール」が多く検索された理由は一体・・・

というわけで、この期間を更に詳しく調べてみました。5/3 にスパイクがあるのか・・・
2017122402


そして、この期間の関連キーワードを見ると「マンホール カード」となっていました:
2017122403


マンホールカードの発表や配布のタイミングではなかったはずなのですが、マンホールカードの検索回数が急上昇した日だったようです。「マンホール」と「マンホールカード」の検索トレンドを調べてもほぼ一致しているように見えます・・・:
2017122404


改めて5月3日周辺の「マンホール」または「マンホールカード」が検索された記録をツイッターなどで調べて(※)、、、やっと原因がわかりました! この日、フジテレビの「情報プレゼンター とくダネ!」で市川市のマンホールカードが配布された様子が特集された放送されたいたようです:
「情報プレゼンター とくダネ!」 2017年5月3日(水)放送内容


そしてその結果が上記の検索スパイク、となったようでした。朝の情報番組、恐るべし!


※ちなみに、ツイッターで期間を指定して検索するには、公式ページの検索ボックス内に
since:2017-04-30 until:2017-05-07 マンホールカード
のように指定して検索すると実現できます。ちなみに上記例は 2017-04-30 ~ 2017-05-06 内に「マンホールカード」がツイートされた様子を検索しています。since の日付は指定日を含み、until の日付は指定日を含まないようです。


とりあえず、こんな感じでグーグルトレンドツイッターの検索機能を使って簡単にキーワードの検索トレンドを調べることができます。年の瀬にちょっとしたウェブマーケティングの勉強も兼ねて、皆さんが興味ある物事や、出来事、イベントなどの1年間のトレンドとその背景を調べてみてはいかがでしょう?

2016 年の年初に「マンホライザー」というサービスを作って動かしていました:
http://dotnsf.blog.jp/archives/1048853473.html

マンホライザーはわかりやすく言うと「マンホール顔ハメ画像作成サービス」です(わかりやすいか??)。先日のマンホールサミット 2017 埼玉に参加した際にも、こんなアナログな顔ハメ写真サービスを提供させていただいたのですが、意外と人気があったのでした。それをウェブ上からもできるようにしよう、というわけで生まれたサービスでした。IBM Watson の画像認識機能を使って実装しており、「テクノロジーの無駄使い」な点も自己採点ポイントが高いものになっています(笑):
2017020701


上記リンク先の、2016 年に公開した当初は PHP で実装していました。その時のソースコードはこちらです:
https://github.com/dotnsf/Manholizer


このコードはこれはこれで現在も動く(注 Visual Recognition API の古いものを使っているので、顔ハメはうまく動きません)ものですが、いくつかの課題もありました。その1つが「スマホからの利用を想定していなかった」という致命的な点です。見た目でのスマホのウェブブラウザ最適化という意味では実現したつもりでしたが、想定外だったのは「スマホのカメラで撮影した画像の解像度が予想以上に高かった&今後は更に高くなることが想定される」ということです。

ある程度詳しい人には常識かもしれませんが、iPhone をはじめとする最近のスマートフォンのカメラはかなり高い解像度の写真を撮影することができます(特に設定を変更しない場合は、高解像度撮影が標準機能になっていることが多いです)。撮影した写真を低解像度にしてメールで送る、といったことは可能ですが、内部的には高解像度のまま保存されていることになります。これは1枚の写真画像のファイルサイズが非常に大きいということを意味しています。これは2つの点で問題になります。

1つはアプリケーションサーバー側の制約を受ける可能性があるという点です。例えば PHP を普通にインストールしたアプリケーションサーバーの場合、アップロードサイズは 2MB に設定されることが多いです。もちろんこの設定を変更できればいい話ですが、最近は PaaS などでミドルウェア設定を変更できないケースもあるので、そうなるとこの制約を受けてしまいます。

もう1つは API 側の仕様上の制約を受ける可能性です。このマンホライザーでは画像から顔の位置を認識・特定する必要があるのですが、その部分に IBM Watson の Visual Recognition API を使っています。この API の制約として現在は「画像は 2MB まで」という制約があるのでした。つまり上記のアプリケーションサーバー側の制約を取り除いただけでは解決にならないことも出てきてしまうのです。

上記で紹介した、以前作った PHP 版のマンホライザーにはこれら2つの課題があり、スマホからの利用を想定すると期待通りに動かないケースが出てきてしまいました。というわけで、ミドルウェアや設計段階から見直したマンホライザーを作り直すことにしたのでした。


上記2点を解決するため、まず PHP のアップロードファイルサイズ制約をうけないよう、アプリケーションサーバーは Node.js を使うことにしました。PHP から Node.js への移植を行いました。これによって 2MB を超える画像もアップロードできるようにしました。

また API 側のサイズ制約については、アップロードした画像を一旦内部的にリサイズし、API が実行できるレベルにまでサイズを減らしてから実行する、というロジックに変更することで対処しました。細かい点ですが、画像を小さくしてから実行するため、API からのレスポンスは「小さくなった画像に対する顔の位置」になります。アプリケーション側ではアップロードした画像のプレビューが表示されており、その画像にマンホールの位置とサイズを調整して「ハメる」わけですが、元の画像サイズに対するレスポンスにはなっていないので、その辺りも考慮する必要が生じます。

そんなこんなの変更を加えてできあがったのがこちらです:
https://manholizer.mybluemix.net/

2017020701

↑ちとズレてるが・・・


使い方は PC またはスマホのウェブブラウザでアプリケーションサーバー(https://manholizer.mybluemix.net/ とか)にアクセスしてください。で、「参照」ボタンをクリック:
2017020702

 

手元のローカルファイルシステムまたはフォトライブラリ等から画像ファイルを選択します。今回は「フリー素材アイドル」の Mika x Rika さんの画像を使わせていただきました:
顔4


この画像を指定して、しばらく待つと・・・
2017020703


こんな感じになりました:
2017020704


合成用マンホールのデザインとして使っているのは(マンホーラーであればおなじみの)東京都マンホールです:
2017020706


(2つの)顔の位置を識別し、うまく顔ハメになるようマンホールの位置と大きさが調整されて合成されています。またマンホールの色がピンクなのは「女性」であると認識されている様子です(男性の場合は青いマンホール画像を合成します)。また2人の上部に "-17" と表示されていますが、これは推定年齢でふたりとも「17才以下」であると推測されている、ということを意味しています(お二人の年齢は存じ上げませんが、全体的に日本人の顔は若く判定される傾向があるようです):
2017020705



なお、このサービスのソースコードはこちらで公開しています。興味ある方はご自身の環境でもどうぞ:
https://github.com/dotnsf/manholizerDemo


自分の環境に導入して使いたい場合の方法は README.md にも記述していますが、IBM Bluemix の Node.js ランタイムで使う場合であれば、まず Bluemix にログインして、SDK for Node.js ランタイムを1つ作成します(この時の名前を後で使います)。また Visual Recognition サービスインスタンスを生成し、その API KEY を取得しておきます(この値も後で使います)。

次に上記サイトからソースコードをダウンロード&展開するか git clone して、以下の2ファイルを編集します。

1つ目は settings.js です。この中の exports.vr_apikey の値に、上記で取得した自分の Watson Visual Recognition サービスの API Key の値を設定します(以下は API Key が abcdabcdabcdabcdabcdabcd であった場合の例です):
(settings.js)

: exports.vr_apykey = 'abcdabcdabcdabcdabcdabcd'; :

もう1つは manifest.yml です。この中を実際に運用するランタイムの情報に設定します。例えば eu-gb リージョンを使って、my_manholizer という名前のランタイムで運用する場合は以下のようになります(ng リージョンの場合、domain は変更せずにそのままで構いません):
(manifest.yml)

: domain: eu-gb.mybluemix.net name: my_manholizer host: my_manholizer :

この状態で cf コマンドを使ってアプリケーションを push すると、作成した Node.js ランタイム上にマンホライザーがデプロイされます:
$ cf push

IBM Bluemix を使わずに運用する場合は・・・ まあ普通に Node.js をインストールして npm install して使ってください(適当)。


ゆるキャラを画像で検索するサービスを作って公開してみました:
http://yuru.mybluemix.net/

まず最初に、自分はある程度ゆるキャラに詳しいと思っています。積極的な興味というよりは、マンホールに詳しくなっていると、最近はそのマンホールのデザインにゆるキャラが使われることが珍しくなくなってきたので、自然と(?)ゆるキャラにも詳しくなってしまうのでした。。
2017011500
 

さて、ゆるキャラに限らないのですが、イマドキ何かを調べようとした時にはまず『ググる』のが定番です。ただ、それは調べるためのキーワードが分かっている場合です。ゆるキャラの場合、名前が分かっていれば名前でググれば確実ですし、名前が分からなくても出身地とかが分かれば「ゆるキャラ 東京都」などで検索すればいくつか候補が見つかるのでそこから調べる方法もあります。

しかし問題は名前も出身地も分からず、検索するためのキーワードがない場合です。例えば目の前に着ぐるみそのゆるキャラ本体がいて、写真は撮れるんだけど、そのゆるキャラがなんという名前で、どこのゆるキャラで、どんな特徴を持っているのか、、、といった情報を調べる具体的な方法がなかったように感じていました。

といった背景もあり、「画像からゆるキャラを調べる」ことができるようなウェブサービスを作ってみた、という経緯です。いわゆる「類似画像検索」を行うため、コグニティブエンジンである IBM WatsonVisual Recognition API を使って実装してみました:
http://yuru.mybluemix.net/


使い方はシンプルで、ウェブサイトをPCかスマホのブラウザで開き、ファイル選択ボタンを押して、ローカルシステムやフォトライブラリ等から目的の画像を選択するだけです:
2017011501


PC の場合に限り、目的の画像ファイルを画面上部のこの辺りにドラッグ&ドロップしても構いません:
2017011502


例えばこの画像のゆるキャラを調べてみることにしました。まあ有名なヒトなので答はわかっているのですが、ちょっとトリッキーなアイテムも写っていて普段と違う画像になっているので、いいサンプルかな、と:
く


この画像を選択するか、画面内にドラッグ&ドロップすると画面が暗転して検索が始まります:
2017011503


暗転から戻ると、検索結果として候補キャラが画面下部に表示されているはずです。最大で100件表示されます:
2017011504


今回の画像の場合、下の方にそれっぽいのが見つかりました:
2017011505


該当する結果の画像をクリックすると、そのゆるキャラの情報がポップアップします。ご存知「くまモン」でした。なお PC であればマウスオーバーでも表示されます:
2017011506


まだまだ学習量が充分ではなく、第一候補となることはまだ珍しいとか、(着ぐるみの写真ではなく)絵の場合には精度が落ちるとか、横から写した画像に弱いとか、背景画像に左右されることが多いとか、まだまだ問題はありますが、一応動くものが作れたと思ってます。

実際の用途としてはある程度いけるかな、と思ってます。もちろん精度高く検索できることが理想ですが、上記で書いたように「名前が分かれば色々調べる方法はあるんだけど、肝心の名前が出てこない」のを解決するツールとして考えると、検索結果の候補の中に含まれていれば、それはそれでオッケーかな、と。


なお、今回のサービスは Visual Recognition の中では現時点でベータ版の /v3/collections/ で始まる API を使って開発しています。今後の仕様変更などがあった場合にサービスがどうなるか何とも言えませんが、なるべく対応させていく予定です。合わせてもう少し学習データの量を増やして検索精度を上げられないか、がんばってみます。


このページのトップヘ