y.okano blog: 4月 2013

2013年4月30日火曜日

Mac スクリーンショット機能でピクセルを測る

画面上のパーツが何ピクセルなのかすぐに調べる方法です。
スクリーンショット機能を使います。

⌘ + Shift + 4 でスクリーンショットのカーソルをだします

スクリーンショットの範囲指定カーソル

その状態でドラッグするとスクリーンショットの範囲を指定出来ます
このときカーソルにピクセル数が表示されるため、定規としても使えます。

範囲の幅と高さがピクセルで表示される

ドロップせずに ESC キーを押せばスクリーンショットを撮らずに終了出来ます。

2013年4月29日月曜日

ポートフォリオを作成

作品置き場です。
作ったものはここへ追加していきます。

http://okanoworld.appspot.com/

iOSアイコン風

今後は右下にいるペロンチョくんをイメージキャラとして使っていきます。
もう一人作ったのですが、それはまたの機会に・・・。

2013年4月28日日曜日

文字列の参照

Android の画面上には文字列を直接表示しないらしい。
サンプルアプリの res/layout/activity_main.xml の中に以下のコードがあります。

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

実行してみると @string/hello_world が Hello world! という文字列に置き換わっています。

@string/hello_world が Hello world! になっている

一方 res/values/strings.xml はこんなかんじ

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">String</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>

</resources>

例のごとく R.java の中に参照が自動で作られています

    public static final class string {
        public static final int action_settings=0x7f050001;
        public static final int app_name=0x7f050000;
        public static final int hello_world=0x7f050002;
    }

@string/hello_world は R.java の string の hello_world に関連付けられたテキストを参照しています。

テキストは別の場所に定義しておいて、使うときにそれを参照するようです。
言語別に文字列を定義しておいて、実行時の環境に合わせて切り替えたりするらしいです。

確かRPGツクールアドバンスもこんな感じでメッセージは別で作る仕様だった気がします。

2013年4月27日土曜日

スマートフォンの回転に合わせてスタイルを変える

CSS で以下を記述

@media screen (orientation:portrait) {
      /* 画面が縦のときのスタイル */
}

@media screen (orientation:landscape) {

      /* 画面が縦のときのスタイル */
}

参考

いろいろ備忘録 - 【CSS3】スマホサイト制作 - 縦横表示切替に対応するためのCSS記述方法
http://www.db.gs/article/255889697.html

2013年4月26日金曜日

prettyprint で overflow:auto; を指定しても改行されてしまう

ブログへソースコードを載せるときには Google Code Prettify を使っています。

google code - google-code-prettify
http://code.google.com/p/google-code-prettify/

さらに CSS で overflow:auto; を指定すれば、
コードがはみ出しても横スクロールできると多くのサイトで書いてあります。
しかし、Blogger で overflow:auto; を指定してもコードが改行されずに困っていました。

overflow: auto; にしても勝手に改行される

結局、Blogger がデフォルトで word-wrap: break-word; を指定していることが原因でした。

改めて word-wrap: normal; を指定することで、
勝手に改行されずにスクロールできるようになりました。

word-wrap: normal; を指定すると改行されなくなった

ちなみに、試行錯誤した結果、テンプレートの HTML へ以下のコードを追加するが一番だとわかりました。

<head> タグの中へ以下を追加

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=default'/>
<style>
pre.prettyprint {
overflow: auto;
word-wrap: normal;
}
</style>

これが一番楽

参考

mig-ration - overflow:auto で横スクロールバーが表示されない件（解決）

http://mig-ration.blogspot.jp/2007/04/overflowauto-resolved.html

2013年4月25日木曜日

LogCat に DataRouter のログが大量に出てくる

LogCat を見ているとやたらと赤文字のログが出力され続けているのが気になりました。

赤文字のログが永遠に出続ける

内容はこんな感じ

04-18 07:17:04.518: E/DataRouter(1832): usb connection is true 
04-18 07:17:04.518: E/DataRouter(1832): InvokeOemRequestHookRaw usbstatus true is success
04-18 07:17:06.523: E/DataRouter(1832): usb connection is true 
04-18 07:17:06.523: E/DataRouter(1832): InvokeOemRequestHookRaw usbstatus true is success
04-18 07:17:08.523: E/DataRouter(1832): usb connection is true 
04-18 07:17:08.523: E/DataRouter(1832): InvokeOemRequestHookRaw usbstatus true is success
04-18 07:17:10.523: E/DataRouter(1832): usb connection is true 
04-18 07:17:10.523: E/DataRouter(1832): InvokeOemRequestHookRaw usbstatus true is success

「USBつながってるよ！USBつながってるよ！USBつながってるよ！USBつながってるよ！」

・・・お、おう。

USB ケーブルの接触が悪いのかな？

いじってみたのですが特に変わらず。

・・・

調べてみると、サムスンのデバイスが接続中に送り続けてくるログだそうです。

エラーではなく、そういう仕様らしい。

stackoverflow - Android datarouter logcat error message

http://stackoverflow.com/questions/8242959/android-datarouter-logcat-error-message

回答にある通り、LogCat のフィルタに以下の正規表現を入力すると、DataRouter のログが表示されなくなりました。

tag:^((?!DataRouter).*)$

フィルタを設定

さらに左側の + ボタンを押してフィルタを保存します。

設定したフィルタを保存

これで左側のフィルタを選択するだけで DataRouter からのログを非表示にすることができました。スッキリ。

フィルタを選ぶと DataRouter を無視

2013年4月24日水曜日

Activity へ layout を適用する

Android アプリケーション作成時に BlankActivity を選ぶと Hello World ! と表示されるだけのアプリケーションが作成されます。

MainActivity.java は以下のようになっています。

package com.example.setcontentview;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class MainActivity extends Activity {

 @Override

 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);

  setContentView(R.layout.activity_main);

}

 @Override

 public boolean onCreateOptionsMenu(Menu menu) {

  // Inflate the menu; this adds items to the action bar if it is present.

  getMenuInflater().inflate(R.menu.main, menu);

  return true;

}

}

onCreate() メソッドの setContentView(R.layout.activity_main); という部分でビューを画面に追加しているようです。

この状態では /res/layout/activity_main.xml を参照しています。

/res/layout/ の中に xml ファイルを作成してみると、 R.java の中に自動的に xml ファイルへの参照が追加されます。

これを setContentView() メソッドへ渡せば OK です。

layout への参照が R.java へ自動的に追加されている

試しに res/layout/ 内に activity_main_2.xml を作成して、

setContentView(R.layout.activity_main_2);

としてみると、作成した画面が表示されることが確認できました。

activity_main_2 が表示される

R.java がとても重要です。

Android Developers - Reference : setContentView()
http://developer.android.com/reference/android/app/Activity.html#setContentView(android.view.View)

2013年4月23日火曜日

Galaxy S II でスクリーンショット

電源ボタン + ホームボタン同時押し

Android は端末ごとにスクリーンショットの取り方が違うようです。

ファイルを取り出すときは Android File Transfer を使いました。
/Pictures/Screenshots/
の中に保存されます。

参考

スマッチャ - Galaxy S II (ギャラクシー s2)SC-02C 単体でスクリーンショットを撮る方法

http://smarter-jp.net/newsetc/26742/

Android.com - Android File Transfer
http://www.android.com/filetransfer/

2013年4月22日月曜日

Android のバージョンについて

Android のバージョンの横に 14 とか 15 とか書いてあることがあり、こいつは一体？と思ったのですが、API Level のことだったようです。以下まとめ。

1.0

API Level 1

1.1

API Level 2

1.5

コードネーム：Cupcake - カップケーキ

API Level 3

1.6

コードネーム：Donut - ドーナッツ
API Level 4

2.0

コードネーム： Eclair - エクレア
API Level 5 - 6

2.1

コードネーム：Eclair - エクレア（変わらず）
API Level 7

2.2

コードネーム：Froyo - フローズンヨーグルト
API Level 8

2.3

コードネーム：Gingerbread - ジンジャーブレッド
API Level 9 - 10

3

コードネーム：HoneyComb - 蜂の巣
API Level 11 - 13

4.0

コードネーム：Ice Cream Sandwich - アイスクリームサンドイッチ

API Level 14 - 15

4.1 - 4.2

コードネーム：Jelly Bean - ゼリービーン
API Level 16 - 17

参考

<users-sdk> - Android Developers
http://developer.android.com/guide/topics/manifest/uses-sdk-element.html

Android バージョン履歴 - Wikipedia
http://ja.wikipedia.org/wiki/Androidのバージョン履歴

コードネームが面白い！写真で見る「Mac・iOS・Android」のコードネームたち - Tools 4 Hack

http://tools4hack.santalab.me/codename-mac-ios-android-phots.html

2013年4月21日日曜日

View に id をつけて参照する

Android の View には id を指定することで、プログラムから参照できるようになります。
HTML のタグに id をつけて、CSS や JavaScript から参照するのと同じです。
なお、インタフェースは res/layout/ ディレクトリ内に保存されています。

View に id をつける

<TextView
 android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

TextView に id をつけています。
android:id="@id+/******" 文字列の先頭に @id とある場合、/ の後ろと合わせて、これは id ですよと指定できるようです。
後述しますが、 + を書くと R.java の中に id が登録され、+ がないと登録済みの id を使うことを意味するようです。

View を参照する

Java から id を使って View を取得してみます。
src/******/MainActivity.java を開きます。
id をから View を取得するには findViewByID() メソッドを使います。

protected void onStart() {
 super.onStart();
 TextView textview = (TextView)findViewById(R.id.text_view);
 Log.d("TextView", textview.getText().toString());
}

xml で @id+/****** を指定していると R.java の id に自動的に追加されるので、それを参照します。android.util.Log Class でログが出力できるます。アイコンからしてLogCatって元ネタがアレですね。
http://developer.android.com/reference/android/util/Log.html

アプリを実行すると、画面下の LogCat にログが出力されます。
LogCat タブをクリックして、右上のメッセージの種類を debug にします。
画面上の TextView に表示されていた Hello world! という文字列を取得できています。

R.java

id の参照や文字列の参照などを提供してくれるのが R.java です。
xml ファイルで View に id を設定すると、 R.java の中に自動で id を追加してくれます。
こいつはかなり偉い存在のようです。

2013年4月20日土曜日

GitHub の Readme.md を Wiki を使って書く

GitHub の Readme.md は最初は書き方がよくわかりません。
リポジトリの Wiki で WYSIWYG エディタを使って md 形式の文章が書けるので、
Wiki を使って書いてみます。

リポジトリの Wiki を開きます。

New Page をクリックしてページを作成します。
保存はしないので名前は適当に。

右上の Edit mode が Markdown になっていることを確認します。
h1 や画像、リンクなどボタンを使って編集します。

画面下の Preview ボタンを押して出来栄えを確認しましょう。

完成したら、エディタ内の文章を Readme.md にコピペすれば OK です。
Wiki のページは破棄して構いません。

ちなみに、プレビューしながら書ける Web サービスやソフトもあるようです。

Github Preview
http://github-preview.herokuapp.com

2013年4月19日金曜日

Android アプリのインタフェース編集方法

Android アプリのインタフェースは画面上の部品を表す View とそれをまとめた ViewGroup によって構成されているようです。
HTML や enchant.js などと同様ですね。

Android Developers - Building a Simple User Interface

http://developer.android.com/training/basics/firstapp/building-ui.html

View Group Class

http://developer.android.com/reference/android/view/ViewGroup.html
GridLayout や LinearLayout などが継承しています。
中に含む View の配置によって使い分けるっぽいです。

View Class

http://developer.android.com/reference/android/view/View.html
画像を表示する ImageView や文字列を表示する TextView などが継承しています。
ゲームでは OpenGL の描画ができる GLSurfaceView を使うことになりそうです。

View や ViewGroup は XML で書かれています。
Eclipse の res/layout ディレクトリ内に画面の XML が保存されています。

res/layout/***.xml がインタフェース

xml ファイルをダブルクリックすると、こんなかんじでインタフェースが表示されます。
画面下のタブで ***.xml をクリックするとコードを編集できます。

ここをクリックして

コードを表示

基本的には直接コードを編集することになりそうです。

2013年4月18日木曜日

Android エミュレータ上でテスト

Android Developer Tools には最初から Android エミュレータが同梱されています。
スペックを詳細に決めてテスト可能です。

実行ボタンを押す

Launch a new Android Virtual Device をチェック

右下の Manager... を押す

New... を押す

Device: からプリセットを選ぶ

AVD Name を入れる
OK を押す

ウィンドウを閉じて前の画面へ戻る
追加された ADV を選んで OK

Dock にアイコンが出現

しばらく待つとエミュレータが起動する
（画面が表示されるまで５分程かかりました）

以上でエミュレータでのテストが可能です
市販されている端末のプリセットを幾つか作っておけば便利そうですね

2013年4月17日水曜日

Android アプリのディレクトリ構成

Android アプリ開発におけるディレクトリについてまとめ。

デフォルトでこんな感じ

いろいろとはいっている

src/
java のソースファイルを入れる場所

gen/

自動生成される
リソースを参照するときに使う R クラスが定義されている
ここは触らない

Android ***

jar ファイルが入っている
実行ファイル？
ここも触らない

assets/

アプリで使うファイルを置く場所っぽい
アプリによるファイルの保存領域としてもつかえるらしい
http://y02.cocolog-nifty.com/blog/2010/12/androidassetsre.html

bin/

実行ファイル？
ここも触らない

lib/

jar ファイルが入っている
触らない

res/

画像やタームやレイアウトなど
解像度によって複数画像を準備するみたい
hdpi, ldpi, mdpi, xhdpi, xxhdpi の５つがある
結構ある・・・

AndroidManifest.xml

アプリ全体の設定をするXML

ic_launcher-web.png

アプリアイコン？
web とあるが・・・
調べたところ、GooglePlayで表示されるアイコンらしい

proguard-project.txt

ProGuard というソースを難読化する機能の設定らしい
まだ触らない

project.properties

ターゲットのAndroidバージョンが書かれていた
AndroidManifest.xml との違いはなんだろう？
コメントに触るなと書いてあるので触らない

Mac で Android 開発環境を構築

Mac OS X 10.8.3 上に Android の開発環境を整えた。

ADT Bundle for Mac のダウンロードとインストール

Android Developers の公式サイトから、ADT Bundle for Mac をダウンロードする。
http://developer.android.com/sdk/index.html

ADT とは Android Developer Tools の略で Android の開発に必要な API などが入っている。
このソフトウェアには ADT を最初から含む Eclipse が入っており、それを起動して Android アプリを開発できる。

ダウンロードした zip ファイルを展開して、アプリケーションディレクトリへ配置した。
中に入っている eclipse/Eclipse.app を開いて開発出来る状態になった。

Enclipse がまるごと入っている

Android の API やエミュレータなどが同梱

とりあえず ⌘ キーと日本語が使えてよかった・・・。

X11 上で動く Inkscape はその点ちょっと不自由だったので。

サンプルアプリ作成

Android Developers 公式のドキュメントにある Traning を読みながら進めていく。
http://developer.android.com/training/index.html

まず Building Your First App に沿って、サンプルアプリを作成。
手元にある Galaxy S II 上にて動作確認した。

実機で動くと嬉しい

2013年4月16日火曜日

もぐらたたき for 3DS を公開

もぐらたたき for 3DS を公開しました。
Nintendo 3DS のウェブブラウザ上で動作するブラウザゲームです。
3DS 以外の PC やスマートフォンのブラウザでも動作します。

アプリ本体
http://okanoworld.appspot.com/mogura

ソースコード
http://yokano.github.io/mogura/

3DS のウェブブラウザで遊べます

ゲームエンジンとして enchant.js を使用しています。
3DS 上では思っていたよりもパフォーマンスが出せず、
９箇所の穴から９つのもぐらのスプライトを出すだけで処理落ちが発生しています。
フレームの処理が遅いため、fps を 30 などにするとスローモーション状態です。
結局、fps を 5 に設定しています。
タッチイベントを ontouchstart で取得していますが、こちらも 0.5 秒近くラグがあります。

９つの穴からもぐらが出現

ランキングにも対応しており、上位 10 までをランキング画面で確認できます。
サーバを Google App Engine + Go でつくり、Ajax で名前とスコアを送信しています。
Ajax は問題なく動作しました。GAE の Channel API による Ajax ポーリングが処理できるか試してみたいですね。

ランキングに登録

ランキング画面

実行中に「画像の表示に失敗しました」や「スクリプトの実行を停止します」と表示され、実行が止まることがあります。

コンソールがないため原因がわからないのですが、表示される場合とされない場合があります。
メモリの使い過ぎかと思い、画像を jpg にして容量を抑えたりしましたが変わりませんでした。
その他の Web サイトをサーフィンしていても発生します。
3DS の Web ブラウザは、アクションゲームや画像の多いゲームは厳しいことがわかりました。

次回は 3DS のブラウザで遊べるソーシャルゲームを作ってみようと思っていますが、上記の問題で厳しければ、また別のものを考えます。

2013年4月13日土曜日

3DSブラウザで画像表示

ゲーム画面のバランス確認のため、3DS に静止画を表示しました。

もぐらたたき

Nintendo 3DS は Web ブラウザとして NetFront Browser を採用しています
http://www.nintendo.co.jp/3ds/hardware/features/browser.html

解像度は上が 800x240px 、下が 320x240px です。
http://www.nintendo.co.jp/3ds/hardware/spec/index.html

今回はゲームの解像度を 320x480px にして、上下の画面にきっちり表示させました。
下画面にはメニューバーが必ず表示されるので、下画面のコンテンツの高さは約 210px しか使えません。

デフォルトではコンテンツの幅 980px を画面に表示しますが、スマートフォンと同様に viewport で設定可能です。今回は width = 380px を指定しています。

3DS のブラウザでゲームをしようとすると、スクロール機能が邪魔になってしまいます。
コンテンツの幅を 380px にすると左右へのスクロールは禁止できるのですが、
コンテンツの高さを 480px にしても、それを超えてスクロールできてしまいます。

コンテンツの上下に画面１つ分の空白が作成されるため、余計なところまでスクロールできてしまいます。

コンテンツの上下に１画面分の空白が作られる

理想的にはこの状態で固定したい

空白も含めてスクロールできてしまう

スクロールを禁止する方法は見つからなかったのですが、ずれた画面をフォーカスする方法はありました。十字キーの下ボタンを押すとズレた画面が本来の場所に戻ります。

十字キーの下を押すとコンテンツの下端（空白を含まない）を、下画面の下枠にフィットさせる位置までスクロールすることができます。余計な空白まで表示しないため、画面がずれてしまったら下ボタンを押して元の場所に戻すようにしようと思います。

ScrollTo() を使って画面をスクロールする方法もあるようなのですが、うまく動かなかったため手動で戻すことにします。画面がスクロールするたびに ScrollTo() で元の場所に戻すという方法もあるかもしれません。

2013年4月11日木曜日

okareader を公開

１ヶ月近く空いてしまいましが、
Webブラウザ上で動くRSSリーダー「okareader」を公開しました。

公式サイト：http://yokano.github.io/okareader/
Webアプリ本体：http://okareader.appspot.com/

Google Reader のサービス終了をきっかけに自作のフィードリーダーを開発しました。
パソコンはもちろん、iPhone や Android などのスマートフォンでも動作します。
ユーザ認証に Google アカウントを使用しているためアカウント必須です。

ライセンスは MIT ライセンスです。
ソースコードは GitHub 上ですべて公開しています。
https://github.com/yokano/okareader

サーバは Google App Engine を使用し、言語は Go で書きました。
https://developers.google.com/appengine/

インタフェースとして jQuery Mobile を使用しています。
http://jquerymobile.com

フィードの更新や既読化はもちろん、Google Reader のようにフォルダを作成してフィードをグループ分けすることができます。フォルダをまとめて更新したり既読化することも可能です。
OPMLファイルのインポートにも対応しており、Google Takeout で Google Reader からフィードを移動することができます。
https://www.google.com/takeout/

開発期間は約３週間です。
今後の改善点は、Latin-1のフィードを読めないことと、数十個のフィードをまとめて更新にかけると時間がかかってしまうことです。
Latin-1については、Go の xml 解析パッケージに Latin-1 の変換機能がついておらず、バイト配列を自分で変換する必要があり、時間がかかりそうだったので保留しています。
フィードの更新は各フィードの配信ファイルを Google App Engine URL Fetch API を使って順次取得する部分がネックになっています。URL Fetch を goroutine によってマルチスレッド化すれば早くなると思うのですが、現状の GAE では goroutine で同時に実行できるスレッドが 1つに限定されているためあまり変わりません。今後 GAE がマルチスレッドに対応すれば改善したいと思います。

The Go runtime environment for App Engine provides full support for goroutines, but not for parallel execution: goroutines are scheduled onto a single operating system thread. This single-thread restriction may be lifted in future versions. Multiple requests may be handled concurrently by a given instance.

引用：https://developers.google.com/appengine/docs/go/overview

しばらく間があきましたが今後はぼちぼち更新して行きたいと思います。
直近では Nintendo 3DS の Web ブラウザ上で動くゲームを開発する予定です。