技術ブログ | 株式会社クラウディア » JavaScript https://cloudear.jp/blog クラウド専門の業務システム・社内ツール開発 Fri, 12 Nov 2021 05:00:35 +0000 ja hourly 1 http://wordpress.org/?v=4.0.1 Facebookが作ったJavaScriptライブラリ、Reactの威力を体感する https://cloudear.jp/blog/?p=1545 https://cloudear.jp/blog/?p=1545#comments Thu, 24 Sep 2015 01:03:20 +0000 https://cloudear.jp/blog/?p=1545 今回のエントリでは、最近注目を浴びているJavaScriptライブラリ「React」を取り上げます。

Reactとは

Reactはブラウザで動作するWebアプリケーションのUI（ユーザインターフェイス）を担当するJavaScriptライブラリです。DOM操作を通して画面の見た目を変えることに特化しています。

Reactの重要な特徴は３つあります。

JSXによるDOM操作の隠蔽

本来DOM操作は面倒で誤りやすいプログラムを書く必要があのですが、Reactは、JSXというJavaScriptを拡張した言語を提供することで、面倒なDOM操作をプログラマから隠してくれます。

その代わりJSXをJavaScriptに変換するという開発上の手間が必要ですが、JSXはこの手間を上回る利便性を提供してくれます。

一方向データバインディング

Reactでは「データ」→「画面（HTML）」という方向でしかデータが流れません。AngularJSなどは画面でユーザの入力を検出したらデータに反映してくれるようですが、Reactはあくまでデータを画面に反映するのみです。

これはプログラムの見通しが良くなる効果がありますし、またReactを使うために覚えることが少なくなるという利点もあります。

コンポーネント指向

Reactは画面の部品化を促進します。HTMLの一部をコンポーネントとして切り出し、プロパティやイベントハンドラをコンポーネントの中にまとめて記述出来ます。

これにより、プログラムの記述方法が統一されるという効果や、いわゆるカプセル化による保守性向上が望めます。

Reactを使ったプログラム

さてこれ以降は、実際にReactを使ったプログラムを見て行きましょう。今回はHTMLファイルの中にスクリプトを書く方法を使います。

最小のサンプル

まずはReactを使ってHello Worldを書いてみます。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>Hello, React!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">

// コンポーネントを定義
var Hello = React.createClass({
    render: function() {
        return (
            <h1>Hello, React!</h1>
        );
    },
});
// コンポーネントを描画
React.render(<Hello />, document.getElementById('content'));

  </script>
</body>

scriptタグのtype属性値が”text/jsx”となっていることに注意して下さい。

このサンプルでは、Reactプログラミングで欠かすことの出来ない２つの操作を行っています。

  • コンポーネントを作る：React.createClass関数（”createClass”なのに”コンポーネントを作る”と表現しているのは大目に見て下さい）
  • 画面に描画する：React.render関数

また、Helloコンポーネントのrender関数に注目して下さい。HTMLタグを直接returnしていますね。この書き方を実現しているのが、JSXというJavaScript拡張言語です。

重要な３つの機能

驚くべきことに、ReactでWebアプリケーションを作る上で必須なのはたった３つの機能です。

１．子コンポーネントに属性を指定する

コンポーネントは入れ子に出来ます。１つのコンポーネントで事が済むことはほとんど無く、いくつかのコンポーネントを組み合わせて画面を作って行くのが通常です。

なおここからのサンプルコードは、HTMLの部分が最小のサンプルと変わりません。ですのでscriptタグの中だけを記載することにします。

// 子コンポーネント
var Child = React.createClass({
    render: function() {
        return (
            <h2>{this.props.text}</h2>
        );
    }
});
// 親コンポーネント
var Parent = React.createClass({
    render: function() {
        return (
            <div>
                <h1>ここは親です</h1>
                <Child text="ここは子1です" />
                <Child text="ここは子2です" />
            </div>
        );
    },
});
// 親コンポーネントを描画
React.render(<Parent />, document.getElementById('content'));

ChildとParentという２つのコンポーネントを定義しています。そして親コンポーネントParentのrender関数の中でChildコンポーネントを使っています。render関数の中にはHTMLタグだけでなくコンポーネントを書くことも出来るのです。

重要な機能として、親から子に属性を通して値を渡すことが出来ます。以下の部分です。

<Child text="ここは子1です" />

Childコンポーネントにtext属性を付けています。一方、Childコンポーネントの中では次のようにしてtext属性値を使っています。

return (
    <h2>{this.props.text}</h2>
);

this.propsというオブジェクトを使うことで属性値にアクセス出来ます。

２．イベントハンドリング

コンポーネントの属性には関数を渡すことが出来ます。これを利用し、子コンポーネントのイベントを親コンポーネントでハンドリングすることが出来ます。

// 子コンポーネント
var Child = React.createClass({
    onClick: function() {
        this.props.onNowButtonClick(new Date());
    },
    render: function() {
        return (
            <div>
                <h2>{this.props.text}</h2>
                <button onClick={this.onClick}>現在時刻を通知</button>
            </div>
        );
    }
});
// 親コンポーネント
var Parent = React.createClass({
    handleNowButtonClick: function(pNow) {
        alert(pNow);
    },
    render: function() {
        return (
            <div>
                <h1>ここは親です</h1>
                <Child onNowButtonClick={this.handleNowButtonClick} text="ここは子です" />
            </div>
        );
    },
});
// 親コンポーネントを描画
React.render(<Parent />, document.getElementById('content'));

親コンポーネントにはイベントをハンドリングする関数handleNowButtonClickが増えました。またChildコンポーネントの属性にイベントハンドリング関数を渡しています。

子コンポーネントは少し複雑です。まずrender関数にbuttonタグを増やしonClick属性に自身のイベントハンドラ関数onClickを渡しています。

<button onClick={this.onClick}>現在時刻を通知</button>

そして自身のイベントハンドラ関数の中で、属性に指定された関数onNowButtonClickを実行しています。

onClick: function() {
    this.props.onNowButtonClick(new Date());
}

３．状態を扱う

最後の機能は状態を扱うためのものです。次のサンプルではボタンを押す度に画面の時刻表示が変わります。

// 子コンポーネント
var Child = React.createClass({
    onClick: function() {
        this.props.onNowButtonClick(new Date());
    },
    render: function() {
        return (
            <div>
                <h2>{this.props.time.toString()}</h2>
                <button onClick={this.onClick}>現在時刻を通知</button>
            </div>
        );
    }
});
// 親コンポーネント
var Parent = React.createClass({
    getInitialState: function() {
        return {
            now: new Date()
        };
    },
    handleNowButtonClick: function(pNow) {
        this.setState({ now: pNow }); // ←ここが重要！状態を更新します
        alert(pNow);
    },
    render: function() {
        return (
            <div>
                <h1>ここは親です</h1>
                <Child onNowButtonClick={this.handleNowButtonClick} time={this.state.now} />
            </div>
        );
    },
});
// 親コンポーネントを描画
React.render(<Parent />, document.getElementById('content'));

親コンポーネントにgetInitialState関数が増えています。この関数はコンポーネントの初期状態を返します。

getInitialState: function() {
    return {
        now: new Date()
    };
}

更にsetState関数を呼び出すことで状態を変更しています。

handleNowButtonClick: function(pNow) {
    this.setState({ now: pNow }); // ←ここが重要！
    alert(pNow);
}

もう１つ重要な箇所があります。子コンポーネントの属性に親コンポーネントの状態を渡しています。

<Child onNowButtonClick={this.handleNowButtonClick} time={this.state.now} />

ReactのすごいところはsetState関数を呼び出すと関連する箇所が自動で書き換わることです。プログラマはコンポーネントを定義し、render関数を書き、setState関数を呼ぶだけ。たったこれだけでWebアプリケーションがきれいに動きます。

データの更新を伴うサンプル

最後のサンプルとして、データの更新を伴う画面のコードを載せておきます。画面イメージは次のようになります。

スクリーンショット 2015-09-08 18.41.25

このサンプルはHTMLも変わっていますので全文を載せます。手軽に見栄えを良くするためにBootstrapを使っています。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8" />
  <title>ReactによるCRUDアプリ</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  <style>
    body {
        padding-top: 20px;
    }
  </style>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">
// テーブルの各行となるコンポーネント
var Rows = React.createClass({
    onDataRemove: function(pIndex) {
        this.props.onDataRemove({ index: pIndex });
    },
    render: function() {
        // 各行のタグを連結
        var rows = this.props.data.map(function(e, idx) {
            return (
                <tr key={e.id}>
                    <td>{e.title}</td>
                    <td>{e.content}</td>
                    <td>
                        <button onClick={this.onDataRemove.bind(this, idx)} className="btn btn-danger">
                            <i className="glyphicon glyphicon-trash" />
                        </button>
                    </td>
                </tr>
            );
        }.bind(this));
        // tableタグを作成
        return (
            <table className="table table-striped">
                <thead>
                    <th>タイトル</th>
                    <th>内容</th>
                    <th> </th>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>
        );
    }
});
// 入力フォームコンポーネント
var Form = React.createClass({
    onAddButtonClick: function(e) {
        // React.findDOMNode関数で入力項目を得ることが出来る
        var title = React.findDOMNode(this.refs.title).value;
        var content = React.findDOMNode(this.refs.content).value;

        // データ追加をイベント通知
        this.props.onDataAdd({ id: (new Date()).getTime(), title: title, content: content });

        e.preventDefault(); // デフォルトの動作をキャンセル
    },
    render: function() {
        return (
            <form>
                <div className="form-group">
                    <label htmlFor="title">タイトル</label>
                    <input ref="title" type="text" className="form-control" id="title" />
                </div>
                <div className="form-group">
                    <label htmlFor="content">内容</label>
                    <textarea ref="content" className="form-control" id="content" />
                </div>
                <button onClick={this.onAddButtonClick} className="btn btn-primary">追加</button>
            </form>
        );
    }
});
// ルートコンポーネント
var Root = React.createClass({
    getInitialState: function() {
        return {
            data: []
        };
    },
    handleDataAdd: function(e) {
        var data = this.state.data;
        data.push(e);
        this.setState({ data: data });
    },
    handleDataRemove: function(e) {
        var data = this.state.data;
        data.splice(e.index, 1);
        this.setState({ data: data });
    },
    render: function() {
        return (
            <div className="container">
                <Form onDataAdd={this.handleDataAdd} />
                <hr/>
                <Rows data={this.state.data} onDataRemove={this.handleDataRemove} />
            </div>
        );
    }
});
// ルートコンポーネントを画面に描画
React.render(<Root />, document.getElementById('content'));
  </script>
</body>

少し長くなりましたが、各コンポーネントの役割分担がはっきりしている上にHTMLとJavaScriptが１つのコンポーネントの中にまとまっているため、コードの見通しが良く読みやすいと思います。

またJSXのおかげでDOM操作のコードが一切現れていない点に注目して下さい。render関数にテンプレートを書いておけば、DOMを意識する必要がなくなります。

画面は常にデータに対して描画されます。ずれることはありません。またユーザの入力はsetState関数でデータに反映させることで、Reactが文字通りreact（反応）して必要な部分だけが再描画されます。

つまりReactを手にしたプログラマはデータ操作だけに集中してプログラムすれば良い、ということになります。Reactの真髄はここにあります。

実戦投入するときには

本エントリのコードはあくまでサンプルですので、実際にReactを実戦投入するときに、考慮すべきことがあります。

JSXの事前コンパイル

本エントリのコードはポータビリティを重視したため、JSXをブラウザでコンパイルしています。しかし実戦では事前にJSXをコンパイルし出力されたJavaScriptをHTMLから参照するようにするべきです。

事前コンパイルにはいくつかの方法がありますが、この解説はまたの機会に譲ることにします。

サーバサイドレンダリング

素直にReactを使っていると、HTMLの多くがJavaScriptが実行されるまで描画されないため、体感的にページの描画が遅くなります。そこでReactでは初期画面をサーバサイドでもレンダリング出来る仕組みが備わっています。

サーバサイドレンダリングの詳しい解説もまたの機会に譲ることにします。

Reactの注意点

Reactを通さずDOMを操作するのは厳禁！

これは、例えばjQueryを使ってDOMを追加／削除／変更することは厳禁！ということです。また、jQueryを通してイベントハンドラを設定することも厳禁です。これはReactが採用している「バーチャルDOM」という仕組みへの配慮です。

DOM操作というのは低速な処理です。そこでReactは、DOMを更新しなければならないときに、バーチャルDOMを使って差分を算出し、実際のDOMは最低限必要な箇所のみ更新する、ということをやっているのです。

ですので、Reactを通さずにDOMを更新してしまうと、バーチャルDOMと実際のDOMに齟齬が出来てしまい、Reactが正しくDOMを更新出来なくなってしまいます。

jQueryに慣れていればいるほど、この制限は辛いものになるでしょう。しかし一度Reactに慣れてしまうと、jQueryの手続き的なDOM操作がとても面倒かつ危険なものに思えてきます。ぜひReactを使ってみてパラダイムシフトを体感していただきたいと思います。

まとめ

覚えることが少なくとっつきやすいReact。実績も充分（何せFacebookで使われている！）です。JavaScriptにHTMLを埋め込むのが気持ち悪いと感じる方もいると思いますが、そこを乗り越えればものすごく便利に使えるライブラリです。

SPA（Single Page Application）タイプのWebアプリケーションを作るときは、ぜひ採用を検討してみて下さい。

]]> https://cloudear.jp/blog/?feed=rss2&p=1545 0 Adobe Edge Animate でアニメーションする https://cloudear.jp/blog/?p=967 https://cloudear.jp/blog/?p=967#comments Sun, 05 Apr 2015 14:13:31 +0000 https://cloudear.jp/blog/?p=967 みなさんこんにちは masa です。今日は HTML5 + JavaScript でアニメーションを作れる Adobe 『Edge Animate（エッヂアニメート）』を使って実際アニメーションするところまで取り上げてみたいと思います。

まずはこちらのデモをご覧ください。

トップ画面においてネットワークに白い光を走らせるアニメーションを作っています。
白い丸を動かすだけなので作業は簡単です！

さて、アドビソフトの購入を CreativeCloud に切り替えて久しいですが、アニメーションオーサリングソフトである『Edge Animate』は現在無料で利用できます。

Flash ほど高機能ではないものの、Illustrator でオブジェクトを作って、それらを組み合わせてアニメーションを組むには良いソフトだと思います。

普段から Adobe系ソフトを使っている人ならすぐにアニメーションは作れると思いますが、意外とその出来上がったアニメーションを貼り付けるのが簡単ではないので、その点も取り上げてみたいと思います。

 

まずは CreativeCloud から『Edge Animate （以下、EA）』をインストールします。
1

インストールが終わったらソフトを起動しましょう。
2

意外とメニューや画面が少ないと感じるでしょう。EA 内でオブジェクトを作り込む機能はあまりなく、既存の画像を読み込んでそれらを時間軸で配置して動かすというのがメイン作業になります。

今回は既存のトップ画面を読み込んで、その上に白い丸が移動するアニメーションを作成していきます。

ファイル＞新規作成

赤い線で囲った部分で、自由にキャンバスサイズを変更できます。すぐ右は背景なので、クリックして透明にしておくと良いです。
3

 

今回はサイズを 1600px × 500px にして背景画像を読み込みました。画像のインポートは「ファイル＞読み込み」からできます。
4

 

楕円形ツールで白い小さい丸を画面外に描きました。
5

6

 

次に赤い線で囲まれたボタンを押して、黄色のゲージを１秒先に進めます。そして、白い丸を動かしたい場所へ移動させます。
7

ここまでできたら、Ctrl + Enter を押してみてください。ブラウザが起動してアニメーションが開始します。
確認しながらアニメーションを作りこんでいきます。

最終的には冒頭でご紹介したように白い線が様々にほとばしります。→DEMO

 

  出来上がったアニメーションを自分のページに貼り付ける

アニメーションが出来上がったら「ファイル＞名前を付けて保存」で任意の場所に保存します。すると、以下のように複数のファイルが書き出されました。
8

上から

・インクルード用 js ファイルが入ったフォルダ
・元画像
・Edge Animation ファイル
・出力用 HTML
・実処理 js
・関数 js

となっていて、なんだかめんどくさい印象・・・

しかし！出力用の HTML を開けばどのようにファイルをインクルードして動かしているかなんとなくつかめるかと思います。

1.　サーバーのドキュメントルートに .an ファイル以外をすべてアップロードします
2.　出力用 HTML にある meta と同じように head 内に meta を書き写す
3.　出力用 HTML にある style を 自分の css ファイルに書き写す
4.　出力用 HTML にある script を自分の HTML ファイルに書き写す
5.　アニメーションを表示したい場所にを書き写す

 

これで自分の HTML を開けば、各 js ファイルやイメージをインクルードして、アニメーションが開始されるはずです。

いかでしたか？今日は画面から作ったアニメーションを HTML + JavaScript に書き出してくれる便利なツールをご紹介しました。JavaScript でコードから書くとかなりの労力になりますので、簡単なアニメーションぐらいなら EA を使うのも手だと思います。
みなさんもオリジナルのアニメーションでページを飾ってみてください。

]]> https://cloudear.jp/blog/?feed=rss2&p=967 0 『AngularJS』のフィルター機能は使わないほうがいい？ https://cloudear.jp/blog/?p=672 https://cloudear.jp/blog/?p=672#comments Sun, 15 Feb 2015 10:43:24 +0000 https://cloudear.jp/blog/?p=672 みなさんこんにちは、masa です。前回に続いて AngularJS を取り上げます。いやー AngularJS は奥が深いです。使いこなそうとすればするほどその引き出しの多さに驚かされます。
さて、今日はそんな AngularJS のフィルター機能について解説してみたいと思います。

旧来のようにサーバー側でデータを整形してから渡すのではなく、フロントエンド側でデータを受け取ってから整形する方法が AngularJS でいうフィルター機能です。

通常、シングルページアプリケーションを作る際、サーバーサイドの仕事はデータベースを操作してフロントに JSON 形式などでデータを渡すことがメインとなりますが、データの整形はどちらでやるのがいいのか？ということ。

結論から言ってしまうと

 

配列に対するフィルターは AngularJS でやらないほうがいい

 

たしかにサーバーサイドは常に生データをフロントに渡すだけにして、HTML 側のタグでちょちょいと整形するのが楽なことは楽です。整形し直したいときにあとでビジネスロジックをいじらなくて済みますし。

しかし、例として以下のロジックを見てください。

<div ng-controller="hogeController">

  <input type="text" ng-model="name"><br/>
  <button ng-click="memberAdd(name)">追加します</button>
  
  <div ng-repeat="member in members">
    {{member | hogeFilter}}<br/>
  </div>

</div>

ユーザーがテキストボックスに名前を入れて「追加します」ボタンを押すと、members に追加して表示します。そして members すべてに対して hogeFilter というカスタムフィルターを掛けています。

現在、members 配列の要素数が 50 だったとします。（つまりメンバーが50人いる）
この状態で Michael （マイケル氏）をメンバーに追加しようとすると、

 

１文字入力する度に50要素に対してフィルターが発動します

 

つまり、Michael 7文字すべてを入力した時点で 350 回フィルターが実行されることになります。これは AngularJS が1文字入力される度に、フィルター後のデータを監視しているためです。

これがもっと大きい配列になったりするとブラウザ側の処理がめちゃくちゃ重くなりますので、注意が必要です。もちろん、limitTo や orderBy のようなデータ表示数を絞ったり、ソートするようなものならいいかもしれませんが、普通は SQL でやってしまうと思います・・。

いかがでしたか？個人的にはフィルターはすべてサーバーサイドでやろうかなと思案しています。今後もちょいちょい AngularJS ネタを書いていきたいと思います。

]]> https://cloudear.jp/blog/?feed=rss2&p=672 0 「Handsontable」で Web上にテーブルを作成 https://cloudear.jp/blog/?p=483 https://cloudear.jp/blog/?p=483#comments Sun, 25 Jan 2015 05:31:21 +0000 https://cloudear.jp/blog/?p=483 みなさんは Webアプリケーション上のエディタって使っていますか？今日は Excel ライクなエディタ『Handsontable （ハンズオンテーブル）』をご紹介します。jQuery プラグインなので導入も簡単ですよ！

example_hot
まずは Handsontable 公式デモを 開いてみてください。エクセルのような表がありますので、セルをクリックするとリアルタイムに編集できます。例えばこれでエクセルを読み込み、Ajax で通信すれば、Webアプリケーション内でユーザーにリアルタイム編集させることも出来ちゃうわけです。すごい！

 

 jQuery プラグイン Handsontable の導入方法

まずは GitHub から 『handsontable.full.js』と『handsontable.full.css』をダウンロードします。次に、使いたい html ファイルのヘッダで上記二つのファイルを読み込みます。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>handsontable_test</title>
  <link rel="stylesheet" type="text/css" href='css/handsontable.full.css'>
  <script src='js/jquery-1.11.1.min.js'></script>   //jQueryもお忘れなく
  <script src='js/handsontable.full.js'></script>
</head>

 

続いて handsontable のスクリプトをヘッダ内に書きます。ちなみに今回はデモのソースを解説します。

<script>
$(document).ready(function () {

  var data = [     //表に流し込むデータを定義します。サーバーからJSONなどで持ってきてもOK
      ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
      ['2009', 0, 2941, 4303, 354, 5814],
      ['2010', 3, 2905, 2867, 412, 5284],
      ['2011', 4, 2517, 4822, 552, 6127],
      ['2012', 2, 2422, 5399, 776, 4151]
    ],
    container = document.getElementById('example'),  //後ほど表を展開する要素を指定
    hot;
  
  hot = new Handsontable(container, {      //以下はデータ指定と表示オプション
    data: data,            //さっき作ったdataを指定
    minSpareRows: 1,       //表の一番下にいくつ空行を表示するか
    colHeaders: true,      //カラムの名前を表示するかどうか
    contextMenu: true      //セルを右クリックしたときのメニューをすべて表示
  });
  
  
  function bindDumpButton() {    //以下は基本的にいじりません
  
      Handsontable.Dom.addEvent(document.body, 'click', function (e) {
  
        var element = e.target || e.srcElement;
  
        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();    //関数実行

});
</script>

 

次は同じ HTML 内に表を展開する要素を書きます

<div id="example" class="handsontable"></div>

これで HTML を表示すると公式デモと同じ表が出て、操作可能となるはずです ヾ(´ω｀)ﾉ

 

 Ajax を使った応用編

最近作ったアプリケーションではサーバーから txt ファイルを読み込み、ユーザーに編集させてまたサーバーへ Ajax で投げ返すということをしました。使った表示オプションやバリデーションもそのまま記載します。

<script>
$(document).ready(function () {
    var data = [
        <c:forEach var="i" items="${ip_list}"> //springフレームワークから配列を読み込み
           {"ipname": "${i}"},                 //jspタグで配列を展開
        </c:forEach>
           {"": ""}
    ];

    //セルのデータにバリデーションをかけたい場合、正規表現を指定↓
    var ip_regexp = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;

    var msg = document.getElementById("msg");
    var container = document.getElementById('iptext');
    var hot = new Handsontable(container, {
        data: data,
        colWidths: 400,          //カラム幅をピクセル指定
        currentRowClassName: 'currentRow',   //セルフォーカスを使いたい場合指定　後述
        currentColClassName: 'currentCol',   //セルフォーカスを使いたい場合指定　後述
        minSpareRows: 1,         //表の一番下にいくつ空行を表示するか
        contextMenu: true,　     //セルを右クリックしたときのメニューをすべて表示
        rowHeaders: true,        //行の名前を表示
        colHeaders: true,        //カラムの名前を表示
        colHeaders: ['ipname'],  //カラムの名前を指定
        columns: [
            {data: 'ipname', validator: ip_regexp, allowInvalid: false} //バリデ指定
        ],
        afterChange: function (change, source) {   //以下セル編集後の処理
            $.ajax({
                url: "http://192.168.2.1/rest",  //postするエンドポイントを指定
                dataType: "text",   //textデータをpostする(jsonでもOK)
                type: "POST",       //メソッドをPOSTに指定
                data: {data: change[0][2] + "," + change[0][3]}, //変更前&変更後データ
                success: function () {   //以下編集が成功した後の処理
                    msg.innerText = "設定を保存しました。";
                    $(this).delay(1500).queue(function() {
                       msg.innerText = "変更したいIPをダブルクリックして書き変えてください。";
                       $(this).dequeue();
                    });
                }
            });
         }
    });

    function bindDumpButton() {   //以下は基本的にいじりません
        Handsontable.Dom.addEvent(document.body, 'click', function (e) {
          var element = e.target || e.srcElement;
          if (element.nodeName == "BUTTON" && element.name == 'dump') {
            var name = element.getAttribute('data-dump');
            var instance = element.getAttribute('data-instance');
            var hot = window[instance];
            console.log('data of ' + name, hot.getData());
          }
       });
    }

    bindDumpButton();
});

</script>

 

 クリックしたセルを色フォーカスする

セルをクリックした時にそのセルをフォーカスさせたい場合は CSS に以下を追記します

(handsontable.full.css)

.handsontable .currentRow {
  background-color: #F9F9FB;  //色はご自由に～
}

.handsontable .currentCol {
  background-color: #E7E8EF;  //色はご自由に～
}

 

すると、こんな感じでクリックしたセルがフォーカスされます

hot2

いかがでしたか？今回は Web 上でエクセルのように表データを編集できる『Handsontable』をご紹介しました。このプラグインにはまだまだオプションがありますので、興味がある方は公式のオプションページを参考にしてみてください。

]]> https://cloudear.jp/blog/?feed=rss2&p=483 1