Smile Engineering blog ( スマイルエンジニアリング・ブログ )

ジェイエスピーからTipsや技術特集、プロジェクト物語を発信します

「Vaadin」というフレームワーク

2015-10-30 13:27:38 | 最新技術動向展開
JavaのコードのみでAjaxを利用したWEBアプリケーションを開発することができる「Vaadin」というフレームワークを使ってみました。
今回は、このフレームワークのレポートです。

「Vaadin」、"ヴァーディン"と読みます。
当初フィンランドのIT Mill社が開発していたWEBアプリケーション開発用のフレームワークです。
現在、IT Mill社はVaadin社に社名が変わっています。

https://vaadin.com/home

同フレームワークのライセンスは、Apache License 2.0です。いわゆるオープンソースです。
2001年ぐらいから開発を開始しており、2007年にオープンソースとして公開されました。
Vaadinは、Google Web Toolkit(GWT)を拡張する形で実装されています。
GWTは、JavaのAWT/Swingのコーディング感覚でUIのJavaプログラムを記述すると、
これをJavaScriptに変換することができるものです。
つまるところ、Vaadinは、
JavaのコードのみでAjaxを利用したWEBアプリケーションを開発することができるフレームワークということです。
「Javaでのプログラミングは得意だけど、Ajaxを利用したリッチなものをJavaScriptで開発するのは苦手」
こんな方には嬉しいフレームワーク、それがVaadinということです。
※「Vaadin Elements」というものもありますが、今回は「Vaadin Framework」についてです。

概要を理解したところで、早速Vaadinに触れてみたいと思います。

Vaadin、どのように使うのでしょうか?
Vaadinですが、Javaの代表的なIDEであるEclipseおよびNetBeansでの開発をサポートしています。
例えば、EclipseにVaadinのプラグインをインストールすると、EclipseでVaadin Frameworkを用いたWEBアプリケーションの開発ができるということです。
イメージとしては、Eclipseで「新規 -> プロジェクト -> Vaadinプロジェクト」という感じで簡単にWEBアプリケーションのプロジェクトが出来るということです。

EclipseでのJava開発に慣れている人は「Vaadinを使った開発、簡単そう」と思ったことでしょう。
Javaでなくても、何らかのIDEで開発を行っている方も、簡単そうなイメージは感じとって頂けたかと思います。

ちょっとコードを書いてみました。
主要なコードだけ記しています。

--------------
@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);

TextField userName = new TextField("Username");
PasswordField passWord = new PasswordField("Password");
layout.addComponent(userName);
layout.addComponent(passWord);

Button button = new Button("Login");
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
Notification.show("LOG IN!!", Type.HUMANIZED_MESSAGE);
}
});
layout.addComponent(button);
}
--------------

「TextField」と「PasswordField」のインスタンスを生成して、
layout.addComponent(userName) を呼び出していますね。
何かに貼りつけていますね。

こんなコードで出来た画面がこちら。



HTMLのソースはこんなです。

--------------
<head>


<style type="text/css">html, body {height:100%;margin:0;}</style>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/hello_vaadin/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/hello_vaadin/favicon.ico">
</head>
<body scroll="auto" class=" v-generated-body">


<noscript>
You have to enable javascript in your browser to use an application built with Vaadin.
</noscript>

<script type="text/javascript" src="./VAADIN/vaadinBootstrap.js?v=7.5.8"></script>
<script type="text/javascript">//click here or press ESC to continue.",
"url": null
},
"authErrMsg": {
"caption": "Authentication problem",
"message": "Take note of any unsaved data, and click here or press ESC to continue.",
"url": null
},
"sessExpMsg": {
"caption": "Session Expired",
"message": "Take note of any unsaved data, and click here or press ESC key to continue.",
"url": null
},
"vaadinDir": "./VAADIN/",
"debug": true,
"standalone": true,
"heartbeatInterval": 300,
"serviceUrl": "."
※一部省略
--------------

不思議です。「Username」や「Password」はどこにいったのでしょうか。
次回、Vaadinの内部を探ってみたいと思います。

monipet
  動物病院の犬猫の見守りをサポート
  病院を離れる夜間でも安心

ASSE/CORPA
  センサー、IoT、ビッグデータを活用して新たな価値を創造
  「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
  短納期HEMS開発をサポート!

GuruPlug
  カードサイズ スマートサーバ

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント

CPUの歴史

2015-10-09 09:00:00 | 最新技術動向展開
今回はCPUについてです。
最新のものに目を向けがちですが、
歴史を踏まえて紹介していきたいと思います。

1970年以前
 コンピュータのようなものは存在していましたが、演算装置には
 現在のCPUのような1つのIC(集積回路)ではなく、
 真空管やトランジスタ、複数のICを組み合わせて構成されていました。
 そして、1970年に世界初のワンチップのマイクロプロセッサが登場しました。
 F14戦闘機の飛行制御用に開発され、動作周波数は50Hz程度だったそうです。

1970年代
 性能的にCPUと呼べる程度のものが、この頃から世の中に出回り始めました。
 前半は電卓程度のプロセッサでしたが、後半に入ると8ビットのCPUが主流となり、
 やっとパソコンと認識できるようなものが世に出回りました。
 この年代に開発された8ビットCPUから派生したCPUが、初代ファミコンで採用されています。
 動作周波数は5MHz程度まで上がってきました。

1980年代
 16~32ビットCPUが主流となり、業務用ワークステーションという分野が一気に広がりましたが、
 パソコンの分野では16ビットCPUがまだまだ主流でした。
 Pentiumが登場するのは次の年代ですが、動作周波数は100MHzまで上がりました。
 なお、この時代に開発された32ビットCPUが、初代プレイステーションで採用されています。

1990年代
 初の64ビットCPUが登場し、サーバー用の高性能CPUとして採用されました。
 一方、パソコンの分野では16ビットから32ビットへの転換期でした。
 Windows95が発売された時は、ニュースでも大きく取り上げられましたが、
 OS自体は16ビットでしたので、32ビットOSであるWindowsNTを使用する人もいました。
 この頃から自作パソコンが復旧し始め、速度を求める流れが始まった気がします。
 動作周波数は1GHzを超えてきました。
 プレイステーション2では128ビットCPUが専用開発されたりもしました。
 
2000年代
 中盤までは速度重視の流れを引き継ぎましたが、動作周波数が4GHz程度まで上がると、
 それ以降は技術的な問題で、速度を上げられない領域に入りました。
 CPU内ではプロセッサとレジスタ(プロセッサ内部のメモリ)で
 データの出し入れをしながら演算しますが、すべて電気信号に乗せて行われます。
 電気が伝わる速度は変えられないため、プロセッサとレジスタの距離を近付けて製造することにより
 動作周波数を引き上げてきましたが、それも限界に来たようです。
 では、限界が来たからそのままかと言うと、そうではありません。
 次はマルチコア化と低電力化が進みました。

2010年代
 マルチコア化と低電力化は今も継続されていますが、単にプロセッサ数を増やすだけでなく
 パソコン用途では画像処理用のプロセッサを同居させたり、スマホ・タブレット用途では
 通信制御を行うプロセッサを同居させたり、今までのCPUとは違った付加価値を持たせるようになりました。

最近知って驚いたのですが、あのスパコン(京)の動作周波数が2GHzだという事です。
単に動作周波数だけで性能が決定されるのではなく、ディスク装置とかデータ転送方式とか
全体としての性能を決定付ける部分が重要になってきているのでしょう。

CPUの今後の性能向上はそれほど見込めない模様ですが、
その反面、CPU以外の部分にアイデアが注ぎ込まれるようになったと思います。
なにかいいアイデアを出して、一山当てたいですね(笑)

monipet
  動物病院の犬猫の見守りをサポート
  病院を離れる夜間でも安心

ASSE/CORPA
  センサー、IoT、ビッグデータを活用して新たな価値を創造
  「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
  短納期HEMS開発をサポート!

GuruPlug
  カードサイズ スマートサーバ

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント

ServiceWorker

2015-10-02 09:18:46 | 最新技術動向展開
前回の記事を書いてからずいぶんと時間があいてしまいました。
今回は前回の予告通り、「ServiceWorker」についてご紹介したいと思います。

ServiceWorkerとは何かを簡単に説明しますと、「バックグラウンドでJavaScriptを動作させ、
様々な処理をWebページの状態に関係なく実行することができる機能」です。
Webページ上のJavaScriptとは別のスレッドで動作する形となり、Workerの一種となります。
それでは簡単に使い方をご説明します。


■インストール方法
ServiceWorkerを使うにあたってはまず、Webページ上で動作するJavaScriptから
ServiceWorkerとなるJavaScriptファイルをブラウザにインストールする必要があります。
インストール後にServiceWorkerは待機状態となり、画面を更新することで動作が開始します。
ServiceWorkerのJavaScriptに記述することで、独自のインストール処理を指定することもできます。

  ◆UIスレッド
  // ServiceWorkerをインストールする。
  navigator.serviceWorker.register("serviceWorker.js");

  ◆ServiceWorkerスレッド(serviceWorker.js)
  // UIスレッドでnavigator.serviceWorker.register関数が呼ばれると、
  // ServiceWorker側ではinstallイベントが発火する。
  // event.waitUntil関数を利用すると、
  // インストール処理に独自の処理を追加することができる。
  self.oninstall = function(event) {
    event.waitUntil(
      // Promiseを用いた非同期処理を指定する。
      new Promise(function(resolve, reject) {
        // ~処理~

        // 処理が完了したらresolve関数を呼ぶ。
        resolve();
      });
    );
  }


■ServiceWorkerの開始方法
先ほどまででServiceWorkerをインストールすることはできました。
しかしそのままでは画面を更新するまでは動作が開始しません。
インストールしてすぐに動作させたい場合はclaim関数を呼ぶ必要があります。

  ◆ServiceWorkerスレッド
  // ServiceWorkerがactivateされた後でないとclaim関数を呼ぶことができない。
  // なのでactivateイベント中に実行する。
  self.onactivate = function(event) {
    event.waitUntil(self.clients.claim());
  };


■ServiceWorkerとUIスレッドの通信方法
ServiceWorkerはUIとは別のスレッドで動くため、
直接データをやり取りしたり、ServiceWorkerから画面を操作したりすることができません。
そのため、MessageChannelを用いて通信する必要があります。

  ◆UIスレッド
  // ServiceWorkerからの連絡を受け取れるようにする。
  var messageChannel = new MessageChannel();
  messageChannel.port1.onmessage = function(event) {
    // event.dataにデータが格納される。
  };

  // ServiceWorkerへデータを送る。
  navigator.serviceWorker.controller.postMessage("message", [messageChannel.port2]);

  ◆ServiceWorkerスレッド
  // UIスレッドからの連絡を受け取れるようにする。
  self.onmessage = function(event) {
    // event.dataにデータが格納される。

    // 応答を返す。
    e.source.postMessage("Response is here.");
  };

ただし、この方法ではUIスレッドからServiceWorkerへ通信することはできても、
ServiceWorkerからUIスレッドへ通信することができません。
ServiceWorkerから通信するには、ServiceWorkerが保持するClientsを利用する必要があります。
長くなるため、今回は割愛させていただきます。


■ServiceWorkerを使ってできること
ServiceWorker内ではDOMへアクセスすることができません。
また、完全に非同期な設計をされているため、XHRやlocalStorageなどの同期型APIも利用できません。

その代わりに、新たに用意された各種APIを利用することで様々なことが実現できます。

◆Fetch API
XHRの代わりにHTTP通信を可能とするAPIです。
キャッシュの制御やCORSなどをXHRよりも細かく制御することができます。
また、UIスレッドにてXHR通信を行った際に、ServiceWorker側でその通信をフックして、
サーバーの代わりに応答したり、別のリクエストに書き替えたりすることができます。

◆Cache API
詳細なキャッシュ制御を可能とするAPIです。
Fetch APIと組み合わせて、
「キャッシュがあればそこから応答し、なければサーバーに問い合わせる」
というような、これまでブラウザが自動でやっていたキャッシュに関する部分を
自分たちで制御することができます。

◆Push API
スマートフォンなどに通知を出すことができるAPIです。
これまでのWebでは、ブラウザを閉じたり、タブを閉じたりすると、
Webページから何かアクションを起こすことができませんでした。
Push APIを利用することで、ユーザがWebページから離れたあとも
「通知」という形でアクションを起こすことができるようになります。

◆Background Sync
「通信ができるようになったら自動で通信」というような処理を可能とするAPIです。
ServiceWorker、Fetch API、Cache APIを組み合わせることで、
端末がオフライン状態でもWebページを表示することが可能になります。
しかし、コメントを投稿したりすることはできません。
そういった場合に、「通信ができるようになったらあとで投稿」することができます。

他にも例えばこんな使い方ができるようです。
https://www.youtube.com/watch?v=2ugAVXRkr9U


いくつかAPIを紹介しましたが、他にも仕様検討中のAPIがいくつかあります。
上で紹介したAPIについても、仕様検討中の機能があったりします。
これまでの「Webページ」では考えられなかった機能がたくさん実現されそうですね。
今後の動向に期待です。


最後に、現在の仕様をもとに作られたServiceWorkerのデモサイトをご紹介します。

・ServiceWorkerとPush APIを用いたチャットサイト
 http://www.locchat.com/

 簡単な利用手順 
 1.Android端末のChromeブラウザから上記のサイトを開いてください。
  「通知を送信しようとしています。」というポップアップが出るので、許可してください。
  そうしたら、タブを閉じて、Chromeブラウザを終了してください。
 2.今度はPCのChromeブラウザから上記のサイトを開いてください。
  画面上部の入力欄からメッセージを入力して、Enterを押してください。
 3.Android端末に通知が届きます。

monipet
  動物病院の犬猫の見守りをサポート
  病院を離れる夜間でも安心

ASSE/CORPA
  センサー、IoT、ビッグデータを活用して新たな価値を創造
  「できたらいいな」を「できる」に

OSGi対応 ECHONET Lite ミドルウェア
  短納期HEMS開発をサポート!

GuruPlug
  カードサイズ スマートサーバ

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント