まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:firefox

画像(特に写真)ファイルの中には、その写真を撮影した時の日時やカメラの種類、場所といった付属情報が含まれていることがあります。

それらのメタ情報を特定のフォーマットに従って画像に埋め込むことで、画像ファイルの中に、目に見えない形で撮影日時や撮影場所といった情報を含めて保存することができるようになります。

この「特定のフォーマット」のことを EXIF(EXchangable Image Format) と定義され、「イグジフ」などの略称で呼ばれています。

この Exif 情報をウェブブラウザから参照することもできます。多くはプラグインやアドオンなどの拡張機能として提供されています。私が個人的によく使っているのが、FireFox の Exif Viewer という拡張機能です:

https://addons.mozilla.org/ja/firefox/addon/exif-viewer/

2017030801


上記サイトから「Firefox へ追加」ボタンをクリックして FireFox にインストールし、FireFox を再起動すると有効になります。

使い方は簡単で、FireFox を利用中に Exif 情報を参照したい画像があったら、その画像の上で右クリックして「画像の EXIF データを表示」を選択、です(ちなみにこの画像は先日のベルサール秋葉原でのイベントで僕が撮影したものです):
2017030802


ウィンドウがポップアップして、選択した画像の Exif 情報が確認できます。画像に Exif 情報が含まれていた場合はこの中に表示されます。緯度(北緯 35.701442度)と経度(東経 139.770919度)が表示されていることがわかります:
2017030803


ちなみにこの場所を Google マップで開いてみると、見事にベルサール秋葉原・・・ではなく、少しズレがありますが(苦笑)、まあほぼ正解でした:
2017030804



つまり写真の中に位置などの情報が含まれていると、この方法で場所が特定できてしまうわけでもあります。まあ最近の SNS では「アップロードした画像の Exif は自動的に削除される」ような仕様になっているものが多いのですが、ネットに画像などをアップロードする際には気をつけましょう。


JavaScript(HTML5) の機能だけで、PC に付属したマイクから音声を入力(つまり PC の前で喋った音声データを取り込む)してみました。なお、この機能を使うには UserMedia に対応したブラウザが必要です。以下のコードは Windows 版の FireFox で動作確認をしています。

サンプルのコードはこんな感じになります:
<html>
<head>
<title>HTML5 Audio</title>
<script type="text/javascript"> 
//. ブラウザによる差異を吸収
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
 
//. バッファサイズ等
var audioContext = new AudioContext();
var bufferSize = 4096;
var cnt = 0;
 
//. 音声処理
function onAudioProcess( e ){
  //. 取得した音声データ
  var input = e.inputBuffer.getChannelData(0);

//. ↑この input に音声データが入っているので、これをストリーミングなどで処理すればよい。
//. 以下は実際にデータが入っていることを確認するためのサンプル処理
//. 音声データの最大・最小値を求める var mx = 0, mn = 0; for( var i = 0; i < bufferSize; i ++ ){ if( mx < input[i] ){ mx = input[i]; } if( mn > input[i] ){ mn = input[i]; } } //. 一度に取得した音声データの最大・最小値を求める(特に意味は無いが、データが取得できている確認) cnt ++; console.log( "[" + cnt + "] min = " + mn + ", max = " + mx ); } //. 音声処理開始 function initialize(){ navigator.getUserMedia( { audio: true }, function( stream ){ //. 音声処理 var javascriptnode = audioContext.createScriptProcessor( bufferSize, 1, 1 ); var mediastreamsource = audioContext.createMediaStreamSource( stream ); window.dotnsf_hack_for_mozzila = mediastreamsource; //. https://support.mozilla.org/en-US/questions/984179 mediastreamsource.connect( javascriptnode ); javascriptnode.onaudioprocess = onAudioProcess; javascriptnode.connect( audioContext.destination ); },function( e ){ console.log( e ); } ); } </script> </head> <body onload="initialize()"> </body> </html>

余談ですが、上記コードの赤字部分は今回一番迷った所。どうも FireFox のバグらしく、取得したメディアストリームがいつの間にか消えて(音声入力処理が止まって)しまう、という現象に遭遇しました。そのバグを回避するため、無理やり取得した値をグローバル変数化して消えないようにしています。バグの詳細についてはこちら:
https://support.mozilla.org/en-US/questions/984179


この HTML をマイク入力を ON にした状態で対象ブラウザで開くと、「PC のマイクをこのアプリと共有しますか?」という確認メッセージが表示されます。ここで「共有」を選択してください:
2016030301

共有すると画面に FireFox がマイクを利用中であること(知らないうちに音声を取得しているわけではないこと)を知らせるマークが表示されます。このマークが出ている間は PC のマイクで拾った音声をこのウェブページで共有していることを表しています:
2016030302


ここで F12 キーを押すとデバッグ画面が表示され、コンソールタブを見ると取得した音声データ1まとまり(4Kbyte)単位での最大値と最小値(簡単にいうと音の大きさ)を表示し続ける、というアプリになっています。
2016030303


実際には取得した音声データを保存(録音)して再生できるようにするとか、ストリーミングで処理してテキスト化するとか、・・・ という使い方になると思いますが、その入力を HTML で行う方法の紹介でした。

FireFox を使っていて https のサイトを訪れた時に「安全な接続ができませんでした」というエラーページに出くわすことがあります。それも選択肢が「再試行」と「報告」しかなくて、例外追加みたいな対応もできないケースです:
2015072501


よく見ると SSL が安全ではない、みたいなメッセージも書かれてます。この件に関する Mozzila としての見解はこちらです。昨年ですが、通称「プードルアタック」と呼ばれる脆弱性が SSL v3 に見つかり、SSL v3 は安全ではなくなってしまいました。その対策としてデフォルトでこのプロトコルを使ったサイトをブロックします、とのことです:
https://support.mozilla.org/ja/kb/enable-ssl-fix-cannot-connect-securely-error


まあ何もしないのはまずいと思うし、Mozzila の言いぶんはわかる。利用者には罪はなくて、サイトを提供する側に(安全ではない)SSL v3 を使わないでほしい、ということだと思っています。

とは言っても、すぐに対応できるとは限らないケースもあります。例えばサーバーイメージが仮想的に提供されているような場合は、その仮想イメージで SSL v3 を使っていることもあります。仮想イメージをすぐに更新してほしいと言われても困るし、仮に仮想イメージそのものは更新できたとしても既に仮想環境内で使われているイメージをどうやって更新するか、という問題だってあります。要はサイト提供側だけにこの問題の責任を追わせるのには無理があるのかな・・・と。

では諦めるしかないのか、というとそんなこともありません。ブラウザで利用するユーザーの自己責任にはなりますが、このような SSL v3 のサイトにアクセスするように FireFox の設定を変更することもできます。以下にその方法を紹介しますが、SSLv3 が安全ではないことに変わりはないので、社内の環境など、本当に安全が保証されているサイトでのみ、また目的のサイトへのアクセスが終わったらすぐに設定を元に戻るなど、自己責任で使ってください。

ではその設定方法を紹介します。まず FireFox を起動して、アドレス欄に about:config と入力します。「動作保証外である」という警告メッセージが表示されますが、「細心の注意を払って使用する」ボタンをクリックします:
2015072502


すると FireFox の挙動に関わる各種設定項目の一覧が表示されます。かなり大量にあるので、ここから目的の項目を探すのは大変なので、検索をします:
2015072503


「検索」と書かれたフィールドに "security.ssl3.dhe" と入力すると、少しずつ項目が絞られていきながら、ここまで入力した時点で2つの項目だけが表示されているはずです。またどちらも初期設定値の true が設定されているはずです:
2015072504


これら2行の項目の設定値を false に変更します。変更するには各行をダブルクリックすることで変更できます:
2015072505


この状態で先程エラーに成ったページに再度アクセスすると、ちゃんと見れるようになるはずです。



繰り返しになりますが、この設定状態は必ずしも安全ではないため、目的のページを見終わった後は、2箇所とも設定を元通りに戻しておくことを強くおすすめします:
2015072506


ちなみにプードルアタックとその対策についてはこちらで詳しく書かれていたので、是非参照してください:
SSLv3 の脆弱性 POODLE への対策を行う


Firefox OS 向けのネイティブアプリケーションを開発する手順を紹介します。

「ネイティブアプリケーション」と言うと、開発言語は iPhone だと Objective-C や Swift、Android だと Java 、といった具合にネイティブ開発用のコンパイル言語が一般的ですが、Firefox OS アプリの場合は HTML5 でアプリケーションを開発します。HTML5 で作る、ということは HTML やら JavaScript や CSS を組み合わせて UI やロジックを作っていく、ということを意味しています。これは C や Java で開発する場合と比べて、非常にハードルが低く、より多くのエンジニアが参画できるのではないかと感じます。

ただ Firefox OS の開発ではマニフェストファイルの存在や、その中で API の許可設定を行うこと、そして Android で言うところの「インテント」に近い連携が可能になっていることなど、Android の開発手法と似ている所が多い、という事実もあります。開発言語こそ Java と HTML5 の違いはありますが、アプリケーションパッケージの考え方としてはかなり近いという印象を持っています。そのため Android での開発経験があるエンジニアからすると、「開発言語が Java から HTML5 になった」という感じで、非常にとっつきやすいのではないかとも感じています。 


そんな Firefox OS 向けアプリケーション、まずは Hello World レベルのものを作ってみます。

事前に用意する必要があるのは Firefox OS シミュレータ、これは動作確認用です。Firefox OS シミュレータの導入方法については以前の私のブログエントリを参照してください:
Firefox OS シミュレータ

そしてテキストエディタです。もちろん Eclipse などの統合開発環境でも構いませんが、この Firefox OS 用アプリは HTML5 で作るので、HTML や JavaScript、CSS が記述できるエディタであれば何でも構いません。あまり複雑でないうちは Windows のメモ帳でも充分だと思います。


では Firefox OS 向け "Hello World" アプリケーションを作っていきます。これから作るアプリは3つのファイルから構成されます:
- helloworld.html (アプリケーション本体)
- manifest.webapp (マニフェストファイル)
- icon.png (アイコン画像ファイル)

helloworld.html はアプリケーションの本体となるファイルです。通常は JavaScript や CSS を外出しにして外部から読み込む形になるのが一般的ですが、今回は(それほど複雑な内容ではないので)全て1ファイル内に定義することにします。

manifest.webapp がマニフェストファイルです。アプリケーションの属性を指定するファイルです。Android アプリケーション開発の経験がある方であれば、同様のマニフェストファイルの存在をご存知だと思います。

そして icon.png はアプリケーションのアイコンです。無くても(デフォルトのアイコンが使われるだけなので)いいんですが、アプリをいくつも作っているとアイコンだけで区別できなくなってしまうので、とりあえず用意しておきました。今回は128x128 ピクセルのファイルを用意しました。Firefox OS アプリで使う画像ファイルには何種類かありますが、マーケットにリリースする際には 128x128 の画像ファイルが必要になります。その意味もあって最初に用意しておきました。なお、このファイルはマニフェストファイルで指定するので、ファイル名は何でも構いません。今回はこのようなシンプル(?)な画像を用意しました。
2014110401


icon.png は画像ファイルなので、あらかじめ用意しておく必要があります。では残る2つのテキストファイルをこれから作っていきましょう。


まずはこのアプリケーションプロジェクトを作るために専用のフォルダ(ディレクトリ)を1つ作っておきます。例えば c:\tmp\helloworld といったフォルダを作ります。これから3つのファイルをこのフォルダ内に作ります(icon.png はこのフォルダ内にコピーしておきます)。Eclipse を使う場合は "Static Web Application" のプロジェクトを作成して、全てのファイルをプロジェクトフォルダの直下に配置することになります。最終的にはこの図のようなフォルダ/ファイル構成になるように作っていきます:
2014110402


ではフォルダ直下に helloworld.html という名前の HTML5 ファイルを以下の内容で作成します。なお、日本語を使う場合のエンコードは UTF-8 にしてください:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<title>Hello World</title>
<script>
function sayHello(){
	alert( "Hello World!" );
}
</script>
<body>
<header>
<h3>Hello World.</h3>
</header>
<p><button onclick="sayHello();">メッセージ</button></p>
</body>
</head>
</html>

この HTML5 ファイルの内容についてはあまり解説は要らないと思っています。画面上に <h3> によるタイトルと、ボタンを1つ配置し、そのボタンがクリックされると sayHello() 関数が呼ばれ、画面に "Hello World!" というアラートダイアログが表示される、というだけのものです。

続いてマニフェストファイルを作成します。フォルダ直下に以下の内容で manifest.webapp という名前で、JSON 形式のテキストファイルを作成します:
{
  "name": "Hello World App",
  "description": "FireFox OS 用 Hello World アプリ",
  "launch_path": "/helloworld.html",
  "icons": {
    "128": "/icon.png"
  }
}

この manifest.webapp ファイルの中ではアプリケーションの情報を指定しています。まず "name" でアプリケーションの名前を128文字以内で定義します(必須)。"description" では、これがどのようなアプリケーションなのか、その説明を1024 文字以内で記述します(必須)。 "launch_path" では最初に読みこむファイルを指定します(必須)。

"icons" ではアプリケーションのアイコンを配列型で指定します。サイズに応じた指定が可能になっており、1つしか登録しない場合でも配列にする必要があります。この例では "128" を指定しているので 128x128 のアイコンが登録されています。マーケットプレースに登録する場合は最低でも 128x128 のアイコンが必要です。

マニフェストファイルに指定する項目は他にもあるのですが、今回はこれだけで動きます。では実際に Firefox OS シミュレータを使って動かしてみましょう。こちらを参考にして Firefox OS シミュレータのダッシュボード画面を起動します。そして "Add Directory" ボタンをクリックして、上記で作った manifest.webapp ファイルを指定します:
2014110403


manifest.webapp に書かれた内容に従ってアプリケーションやアイコンが読み込まれ、ダッシュボードに表示されます。このアプリケーションが読み込まれた状態で左の "Simulator: Stopped" と書かれた箇所をクリックして Firefox OS シミュレータを起動します:
2014110404


HelloWorld アプリケーションが Firefox OS シミュレータの中で実行されている状態で起動します:
2014110405


「メッセージ」ボタンをクリックすると、(JavaScript でプログラミングした通りに)メッセージボックスが表示されるはずです:
2014110406


これだけ、HTML5 で作ったアプリケーションが Firefox OS(シミュレータ)内で動作するところまでを確認できました。内容がシンプルという面もありますが、特別な環境なしのメモ帳程度のテキストエディタだけで作れるし、そんなに難しくなさそうですよね。

もちろん実際にアプリを作ろうとすると、CSS やライブラリを使ってモバイル端末に最適化したUIを用意したり、各種 API を利用するための権限設定をしたり、データの受け渡しの方法を設計した上でマニフェストに加えたり、と色々やることはあります。 ただベースとなるアプリはこの程度のコーディングで実現できる、というのはやはり魅力だと思っています。


 

最近、少しずつですが Firefox OS のアプリ開発を始めています。いずれこのブログでもまとめていくつもりですが、その準備的な意味もあって、Firefox OS シミュレータの導入手順だけを先に紹介しておきます。これをやっておくことで、アプリ開発はともかく Firefox OS がどんなものか、体験することができるようになります。

Firefox OS シミュレータは Firefox ブラウザのアドオンとして提供されています。なのでまずは Firefox ブラウザがインストールされていることが前提となります。Firefox 内で Ctrl + Shift + A でアドオンマネージャーを起動します:
2014110101


「アドオン入手」タブ内で "Firefox os simulator" を検索すると、最新版の Firefox OS シミュレーターが見つかるので、これをインストールします:
2014110102


インストールが完了すると「拡張機能」タブ内から参照できます。これでインストールは無事完了:
2014110103


インストール後は FireFox の右上のメニューから 開発ツール > Firefox OS Simulator を選択すると Firefox OS シミュレータのダッシュボードが起動します:
2014110104


Firefox OS シミュレータダッシュボードが起動しました:
2014110105


ダッシュボード画面左の Simulator: Stopped と表示されているスイッチ部分をクリックすると Simulator: Running の表示に切り替わり、同時に Firefox OS シミュレータが起動します:
2014110106


シミュレータ(というか Firefox OS)の使い方はまた別の機会に。とりあえずこれでシミュレータが導入できたので、アプリ開発の動作確認の準備もできました。



このページのトップヘ