Atrasi-2079-Vox

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

Tag Archives: HTML

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
powered by アプリスコア.com

 

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

  • 多くの開発者ブログで高評価されている
  • インターフェイスデザインがかっこいい
  • 階層構造などの視認性が高い
  • 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
powered by アプリスコア.com

 

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

 

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

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

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

(/ω・\)チラッ

 

 

 

 


HTML5クイズ

  • 投稿日:2012/10/22
By: Michael Pollak

ウェブデザイナーの仕事をしてるものですから、当然ながらHTMLを打つ機会も結構多いです。

会社によってはデザイナーさんと別に「コーダーさん」がいて、HTMLはほとんどコーダーさんが打つなんて場合もあるらしいですが、私の勤めている会社はどちらかと言うと少数精鋭派なので、コーダーさんなんて人はいません。

「HTMLって何?食べれるの?」って方には難しいかも知れないですが、世の中のホームページはHTMLを使って書かれています(厳密にはXHTMLとか色々あるんですが)。

 

一言で言うと、コンピュータに「このホームページはこういう風に表示しろよ」と指示するための言語ですね。

HTMLにも規格みたいなもんがありまして、最近は「HTML5」っていう最新規格が策定中です。基本的には今までのHTMLと一緒なんですが、インターネットが普及し始めた頃と今ではだいぶウェブサイトを取り巻く状況も変わってきてますんで、この辺でいっちょ規格を見直して、現在のウェブサイト・今後のウェブサイトのためにより良い規格をまとめようじゃないか…という事です。ハイ。

 

「じゃあその、えいちてぃーえむえるふぁいぶはいつから使えるの?」って話なんですが、実はもう様々なブラウザソフト(インターネット見るためのソフトね)は対応を始めてます。策定まだ済んでないけど。ここでも相変わらずマイクロソフトのインターネットエクスプローラーちゃんは足を引っ張っている訳ですが、まぁバージョン9から対応していくようですので大丈夫でしょう。

私は仕事でスマートフォン向けサイトの制作やる機会が多かったもんですから、HTML5も積極的に使う機会に恵まれたんですね(iPhoneやAndroid等の大抵のスマートフォンはHTML5に対応してるものが多いです)。

 

HTML5から新しく追加されたタグも出てきました。

「audio」というタグはその名の通りMP3ファイル等を設置する時に使ったりします。このaudioタグに対応したブラウザソフトで見ると、下記のようなプレーヤーが表示されるんですね。

今まではこういうプレーヤーはFlashだとかJavaScriptといったプログラミング言語を使って実装する必要がありましたが、HTML5ではaudioタグの中で該当するmp3ファイルを指定するだけでOKになります。

タグの書き方も簡単で、下記のようにしてsrcにオーディオファイルへのパスを書き、controlsと書けば上記のようなプレーヤーが表示されます。なおプレーヤーのデザインは各ブラウザソフトに依存するようで、CSSではコントロール幅のみ指定できる様です。

<audio src=”audio.mp3″ controls>

 

 

ところで、たまにですが自力でホームページを作り始めたという友人なんかに「HTMLのタグって全部覚えないとダメ?」とか聞かれることがあります。まぁ色々覚えている方がより正確なマークアップができるとは思うんですが、正直なところ全部覚えるのは難しいと思いますし、よく使うタグも割と限られてくるので丸暗記する必要は無いんじゃないかと思いますね。

というか、HTMLタグはリファレンス本を見ながら「う~んう~ん」としかめっ面で覚えるよりも、実際のウェブページをHTMLでガシガシ書きまくった方が早く覚えますし、どういう場面でどういうタグを使うべきか理解しやすいと思います。リファレンスは答え合わせ的に使うほうが役立つんじゃないかなーというのが、個人的な見解です。

 

んで「丸暗記より書いて覚えろ」という私の見解に矛盾する様ですが、HTML5のタグクイズみたいなものがあります(笑)まぁ沢山覚えておくに越したことはないですから(笑)

HTML5 Elements Quiz

やり方は非常にシンプルで、制限時間の5分以内にHTMLのタグ要素をバカスカ打ち込んでいくだけです。

打ち込む時は「<」みたいな記号は要りません。「p」とか「header」とかで打ち込んでいけばいいです。ちなみに要素が入力されると、自動的に認識するので「small」と打とうとすると、先に「s」が自動的に打ち込まれることになります。

打ち込むと上記の画像の様に、打ち込まれた要素が入力欄の下に並んでいきます。私は制限時間内にコンプリートしたことはありません。意外と制限時間内だと打てなかったりします。「ul」「li」のように関連したものはどんどん出てきますが、意外と「strong」とか忘れがちです。

HTML5をお勉強中の方は暇つぶしにでもいかがでしょうか。