archive-com.com » COM » N » NITOYON.COM

Total: 757

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • 郵便番号マップ作成記 (3) - 経度緯度から動的に郵便番号を描画する - てっく煮ブログ
    0944552 lng 141 3766337 name 北海道札幌市東区 code 065 以下略 修正後のソースを postal js として保存する 座標データを描画していく ここからは JavaScript のコーディング まずは表示する郵便番号の上下左右の端を求めておく var latmin 9999 latmax 0 lngmin 9999 lngmax 0 for var i 0 len postal length i len i var p postal i if latmin p lat latmin p lat if latmax p lat latmax p lat if lngmin p lng lngmin p lng if lngmax p lng lngmax p lng WIDTH 600px に収まるように表示倍率を求める var ratio WIDTH lngmax lngmin 準備ができれば あとはそれぞれの郵便番号について表示していくだけ for var i 0 len postal length i len i var p postal i SPAN タグを作る var pos document createElement span クラス名は a 郵便番号の先頭文字 pos className a p code substr 0 1 緯度経度に応じて絶対座標配置する pos style position absolute pos style top latmax p lat ratio 1 2 px pos style left p lng lngmin ratio px 郵便番号の文字列を SPAN の中身に追加する pos appendChild document createTextNode p code 表示用の DIV タグに追加する canvas appendChild pos 実際のソースコードは 絞り込みやポップアップ表示でもう少し複雑になっているが 基本的にはこんなところだ 緯度経度が正しければ日本地図が浮かび上がる 当たり前なんだけど面白い CSS で虹色グラデーション JavaScript では郵便番号の先頭文字に応じてクラスを変更するようにしていた だから 次のような CSS を書いておけば 色分けも一発だ 簡単簡単 span a0 color cc0000 span a1 color cc7a00 span a2 color a3cc00 span a3 color 28cc00 span a4 color 00cc51 span a5 color 00cccc span a6 color 0051cc span a7 color 2800cc span a8 color a300cc

    Original URL path: http://tech.nitoyon.com/ja/blog/2009/03/20/postal-map3/ (2016-02-13)
    Open archived version from archive


  • 郵便番号マップ作成記 (2) - ジオコーディングで経度緯度を求める - てっく煮ブログ
    xml doc REXML Document new xml coordinates タグの中身を読み取る latlng REXML XPath first doc root coordinates text lng lat latlng split code lng lng to f code lat lat to f puts q lng lat end 保存 code save 3秒スリープしておく sleep 3 end エラー処理は特にやってないので 例外が起きたらそこで止まる データ量も多くないので 止まってたらそのときに手作業で対応すればよいだろう 途中 岡山市北区 でエラーになった Google さん しっかりしてよー と調べてみたら 北区 きたく は岡山県岡山市が2009年4月1日の政令指定都市移行に伴い設置を決めた4つの行政区のうちの一つ とのことらしい まだ存在してない区ならば 取得できなくても仕方がない 岡山市の4つの区については Google Maps で検索して 見つかった適当なデータから緯度経度を直接 INSERT して対応しておいた DB の中身を JSON で出力

    Original URL path: http://tech.nitoyon.com/ja/blog/2009/03/18/postal-map2/ (2016-02-13)
    Open archived version from archive

  • 郵便番号マップ作成記 (1) - 郵便番号データをデータベースに入れる - てっく煮ブログ
    1 を保存しました 1726157 1726157 lha x ken all lzh ken all csv Melted ooooooooooooooooooooooooooooooooooooooooooooooo nkf w ken all csv gt ken all utf8 csv データベースへの作成 ビジュアライジング データ Processingによる情報視覚化手法 でのアメリカ版では CSV データに経度緯度データも入っていたんだけど 日本郵便のデータには入っていない ならば ジオコーディングで取得するしかない 今回はその準備のためにデータベース環境を整えていく 言語は Ruby を選択した O R マッパーとして Ruby on Rails の ActiveRecord を使って省エネを狙う DB は手軽に使える sqlite3 を使う バージョンはこんな感じ Ruby 1 8 5 ActiveRecord 1 15 sqlite3 ruby 1 2 4 sqlite3 3 6 6 2 テーブルの準備 まずは DB とテーブルの作成 ActiveRecord の Migration 機能を使ってテーブル構造を定義してやる EntrySchema rb require rubygems require active record ActiveRecord Base establish connection adapter sqlite3 dbfile geocode db class EntrySchema ActiveRecord Migration def self up create table codes t t column high string null false t column low string null false t column pref string null false t column city string null false t column lat float t column lng float end def self down drop table codes end end class Code ActiveRecord Base end こう書いておくと 次のようなコードを実行させるだけでテーブルを作成してくれる ruby e require EntrySchema EntrySchema migrate up EntrySchema migrating create table codes gt 0 0397s EntrySchema migrated 0 0402s 素晴らしい Migration については 以下のサイトを参考にした pylori style wiki MigrationによるDB管理 FFTT RailsのMigration 優しいRailsの育て方 ヽ ノくまくまー 2005 08 17 CSV を DB に流し込む お次は DB に CSV のデータを流し込むところ Ruby には標準で CSV クラスがついてくる こいつを使えば1行を配列としてパースしてくれる DB 側は ActiveRecord と併用すればいとも簡単 コードがこれ require EntrySchema require csv i 1 CSV open ken all utf8 csv r do row 下4桁が 0000 のだけ突っ込む next unless row 2 to s slice 3 4 0000 既に突っ込んだ場合はそのデータを読み取る code Code find by id i code Code new if code nil CSV のデータを保存する code high row 2 to s slice 0 3 code low row 2 to s slice 3 4 code pref row 6 code city row 7 code save 出力 puts code pref code city i 1 end ActiveRecord のおかげで Code オブジェクトのプロパティを設定して save するだけで DB に格納してくれる 抽象度が高くて幸せ 実行してみる ruby script parse postal

    Original URL path: http://tech.nitoyon.com/ja/blog/2009/03/17/postal-map1/ (2016-02-13)
    Open archived version from archive

  • 郵便番号マップを作ってみた - てっく煮ブログ
    絞り込み機能 先頭の数字で絞り込む機能もつけてみました これが東京 1XX これが中国四国地方 7XX うっすら四国の海岸線が見えます 今週は これを作っていく過程を紹介していきたいと思います 乞うご期待 ビジュアライジング データ Processingによる情報視覚化手法 作者 Ben Fry 出版社 メーカー オライリージャパン 発売日 2008 12 01 メディア 大型本 Amazon のレビューを見る Tweet 2009年03月16日 編集履歴 JavaScript ビジュアライズ 目次 郵便番号マップを作ってみた 郵便番号マップ作成記 1 郵便番号データをデータベースに入れる 郵便番号マップ作成記 2 ジオコーディングで経度緯度を求める 郵便番号マップ作成記 3 経度緯度から動的に郵便番号を描画する 関連する記事 日本の伝統色をHSV空間に配置してみた 各国の伝統色をHSV空間に配置してみた Context Free Art のお気に入り作品5点 郵便番号マップ作成記 1 郵便番号データをデータベースに入れる Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus About Profile nitoyon

    Original URL path: http://tech.nitoyon.com/ja/blog/2009/03/16/postal-map/ (2016-02-13)
    Open archived version from archive

  • jQuery と object タグの怪 (その2) - てっく煮ブログ
    そういえばそんなものがあったなぁ Silverlight js を読む で さっそく読んでみた Oh Obfuscated 読めねー こういうときは 偉い人にソースを整形してもらう なんでもいいんだけど 私は JsDecoder javascript decoder decode obfuscated script というのを使ってる 出てきたコードがこんな感じ Silverlight createObject function l g m j k i h 最初のほう省略 slPluginHTML Silverlight buildHTML b a 間らへんも省略 if b parentElement b parentElement innerHTML slPluginHTML else return slPluginHTML Silverlight buildHTML function c d var a e i g f h if Silverlight ua Browser Safari a push embed e i g f h type application x silverlight 2 b1 iframe style visibility hidden height 0 width 0 else a push object type application x silverlight 2 b1 data data application x silverlight 2 b1 e i param name g value f h object a push id c id width c width height c height ってことで Silverlight js でも innerHTML 作戦で書いてるようだ どうでもいいんですが Silverlight js に次のようなコードを発見 if window addEventListener window addEventListener onunload Silverlight cleanup false else window attachEvent onunload Silverlight cleanup 誰のせいでこの if 文を と思うと少し悲しくなった もちろん Silverlight js を書いた人には罪はないんでしょうけど 切ないものがある 追記 コメント欄で教えてもらいました http code msdn microsoft com silverlightjs に難読化前のソースが公開されているようです っきさん ありがとうございます jQuery 1 3 系でも試してみた 次のようなツッコミが ありがたや これ 1 3系では tagname とか tagname の場合は createElementでDOM要素を生成するように変更されましたな jQueryでのDOM要素生成 文殊堂 ソースを見たら本当だった ということで 1 3 系で動かしてみたがやっぱりエラー 原因はこれか どうもDocumentFragmentを作ってそれに入れてから実際のオブジェクトに追加されるらしく object要素にDocumentFragmentを突っ込もうとして死ということみたい object 要素に param 要素がはいらない ういはるかぜの化学 subtech DocumentFragment

    Original URL path: http://tech.nitoyon.com/ja/blog/2009/02/20/object-jquery2/ (2016-02-13)
    Open archived version from archive

  • タグ「Silverlight」の記事一覧 - てっく煮ブログ
    タグの怪 その2 2009年02月20日 JavaScript jQuery Silverlight jQuery と object タグの怪 2009年02月19日 JavaScript jQuery Silverlight Silverlight 2 でちょっとしたアプリケーションをデザイナと作った話 2009年02月06日 Silverlight Fleverlight 勉強会に参加してきた 2008年07月28日 Flex Silverlight WPF 勉強会 発表資料 Fleverlight Flex Silverlight 勉強会が開催されるよ 2008年07月21日 Flex Silverlight 勉強会 SilverlightとFlashをつなぐ 2008年05月18日 Silverlight 発表資料 Silverlight 2 開発のバリエーション 2008年05月16日 Silverlight Silverlight2 0 ではまった話 2008年05月15日 Silverlight Silverlightを囲む会 in大阪 2 2008年04月23日 勉強会 Silverlight Flex の本も Silverlight の本も Blend の本も 盛りだくさん 2007年09月27日 Flex Silverlight 書籍 RIA 業界で動きありすぎな4月16日 2007年04月17日 Flash

    Original URL path: http://tech.nitoyon.com/ja/blog/tags/silverlight/ (2016-02-13)
    Open archived version from archive

  • jQuery と object タグの怪 - てっく煮ブログ
    で確認したら object になってた でも だめ 一歩前進したのでコメントアウトを外してみた が やっぱり append のところでエラーがでる obj append ココ param attr name name value value 同じ作戦で param param のようにやってみたが変わらず 仕方がないので jQuery の param から呼ばれる clean のソースを読んでみた IE で param とすると 内部ではこんな処理をしてる var div document createElement div div innerHTML div div html div div div lastChild return jQuery makeArray div childNodes 空の div タグを作って その中に innerHTML で HTML 文字列を流し込んで DOM ノードを作成しているようだ ここでピーンときた 仕様上は param タグは 本来は object タグの内部にしか入れることができない なので div param div のような HTML を innerHTML で設定すると このときに生成される param タグは本来の param タグではなく 何か別のものになってるんじゃないだろうか だから object に appendChild すると不正なノードを追加したのでエラーになる あくまで想像 同じような工夫は歯が立たない 同様の問題は既に jQuery で対応されている 例えば td タグなどを生成するときに単に innerHTML でノード生成するとエラーに出くわすので 一旦 table で囲ってから innerHTML する といった泥臭いことをしている param タグに関しても 同じ仕組みを使えばうまくいくはず と信じて前後を object タグで囲ってから innerHTML してみた が うまく行かない IE7 で検証したよ div innerHTML object param object alert div innerHTML OBJECT OBJECT div innerHTML object param object alert div innerHTML OBJECT OBJECT なぜか param が消える ナゼジャー 仕方がないから諦めた ということで 諦めて次のように置き換えたらうまく行った document createElement param attr jQuery に任せず 自分で作っちゃえ ということですな そして IE DOM Explorer で眺めてみたら ちゃんと object の中に param が入って理想的な DOM ノードが構築されていた おお 完璧 しかし 肝心の Silverlight コンテンツが表示されない ナゼダ さらに 代替コンテンツの Microsoft Silverlight を取得 のリンクもなぜか object ノードに入っていない 上と同じく document createElement 作戦を試したが それでもエラー 不思議だ まとめ object は鬼門 謎な挙動が多い 同じようなことを Flash でやる超有名ライブラリの SWFObject は object 全体を innerHTML で作成してる

    Original URL path: http://tech.nitoyon.com/ja/blog/2009/02/19/object-jquery/ (2016-02-13)
    Open archived version from archive

  • はてブ年鑑2009年1月分うp と jQuery.remove() の高速化話 - てっく煮ブログ
    ここ最近は自分の興味が実装よりも勉強のほうによってきたので手は止まっている おまけ jQuery の remove の話 関係ないけど ページの JavaScript 初期化をちょっと速くした jQuery remove を自前で removeChild するようにしたら 600ms 1ms ぐらいになった jQuery の remove は子孫ノードを全て列挙して イベントやデータを削除していくので 子孫ノードがたくさんある場合には時間かかる はてブ年鑑では歴代の記録を全部 HTML で保持しているので 再帰的なノード列挙は かなりの無駄な処理だったようだ もちろん jQuery を使ってイベント登録したり data を呼んでたりした場合には jQuery remove を使ったほうがメモリリークしないから安心だろう それでも イベントとか data を使ってなかったり 初期化の段階だったら めんどうだけど elm parentNode removeChild elm としたほうがかなり速いのは覚えておいたほうがよいかもしれない Tweet 2009年02月02日 編集履歴 はてブ年鑑 jQuery JavaScript 関連する記事 はてブ年鑑をリリースしました はてブ年鑑2009年1月分うp と jQuery remove の高速化話 はてブ年鑑 2008年分 パーサーが生成する構文木を木にしてみた ANSI Common Lisp の仕様書を HTML Help

    Original URL path: http://tech.nitoyon.com/ja/blog/2009/02/02/hatebu-nenkan200901/ (2016-02-13)
    Open archived version from archive