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企業
コメント
この記事をはてなブックマークに追加

天体望遠鏡

2015-12-08 09:30:00 | 最新技術動向展開
今年の冬は暖冬と予想されており、
これまでは比較的あたたかい日が続いていましたが、
徐々に朝晩の気温も下がり冬っぽくなってきました。

気温が下がると色々と思う事がありますが、
空気が澄んで星が良く見える事に気付きます。

そこで、今回は天体望遠鏡の仕組みについて、
紹介していきたいと思います。

まず、光学天体望遠鏡についてですが、
大きく分類すると2種類(屈折式、反射式)あります。

・屈折式
  簡単に言うと普通の望遠鏡と同じで、
  長い筒の両端にレンズが取り付けてあります。
  対物レンズで光を集め、接眼レンズで拡大する仕組みです。
  丈夫で設定も簡単なので、入門向けとして適していますが、
  大きいものを望むと、高価になってしまうのが欠点です。

・反射式
  対物レンズを持たず、筒の奥側に反射鏡を持ちます。
  この反射鏡で光を集めますので、中央が少し凹んだ形の鏡になっています。
  イメージとしては、交差点のミラーと反対の形ですね。
  集めた光を接眼レンズで拡大させる仕組みです。
  筒の側面に接眼レンズが付いている望遠鏡もありますが、
  反射させた光を筒内で、更に90度反射させています。
  屈折式と比較して、調整する部品が多いので手間も掛かりますが、
  大きめのものでも、比較的に安価で軽量にできる利点があります。

  有名なところでは、ハッブル宇宙望遠鏡も反射式です。
  人工衛星のように地球の大気外で活動していますので、
  大気による光の屈折を受けずに細かな所まで鮮明に観測できるそうです。

パラボラアンテナで観測したものが画像として表現する仕組みを
完全に理解したわけではありませんが、電波望遠鏡についても紹介します。

 天体からは可視周波数の波だけでなく、様々な波長の波が降ってきますが、
 電波望遠鏡の観測対象は、一般的にはセンチ波(3GHz~30GHz)とミリ波(30GHz~300GHz)です。

 実は、光学望遠鏡の観測対象である光も電波であり、周波数がより高い(405~790THz)というだけで、
 どちらも電磁波という事に変わりはありません。

 そして、電波は周波数が低い(波長が長い)方が遠くまで届きますので、
 電波望遠鏡の方が遠くまで観測できるという事になります。
 電波望遠鏡の存在意義がそんなところにあると思いました。
 (他にも可視光のように物理的な障害物に遮断されないなどのメリットがあります)

光学、電波どちらも新しい技術は進歩を続けていますが、
それぞれの技術の方向性に少し触れたいと思います。

 電波望遠鏡の方は、アンテナで受信した信号をどう処理するかという方向で進んでいるようです。
 有名なところでは、アルマ望遠鏡でしょうか。
 日本を含めた数か国共同の施設で、チリの高知(山頂施設は標高5000m)に設置されています。
 広範囲に設置した複数のアンテナから信号を拾い、電波の受信タイミングの差を
 スーパーコンピューターで計算して画像化したり・・・
 2012年から本格的に運用されており、公式サイトで画像が閲覧可能となっていますので、
 興味のある方は検索してみると良いと思います。

 一方、光学望遠鏡の新しいものといえば、2017年の運用開始を目指して
 巨大な反射式望遠鏡を国内で製作中です。
 反射鏡を計18枚のパネルから構成して、直径3.8mの一枚の反射鏡の役割をさせようというものです。
 各パネルはナノメートルレベルの誤差で製作され、反射鏡として稼働させる際も
 50ナノメートル単位でパネル角度を制御する事を目標としているようです。

いろいろ調べたりするうちに、天体望遠鏡が欲しくなりました(笑)
最後に、技術者の端くれとして一度はこういうプロジェクトに係わってみたいものです。

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

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

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

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

株式会社ジェイエスピー
  横浜に拠点を置くソフトウェア開発・システム開発・
  製品開発(monipet)、それに農業も手がけるIT企業
コメント
この記事をはてなブックマークに追加