D3.jsで日本地図を作成しデータを反映するサンプル（コロプレス地図） ｜ Tips Note by TAM
前回の記事「D3.jsの使い方とグラフを作成するサンプル」に引き続き、今回もD3.jsを使用します。 今回はD3.jsを使用してブラウザ上に日本地図を作成し、 CSVファイルに記載された果物の都道府県別出荷量のデータを反映してみます。 ⇒サンプルデモ（平成25年産 主要果樹都道府県別出荷量） まずは必要なデータを準備します。 [準備1] 地図データの取得（日本地図の座標データ / JSONファイル） 日本地図は座標データを元にSVGの要素を使用してパスを作成します。 ひとつひとつ座標データを設定するのは大変なので、フリーの地理データを使用します。 フリーの地理データは下記のサイトで取得できます。 ●Natural Earth このサイトで取得できるデータはShape形式なので、 これをブラウザ上で使用するために、Shape形式→GeoJSON→TopoJSONの順番で変換します。 GeoJ
レスポンシブHTMLメールを作成する際の覚書 ｜ Tips Note by TAM
レスポンシブHTMLメールを作成することがあったので、覚書です。 おもに「テーブルレイアウトで、PCの時には横並びのカラムを、スマホの時には縦並びにする」 方法についてです。 普段、あまりHTMLメールを作成することがない方もいらっしゃるかと思いますので、 まず、HTMLメールを作成する際の大前提を。 だいたい以下のような感じです。 テーブルレイアウト Outlook（2007/2010/2013）がfloatに対応していないなど、 メーラーによって、CSSのサポート状況にばらつきがあります。 多種多様なメーラーでレイアウト崩れを起こさないためには、 テーブルレイアウトが基本です（今更感はありますが）。 ※主要メーラーのCSSサポート状況は以下で確認できます。 Guide to CSS support in email | Campaign Monitor CSSはインラインで記述 Gma
pushStateでブラウザの履歴を追加する ｜ Tips Note by TAM
Ajaxで動的にコンテンツを入れ替えるようなWebページでも、pushState、popStateを活用すると、履歴を追加し、ブラウザバックに対応することができるらしい。ということで、調べたことを簡単にまとめました。 ●pushStateとは HTML5から追加されたHistory APIのメソッドで、ページ遷移なしでスタックのみを積む（ブラウザの履歴を追加する）ことが出来ます。 使い方は、下記のように、「第1引数 state」、「第2引数 title」、「第3引数 URL（省略可能）」の3つの引数を指定します。 history.pushState(state, title, url); ・state 履歴に関連付する任意のオブジェクトを渡すことができ、そのオブジェクトはpopstateイベントハンドラから 参照することができます。 ・title 履歴のタイトルを指定できるようですが、現在
jQuery.extend() メソッドの使い方まとめ ｜ Tips Note by TAM
知っている人には当たり前のことかもしれませんが、使い方をまとめておきます。 jQuery.extend() は、基本的には複数のオブジェクトをマージして返してくれるメソッドです。 (プラグインのソースで、デフォルトの設定値を上書きする時などによく見かけますね） jQuery.extend(target[, object1][, objectN]) こんな感じで使います。 オブジェクト a の内容と b の内容をマージしたいとき、 var a = { id: 1, name: 'TAM' }; var b = { name: 'TAM-new', hobby: 'football' }; $.extend(a, b); console.log(a); // 結果: // { // id: 1, // name: "TAM-new", // hobby: "football" // } $.e
WordPressプラグイン「Advanced custom field」の基本的な使い方と用例 ｜ Tips Note by TAM
■基本 ・記述方法は「the_field()」と「get_field()」の二通り 値の内容を表示したいときは、the_field()を使います。 the_field('my_custom_01'); これで、現在表示している投稿の「my_custom_01」というキーの値を表示できます。 もしif文や変数などで使用する場合はget_field()を使用します。 $hoge = get_field('my_custom_01'); 入力されているか否かのチェックはget_field()で行います。 なので、私の使用頻度としては専らこちらの方です。 ・第二引数で投稿やページを指定することも可能 the_field('my_custom_01', 100); これで投稿IDが100の投稿（もしくはページ）の「my_custom_01」を表示出来ます。 この「the_field()」と「get_
Modernizr を使ってブラウザの機能にあわせた CSS, JS を書く ｜ Tips Note by TAM
今回は、HTML5, CSS3 を使ってウェブサイトをつくる際の助けになる JavaScript ライブラリ Modernizr をご紹介します。 HTML5, CSS3 では便利な機能が多数追加されましたが、ブラウザによって対応状況はまちまちです。 Modernizr を使うとブラウザの HTML5, CSS3 対応状況を簡単に調べることができるので、個々の状況にあわせたコードを比較的容易に書けるようになります。 バージョンの古い Internet Explorer 等に対応する際、コンディショナルコメントやいわゆる CSS セレクターハックを使用することがありますが、それらと同様のものと考えると分かりやすいかもしれません。 それではごくごく簡単ではありますが、以下に基本的な使い方をご紹介します。（バージョン等は記事執筆時点のものです。変更になっている場合があります。） 1. moder
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
