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

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

HTML5のお勉強 第5回 ~HistoryAPI~

2015-12-25 13:51:25 | Java API
HTML5になって「HistoryAPI」という新たな機能が登場しました。
今回はこの「HistoryAPI」についてご紹介させていただきます。

HistoryAPIは、ブラウザが保持しているページの履歴を書き換えることができます。
読むよりも見てもらったほうがわかりやすいと思います。
下記URLのページを開いてみてください。
そして、おもむろに「戻る」ボタンを押してみてください。

http://s.codepen.io/jsp-t/debug/qbEEjJ

どうでしょうか。アクセスした覚えがないのに、
「HistoryAPIを使用して履歴を書き換えました。」というURLに飛びませんでしたか?

今お見せしたのはHistoryAPIの機能の一部です。
機能は他にもありますので、簡単に紹介していきます。



HistoryAPIを使用するには「history」という
グローバルオブジェクトを使用します。
historyには大まかに3つの機能があります。
・ページを遷移するAPI
・履歴を書き換えるAPI
・書き換えた履歴にアクセスすると呼ばれるイベント
それぞれ説明します。


◆ページを遷移するAPI
history.back();   // 前のページに戻る
history.forward(); // 次のページへ進む
history.go(-2);   // 2ページ前に戻る
history.go(2);   // 2ページ先へ進む
console.log(history.length); // 履歴に記録されたページ数を確認する。


◆履歴を書き換えるAPI
履歴を書き換えるAPIには下記の2つがあります。
history.pushState
history.replaceState

・pushStateは現在のページから別のページへと遷移したことにするAPIです。
 実行するとURLが書き換わり、
 ブラウザの「戻る」でpushState実行前のURLに戻ることができます。

・replaceStateは履歴を変更せずに現在のURLを変更するAPIです。
 実行するとURLが書き換わりますが、pushStateと違って履歴は変更されません。

pushState, replaceStateのどちらも
下記のように3つの引数を渡す必要があります。

var state = { msg: "hogehoge" };
var title = "タイトル文字列";
var url = "URL";
history.pushState(state, title, url);

・state
 ブラウザの「戻る」「進む」機能で遷移した際の
 popStateイベントで渡されるオブジェクトです。
 history.stateからも参照することができます。
・title
 現在は使用されません。
 将来的に何かに使う文字列のようです。
・url
 ブラウザのURL欄に表示するURLです。
 同じオリジン※である必要があります。
 ※オリジン ... 「http://domain.com:80」のような、
  プロトコル、ドメイン、ポート番号の組み合わせ

少し注意しないといけないことがあります。
pushState, replaceStateを利用することで、
実際には存在しないページのURLを表示させることができます。
しかし、その状態でページの再読み込みをすると、
「404 Not Found」なページが表示されてしまいます。
そのため、Webアプリケーションなどで使用する場合は、
ユーザが更新ボタンを押しても問題のないように作ると良いですね。


◆書き換えた履歴にアクセスすると呼ばれるイベント
pushState, replaceStateで編集したURLに遷移すると、
'popstate'というイベントが発生します。
このイベントを利用することで、「○○というURLを開いたら××を表示する」
といった処理が実現できます。
具体的には下記のように使用します。

// page1へのリンクをクリックしたので履歴に追加する
history.pushState({page: 1}, null, "?page=1");

// 戻るボタンを押すと'popstate'イベントが発生する。
window.addEventListener("popstate", function(e) {
 // このイベントが発生した時点でURLは書き換わっています。

 // pushState, replaceStateで渡したstateオブジェクトを確認する
 console.log(e.state);

 // 開いたページによって処理を変える
 switch(e.state.page) {
  case 1:
   // page1.htmlを開いたときの動作
   break;
 }
});



画面を再読み込みすると初期画面に移動してしまうような
Webアプリケーションなんて嫌ですよね。
Ajaxで画面内容を動的に更新しているような場合は
そういった問題がよく起こると思います。

HistoryAPIを使うことでそういった
「ユーザーが望まない動作」を減らすことができますね。
ぜひ活用してきましょう。

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

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

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

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

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

IoT(Internet of Things)時代のM2Mデバイス

2014-07-09 11:25:58 | Java API
歴史は繰り返す、というのはどの業界業種でも同様であるが、ソフトウェア業界には15-20年周期で姿形を変えながら繰り返されているものがある。システム構成の集中と分散の歴史だ。

かつて1980年代は汎用コンピュータが各社1台どーんと本社に設置され、支店や各部署から入力用されたデータ処理を一手に担っていた集中の時代だ。それがパソコンの登場と処理性能の向上、ネットワーク技術のオープン化などが相まってサーバとクライアントで相互に処理を行うクライアントサーバシステムが1990年代後半に全盛を迎える。分散の時代である。

その後、インターネットの普及や各家庭までブロードバンド化されたことで比較的大容量なデータ通信も低コストで行うことが出来る様になり、それまで専用線で通信していたネットワークがインターネットへシフトすることになった。またムーアの法則に代表されるようにコンピュータの処理能力自体が倍々ゲームの如く高くなってくるに至り、ここで世界のどこかに居る気の利いた方がつぶやいた。
「あれ?サーバに処理を集中させて結果をブロードバンド経由で返しても応答時間はほとんど同じじゃね?」

クラウドコンピューティングと呼ばれて再び集中の時代が到来してきていると思うが実は違う。全ての業務を一つのクラウド事業者に委ねていれば集中だが、複数の事業者に跨いでいれば分散になる。またクラウド事業者の中から見れば当然複数のサーバでサービスを構成しているので分散ということになるが、ユーザからはサービスそのものしか見えないので集中している様に見える。この様に集中と分散という議論自体が最近は霧散しているのだ。

クラウドコンピューティングの隆盛により最近何かと話題なのがビッグデータだろう。猫も杓子もビッグデータを叫んでいる気もするが、有用な活用事例もポツポツ現れているのを目にすると今後益々もてはやされることになるだろう。そこでそのビックデータをどうやって収集して新しい価値を創造していくのか、という議論がある。

多種多用な「モノ」(パッと思いつくのは自動車や家電だろうか)がインターネットにつながり、互いに情報を収集分析して例えば事故直後でこれから渋滞が予想される道路がリアルタイムで通知されたり、スマホを持って玄関に近づくと家族に限定して自動で自宅の鍵が開いたり、モノとモノがつながってより便利で高い付加価値のサービスを享受できる「モノのインターネット」がIoT(Internet of Things)と呼ばれている。

もう一つM2M(Machine-to-Machine)というのもIoTよりちょっと前から巷間を賑わせていて、最近はワイヤレスM2Mという産業分野が出来上がった様にも見える。M2Mも機械と機械が通信するというコンセプトなので同じ事を違う言葉で言っている様にも見える。

数年前はユビキタスという言葉も流行ったので、どれがどれだか正確なところを表現するには各社の製品サービスが互いに住み分けが完了した時点になってしまうかもしれないが、大変大雑把に行ってしまえば、M2Mを包含したユビキタスをさらに包含したのがIoTということになりそうだ。

このIoTが徐々に姿を現してくるためにまず必要になるのが、様々な情報をセンシングするためのセンサーそのものである。センシングする対象に拠ってセンサーの種類は異なるだろうが、温度センサー、湿度センサー、加速度センサー、人感センサー、近接センサー、などなど無数のセンサー群がある。

次に必要になるのが、センサーが出力するデータを収集しクラウドに設置されたセンターサーバへ伝達するための装置だ。シスコシステムズは「フォグコンピューティング」としてクラウドとデバイスの間をつなぎ、事前に分散コンピューティングを行う機器をフォグ(霧)と呼んでいる。またデバイス近傍のエッジに存在するコンピュータとしてエッジコンピュータやエッジサーバと呼ぶこともある。

最後にクラウドに設置されたセンターサーバが必要だが、各メーカーも顧客を囲い込んで自社のサービスを提供しているが、メーカーと関わりないオープンな世界ではIoT向けクラウドサービスとしてAPI経由でデータを送信すればデータを集約してグラフ化までしてくれる「xively」が無料で使える。かなり簡単で便利だということで既にIoT向けのクラウドサービスとしてデファクトスタンダードを形成している気配だ。

これからのIoT向けソリューションで各社が知恵を競い合うのはシスコシステムズの言うフォグでの分散コンピューティング分野だろう。センサーは各種揃っている。センターサーバもメーカ独自ないしxivelyの様なクラウドサービスが使えるとなると、必然的にここに差別化の視線が向けられる。またここにどんなデバイスを使用するのか、商用で使えそうなデバイスを日本国内で探すとなると正直心許ない。

安価で使えるものとしてはArduinoやRaspberry Piが挙げられるが双方一長一短がある。そもそも筐体が無いので、基盤を剥き出しにしたまま顧客に提供することに抵抗がある。

そこで弊社が販売しているGuruPlugである。USB、Wi-Fi、Bluetoothが使えるのでセンサーとセンターサーバを接続し、かつ収集したデータをある程度集計したのちにセンターサーバに送れる。なにより安価なため導入へのハードルが低いことが魅力になっていると考えられる。具体的に国内においてM2M分野でのGuruPlugが利用されている事例が増えつつあることがその証左だろう。

M2Mデバイスの候補やIoTプラットフォームを検討している場合は、まずはGuruPlugではじめてみるということをしては如何だろうか。


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

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

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

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

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

大獣医療展VETS EXPO 2014 出展しました

2014-06-30 10:21:07 | Java API
第一回 大獣医療展 VETS EXPO 2014 に出展しました。

会期:2014年6月25日(水)10:30~21:00/26日(木)10:30~19:00
会場:大さん橋ホール
   横浜市中区海岸通1-1-4

「ストレスフリーで動物を見守るジェイエスピー」をブースに掲げて「動物見守りシステム(paams)」を展示しました。
ステンレスの犬舎を、実際に動物病院様が使う、動物用のICUやケージに見立てて、中にぬいぐるみを入れ下にセンサーマットを敷いています。その他タッチパネルモニターを使い説明させていただきました。




来場された獣医さんは、全国各地からセミナー(手術や診断方法)を聞きに集まられ、私たちのブースにも現物をご覧になりに見えたりデモンストレーションのご依頼に来ていただきました。北海道から鹿児島までですが、当社は地方に対して対応ができないので各動物病院様の環境をお聞きし、それ専用に設定を行い郵送にて対応したく思いまが、予想以上に地方からのお問い合わせが多く実際の対応方法をさらに考える必要があります。

ジェイエスピーは、これまでの展示会で製品の紹介をしてきましたが、今回の「大獣医療展」はユーザー様である獣医師様の来場がほとんどで、今までにない手ごたえを感じています。

今後は販売を担当していただく、アローメディカル株式会社様の協力していただきどんどん販売していくように、準備を進めることで、動物病院様のお役に立つように頑張っていきます。


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

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

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

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

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

VETS EXPO 2104 出展

2014-06-24 14:59:38 | Java API
第一回 大獣医療展 VETS EXPO 2014にジェイエスピーが初出展します。

本展示会は、獣医師および動物病院関係者を対象に以下の要領で開催します。

会期:2014年6月25日(水)10:30~21:00/26日(木)10:30~19:00
会場:大さん橋ホール
   横浜市中区海岸通1-1-4
TEL:045-211-2307
展示会:展示ブース、ビジネスブース、PRブース、販売ブース約50
セミナー:主催者企画セミナー30セッション
     テーマ1.肝疾患をマスターする
     テーマ2.骨折治療をマスターする
     テーマ3.FreeTalk UP DATA & ADVISE
出展社セキナー 30セッション
入場料:
①10,800円(2daypass)
② 7,560円(1daypass)
③ 4,320円(トワイライトパス25日17:00~21:00
主催:有限会社スピリッツ HJS事務局
運営:株式会社イベント・レンジャーズ

ジェイスピーは「動物見守り機器開発グループ」初の獣医療展に出展を行いますす。
ブースでは
動物病院でご使用いただくことを目的にした、動物(大型犬から小型犬、猫、小動物)の病状見守りシステムを展示。
心拍状態・呼吸状態・体動が検知できる電気接点等を使用していないエアーマット型を用いた動物病状見守りシステムをデモンストレーションと共にご紹介いたします。動物に器具を装着する必要がなくストレスフリーでの検出が出来ますので動物に負担を掛ける事がありません。

セミナーでは
動物に器具を付ける事の無いストレスフリーで生体情報(心拍/呼吸状態、体動)をセンシングできるエアーマット型センサーによる動物見守りシステムの使い方と使用例、オプション品のご紹介を行います。
講演予定者:動物見守り機器開発グループ 営業課長 能勢 崇

生CMでは
病状見守りシステムの出来ることと、使用実例の紹介。



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

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

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

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

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

WeakHashMapクラス

2012-06-11 11:51:04 | Java API
何年もの間Javaを触ってきていても全く使ったことがない機能というものがあったりする。
java.util.WeakHashMapクラスがその一つだ。
何となくは分かるのだが、これを使わなければならない場面に遭遇してこなかったからぼんやりとしたままだった。
それとも、ぼんやりとしたままだから、今こそ使うべき時、と判断できなかっただけなのか…。
最近になってWeakHashMapに関わらざるを得ない状況があった。
そこでこれを機会にWeakHashMapがどのように動くのか調べることにした。

最大の特徴は、その名前にもある通り"Weak"なMapであること。この"Weak"は<参照>が<弱い>ことを意味している。
Mapのキーを参照するモノがWeakHashMap自身の他に存在しなくなると、そのキーとキーに関連する値、つまりエントリがWeakHashMapから削除されるようにできている。
WeakHashMapからキーへの参照が<強い>java.util.HashMapではこのようなことは難しい。
WeakHashMapの中をちょっとだけ見てみる。
Mapはエントリ(java.util.Map.Entry)を単位として情報を保持するが、WeakHashMapの場合、エントリはjava.lang.ref.WeakReferenceクラスを継承する内部クラスjava.util.WeakHashMap.Entryによって表される(WeakHashMap.EntryクラスはMap.Entryインターフェイスをimplementsする)。
WeakHashMap.EntryがreferentとするのはWeakHashMapのキーである。これに加えて、WeakHashMapは中に専用のjava.lang.ref.ReferenceQueueを持つ。
これらが組み合わさることで"Weak"なHashMapが実現される。
キーとWeakHashMap.EntryとReferenceQueueはどうつながっているのか?
あるエントリ(キー=X, 値=Y)に着目して大雑把に流れを見ると、次のような4つのステップA~Dを経ることになるだろう。

A 結びつく
WeakHashMapにエントリ(X, Y)が追加される。…(1)

B 使われる
(色々なことが起こる…)

C 忘れられる
Xがどこからも参照されなくなる。…(2)

GCが実行される。…(3)

WeakHashMap内のReferenceQueueにエントリ(X, Y)が追加される。…(4)

D 消え去る
WeakHashMapのいずれかのpublicメソッドが呼ばれる。…(5)

XのエントリがWeakHashMapから削除される。…(6)

ステップA~Dは非同期に起こる出来事だが、出来事を時間順に並べるとおおよそA→B→C→Dの順になるだろう。
ステップBの間にもごく短い時間、どこからも参照されなくなることは何度となくある。
でもそこをGCに見つからなければ、ステップCには行かない。
WeakHashMapのpublicメソッドはいずれも、中でWeakHashMap#expungeStaleEntriesメソッドを呼ぶ。
これはReferenceQueueをチェックし、その時点で不要になったことが分かったエントリ(=stale entries...?)をすべてWeakHashMapから取り除く働きをする。
このstale entriesのうちの1つが「Xのエントリ」だ。まったくもって他力本願な仕組みである。
WeakHashMapを使っている連中がpublicメソッドを呼んだら、そのついでにゴミ掃除をさせているわけである。
ということはつまり、GCがReferenceQueueにエントリを追加するとすぐWeakHashMapから削除される、とはならないということか。
それどころか、いつまでも残っている可能性があるようだ。(まあ、それはレアケースだろう、多分。)
ただし勘違いしてはいけない。エントリがあいも変わらずWeakHashMapに残っているからといって、WeakHashMapからそのエントリを取り出す手段は、もはやない。
一旦ReferenceQueueに入れられたら(4)、後は消え去る(ステップD)のみである。
(3)の段階で「Xのエントリ」のキーはXでも、その他の何かでもなくなっている。
(3)でGCはWeakReferenceであるエントリからそのreferentであるキーを取り除いてしまっている。
キーのないエントリはただ存在するのみである。でもこれはちょっと気持ち悪い。要らなくなったらすぐにでも消えて欲しい。
そんな時にはスレッドが必要だ。
つまりWeakHashMap専用ReferenceQueue専用スレッド上でWeakHashMap専用ReferenceQueueを見張っていて、WeakHashMap専用ReferenceQueueにエントリが突っ込まれたらすぐにWeakHashMapから削除してやればよい…と言いたい所だが、そうは問屋が卸さない。
WeakHashMap専用ReferenceQueueはprivateなのだ。
だから、WeakHashMap専用ReferenceQueue専用スレッドを持たせようとすると、WeakHashMap自体を改造する必要が出てくる。
このような"ナントカMap"は自分で作るしかない。そして何よりも、まず先にスレッドという高価なモノを用意してまでやる価値があるかどうか考えた方がよいのだろう。
ちなみに、WeakHashMapはjava.util.AbstractHashMapを継承する。名前に"HashMap"とあるが直接java.util.HashMapクラスを継承している訳ではない。

株式会社ジェイエスピー
システム部
鈴木 誠司


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

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

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

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

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