SHOEISHA iD

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

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

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

よりExcelライクになった「SpreadJS」のコンテキストメニューやチャート機能を試す

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

ワークシートのアウトライン表示

 V11Jでは図11のように、階層データをアウトライン表示できるようになりました。

図11 階層データのアウトライン表示(p004-outline)
図11 階層データのアウトライン表示(p004-outline)

 アウトライン表示の処理はリスト7の通りです。

リスト7 アウトライン表示の処理(p004-outline/main.js)
// 表示データ ...(1)
var smartphones = [
  { name: 'iOS', indent:0 },
  { name: 'Apple', indent:1 },
  { name: 'iPhone XS', indent:2 },
(略)
];
// データとインデントを設定 ...(2)
for (var r = 0; r < smartphones.length; r++) {
  sheet.setValue(r, 0, smartphones[r]['name']);
  sheet.getRange(r, 0, 1, 1).textIndent(smartphones[r].indent); // ...(2a)
}
// アウトライン表示の設定 ...(3)
sheet.outlineColumn.options({
  columnIndex: 0,     // アウトラインの基準にする列(ここではA列)...(3a)
  showImage: true,    // 画像を表示
  showCheckBox: true, // チェックボックスを表示
  images: [           // レベルの高いほうから順番に画像を指定
    'img/1f4bf.png', 'img/1f3e2.png', 'img/1f4f1.png'
  ],
});

 (1)が表示するデータで、表示名(name)とアウトラインのレベル(indent)からなるJavaScriptオブジェクトの配列です。このデータを(2)でワークシートに設定します。このとき(2a)で、sheet.getRangeメソッドで取得したセルのtextIndentメソッドを実行して、各データのindentを設定しています。

 (3)はアウトライン表示の設定です。(3a)で、A列を基準にアウトライン表示するよう設定します。画像やチェックボックスの表示もここで設定します。

PDFエクスポート機能

 V11Jでは、クライアントサイドでのPDFファイルエクスポートを新たにサポートしました。図12のサンプルでは、「エクスポート」ボタンを押下すると、表示内容をPDFファイルにエクスポートします。

図12 PDFエクスポート機能の利用(p005-pdf)
図12 PDFエクスポート機能の利用(p005-pdf)

 PDFエクスポート機能を利用するために、index.htmlのhead要素で、表3のファイルへの参照を追加します。

表3 PDFエクスポート機能に必要なファイル(p005-pdf)
No. ファイル名 ファイルの役割
1 scripts/gc.spread.sheets.print.11.2.4.min.js 印刷機能のファイル
2 scripts/gc.spread.sheets.pdf.11.2.4.min.js PDF出力機能のファイル
3 scripts/FileSaver.js saveAsメソッドの実装
4 fonts.js フォントファイル

 No.1と2は印刷・PDF出力の機能を提供するSpread.Sheetsの追加ファイル、No.3は、ファイルを保存するsaveAsメソッドを提供するライブラリです。

 No.4は、日本語フォントを含むファイルです。リスト8のように、フォントファイルをBase64エンコードして、JavaScriptオブジェクトに設定します。本サンプルでは、日本語フォントにIPAexゴシックを利用しています。

リスト8 日本語フォントファイルの内容(p005-pdf/fonts.js)
var fontsObj = 
{'ipaexg.ttf':'<Base64エンコードしたフォントファイルの内容>'}

 PDFエクスポート機能で日本語を文字化けさせずに表示するため、まずリスト9のように、日本語フォントを登録します。

リスト9 日本語フォントを登録する処理(p005-pdf/main.js)
// 'ipaexg.ttf'フォントを登録 ...(1)
var fonts = {
  normal: fontsObj['ipaexg.ttf']
};
GC.Spread.Sheets.PDF.PDFFontsManager.registerFont(fonts); // ...(1a)
// フォントの関連付けを設定 ...(2)
GC.Spread.Sheets.PDF.PDFFontsManager.fallbackFont = function (font) {
  // フォント名を取得
  var fontInfoArray = font.split(' ');
  var fontName = fontInfoArray[fontInfoArray.length - 1];
  // フォント名が'Calibri'の場合、代替フォントを返却 ...(2a)
  if (fontName === 'Calibri') {
    return fonts.normal;
  }
}

 (1)は日本語フォントを登録する処理で、(1a)のPDFFontsManager.registerFontメソッドで登録します。(2)はフォントの関連付けを設定する処理で、ここでは(2a)で、デフォルトフォントの「Calibri」を日本語フォントに置き換えます。

 PDFエクスポートを実行する処理は、リスト10の通りです。

リスト10 PDFエクスポート処理(p005-pdf/main.js)
workbook.savePDF(   // エクスポート実行 ...(1)
  function (blob) { // 第1引数:成功時の処理 ...(2)
    var fileName = 'download';
    saveAs(blob, fileName + '.pdf');
  },
  function (error) { // 第2引数:失敗時の処理 ...(3)
    console.log(error);
  },
  { // 第3引数:オプション ...(4)
    title: 'Spraed.Sheets Export',
    author: 'Eiichi YOSHIKAWA'
  }
);

 ワークブックに対応するworkbookオブジェクトのsavePDFメソッドを実行します(1)。メソッドの第1引数(2)は成功時の処理で、blob変数として渡されるPDFファイル内容をsaveAsメソッドでファイルに保存します。第2引数(3)は失敗時の処理です。第3引数(4)はオプションで、ここではPDFファイルのタイトルと著者を設定しています。

まとめ

 本記事では、SpreadJSの新バージョンV11Jで導入された新機能と、その利用法を紹介しました。Spread.Sheetsに、よりExcelライクに利用できる機能が追加され、スプレッドシート部品としての完成度がいっそう高まりました。

参考資料

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

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

もっと読む

この記事の著者

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

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

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

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、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編 」他、著書多数

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング