iPhoneアプリ作成環境の比較

iPhoneアプリを作る10の方法 – もぎゃろぐを比較表にしてみた。

#compare_iphone_development_table{
border:1px black solid;
}
#compare_iphone_development_table td{
border:1px black solid;
padding: 2px 10px 2px 2px;
}

デザイナさん? iPhoneぽいUI ネイティブUI カメラやファイルアクセス AppStore
HTML/CSS/JS 可能 ×
jQTouch 可能 ×
jQuery Mobile 可能 ×
SenchaTouch 難しいのでは ×
PhoneGap まだマシ 自前 カメラなどごく一部
Flash(Packager for iPhone) ありうる
Titanium Mobile たぶん無理
MonoTouch 無理
ObjectiveC 無理

説明

デザイナさん?

 普段PC向けや携帯向けWEBサイトの制作をしているデザイナさんでも扱いきれるかどうか。もちろん、デザイナさんにもピンキリあって、C#をバリバリ書くデザイナさんがいないとは限らないんだけど、そんなのは(ry

iPhoneぽいUI

 ON/OFFがスライドするチェックボックスとか、右端に矢印のついたリストとか、そういうiPhoneぽい見た目のUIを実現する仕組みがあるかどうか。
iQueryMobileは、jQtouchと同じ仕組みでUIをつくってくれるんだけど、iPhoneではなくて、スマートフォン全般をターゲットにしたUIになるので、△にしてある。

ネイティブUI

 「iPhoneぽいUI」に近いんだけど、iOSが持っているネイティブのUIを使うかどうか。
jQTouchは、画像を使って頑張ってiPhoneぽい見た目を再現してくれるんだけど、同じものではないから、テキストボックスをタッチしたときに開くキーボードの種類とか、チェックボックスをタッチしたときの動きとか、微妙な部分ではどうしても普通のアプリとちょっと違う動きになってしまう。
この違いを埋めようとし始めるとものすごく大変な開発になってしまうから、そんなことをするくらいならネイティブUIを使える環境を選ぶべき。そういう事は気にしない、見た目が同じであればいい、ということであればjQTouchがお手軽で便利です。

カメラやファイルアクセス

カメラ機能や、iOSのファイルシステム上にファイルを保存するといったことができるか。
×になっている環境でも、例えばGPSとかsqliteデータベースは、HTML5の機能で使うことができる。でも、例えばデータベースに最初からデータを入れておきたいとか、カメラで撮影した写真をサーバに上げたいといった機能を実現するためには、ここが◯になっている環境である必要がある。
Packager for iPhoneは、原理的にはカメラだって使えていいはずなんだけど、この記事を書いた時点ではまだ対応出来ていない

AppStore

作ったアプリをAppStoreで販売してもらうことができるかどうか。
AppStoreで販売できないのはひとつの弱点だけど、AppStoreに登録するためにはAppleの審査が必要だったり、バージョンアップに時間がかかったりしてしまうので、場合によっては、ブラウザで動かせる他の環境を使って気軽にユーザーさんに使ってもらうという選択肢もアリだと思います。

Re^2: Twitter oAuth Implementation for Titanium Mobile

バグがあったので修正しました。
mogya/oauth-adapter – GitHub
.bbpBox{background:url(http://a1.twimg.com/a/1295051201/images/themes/theme13/bg.gif) #B2DFDA;padding:20px;}

@mogya While executing Timer, received script error. ‘Result of expression ‘URL’ [undefined] is not an object. at oauth.js (line 453)’でした!Sat Jan 15 12:55:06 via web


一番最初、アプリケーションを起動してoAuth認証を通した直後にAPIを呼び出すと(=僕のブログコード通りに書くとw)、上記エラーになる不具合を修正しました。

ただ、またもや互換性が保てなくて、oAuthAdapter.send()の戻り値を使うのが無理になりました。申し訳ない。
sendから戻ってきたからといってAPI呼び出しが完了して戻り値が入っていることは保証できないので、その代わりにonSuccessコールバックを利用してください。

初期化部分も含めたコード全体は、readmeで見ることができます。

How to start

  • 新しくプロジェクトを作る
  • Resources/libディレクトリを作って、oAuthAdapter.jsと、oauth.js,sha1.jsを入れる
  • readmeのコードをapp.jsにべったり上書きする
  • ‘YOUR CONSUMER SECRET’,’YOUR CONSUMER KEY’,部分を自分のキーに置き換える。SECRETが先であることに注意
  • Launchすると、oAuth認証が立ち上がり、その後勝手につぶやき、タイムラインをデバッグコンソールに出力します。

解説

 Davidの書いたoAuthAdapterには、sendを呼び出した時点でoAuth認証が完了していなかったら、呼出をいったん保留して、認証後に再呼び出ししてくれるという機能が付いています。
 上記エラーは、この再呼出部分のコードを修正するのを忘れていたことが原因だったので、これは修正しました。

 ところが、そういう非同期の呼び出しが起こる以上、関数の戻り値にAPIの戻り値が入っていることは保証できなくなりました。(というか、最初から保証できなかったのですけど、僕が気づいていませんでした。)

 あと、全然別件なのですけど、Davidの書いたoAuthAdapterでは、sendの引数にtitleとpSuccessMessageを渡して、API呼び出しが成功すると、かならずポップアップが出る仕様になっています。update_statusならともかく、タイムラインを更新したり、バックグラウンドでユーザー情報を取得したりする場合、この仕様はちょっとありえません。

 二つの問題をバッサリ片付けるアイデアとして、titleとpSuccessMessageの使用を廃止して、代わりにonSuccessコールバックを採用することにしました。onSuccessコールバック関数の中でダイアログを出せば、従来と同じ挙動をすることができます。

iPhoneアプリを作る10の方法

第2回関西アンカンファレンスでしゃべってきました。

.prezi-player { width: 550px; } .prezi-player-links { text-align: center; }

友達に頼む

  • 技術的詳細を知らなくても機能を実現することが出来る
  • 愛と勇気しかお友達のいない方には向かない
  • レベニューシェアという手もあるよ

プロに頼む

  • lancersオススメ。過去の履歴が残るので発注価格の参考になる
  • 普通に発注すると、バージョンアップのたびに開発費用がかかる点に注意

ObjectiveC

  • Appleが認める正式な開発言語
  • なんでもできるから、これで開発できる人はそうするのが一番
  • めんどくさすぎだろjk…

Flash

  • FlashCS5からiPhoneアプリを作ることができる
  • デザイナさんとかは、Flashから入れるのでわかりやすいかも
  • 一度Appleの規約改正でNGにされた。その後再改正されて、現在は通るらしい。
  • でも、正直いつまただめになるかと思うと不安で不安で・・・

HTML+CSS+JavaScript

jQTouch

  • iPhoneブラウザで見てもらう
  • 1ページに複数ページの内容を書くなど、ちょっと違うけどまだまだ普通のWEB開発の範疇
  • HTML+CSS+JavaScriptでできること(GPS,ローカルキャッシュなど)は当然できる
  • カメラとかファイルアクセスはできない
  • iPhoneぽいUIにすることができる
  • AppleStoreに登録することはできない

jQueryMobile

  • みんな大好きjQueryをつかって、iPhone/Android/SymbianなどのブラウザでUIを実現しよう
  • まだベータ版。今月あたりに正式リリース?
  • 理屈上は、JavaScriptすら動かない環境でも見られるサイトになるそうだけど、その割にjQueryをロードしないといけないとか、正直まだよくわからない
  • jQTouchに比べて、幅広い環境で動くらしい
  • JavaScriptなので、カメラとかファイルアクセス、AppStoreはNG。

SenchaTouch

  • iPhone/Android向けライブラリ
  • jQTouch以上にリッチなUIが実現できる
  • キャンバス描画ができるので、ソリティアみたいなゲームも登場している
  • HTMLとCSSもつかうけど、bodyタグ空っぽのところに、JavaScriptで部品を挿入していくプログラミングスタイル。デザイナさんには厳しいかも。
  • JavaScriptなので、カメラとかファイルアクセス、AppStore登録はできない

PhoneGap

  • WEBページをiPhoneアプリにしてくれる仕組み。WEBKitブラウザを使って表示する
  • カメラとかファイルアクセスのためのAPIも用意してくれる
  • UIはjQTouchと組み合わせるのが一般的だと思う
  • 当然、AppStore登録が可能

TitaniumMobile

  • mogyaイチオシ!
  • JavaScriptでプログラムを書くと、iPhoneとAndroidのプロジェクトに変換、ビルドしてアプリを作る
  • PhoneGapのようにWebKitでHTML,CSS,JavaScriptのページを使うことも可能
  • カメラやファイルアクセスのためのAPIも用意されていて使うことが可能
  • AppStore登録も可能
  • HTMLやCSSは出番が無くなって、完全にJavaScriptプログラミングの世界なので、デザイナさんとかは無理だと思う
    一応、PhoneGapみたいな使い方もできないことはない

あと、発表後のQAで、.NET FrameworkをつかってiPhoneアプリを作るMonoTouchというのもあるよ、と教えていただきました。
今軽く見た感じだと、TitaniumMobileよりもっとObjectiveCよりで、ObjectiveCの開発環境から言語がC#に置き換わった、という感じでしょうか。開発環境が有償なのが注意点になりそうですね。

(2011-01-15追記)動画が公開されました。

Re: Twitter oAuth Implementation for Titanium Mobile

TitaniumMobileで簡単にTwitterのOAuthを通すことが出来る(というふれこみの)oauth-adapterというのがあって。
実際この記事通りにするとあっという間にtwitterにつぶやくことが出来る。

Twitter oAuth Implementation for Titanium Mobile « Appcelerator Developer Center

問題なのはその先で。このコード、どうやらPOSTしかできないので、updateはできるけどhome_timelineがとれないみたい。
@chris4403がoauth-adapterを直してはてなAPIで動くようにしたtitanium-hatena-oauth-sampleを参考に、TwitterのGETメソッドも使えるoauth-adapterに直してみた。

mogya/oauth-adapter – GitHub

sendメソッドだけ、元のコードと引数が違います。

  • params.url APIのエンドポイント
  • params.parameters APIに渡す引数
  • params.title 成功/失敗の時に出すダイアログのタイトル
  • params.successMessage 成功した時に出すメッセージ
  • params.errorMessage エラーだった時に出すメッセージ
  • params.method ‘POST’/’GET’

つぶやく


//initialization
Ti.include('lib/oauth_adapter.js');
var oAuthAdapter = new OAuthAdapter(
'YOUR_CONSUMER_SECRET_HERE',
'YOUR CONSUMER KEY HERE',
'HMAC-SHA1'
);
// load the access token for the service (if previously saved)
oAuthAdapter.loadAccessToken('twitter');

//OAuth if need.
if (oAuthAdapter.isAuthorized() == false)
{
var receivePin = function() {
oAuthAdapter.getAccessToken('https://api.twitter.com/oauth/access_token');
oAuthAdapter.saveAccessToken('twitter');
};
// show the authorization UI and call back the receive PIN function
oAuthAdapter.showAuthorizeUI('https://api.twitter.com/oauth/authorize?' +
oAuthAdapter.getRequestToken('https://api.twitter.com/oauth/request_token'), receivePin);
}

//TWEET
oAuthAdapter.send({
url:'https://api.twitter.com/1/statuses/update.json',
parameters:[
['status', '@mogyatest test from tmtwit. '+Math.random()]
],
method:'POST',
title:'Twitter',
successMessage:'tweeted',
errorMessage:'tweet failed'
});

GET TIMELINE


//same code for initialization and authrization.
//get timeline
var responce = oAuthAdapter.send({
url:'https://api.twitter.com/1/statuses/home_timeline.json',
parameters:[
],
method:'GET',
title:'Twitter',
successMessage:'success',
errorMessage:'failed'
});

if (responce){
Ti.API.debug(responce);
responce = JSON.parse(responce);
//Enjoy with this responce:-)
}

CacooでTableViewを使う方法

sxchu_490307_poolbreak.jpg

ブラウザ上でサクサクとワイヤーフレームを作れる高機能作図ツールCacoo。前回紹介したとおり、iPhoneの画面部品もステンシルとして使うことが出来ます。

cacooで簡単にiPhoneワイヤフレームが書けるようになった – もぎゃろぐ


で、そのステンシルのなかに、グループ化されたTableView部品があるのですが。
cacoo2.png
ふしぎなことに、4列セット、真ん中二個に右矢印付きというセットで部品になっています。一列ごとの部品もあるのですが、これも、ある列は矢印付き、ある列はチェックマーク付きになっています。
この部品とぴったり同じ物を作りたい時はいいのですけど、そんなことは普通ないはずなので、Cacooさんに問い合わせたところ、対応方法を教えていただけました。

この部品、グループ化されているので、右クリックメニューから解除してあげれば自由に編集できるのだそうです。
cacoo4.png

言われてみればナルホドなのですが、気づかない時はどうにもならないポイントですね。
というわけでこれを使うと、こんなワイヤフレームを描くことが出来ました。

cacoo5.png

[Mac]日付と時刻をクリップボードにコピー

MacBookAir(11インチ)を買いました。iPhoneアプリのために買ってあったMacMiniが壊れて、どうしようかと思っていたら買い手を捜している人がいたのでありがたくお買い上げ。
Let’sNoteの中でも特に小さいLet’sNoteRからの乗り換えだったので、キーピッチが広すぎて巨人のパソコンを使っているような気分ですが、スペックの割に軽快に動いてくれるし、ファンの音がしないのはとても快適なので、気に入っております。

Windowsから乗り換えた人の常で、Windowsでできたあの機能はどうやるんだ、ということでいろいろググッていたのですが、とりあえず一個便利なのを再現することに成功したのでメモ。具体的には、「日付と時刻をクリップボードにコピー」。

これはWindowsの標準機能ではなくて、もうすでに開発が停止してしまったbluewindとその関連ツールの合わせ技です。自分の場合、alt+bでBlueWindを立ち上げて、dateと入力すると、その時の日付と時間がクリップボードにコピーされるようにしていました。
これがあると、日報とか作業記録を書くのが超便利なのです。

で、これをMacでやる方法。

  • 日付と時刻をクリップボードにコピーするスクリプトを作る
  • spotlightからアプリを起動

日付と時刻をクリップボードにコピーするスクリプトを作る

とりあえず、キーボードから起動するのは後回しにして、立ち上げたら日付と時刻をクリップボードにコピーするアプリをいっこ用意します。

現在の日付時刻をクリップボードにコピーするAppleScript – サンフラットの開発日記

ありがたい事にAppleScriptを書いていただいているので、Apple Script Editorに貼りつけて
scriptEditor.jpg
「名前を付けて保存」でApplicationとして保存してあげれば、
saveAsApp.jpg
立ち上げるだけでその時の日付と時刻をクリップボードにコピーされるアプリケーションが出来上がる。あとで便利なので、Applicationフォルダに保存しておいてね。

spotlightからアプリを起動

これだけでも十分便利なんだけど、もとの使い勝手を考えると、キーボードから手を離さずに同じ機能を実現したい。マウスでアプリを立ち上げるとかまだるっこしいよね。
Mac的には、こういう時はSpotLightを使うらしい。Ctrl+Spaceで立ち上げるあの謎の機能に、「copy..」位まで入力してあげると、さっきのスクリプトが出てくる。
SystemUIServer.jpg
copyDateAndTimeが選ばれている状態でEnterキーを押してあげれば、クリップボードに日付と時刻文字列がコピーされるので、EverNoteでもEmacsでも、どこでも貼り付けることができる。
Evernote.jpg

コンテキストを超えた値の共有[TitaniumMobile]

sxchu_308383_titanium.jpg

TitaniumMobileプログラミングの話。
Windowを生成する時、urlパラメータを使うと、そのWindowは副コンテキストに分割されて動くことになるので、親コンテキストの変数を参照することは出来ません。

Window – titanium-mobile-doc-ja – UIカタログ – Window – Project Hosting on Google blockquote

これを乗り越えるための対策は、上記ドキュメントに書いてあるのですけど、微妙にいろいろ罠があって、実験して分かったことまとめ。

例えば、親コンテキスト(win1)の変数hogeがあって、副コンテキスト(win2)でボタンを押したらhogeをインクリメントしたい、というような場合。

main.jpg
sub.jpg

まず、親コンテキストの変数を子コンテキストで参照するには、こういう風にする。

var hoge = 1;
win2.hoge = hoge;

すると、子コンテキスト側からは、

var win2    = Titanium.UI.currentWindow;
Ti.API.debug("hoge:"+win2.hoge);

みたいにして参照することが出来る。
ただし、変数はby value渡しになるので、副コンテキストで値を変更してもメインコンテキストのhogeには反映されません。
なので、

button1.addEventListener('click',function(e){
win2.hoge = win2.hoge+1;
label.text = 'hoge:'+ win2.hoge;
});

こういうふうに書いても、main側ではhogeの変更は全く無視されてしまいます。

メインコンテキストに値を反映したい時は、

function update_hoge(value){
hoge = value;
}

という具合にセッターを用意してあげて、副コンテキストの方から

win2.update_hoge( Titanium.UI.currentWindow.hoge + 1);

という具合にして呼び出してあげると、メインコンテキストで実行されるので、値を反映することが出来ます。

button1.addEventListener('click',function(e){
win2.update_hoge(win.hoge+1);
label.text = 'hoge:'+ win.hoge;
});

ただしここにはさらに罠があって。update_hogeを呼んだからといって、副コンテキストが見ているwin2.hogeが勝手にアップデートされたりはしません。
なので、上記コードも、ボタンをクリックしても副コンテキストのhogeの値はちっとも増えないように見える。実際には、メインコンテキスト側のhogeが増えているので、いったんウインドウを閉じて開けば反映されるのですけど。

副コンテキスト側に値を戻してあげるには、update_hogeで反映してあげるしかないみたい。

function update_hoge(value){
hoge = value;
win2.hoge = hoge;
}

という具合にして書き戻すようにするか、get_hoge();を作るのがよいみたい。

コンテキストというのがスレッドのことなのかなんなのかによっては、意図しない順番で処理が実行されたりしそうで怖いのですけど、その辺は明日えらい人たちに聞いて勉強してこようと思います。

おまけ

というわけで明日(あ、今日になっちゃった)は
はてな技術勉強会 Hackathonです。@masuidriveをはじめ、TitaniumMobile関係えらい人がいっぱい集まるのにもかかわらず、まだ席が空いています!もったいないお化けが出ますので、空いている人ははてなにGO!

「俺の話を聞け」面白かった話とか

関西のWEB開発者の忘年会的イベント『俺の話を聞け!』に行ってきた。

ウェブまわりでいま気になっていることを発表する会『俺の話を聞け!』を開催しました – 頭ん中

ので、面白かったこととか、興味深かった話とか。

  • @amateru「Google サイトって、なかなかイケテルかも!?」。GoogleのWEBサイト作成サービス「Googleサイト」。たんなるホームページ作成だけでなく、Wikiとかtodo管理、ファイルアップロードまで出来てしまう!
  • @kamiyam「jQueryプラグイン”mukiSlide.js”とWebSocketでスライド共有」。WebSocketを使うと、JavaScriptでもサーバと双方向通信ができる。これを使うと、誰かが操作したら全員今見ているページに反映されるプレゼンページが作れる!
  • @yuyak「HTML5 加速度センサー」。iOS4.2から、JavaScriptで加速度センサーにアクセスできるようになった!
  • @kogetsuの開発中のサービスに関する話。「モバゲーは出会える」。「出会えない人の特徴」
    deaenai.jpg

あと、発表中に他のイベントの告知がいっぱいありました。

<

ul>

  • 2011/01/08 関西アンカンファレンス2011(仮)
  • 日付未定だけど一月 関西TitaniumMobile勉強会
  • 2011/04/02 大阪でPHPカンファレンス
  • <

    ul>

    カメラを買った

    Panasonicのミラーレス一眼カメラ Lumix GF-1というのを買いました。
    ミラーレス一眼というのは、プロのカメラマンとか写真好きの人たちがみんな持っている一眼レフカメラから部品をちょっと省いて、その分持ち運びやすくしたカメラです。
    撮影する時にのぞき込むファインダーと、ファインダーに映すための鏡が省かれていますけど、絞りとかシャッタースピードなどは一眼レフと同じように扱うことが出来るので、携帯電話とかデジカメでは撮れないような写真を撮ることが出来ます。

    ここ一週間くらいで撮った写真を何枚か紹介。

    実家の菊
    実家で義母が育てている菊です。

    森
    どこかのポスターで使われそうな、森の下生え写真。携帯電話のカメラだと、全体にピントが合っちゃうので何を撮っているかよく分からない写真になってしまうのですが、絞りを調整できるカメラだと、こんな感じで狭い範囲にピントを合わせた写真にすることが出来ます。

    森
    紅葉の季節なので、紅葉を一枚。ちょっとまだ季節が早かったので、実はごく一部分しか紅葉していなかったのですけど、こうやって撮るとそれっぽいでしょ?

    森
    帰省した時に食べに行ったお寿司屋さんの突き出し。実は、狙って撮影したわけではなくて、撮ってみたら湯気が写ってなんだかおいしそうな写真になりました。本当はこういうのを狙って撮れるようになりたいですね。

    こういうカメラを買うのは初めてだったので、レンズと本体がセットになっているレンズキットというのを買いました。ずいぶん薄いレンズだな、と思っていたら、ズーム撮影するための機構をばっさり省いた、パンケーキレンズというのだそうです。
    ズームができないと、風景写真の撮影などでは困ってしまうこともありますが、もともと携帯電話(の上で動いているアプリ)とか、お茶の葉とか、家の中で物を撮ることを目的に買ったカメラなので、あんまり困っていません。
    ブログにかっこいい写真を載せたい!といった用途では大変便利なカメラだと思います。