MKチャット対談(MMチャット対談)よくわかるiPhoneアプリ開発・出張版
── まつむらまきお&森巧尚 ──

投稿:  著者:



♪る〜るる〜、ら〜らら〜

まきお: こんばんわ〜。黒柳徹...じゃない、まつむらです。今回は特別企画としまして、いつものマツカサはお休みしてWebゲームクリエイターの森巧尚さんをお招きし、今まさに筍の「iPhoneアプリ開発」についていろいろ聞いてみようと思います♪ 森さん、こんばんわ〜

森巧尚: こんばんわ。森です。よろしくお願いします。


まきお: 森さんはFlashのクリエイター、執筆者として有名ですが、実は先月末に、森さん著の「よくわかるiPhoneアプリ開発の教科書」という本がマイコミさんから出たんですよね。それのイラストをまつむらが描かせてもらったわけです。いやー、ようやく出ましたね (^_^; 遅くなって申し訳ない

森巧尚: いえいえありがとうございました。というか、本当は去年の春頃別の本でもお手伝いしていただいてたんですが、今回の本は出版できてよかったです


まきお: あははは(^_^; 

森巧尚: 去年、Packager for iPhoneが出て「FlashでiPhoneアプリができる」と思ったときは飛び上がって喜んだんですが、それがCS5発売直前になってFlash書き出しがダメってなったときは、奈落の底に落とされた感じでしたよ


まきお: 森さん、本を準備中だったんですよね。FlashでiPhoneアプリ開発入門の

森巧尚: その後、結局Flashから書き出せるようになりましたけど、でも最初ダメって言われたときは、Flash使ってる人もiPhoneアプリやっぱり作りたいだろうなあと思って、でそのときちょっとiOS SDK触ってたんで、意外と面白いよ、って感じたのでiOS SDKでやさしく作れる本をって考えました


まきお: で、今回はそのiPhoneアプリ開発についてイロイロ聞きたいと思うんですが、iPhoneアプリ開発ってそもそもプログラミングの知識ってどれくらい必要なんですか? 何つくるか、にもよるでしょうけど

森巧尚: まあ、すごいことをバリバリしようと思ったらプログラムの知識はそれなりに必要ですけど、ちょっとしたものを作るだけだったら、ちょっとの知識だけでもいろいろ作れるんですよ。それってFlashと似てますよね



まきお: そのチョットってのがクセモノのような気も (^_^; たとえば画集やマンガ、写真集みたいな、画像集みたいなのだと、レベルはどれくらい? HTMLがちょっとさわれる、くらいの人でもいけるもんですか?


森巧尚: 「アプリをプログラムで作る」ものなので、やっぱりプログラムでしくみを作ることを理解する必要はありますね。ただ、基本的にはActionScript2やActionScript3が触れるぐらいであればできると思いますよ


まきお: ActionScript2でいけますか! つか、まつむらいけますかね?(^_^;

森巧尚: そうなんです。iOS SDK(iPhoneアプリを作るソフト)を使ってて、他のプログラミングとなんか違う親近感があるなあとおもったのですが、画面を作ってプログラムで動かすしくみを作るとき、「このテキストフィールドはこういう名前」「このボタンはこの仕事をします」っていうのをユーザーインターフェースで、線を引っ張ってつないで作ったりするんです


まきお: ほうほう、Dreamweaverでリンク貼るみたいな感じ?

森巧尚: そうそう。あんな風にビヨーンと線をのばしてつないでいくんです

まきお: なるほど、ってことは、ここタップしたら、このプログラムが動く、ここの定義はここ、みたいなのを記述じゃなくてグラフィカルにできるって感じでしょうか

森巧尚: 目で見ながら作っていけるので親しみを持って作りやすいんですよね


まきお: なるほど〜 で、さっきから出ているSDKですが、本によると、いくつかのアプリにわかれてるんすよね

森巧尚: iOS SDKって複数のソフトでできているんですが、それぞれの役割が違うので、Flashでいうといろんなパネルが別のソフトになってるって感じなんですよね。Flashの絵を作る部分(ステージとライブラリとプロパティ)がInterface Builder。Flashのアクションパネルの部分がXcode、ムービープレビューがiOSシミュレータっていう感じで、複数のソフトを使って作っていくんです


まきお: ふんふん、3つもあるとちょっと躊躇する感じもありますが。今回の本はインターフェイスビルダーってのが中心ですよね

森巧尚: そうです。このインターフェースビルダーが一番親しみを感じるところなんですが、これでiPhoneの画面を見たまんま作っていきます。部品をレゴブロックみたいに並べて作っていくんです


まきお: Flashだと部品って自分でグラフィックから作るんですけど、iPhoneの場合、ボタンとかダイアログがあらかじめ用意されてる

森巧尚: iPhoneアプリでよく使われている部品っていうのは、あらかじめライブラリに用意されているので、それを選んで並べるだけで、すぐにiPhoneアプリっぽい画面はできちゃいます。でも、自分で描いたグラフィックスを貼ることもできるので、自分らしいカスタマイズもやりやすいですし


まきお: ふんふん。えっと、Flashだと画面とタイムラインってのが最初からあって、それを利用してプログラムを組んでいきますが、iOSだと、最初は画面をつくっていくってイメージっすか? HTMLとかハイパーカードのイメージ?

森巧尚: そうですね。タイムラインの考え方がないので、その部分はちょっとHTMLとかハイパーカードに近いかもしれませんね。1フレームだけのムービークリップで作るみたいな感じです。


まきお: そこんとこのイメージングが初心者には難しいんですよね〜。イメージとしては、アプリのメイン画面を最初にイメージして、あれやこれや盛りつけていったり、機能を記述したりって感じであってます?

森巧尚: そうですね。「画面を作って、そこにプログラムを追加して動かしていく」という、2段階で作っていく感じですね。でも、画面も全部プログラムで計算して作っていく方法よりは理解しやすいと思います


まきお: それは勘弁してほしいです(^_^;) じゃあさっきも例に出したんですが、画集みたいなのはわりと簡単につくれます?

森巧尚: 絵のグラフィックスをあらかじめアプリの中に用意しておいて、ボタンを押したらとか、スライドしたらとかのきっかけで次の絵に切り換えていく、みたいなことだったらわりとすぐできると思います


まきお: ボタンは簡単そうだけど、スライドとかって難しいんじゃないんですか? 絵がスライドするやつ

森巧尚: 絵をスライドさせるにもいろんな方法がありますが、簡単なのだと、画面の右の外側に絵を用意しておいて、1秒したら画面の中央に移動してくる、って指示しておけば絵がスライドして入ってきてくれます


まきお: そ、その画面の右側って...Flashみたいに実際に右側におけるわけではないですよね?

森巧尚: 無理矢理大きい画面(View)を用意して、そっちを使うようにして右側に置いておくこともできます。ただそれだと画面サイズがiPhoneより大きくなって設計がやりにくかったりするので、画面中央に置いて作った絵を最初に外に移動させて隠しておいてから表示させる、みたいな感じで作ると画面サイズがiPhoneのままで作れます。そのあたりのしくみを作るところは、見たまんまというよりもプログラムで脳内でシミュレーションしてるところはあるかも知れませんね。


まきお: ほー、実際に置けるんですね。あらかじめ用意されているインターフェイスですが、かなりの種類がありますよね。イラスト描くの大変でした(^_^; safariとか、マップとかも、部品として用意されているようでしたが

森巧尚: イラストたくさんありがとうございました。こういうプログラムの本って、とかく定義とかソースプログラムとか文字ばっかりになりがちなので、なるべくイラストをいっぱいにしたかったんです。「部品を置いてコントロールする」だけでいろんなことができるので、部品たちが主役ですから


まきお: 今回はそれぞれ、機能を持ったロボットのキャラクターで描いたんです。GPSとかデザインしやすかったですが、パーサーでしたっけ?XML処理するやつ。あの辺になると、かなり観念的で形にするのに難儀しました(笑)

森巧尚: CoreLocationですね。そもそも、クラスとかインスタンスって頭の中に絵で浮かべにくいんですよね


まきお: そうなんですよね〜。変数とかもそうですね。もともと数学ってのはそういうもんだとは思いますが。で、箱(変数のイメージ)やタンス(配列のイメージ)やらなんやら総動員して、なんとか目にみえるもんにして、イメージしてもらおうと四苦八苦(笑)でも正直、AS3よりはイメージしやすかったです(^_^; AS3は手強かった...

森巧尚: 実はAS3でもそうだったのですが、オブジェクト指向プログラムを作っているときって「あのオブジェクトに、この仕事を頼もう」とか「このオブジェクトに、情報を教えてもらおう」とかって頭の中でつぶやいていたりするんです。いつの間にか、「人」として考えてるような


まきお: 擬人化っすね。映画TRONもプログラムの擬人化ってのがコアアイデアでした

森巧尚: そうです。それならいっそオブジェクトを擬人化したらすんなり理解できるんじゃないかと思って。

まきお: で、この本では擬ロボ化(笑)実際は全部デザインしたかったんですが、かえって形がいろいろすぎても、わかりにくいかなぁってことで、アイコンのみ変えたものもありました

森巧尚: 萌えキャラだと違う方に頭がいっちゃいそうだったので、ゆるキャラっぽいロボがちょうどイイ感じでした


まきお: 違う方(笑)萌えもいいなぁ(笑)

森巧尚: 「かわいくて真面目だけど、あんまり頭がよくないオブジェクトロボに仕事を教えてあげる」という気持ちで指示書を作るようにプログラムを作ると作りやすいんじゃないかと思います

まきお: ロボをアホ顔で描いたのは正解なんですね(笑)

森巧尚: 正解です(笑)


まきお: で、インターフェイスビルダーで形ができたら、今度はそれぞれの部品に機能をつけるわけですが、これを書くのが、Xcodeでしたっけ

森巧尚: Xcodeで、Objective-Cというプログラム言語を使って書きます

まきお: イメージとしては、Flashでボタンに「ワシ押されたら、再生するよん」って書くのといっしょですか?

森巧尚: ActionScript2みたいって言ったのはそれです。ボタンを「これ」って指さしておいて、「あんたが押されたら、こんなことをするんだよ」指示するわけです


まきお: なるほど〜 ワシ現れたらこれするとか、アンタにこのデータあげるとか、そういうやりとりのイメージはFlash的というか、部品が目に見える分、イメージしやすいと

森巧尚: 見た目で指示できるので、Flash的でイメージしやすいんですね。ただ、さっきも言いましたけどActionScriptとかJavaScriptとはちょっと見た目の違うObjective-Cという言語で指示します。そこは、「かわいくて真面目だけど、あんまり頭がよくないオブジェクトロボくん」なので「彼にわかる言い回し」で指示してあげる必要はありますけど、「考え方」はだいたい同じです


まきお: そのObjective-Cですが、ActionScriptとか、JavaScriptとは言い回しっていうか、書式が全く違うので、さすがにこれは戸惑いますねぇ

森巧尚: パッと見ると、[ ]がいっぱいあったり、命令文がやたら長くて長い英文を見ているような抵抗感はありますね


まきお: これはFlashの「スクリプトアシスト」みたいなサポートインターフェイスは用意されてないんですか? 辞書から選んでダブルクリックとか

森巧尚: Xcodeがちょっと賢くて、プログラムを書いていると「あなたはこの命令文を書くつもりでしょう?」って途中で命令文の候補を表示してくれたりはします。入力文字が増えていくと候補がしぼれてくるので慣れてくると多少楽にはなりますが、そもそも出だしがわからないと出てこないので、最初は教科書を見ながらがいいかと思います


まきお: インクリメンタルしてくれるんだー。ifとか、おなじみの構文もありますね。本では構文を丁寧に説明してくれてるので、ちょっとづつ慣れていくことはできそう

森巧尚: 本当はいろんなことを組み合わせると面白いものもできるんですが、最初はわからなくて試しているのに、もし動かなかったときにどこがおかしいのか困っちゃうのでできるだけ短くしました。3分間クッキングみたいなものばかりです


まきお: それ重要ですよね。ちょっと作ってすぐに動くとモチベーションあがりますから

森巧尚: シンプルな作例で「このオブジェクトは、どんなことをする人なのか」がわかっていると、「この人ならこんなことができそうだ」とか「この人にこれを頼んでもできそうじゃないな」という予想が立てやすいので、調べるときも的を絞って調べられるようになります。やっぱり各オブジェクトを「こんなことをする人」っていうイメージで覚えておくと、扱いやすくなると思います。ちっちゃいサンプルばかりですが、部品の量が多いので結局本が分厚くなっちゃいましたねー


まきお: そうそう、分厚いんす! 見本誌が届いて、「3冊...ありゃ、2冊だ!」ってびっくりしましたよ(笑)ゲラはバラバラで来るので気がつかなかった。

森巧尚: こんな分厚い本を書いたのは初めてです

まきお: イラストも100個くらいありましたよね

森巧尚: 本をパラパラって眺めて見ても、どこにもカラフルな絵がいっぱいの絵本みたいになってホントよかったです


まきお: 絵はコピペが多くて楽なように見えますが、これ、似て非なる図がいっぱいって、大変なんですよ。気がついたらおなじの2枚つくってたり(^_^;

森巧尚: ややこしくてすいませんでした。


まきお: いえいえいえ(^_^; で、この本一冊やったら、どんなアプリが実際につくれるようになります?

森巧尚: ライブラリにある「iPhoneアプリでよく使われている部品」をだいたい使う感じになるので、「iPhoneアプリでよくあるような基本的なアプリ」は作れるんじゃないかと思います。ただ、3Dのゲームとか、画像処理をするアプリとかはもっとプログラムをバリバリ使わないとできないので、さらなる勉強は必要だと思いますね


まきお: ああ、そのあたりは別の知識が必要でしょうね。「よくある」ってーと、メモアプリとか、地図アプリとか、画集みたいな電子書籍とか、シンプルなゲームとか、でしょうか

森巧尚: そうですね。そのあたりのアプリはできると思います。それにそもそもiPhoneアプリはちょっと起動して使う、ようなものが多いので、多機能のものよりシンプルなちょっとしたアプリが作りやすいし、使いやすいでしょうね


まきお: 加速度センサーとかGPSも使えるので、組み合わせ次第、アイデア次第でしょうか。加速度センサーでゲームって、簡単につくれちゃう?

森巧尚: 加速度センサーを使うとわりと簡単に作れますし、ゲームにするのに向いてますね。ゲームで重要な要素になるユーザーの微妙なバランス感覚をそのままゲームに取り入れられますからね


まきお: 身体感覚がそのまま使えるわけですもんね

森巧尚: それだけいろいろゲームはあるわけですけど、アイデア次第でまだまだいろいろ可能性はあると思います


まきお: 手書きメモのアイデアがあるんですが、あれは難しい?

森巧尚: 複数の手書きメモを表示するようなアプリなら、組み合わせでできますよ。手書きメモのリストを配列で用意しておいて、テーブルビューで見出しを表示して選択させて、その中身をテキストビューで表示させるようにすればできますね。ちょっとしたデータ量ならUserDefaultを使うと保存できますし


まきお: テキストじゃなくて、筆跡で書くやつ。扱ってましたっけ?

森巧尚: ああ、指でグラフィックスを描くようなのはなかったですね。それを書き出すとまた分厚くなりそうだったので......


まきお: ああいうのとか、3Dとかってライブラリは公開されているものってあったりするんですか? ActionScriptだとけっこう、そういうのを集めてなんとかしたりしますよね

森巧尚: 指でタッチした情報を調べたり、指でつまんで拡大縮小するようなジェスチャーを調べるのはもともとついているので、それを使って調べることができますね。ライブラリとかもいろいろあるようです。ゲームに便利なライブラリだとcocos2dっていうライブラリがあって、画面の切り替えとか爆発の演出とかいろいろできたりします。ただ、英語のものが多いので説明を読むのが大変ですが


まきお: あ〜〜英語...orz。ネットとの情報やりとりはXMLがあるから、このあたりはWebサービスとの連携とかいろいろできそうですね本の方はなんか好評のようで、発売三日目の今日、はやくも増刷の知らせが入りました。びっくりした。Amazonとかで事前予約がたくさん入ってたってことかな

森巧尚: 3日目で増刷ってびっくりしました。買って下さった方ありがとうございました


まきお: iPhoneの普及度ってのもなんかすごいことになってるし、アプリもいろいろ見てるとアイデア次第だなぁと夢が広がるところがありますもんねぇ

森巧尚: 先日、F-siteでセミナーをしたとき即売会をやったんですが、そのときも完売させていただいて驚きました。ありがたかったです。なんか、スマートフォンに対しての注目が高まっている気がしますね


まきお: 英語の壁はあるものの、なんとかなるかなーって気になってきました。じゃあ最後に、デジクリ読者のみなさんにメッセージをお願いします

森巧尚: 自分で作ったアプリがiPhoneで動くのを見たときは、どんな変なアプリでもやっぱり感動ですしうれしくなります。なんでもそこからだと思うので、ぜひ一歩を踏み出してみて頂ければと思います。


まきお: ハイパーカードやFlashと違って、ポケットから出して見せびらかすことが出来るのもポイント高いっすよね。呑み会で女の子にもてそう(笑)

森巧尚: そこですか(笑)

「よくわかるiPhoneアプリ開発の教科書」
・著者:森巧尚 イラスト:まつむらまきお
・定価:2,940円(税込)
・B5変型判 360ページ
・ISBN978-4-8399-3514-6
< http://book.mycom.co.jp/book/978-4-8399-3514-6/978-4-8399-3514-6.shtml
>

【森巧尚/Webゲームクリエイター・関西学院大学非常勤講師】
このiPhoneの本の発売とほぼ同時に「基本からしっかりわかる ActionScript 3.0」が電子書籍化されました。初の電子書籍化(^_^)/。iPadで見るとほぼ実物大で見れるのに、厚さはiPadの薄さなので改めて電子書籍の不思議さを感じます。
< http://www.shinanobook.com/genre/book/618
>
< http://www.ymori.com/
>

【まつむら まきお/まんが家、イラストレーター・成安造形大学准教授】
2/13の東京コミティア95用のマンガ描いてますが、あともうちょっとのところで描く時間がとれない! はたして間に合うのか?! あっ! とオドロク仕様でリリース予定の「ね05a トイロ・ト・トイロ」よろしくです。
< http://www.makion.net/
> < mailto:makio@makion.net >