Web Tips Plus: 12月 2014

<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
table {
  font-family: "Helvetica", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", Tahoma, sans-serif;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  border-collapse: collapse;
  border-spacing: 0;
}
table {
  margin: auto;
}
table, td, th {
  padding: 7px;
  text-align: center;
  border: 1px solid rgb(8,48,107);
}
th {
  background-color: rgb(8,81,156);
  color: white;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
jdata = [
    {
        "name":"bob",
        "salary":13000,
        "friends":[
            {
                "name": "sarah",
                "salary":10000
            },
            {
                "name": "bill",
                "salary":5000
            }
        ]
    },
    {
        "name":"marge",
        "salary":10000,
        "friends":[
            {
                "name": "rhonda",
                "salary":10000
            },
            {
                "name": "mike",
                "salary":5000,
                "hobbies":[
                    {
                        "name":"surfing",
                        "frequency":10
                    },
                    {
                        "name":"surfing",
                        "frequency":15
                    }
                ]
            }
        ]
    },
    {
        "name":"joe",
        "salary":10000,
        "friends":[
            {
                "name": "harry",
                "salary":10000
            },
            {
                "name": "sally",
                "salary":5000
            }
        ]
    }
];


d3.select("body").selectAll("table")
    .data([jdata])
  .enter().append("table")
    .call(recurse);

function recurse(sel) {
  // sel is a d3.selection of one or more empty tables
  sel.each(function(d) {
    // d is an array of objects
    var colnames,
        tds,
        table = d3.select(this);

    // obtain column names by gathering unique key names in all 1st level objects
    // following method emulates a set by using the keys of a d3.map()
    colnames = d                                                          // array of objects
        .reduce(function(p,c) { return p.concat(d3.keys(c)); }, [])       // array with all keynames
        .reduce(function(p,c) { return (p.set(c,0), p); }, d3.map())      // map with unique keynames as keys
        .keys();                                                          // array with unique keynames (arb. order)

    // colnames array is in arbitrary order
    // sort colnames here if required

    // create header row using standard 1D data join and enter()
    table.append("thead").append("tr").selectAll("th")
        .data(colnames)
      .enter().append("th")
        .text(function(d) { return d; });

    // create the table cells by using nested 2D data join and enter()
    // see also http://bost.ocks.org/mike/nest/
    tds = table.append("tbody").selectAll("tr")
        .data(d)                            // each row gets one object
      .enter().append("tr").selectAll("td")
        .data(function(d) {                 // each cell gets one value
          return colnames.map(function(k) { // for each colname (i.e. key) find the corresponding value
            return d[k] || "";              // use empty string if key doesn't exist for that object
          });
        })
      .enter().append("td");

    // cell contents depends on the data bound to the cell
    // fill with text if data is not an Array
    tds.filter(function(d) { return !(d instanceof Array); })
        .text(function(d) { return d; });
    // fill with a new table if data is an Array
    tds.filter(function(d) { return (d instanceof Array); })
        .append("table")
        .call(recurse);
  });
}
</script>

2014年12月10日水曜日

Googleアナリティクスとエクセルで場当たり的Web運用をステキに改善するコツ

Googleアナリティクスとエクセルで場当たり的Web運用をステキに改善するコツ／HARMONY | 【レポート】Web担当者Forumミーティング 2014 Spring | Web担当者Forum

2014年12月8日月曜日

ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」

ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」

http://pgwjs.com/pgwbrowser/

PgwBrowser has found:

{
   "userAgent": "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36",
   "browser": {
      "name": "Chrome",
      "group": "Chrome",
      "fullVersion": "39.0.2171.71",
      "majorVersion": 39,
      "minorVersion": 0
   },
   "viewport": {
      "width": 1265,
      "height": 707,
      "orientation": "landscape"
   },
   "os": {
      "name": "Windows 7",
      "group": "Windows",
      "fullVersion": "7.0",
      "majorVersion": 7,
      "minorVersion": 0
   }
}

2014年12月5日金曜日

Office TANAKA - Excel Tips[先頭の「'」(シングルコーテーション)を削除する]

WordPressに印刷 & pdf & e-mail機能をつけるプラグイン - Wordpressテンプレート無料配布！| WP-Sitebiz Themes

仕事でWordPressのサイト制作してるなら導入しておきたい、管理画面にマニュアルを表示できるプラグイン。 - よつば手帖

2014年12月4日木曜日

Code Snippets - Snipplr Social Snippet Repository

Find HTML 5 Basic Starter Template

2014年12月3日水曜日

HTML5の新要素をjQueryでappendとかするとIEでバグる件 - Webtech Walker

HTML の <head> 内の <title> の中身を jQuery で以下のように変更しようとすると、
IE8 でエラー「予期しないメソッドの呼び出し、またはプロパティアクセスです。」
になります。

$("title").html("新しいタイトル");　または　$("title").text("新しいタイトル");

このようなときは、

document.title = "新しいタイトル";

とします。

$("h1").html("新しいh1タイトル");

でエラーとなるときは、

$("h1").empty().html("新しいh1タイトル");

としたらOKでした。

参考
http://js.studio-kingdom.com/jquery/manipulation/html