Help us understand the problem. What is going on with this article?

Wijmo(Vue.js版)のサンプルをローカルで動かす

これは何?

おしごとで突然やることになってしまったWijmo。
しかし参考資料が全然ないので、進みが非常に悪い。
同じような思いをして欲しくないので情報共有兼備忘録として記載しました。
手始めにサンプルコードを元にした環境をサクッと構築する方法を以下に記載していきたいと思います。

想定している読者

  • Web系バリバリではないけどアサインされてしまった方(SIerあるある)
  • 「npm?なにそれうまいのくえるの?」って方

事前準備

  • npmのインストール
    • 公式サイトから推奨版をダウンロードしてインストールするだけ。簡単。
  • npmの動作確認
    • macOSならterminal、Windowsならcmdを開いて「npm」を実行し、なんらかの表示が出ることを確認
    • macOSではユーザーディレクトリへのアクセス権を聞かれることもあるが、許可で問題なし。

手順

  1. Wijmoのデモからソースコードを取得する
  2. ローカルでnpm installを実行する
  3. サーバーを起動してブラウザで表示する
  4. (オプション)サーバーを終了する

1.Wijmoのデモからソースコードを取得する

まずはWijmoのサイトを開きます。

Wijmo(ウィジモ) | Developer Tools〈開発支援ツール〉 - グレープシティ株式会社

画面右上の「デモ」を押下します。

スクリーンショット_2020-02-06_1_39_54.png

色々ありますが、今回はチャートを表示することにしましょう。
FlexChartの「デモを試す」を開きます。

スクリーンショット_2020-02-06_1_40_05.png

チャートの「積み上げチャート」を選択し、「Vue」に切り替えます。

スクリーンショット_2020-02-06_1_40_41.png

少し下へスクロールすると編集可能なコードエディタがあります。
右上の「ZIP」アイコンを押下し、ファイル一式をダウンロードしましょう。

スクリーンショット_2020-02-06_1_41_46.png

2.ローカルでnpm installを実行する

ダウンロードしたzipファイルを展開すると、以下のような構造になっています。
この中にある「package.json」に必要なソフトウェアの一覧が入っています。
確認して一つ一つ持ってくる、なんて前時代的なことをしなくても、npmにお願いすれば一括して持ってきてくれます。ありがたいですね。

スクリーンショット 2020-02-06 1.42.25.png

npmのコマンドを叩くため、ターミナルを起動して展開したフォルダに移動します。
移動には「cd」コマンドを使用します。
先頭からパーセント(%)まで元々表示されているものなので、それ以降を入力します。

console
cd 展開したディレクトリのパス(今回はDownloads/Chart_Bar_StackedBar_Vueに展開)

移動できたら今のディレクトリに何があるか確認します。
macOSでは「ls」コマンドを、Windowsでは「dir」コマンドを使用します。

console(macOS)
ls
console(Windows)
dir

展開したフォルダに格納されていたファイルが表示されれば、意図したディレクトリへ移動しています。

スクリーンショット 2020-02-06 1.44.12.png

それではnpmに活躍してもらいましょう。
以下のコマンドを入力してください。

console
npm install

スクリーンショット 2020-02-06 1.45.57.png

スクリーンショットではずらずらっとメッセージが出ていますが、実行した直後であれば目まぐるしくメッセージが変わっていることと思います。
また、ディレクトリにいつの間にか「node_modules」というフォルダが作成されていることに気が付くかもしれません。
npm installでインストールしたものは、ここに格納されています。
ネットワーク速度やディスクI/Oに依存するので一概には言えませんが、ここは時間がかかる部分です。
飲み物をとってくるなり、Qiitaで他の記事を見て待つなりしましょう。

3.サーバーを起動してブラウザで表示する

npm installが完了したら、いよいよブラウザ表示に移ります。
まずはローカルでサーバーを立ち上げましょう。

console
npm run start

無事に立ち上がると「Access URLs」の下にページを表示するためのURLが表示されます。

スクリーンショット 2020-02-06 1.46.59.png

この例では1つ目の「http ://localhost:3000」にアクセスしてみましょう。
ブラウザを開き、URLを入力して開きましょう。
無事に表示されましたね、お疲れさまでした。

スクリーンショット 2020-02-06 1.47.30.png

4. (オプション)サーバーを終了する

起動したサーバーはterminal/cmdを閉じて終了することもできますが、あまりおすすめしません。
ウインドウを開いたまま止めるにはcontrol+Cを入力します。

スクリーンショット_2020-02-06_1_47_13.png

以上、Wijmoライフの入門として、お役立てください。

Naoki_kkc
こんにちは、なんちゃらストアのナオキです。詰まった時の解決策や勉強したことをメモ代わりに投稿します。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away