西川和久の不定期コラム

iPhone Appを作ってみた!
「PhotoCooker」開発記



 ここ10年ほど、企業から受注したソフトウェアやウェブアプリケーションなどを主に開発し、一般向けのアプリケーションは全く手を出していなかった。コストやサポートなど、いろいろな理由が挙げられるが、一番は「欲しいもの=作りたいものが無い」からだ。少なくともパソコン上では、有料・無料、大規模・小規模を別問題にすれば、筆者がやりたい事に対応できるアプリケーションは出揃ってしまった。それらを使えば十分遊びも仕事もこなすことが出来る。

 そんな中登場したのがiPhoneだ。携帯電話の皮を被ったMac OS Xとも言えるこの機器、単体でも付属するアプリケーションの使い勝手は良い上に、Appleが運営するApp Storeで世界に向けアプリケーションの配布・販売も可能!「これはなかなか面白そう」と、あるAppを企画・開発した。今回はこの開発記をお届けする。

Text by Kazuhisa Nishikawa

●2008年6月末頃の話

 iPhone 3G、日本では2008年7月11日に発売だったが、米国などでは既に販売済み。たまたま海外版iPhoneを持っていた友人が居たので連絡して見せてもらった。当然電話としては使えないので、iPod touch+αと言った雰囲気となる。いろいろな機能がある中、筆者的に興味があったのは仕事柄「カメラ」だった。iPhoneのカメラは実にシンプルで、シャッターを押す以外は何もユーザーが操作する部分は無い。つまり「AF無しのパンフォーカス」、「オートホワイトバランスのみ」、「露出補正無し」。現在のコンパクトカメラや携帯電話を見る限り、かなり割り切った仕様だ。しかし200万画素とは言え、写り自体は悪くなく、少しデータを触れば見栄えのする写真となりそうだった。

 当時思いついたのは、携帯電話のカメラにもよくある編集で以下の通り。

1)画像補正
 明るさ/コントラスト、色温度調整、色相/彩度など
2)エフェクト
 モノクロ/セピアなど
3)画像操作
 リサイズ、回転、トリンミグ
4)遊び系
 プチエステ、フレーム加工、スタンプ、文字入れ
※6月27日のメモよりそのまま抜粋

 こんな機能を持つAppを作れば面白そうだと言う事だ。日本時間の7月10日にApp Storeがオープンしたので、調べたところ「写真」カテゴリ内にAppは20本。各Appの説明を見る限り、類似するものは無く、これは作るしかないとプロジェクトにGoがかかった。

iPhone 3Gのカメラ付属の写真App当時作った資料。カテゴリ毎の分布など

●iPhone Appを作るには

 iPhone Appを作るには「iPhone Developer Program」へ登録し、「iPhone SDK」、「Mac OS Xの10.5.4以降をインストールしたIntel Mac」が必要となる。PowerPCを搭載したMacやMac OS X 10.4系のTigerでは動かないので注意が必要だ。現在SDKの最新版は2009年1月7日にリリースされた2.2.1。ご存知のようにもうすぐOSが3.0になるため、このバージョンのSDKは2.2.1で打ち止めになる可能性がある。

 「iPhone SDK」に含まれるのは「Xcode」、「Interface Builder」、「iPhone シミュレータ」などが主要部分だ。Xcodeは統合開発環境、Interface Builderはパネルやボタンなどリソース部分を設計、iPhoneシミュレータは、Mac OS X上で動くiPhone環境となる。この中で、今となってはほとんどプログラムが出来ない筆者でも触れる部分は、Interface BuilderとiPhoneシミュレータだ。従ってアイコンやデザイン、作動チェック、その他開発以外の部分が担当となる。

 またiPhoneシミュレータはSafariも入っているので、「iPhoneでHPをアクセスするとどう見えるか?」と言う確認もでき、自分が関係しているサイトの最適化にも役立った。ウェブ関連でiPhone対応する場合は、このiPhoneシミュレータ目当てでSDKをダウンロードするのもありだろう。

 話は少し前後するが、はじめてiPhone Developer ProgramからiPhone SDKをダウンロードしたのは6月10日だった。エンジニアに「iPhone Appを作るかも知れないので勉強して欲しいと」渡し、サンプルプログラムなどを触り勉強してもらっていた。ちなみに担当したエンジニアは、Perl、PHP、Ruby、JavaScriptはもちろん、C++、C#、Java、各種フレームワーク、SQLなどの経験者。結構なスキルを持っているものの、環境がMac、言語がObjective-C、そして膨大な英語で書かれたAPI、加えてまだ参考にできるものが無く、手探りの状態だったので結構苦労した様子だ。実際にAppに着手したのは8月に入ってからなので、約2カ月の勉強期間(と言っても仕事の合間にしているため、実質はもっと短い)。それなりにハードルは高い。

 この「iPhone Developer Program」、Appを開発しSDK付属の「iPhoneシミュレータ」上での作動チェックをするだけなら無料で利用できる。実機でのチェック及び、App Storeを使った配布・販売に関しては有料だ。有料と言っても購入は簡単。iTunesを使い楽曲を購入するのと同じ感覚でポチッとなするだけ(スタンダードプログラム 10,800円、エンタープライズプログラム 33,800円、各1年間)。特に面倒な手続きなどは無く価格もそれほど高くない。

 有料会員になるとこれまでiPhone Developer Programで見えなかったり、アクセス出来なかったりしていた部分が操作可能となり、実機でテスト、もしくはApp Storeに掲載するのに必要なファイルや情報を設定/取得できるようになる。

「Xcode」、「Interface Builder」、「iPhoneシミュレータ」iPhoneシミュレータで筆者のBLOGを見たところ。専用のタグを入れ幅一杯に表示できている。iPhone Developer Programのログイン画面

●開発開始

 当時競合するAppも無かったので、機能の違いで無料版と有料版を作る予定だった。機能としては以下の通りで、(0)(1)は無料版、(0)(1)(2)(3)は有料版と分けた。またAppの名前も考えていなかったため、とりあえず安直に「ImageEditor」とした。

(0)写真フォルダもしくはカメラから入力、写真フォルダへJPEGで保存
(1)画像操作
 リサイズ、回転、トリンミグ
(2)画像補正
 明るさ/コントラスト、色温度調整、色相/彩度
(3)エフェクト
 モノクロ/セピア

 この時、苦労したのは、プログラミングもさる事ながら、筆者のイメージをエンジニアに伝える事だった。画像系の開発経験が無く、写真では一般用語の上に挙げたようなキーワードが、元の写真から実際どうなれば正解なのかが分からないと言う。そこで、PC上で画像編集ソフトを起動し、各機能の説明、理解してもらった。動きさえ分かれば参考文献などでロジックを調べ実装する工程に入る。この時、一気に作るのではなく、各機能毎にサンプルAppを作ってもらい、それを筆者がチェック……当面はこの繰り返しだ。作動OKのサンプルAppが1つ1つ出来上がり、全機能分揃ったところで、本体への組み込みとなる。

 そしてそろそろ開発も最終段階に入った2008年9月中旬に「リーマン・ショック」。筆者の会社もモロに影響を受け、予定していた大口の開発案件が全て凍結。自社開発のアプリケーションを作っている場合では無くなり、開発は一旦中断する。その後少しずつはやっていたものの、再開したのは正月休み前後からだった。ただこの3カ月の差は結構大きく、既にこの時、類似する強力なAppが何本かあり、このままリリースしても勝ち目は無いため、仕様の見直しに入った。

 最終的に決まった仕様は以下の通り。エフェクト系の「落書き」、「モザイク」が見直した部分となる。これは他のAppを調べた結果、これはあってもこれは無い……という機能が見られ、その一番使用頻度が高そうなエフェクトを2つをチョイスしたのだ。App的にiPhoneのカメラで撮影、回転やリサイズ、トリミング、明るさ・コントラストを調整し、BLOGへアップロードすると言った用途を想定している。この時、不要なものが映り込みモザイク処理したり、落書きで一筆書くのも考えられる。ユーザーインターフェイスは説明書いらずで見れば分かるものとした。従って地味(iPhoneっぽくない!?)であるが、操作はシンプルになっている。またiPod touchはカメラが無いので撮影は出来ないものの、写真フォルダにあるデータを読み込み加工、保存することが可能だ。

・編集系
 リサイズ、回転、トリミング、ホワイトバランス、彩度、明るさ・コントラスト
・エフェクト系
 モノトーン(セピア/RGB独立)、モノクローム(特殊なフィルタ)、落書き、モザイク
・設定
 編集解像度(入力時に指定の解像度へ自動変換する)

 更に予定していた無料版と有料版を別けるのは止め、一定期間無料で公開し、その後有料化する作戦とした。これは当初よりAppの数が膨大に増えており、レビューも付かず埋もれてしまうのを避けるためだ。

 余談になるが、Appの名前は、筆者が運営しているSNS、blue.jpの仲間にいろいろ案を頂き、その中から「PhotoCooker」が選ばれた。呼びやすい名前、写真を調理と言う造語としての分かりやすさ、同名のアプリケーションやサイトが無いことなどがその理由となる。この場を借りてお礼意を述べたい。

PhotoCookerの起動画面メニュー(一番下に「モザイク」が隠れている)リサイズ
回転トリミングホワイトバランス
彩度明るさ・コントラストモノトーン(セピア/RGB独立)
モノクローム(特殊なフィルタ二種類)落書きモザイク

 モノトーンとモノクロームは、同じ白黒化でもその方法が異なり結果が違う。個人的にちょっと拘った部分だったりする。また少し特殊なのは「トリミング」だ。「任意の位置」から「任意のサイズ」へと言うのが一般的だと思われるものの、あの画面を使い指で操作するのは面倒なので、任意の位置から決まったサイズ(元画像より小さい、XGA/SVGA/VGA/iPhone/QVGA)比率は4:3に固定で、縦か横に切り取る。この件は賛否両論あるだろうが、筆者的には「iPhoneでPhotoshopの小型版を作っても……」と思い、現状の仕様になっている。

 こうしてAppを登録したのが今年の3月24日。予定より5カ月遅れとなってしまった。ただ最終段階で結構いろいろ苦労した。

□PhotoCooker
http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=309629842&mt=8

●開発で苦労した点

 一番に挙げるとすれば、iPhoneシミュレータと実機での動きの違いだろう。作動チェックで使っている実機は、iPhone 3G/16GBとiPod touch 32GB。シミュレータでは問題無く表示しているにも関わらず、実機になると色がおかしいと言う問題があった。Bit単位でRGBの演算している部分が全て変な発色をする。いろいろ触っていて「ピン!」と来たのが「バイトオーダーが逆なのでは?」だ。シミュレータはIntel CPUでの擬似作動、実機はARM11系CPUだ。試しにバイトオーダーを逆にしたものを作ったところ、実機はOKとなり、逆にシミュレータ上で同じ現象が発生した。調べてみると動作環境を取得するAPIがあるので、これを使い判断、バイトオーダーにより演算に違いが出る部分へ適応した。この問題は組込み系の開発経験者なら直ぐ分かる話であるが、ずっとIntel CPUで普通のアプリケーションを開発していたエンジニアだとなかなか気が付かない点だと思われる。

 次にメモリリーク。iPhone上で動くアプリケーションは、メモリの取得・開放を自分で管理しなければならない(リファレンスカウンタを用いたメモリ管理)。これをし損ねるとリリースするタイミングやメモリ環境が厳しい実機ではいとも簡単にクラッシュしてしまうのだ。ところがシミュレータ上では、そこまで厳密に環境を再現していない関係で少々メモリリークがあってもAppは落ちず、気付かない上に、デバッグしようにもメモリリークしている場所が特定出来ないのでソースコードやリソースモニタとのにらめっことなる。更にiPhoneとiPod touchでメモリーの空き状況が違うのか、再現したりしなかったり……。筆者はiPhoneでチェック、エンジニアはiPod touchでチェックしていたのだが、筆者がバグレポートしてもエンジニアは再現しない! となることは結構あった。

 メモリ関連でもう1つ。クリーンな状態でiPhoneが使えるフリーエリアは50MB前後。但し、iPodやSafari、メールが起動している状態だと使用可能メモリは激減する。画像処理はオリジナルのデータへ同じサイズの何かを重ね演算することが多いため、どうしても扱う解像度の数倍の作業メモリが必要となる。演算のロジックにもよるが、実験してみると1,024×768ドット程度だと安全圏。それ以上は状況次第と言った感じだ。多分他の画像処理系のAppで最大1,024×768ドットになっているのが多いのもこの関係からだと思われる。そこでリリース直前に開発当初からずっとあった「1つ前の状態をメモリに保持する[Undo]ボタン」を削除し少しでも作業エリアを増やし、更に[設定]ボタンを追加。写真フォルダーもしくはカメラから写真を読み込むタイミングで自動的にリサイズする機能を付けた。「リミットなし」はそのまま入力だ。つまりカメラで撮影した場合は、1,600×1,200ドットとなる。この解像度の場合、メモリの状況によって「落書き」と「モザイク」が落ちる事があるため、[メニュー]のこの2つは黄色になるよう、バージョン1.0.3で修正している。同じく1.0.3ではモザイクのロジックを大幅に変更し、メモリ使用量を低減した。

MemStatusを使ったメモリ状況。約50MB空いているのが分かる[設定]画面。ここで入力時に自動リサイズする解像度を設定する。標準は800×600ドット1,600×1,200ドットの時はメニューの文字が黄色に。最高解像度だと、「落書き」と「モザイク」は落ちる可能性があるので黄色で表示している

 そして最後は実行速度だ。特に画像処理系の演算は、シミュレータではサクサク動いているのに、実機では数秒かかる処理が結構あった。ロジックを変更し少しでも速くするチューニングや、演算中ハングアップではない事が分かるようにアニメーションを入れたりと、細かい作業が必要となった。

●App Store公開への道のり

 こうして出来上がったAppをApp Storeへ公開するにはiTunes Connectを使いまた別の工程が必要となる。基本全て英語。また無料か有料かで必要な項目が変わる。

 まず無料の場合は比較的簡単「コンタクト情報」を入力するだけとなる。iPhone Developer Programのアカウント情報から自動的に内容をコピーしているのでそれを設定して行くだけだ。これさえ終われば無料Appの登録が可能となる。

 有料の場合は加えて「銀行情報」と「税金情報」を設定する必要がある。銀行に関しては具体的は何処までOKかは分からないが「SWIFTコード」(国際銀行間金融通信協会が世界の銀行を特定するために定められたた番号)を持っているメガバンクは大丈夫そうだ。入力する項目でアカウント・タイプがあり「FUTSU」、即ち普通預金(当座もある)と書いてあったのには笑ってしまったが……。税金情報に関しては「W-8BEN」と言う書類を提出しなければならない。この辺りの話は検索すれば山ほど出てくるので探して欲しい。

 この時、筆者の場合、もともとiPhone Developer Programを登録する時に使った、Appleアカウントの個人情報を日本語で書いていたこともあり(かなり前にiTunes用に作ったアカウントなのでそんな事は忘れていた)、部分的に日本語が残ったままになっている。何度かサポートに変更のお願いメールを出しているのだがまだ変更されていない。いずれにしても銀行/税金情報に関してはウェブからは一発勝負、やり直しが出来ず、変更はメール(英語)でのやり取りとなるので、慎重に行なった方が良い。

 さて、App自体の登録であるが、最低限必要なものは、「App Store用(Distribution Provisioning Profileが付いたReleaseビルド)ビルドしたバイナリをZIP化したファイル」、「アプリケーション名」、「説明」、「サポート用のサイト及びメールアドレス」、「アイコンデータ」、「スクリーンショット」となる。注意が必要なのはアイコンデータだ。これは何故か解像度512×512ドットの巨大なデータが必要となる。Appのリソースで使うのは57×57ドットなので、それでデザインしてしまうと後で泣きを見る。筆者も後から気が付いてアイコンデータは作り直した。PhotoCookerのアイコンは簡単なデザインなのでまだ良かったが……。「配布(販売)する国」の設定も忘れてはならない。有料の場合は加えて、「価格」を設定する。

日本語英語混在の説明。機能面は全て英語で書いている。もともとカタカナ英語なので大丈夫だろうと言う判断から。他の部分は混在になっている。

 この配布(販売)する国であるが、Appを登録するウィザードの初めに「デフォルトの言語」を設定する部分がある。もし日本以外の国でも配布・販売を考えているのなら、デフォルトの言語を日本語とすると後々面倒なことになる。ワールドワイドで販売する仕掛けは、各国毎に先に挙げた説明やスクリーンショットをそれぞれ用意し、各国のApp Storeからアクセスすると該当する説明とスクリーンショットが表示されるのだ。ただ何十カ国ものデータを用意するのはかなり大変(と言うか事実上無理)。日本だけ日本語、他の国は英語で簡素化したい。この場合、何も情報を入力せずブランクになっている国は「デフォルトの言語」=日本語が選ばれてしまうのだ。従って、デフォルト言語は英語、日本だけ情報を入力、他の国はブランクとすれば、日本のApp Storeだけ日本語で、他の国のApp Storeは全て英語で表示される。後で変更できればいいのだが、今のところ変更は不可となっている。

 PhotoCookerに関しては後でこの件が判明したので、デフォルトの言語が日本語になって失敗している。仕方なく日本語のページに日本語英語混在の説明を書き、プライマリのスクリーンショットは日本語の画面、追加画面に英語のものを入れとりあえず一本化し、他の国はブランクとしている。ちなみにApp本体は、開発中かなりの間、英語版のみだった。登録寸前に日本語メニューを追加している。言語環境が日本語以外は自動的に英語メニューへ切り替わる。

 こうして無事登録が終わっても実はもうヒト山ある。それは「Appleのレビュー待ち」。つまり同社のレギュレーションに引っかかっていないかのチェックが入るのだ。アダルト系、同社が認めていないジャンルのアプリケーション、特許や登録商標、知的所有権などに該当しないか……などがその対象となるようだ。実は最初のバージョンを登録した時、これに当たってしまい1回修正を行なっている。具体的な内容はここでは触れないが、いきなり落とされるのではなく理由を書いたメール(英語)が送られて来た。英語が苦手な筆者はウェブ翻訳で内容を理解、そして日本語を同サイトで英語に翻訳して返事を送り、修正したAppを再登録して無事受理された。また送った返事に対する連絡もレスポンスが早くしかも丁寧な内容で結構驚いてしまった。App 1本1本にこの作業を行なっているとすると膨大なマンパワーが必要となる。基準が不明瞭などいろいろ言われているこのレビューであるが、担当者の苦労が思いやられる。

●公開後

 こうしてバージョン1.0.0を再登録し、App Storeに載ったのは4月16日。ただリリース直後にメモリリークが見つかり、即修正、1.0.1を21日に登録、28日に公開、細かいバグを修正した1.0.2を28日に登録、5月2日に公開、最終的にチューニングした1.0.3を5月15日に登録、22日に公開している。これからも分かるように、最短だと5日、最長でも1週間で登録、レビュー、公開という日程となる。

 ただタイミング的に1.0.3を登録する時は、現在開発者に配布されているOS 3.0β上で動かないとリジェクトするというお達しがAppleから出ており、大丈夫かなと思っていたが無事掲載され、ほっと一安心だ。

 ゴールデンウィーク中の5月6日まで無料、7日から230円の有料にしたのだが、この時、嬉しい誤算があった。期間限定の無料にしたのは「ブランディング」を意識してのこと。ただ正直、神Appの「CameraKit」、AppleのCMにも出ていた「Photogene」など強力なAppが存在する写真カテゴリ。「写真・無料カテゴリでトップ10内に入れば良い方だな……。」と思っていたところ、5月に入って直ぐからいろいろなiPhone関連のサイトで紹介されて、グングン順位が上がりはじめ、5月3日には写真・無料カテゴリで1位に。サポートのリンク先になっていた会社のHPも徐々にアクセス数が増え始めている。もともと大した情報を掲載していなかったので「これはマズイ」と、更新する内容も無くほとんど放置していたXOOPSのシステムを、急遽メンテナンスし易いWordPressへ入れ替え、各種情報を登録、体制を整えた。バージョン1.0.0ではメモリリークが残っていて大変迷惑をかけてしまったが、1.0.1以降は徐々に評価も上がって行った。

 評価は筆者が考えていた通りで、撮影し加工、不要なものをモザイク処理、もしくは一筆入れ、BLOGへそのままアップロードと言う用途が多いようだ。類似するAppが出るのは時間の問題だと思われるものの、この一連の作業を1つのAppで出来るのは現在のところPhotoCookerしかない。

 そして5月6日には総合・無料カテゴリで「ニコニコ動画App」を抜いて遂に1位! 少し前、1位がニコニコ動画Appだっただけに「1位は絶対無理」と思っていた。予想もしなかった出来事にスタッフ一同大喜びだ。

神Appの「CameraKit」。いろいろなフィルターをバッチ処理的に行ない、雰囲気のある写真を作り出す記念すべき無料総合1位! この画面キャプチャは一生の思い出(笑)WordPressの管理画面。いろいろなプラグインを組み込むことによって自在にそして素早くカスタマイズ出来る


 このPhotoCooker、残念ながら有料化直後から、じわじわ順位は落ちて行き、今や25位圏外になってしまった。ただ今回思ったのは、このApp Storeは実に面白い仕掛けだ。それは個人、企業、その規模の大小に関係無く、同じ土俵でアイディアと技術のみで勝負できる環境だと言うことだ。開発環境はIntel MacとiPhone(もしくはiPod touch)が1台ずつあればOK。理屈の上では他の販売形式でも同じなのだろうが、実際それが正に起こっているのはApp Storeだけだ。現在、当初とは違い、いろいろな情報があるため開発や登録も容易になった。腕に覚えのある方はぜひチャレンジしてみてはいかがだろうか。