まさはる's Weblog

　温泉マップのスクリプトが大体いいところ出来てしまったので、最近はデータベースに登録する温泉を増やすべく、あちこちの施設に行っているところです。

また行きたい温泉マップ

　今年は例年になく雪が多いのですが、昨日はとても天気が良かったので、富山市山田（旧山田村、牛岳温泉スキー場のある所）の牛岳温泉健康センターに行ってきました。施設はとても立派で温泉はまあまあといった感じですが、施設の前の道路から立山方面の見晴らしの良さが一番印象に残りました（何しに行ったんだかｗ）。

剱岳と立山（ISO 400, 120mm, f/11, 1/1000）

　さて、スクリプトの方の話ですが、PHPの変数をJavaScriptに渡す方法が分からなかったので、書き留めておきます。

// JavaScriptのスクリプト内
// PHPの変数 $a をJavaScriptの変数 a に渡す
var a;
a = <?php echo $a; ?>;

// PHPの配列変数 $b をJavaScriptの配列変数 b に渡す
var b = [];
b = JSON.parse('<?php echo json_encode($b); ?>');

　PHPはhtmlやJavaScriptの中のどこにでも、echoで値や文字列を書き出せるのでとても便利です。ちなみに、JavaScriptの変数をPHPに渡す方法はないこともないようですが、うちのサイトでは必要ないので行っていません。

　温泉マップを公開してからというもの、チマチマとPHPとJavaScriptのソースを改良しているわけですが、ver. 1.3でカスタムアイコンに変更したので書き留めておきます。

また行きたい温泉マップ

　GoogleでGoogle Mapsのアイコンを検索すると、色々なデザインのものがたくさん出てきますが、私の使いたいアイコンは存在しないということで、一から作ることにしました。
　この手の絵の上に絵を重ねる場合、重ねる絵の背景を透明にしないとジャギーが目立って見栄えが良くありません。Photoshopで背景を透明にしてアイコンを作る方法もありますが、そもそもそういう作業に向いていないので作るのに苦労します。そこでベクターデータを作れるソフトを探していたところ、あった、あった。しかも無料。

Phyar StudioのiVinci Express

　このソフトは、グリッドにスナップさせることが可能なので、正確な図形を描くにはピッタリです。で、SVGファイルは出来たのですが、今度は背景を透明にしたPNGファイルに変換したいということで探したところ、技術者のたまごブログのドラッグ＆ドロップでSVGからPNGへ変換のページで自作の「SVG to PNG converter」を紹介されていたので使わせてもらいました。
　出来上がったアイコンはこちら。あら、大した手間がかかっていない割には以外と上手くできたかも...（自画自賛ｗ）。

　
「温泉」アイコンと「ゆ」アイコン