Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Angularと高機能JavaScriptライブラリで作るスプレッドシートアプリ

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

Spread.SheetsをAngularプロジェクトに組み込んで実行

 図3のようにスプレッドシートを表示するサンプル(P001-basic)で、AngularプロジェクトにSpread.Sheetsを組み込む方法を説明します。表示されたスプレッドシートに数字や数式を入力することもできます。

図3 Angular+Spread.Sheetsでスプレッドシートを表示(P001-basic)
図3 Angular+Spread.Sheetsでスプレッドシートを表示(P001-basic)

 まず、プロジェクトのsrc/appフォルダーにlibサブフォルダーを作成して、表1のファイルを配置します。TypeScript型定義ファイルは、TypeScriptが必要とするデータ型の情報をJavaScriptに付与するためのファイルです。

表1 Angularプロジェクトに配置するSpread.Sheetsのファイル
No. ファイル名 ファイルの役割
1 gc.spread.sheets.all.10.3.0.min.js Spread.Sheetsの本体
2 GC.Spread.Sheets.d.ts No.1に対応するTypeScript型定義ファイル
3 gc.spread.sheets.resources.ja.10.3.0.min.js Spread.Sheetsの言語リソースファイル
4 gc.spread.sheets.10.3.0.css Spread.SheetsのCSSファイル
5 gc.spread.sheets.angular2.10.3.0.js Spread.SheetsのAngular対応ファイル
6 gc.spread.sheets.angular2.10.3.0.d.ts No.5に対応するTypeScript型定義ファイル

 Webページファイルindex.htmlに、Spread.Sheetsの言語設定を表すmetaタグを記述します。

リスト3 Spread.Sheetsの言語設定をindex.htmlに記述(P001-basic/src/index.html)
<meta name="spreadjs culture" content="ja-jp" />

 Angular CLIの設定ファイル(.angular-cli.json)に、実行時にSpread.Sheetsのファイルを読み込むように設定します。(1)のstylesはWebページが利用するCSSを、(2)(3)のscriptsはJavaScriptを、それぞれ指定する属性です。

リスト4 Spread.SheetsのCSSとJavaScriptを設定(P001-basic/.angular-cli.json)
"styles": [
  "styles.css"
  "app/lib/gc.spread.sheets.10.3.0.css"                 // ...追加(1)
],
"scripts": [
  "app/lib/gc.spread.sheets.all.10.3.0.min.js",         // ...追加(2)
  "app/lib/gc.spread.sheets.resources.ja.10.3.0.min.js" // ...追加(3)
],

 Spread.SheetsをAngularから利用するため、Angularのルートモジュール定義ファイルapp.modules.tsに、リスト5のように記述します。

リスト5 Spread.Sheetsを読み込む設定(P001-basic/app/app.modules.ts)
// Spread.Sheetsモジュールを参照 ...(1)
import { SpreadSheetsModule } from "./lib/gc.spread.sheets.angular2.10.3.0";
(略)
@NgModule({
(略)
  imports: [
    BrowserModule,
    SpreadSheetsModule // Spread.Sheetsモジュールを設定 ...(2)
  ],
(略)
})

 (1)で、Spread.Sheetsの機能を提供するAngularモジュールSpreadSheetsModulesを参照して、(2)のimports属性に設定しています。この記述により、AngularでSpread.Sheetsの機能が利用できるようになります。

 最後に、スプレッドシートを表示するルートコンポーネントのテンプレートファイルapp.component.htmlに、リスト6のように記述します。

リスト6 Spread.Sheetsを表示するコンポーネントのテンプレート(P001-basic/app/app.component.html)
<gc-spread-sheets><!-- スプレッドシートに対応 ...(1)-->
  <gc-worksheet></gc-worksheet><!-- ワークシートに対応 ...(2)-->
</gc-spread-sheets>

 (1)の<gc-spread-sheets>がSpread.Sheetsの1つのスプレッドシート、(2)の<gc-worksheet>が1つのワークシートに対応しています。独自タグの詳細は後述します。

 ここまで設定後「ng serve --open」コマンドを実行すれば、図3のようにブラウザーにスプレッドシートが表示されます。


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

著者プロフィール

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

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

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

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

バックナンバー

連載:高機能JavaScriptグリッド部品「SpreadJS」の活用
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5