SHOEISHA iD

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

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

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用(AD)

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用!~まずは表とチャートから解説~

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用 第1回

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

まずプロジェクトを生成して環境を整えよう

 今回は初回なので、最初に実装の元となるプロジェクトを生成する方法を説明します。

手順1:基本的なプロジェクトの整備

 任意のパスに「p001-wijmo」フォルダーを作成して、その中で「npm init」コマンドを実行します。このコマンドでは対話的にプロジェクトの設定ができますが、今回はすべてリターンキーを押してデフォルト値を受け入れます。コマンドの実行が終わると、プロジェクト設定ファイルpackage.jsonが生成されます。

図4 npm initコマンドでプロジェクトを初期設定(p001-wijmo)
図4 npm initコマンドでプロジェクトを初期設定(p001-wijmo)

 「npm install --save-dev lite-server」コマンドを実行して、プロジェクトにlite-serverをインストールします。「--save-dev」は開発ツールとしてインストールする意味です。この時、package.jsonのdevDependenciesにlite-serverが追記されるほか、依存パッケージを含めたパッケージの詳細が記された「package-lock.json」が生成されます。

 次にフォルダーにHTMLファイルindex.htmlを任意の内容で追加します。lite-serverを利用してindex.htmlを表示するため、package.jsonのscriptsにリスト1の通りコマンドを定義します。

[リスト1]lite-serverを実行するコマンド(p001-wijmo/package.json)
"scripts": {
  "start": "lite-server"
},

 ここまで設定後「npm run start」コマンドを実行するとlite-serverが実行され、Webブラウザーが開いてindex.htmlの内容が表示されるようになります。

手順2:Wijmoとライブラリファイルを導入

 次に、生成したプロジェクトに、実行に利用するWijmoとその他のライブラリファイルを導入します。Wijmoは、公式サイトからダウンロードしたトライアル版のZipファイルから、配布物であるDistフォルダーをプロジェクトに追加して、フォルダー名を「wijmo」に変更します。

図5 プロジェクトにWijmoのファイルを追加(p001-wijmo)
図5 プロジェクトにWijmoのファイルを追加(p001-wijmo)

 また本サンプルでは、CSVファイルを解析する処理(詳細は後述)に「node-csv」ライブラリを使用します。packages/csv/dist/iife/index.jsファイルを、プロジェクトに作成した「csv」フォルダーに配置します。

図6 プロジェクトにnode-csvのファイルを追加(p001-wijmo)
図6 プロジェクトにnode-csvのファイルを追加(p001-wijmo)

手順3:JavaScriptとCSSファイルを配置してindex.htmlで参照させる

 Webページのスタイルを記述するCSSファイルindex.css、Webページの振る舞いを実装するJavaScriptファイルindex.jsを、それぞれプロジェクトに配置します。これらをWijmoやnode-csvとともに、index.htmlでリスト2の通り参照させます。

[リスト2]index.htmlでJavaScriptとCSSファイルを参照する記述(p001-wijmo/index.html)
<head>
(略:charsetやviewportなど)
    <!-- WijmoのCSSを参照 ...(1)-->
    <link rel="stylesheet" href="wijmo/styles/wijmo.min.css">
    <!-- スタイルを設定するCSSを参照 ...(2)-->
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>
<body>
(略:リスト3の内容)
    <!-- WijmoのJavaScriptを参照 ...(3)-->
    <script src="wijmo/controls/wijmo.min.js"></script>
    <script src="wijmo/controls/cultures/wijmo.culture.ja.min.js"></script>
    <script src="wijmo/controls/wijmo.chart.min.js"></script>
    <script src="wijmo/controls/wijmo.grid.min.js"></script>
    <!-- CSV解析のJavaScriptを参照 ...(4)-->
    <script src="csv/index.js"></script>
    <!-- 処理を実装するJavaScriptを参照 ...(5)-->
    <script src="index.js"></script>
</body>

 CSSは、Wijmoが提供するwijmo.min.css(1)と、自分で追加したindex.css(2)を参照します。JavaScriptは、Wijmoが提供するファイル(3)とnode-csvのファイル(4)、自分で追加したindex.js(5)を参照します。(3)で参照するWijmoのJavaScriptファイルを表2に示します。No.1と2は必ず必要で、さらに今回はチャートとグリッドを使用するのでNo.3と4を追加で参照します。今後使用するWijmoの機能が増えるごとに、JavaScriptの参照を増やしていきます。

表2 index.htmlから参照するWijmoのJavaScriptファイル(p001-wijmo)
No. ファイル名 役割
1 wijmo/controls/wijmo.min.js Wijmo本体
2 wijmo/controls/cultures/wijmo.culture.ja.min.js カルチャ(日本語)
3 wijmo/controls/wijmo.chart.min.js チャート(FlexChart)
4 wijmo/controls/wijmo.grid.min.js グリッド(FlexGrid)

次のページ
今回の目標:表とチャートを表示

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用連載記事一覧

もっと読む

この記事の著者

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

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング