Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

Angularで利用するSpread.Sheetsの独自タグ

 リスト6では、Spread.Sheetsのスプレッドシートやワークシートを独自タグで記述しました。独自タグの実体は、Spread.Sheetsの機能を提供するAngularのコンポーネントです。利用できる独自タグを表2に示します。

表2 Angularとの組み合わせで利用できるSpread.Sheetsの独自タグ
No. 独自タグの記述 意味
1 <gc-spread-sheets> スプレッドシート
2 <gc-worksheet> ワークシート
3 <gc-column>

 Spread.Sheetsの独自タグに属性を設定して、表示内容をカスタマイズする方法を、図4のサンプル(P002-component)で説明していきます。

図4 Spread.Sheetsの独自タグ利用例(P002-component)
図4 Spread.Sheetsの独自タグ利用例(P002-component)

Spread.Sheets独自タグの階層構造

 コンポーネントのテンプレートは、リスト7のように記述します。

リスト7 Spread.Sheets独自タグの記述例(P002-component/app/app.component.html)
<!-- スプレッドシート ...(1)-->
<gc-spread-sheets
  [hostStyle]="hostStyle" [newTabVisible]="newTabVisible">
  <!-- ワークシート1 ...(2)-->
  <gc-worksheet [name]="workSheetName1"
    [dataSource]="workSheetData">
    <gc-column [width]="column1Width"></gc-column> <!-- 列1 ...(3)-->
    <gc-column [width]="column2Width"></gc-column> <!-- 列2 ...(4)-->
  </gc-worksheet>
  <!-- ワークシート2 ...(5)-->
  <gc-worksheet [name]="workSheetName2">
  </gc-worksheet>
</gc-spread-sheets>

 スプレッドシートを表す<gc-spread-sheets>(1)の配下に、ワークシートを表す(2)と(5)の<gc-worksheet>を配置します。1つめのワークシート配下には、列を表す(3)と(4)の<gc-column>を配置します。このように、Spread.Sheetsの独自タグは、<gc-spread-sheets>→<gc-worksheet>→<gc-column>といった階層構造で利用します。

 各タグにAngularのデータバインディング([]で囲まれたタグ属性)でプロパティを設定します。プロパティの内容は、app.component.tsでリスト8のように記述します。

リスト8 Spread.Sheetsをカスタマイズするコンポーネント実装(P002-component/app/app.component.ts)
export class AppComponent {
  // スプレッドシートにスタイルを設定 ...(1)
  hostStyle:any = {
    width:"480px", height:"200px", marginTop:"20px"
  };
  // ワークシート追加を許可しない ...(2)
  newTabVisible:boolean = false;
  // ワークシート名を設定 ...(3)
  workSheetName1:string = "くだもの";
  workSheetName2:string = "その他";
  // ワークシートにデータを設定...(4)
  workSheetData:any = [
    {"種類":"リンゴ", "在庫": 100},
    {"種類":"みかん", "在庫": 50},
    {"種類":"ブドウ", "在庫": 30},
    {"種類":"バナナ", "在庫": 40},
    {"種類":"マンゴー", "在庫": 120},
    {"種類":"パイナップル", "在庫": 200}
  ];
  // 列幅の設定 ...(5)
  column1Width:number = 240;
  column2Width:number = 120;
}

 リスト8では、表3のようなプロパティをSpread.Sheetsに設定しています。

表3 リスト8で設定しているSpread.Sheetsのプロパティ
番号 独自タグ 独自タグの属性 意味 リスト8での変数名
(1) <gc-spread-sheets> [hostStyle] スタイル(幅、高さなど) any hostStyle
(2) <gc-spread-sheets> [newTabVisible] ワークシート追加を許可するかどうか boolean newTabVisible
(3) <gc-worksheet> [name] シート名 string workSheetName1, workSheetName2
(4) <gc-worksheet> [dataSource] 表示するデータ any workSheetData
(5) <gc-column> [width] 列の幅 number column1Width, column2Width

 (1)の[hostStyle]には、CSSのプロパティ名(「margin-top」ならば「marginTop」と記述)と、設定値のペアを含むJavaScriptオブジェクトを設定します。(4)の[dataSource]には、表示するデータ項目名とデータ値のペアをJavaScript配列で設定します。

 独自タグに設定できるすべての属性は、Spread.Sheetsのドキュメント(スプレッドシートワークシート)を参照してください。


  • 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