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

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

タグ:manholemap

業務やプライベートでウェブアプリを作る際に colorbox を使う機会が少なからずあります。jQuery に対応したモーダルダイアログの軽量プラグインで、メイン画面にオーバーラップするダイアログ画面を呼び出し、ダイアログを閉じるまではメイン画面が使えなくなります。HTML 的な言い方をすると、ボックス領域の表示/非表示を切り替えつつ、ここが表示されている間は他の要素にアクセスできなくさせたい場合などに便利です。

加えて、個人的によく Google MAPs API を使った地図アプリを作っています。他にも多くの地図 API はありますし、実際に使うこともありますが、ストリートビューなど他にはない機能もあって、マンホールマップを始め、多くのアプリで Google MAPs API を活用しています。

今回紹介するのはこの2つを組み合わせて使う方法、つまり colorbox のモーダルダイアログ内で Google MAPs の地図を表示する方法です。特に考慮することなく普通に(colorbox で表示する領域の中に Google MAPs の地図領域を定義しておくだけで)使えそうな気がしていたのですが、どうもこれらの初期化処理時における相性があまりよくないようで、ちょっとしたコツが必要だということがわかりました。

この「ちょっとしたコツ」の結論は
・colorbox のダイアログを表示して、
ダイアログの表示が完了した後で Google MAPs を初期化してダイアログ内に表示する
という順序で実現する必要がありそうでした。一般的には HTML ページの初期化時に Google MAPs を初期化することが多いと思うのですが、colorbox と組み合わせて使う場合は、その初期化タイミングをダイアログの表示後に(ダイアログの表示が完了したことを検知した上で動的に)行う必要がありそうでした。


以下は具体的な実現方法です。まず jQuery や colorbox、Google MAPs API の JavaScript や CSS を一通りロードします(Google MAPs API をロードする際に API KEY の取得と指定が必要です):
  :
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?key=(your api key)"></script>
<link href="/css/colorbox.css" rel="stylesheet"/>
<script src="/js/jquery.colorbox-min.js" type="text/javascript"></script>
  :

HTML 内に colorbox で表示するモーダルダイアログ部分(id="mapModal")を定義します。ここは初期状態では表示されていてはまずいので display:none のスタイル指定をしておきます。またモーダルダイアログ表示した際にこの id="map_canvas" のブロックの中で Google MAPs の地図を表示することになりますが、初期段階では何も定義しません:
  :
<div style="display:none">
  <div id="mapModal">
    <div id="map_canvas" style="width:100%; height:520px"></div>
  </div>
</div>
  :

ではこのブロックをモーダルダイアログ表示するための colorbox のアクションを作成します。以下の例では <span> で括られたエリア(id="span1")をクリックした時に colorbox のモーダルダイアログを 90% x 90% でインライン表示するようにしています。加えてこのモーダルダイアログが表示されきった直後に $('#map_canvas').modalMap() が実行されるように定義しています:
  :
<span href="#mapModal" id="span1">ここをクリック</span>

<script>
$(function(){
  $('#span1').colorbox({
    inline: true,
    transition: 'none',
    width: '90%',
    height: '90%',
    onComplete: function(){
      $('#map_canvas').modalMap();
    }
  });
});
</script>
  :

↑この時の <span> 要素に href 属性を付けて対象モーダルの id を指定するのが肝のようです。。

最後にこの modalMap() 関数を定義して、この中で動的に Google MAP を初期化して表示するまでのコードを記述します:
  :
<script>
$.fn.modalMap = function(){
  var latlng = new google.maps.LatLng( 35.690625, 139.699788 );
  var opt = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true
  };

  var map = new google.maps.Map( document.getElementById( 'map_canvas' ), opt );
  map.setCenter( latlng );

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
};
</script>
  :

これで <span> 部分をクリックすると colorbox のモーダルダイアログを出し、ダイアログ内で動的にGoogle MAP の地図を初期化&表示する、という一連のコードが完成です:
2019090801

  ↓

2019090802

(↑わかりにくいかもしれませんが、地図部分はモーダルダイアログ表示されています)



2019 年最初のブログ投稿に、普段感じる事が多いけどあまり触れていなかった点について書いてみようと思います。ちょっとだけマジメな話です。


拙作「マンホールマップ」は 2010 年からサービスの開発を始めて、ほぼ同時期からサービスを開始しています。色んな人のアイデアを参考にさせていただくことはありますが、基本的には私一人で開発を行い、管理を含めた運営を行っています。もう8年以上続けていることになります。今は当時と比べてもクラウドをはじめとする時代背景が大きく変化し、個人でウェブサービスを開発・管理・運営する環境が整っていると感じていますが、そういった業務で開発・運営するのは異なる部分について、一度まとめておこうと思いました。


【背景】
まずはいい意味での違いを。ここ数年のクラウド環境の充実、そして低価格化によって、個人がウェブサービスを運営しやすくなったと感じています。

後述もしますが、ウェブサービスを「作る」ことに関しては開発環境さえ整えればいい話ですが、それを公開して運営するにはドメインの取得に加え、インターネット上に公開された24時間稼働が可能なサーバー機を用意する必要があります。企業で運営する場合、専用サーバーや専用回線を調達する方法もありましたが、個人には(主にコスト面で)敷居の高いものでした。また以前から「ホスティングサービス」と呼ばれるサービスでインターネット上のサーバーを借りることはできましたが、技術的な制約も大きく、開発上のハードルが上がってしまうものでした。

この点において、世の中でクラウドが広まり、特に PaaS 環境が広まってきたことで、サーバー環境の準備や構築だけでなく、(標準で用意されているものを使うことで)ドメインや証明書の取得まで不要になる時代になったことを実感します。こうなると個人でもサービス/アプリケーションを開発できれば、その運用を開始するまでのハードルはぐんと低くなっていると感じます。


以上のように個人がウェブサービスの運営を開始するまでのハードルは低くなりましたが、一方で実際に運営する段になると業務で行う場合とは異なる点を意識する必要があることも実感するようになりました。そんな背景における違いを、実際に運営する中で気付いた範囲で言及してみようと思います。



【個人で開発・運営するのは業務で行う場合と何が違うのか?】
一言でいえば個人運営だと「全部自分でやる」点が違います。何を作るのか、どこまで作るのか、いつまでに作るのか、どんな画面にするのか、どんな実装で実現するのか、プログラミング言語は、データベースは、OS は、どこで動かすのか、ドメイン名/ホスト名は、コストはいくらまで出せるのか、問い合わせ対応は、フィードバック対応は、・・・ 決めるのも実行するのも自分一人です。

一方、業務で行う場合、もちろんその企業の規模とかにもよると思いますが、多くのケースで分業制が考えられます。開発部分ひとつ取っても、デザインと実装は担当分野が分かれるケースが多いですし、インフラの構築とアプリの開発は別チームというケースも少なくありません。が、個人だと分ける相手がいません。「UIデザインは苦手」とか言ってられないのです。

また開発後の運用やサポートも自分で行います。業務だと電話サポート窓口があったりしますが、普段は本業を持つ個人開発者がサポート業務に従事することはできません。サーバーが止まっていても気づける人がいない※のです。 となると「なるべくサポートが不要になるような設計」をはじめから意識して作る必要があります。マンホールマップの例だと不適切な画像を投稿する人がいたらどうするか?という問題がありました。ここは Twitter アカウントとの連携で不適切な画像を投稿しにくくする、という形にしました。要は投稿時には Twitter アカウントによるログインが必要で、不適切な画像を投稿すると Twitter 側にもバレる、というリスクを利用者に課したのです。そうすることで、そういった愉快犯的に不適切画像を投稿する人を少しでも減らそうという試みでした。幸いにしてサービス開始から悪質な投稿をする人はほとんど表れていません。ある程度の効果はあったのかもしれませんが、こういったサービス設計段階における考慮も必要になるのでした。

※ちなみに上述の「サーバーが止まっている場合も気づける人がいない」問題は Google Search Console のサーバーエラーをメールで通知する機能で解決できます。自分で解決する必要はないのですが、こういった世の中のツールを知っていたり、調べたりする能力も必要になってきます。


【ドメインの問題】
自分でサービスを作るだけならずっと以前から(自分の手元のPCに開発環境を用意すれば)できたことです。以前はいざ公開・運営するとなった場合に「どこで」公開するか、という問題がありました。何というホスト名(ドメイン名)で公開するか、という問題です。 試験的・限定的に公開するだけなら IP アドレスでも(特殊なポート番号でも)いいと思うのですが、公開するとなるとそうも言えません。

加えて SSL 証明書の問題もあります。最近は外部 API と連携する際の条件として https 通信が可能なことが求められることも珍しくなくなりました。ドメインを取得した上で SSL 証明書を取得し、https 通信を有効にすることが必須となることもあります。

もちろんオレオレ証明書でも NG ではないし、最近は SSL 証明書も安く取得できるようになってはいますが、ドメインの取得は無料というわけにはいきません。つまりいくばくかの運用コストが無視できなくなってしまいます(コストについて詳しくは後述します)。またその手続や設定を運用開始までに済ませて置かなければならないのだとすると(上述の「一人でやらなければならない」という条件も考慮して)運用開始までの負担が大きくなってしまうのでした。

ただ、この辺りも昨今のクラウド環境の、特に PaaS と呼ばれるサービスを利用することで、特に存在を意識しなくても使える DNS やドメイン名があったり、はじめから SSL が利用可能になっていたりするものもあります。こういう環境が広まっていくことは個人開発者としても大歓迎です。


【コストの問題】
クラウドはウェブサービスの運用を開始するまでの技術的なハードルを大幅に下げてくれることを上述しました。では難しいところはクラウドにおまかせする形で、クラウドベンダーの環境で公開することに問題はないのでしょうか?

現実問題としては「コスト」が問題となるケースがあると思っています。アプリケーションサーバー1台とデータベースサーバー1台での運用であれば、最悪1台の IaaS の中に同居させてしまう形にして、理論上はこの1台ぶん最低限のサーバーの月額コストだけで運用することができます(月 500 円程度から可能です)。

ただ実際には「最低限のサーバーの月額コスト」ではまかなえないケースが多くなると思っています。その最低限のサーバー1台に搭載されたメモリ量で動くのか? IaaS の中にデータベースを同居させたディスクの容量は足りるのか? 足りたとしてもデータのバックアップをどう考えるか? 上述のドメインに関わるコストも無視できません。  ・・いずれもクラウドサービスにコストをかけることで解決できることが多いのですが、そのコストは経費ではなく個人負担なのです。クラウドのデータベースって、冗長性とかバックアップとか考えなくていいのは確かに便利ですが、(安価な仮想サーバーほど)安くはないですよね。。それを個人で、しかも毎月負担できるのか、、という問題です。とはいえ万が一バックアップがないサーバーが死んでしまったら・・・と考えると、公開する以上は考慮しないといけない問題なわけで、、、


これも私の話で恐縮ですが、自作ウェブサービスのほとんどはクラウドで公開していますが、マンホールマップは 2019 年1月時点で自宅サーバー運用しています。一番に理由はコストで、上述の要素を考慮してクラウドサーバーを用意すると毎月コストが結構な額になってしまい、それなら自宅に安いサーバー(というかPC)を買ってなんとかしたほうが現実的、という判断に至ったのでした。


【で、結局・・・】
まとめると、こんな感じでしょうか:

- 昨今のクラウド環境の充実によって、開発したウェブサービスを公開して運用するのは安価かつ容易になった。
- 非機能要件を無視できる間はそれでもよいが、ある程度データが溜まってくると万が一の際のバックアップなどを無視できなくなる。
- その辺りまで考慮しはじめると「クラウドが安い」と言い切れなくなってくる。がんばって自宅ネットワーク内のサーバーを公開したほうが安上がりになるケースも。
- 自分一人で管理する前提でサービスレベルを考慮/設計する必要がある。
- 個人ウェブサービスは開発/運営するのは(一通り全てをある程度のレベルでこなさないといけない、という意味で)すごくいい勉強になる。



↑実は最後の一文を言いたくてこの長いブログエントリを書きました。業務経験としては個人開発や個人運用は評価しにくいのかもしれませんが、これを一人でこなせることも、一人でもこなせるような設計をしていることも、本当はもっと高く評価されてもいいんじゃないかなあ、、、と思っているのでした。

クラウド環境が広まったことで個人ウェブサービスを運用するハードルは確実に下がっています。この環境を活用して、色々な人がウェブサービス運営に興味を持ってもらえると嬉しいし、それは技術者としての(業務にも関わる)スキルアップに確実につながると思っています。

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


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

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


2018 最多投稿賞

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

今年も昨年を上回るレベルでの激しい1位争いの結果、昨年惜しくも2位だった 42ER03 様が今年1年間で 355 枚もの蓋画像を投稿いただき1位となりました!2016 年の王座に一年ぶりに返り咲きました。「ほぼ1日1枚」でした、ありがとうございます。 

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

ちなみに私自身は今年は4位でした。毎年少しずつ順位が下がっていたのですが、久しぶりに順位上昇でした。今年は出張が多かったからなあ・・・、しみじみ


2018 新人賞

今年マンホールマップに投稿された蓋の中で、もっともアクセス数の多かった蓋画像はこちらでした:

市区町村投稿者画像
千葉県流山市minamu4545



千葉県流山市「流山おおたかの森」駅にも象徴される TX(つくばエクスプレス)とオオタカ、そしてツツジがデザインされた新しいデザインの蓋です。私個人も大学時代に流山市に住んでいたのですが、当時は TX がまだ走ってなくて、流山の新しい風景がデザインされた蓋といえます。2018年1月にマンホールマップ投稿いただいたこの蓋写真が1年間を通じてもっとも多くのアクセス回数を記録する新人蓋となりました。minamu4545 さま、2年連続の新人賞おめでとうございます!


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

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


まずは 10 ~ 4 位です。といいたい所ですが、僅差の11位の蓋をどうしても紹介したく、独断で今年はトップ11を紹介させていただきます。というわけで第11位!

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


↑マンホーラーの枠を超えて話題になった静岡県静岡市の「ちびまる子ちゃんマンホール」(morimo_t 様提供)。さくらももこ先生がこのマンホールのためにデザインし、残念ながらその設置の直前に亡くなられたことで設置の中止も検討されたというものです。今月からマンホールカードの配布も始まり、9月にデビュー(=設置)したとは思えないアクセス数が記録された一枚でした。改めて、謹んでさくらももこ先生のご冥福をお祈り申し上げると共に、素敵なマンホールデザインを残していただいたことに感謝申し上げます。


では改めてトップ10を。第9位が同数で2点あったので、第9位!

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


↑同着の9位、1つ目は昨年2位の北海道岩見沢市(旧栗沢町)、yanapong 様提供の「リスのクリちゃん」マンホールでした。昨年まで3年連続トップ3という快挙を達成した超ロングセラー蓋です。今年9位になったことで、4年連続トップ10入りという、これも前例のない大記録を打ち立てました。


もう1つの第9位!

順位昨年順位市区町村投稿者画像
9 - 埼玉県坂戸市minamu4545


↑2つ目の同着9位は埼玉県坂戸市、minamu4545 様提供の「さかつるちゃん」マンホールでした。さかつるちゃんは坂戸鶴ヶ島水道企業団のマスコットキャラクターで「みんなのところにおいしい水を運ぶ水の天使」なのだそうです。このマンホールもマンホールカード化されています。


第8位!

順位昨年順位市区町村投稿者画像
8 - 神奈川県愛甲郡愛川町minamu4545


↑8位はこれも minamu4545 様投稿作品、神奈川県愛川町の、中津川、鮎、ツツジ、そしてカエデが描かれたデザイン蓋。デザイン的にもコントラストが美しい1枚です。なおこのマンホールもマンホールカード化されています。


そして6位も同着でした。1つ目の第6位!

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


なんとこれも minamu4545 様提供、静岡県熱海市の「金色夜叉」貫一・お宮の有名なシーンと、なぜかバックに上がる花火をまとめてデザインした一枚でした。今だとDV事案になる可能性もあるシーンですが、そんな時代背景的な要素も含めて表現されています。なおこれもマンホールカード化されています。マンホールカード勢、強いな・・・・


もう1つの第6位!


順位昨年順位市区町村投稿者画像
6 - 大阪府吹田市dotnsf


↑もう1つの6位は、、、ごめんなさい。僕の投稿作品でした。大阪市吹田市の吹田スタジアム近くに設置された suitable city マンホールの1つで、ここを本拠地とする GAMBA 大阪のマスコット「ガンバボーイ」と、吹田市のイメージキャラクター「すいたん」がデザインされています。これもマンホールカード対象です。

吹田市はこの蓋ともう2つの観光名所をテーマにしたデザインマンホール3種を今年公開しました。その中の1つがこれなのですが、実は結構探すのが難しい場所にありました。ネタバレありで詳しく知りたい方はこちらも参照ください:
吹田市のデザインマンホール3種を探索(ネタバレあり)


第5位!

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


↑5位は静岡県沼津市、富士山と愛鷹山をバックに松とハマユウが描かれたマンホールカード蓋です。なおこれも minamu4545 さんの提供作品です。この作品は 2018 年9月に提供いただいたもので、今回ランキング入りした蓋の中では比較的短期間で多くのアクセス数を稼いだことになります。



第4位!

順位昨年順位市区町村投稿者画像
4 - 東京都港区dotnsf


↑4位は、、、ごめんなさい。またも僕の投稿作品でした。2年前になぜか1位になった東京都港区の知り合いの家の近くで撮影したエバタインバート蓋。なぜここにアクセスが集まるのか、2年経っても全くわかりません。 (^^;


2018 年のアクセス数ランキング、ここまで minamu4545 様の提供のデザイン蓋が席巻しています。マンホールカードの広まりもあって、カラフルなデザイン蓋がマンホールマップでも人気を博している様子がわかりますね。


この流れはベスト3にも続くのか? ドキドキの第3位!

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


↑3位は昨年1位と新人賞を同時受賞した minamu4545 様投稿の静岡県静岡市「かけつけ消防3部隊カワセミーズ」の消火栓蓋でした。2年連続のベスト3入り、つまり2年間に渡って人気が継続した蓋ということになります。

実はここまでの結果を見てもわかるのですが、今年のアクセスランキングは新人蓋(今年投稿された蓋)が上位を席巻しています。そんな人気の入れ替わりの激しい中でのこの結果は素晴らしいです。



第2位!

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


↑2位は静岡県島田市の大井川蓮台越をテーマにデザインしたマンホールでした。この作品も minamu4545 様に提供いただいた作品です。

「箱根八里は馬でも越すが、越すに越されぬ大井川」とも詠まれた難所・大井川の川越えの様子が富士山を背景にしてデザインされています。ドリフやダチョウ倶楽部だとこの後の展開が容易に想像できますね(笑)。


では 2018 年マンホールマップ年間アクセス数ランキング・第1位となった MVM(Most Variable Manhole) は!?

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


順位昨年順位市区町村投稿者画像
1 - 千葉県流山市minamu4545


↑1位 MVM は新人賞にも輝いた minamu4545 様提供の千葉県流山市、「流山おおたかの森」マンホールでした。2年連続の新人賞&MVM 同時受賞となりました。おめでとうございます。




ここ数年はマンホールカードの影響もあって、新しいデザイン蓋の人気が高いようです。今年のランキングにもその結果が表れています。そしてそれ故に、長い期間人気を維持し続けるマンホールがいかに貴重で素晴らしいかを改めて考えさせられる結果になりました。



そして、今年のランキングで無視できないのは minamu4545 さんの存在です。投稿数ランキングでは惜しくも2位でしたが、新人賞とトップ10内の7つ、そしてトップ3の全てを独占する形になりました。もちろんここまでの独占率を記録したことは過去にもありません。 現在のマンホールマップ人気蓋の多くをプロデュースしていただいております。本当に頭が下がります。


最後に開発者&運用者としての自分から。今年はマンホールマップサーバーが例年になく不安定であったと自覚しています。実はこのブログエントリを書く直前の 2018/12/21 にもサーバーダウンがありました。色々な事情(その多くはコストですが)からパブリッククラウドではなく自宅サーバーで運用しております。OS が落ちなければリモートメンテナンスできる環境は整えてあるのですが、今年はそのリモートメンテができなくなるケースが何度かありました。サーバー機、といっても普通のノートPCですが、の老朽化からディスクメディアが壊れ、冷却ファンが壊れ、これまでもだましだまし使ってきましたが、今年はその影響をユーザーの皆さんにかけてしまうことが多かったと反省しています。年末に新しい機材へ入れ替えを行い、少し安定することを期待していますが、そろそろパブリッククラウドへの本格的な移行も検討する時期かもしれない、と思い始めていたりします。 

一方で、今回の「新しい機材への入れ替え」は比較的スムーズに進んだと自負しております。自分のように自宅ネットワークを構築してサービスを運用する想定での工夫をしてきたつもりですが、今回のトラブル対応の中でやっとその成果を見せることができました(苦笑)。この辺りについては実績もできたことだし、近い内にまたブログで紹介できればと思っています。



では、来年以降もマンホールマップを宜しくお願いします。



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


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


このページのトップヘ