Web Tips Plus: 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

2014年11月28日金曜日

ObjGen - Live JSON Generator

// Model & generate Live JSON data values
// interactively using a simple syntax.
// String is the default value type
product = Live JSON generator

// Number, Date & Boolean are also supported
// Specify types after property names
version n = 3.1
releaseDate d = 2014-06-25
demo b = true

// Tabs or spaces define complex values
person
id number = 12345
name = John Doe
phones
home = 800-123-4567
mobile = 877-123-1234

// Use [] to define simple type arrays
email[] s = jd@example.com, jd@example.org
dateOfBirth d = 1980-01-02
registered b = true

// Use [n] to define object arrays
emergencyContacts[0]
name s = Jane Doe
phone s = 888-555-1212
relationship = spouse
emergencyContacts[1]
name s = Justin Doe
phone s = 877-123-1212
relationship = parent

// See our Help page for additional info
// We hope you enjoy the tool!

{

"product": "Live JSON generator",

"version": 3.1,

"releaseDate": "2014-06-25T00:00:00.000Z",

"demo": true,

"person": {

"id": 12345,

"name": "John Doe",

"phones": {

"home": "800-123-4567",

"mobile": "877-123-1234"

"email": [

"jd@example.com",

"jd@example.org"

"dateOfBirth": "1980-01-02T00:00:00.000Z",

"registered": true,

"emergencyContacts": [

{

"name": "Jane Doe",

"phone": "888-555-1212",

"relationship": "spouse"

{

"name": "Justin Doe",

"phone": "877-123-1212",

"relationship": "parent"

}

]

}

Free Web & Mobile (iOS, Android) Prototyping and UI Mockup Tool | InVision

JSON 2 HTML

2014年11月26日水曜日

JavaScript 連想配列のキーを取得するには

JavaScript 連想配列のキーを取得する方法

var sampleArray = { "First":"0001", "Second":"0002", "Third":"0003" };
for (var key in sampleArray) {
alert(key +" : "+ sampleArray[key] );
}

出力結果

First : 0001

Second : 0002

Third : 0003

2014年11月25日火曜日

table-cellの場合の英単語途中改行

CSS

#stepDiv .stepText {
display:table-cell;
vertical-align:middle;
width:187px;
max-width:187px; /*table-cellの場合、英単語途中改行にはmax-width必要*/
word-break: break-all; /*英単語途中改行IE9*/
word-wrap: break-word; /*英単語途中改行*/
overflow:hidden;
}

jQuery vs MooTools: 偉大な2つの JavaScript を選択する

2014年11月20日木曜日

WordPressのデータ移転方法

WordPressで社内専用サイトの構築

WordPressで社内専用サイトの構築

1.　社内専用のサイトを作成するためには、User Role Editotというプラグインと、User Acess Managerというプラグインを使えば簡単に構築することが出来ます。

20.　そこで、WordPress Access Controlというプラグインでサイト全体にアクセス制限をかけることも出来ます。WordPress Access Controlを簡単に紹介します。

2014年11月19日水曜日

jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする（Edit in Place）

jQueryを使ってテーブルのセルをクリックしたときに編集できるようにする（Edit in Place）

(function(documet){

$(document).ready(function(){
$("#edit-table > tbody > tr > td").click(edit_toggle());
});

function edit_toggle(){
var edit_flag=false;
return function(){
if(edit_flag) return;
var $input = $("<input>").attr("type","text").val($(this).text());
$(this).html($input);

$("input", this).focus().blur(function(){
save(this);
$(this).after($(this).val()).unbind().remove();
edit_flag = false;
});
edit_flag = true;
}
}

function save(elm){
alert("「"+$(elm).val()+"」を保存しました"); //保存する処理をここに書く
}
})(document);

jTable.org - A JQuery plugin to create AJAX based CRUD tables

jTable.org - A JQuery plugin to create AJAX based CRUD tables

データベース連動型のAjaxを使ったテーブル実装jQueryプラグイン「jTable」
CRUDの操作が可能でその場で編集、削除といった作業ができるのは便利です

文字列を省略して「…」を付与する方法

文字列を省略して「…」を付与する方法 – CSS/jQuery | Developers.IO

CSS

/* overflow:hidden、heightは必ず指定する */

.textOverflowTest3 {

    overflow: hidden;

    border: 1px solid #ccc;

    padding: 10px;

    width: 400px;

    height: 80px;

    background: #eee;

}

JavaScript

jQuery(function($) {

    $('.textOverflowTest3').each(function() {

        var $target = $(this);

        // オリジナルの文章を取得する

        var html = $target.html();

        // 対象の要素を、高さにautoを指定し非表示で複製する

        var $clone = $target.clone();

        $clone

            .css({

                display: 'none',

                position : 'absolute',

                overflow : 'visible'

            })

            .width($target.width())

            .height('auto');

        // DOMを一旦追加

        $target.after($clone);

        // 指定した高さになるまで、1文字ずつ消去していく

        while((html.length > 0) && ($clone.height() > $target.height())) {

            html = html.substr(0, html.length - 1);

            $clone.html(html + '...');

        }

        // 文章を入れ替えて、複製した要素を削除する

        $target.html($clone.html());

        $clone.remove();

    });

});

table-cell などの場合、$target.height() を固定値にするとよい。
while((html.length > 0) && ($clone.height() > $target.height())) {
↓
while((html.length > 0) && ($clone.height() > 60)) {

登録: 投稿 (Atom)