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

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

2014年11月

Google Adsense の広告をレスポンシブなページでも、正しく最適化された広告を表示させる場合の指定方法を書いておきます。


まずは Google Adsense にログインして、管理画面を表示します。

「広告の設定」をクリックし、新たにレスポンシブページに表示させる広告のために「新しい広告ユニット」をクリックして作成します。
2014110901


広告ユニットの設定ページでは、名前を適当に(この図では "Responsive_Banner" と)入力し、その下の「広告サイズ」では "レスポンシブ広告ユニット" を選択します:
2014110902


そのまま「保存してコードを取得」ボタンをクリックして広告を作成します。

最後に広告モードは「アドバンス」を選択して、そこに表示されるコードの内容を、広告を表示したいページの HTML 内にコピペします:
2014110903


スタイルシートのコピペ内容を確認して、必要であれば改変します。この内容だと以下の様な条件でレスポンシブな広告サイズになります:
・デフォルトでは 320x50 サイズの広告が表示される(事実上、モバイル端末用)
・横幅が 500px 以上の端末に対しては 468x60 サイズの広告が表示される(タブレット用)
・横幅が 800px 以上の端末に対しては 728x90 サイズの広告が表示される(PC用)

このままでも使えると思いますが、条件を変えたい場合はこのスタイルシート部分を改変します。


 

2011年に IBM のスーパーコンピュータ "Watson" が、アメリカのクイズ番組で当時のクイズ王と対決して勝った、というニュースがありました:
IBM's Watson Supercomputer Destroys Humans in Jeopardy

当時のルールでは、人間に読んで与えられるのと同じペースで Watson にも同じ問題が提供された上で早押し対決する、といった具合に、ほぼ対等の条件で行われました。従って人間の脳が考えるのと同じペースで内容を理解し、解答にある程度の自信が得られた段階で答える、という処理が求められるものでした。そのルールでクイズ王を破った、というのがほぼ4年前でした。

Watson の知性は応用分野を広げていましたが、ついにそのサービスが IBM の PaaS である Bluemix を通じて、我々のような一般の技術者にも提供されるようになりました。Bluemix は1ヶ月間無料で利用することができるため、その意味では「1ヶ月間 Watson を使ってみることができる」ということになります。


というわけで、さっそく試しに使ってみることに挑戦してみました。前提条件として Bluemix のアカウントが必要です。アカウント登録手順などは(少し古い情報ではありますが)こちらを参照ください:
http://dotnsf.blog.jp/archives/1000917110.html


Bluemix にログインして、サービスの一覧を覗いてみると・・・ "Watson" という、そのまんまのカテゴリに分類されたいくつかの Watson 関連サービスが提供されていました。現時点では全て無料で利用することができるようです:
2014110601


例えばこちらは "Language Identification" サービス。与えられたテキストが何語なのかを調べ出す機能です。
2014110602


試しに使ってみて、デモを試してみたのがこちら。「麻布じゅばーん」とフランス語っぽい(?)テキストを与えた結果は "ja-JP" 。おお、ちゃんと日本語も含まれていましたね。
2014110603


一方、こちらは "Question and Answer" サービスです。これは「質問すると答を教えてくれる」というもの。現時点では "Healthcare" と "Travel" という2つのカテゴリでのみ提供されているようです。
2014110604


試しに "Healthcare" 分野で "Who is at risk for diabetes?"(糖尿病になりやすい人はどんな人?)という質問をぶつけてみた結果がこちらです。"89%"の自信をもって "People who have type 1 or type 2 diabetes are at risk for diabetic heart disease"(1型および2型の糖尿病を患っている人は糖尿性の心臓病のリスクがある)という答を導いたようです。正解と言えるかどうかはともかく、質問の意図をなんとなく読み取れているように感じます:
2014110605


別の質問にしてみました。"Travel" カテゴリにて "Do I need a visa to enter Brazil?"(ブラジルへ行くのにビサは必要?)という質問をした結果はこちらです。ブラジルの相互ビサ制度に触れると共に、南米国を例に滞在最大可能日数の返答もなされていました:
2014110606


ただ残念ながら精度の高い変更ができるかどうかは質問の内容に依存している、といわざるを得ません。試しに "When is the best season to visit Japan?" という質問の答はなぜかモロッコの話になっていました。この精度をどう考えるべきか・・・
2014110607


残念ながら現状 Bluemix から提供されている Watson に関しては、日本語の質問には非対応なことと、日本固有の質問については問題そのものを理解しているようには思えますが、まだ解答としてはチューニングが必要そうな段階である、という印象です。
 
とはいえ、こういった人工知能的なサービスも提供されている PaaS の期待は高まります。もう少し進化して日本語にも対応してくれると、日本向けのサービスで付加価値の高いアプリケーションを作る時の選択肢として Bluemix が今以上に強力になっていくと感じました。
 

例年通り、11月2日(イイ蓋の日)に開催された「マンホールナイト6」に参加してまいりました。
manholenight6


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


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


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


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


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

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

 

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



このページのトップヘ