GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

Vue.js & Wijmo クイックスタート

Vue.jsは、近年注目が集まっているJavaScriptフレームワークのひとつです。AngularReactなどと同様に「コンポーネント」という考え方をベースとしたフレームワークでありながら、そのシンプルな構造と使いやすさが開発者の支持を集めており、GithubのJavaScriptカテゴリでは2016年と2017年の2年連続でスター獲得数1位を記録しました。

ドキュメントは日本語にも対応しており、プログラミング情報のナレッジコミュニティQiitaが公開する「Advent Calendar 2017ランキング」では上位にランクインするなど、日本でも高い人気を誇っていることが伺えます。

vue-cli でつくる Vue.js & Wijmo アプリ

WijmoはVue.jsをサポートしており、サンプルを多数収録するほか、vue-cli(Vue.jsアプリを新規作成できるコマンドラインツール)を用いたアプリ開発にも対応します。今回は、vue-cliでWijmoを使ったVue.jsアプリを作成する方法をご紹介します。

作成手順

1. vue-cliのインストール

vue-cliをインストールしていない場合は、次のコマンドを実行してvue-cliをインストールします。

npm install -g vue-cli
2. 新規アプリの作成

アプリを作成します。コマンドを実行するとアプリの設定をいくつか質問されますが、全てEnterを押して既定値を選択します。

vue init webpack アプリ名
3. アプリフォルダへ移動

アプリフォルダに移動します。

cd アプリ名
4. Wijmoパッケージのインストール

Wijmoパッケージをインストールします。下記はトライアル版のパッケージをインストールするコマンドです。製品版をインストールする場合は、製品に収録されるNpmImages/wijmo-commonjs-minフォルダを参照します。

npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.405.tgz
5. cssファイルのコピー

Wijmoに収録されるDist/Stylesフォルダからアプリケーションのsrcフォルダにwijmo.min.cssファイルをコピーします。

6. vueファイルの編集

src/App.vueファイルに、以下にある赤字部分のコードを追加します。

 <template>
   <div id="app">
     <wj-input-date :value="date" :value-changed="valueChanged"></wj-input-date>
     {{date.toLocaleDateString()}}

   </div>
 </template>
 
 <script>
 import 'wijmo/wijmo.vue2.input'
 
 export default {
   data () {
     return {
       date: new Date(2018, 0, 1)
     }
   },
   methods: {
     valueChanged: function (s) {
       this.date = s.value
       alert(s.value.toLocaleDateString())
     }
   }

 }
 </script>
 
 <style>
 @import 'wijmo.min.css'
 </style>

7. 実行

アプリを実行します。

npm start
8. 配布

アプリを配布する場合は、次のコマンドを実行して、distフォルダをWebサーバーに配布します。

npm run build

App.vueファイル

手順6.で編集したsrc/App.vueファイルはアプリのメインコンポーネントです。App.vueファイルにある各部の内容を詳しく確認することによって、Vue.jsの特徴を把握することができます。

  • <template>では、コンポーネントのHTMLコードを定義しています。<wj-input-date>というカスタム要素や、:valueなどのカスタム属性も利用可能です。
  • <script>では、コンポーネントのJSコードを定義しています。先頭でWijmoモジュールをインポートし、dataでコンポーネントが使用するデータを、methodsでメソッドを定義します。既定ではESLintという厳密なJavaScript構文チェックツールが実行されるため、文末にセミコロン「;」を記入するとエラーになるので注意してください。
  • <style>では、コンポーネントのCSSコードを定義します。@import文で外部ファイルをインポートすることもできます。

このように、Vue.jsではコンポーネントの全てのコード(HTML、JS、CSS)を1つの*.vueファイルに記述できるため、アプリの構造が非常に分かりやすくなっています。

また、Wijmoと組み合わせることによって、リッチなUIを持つ強力なアプリを簡単に作成することが可能になっていますので、ぜひお試しください。

InputManJSを2月14日にリリース!

本日2月14日(水)に、入力支援JavaScriptコントロールセット「InputManJS」を発売いたします。

InputManJSは、5つの用途別コントロール(テキスト・マスク・数値・日付時刻・カレンダー)を収録しているため、エンドユーザーに快適で正確な操作を促す入力フォームを実現できます。 

1月17日に発売を発表したニュースリリースでは、たくさんの反響をいただきました。

メディア掲載情報についてはこちらからご確認ください。

 

InputManはグレープシティの製品の中でも、多くのテクノロジーに対応している製品の1つです。1993年にActiveX版を発売し、現在ではWindows Forms、ASP.NET、WPFの製品ラインナップで展開。そしてこの度、JavaScript版である「InputManJS」の発売を開始いたしました。

日本生まれのInputManシリーズの機能を継承したInputManJSは、日本市場のあらゆる入力シーンを想定して設計され、和暦、漢数字、ふりがな取得など多くの日本固有の入力機能を備えます。

本日より無料で試せるトライアル版も公開していますので、ぜひ実際にお試しください。

≫「InputManJS」製品情報
≫「InputManJS」トライアル版
≫「InputManJS」チュートリアルデモ

InputManJSニュースリリース-メディア掲載情報

Publickey

@IT

マイナビニュース

CodeZine

gihyo.jp

クラウドウォッチ

IoTデバイスとSpread.Viewsで実現する社内環境モニタリングアプリ ― CodeZine掲載記事

f:id:GrapeCity_dev:20180208234317g:plain

開発者のための実装系WebマガジンCodeZineで連載中の「IoT時代の救世主! SpreadJSで作るデータ可視化アプリ」第3回記事が公開されました。

今回のテーマはIoTデバイスとセンサーを使った「社内環境モニタリングアプリ」です。現在、日本各地で猛威を振るうインフルエンザへの対策用として、社内の湿度や温度をリアルタイムにチェックしてアラートを出すWebアプリの作成に挑戦します。

アプリの作成にあたりクライアントサイドで利用するのは、もちろんSpread.Views。各種センサーから取得したデータを時系列でグリッド表示し、スパークラインを併用することで視認性の高いモニタリングを実現しています。

「Spread.ViewsとRaspberry Pi+ESP32搭載ボードNefry BTでインフルエンザ対策のBIツールを作る」を見る
『IoT時代の救世主! SpreadJSで作るデータ可視化アプリ』連載一覧はこちら

郵便番号と住所、その困難なデータ処理に挑みつづけること

入力支援コントロールの「InputMan」が最初にWPF版をリリースしたのは2011年4月でした。
アップデートを繰り返してきましたが、ついにメジャーバージョンアップしました。

基本機能はそのままで、最新開発環境に対応したバージョンです。

郵便番号から住所情報を取得

今回から「住所」に関する入力を支援するコンポーネント「JPAddress(JPアドレス)」を追加します。JPAddressは、これまで単体で提供していたコンポーネントでしたが、入力支援コントロールと一緒に提供して利便性を向上させました。

JPAddressの機能をASP.NET Web Formsで実装したデモ用のアプリケーションがあります。
住所情報の取得機能はWPFではカスタマイズが必要ですが、ASP.NET版にはInputManとJPAddressを連携した郵便番号コントロール(GcPostal)を利用できます。インストール不要ですぐにお試しいただける気軽さもあるので、ここではWebアプリケーションで紹介します。

続きを読む

入力支援コンポーネント InputManPlus for WPF 2.0Jを 発売

本日2月7日(水)より入力支援コンポーネント「InputManPlus for WPF 2.0J(インプットマンプラス)」を発売します。

最新環境Visual Studio 2017、.NET Framework 4.7/4.7.1に対応するとともに、今回より「住所」に関する入力を支援するコンポーネント「JPAddress(JPアドレス)」を追加します。

JPAddressは郵便番号から住所の取得はもちろんのこと、住所から郵便番号の検索、カスタマバーコード(郵便バーコード)用キャラクタの取得など各種の自動入力に対応しており、顧客管理や配送管理、マーケティング活動などにおける企業情報の取得など業務アプリケーションのさまざまな課題を解決します。

f:id:GrapeCity_dev:20180207101934p:plain

またInputManPlus for WPF 2.0Jより、長期サポートの要望に応える保守サービスを新たに提供します。(≫保守サービスの詳細はこちら

本日より無料で試せるトライアル版も公開していますので、InputManとJPAddressをぜひ実際にお試しください。

≫製品情報「InputManPlus for WPF 2.0J」≪

≫今すぐトライアル版を入手する≪

 

Copyright © GrapeCity, Inc. All Rights Reserved.