開発日誌

2013年08月20日

GoogleMapsAPIを使って2点間の延長線を引く

ビルブログの方にも書きましたがBLUE STYLE COMに新機能を作成しました。
2点を指定するとその2点間の延長線を引ける機能です。

高尾山から見た東京スカイツリー
例えばこの高尾山からの景色。
新宿の超高層ビル群を超えたところにタワーが見えます。
もうスカイツリーだとわかっていますがわからなかったとします。

高尾山
そんなときはまずは高尾山での撮影場所をクリック。

新宿アイランドタワー
次に新宿アイランドタワーの後ろに見えるので新宿アイランドタワーをクリック。そうすると直線が引かれます。

東京スカイツリー
その線を辿って行くと東京スカイツリーに辿り着きました。
主に展望台からの見えるわからない建物探しや、逆に撮影スポット探しに使ってもらえると嬉しいです。
ちなみに子午線や日付変更線をまたいで指定するとぐちゃぐちゃな線になります。今のところ対応する気はありません。

地図に延長線を使ってみる!


ここからは技術的余談です。

 このシステムはGoogleMapsAPIを使用しており、クリックされた座標を取得して線を引いています。最初は単純に座標を数倍に伸ばして線を引いたのですが、そうするとクリックした地点を通らない線が引かれてしまいました。これは地図がメルカトル図法のため、座標が等間隔の格子状になっていないということが原因です。
 そこで、一気に線を引くのではなく、ちょっとずつ線を引くように作り変えました。やっていることは2点間の座標の差を5で割り、その値をどんどん足したり引いたりして何本も線を引く手法です。この手法だとずれることなく線を引くことが出来ました。ちなみにJavaScriptだと小数点の計算がおかしなことになるので、小数点の計算が出来るライブラリを見つけて来て対応しています。
 次は余力があればクリック場所の微調整を出来るようにしたいと思っています。

bluestylecom at 10:58│Comments(1)TrackBack(0)

2013年08月13日

wadax内のサーバー移行でハマったこと

 8月11日の夜中にBLUE STYLE COMのサーバーを移転しました。サーバー移転理由はサーバーのOSのサポートが来年1月30日で終了するのと、機器の老朽化が進んでいるのでサーバーの乗り換えをしては?との案内が来たからです。サーバーを契約した当初は300MBの容量で年間約4万5000円払っていたのですが、この容量は年々増えて数GBになっていました。この金額で今のプランに変更すると150GB…こんなには必要ないので50GBで年間22,680円のサーバーに新規契約しました。レンタルサーバー会社は今までと同じwadaxです。新規契約したのは8月7日で8日の朝から新サーバーが使えるようになったので移行作業をしていました。そのときの作業や不具合とその解決方法をズラズラと書いて行きます。開発環境はphpとMySQLです。


1. 文字コードをShift_JISからUTF-8に変更

 まずはDB(MySQLの場合)をutf_general_ciで作成します。そしてphpやhtmlのファイルを全てUTF-8に変換して保存するのと、metaタグのcharsetをUTF-8にするだけの作業です。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 あとは内部でmb_internal_encodingで文字コードを指定している箇所など、文字コードを指定している箇所があればそこを変更するだけです。というか、削除で問題なかったと思います。


2. Deprecated: Function ereg() is deprecated in 対応

 これはeregという関数がphp6.0で削除される予定のため発生するエラーのようです。
 4桁の数字か?と判定するところなどで使用していたので
 if(ereg("^[0-9]{4}$", $inputYear)){
  ↓
 if(preg_match("(^[0-9]{4}$)", $inputYear)){
 のようにeregからpreg_matchに変更しました。正規表現部分を()で囲むだけで動きました。


3. Deprecated: Function split() is deprecated in 対応

 これもeregと同じでphp6.0で削除予定のために発生するエラーのようです。
 入力年月日を分割する処理で使用していたので
 $token = split( "[./-]", $inputDate );
  ↓
 $token = preg_split( "[./-]", $inputDate );
 のようにspligからpreg_splitに変更しました。こちらはsplitをpreg_splitに置き換えただけで動きました。いや、動いていると思います。


4. ファイルが書き出し出来ない(WADAX特有?)

 これが一番ハマリました。自サイトでは負荷軽減のためにデータベースにビルデータを入れた後、htmlを書き出す作業を行なっています。そこでDNSを新サーバーに向ける前に確認用アドレスで先にその作業を行うことにしました。
 wadaxの場合はDNSを変更する前でも、以下のようなアドレスでアクセスすることが出来ます。そのアドレスから管理画面に入り、そこでhtmlを書き出し行いました。HPも以前と同じように表示されることが確認出来たので、DNSを新サーバーへ変更しました。
 
http://hogehoge.wadax.ne.jp/~ドメイン名/

そして15時間後くらい…ようやく自パソコンから新サーバーに繋がるようになったのですが…

http://www.blue-style.com/

にアクセスすると500 Internal Server Errorが…。FTPで見てもhtmlファイルはあるのですが、web上でアクセスすると表示されるのはエラーのみ…。色々試していると一旦ローカルにhtmlファイルを落として、サーバー側のファイルを削除。そしてアップロードすると表示されることがわかりました。このときの差はファイルの所有者がweb(他の環境だとapacheとか)となっているのか、FTPのユーザー名になっているかの差で、FTPのユーザー名のときだけエラーがなく表示されていました。さらに色々試してわかったのですが

http://hogehoge.wadax.ne.jp/~ドメイン名/
からアクセスしてphpコマンドでファイルを作成すると所有者がwebになり

http://www.blue-style.com/
からアクセスしてphpコマンドでファイルを作成すると所有者がユーザー名になりました。このときはエラーなく表示されました。

ということで、WADAXの場合、事前確認用アドレスからファイルを作成したりするのはダメで、ファイルを作成するときは自ドメインのアドレスから作成しましょう!ということでした。
 WordPress(ワードプレス)やMTもこういったファイルを作成しているのかはわかりませんが、そういったソフトでもしファイルが作成出来ないエラーがあったらこのアドレスを疑う価値があるかもしれないですね。


5. ファイルが書き出し中にエラー(WADAX特有?)

 無事にファイルを書き出してそれがweb上から見られるようになって安心したのも束の間、今度はファイル書き出し中にエラーが発生して止まる事象が発生しました。いきなりエラーで落ちるのならわかるのですが、400ファイルくらい書きだしたところでエラーで落ちています。
 いろいろ試したり調べた結果、元々時間のかかる処理だったので最初に

 set_time_limit(180);

といったようにタイムアウトまでの時間を伸ばしていたのですが、どうやら新しいサーバーでは30秒がデフォルトでしかも変更出来ないようでした。ということで、処理を分けるしか方法はなさそうだったので、作成するファイル数を250ずつにし、そして作成ボタンを複数作ることでとうにか解決しました。今の管理画面は以下のようになっています。
作成ボタン

 他にも細かい修正はありましたが大きく分けるとサーバー移行でこんな作業を行いました。同じレンタルサーバー会社内での移行だったのでもっと気軽に考えていたのですが、前では使用出来たphp関数が使えなくなっていたり、タイムアウトの時間が変更出来なくなっていたりと多少ハマリました。1日近くエラーが出ていた状況ですが何とかサーバー移行出来て良かったです。サーバー移行したらやろうと思っていたことなど多々あるので、これからは精力的にHPを改造して行こうと思います。

bluestylecom at 15:31│Comments(0)TrackBack(0)

2013年05月24日

ImageMagickで画像結合

 他のブログにも載せましたが以下のような東京スカイツリー1周年記念ライティングの動画を作りました。




 今回はこの動画の作成方法についてのメモです。

 この動画に使った写真は3秒に1枚のインターバル撮影した写真2400枚。ライトアップは12種類で10分毎に切り替わるので、1種類の写真は10分(600秒)/3秒=200枚。よってパターンごとに200枚ずつ写真を分けます。そしてツールを使って160*1080の大きさに一気にトリミングと縮小を実行します。今回はそれぞれsky1、sky2といったようなフォルダに写真を入れました。ここまでが第一段階です。

 次に切り取った写真を結合します。結合にはImageMagickを使用しました。これはコマンドラインからも操作出来るので、2400通りのコードを用意してバッチで一気に処理します。以下が1枚目のコードです。

montage -tile 12x1 -geometry +0+0 sky1/IMG_0001.jpg sky2/IMG_0001.jpg sky3/IMG_0001.jpg sky4/IMG_0001.jpg sky5/IMG_0001.jpg sky6/IMG_0001.jpg sky7/IMG_0001.jpg sky8/IMG_0001.jpg sky9/IMG_0001.jpg sky10/IMG_0001.jpg sky11/IMG_0001.jpg sky12/IMG_0001.jpg skyout/0001.jpg

-tile 12x1
画像を横12、縦1に並べる。

-geometry +0+0
枠線なし

sky1/IMG_0001.jpg sky2/IMG_0001.jpg …
結合する写真

skyout/0001.jpg
出力する画像

といった感じです。ここまでが第二段階です。

 最後は写真を繋げて動画にして終わりです。以前はPicasaを使っていたのですが、どうも暗い部分の画質が良くないので、今回はwindows live ムービー メーカーを使用しました。パタパタ動画の作り方は写真を複数選択して表示時間を一括して指定するだけです。ただ、0.05秒にすると失敗したので0.1秒で動画を作成した後、次はその動画を倍速にしています。

以上、自分にしかわからなさそうな超簡単なメモでした。

bluestylecom at 10:45│Comments(1)TrackBack(0)

2009年05月12日

ImageMagickを使ってExifを削除する

 今回は技術メモです。ほとんどの人は関係ないと思います。。。

 メインホームページの「BLUE STYLE COM」で使っているサムネイル画像のファイルサイズが前から大きく、携帯サイトではそのサムネイル画像を表示させているので、どうにかファイルサイズを小さくしたいと思っていました。
 そもそもファイルサイズが大きかった原因ですが、画像縮小する際に自分で縮小画像を作るのは手間なので、サーバ側(PHP)でImageMagickのconvert scaleを使って実施するようにシステムを構築していました。このとき生成される縮小画像に、Exifが含まれているがファイルサイズが大きい原因でした。よってExifを削除すればいいということになり、いろいろ調べた結果「thumbnail」で縮小という方法もありましたが、オプションで「-strip」を付けてもExifを削除してくれるようなので、今回は画像保存フォルダ配下にある、全サムネイルのExifを削除するプログラムを組みました。多少変なことをやっているかもしれません。

// ディレクトリ名一覧を取得する
$objDir = dir("./");
while($dir = $objDir->read()){
  if($dir != ".." && $dir != "." && !strpos($dir, ".php")){
    // ファイル名一覧を取得する
    $strDir = opendir("./" . $dir);
    while($fl = readdir($strDir)){
      // 取得ファイルへのパス
      $picture_path = $dir . "/" . $fl;

      // サムネイル画像のファイル名は「XXXXX-s.jpg」
      if(strpos($picture_path, "-s.jpg") >= 1){
        // サムネイルのExifを削除する
        exec( "/usr/local/bin/convert $picture_path -strip $picture_path" );
      }
    }
    closedir($strDir);
  }
}
$objDir->close();

bluestylecom at 07:40│Comments(1)TrackBack(0)

2007年05月08日

BLUE STYLE COM近況

 ネタ不足なのでどーでもいい話を…。今、本家HPのBLUE STYLE COMのデータを旧ページから移行中です。昨日、ようやく千代田区が終わったので残すは港区だけとなりました。あとはガツガツ登録して行くだけなので、今週中に終わらせたいと思っています。
 この作業が終わればHPをもうちょっと見やすくしようと思っています。ビルデータはデータベースに登録しており、HPデザインはテンプレートから自動でHTMLを作成出来るようにしています。結構強引に作ったシステムなのでまだバグが潜んでいますが、頑張ったおかげでビル一覧などの作成は簡単に作成出来ます。どのようにHPを改造するかは決めていませんが、よりよいHPにして行こうと思っています。
 最近はブログがメインのようになっていますが、ブログはHPの一部で本当のメインはBLUE STYLE COMです!

bluestylecom at 10:02│Comments(0)TrackBack(0)

2006年10月15日

ようやく更新

 本家のHP、BLUE STYLE COMを久しぶりに更新しました。江東区の移行完了です。移行作業は疲れるのでペースが落ち気味で申し訳ないです。もっと使いやすいようにいろいろと改造をしたいのですが、そこまで手が回りません。。。今年中に移行が終わるように、気合を入れてがんばります!

 ちなみに改造計画としては…登録してあるビル一覧の作成、住所でソートしたビル一覧の作成、細かいバグの修正、リターンで検索が動くように改造などなどです。。

bluestylecom at 21:53│Comments(0)TrackBack(0)

2006年08月14日

管理画面を初公開!

管理画面 BLUE STYLE COMの更新が全然進んでいませんが、HPの管理画面の一部を初公開です!PHPとMySQLで完全自作のシステムで、画像のアップロード、ビル情報の登録(画像では述床面積など入力する項目がありますが、現在はデータを入力していません。)、画面の自動作成を行うことが出来ます。これにより、デザインの変更などをブログ感覚で変更することが出来ます。この仕組みを作り上げたおかげでこのようにビル一覧を後から付け加えたりなどの改造をこっそりしたりもしています。また、トップページの新着情報にある超高層マンション・超高層ビルブログの更新情報は、ブログ投稿時にpingを飛ばすことによって自動に更新するようにしています。
 このように出来るだけHP更新に手間をかけずに済むようにしたのですが、旧BLUE STYLE COMの情報が多過ぎてデータ移行に時間がかかっています。というか、量が多過ぎてなかなかやる気が起きないと言った方が正しいです…。天気の悪い休みの日があれば気合でデータ移行します。。

bluestylecom2 at 22:35│Comments(0)TrackBack(0)