Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

まずは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)

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

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5