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

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

2014/11

例年通り、１１月２日（イイ蓋の日）に開催された「マンホールナイト６」に参加してまいりました。
manholenight6


当日は 研究活動発表や座談会、そして異文化交流会といった講演に加え、皆様から募集した写真コンテスト、関連書籍の即売会なども併せて行われました。第６回目にして約１００名が集まる大イベントに成長しました。
2014110504


当日はツイッターのハッシュタグ「#マンホールナイト」が用意され、多くの人からのツイートも寄せられました。またその様子を @morito_tさんにまとめていただいています。これらを参照することで、当日の現場の様子や空気、熱気がある程度は伝わるかもしれません：
#マンホールナイト 14/11/02 マンホールナイト6 #manhotalk
2014110502


私自身もマンホールマップの開発・運営者として発表に参加させていただきました。７月にインテック大阪で行われた下水道展への出展報告、昨年のマンホールナイトで予告した新機能の実装報告、そして iPhone やアンドロイドといったスマートフォンからの利用を想定した新機能の紹介、などなど。当日の発表資料はこちらにアップロードしていますので、興味のある方は参照ください：
「マンホールマップと下水道展とモバイル利用などなど」
2014110503


参加者目線で、個人的に一番面白かったと感じたのは、発表者としては今回初参加となった傭兵鉄子さんの「アニメに登場する架空の蓋と実在の蓋。その確認と検証」の研究発表でした。この「ブラック・ブレット」の、一部では有名なシーンで登場したマンホールと幼女の画像（僕のLinuxデスクトップの壁紙でもあります）についても語っていただきました。しかし、よく見てるよなあ・・・
2014110501


会終了後の２次会は、近くのショットバーを貸し切りで行わせていただいたのですが、それでも参加人数が多く、次回以降の運営は大変そうな予感です。

なお次回からは私も運営側にも参加する形で協力させていただく予定です。これからもよろしくお願いします。

 
タグ ：
#マンホール
#manhole

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" アプリケーションを作っていきます。これから作るアプリは３つのファイルから構成されます：
- helloworld.html （アプリケーション本体）
- manifest.webapp （マニフェストファイル）
- icon.png （アイコン画像ファイル）

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

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

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


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


まずはこのアプリケーションプロジェクトを作るために専用のフォルダ（ディレクトリ）を１つ作っておきます。例えば c:\tmp\helloworld といったフォルダを作ります。これから３つのファイルをこのフォルダ内に作ります（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> によるタイトルと、ボタンを１つ配置し、そのボタンがクリックされると 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" ではアプリケーションのアイコンを配列型で指定します。サイズに応じた指定が可能になっており、１つしか登録しない場合でも配列にする必要があります。この例では "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 を利用するための権限設定をしたり、データの受け渡しの方法を設計した上でマニフェストに加えたり、と色々やることはあります。　ただベースとなるアプリはこの程度のコーディングで実現できる、というのはやはり魅力だと思っています。


 
タグ ：
#html5
#firefox
#os

最近、少しずつですが 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）の使い方はまた別の機会に。とりあえずこれでシミュレータが導入できたので、アプリ開発の動作確認の準備もできました。



タグ ：
#firefox
#os
#simulator
#html5
#javascript

このページのトップヘ