SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用(AD)

「Wijmo(ウィジモ) 5」のExcelライクスプレッドシートFlexSheet

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第6回

  • このエントリーをはてなブックマークに追加

まずはFlexSheetのスプレッドシートを体験

 FlexSheetでスプレッドシートを表示するもっとも単純なサンプルをリスト1に示します。

リスト1 FlexSheetでスプレッドシートを表示(001_wijmo_flexsheet1.html)
<!DOCTYPE html>
<html ng-app="MyApp"> <!-- モジュールを指定 ...(1)-->
<head>
<meta charset="UTF-8">
<title>Wijmo 5 FlexSheetサンプル1</title>

<!-- Wijmo ...(2)-->
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/5.20153.117/styles/wijmo.min.css" rel="stylesheet" type="text/css" />

<!-- Wijmoコントロール ...(3)-->
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.grid.filter.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.grid.sheet.min.js" type="text/javascript"></script>

<!-- Wijmoテーマ ...(4)-->
<link href="http://cdn.wijmo.com/5.20153.117/styles/themes/wijmo.theme.office.min.css" rel="stylesheet" type="text/css" />

<!-- Wijmoカルチャ ...(5)-->
<script src="http://cdn.wijmo.com/5.20153.117/controls/cultures/wijmo.culture.ja.min.js " type="text/javascript"></script>

<!-- AngularJSとWijmoのAngularディレクティブ ...(6)-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20153.117/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>

<script type="text/javascript">
    // Wijmoモジュール"wj"を指定して新規モジュールを作成 ...(7)
    var myApp = angular.module("MyApp", ["wj"]);

    // モジュールにコントローラーを定義 ...(8)
    myApp.controller("MyController", ["$scope", function($scope) {
    }]);
</script>
</head>

<!-- bodyタグ内でMyControllerを参照 -->
<body ng-controller="MyController">
<h1>Wijmo 5 FlexSheetサンプル1</h1>

<!-- FlexSheet表示 ...(9)-->
<wj-flex-sheet control="flexSheet1" style="width:640px;height:360px;">
    <wj-sheet name="Sheet1"></wj-sheet>
    <wj-sheet name="Sheet2"></wj-sheet>
    <wj-sheet name="Sheet3"></wj-sheet>
</wj-flex-sheet>

</body>
</html>

 (1)はAngularJSのモジュール指定、(2)~(6)はWijmoとAngularJSを参照する記述です。FlexSheetを利用するにはWijmoコントロールの参照(3)で表2のJavaScriptファイルを参照する必要があります。

表2 FlexSheetの利用に必要なWijmoコントロールのJavaScriptファイル
ファイル名 含まれる部品・機能
wijmo.input.min.js 文字列などを入力する機能
wijmo.grid.min.js グリッド部品(FlexGrid)
wijmo.grid.filter.min.js FlexGridのフィルタ機能
wijmo.grid.sheet.min.js FlexSheet

 (7)は(1)で指定したMyAppモジュール作成、(8)はモジュールにコントローラーを定義する記述です。このサンプルではコントローラーに特別の記述は必要ありません。

 (9)のwj-flex-sheetディレクティブ(独自タグ)でFlexSheetスプレッドシートを記述します。ここでは入れ子にしたwj-sheetディレクティブで3枚のワークシートを初期設定しています。

 リスト1を実行すると図2のように、Webページに空白のスプレッドシートが表示されます。このスプレッドシートのセルに値や計算式を入力してExcelのように利用できます。また画面下部タブ(TabHolder)でワークシートの切り替えや新規追加ができます。

図2 FlexSheetのスプレッドシート。関数の候補も表示される(001_wijmo_flexsheet1.html)
図2 FlexSheetのスプレッドシート。関数の候補も表示される(001_wijmo_flexsheet1.html)

次のページ
FlexSheetを活用する機能

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9284 2016/03/10 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング