2013年9月30日月曜日

HTML5 Audio でマルチブラウザ対応するときの注意

HTML5 の <audio> を使ってマルチブラウザに対応する場合には2種類の音声ファイルを準備する必要があります。
先日の Google 生誕16周年の記事でも書きましたが現状では mp3 と ogg ファイルの準備が必要です。

各ブラウザの Audio 要素の対応フォーマット一覧を見てみると、
Safari, IE は ogg ファイルを、Chorme, Opera, Firefox は mp3 ファイルを再生できません。
これらのブラウザで音声を再生する場合は両方とも設定する必要があります。
http://fmbip.com/litmus/



ブラウザゲームなどを開発する場合は mp3 と ogg 両方とも準備しましょう。
今後はアップデートによって ogg のみ、 mp3 のみでも再生できるようになるとよいですね。

2013年9月29日日曜日

enchant.js が 0.8.0 へアップデート

enchant.js がバージョン 0.8.0 にアップデートされました。
http://enchantjs.com/ja/2013/09/enchantjs-080/


バージョン 0.8.0 では Nintendo Web Framework 対応がなされているそうです。
Nintendo Web Framework は WebKit ベースで HTML5, JavaScript, CSS で作ったゲームを Wii U などの Nintendo のハードで動かすことができるそうです。
ブラウザのエンジンを使って単体のゲームを遊ぶ感じになるのでしょうか。
Nintendo Web Framework - Nintendo


マルチデバイス対応では Unity と ブラウザゲームが有力そうですね。

2013年9月28日土曜日

Xcode のインタフェースがフラットデザインに

先日 Xcode を 4 系から 5 系にアップデートしたんですが、細かいところがフラットデザインに変わっていました。


5



4
5



4
5

4 系では立体的なボタンが多かったのですが、5 系では平面的で境界線がなくなっていますね。iOS 7 のフラットデザインは特徴的で印象に残っていましたが、Mac OS 側にも適用されているとは思っていませんでした。Mac 側も iOS7 に合わせてフラットデザインに変わっていくのでしょうか。

2013年9月27日金曜日

Google 生誕15周年記念ゲーム

本日は Google 生誕15周年だそうで、Google のトップページでゲームが遊べます。
棒で星を叩いてキャンディをゲットするゲームです。

何回かやってみましたが、棒の先端で叩くとたくさんキャンディが出てくるような気がします。最高記録は 171 個でした。



HTML5 Canvas を使ったゲームのようです。BGM は <audio> ですね。どのブラウザでも再生できるように mp3 ファイルと ogg ファイルが使われています。HTML5 Audio はまだ主要ブラウザで共通して再生できる形式が存在しないため、mp3 と ogg の両方を載せる必要があります。Safari と IE は mp3 を再生できるけど ogg を再生できず、Chrome、Firefox、Opera は ogg を再生できるけど mp3 を再生できません。
参考: HTML5 Audio Codecs



ゲームの JavaScript はこちらですね。
https://www.google.co.jp/logos/2013/bday13/bday13.js

難読化されていますが、jsbeautifier などの整形ツールを使えばインデントなどを入れてくれるので若干読みやすくなります。

ちなみにスマホでも遊ぶことができ、インタフェースの画像が若干変わります。細かいところまで凝ってますね。




2013年9月26日木曜日

好きな値段で Android ゲームが買える Humble Mobile Bundle 2

インディーズゲームをまとめて販売する Humble Bundle シリーズの新しいパック Humble Mobile Bundle 2 が販売されています。Android 端末向けのゲームが 6 本セットになっており、これまでの Humble Bundle と同じく自由な値段設定で購入することができます。販売期限は残り 2 週間です。

Humble Mobile Bundle 2 紹介動画


収録されているゲームは以下の通りです。
ただし、そのうち2本は 4.53ドル以上で購入した人だけが遊べます。

Star Command (新作)


Time Surfer (新作)


Punch Quest


Bloons TD 5


Ravensword: Shadowlands (4.53ドル以上)


Carmageddon (4.53ドル以上)

サポート端末リスト(作成中だそうです)
http://support.humblebundle.com/customer/portal/articles/1207109-supported-devices---humble-mobile-bundle-2


基本的に 4 本のゲームが必ず同梱されており、
4.53ドル(約445円)払うと更に 2本 追加されて、6 本のゲームが遊べるようになります。

購入方法

Humble Mobile Bundle2 を開く



いくらで買うか決める
$10 以下で買う場合は、Custom Amount から細かい値段を入力します。



払った値段のうち、いくらを開発者に、いくらを募金に回すかを選択します。
募金は Child's PlayElectronic Frontier Foundation に回されます。
Child's Play は、病院で治療中の子どもたちが欲しがっているゲームやおもちゃ、本などを購入してプレゼントしている団体です。これによって周囲の人々とのコミュニケーションの促進や、治療に関する不快な経験からの気分転換などを目指しています。
Electronic Frontier はコンテンツを著作権侵害から守るための法律を作るための活動や、教育活動を行っている団体です。
Hable Tip とは Humble Bundle を提供する Humble に渡るお金です。




メールアドレスを入力します。



ギフトかどうか選択します。
ギフトにすると他者へアプリをプレゼントするためのコードが購入できます。


支払い方法を選択します。
クレジットカード、PayPal、Amazon payments、Google、Bitcoin から選択できます。


支払いが完了するとこんな画面が出てきます。
CLICK HERE をクリックしましょう。



後は、画面の指示に従ってアプリをダウンロード・インストールすれば OK です。

2013年9月25日水曜日

各ブラウザの開発ツールで HTML 要素を調べる方法

以前、Safari のデバッグツールを使って HTML の要素を調べる方法をご紹介いたしました。今回は主要なブラウザの最新バージョンを使って同じことをする方法をご紹介いたします。

IE10
F12キーで開発ツールを出し、マウスカーソルのアイコンをクリックすることで、要素を調べることができるようになります。


Firefox
Shift + Control + I で開発ツールを出して、マウスカーソルのアイコンです。
以下の画像は標準のデバッグツールですが、Firebug でも同じアイコンです。


Chrome
Shift + Control + I で開発ツールを出し、虫眼鏡のアイコンをクリック。
ちなみに、Opera は Chrome と同じ開発ツールだったため同じ操作です。


Safari
Shift + Control + I で開発ツールを出し、虫眼鏡のアイコンをクリック。



2013年9月24日火曜日

Blogger に投稿した画像が全て消えた

ブログに投稿していた過去の画像がすべて消える現象が発生しました。

4月から毎日ブログを書き続けて半年近く経つのですが、
それまでのすべての画像が表示されなくなってしまいました。
原因は今のところ不明です。

画像ファイル自体は、Blogger上に残っているようなので、
すべて手入力で修正することも可能ではあるのですが、
だいぶ時間が掛かりそうな上に、また消えてしまうかもしれません。

もし、解決できなかった場合は別のブログサービスへの移行も考えています。
プログラミングなどの HowTo を検索していらっしゃった方には、
ご迷惑をおかけして大変申し訳ありません。

過去の画像については、対策が見つかり次第、修正いたしますので今しばらくお待ちください。
もしほかのサービスに移行する際も、改めてご連絡いたしますのでよろしくお願いいたします。

2013年9月23日月曜日

iOS7 でコントロールセンターが暴発する

iPad を iOS7 にアップデートしたのですが
コントロールセンターの暴発が気になりました。

Youtube で動画リストをスクロールしようとすると、
画面下からコントロールセンターが出現してしまうことがありました。

設定でアプリ内からのコントロールセンター呼び出しを無効化できます。

App内でのアクセスをOFFにする


これでアプリ使用中にコントロールセンターが暴発することはなくなります。
ただ、今度はホーム画面に戻らないとコントロールセンターが出せないんですよね。

今のところ、指4本で画面を上にスライドしてマルチタスク画面を出して、
ここからコントロールセンターを呼び出しています。

一旦マルチタスク画面に行ってから呼び出す


今までどおり、指4本ジェスチャでコントロールセンターを呼び出せれば、
とても便利なんですが・・・アップデートされないかな。

2013年9月15日日曜日

JS の再帰関数で画面表示しながらループ

JavaScript でループを回しながら画面を更新したいときに以下の様なコードを書いても、リアルタイムに反映されません。Canvas などに描画する場合も同様です。
var p = $('p');
for(var i = 0; i < 1000; i++) {
    p.html(i);
}

こういった場合、setTimeout()を使って再帰関数を呼び出すことで画面表示しながらループしているような動作が可能です。

2013年9月14日土曜日

JavaScript で一定時間後に処理を実行する

setTimeout() を使えば一定時間後に処理を実行することができます。

setTimeout(function() {
    console.log('1000ms たちました');
}, 1000);

2013年9月13日金曜日

HTML5 でプログレスバーを表示

HTML5 では <progress> タグを使うことで処理の進捗を表示することができます。
<progress value="0" max="100"></progress>

max にゲージの最大値を、 value に現在の値をセットします。
value を更新することでゲージを動かすことができます。

2013年9月12日木曜日

Blogger で Google Web Fonts を使う

Blogger で PrettyPrint を使ったソースコード表示を指定たのですが、フォントが少し読みづらかったので Google Web Fonts からフォントを探して導入しました。

まず Google Fonts を開きます
http://www.google.com/fonts

ソースコードに向いてそうなフォントを探します。
"code" で検索すると "Source Code Pro" というフォントがあったのでこれにします。


"Add to Collection" ボタンでコレクションに追加します。
"Use" ボタンを押します。


表示された HTML の <link> タグをブログの HTML に貼り付けます。
ブログ設定画面の "テンプレート" > "HTMLの編集" ボタンで HTML が開けます。
<head> タグの中に挿入しておきます。


最後に CSS の font-family をスタイルにコピペすれば OK です。
以下のやり方に従っていれば、HTMLの中に prettyprint のスタイルが定義されているのでそこに挿入します。

それ以外の場合は、ブログ設定画面から
テンプレート > カスタマイズ > 上級者向け > CSS を追加
で、直接スタイルを定義すればOKです。


2013年9月11日水曜日

backbone.js で親 View の initialize() を呼び出す

Backbone.js では View を継承して階層化させることができます。

Backbone.js で View を継承する - y.okano blog
Backbone.js でメソッドのオーバーライド - y.okano blog

上の記事で、継承元のメソッドをオーバーライドするには prototype を使えると書きましたが、親の initialize() を呼ぶだけならもっとシンプルに掛けます。
var ChildView = ParentView.extend({
    constructor: function(options) {
        ParentView.call(this, options);  // 親の initialize() を実行
        ......  // 独自の初期化処理
    }
});

これは親で定義されている初期化を実行した上で、子の独自の初期化を行いたい場合に使えます。
例えば親から継承した基本的なメンバの初期化をした上で、子だけが持つメンバを改めて初期化する場合などです。
enchant.js なんかでよく見る書き方ですね。

JavaScript の call() についてはこちらを参照
JavaScript でコールバックするときの注意 - y.okano blog

View の constructor についてはこちら
View Constructor - Backbone.js

2013年9月9日月曜日

Amazon への出品にはバーコード番号が必要

Amazon へ商品を出品すると思ったのですが、
登録時のエラーメッセージで製品コードを入力してくださいと言われました。

調べてみたところ、Amazon に出品する商品には以下のコードのいずれかが登録されていなければならないそうです。

商品の識別情報 - Amazon
  1. JAN (Japan Article Number)
  2. UPC (Universal Product Code)
  3. EAN (European Article Number)
  4. ISBN (International Standard Book Number)
JAN は日本で使われているもの、UPCはアメリカで使われているもの、EANはヨーロッパで使われているものっぽいです。ISBNは書籍とかCDとか。

JAN コードはどうやったら取得できるのかなと調べてみたのですが、
流通システム管理センターに申請すれば良いみたいです。


ここで「バーコード利用の手引き」という本を1200円で買い、
その中に入っている申請書で申請するそうです。
本に挟まっている申請書じゃないと申請できないそうで、
コピーした申請書などものNGだそうです。
・・・ってことは申請書が実質1200円ってことでしょうか。
さらに、登録の管理費として3年間で10500円かかるそうです。

ぐぬぬ。

2013年9月8日日曜日

Google トレンドで人気の検索ワードをながら見

Google トレンドには人気の検索ワードをながら見する機能が付いています。
Google トレンドの画面左側の色がついて四角部分をクリックすればOKです。



全画面で人気の検索ワードが切り替わるようになります。



ちなみに、表示されている文字をタップすると実際に検索画面へジャンプできます。
スマートフォンなどで流しっぱなしにしておくとオシャレかもしれませんね。
(スタンドが発泡スチロールですが・・・)


2013年9月7日土曜日

Google URL Shortener API を使う

Google URL Shortener API を使うと、
Web アプリから Google の URL 短縮サービスを使って、
URL を短くすることができます。

Google URL Shortener API
https://developers.google.com/url-shortener/


サービスを有効化する

画面左の Google API Console をクリック
Services -> URL Shorener API を ON に切り替えて利用規約に同意する




API キーを取得する

画面左のメニューから API Access をクリック
Simple API Access の API Key に描かれている文字列が API キー



URL を短くする

Web アプリケーションから以下のような HTTP リクエストを送信すると、
短縮された URL を含むレスポンスが帰ってきます。
データは送受信ともに JSON 形式です。

リクエスト
POST https://www.googleapis.com/urlshortener/v1/url
Content-Type: application/json

{"longUrl": "http://www.google.com/", "key": "APIキー"}

レスポンスボディ
{
 "kind": "urlshortener#url",
 "id": "http://goo.gl/fbsS",
 "longUrl": "http://www.google.com/"
}

Go 言語のサンプルです。通信は okalib を使っています。
 // 短縮URLを取得する
 key := GOOGLE_API_KEY
 longUrl := Join("http://", HOSTNAME, "/runtime?game_key=", completeKey.Encode())
 requestBody := Join(`{"key":"`, key, `","longUrl":"`, longUrl, `"}`)
 params := make(map[string]string, 1)
 params["Content-Type"] = "application/json"
 response := Request(this.c, "POST", "https://www.googleapis.com/urlshortener/v1/url", params, requestBody)

 responseBody := make([]byte, response.ContentLength)
 _, err = response.Body.Read(responseBody)
 Check(this.c, err)

 result := make(map[string]string, 3)
 err = json.Unmarshal(responseBody, &result)
 Check(this.c, err)

2013年9月6日金曜日

ブラウザのデバッグツールを使ってタグを調査する

Web ブラウザのデバッグツールを使って、ページを構成しているHTML タグの id や class を確認することができます。ショートカットは Mac のものです。

Safari の場合
開発ツールを出して(⌘ + alt + I)ドキュメントのアイコンをクリック。
右側の指のアイコンをクリックして、ページ上にマウスカーソルを乗せると、
タグを確認することができる。




Chrome の場合
開発ツールを出して(⌘ + alt + I)、左下の虫眼鏡マークをクリック。
ページ上にマウスカーソルを乗せるとタグの詳細が表示される。



こっちで他のブラウザもまとめました

2013年9月5日木曜日

console.log() でデバッグログを出力する

JavaScript で変数の中身を表示したいときは console.log() を使うのがオススメです。
alert() で表示するのに比べて、配列やオブジェクトの中身を展開して表示することができます。

console.log(variable);

, で区切って複数表示することもできます

console.log(var1, var2, var3)

ブラウザのデバッグログに表示される

2013年9月3日火曜日

Google トレンドでキーワードの人気の動向を調べる

Google トレンドでは現在よく検索されているキーワードだけではなく、
指定したキーワードの人気の動向を調べることもできます。

Google トレンドを開いて、左側の「調べる」をクリックします。
ラベルに任意のキーワードを入力すると、最も検索回数が多かった時を 100 % としたグラフが出力されます。複数のキーワードを入力すると、比較することも可能です。

Google トレンド
http://www.google.co.jp/trends/


2013年9月2日月曜日

Backlog が Youtube のプレビューを自動作成

Backlog のタスクにコメントをするときに以下のような Youtube の URL を貼り付けると、自動で embed タグに変換してプレビュー出来る状態に変換してくれます。無料プランでもOKです。

http://youtu.be/gdGLZiC71zE
このようなURLをコメント欄に貼ると…

自動的にプレビューが作成される

URL だけ貼ったつもりが突然プレビューが出てきてびっくりしました。
全然気付きませんでしたが便利な機能ですね。

2013年9月1日日曜日

Mac の Safari でクッキーを削除する

開発者ツールを使うと手早く削除できます。

削除したいクッキーのウェブサイトを表示して ⌘ + alt + I で開発者ツールを開く


データのアイコンをクリックするとクッキー一覧が表示される
クッキーリストから削除したいクッキーを選択して
control + クリック -> 削除 で削除できる



ちなみに、
Safari -> 環境設定 -> プライバシー -> 詳細 からも削除可能


デバッグ中はデバッグツールから削除したほうが便利でしょう。