Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

 本記事では、グレープシティが提供するJavaScriptライブラリ「SpreadJS」に含まれるスプレッドシート部品「Spread.Sheets」を、JavaScriptフレームワークAngularと組み合わせて利用する方法を説明します。Spread.Sheetsのさまざまなスプレッドシート機能を、Angularを利用したWebページで活用できます。

目次

はじめに

 SpreadJSは、グレープシティが提供するJavaScriptライブラリで、さまざまなデータ表示機能をWebページに提供します。これまではスプレッドシート機能のみを提供してきましたが、グリッド表示から発展してさまざまなレイアウトを実現する「Spread.Views」コントロールを追加収録して2017年9月に新発売となりました。

図1 グレープシティが提供する「SpreadJS」
図1 グレープシティが提供する「SpreadJS」

 Spread.Sheetsを利用すると、Microsoft ExcelのようなスプレッドシートをWebページに表示でき、データの入力や計算が実現できます。スプレッドシートのレイアウトをGUIで作成できるExcelライクなWindows/macOSアプリ「Spread.Sheets デザイナ」を利用して、デザインにこだわった表示も可能です。

図2 Spread.Sheetsで表示されたスプレッドシート(グレープシティのデモページより)

図2 Spread.Sheetsで表示されたスプレッドシート(グレープシティのデモページより)

 SpreadJSは以前よりJavaScriptフレームワークAngularJS(AngularJS 1)との組み合わせに対応していましたが、今回のバージョンアップで新たにAngular(旧称:Angular 2)との組み合わせをサポートしました。

 本記事では、Spread.SheetsをAngularと組み合わせて利用する方法を説明していきます。また、より発展的な利用法として、SpreadJS同様にグレープシティから提供されているJavaScriptライブラリ「Wijmo」(ウィジモ)と組み合わせる例を紹介します。

対象読者

  • 多機能スプレッドシート部品を探している方
  • Angularプロジェクトでのライブラリ利用に興味がある方
  • 商用JavaScriptライブラリの利用例を知りたい方

必要な環境の準備

 一般にAngularではTypeScript(変換してJavaScriptにするAltJS言語のひとつ)を利用する場合が多いため、本記事ではTypeScriptでコードを記述します。また、Angularの環境構築や実行にNode.jsが必要となります。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Node.js v8.9.1 64bit版
    • Angular CLI 1.5.0
    • Microsoft Edge 41.16299.15.0
    • Spread.Sheets 10.3.0
    • Wijmo 5 5.20172.359

 Spread.Sheetsは、グレープシティのWebサイトからトライアル版をダウンロードできます。ダウンロードしたアーカイブファイルから、後述する方法でAngularのプロジェクトに組み込んでください。なお、製品版を利用したWebページを公開する場合は、ライセンスキーを取得して設定する必要があります。詳細は公式ページで説明されています。

前準備:Angular CLIでAngularプロジェクトを作成

 まず、Spread.Sheetsを組み込むAngularのプロジェクトを、コマンドラインツール「Angular CLI」で作成する方法を説明します。リスト1のコマンドでAngular CLIをインストールできます。

リスト1 Angular CLIをインストールするコマンド
npm install -g @angular/cli

 プロジェクト生成/実行を行うコマンドはリスト2です。(1)で「P001-basic」という名前のプロジェクトを生成して、(2)でそのフォルダーに移動し、(3)で実行します。(3)の「--open」は、実行時にブラウザーを自動的に起動するオプションです。

リスト2 Angular CLIでプロジェクトを生成して実行するコマンド
ng new P001-basic   【プロジェクトを生成 ...(1)】
cd P001-basic       【フォルダー移動     ...(2)】
ng serve --open     【プロジェクトを実行 ...(3)】

 なお、本記事のサンプルコードを実行するときは、プロジェクトフォルダーで「npm install」コマンドを実行してライブラリーをインストール後、(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-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5