MovableTypeの構築からシステム開発のPM、インフラ作業など色々やってる岩本です。こんにちは。
アライドアーキテクツの公式ブログへは何度か記事を書いてますが、エンジニアブログに書くのは初めてです。
エンジニブログは、エンジニアらしく技術的な事やアライドアーキテクツのエンジニアライフについて書くよう指示されているため、何を書こうか迷いに迷いに迷った結果、初回はエンジニアらしく正規表現をネタにしたいと思います。
さて、今から遡る事5年前、2007年の第２回システム合宿で各々ブログパーツを作ったのですが、折角なので自分のブログで使える実用性のあるブログパーツを作りたいな～と思い、JavaScript でブログの記事内の住所を拾ってきてゴニョゴニョするブログパーツを作る事にしました。（ゴニョゴニョについては後程。。）
さて、ブログ記事内の住所をゴニョゴニョするためには、まずHTML内から住所を探し出さなければなりません。
そこで登場するのが、みんな大好き正規表現です。
大好きですよね？
ね？
で、ブログパーツを開発した当時、住所にマッチする正規表現を探してみたのですが、自分の用途にしっくりくる物が無かったので、自分で書いてみる事にしました。
HTML内の住所にマッチする正規表現を書く上で、次の項目をポイントに考えました。
・ 都道府県名が含まれている
・ 郵便番号やビル名は ” なんとなく（ココ重要）” 無視する
・ 京都のヘンテコな住所にも ” なんとなく（ココ重要）” 対応する
・ <img> タグの alt 属性等のHTMLタグの属性に記述された住所は無視する
・ スペースや「）」等の ” 一般的な（ココ重要）” 閉じカッコがあれば住所の終わりとする
・ 住所っぽいけど ” なんとなく（ココ重要）” 中途半端な住所は無視する
その結果、できた正規表現がコレです。
HTML内の住所に ” なんとなく（ココ重要）” マッチする正規表現
/([^”‘=])((北海道|東京都|(大阪|京都)府|(神奈川|和歌山|鹿児島)県|[^\s\w\d ]{2}県)[^\s\w\d ]{1,6}[市郡区町村][^\s\w\d ]{1,20}[\d０-９〇一-九十上下東西]+[^\s '”<）」】]*)/
軽く説明すると、
都道府県名で始まり、
ただ HTMLタグの属性内は無視するので都道府県名の前に「”」や「’」等が入らないようにし、
都道府県名の後ろには市区群町村名が続き、
市区群町村名の後ろにはスペースや半角英数字以外の文字列が続き、
番地や京都のヘンテコな住所表現をOKとし、
住所の終わりはスペースや閉じるカッコ等の記号まで。
という感じです。
で、ゴニョゴニョ、ゴニョゴニョと書いてきましたが、探し出した住所をどう ゴニョゴニョ したのかと言うと、、、
とりあえず、色々なパターンの住所を用意したのでご覧ください。
■よくある住所表現
東京都渋谷区恵比寿
渋谷区恵比寿1-19-15
東京都渋谷区恵比寿1-19-15
東京都渋谷区恵比寿1丁目19番地15号
東京都渋谷区恵比寿一丁目十九番地十五号
〒150-0013 東京都渋谷区恵比寿1-19-15
東京都渋谷区恵比寿1-19-15 ウノサワ東急ビル4F
京都府京都市下京区塩小路町614番地
■京都のヘンテコな住所表現
京都府京都市下京区塩小路通烏丸西入ル
京都府京都市中京区西堀川通御池下ル
■<img> タグの alt 属性
■<a> タグの title 属性
※今回はこの記事用に準備したためブログパーツは表示していません。
わかりましたでしょうか？
どういう事かと言うと、
ブログ記事に住所書くなら地図を表示したいよね？
でもいちいち地図のリンクとかタグを貼り付けるのは面倒だよね？
それならブログの記事から住所を探し出して地図を表示するリンクを作るのが良いんじゃね？
それ作ろう！
という事です。
なので、[MAP] をクリックすると、その住所の地図が表示されます。
中途半端な住所や、<img> タグの alt 属性等に書かれた住所にはマッチしてません。
HTMLのソースを見てもらえればわかると思いますが、実際の記事内には [MAP] の記述はなく、後から JavaScript で追加してます。
なので、このブログパーツを貼り付けると、過去の記事にも自動的に地図が付きます！
最初に開発してから5年近く経っているので、ユーザーのブラウザ環境が変わったり、Google Maps API のバージョンが上がったり、自前で書いてた処理を jQuery を使うようにしたりと、開発当初から一応バージョンアップをしてます。
そして一番直近（といっても1年以上前）に追加した機能がコレ。
[MAPLUN:東京ディズニーランド]
[MAPLUN:京都駅]
[MAPLUN:北海道]
[MAPLUN:エッフェル塔]
ブログ記事内に特殊な記述をする事で、こんな感じでランドマークやスポットの地図も表示できます。
まぁ、これは Google Maps API が凄いだけなんですけどね。。
と、まぁ、こんな感じで、システム合宿は毎回テーマを決めて、普段の業務とは違う物を開発をする事が多いです。
今年も7月にシステム合宿に行く予定です。
ちなみに、昨年のシステム合宿はこんな感じでした。
アライドアーキテクツではエンジニアを募集しています。
7月のシステム合宿に一緒に行きたい方は、今すぐこちらからご応募ください！
お待ちしております！！！
現在の主な仕事はプロジェクトマネジメントです。 Tips情報等、ライトな話題を中心に書いて行ければと思っています。
