SHOEISHA iD

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

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

高機能JavaScriptスプレッドシート部品「SpreadJS」の活用(AD)

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

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

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

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

はじめに

 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)を実行してください。

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
高機能JavaScriptスプレッドシート部品「SpreadJS」の活用連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

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

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

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10540 2018/02/02 16:34

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング