Demo

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

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

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

テスト用の山手線駅.xml

Continue reading

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

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

完成したのはこれ

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

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。

Continue reading

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

HTML

質問・結果を表示する要素とボタンが必要。
要素内の中身は実行時に全て削除されるので、NOSCRIPT環境への警告など入れると良いでしょう。

inputタグのボタンはつかえません。

Continue reading

ID指定したエリア内にある要素を左右からスライドインさせて表示するクラス。
使い古されまくりな感じのものだけど、使う用事があったので適当に書いてみた。

ダウンロード：Slidable Viewer (v1.0)

Continue reading

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を使用するのがいいかもしれない。

Continue reading