iPhoneアプリケーション用のアイコンファイルをHTML5で作ってみた
ブラウザ上から画像を保存することでファイルが得られます。得られた画像は以下のようになります。
ソースはこのような感じになります。
<!doctype html>
<html>
<head>
<meta name="Author" content="Konton (http://kontonsoft.blog.shinobi.jp/)">
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5のCanvasでiPhoneアプリのアイコン作製</title>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('canvas_for_jpeg');
var context = canvas.getContext('2d');
drawCanvas(1, context);
var img_jpg_src = canvas.toDataURL("image/jpeg");
document.getElementById("icon_jpeg").src = img_jpg_src;
var canvas2 = document.getElementById('canvas_for_png');
var context2 = canvas2.getContext('2d');
drawCanvas(2, context2);
var img_png_src = canvas2.toDataURL();
document.getElementById("icon_png").src = img_png_src;
}
function drawCanvas(mode, ctx) {
// 以下でキャンバスに描画
if (mode == 2) {
ctx.scale(57 / 512, 57 / 512); // 小さいアイコンの描画では縮小を行います
}
// Firefox, Operaでjpegの透明色部分が黒くなることなどへの対策
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 512, 512); // canvas全体を白で塗りつぶします
// 実際の描画開始
ctx.lineWidth = 20; // 枠線の太さ設定を20ピクセルにします
// 枠線の色設定を赤色にします
ctx.strokeStyle = "red";
// (64,64)を始点として幅、高さとも256ピクセルの矩形を描画
ctx.strokeRect(64, 64, 256, 256);
// 枠線の色設定を緑色にします
ctx.strokeStyle = "green";
// (128,128)を始点として幅、高さとも256ピクセルの矩形を描画
ctx.strokeRect(128, 128, 256, 256);
// 枠線の色設定を青色にします
ctx.strokeStyle = "blue";
// (196,196)を始点として幅、高さとも256ピクセルの矩形を描画
ctx.strokeRect(196, 196, 256, 256);
// ここまでで描画終了
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<h1>HTML5のCanvasでiPhoneアプリのアイコン作製</h1>
<h2>大きいアイコン(枠無しがjpeg画像)</h2>
<img id="icon_jpeg" src="" alt="アイコン用画像(大)" width="512" height="512">
<canvas id="canvas_for_jpeg" width="512" height="512"></canvas>
<h2>小さいアイコン(枠無しがpng画像)</h2>
<img id="icon_png" src="" alt="アイコン用画像(小)" width="57" height="57">
<canvas id="canvas_for_png" width="57" height="57"></canvas>
</body>
</html>
ソース内の「// 実際の描画開始」の行から「// ここまでで描画終了」の行の間にあるキャンバスへの描画コードをテキストエディタで入れ替えるだけで、大小2個の画像が得られるのでそこそこ有用なのではないでしょうか。描画用のスプリクトは大きいほうの512×512のサイズがあるものとして作ります。小さいほうにはそれが自動的に縮小されて表示されます。Internet Explorer以外の代表的なブラウザの最新版(Safari4.0.4、Firefox3.6、Google Chrome4.0、Opera10.10)で正常に動作することを確認しています。
2010.02.05追記：
Internet ExplorerではExplorerCanvasに含まれるexcanvas.jsを組み込めばcanvasをIｎternet Explorer 8などで表示することができます。(現在の最新版はRelease 3。ライセンスはApache License 2.0なので、原文のまま使用するなら商用、非商用問わず利用可能です。)ただし、円形グラデーションなど一部の機能はサポートされていません。インターネット上のサイトにhtml形式で公開する場合はこのようなものを組み込んで対応すべきなのでしょうけれど、ローカルでは別のブラウザにドラッグ＆ドロップするだけなので不要でしょう。ブラウザはInternet Explorer以外は死んでも使いたくないという人がiPhoneアプリケーションの開発をするとは思えませんからね。
Abyss Quest 1.2 リリース開始
HTML5をUIWebViewで表示させる
結果から先に書くと、UIWebViewでもちゃんとHTML5は認識されて表示されました。
実験にはiPhone SDK 3.1.2 with Xcode 3.2.1を使用しました。実験の大まかな手順は以下の通りです。
1.Xcodeで新規プロジェクトを作成する。テンプレートはiPhone OS > Application > View-based Applicationを選択し、プロジェクト名は「CanvasTest」としました。
2.Recorcesに新規ファイルを追加します。テンプレートはMac OS X > Other > 空のファイルを選択し、ファイル名は「CanvasTest.html」としました。内容は以下の通りです。iPhone OSでUIWebViewに表示させるだけなので、titleなどは入れずにシンプルな構成にしています。
<!doctype html>
<html>
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 三角形を描きます
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.lineTo(250, 250);
ctx.lineTo(50, 250);
ctx.closePath();
ctx.stroke();
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
3.念のため変更を保存します。
4.Classesを展開してCanvasTestViewController.hを開き、@interfaceから@endまでの部分を以下のように変更します。
@interface CanvasTestViewController : UIViewController {
UIWebView *myWebView;
}
@property (nonatomic,retain) IBOutlet UIWebView *myWebView;
@end
5.変更を保存し、CanvasTextViewController.mを開き、＠implementationの直後に以下を追加します。エラー対策なしの手抜きですが気にしなくても問題ないでしょう。
@synthesize myWebView;
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
NSError *error = nil;
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"CanvasTest
ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath
encoding:NSUTF8StringEncoding
error:&error];
[myWebView loadHTMLString:htmlString baseURL:nil];
}
6.ファイルの後方にあるdeallocメソッドを以下に変更します。
- (void)dealloc {
[myWebView release];
[super dealloc];
}
8.Xcodeに戻り、ビルドと実行を行います。以下のような画面が表示されます。なお下の画像はステータスバー部分を取り除いたスクリーンショットです。
標準の状態では上と左に10ピクセルの余白が入るようですが、canvasの枠もその内部の三角形もきちんと描画されているのがわかります。
UIWebView と HTML5
もちろんHTML5はまだ完成形ではないですし、WebGLなどの現在実装作業中のものは対応していませんのでその点はご注意を。
Abyss Quest バージョン 1.2 マスターアップのお知らせ
Abyss QuestおよびAbyss Quest Litte共通：
メイン画面のコマンドﾊﾞｰで、左から2番目の設定に割り当てていたボタンを表示切り替え用に変更しました。ボタンを押すごとに表示が拡大表示（表示1）から縮小表示（表示2）へ、縮小表示（表示2）から拡大表示（表示1）へとアニメーションしつつ切り替わります。なお、これまでの設定はコマンドボタンを押して表示されるメニューに移動しています。
Abyss Questのみ：
クエストを進めると解放されるスコアアタック系ダンジョン内で、階を下りた時に装備中の武器や防具のステータス数値が誤って変更されてしまっていた不具合を修正しました。（なお、現行バージョンでは武器や防具を装備しなおすことでステータス数値が正常に戻ります。）
謝辞他：
げし様、当ブログへの詳細な不具合報告ありがとうございました。おかげさまでようやくバグの原因がを見つけることができました。なお、現行バージョンのユーザーの皆様には、バグの発見および修正に大変長らくお待たせいたしましたことをお詫びいたします。
開発者の視点で見るiPad
なぜ今回もFlash非対応なのか
まず、Flashへの非対応について。これは対応させる気があれば既にiPhone 3GSが出るまでには対応させていただろうと思われるので、「Flashは未来のWebには不要なもの。」というアップル社の思想が背景にあるように思えます。ネット上の噂話に「Flashの存在はApp Storeを脅かす存在だから非対応にしているのだ。」などといったものがありますが、これは間違いでしょう。もしそれがFlash非対応の理由ならHTML5を使用したWebアプリケーション開発や配布もFlash同様にApp Storeの外で行われ、その存在を脅かすものであるはず。そのためHTML5もFlash同様に非対応を貫かなければおかしいはずです。ですがHTML5への対応についてはFlashとは正反対であり積極的に行われています。ここから考えられるのは、「HTML5は今後必要になるものなので積極的に対応してゆく。」という思想です。Flashが飯の種という人たちにとっては残念な話なのでしょうけれど、外野がいくら騒いだところでこの方針が変わることは無いと思われます。
なぜMac OS XではなくiPhone OSなのか
iPadの動作OSがMac OS XではなくiPhone OSであるのは、「指で画面をタッチして使う機器にはiPhone OSのほうがMac OS Xよりも適している。」という思想があるのではないかと思われます。実際にやったことがあるわけではありませんが、Mac OS X動作機器を「マウスのようなポインティングデバイスなし、タッチパネルを指のみ」で操作するのは至難の業でしょう。話はそれますがアメリカではModBookという、「Apple純正MacBookホワイトなどの画面を液晶タブレットに置き換える改造したもの」を売っている会社があります。ちなみに価格は一番安いものでMacBookホワイト分も込みで2248ドルからだとか（本体持ち込みの改造のみは1299ドルから）。このModBookは指での操作も一応できるようですが、細かい操作はスタイラスを用いなければ厳しいものと思われます。Mac OS X向けの開発用には用意されているツリー表示用の部品がiPhone用としては存在していないのも、指では操作中に画面が隠れてしまうため、マウスポインタ操作のような数ドット単位の細かいコントロール が容易ではないからでしょう。
アプリケーション開発者にとっての魅力は何か
さて、何も特別な道具なし、指のみで直感的に操作可能というのが売りのiPhone OSですが、それゆえの開発上の問題点もあります。iPhone OSの標準ユーザーインターフェイス(以下UIと略）用の部品はどれもそこそこのサイズがあります。そのためUI部品を多数必要とするようなアプリケーションを作ろうとすると、画面がそれらで埋め尽くされ、データ表示部分が狭くなってしまうのです。狭い部分に無理をして多くのデータを詰め込もうとするれば、文字が小さく読みにくくなってしまいます。逆にデータ量を減らせば一覧性が低下し、全体を把握するために何個かの画面を右へ左へと行ったり来たりしなければならなくなります。そこを何とかするのが開発者の腕の見せ所だろうという厳しい声も聞こえて来そうではありますが（汗）、多くの開発者にとって頭の痛い問題だったのは事実でしょう。
そんなわけで、今回発表されたiPadをiPhoneアプリケーション開発者の視点で見てみると、一番の魅力は画面の解像度とサイズです。まずピクセル単位で考えると、画面はこれまでの5.12倍の面積があります。そしてppi(pixel per inch)の比較でもiPhone/iPod touchが163ppi、iPadが132ppiですから、たとえこれまでと全く同じピクセル数の文字を表示させたとしても、1.2倍以上の大きさとなり読みやすくなることがわかります。UI部品配置の自由度は格段に上がり、一画面で表示できるデータ量も一気に増える。開発者にとってこれは大いに歓迎すべき部分でしょう。
当日追記：
Flashの非対応については別の側面もあるかもしれません。アップル社にとってiPhone OSは「コンピューターにあまり詳しくない人でもセキュリティ面で余計な心配をせずに使えるインターネット端末」を提供するためのものとも考えられます。ユーザー側によるマルチタスク不可も、背後で動作するコンピューターウィルスやスパイウェアの排除という側面もありそうです。この点から考えると、Flash対応→iPhoneのセキュリティ管理をアップル社で一元管理できない→セキュリティ面に他社任せで不安な部分が出来てしまうという図式が成り立ちます。アップル社としては「これまで信頼を築き上げてきたiPhone OSのセキュリティ面での安全性を他社任せにして失うようなことがあってはならない」と考えているのかもしれません。HTML5についてはアップル社の自己責任でSafariに実装するものなので、たとえ不備が見つかっても自身で対処できます。これはFlashとは対照的な部分です。HTML5の積極的な採用と、Flashの非対応にはこのような背景もあるのではないでしょうか。
OSについては、Mac OS Xを入れたらストレージ（フラッシュメモリ）の大半がそれで埋まってしまうのではという問題や（フル機能のMac OS Xや周辺ソフトをインストールするなら16GBでは足りないのでは？）、OSのメジャーバージョンアップファイルが肥大化して「オンライン配布でボタン一 つでアップデート」というiPhoneのようなシンプルさが失われてしまうという問題があります。ストレージ容量はハードディスクの搭載や搭載フラッシュメモ リーの大容量化でなんとかできたとしても、「素直にMacBookでも買ったら？」という価格帯になってしまいそうです。また、「バージョンアップはお手持ちの母艦とケーブルで繋いだ後にディスクを入れて、説明書でも見ながら頑張ってね」というのは大衆向けの手軽な機器を目指していると思われるiPadにあってはならないことでしょう。 結局のところ、コストやターゲットを考えると、Mac OS Xの搭載はあり得ないということになるのではないでしょうか。
バッドアイテムの役割
「混乱」などのプレーヤーの足を引っ張るアイテムには、実は隠された役割があります。ヒントは試験用アビスを終えてすぐにラボの上に乗ると表示されるメッセージなのですが、気づいた方はいるでしょうか。
ラボではアビスの研究をしており、持ち帰ったアイテムを提出できます。「混乱」などのお邪魔系アイテムをそれぞれある一定数提出すると、ラボの研究員による分析が終わります。分析が終わった種類については、ショップでトラップ作成アイテムの販売が始まります。ちなみに提出は、ラボの上でコマンドからアイテムを選び、アイテムリストから提出したいアイテムをタップします。そのあとどうするか聞かれたら、「提出する」を選びます。これでラボへの提出は完了します。
もう一つの役割は、提出数に従いアビスで罠にかかった際に回復に要するターン数が減少するというものです。さらに、敵が罠にかかった際の回復ターン数は逆に増加するという仕掛けもあります。ラボの研究員、こっそりとこんな仕事をしてたんですね。お邪魔アイテムは持ち歩くのは邪魔なので、「アイテム転送」でベースキャンプに送り、メールボックスから取り出して提出するのが効率のよい方法でしょう。
ちなみに、試験用アビスに落ちているお邪魔アイテムはレプリカです。名前も効果も全く同じですが、こちらを提出しても上記のようなご利益はありません。提出しても所持金が増えるだけなので、ゴミアイテムも同然です。試験用アビス自体がプレーヤー側の組織で作った「本物のアビスの情報から作られたレプリカ」なので当たり前ではあるのですが、そのあたりの情報はまだこのブログでしか公開していません。まあ、このブログまで見に来る熱心なプレーヤーさんへのプレゼントということで勝手に納得することにしています。
iPadについて
CPUの処理能力はおそらくiPhone 3GSの2倍以上ありそうですが、ストレージではないアプリ実行用のメモリー容量が増えているのかは不明な状態です。これまでのiPhone用アプリは全て動くようです。ただカメラアプリについてはよくわかりません。ドッグからUSB用のアダプタを経由してWebカメラ等を繋げば使えるということなのか、カメラ系アプリはiPod touch同様使えないのか、どちらなのでしょうか。このあたりは実機が出ないとわからなそうです。
これまでのアプリはこれまで同様の解像度で動かす事も、拡大表示で動かす事もできます。今後発表されるであろう正式なiPhone SDK 3.2を使用すれば、iPadの解像度にも対応したアプリの配布が可能になるようです。画面が9.7インチのXGAに広がる事で、ビューアー系の用途ではより見やすく便利になりそうです。同時発表のiWorkを使って個人相手のプレゼンに使うという用途も考えられそうですね。
当日追記：
一応GPSは3G対応版のみということになるようです。iPod touchでも無線LANのアクセスポイントとつながっていればほぼ同様の位置情報を割り出せていたので、大きな差にはならなそうです。
2010年1月29日追記：
現状ではiBooks関連機能は日本で利用できない可能性が大きいようです。日本のアップル社ホームページにもiPadの紹介ページが出来ましたが、それらに関連した部分は全部カットされています。
A4と呼ばれているチップのCPU部分はARM系のコアだそうです。iPhone OSが動作する（これまでのiPhone OS動作機器は全部ARM系コア）ことから考えると当然といえば当然なのですが。
