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

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

タグ:manholemap

マンホールマップでも使っている、 jqPuzzle を使って任意画像をスライドパズル化する方法を紹介します。

このスライドパズルは「15パズル」とも呼ばれていて、僕くらいのオッサンは↓こんなのがおもちゃ売り場で売られているのをよく目にしました。「懐かしいゲーム」の1つです:
2018083000



この jqPuzzle を使ったスライドパズル機能はマンホールマップ内の全てのマンホール画像で遊べます。例えばこのマンホール画像ページの「スライドゲームに移動」をクリックすると:
2018083001


紹介されているマンホール画像がこんなスライドパズルに早変わり:
2018083002


"shuffle" ボタンをクリックするとランダムにシャッフルされます。16 が空いた状態でパズルスタートです:
2018083003


空いたピースの上下左右にあるピースをクリックすると、そのピースが空いた部分にスライドして移動します。これを繰り返して 1 から 15 までが正しい位置にくる完成を目指す、というものです。個人的な印象としては1、2、3までは簡単だけど、4を揃える所あたりからコツが必要になってくると思ってます:
2018083004


こんな楽しい機能を提供する jqPuzzle は jQuery を併用して、画像にスライドパズルのインターフェースを追加してくれる CSS および JavaScript のセットです。なお、jqPuzzle が対応する jQuery は 1.x までの模様なので、この点のみ注意が必要です:
2018083001


jqPuzzle を使うには公式サイトから zip ファイルをダウンロード&展開して使います(CDN は見当たりませんでした)。なお jqPuzzle の提供ライセンスは 以下の通り、GPL と MIT のデュアルライセンス、だそうです:
2018083002


利用にあたっては jQuery 1.x をロードした後に CSS と JavaScript をロードします。これで準備完了(以下の例では jQuery v1.6.2 を指定しています。また jqPuzzle の両ファイルはこれを記述する HTML と同じ階層に存在しているものとします):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css"/>
<script type="text/javascript" src="jquery.jqpuzzle.packed.js"></script>

一番簡単な利用方法は <img> タグに jqPuzzle クラスを指定する方法だと思います。実はこれだけでその画像は 4x4 のスライドパズル化されて表示されます:
<img src="sample.jpg" class="jqPuzzle"/>

2018083005


ちなみに "Original" ボタンをクリックすると完成形が、"Numbers" をクリックすると各ピースの数字の表示/非表示が切り替わります。数字表記がないと難易度は一気に上がります。


カスタマイズの要素を加えることも可能です。例えば以下の例では 4x4 で 16 番目の駒を抜くことは変えずに、ボタンの文字を日本語化し、最初からシャッフル済みになるようにしています(というわけでシャッフルボタンも不要なので非表示にしました):
  :
<script type="text/javascript">
var settings = {
  rows: 4,
  cols: 4,
  hole: 16,
  shuffle: true,
  numbers: true,
  language: 'ja',
  control: {
    shufflePieces: false,
    confirmShuffle: true,
    toggleOriginal: true,
    toggleNumbers: true,
    counter: true,
    timer: true,
    pauseTimer: true
  },
  success: {
    fadeOriginal: false,
    callback: undefined,
    callbackTimeout: 300
  },
  animation: {
    shuffleRounds: 3,
    shuffleSpeed: 800,
    slidingSpeed: 200,
    fadeOriginalSpeed: 600
  },
  style: {
    gridSize: 2,
    overlap: true,
    backgroundOpacity: 0.1
  }
};
var texts = {
  shuffleLabel: 'シャッフル',
  toggleOriginalLabel: '元画像',
  toggleNumbersLabel: '数値表示/非表示',
  confirmShuffleMessage: 'シャッフルしてよろしいですか?',
  movesLabel: '回',
  secondsLabel: '秒'
};

$(function(){
  var t = $('img.jqPuzzle');
  t.jqPuzzle( settings, texts );
});
</script>
 :
2018083006


ちょっとした息抜き機能を追加するのに便利なライブラリです。


大阪府吹田市が市内の観光名所をテーマにしたデザインマンホール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(吹田)という部分が強調されていて、ダジャレマンホールになっています。こんなオチを隠し含めるあたりは大阪の意地なんでしょうかね。。。


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


拙作マンホールマップの隠し(?)機能でも使っている手法の1つを紹介します。

マンホールマップで特定のマンホール画像を表示すると、このような画面になります(PC版の場合):

http://manholemap.juge.me/page.jsp?id=1125001 の例
2018030401


http://manholemap.juge.me/page.jsp?id=157009 の例
2018030402


注目していただきたいのは地図部分ではなくマンホール画像部分です。画像が色の付いた枠(上は青枠、下は赤枠)で囲われていることにお気づきでしょうか?

これ、実は画像全体の色味を表しています。つまり上の画像は「全体的に青っぽい」、下の画像は「全体的に赤っぽい」ことを自動判断して表示しているのです。なんとなく合ってます(よね)。実際のアプリケーションでは赤、青、緑、黄、紫、そしてマジェンタの6種類のいずれかと判断しています。

これをどうやって実現しているか、というのが今回のネタです。


マンホールマップは Java で開発していて、特にこの部分は Java の拡張クラスである ImageIO (javax.imageio.ImageIO)を使っています。具体的にはこのようなコードです:
	    :
  public String GetImageColor( byte[] img ){
    String r = null;
      :

    if( img != null ){
      BufferedImage image = null;

      try{
        InputStream is = new ByteArrayInputStream( img );
        image = ImageIO.read( is );
      }catch( IOException e ){
      }

      if( image != null ){
        //. 画像の大きさをチェック
        int w = image.getWidth();
        int h = image.getHeight();

        //. 1ピクセルずつ色を取り出す
        for( int x = 0; x < w; x ++ ){
          for( int y = 0; y < h; y ++ ){
            //. 特定ピクセルの RGB 情報を取り出す
            int rgb = image.getRGB( x, y );

              :						
          }
        }
      }else{
      }
    }

    return r;
  }

    :

この例では画像バイナリのバイト配列( byte[] img )を引数として受け取る GetImageColor() 関数を定義しています。その中でまず ImageIO.read を使って、画像の BufferedImage を取り出します。

正しく取り出すことができたら、画像の幅と高さをピクセル単位で取得し、2重の for ループ内で1ピクセルずつ BufferedImage.getRGB 関数を実行し、RGB 値を取り出す、という処理を実行しています。これで1ピクセル毎の RGB 値を取り出すことができます。

あとはこの結果から、赤、青、緑、黄、紫、そしてマジェンタのどの色が多く使われているか、、、を調べるわけですが、そのあたりの細かなアルゴリズムは秘密(というか面倒なので省略)、ということで(苦笑)。


ちなみに白と黒が含まれていない理由は「マンホールの色が黒(または白)」というのは「普通過ぎてつまらないから、黒と白を除いて近い色を探す」という工夫をしているからでした。


この方法を応用することで、色んな画像の色情報(RGB値)を1ピクセル毎に取り出して判断することができるようになります。


2018 年最初のブログエントリはちとマジメなマンホールマップネタにします。

2010 年夏のリリースから7年半近くもの間に多くのマンホールファンの皆様に愛され、成長を続けてきたマンホールマップですが、リリース当初の小規模運営時には想定していなかった問題にも多く直面してきました(コストとか、容量とか、プラットフォームの仕様変更とか、・・・)。そしてその都度問題を先送り解決しながら成長してきました。

そんな問題の中で、未解決だったことの1つが「利用規約」および「プライバシーポリシー」でした。端的な言い方をすると「マンホールマップにアップロードした画像の著作権はどうなるのか?」という問題です。サービス開始当初はいわば「一部のマニア向けサービス」であり、当時存在していなかった位置情報付きマンホール情報共有サービスとしての物珍しさから、細かいことを気にする人も少なかったように思えます(僕が知らなかっただけかもしれませんが)。

時は流れ、ユーザーや業界の努力、そして街歩き等他の趣味と合わせる形での認知度もあがり、マンホール探しそのものが趣味として認知されつつあるようになってきました。同時にマニアの域を超えて、広く一般の人がマンホールに興味を持つようになり、マンホールマップは(色々なこだわりは残しつつも)マニア向けではないサービスとしての変革が求められるようになってきました。

さて利用規約およびプライバシーポリシーの問題です。実はこれまでマンホールマップには明確な利用規約およびプライバシーポリシーの明示がありませんでした。昨年だけでこの点での質問を何度かいただくようになり、そろそろサービス提供側としての対応が求められていることを認識しました。という背景もあり、2018 年最初のアップデートに併せて遅ればせながらマンホールマップの利用規約およびプライバシーポリシーを用意する運びとなりました:
利用規約
プライバシーポリシー


PC版ページ(http://manholemap.juge.me/)ではトップページの一番下に、
2018010401


モバイル向けページ(http://manholemap.juge.me/m.jsp)ではトップページのメニューの最後に、それぞれリンクが付いています:
2018010402


これら2つのページの内容は利用するウェブブラウザの言語設定によって日本語または英語で表示されるようになっています。以下の補足については日本語をベースとしています。

以下は(2018/01/04 時点での)特に利用規約に関する内容を補足したものです。上記2ページを読んだだけだと「結局アップロードした画像の著作権はどうなってるの?」という問題の答がわかりにくいと思っているので、その点を解説しています。

利用規約内には以下のようにかかれています(2018/01/04):
ユーザーが投稿した写真(画像)の著作権について

Juge.Me およびマンホールマップでは、ユーザーが本サービスに、またはこれを通じて投稿するいかなるユーザーコンテンツについても、その所有権を主張しません。 ただしユーザーは、ユーザーが本サービスに、またはこれを通じて投稿するユーザーコンテンツを、Juge.Me およびマンホールマップが http://manholemap.juge.me/privacy.jsp に掲載されている本サービスのプライバシーポリシーに従って利用する、非独占的かつ無料、譲渡可能かつ再許諾権付きの世界的使用許諾を付与するものとします。 またユーザーが投稿したマンホールマップ内の画像はマンホールマップのページ単位で第三者がシェア/共有することについては同意するものとします。

マンホールマップ側ではその著作権を「主張しない」ことを明言しています。つまり写真の著作権は投稿者にあり続けます。著作権についてはこの点を明確にしました。

ただし以下の2点に注意してください:
(1) ただしユーザーは、ユーザーが本サービスに、またはこれを通じて投稿するユーザーコンテンツを、Juge.Me およびマンホールマップが http://manholemap.juge.me/privacy.jsp に掲載されている本サービスのプライバシーポリシーに従って利用する、非独占的かつ無料、譲渡可能かつ再許諾権付きの世界的使用許諾を付与するものとします。

(2) またユーザーが投稿したマンホールマップ内の画像はマンホールマップのページ単位で第三者がシェア/共有することについては同意するものとします。

(1) はユーザー(投稿者)が投稿する画像コンテンツについて、マンホールマップ側に対して、
  • 「非独占的に(マンホールマップだけのものではなく、他の SNS 等に投稿することができる)」
  • 「無料(その際、投稿者に著作権料は支払われない)」
  • 「譲渡可能かつ再許諾権付き(マンホールマップ側の判断で他のメディアやサービスに画像を提供することができる)」
という条件を付与する、という意図を含んでいます。

実際のところ、これまでもマンホールマップ内のコンテンツは誰でも利用可能な API によってアクセスすることができ、その API によって多くの関連サービスが生まれてきていました。加えてマンホールマップでは画像の全体的な色に近い色で画像に枠を付けて表示するなどの加工を行った上で表示しています。それらを明文化した形になります。

また、(2) は画像としての勝手な再利用は制限していますが、マンホールマップのページ(URL)単位で SNS にシェアしたり、ブログなどで再利用することについては第三者が無許可で自由に使うことができることを謳っています。


基本的にはこれまで通りの機能を後追いする利用規約(とプライバシーポリシー)としているつもりですが、どうしてもこの内容での公開に不安を感じられる場合は相談いただくか、あるいはお手数ですが問題が解決するまでの間、いったん削除していただきたいです。




この記事の続きです:
2017 マンホールマップ統計


2017年にマンホールマップでもっとも人気のあったマンホール蓋をベスト10形式で紹介します。また今年新たに投稿された蓋の中で最も人気があった「新人賞」と、今年最も多くの蓋画像を投稿いただいた方「最多投稿賞」を紹介します。

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


2017 最多投稿賞

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

今年も昨年を上回るレベルでの激しい1位争いの結果、昨年惜しくも2位だった minamu4545 様が今年1年間で 403 枚もの蓋画像を投稿いただき1位となりました! 

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

ちなみに私自身は今年は7位でした。毎年少しずつ順位が下がっているような・・・


2017 新人賞

この部門は 42ER03 様が過去2年連続受賞している部門です。今年マンホールマップに投稿された蓋の中で、もっともアクセス数の多かった蓋画像はこちらでした:

市区町村投稿者画像
静岡県静岡市minamu4545


2017 最多投稿賞にも輝いた minamu4545 様に投稿いただいた静岡市の消防キャラクター「かけつけ消防3部隊カワセミーズ」の消火栓蓋でした。この画像は 2017/03/11 に投稿いただき、非常に多くのアクセスが記録された画像となりました。昨年に続き、今年も最多投稿賞と新人賞の同時受賞が実現することとなりました。


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

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


まずは 10 ~ 4 位です。実は9位が同数だったので、9位が2つあります:

順位昨年順位市区町村投稿者画像
9 - 東京都三鷹市kakuyodo

↑9位はマンホールマップでも常に人気のある蓋画像の1つでもある、東京都三鷹市のジブリ博物館マンホールでした。必ずしも交通の便の良くない場所にあるという点では人気面で不利になりがちなのですが、2014年2位&2015 年8位からのトップ10復活です。



順位昨年順位市区町村投稿者画像
9 - アゼルバイジャン共和国42ER03

↑もう1つの9位はアゼルバイジャン共和国の首都バクーの蓋です。なんと書いてあるのでしょう(というか何語でしょう)? 海外の蓋はデザイン的に味気ないものが多いのですが、この紋章っぽいデザインはカッコいいですね。



順位昨年順位市区町村投稿者画像
88大阪府吹田市mnakam2003

↑8位はなんと昨年も8位だった大阪府吹田市のガンバ大阪マンホール。吹田サッカースタジアム周辺にあるこのデザインは、吹田市のもう一つのデザインである「太陽の塔」マンホールと並ぶ名物マンホールとなっています(おそらく)。


順位昨年順位市区町村投稿者画像
7 - 愛知県岡崎市morimo_t

↑7位は愛知県岡崎市の消火栓蓋。この年間アクセスランキングは、たまにこれといった特徴のない蓋が上位に来ることがあって、コメントするのが難しかったりするのですが、今年はまさにこの蓋がそうでした。なんでアクセスが多かったんだろ・・・


順位昨年順位市区町村投稿者画像
6 - 埼玉県鴻巣市TMW_papa

↑6位は昔から雛人形製作で有名な埼玉県鴻巣市のかわいくて綺麗なひな祭り蓋でした。中央の水色は荒川、そして荒川にかかる御成橋と、サクラがデザインされています。個人的には人形のシュールな表情が好きですw



順位昨年順位市区町村投稿者画像
5 - 東京都渋谷区dotnsf

↑5位、出た!僕が投稿した東京都渋谷区ハチ公横にあるハチ公マンホールです。今日の時点ではマンホールマップ内の「ナイスマンホ」数で第2位でもある人気蓋です。常に人混みとなる場所に存在しているという意味で、なかなかきれいな状態での撮影が難しい蓋でもあります。



順位昨年順位市区町村投稿者画像
42茨城県つくば市kenitirokikuti

↑4位は昨年の2位でもある茨城県つくば市のスペースシャトルマンホール。研究学園都市っぽい近代さと、背景の筑波山、そして謎の土星(?)がデザインされた人気蓋の1つです。


ここまでの結果を見ると、例年と異なり「いわゆる人気蓋がアクセス数上位にきている」という印象です。実はマンホールマップ年間アクセス数ランキングでは珍しい状況だったりします。



ではランキングトップ3の発表です。

第3位

順位昨年順位市区町村投稿者画像
310石川県河北郡keymoyaking

↑マンホールマップの通算ナイスマンホ数第一位の座をずっと守っている石川県河北郡、keymoyaking 様提供の「かもめマンホール」がついに年間アクセスランキングのトップ3に入りました。



第2位

順位昨年順位市区町村投稿者画像
23北海道岩見沢市yanapong

北海道岩見沢市(旧栗沢町)、yanapong 様提供の「リスのクリちゃん」マンホールでした。なんと3年連続トップ3という快挙を達成しました!3年に渡ってマンホールマップ内では人気を保持し続けているという驚異的な蓋です。

この蓋の設置された旧栗沢町は岩見沢市との統合でなくなってしまいました。つまりこのデザインの蓋は新たに設置される可能性がないという意味でも貴重な、そして息の長い人気を続けている蓋だったりします。


昨年に続いて、上位にカラー蓋が目立つ2017年ランキングとなりました。昨年から配布が始まったマンホールカードが一般の人達にも浸透してきている(はず!)のだと思うと嬉しいです。

そんな今年の栄えある MVM は果たして!? 去年は僕が、しかも超地味蓋が何故かコンスタントなアクセスを集めて受賞して大顰蹙でしたが、今年のグランプリの行方はっ!?



第1位

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

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

静岡県静岡市、新人賞にも登場した minamu4545 様投稿の「かけつけ消防3部隊カワセミーズ」の消火栓蓋が 2017 年で最もアクセス数の多かった蓋となりました。そしてこのランキングを開始して初の3冠達成となりました(投稿数&新人賞&年間総合ランキング1位)。minamu4545 様、改めて本当におめでとうございます!!

ちなみにこの「カワセミーズ蓋」のアクセス傾向を見ると、このページの次に参照している人が多く、
http://manholemap.juge.me/page.jsp?id=642521159450672608


↑静岡県静岡市、「一富士二鷹三なすび」蓋

また「カワセミーズ蓋」に続いて、このページを見ている人が多い、ということが分かりました:
http://manholemap.juge.me/page.jsp?id=8217825491721603576


↑静岡県浜松市、「出世大名 家康くん」蓋

静岡旅行の際にマップ画面を参照している人が多いんでしょうかね。。。





 

このページのトップヘ