宣伝用画像.jpg
周囲の人には「やっとか」と言われましたが、細々と作っていたアプリをリリースしました。
パッと見、オセロっぽいボードゲームです。
ゲームのルール自体はSPOTというファミコンやゲームボーイ向けに発売されていたものから流用しています。

http://pots.linnet.jp/


ゲームの詳しい内容は上記の紹介ページを見ていただくとして、少し裏側の話を。

OpenGLはちょっと大変そう、SurfaceViewはHTMLのCanvasとほぼAPIが同じという理由でSurfaceViewで作り始めましたが、それでもAPIが生々しいため、ActionScriptっぽく書けるSurfaceViewのラッパークラスから作り始めてしまったため、時間が掛かってしまいました。

Androidは画面の解像度のバリエーションが多いため、画像類は極力、ベクターで扱いたいと思ったのもSurfaceViewの選定理由の一つです。
SurfaceViewは読み込んだフォントをそのまま表示できるため、最近のウェブサイトで使われるアイコンフォントと同じようにゲーム内で使用するグラフィックをアイコンとしてまとめて読み込んでいます。
フォントですので、単色となってしまいますが、キャラクターなどを使用する予定はなかったため、特に気にはなりませんでした。
そのため個々のパーツは、画面サイズを基準とした相対値サイズ、座標を指定できています。


最終的にはシーン管理やアニメーション機能なども組み込んだフレームワーク的なものになり、ある程度、形になり始めてからはかなり楽になりましたが。

今回、作ったフレームワーク的なものは、落ち着いてからコードを整理してgithub辺りにアップしようかと思っています。多分、需要がないのだと思いますが、SurfaceView関連のライブラリをあまり見かけないので。


いつからかわからないけど、Chromeでローカルのファイルを開くとウインドウサイズを一定以下に縮めることができないっぽい。
手元のPCだと1374px以下のサイズに出来ない。
タブを切り替えて小さくすれば一時的に小さく出来るけど、ウインドウサイズを変えようとドラッグすると1374px以上にされちゃう。

ぺライチのレスポンシブのページを作ってる時にウィンドウサイズを小さくできなくて困ったのでメモ。
URLが省略されちゃうとか最近、微妙な仕様変更が気になる印象。

PreprosでJavaScript圧縮

PreprosはWindowsでWeb制作をするときに非常に便利なツールです。

SassやLessのコンパイルや画像の最適化、Chromeのエクステンションと連携してオートリロードなどにも対応していますし、JavaScriptの圧縮・結合にも対応しています。


公式サイトのヘルプにも記載はありますが、JavaScriptの圧縮についてまとめます。

ファイルの先頭に別のjsファイルを結合したい場合
//@prepros-prepend foo1.js
//@prepros-prepend foo2.js
「//」も含めて記述します。
複数のファイルを読み込めますが、上記の記述の場合、foo2.jsが先頭、foo1.jsがその次に記述されます。

ファイルの末尾にjsファイルを結合したい場合
//@prepros-append bar.js
同様に「//」も含めて記述、こちらも複数のファイルを読み込めます。記述順は記載順のままです。

minifyしたくない場合
ファイル名を「foo.min.js」のように「min.js」を含める。
ライセンス表記を残したい場合にどうぞ。

※ver. 4.0.1での挙動です。


あとPhotoshopでpngを書き出した場合にIE6以下で表示できない(今は気にしなくてもよいとは思いますが、アルファチャンネルが荒れるとかではなく、IEで読み取れないExifが含まれてるっぽい)画像になることがありましたが、Preprosの画像最適化で解消できました。

htmlの一部を置換して配信する方法

テストサーバと本番サーバでリンクを書き換えたいとか、テストサーバでは一部の文字を置換したいけど、HTMLに手を入れちゃうと本番サーバにアップロードする前に修正しなきゃならないので、大変・・・。そう思ってました。

Apachのモジュールを調べたら、mod_substituteとかmod_layoutとかmod_ext_filter辺りが置換してくれそうなんですが、レンタルサーバでは動きませんでした、Xamppでも・・・
そもそもhttp.confを書き換えられない環境も多いです。


調べたら.htaccessからcgiをキックできる方法がありました。
.htaccessに「Action text/html /replace.cgi」のように記述するとCGIが動くので、ちょっとした置換処理を行うPerlを書きましょう。
もちろんCGIのパーミッションを変更する必要はありますが。

詳しくはココを参照してください。

CGI動かしちゃうので、サーバの負荷を考えるとテストサーバ用と思った方がいいです。
サーバの仕様、設定にも依存しますので、動かない場合もあります(ロリポップでは動きました)。

Action以降を書き換えれば、CSSやJavaScriptでも動くと思いますし、画像をゴリゴリ書き換えることも出来るんでしょうね、多分。


Android小ネタ

FontMetricsで取得できるパラメータ類はgetFontMetrics()した時の値を返すので、後で文字サイズを変更すると正しい値が取得できないらしい。

以下のコードだと文字サイズが20の場合のパラメータが返ってくる。

Paint textPaint = new Paint();
textPaint.setTextSize(20);
FontMetrics fontMetrics = textPaint.getFontMetrics();
textPaint.setTextSize(100);
Log.d("Font", fontMetrics.descent + "" + fontMetrics.ascent);

文字サイズを変更した場合は再度、getFontMetrics()する必要があるみたい。

マニフェストのエラー

久々にAndroidをいじろうとSDKのアップデートをしたら、過去のプロジェクトもコンパイルできなくなった。
「まず、エラー直してね」的なアラートが出るんだけど、どこにもエラーマークがないので途方に暮れながら、Eclipseの問題タブをクリックしたら、「hould explicitly set android:allowBackup to true or false (マニフェストのバックアップ関連のパラメータを設定してね)」的なメッセージがあったので、とりあえずfalseに設定したらコンパイル出来た。

ちょっと前に触った時は設定してなくてもコンパイル出来たと思うんだけどな。

Androidアプリでの色深度

Androidアプリを作っていてアルファチャンネルのあるグラデーションを含むビットマップがどうしてもキレイに描画されず(縞々に見える)、しばらく悩んでいた問題が解決したのでメモ。

結論から先にまとめると
SurfaceView内でフルカラーを描画したい場合は、SurfaceHolderに色深度を指定する必要があるようです。

SurfaceViewを継承したクラスのコンストラクタあたりで

getHolder().setFormat(PixelFormat.RGBA_8888);

のように書きます。


Androidアプリでビットマップを取り扱う際に色深度を指定できるのですが

 ARGB_8888:アルファチャンネル付き32ビット
 ARGB_4444:アルファチャンネル付き16ビット
 RGB_565:アルファチャンネル無し16ビット

グラデーションの面積が広いグラフィックやクオリティ重視の写真データなどを表示する場合はARGB_8888がマストになると思います。
Photoshopなどでノイズを乗せるとキレイに描画されるらしいのですが、画像によっては正しく表示されないようです。「ノイズを乗せる」のは簡易的にディザリングを行うことが目的だと思うのですが、アルファチャンネル付きのグラデーションには効果がありませんでした。



Androidの色深度についての解説は以下のページが詳しいですが、ビットマップデータを読み込む際にオプションを設定する必要があります。




SurfaceViewクラスは描画するエリアに色深度を設定する必要があるため、SurfaceHolderに設定する事になります(Android2.3以降はViewクラスはデフォルトで32ビットカラーらしいのですが)。

ただ、32ビットカラーのビットマップはメモリの使用量が大きく、描画のフレームレートも落ちるため、多用するとアプリごと落ちることもあるようです。
カメラアプリなどはビットマップの取り扱いが難しそうですね。


Flash作成中にクラスが増えすぎて表題のようなエラーが出ることがあります。
解決方法が書かれたブログがいくつかありますが、Windowsの環境変数に「JAVA_TOOL_OPTIONS」を追加する方法は僕の環境では改善できませんでした。

http://saqoosha.net/2008/12/24/1662/
http://air.creator.ms/flash-011.html

いろいろ探してAdobeのサイトに別の解決策が掲載されていたので、藁をも掴む思いで試したところ、エラーが出なくなりました。
レジストリを弄ることになるので自己責任でお願いします。

http://kb2.adobe.com/cps/405/kb405257.html

「HKEY_CURRENT_USER/Software/Adobe/Flash 10/ActionsInspector」の「JVM Max Heap Size」のサイズを128から256にしました。
僕の環境はWindows7のFlash CS4です。

僕のやり方が悪いのかどうかわからないですが、以前にも環境変数に追加する操作をしたところ、反映されないことがあったので(単にやり方を間違えていただけなのかもしれませんが)、心当たりのある方はお試しください。
本来はFlash/ActionScriptの構成を見直すのが一番の解決策ですが、納期の都合でなかなか出来ない場合も多いので、最終的にはリファクタリングしたいと思ってます。

MacBoocAir(2011 mid)でBootComp(悪い例)

いろいろ回り道をしてしまったので、同じように困ってる人のためにまとめます。


まず、結論。

DVDからのセットアップ失敗

BootCampアシスタントから再起動した後、すぐに黒い画面が出るようであれば、OSのインストールが出来ません。純正ドライブでないと出来ない模様。すでに外付けDVDドライブを持ってる人はBootCampセットアップだけのために買うのはもったいないので、USBメモリでのインストールを試みましょう

USBメモリからのセットアップ失敗

BootCampアシスタントでブートメディアの生成に失敗する場合、ISOファイルの生成に失敗してる可能性が高いです。別のソフトを使ってISOファイルを作りましょう



BootCampセットアップ完了までにやったこと

Window7 HomePremiumを購入し、すでに持っていたバッファロー製のDVDドライブをつないでBootCampアシスタントを起動。ドライバ類をUSBメモリーに書き込んでもらう。

BootCampアシスタントがBootCamp領域を生成し、再起動。黒い画面に白い文字で1行だけのメッセージ・・・「No bootable device」

何度、やっても当然変わらず。ALTキーを押しながら起動し、ドライブを選択するも先に進まない。結局、ボクの環境ではDVDドライブからのインストールが出来ないことに気づく

USBメモリからインストールしようと、ヨドバシまで8GBのUSBメモリを買いに走る(4GBのしか持ってなかった。BootCampアシスタントで4GBじゃ足りないって言われます)。あとで書きますが、別の方法ですと4GBのUSBメモリでも大丈夫です。

ディスクユーティリティでWindows7のインストールメディアをISO形式に変更し、BootCampアシスタントで起動用データに変換・・・、途中で失敗しましたって言われる・・・

ためしにISOデータをそのままUSBメモリに突っ込むもBootCampアシスタントにインストールメディアがないよっていわれて先に進めず。わかってましたよ・・・

同じように困ってる人いないかと2ちゃんの記事を探して、MS製の「Windows 7 USB DVD ダウンロード ツール」なるものがISOデータを起動用データにしてくれるらしいことを知り、別のWindowsマシンで試す。が、「無効なISOファイルです」って言われてあせる。

いろいろ探して、WinToFlashというフリーソフトがWin7のインストールメディアから直接、USBメモリへ起動用データを書き込んでくれるらしいのでダウンロードして行。英語版のソフトなので少々わかりにくいですが、ウィザード形式で操作できます。データは3.1GBなので手元に4GB以上のUSBメモリがあれば大丈夫なようです。

先ほど作ったUSBメモリを差し込んで、BootCampアシスタントを起動。始まったー!インストール出来たー!ちゃんとsetup.exeを起動してドライバも入れました。


参考

CSS Nite in SHIZUOKA Vol.2

8月6日(土)にグランシップ静岡で開催されたCSS Nite in SHIZUOKA vol.2に参加しました。
今回は運営委員として撮影を担当しましたので、メモを取れず、あまりまとめられないので、Togetterのリンクにて代用します。


全体の感想としては、今回、皆さん、話が上手でした。
岡村さんはスライドの密度が濃く質疑応答がすばらしかったですし、白方さんは経営寄りの話ながらボクを含むWeb制作者の気持ちを引き寄せる内容でしたし、神森さんの話を聞いている内に普段はテキストエディタを使用しているボクがDreamWeaverのデザインビューでのやり方を考えるようになりました。

皆さん、自分のやり方、やっている事に対する強い自信が伝わってきました。

細々と進めている個人プロジェクトを完成させねばと強く思った一日でした。