Atrasi-2079-Vox

フリーランスウェブデザイナーArata-Atrasi-Takamiのブログ。服・靴・育児ときどき開発。

Tag Archives: Web

Google Map経路探索へのリンク

  • 投稿日:2015/08/11

 

 

2013年の頭に「Google Mapにリンクを張る際のパラメータ」という記事を書いたことがあったんですが、あれからずいぶんと時間が経ってGoogle Mapもだいぶ様変わりしました。あの時のパラメータが今でも有効なのかどうか、ちゃんと見返してないんで正直微妙なんですが、まあ気が向いたら検証して記事直しておきます。

 

久しぶりの開発ネタ…ってほどでもないですし今更感あるんですが、ちと紹介。
Google Mapの「経路探索」機能を使ったリンク方法です。

 

以前の記事でも書いた通り、Google MapはURLに様々なパラメータを記述してあげることで、色んな機能を使う事ができます。

 

例えば座標。
https://maps.google.co.jp/maps?ll=35.669029,139.705421
上記の場合は緯度35.669029・経度139.705421の座標を指定した場合です。座標を指定すると、指定された座標を中心としたマップが表示されるわけですね。
指定する場合は上記の様に「ll=緯度,経度」という風に書きます。

 

 

これと同じように「出発地」「目的地」を指定することも出来ます。
出発地は「saddr」、目的地は「daddr」を使います。

 

例えば、出発地を緯度35.669029・経度139.705421のラフォーレ原宿にし、目的地を緯度35.667245・経度139.708796の表参道ヒルズにしてみます。するとURLは
http://maps.google.co.jp/maps?saddr=35.669029,139.705421&daddr=35.667245,139.708796
となります。saddr・daddrそれぞれにll〜の時と同じ要領で座標を記述しています。

 

更に、経路タイプやズーム倍率を指定したりすることも出来ます。
http://maps.google.co.jp/maps?saddr=35.669029,139.705421&daddr=35.667245,139.708796&dirflg=d&z=16
経路タイプは「dirflg」で「t(電車 デフォルト)」「w(徒歩)」「d(車)」が選べます。
ズーム倍率は「z」で0〜約20の数値で指定します(例外もあります)。

 

 

座標の取得は以前の記事でご紹介したサイトが閉鎖されていたようなので、こちらを。
http://www.gis-tool.com/mapview/maptocoordinates.html

 

 

最寄り駅からイベント会場の経路や、最寄りのコインパーキングから店舗への経路を教える時など、何かと使い道がありそうです。

 

 


制作環境を変えてみた〜Coda2編〜

  • 投稿日:2012/11/24
By: Collin Allen

私は普段Web制作の仕事をしている訳ですが、その制作作業の中に「コーディング」というHTMLだったりCSSだったりを書く作業があります。タグという英文みたいのをひたすら打ち込んでいく作業だと言えば、Web制作をよく知らない方にも何となくイメージしやすいでしょうか。

このコーディング作業に使用するソフトを「エディタ」と呼んだりします。私たちWebデザイナーの場合は、そのエディタの中でもHTML・CSS・JavaScriptなどのWeb制作によく使われる言語に特化したものが一般的によく使われます。恐らく一番一般的なのはAdobe社製のDreamweaverというソフトではないでしょうか。

 

 

私自身、Web制作の仕事を始めてからずっとDreamweaverを使っていました。まぁ特に不満が無かったんですね。英文ばかりのコードがわかりやすくなるカラーリング機能だったり、便利なサジェスト機能(携帯の予測変換みたいなもの)だったり、Web制作におけるコーディングでは非常に使いやすいエディタだと思います。

 

しかし、最近になって「Coda2」というMac用エディタソフトに乗り換えたのです。

Panic, Inc.

Panic, Inc.
Coda 2
★★★★☆
94件の評価
App Store

 

乗り換えた理由は下記の通り

  • 多くの開発者ブログで高評価されている
  • インターフェイスデザインがかっこいい
  • 階層構造などの視認性が高い
  • Dreamweaverでできることは大体できる

という感じです。2番目の理由の「かっこいい」ってのは個人的に結構大事なことで、音楽制作ソフトやギターなんかにも言えるんですが、やっぱり見た目的に「かっこいい」と思えないと気分的に盛り上がらないのです(笑)

Dreamweaverでできる事ができるならば、見やすかったり使いやすい物のほうが良いですね。コーディングの際にHTML・CSSを並べて表示することが出来たり、色々とカスタマイズできるところも気に入りました。

実際のところDreamweaverの全機能を使いこなしていたとは言えないのですが、Coda2に乗り換えてみて非常に操作しやすい印象を受けました。 ちょっとAdobeに難癖つけるみたいですが、Dreamweaverの画面をぱっと見た時にCoda2ほど何ができるのかが把握しにくい様な気がしま す。

 

 

多くの開発者ブログの方も紹介しているのですが、下記の点は特に便利ですね。

ウィンドウを並べながらの編集

横幅の大きなサイトだと逆に不便かも知れませんが、スマートフォン向けサイトの様な長細いサイトの場合ですと、上記の画像のように左からHTML・CSS・プレビューといった感じで並べて編集できるのが便利です。Dreamweaverもプレビュー機能はあるんですけど、CSSも一緒に並べてっていうのはいいですよね。

 

階層の分かりやすさ

HTML編集画面です。左側の青っぽい部分に注目して下さい。

HTMLを書いたことがある方は分かると思うのですが、HTML文書は階層構造といって色んな要素が入れ子状態になっているんですね。HTMLがフクザツになってこの階層構造が深くなってくると、行の先頭にあるインデント(字下げの空白のこと)だけでは分かりにくくなってきます。なんたって英文ですから、階層構造を確認してると目がチカチカしてきたりします(笑)

この左側の青っぽい部分は階層が深い行ほど色が濃く、浅いところほど色が薄くなります。これでどの行がどれくらいの階層にあるのかが直感的に把握しやすくなります。

 

それと、私はまだ使ってみてはいないのですが、iPadと連携してiPad上でプレビューを見ることが出来るようになるDiet CodaというiPadアプリも有るようです。Kindle・Nexus7・iPad miniとタブレットも普及し始めて、これからタブレットを視野に入れたウェブサイト構築を行う機会も増えてくるでしょうし、こういう周辺環境面でも面白い試みが伺えます。

Panic, Inc.

Panic, Inc.
Diet Coda
★★★★☆
32件の評価
App Store

 

その他iCloudとの連携サービスなどもあるようで(←まだちゃんと検証してないw)、Mac使いのWEB制作者には結構うれしい機能が沢山あると思います。なんたってDreamweaverが4万円以上するのに対して6500円(2012年11月現在)というのは、個人でWeb制作をしている方にとっても有難い価格なんじゃないかと思います。

 

もちろん不満な点も全くないわけでは無いんですが、今のところ最も使いやすいと感じています。

Dreamweaverから引っ越してきた人としては、DreamweaverのEndキーで行末に移動する機能を多用していたので(本来これはWindowsの挙動でMacの場合はcommand+→だったりします)、できればその辺のキーボード操作の挙動もカスタマイズできると嬉しいですね。

パニックincさんどうですかねー?

(/ω・\)チラッ