Googleマップのマーカーデータ作成ツールを組んでみた

Google Mapsにマーカーを複数表示するためには、マーカーを作るに必要な座標やタイトルなんかの情報をまとまったデータにする必要がある訳ですよ。
別ファイルに保存するならXMLとかKMLあたりが主流だと思うんだけど、そのデータを作るのが面倒くさかったのでツールを組んでみた次第。


マーキング途中の山手線駅

IEには対応してません。Firefox, Chrome, Safari, Operaで動くと思います。
検索してタイトル記入してSavePoint押すと保存。
保存したマーカーはsessionStorageに蓄積するのでリロードしただけでは消えません。
Download押すと右側にあるセレクトメニューの形式でダウンロード。

Firefox3.6以上の場合はFile APIによりドラッグ&ドロップでファイルの読み込みができます。
今のところ対応はXMLのみで、出力するXMLと同じ書式であればOK。

< ?xml version="1.0" encoding="UTF-8"?>
<marker name="東京" lat="35.681382" lng="139.766084" zoom="15">
<description>< !&#91;CDATA&#91;&#93;&#93;></description>
</marker>
<markers>
<marker name="有楽町" lat="35.675069" lng="139.763328" zoom="16">
<description>< !&#91;CDATA&#91;&#93;&#93;></description>
</marker>
</markers>

テスト用の山手線駅.xml
“Googleマップのマーカーデータ作成ツールを組んでみた” の続きを読む

[HTML5+CSS3] 第二回コーディングコンテスト に参加してました

締切後のソース公開OKらしいんで晒しておきます。

応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。
連休中のいい暇つぶしになりました。
イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は4日くらい。
例によってMooToolsをしこたま多用してます。

応募用デザイン

完成したのはこれ

ボタンにはCSS3のtransitionとグラデーションをフル活用してます。
このプロパティ面白いんだけど手打ちは地獄を見れるぜ…!
transition.cssのカオスさは必見かもしれない。

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。
“[HTML5+CSS3] 第二回コーディングコンテスト に参加してました” の続きを読む

[MooTools] 診断テスト作成スクリプト Diagnosizm

質問に対し、YESまたはNOで答える1問2答形式の簡易診断テストを自動生成するスクリプト。
問題と診断結果はJSONファイルに保存するのでCGI使えない鯖でも設置できます。

diagnosizm

新しく書き直したものはこちら▼
[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた

“[MooTools] 診断テスト作成スクリプト Diagnosizm” の続きを読む

[MooTools] テキストや画像のコピー禁止処理

Webサイト上にあるコンテンツのコピーを出来なくさせるプラグインを書いてみた。
Ajaxと併用するといい感じ。

ロジックは以下:

  1. 透過画像をbody全体に被せる(オプション:cover)
  2. oncopy を return false;
  3. Ctrl+AとCtrl+Cを無効にする
  4. B:前に戻る N:次に進む(オプション:move)

主な弱点と対策:

  • メニューから選ぶ「すべて選択」「コピー」
    →メニューやステータスバーを消した別窓に表示
  • ファイルへの直アクセス
    →アクセス制限、データベースの使用
  • ソース表示
    この記事この記事のようにデータベースやデータファイルからXHRでコンテンツを得る
    →jsファイルの難読化

window.openで表示

普通に表示

いずれも開発者ツールには無力です。
Ajax中心でいろいろ考えてみたけど、やっぱり画像にしたりFlash使うのが最強なのかな。
HTML5環境であればCanvasを使用するのがいいかもしれない。

“[MooTools] テキストや画像のコピー禁止処理” の続きを読む

[GoogleMaps] グーグルマップとストリートビューを双方向連動表示させる

久しぶりにGoogleマップ弄ったらいろいろと変わっていたので遊びついでに作ってみた。
Ajaxローダーを利用して導入しやすく作ってみたので是非お試しあれ!

このスクリプトは、Googleマップとストリートビューを同時に表示した上で、移動した時の表示を連動させるものです。

  • GooleMapsで中央に表示している地点がストリートビューに対応している場合、ストリートビューを表示
  • Googleマップでマーカーを移動したらストリートビューも移動させる
  • ストリートビューで移動したらマップのポイント(中心)も移動させる
  • ストリートビューで表示している場所の住所表示
  • ストリートビューに未対応の場合エラーを表示する
  • 3Dコントローラーの利用

GoogleMapsとStreetViewの双方向連動表示

DEMOはこちら

使用上の注意

  • 光のような高速回線環境でないと表示がもたつきます
  • ローカル環境(サーバーではない)ではクリック移動時のストリートビューが機能しません
  • ストリートビューを表示する要素は、直接縦横のサイズを指定しないと横幅が100%になります
  • MITライセンスです

“[GoogleMaps] グーグルマップとストリートビューを双方向連動表示させる” の続きを読む

[MooTools] SpriteNavigation Plugin

MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。

spritenavigation plugin

元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。

DEMOはこちら

Image

全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。

navigation

Download(psd file):

“SpriteNavigation Demo Base” をダウンロード nav.zip – 612 回のダウンロード – 41 KB

Creative Commons License

“[MooTools] SpriteNavigation Plugin” の続きを読む

[MooTools Tutorial] MooTools用プラグインの作り方

このエントリーはMooToolsチュートリアル特別編で、MooTools用プラグインの作成手順をステップバイステップで晒しています。
解説ソースの元にしているのはmooContreGalleryですが、
チュートリアルに使っているソースは実際配布しているものと仕様が異なります。

初歩的な説明はかっ飛ばしているので、詳しい解説については公式のドキュメントとか高橋文樹さんの日本語訳ドキュメントなどを参考にどうぞ。

プラグインを作るにあたっての前提と必要なファイルの用意

mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを実装するプラグインです。
元々「これどうやって作るの?」という質問に答えるために作ったものですが、結構いい感じに出来たので許可を頂いた上で公開するに至りました。
そういうわけなのでこのチュートリアルは質問に対する回答でもあります。

HTMLソースは本家とだいたい同じという前提ですが、すべてをスクリプト側で補うようには作っていないので
利用にあたってはCSSやソースにいくつか決まりごとがあります。

  • リスト要素(LI)の中に画像や説明が入っているとする。
  • リスト要素全体にクリックイベントを付与するので、cursor:pointerなどでクリック出来る事を示しておく。
  • サムネイルを入れている要素の背景にローディング画像を上下中央に設定しておく。
  • Fx.Scrollでスクロールさせる場合は下方向に余裕がないと途中でつっかえてしまうので、
    スタイルシートでpadding-bottom:600pxなどしておく。

MooToolsでは配布しやすくするためにClassを使って作るのが一般的。
プラグイン化するにあたって考えた仕様は次の通りです。

  • ギャラリーの主要な要素を別のタグに変更できるようにする
  • 要素を得る時に使うIDやクラス名は変更できるようにする
  • 画像ファイル名に含まれた任意の文字列でサムネイル(_s)と拡大画像(_b)を入れ替える

プラグインは任意で設定変更出来なきゃ意味がない。ってことで、これらはオプションで実現させました。

XHTMLファイルと画像、MooTools Core、Moreを用意。
Moreでは、画像読み込みをするのでAssets、開いたときにスクロールさせるのでScroll、説明をスライドさせるのでSlideが必要です。
(…と結論を書いてるけどMoreは作りながらリストアップしていく事が多い)

XHTMLソースの例:

<ul id="gallery"><!--ID指定するギャラリー-->
	<li><!--ギャラリーの子要素(自動取得)-->
		<a class="thumb" href="images/cat1.jpg"><img title="cat1" src="images/cat1_s.jpg" alt="cat1" width="100" height="68" />
		<!--サムネイル画像とそれを入れる要素。クラス名必須-->
		</a>
		<div class="info"><!--スライドされる説明要素。クラス名必須--></div>
	</li>
</ul>

noscript対策で拡大画像にリンクする場合は上記ソースのようにサムネイルを入れる要素がaタグになります。
サンプルでは上2つだけこのソースです。

続きから口調が投げやりなふいんきになります。

“[MooTools Tutorial] MooTools用プラグインの作り方” の続きを読む

[MooTools Tutorial] ページのコンテンツをスライドさせて切り替える

コンテンツを全部横並びの帯状に配置して、ボタンクリックで水平方向にスライド表示させるチュートリアルです。
中身が少なくて写真で誤魔化さざるを得ないようなサイトにもってこいなアニメーション。
Coreだけで作れるのでお手軽だと思います。

View DEMO

View DEMO

Coreクラスのダウンロード方法などは省略しているので、初回のMooToolsのCoreとMoreについてをご覧ください。
なお、Step1~Step3も同じ内容となっています。

“[MooTools Tutorial] ページのコンテンツをスライドさせて切り替える” の続きを読む

[MooTools] mooZoomGallery Plugin

mooZoomGalleryはサムネイル画像から拡大画像への表示を、画像が並んでいるエリア内で行うMooTools用ギャラリープラグインです。
LightBoxのようにレイヤーを被せて表示するのではなく、他のサムネイルを非表示にする事で画像を表示する場所を確保します。
……なんかこの動きどこかで見たような気がしなくもないですが、
このプラグインは全て同じサイズのサムネイル画像を並べたレイアウトに特化しています。

View DEMO
View Demo

“[MooTools] mooZoomGallery Plugin” の続きを読む

[MooTools] mooContreGallery Plugin

mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを貴方のサイトに実装するプラグインです。
本家サイトの動きをClass化+最新バージョンに対応させつつ再現したものですが、
オプションを変更する事によってエフェクトをお好みにアレンジすることが出来ます。


moocontregallery demo

View Demo

当プラグインの公開についてはcontreforme sàrlの中の人に許可を頂きました。
This class original source created from contreforme sàrl. Thank you!

また、このプラグインは「これどうやって作るの?」という質問がきっかけで出来たものです。
jQueryではやる気が出ず、MooToolsでの回答になりましたが(笑)質問を送ってくれたH氏にも感謝!
チュートリアル記事はこちら »

“[MooTools] mooContreGallery Plugin” の続きを読む

[MooTools Tutorial]背景画像を複数読み込んでクロスフェードで切り替える

MoreのAssetsクラスを使うチュートリアル後編です。
前編で背景画像を1枚Assetsクラスで読み込むソースを書きましたが、
今度は背景画像を3枚読み込んでからクロスフェードで切り替えるものに変更します。

View DEMO

導入などの説明はすっ飛ばしてるので前編をご覧下さい。

“[MooTools Tutorial]背景画像を複数読み込んでクロスフェードで切り替える” の続きを読む

[MooTools Tutorial]巨大な背景画像の読み込みとMoreの使い方

MooToolsには豊富な機能拡張クラス(プラグイン)があります。
公式サイトでは基本クラス群をCore、機能拡張クラス群をMoreと称してあるのでそのように覚えておくと良いと思います。
Moreクラスはコアに実装されていない機能を個別に提供するもので、
どれもCoreのクラスに依存しているのでCoreとセットでないと動きません。

Moreの公式サイトでの配布は約60種類、MooTorialに約70種類くらいあります。
大体のことは網羅されているので、そのまま活用するもよし、組み合わせて新しいプラグインを作るもよしです。

このエントリーはそんな便利なMoreクラスの使い方を説明しつつ、
Flashでやってしまいがちな横幅1000pxを越える大きな背景画像の読み込みを、MoreのAssetsクラスを使って行うチュートリアルです。
前編後編で分けていますがタイトルが違うのでご注意を。こちらは前編です。

View Demo

前編:ページ開く→ローディング画像表示と背景画像を1枚読み込み→読み込み完了で背景表示

後編:画像3枚読み込み→クロスフェードでエンドレス切替

ということをやってます。後編はこちら »
“[MooTools Tutorial]巨大な背景画像の読み込みとMoreの使い方” の続きを読む

[MooTools Tutorial]横からスライドインしてくるアニメーションメニューの作り方

何か最近巷がjQueryマンセーな感じで、MooToolsフリークとしては肩身が狭い今日この頃
MooToolsがマイナーなのはドキュメントが少ないからだ!と言われてるようなので、
新しいカテゴリなど追加しつつ手取り足取りなチュートリアルを書いて行こうと思います。

このエントリーでは、MooToolsのFx.Morphクラスを使ってリスト要素をFlashのようにぬるぬる動かします。
完成するとリストメニューが上から順に画面中央付近から左側へスライドインしてくるアニメーションになります。

View Demo Page

MooToolsのCoreとMoreについて

今回はCoreに内臓されているクラスを使うのでMoreのクラスは必要ありません。
スクリプトを利用するのにダウンロードが必要なのはダウンロードページのトップにあるMooTools 1.2.4のファイルです。

mootools_download

ダウンロードするとmootools-1.2.4-core.jsみたいに、バージョンの後ろにcoreと入ったファイル名になります。
(.txtの拡張子を削除して拡張子を.jsにすること)
MooToolsを利用する場合はこのCoreファイルがあればOKです。

プラグインによってはMoreのクラスが必要になる場合があります。
大体はプラグインに合わせたCoreとMoreがセットで配布されているのですが、
別途ダウンロードが必要な場合は、ダウンロードページの右側にあるメニューからMore Builderに移動し、
必要なプラグインを選択してダウンロードします。

CoreファイルもCore Builderに移動すれば必要な機能だけチョイスして作成することが出来ます。
使わない機能を削除すればファイルサイズを減らす事が出来るので、覚えておくと便利です。

※注意
ある程度経験のある方を対象にしていますので

  • HTMLやXHTMLが分からない
  • CSSも良く分からない
  • Javascriptの基本的なことが分かってない
    (インスタンスとかメソッドとか言われても意味が分からない…という人は
    インスタンス=複製したもの メソッド=関数 と置き換えればなんとかなると思います)

みたいな方は対象外になります。

“[MooTools Tutorial]横からスライドインしてくるアニメーションメニューの作り方” の続きを読む

[mootools]スクロールに追随させる – mooFollow.js

スクロールした時勝手に追随して動く要素を作成するクラス。mootools ver1.2以上用。
どう見てもwrapScrollです本当に(ry)っていうツッコミは置いといて、
スクロールした時とし終わった時のイベントとか、
トランジションや遅延の指定とかがしやすい。と思う。

“[mootools]スクロールに追随させる – mooFollow.js” の続きを読む