iOSアプリ第二弾「おやゆびでお」がリリースされました

ブログでお知らせするのが遅くなりましたが、iOSアプリの第二弾、「おやゆびでお(英名:ThumbVideo)」がリリースされました。

以前からTwitterなどでは「動画関係である」ことを仄めかしていましたが、しかしてその実体は?

片手操作にこだわった動画再生アプリです。モバイルデバイスであるiPhone/iPod touchは片手で扱うことが多いですよね?例えば電車で片手はつり革につかまって、とか。またiPadもベッドやソファで寝モバする時に、自分のお腹の上に置いて片手で保持しつつ、もう片方の手はポテチつまんでる、とか。そうした片手持ち状態で動画を視聴するにあたって、画面幅一杯に水平表示されるスライダーは扱いやすいとは言えません。この不便さを解消するUIを備えた動画プレーヤーが「おやゆびでお」です。

具体的には、

  1. 画面上の好きな場所で左右フリックすることで指定秒数ジャンプします
  2. タイムスライダーは画面の左右端に垂直に表示されます
  3. 画面の好きな場所をダブルタップすると再生/一時停止ができます

どれも本体を横にして保持した状態でその手の親指だけで操作ができます。だから「おやゆびでお」なワケです。

さらに次バージョンでは、

  1. 画面上の好きな場所でグルグル円を描くと早送り、巻き戻しができる

というジョグダイヤル的な機能が追加されます(そろそろ審査出します)。フリックだと細かすぎるけどスライダーだと荒すぎる、という間のニーズを狙った機能です。実際にはMPEG4なのでビデオデッキについてたような本当の意味でのジョグダイヤル的なコマ単位操作は無理だし、ストリーミング再生の場合も考慮してリアルタイムでダイヤルの動きに追従して映像が移動するような仕様にはしませんでした。長押しするとカウンターが表示され、一周回す毎に“溜め”カウントされ指を離すと一気に移動する、という感じです。回す半径に応じて小さいと1分、大きく回すと5分単位で溜めが増減します。

 

電子書籍ビューワーは機能はどれも似たり寄ったりながら操作性で差別化されているのに対し、、動画プレーヤーに関しては実際の再生中の部分は標準コンポーネントを使ったものばかり。そこに一石を投じられればと思い作成しました。電子書籍同様に自炊コンテンツを用意するようなマニアなユーザでないと利用場面もないかと思いますが、逆にだからこそこだわったUIにしたいなと。このブログを購読してくださってりような方なら共感してくださる方、色々こだわりを持ってる方も多いんじゃないでしょうか?是非ご要望、アイデアなどお寄せいただければと思います。

 

画面写真も含めアプリ詳細ページはこちら

AppStoreの製品ページは下のバナーをクリックして下さい。

おやゆびでお (ThumbVideo) - 道具眼 (do-gugan)

 

 

P.S.

第一弾「AccentViewer」は諸般の事情でなかったことになりました。ご購入下さった方にはご迷惑をおかけして申し訳ありませんでしたm(..)m。

ようやくiOSアプリ第一弾AccentViewer公開

最初にdefault languageの設定を間違え、Appleに修正依頼をするも梨の礫。結局半年分のライセンスを諦めて別アカウントを取り直してみるも契約情報が既に存在するというエラーが出て有料アプリ設定ができず、これまたサポートに出して返事がない。結局日本のサポートに電話したところ、iTunes Connect設定は日本の部署では触れないが、要求は翻訳して本国に伝えるというのでまたまた待つことしばし。なんだかんだで二ヶ月ほど遅れてしまいましたが先ほどようやく公開にこぎつけました。

一本目はAccentViewerという文字通り日本語のアクセントを調べるアプリ。Twitterでとある現役の声優さんから頼まれて作ってみました。元々大辞林には見出し語の脇に小さくアクセント位置を示す数字が記載されてるんですが、これを視覚的に見やすい形で変換して表示するものです。Yahoo!辞書が大辞林のデータでひけるのでそれを利用してます。声優とかアナウンサーとか特定業種の人や日本語を学んでいる外国人の人などニッチ向けなんであんまり売り上げは期待してないです。むしろ知ってる声優さんがブログやTwitterで触れたりしてくれたら密かにニヤニヤして満足って感じ(笑)。

AccentViewer - 道具眼 (do-gugan)

 

また道具眼謹製iOSアプリの専用サイトを開設しました。

http://do-gugan.com/iosapps/

またTwitterアカウントも専用のものを作りました。アプリ情報だけチェックしたいという方はこちらをフォローしていただくと良いかと思います。

http://twitter.com/do_gugan_apps

 

第二弾はもう少し一般向け(でもないか?)な動画プレーヤーアプリになると思います。一応完成してるので後は紹介文や画面写真などを用意してなるべく間を置かず公開したいと思います。

どうぞよろしくお願いします。

UIWebViewをコードでズームする方法の覚え書き

iOSプログラミングの話です。

アプリ内にWebブラウザコンポーネントであるUIWebViewを埋め込んで簡易的にWebページを扱えるようにする必要があったんですが、その表示倍率を直接制御するメソッドやプロパティがありませんでした。海外の掲示板も含めて結構質問は出てたんですが、有用な回答は得られず。

まず散見されたのはUIScrollViewの上にUIWebViewを置いて、UIScrollView側でピンチやスクロールを制御すればいいんじゃね?というアイデア。実際にやってみたんですが、以下の問題点がありました。

  • UIIWebViewの標準操作であるダブルタップでブロック最適化ズーム(?)動作が使えなくなる
  • ズームの品質が低い(文字がボケる)

そして何より、よくよくAPIガイドを読んだら「UIWebViewとUITableViewをUIScrollViewの上に置くのは予期せぬ動作を引き起こす可能性があるので推奨しない」と書いてあった。禁止ではないのでAppStoreの審査でリジェクトされるといほどではないかも知れないけれど、将来的なAPIの仕様変更でおかしなことにならないとも限らない。

で、悩んだ末に辿り着いた答えは、stringByEvaluatingJavaScriptFromStringメソッドを使ってWebコンテンツを書き換える方法。

まず単純な例。

[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat: @"window.scrollTo(0, 100);"]];

これを実行すると、Webコンテンツ上で「window.scrollTo(0,100);」というJavaScriptを実行したことになります。つまり画面が下に100ピクセル分スクロールします。

これを応用して、iOSのブラウザに対するズーム定義をmetaタグで追加してやる、ということをしてやるワケです。metaタグの仕様についてはAppleのドキュメントを参照するか、「meta viewport」などでググって下さい。

今回の閲覧対象ページはこのmetaタグ自体が存在しなかったので、タグ自体を作成してheadタグの中、titleタグの前に挿入しています。

[webView stringByEvaluatingJavaScriptFromString:@"var bodyNode = document.getElementsByTagName(‘head’).item(0);"  
"var titleNode = document.getElementsByTagName(‘title’).item(0);"
"var newNode = document.createElement(‘meta’);"
"newNode.name = ‘viewport’;"
"newNode.content = ‘width = 1024, initial-scale = 1.2, minimum-scale = 0.3, maximum-scale = 1.2’;"
"bodyNode.insertBefore(newNode, titleNode);"];

@””の文字オブジェクトは;で切らない限り改行入れて列挙できるので、見やすさの為にそうしています。

1行目でbodyNodeという変数にheadタグの位置を取得。

2行目でtitleNodeという変数にtitleタグの位置を取得。

3行目でnewNodeという変数にmetaタグを作成。

4行目でそれに「name=’Viewport’」に相当する記述を追加。

5行目に更に「content = ‘width = 1024, initial-scale = 1.2, minimum-scale = 0.3, maximum-scale = 1.2’;" 」を追加。数値は適宜状況にあわせて調整を。ちなみに=の前後にスペースがないとダメとどっかで読んだのでそうしてます。

6行目で、bodyNode(=headタグ)内のtitleNode(=titleタグ)の直前にnewNode(=metaタグ)を挿入して完成です。

 

最初から「<meta name=’viewport’…>」が書かれているページに対してはcontentだけを書き換えるような処理をしないといけないので、汎用的なWebブラウザとして使うなら分岐処理も入ったもう少し複雑なJavaScriptが必要でしょうが、今回は対象サイトが固定のアプリなのでこれだけで済みました。

参考になれば幸いです。

[宣伝] iOSアプリ「独りブレスト!発想会議」リリースされました

3月からプログラミングを担当していたU’eyes Design製のiOS(iPhone)アプリ「独りブレスト!発想会議」がリリースされました。5月の某研究会でβ版を初お披露目した時に「(Apple絡みだけに)泳げる頃までには(ってこのネタわかるのオサーン)」なんて言ってましたがなんとか実現して良かったです。

ちなみに審査にかかった時間ですが、Appleからのメール着信時刻で言うと、

  • 11/06/20 17:05  Waiting for Review (審査待ち)
  • 11/06/22 22:05  In Review (審査中)
  • 11/06/23 12:44  Processing for App Store (AppStore向けに処理中)
  • 11/06/23 12:51  Ready for Sale (販売準備完了)

という感じで、三日程で通ってしまいました。しかも一発合格。初めてにしては上出来じゃないすか?

AppStoreの審査は、例えばテーブルビュ-(リスト画面)で下位階層に遷移してから上位階層に戻った時に、最初のフォーカスがじわっと消える効果が入ってないとリジェクトされる、とか細かいガイドライン準拠もチェックされると聞いていたので、あれこれ気をつけつつもかなり不安だったんですが、ホント一安心です。

■アプリ紹介

せっかくなので公開したアプリの紹介も。

端的にいうと、商品企画などで新商品、新サービスの企画アイデアを生み出す為の支援ツールで、新しい発想を採り入れたいテーマ(下の写真の例では「扇風機」)を設定すると、1枚目の写真のように発想のトリガとなるキーワードが付箋紙として表示されます(写真1枚目)。このキーワードが全部で117種類あって、スワイプで次々めくったり、下部の「101」と出ている吹き出しをドラッグして好きなものを出したり、あるいは左下のシャッフルボタンでランダムに表示したりできます。

テーマに対して何か閃きをくれそうなキーワードに出会ったらタップして赤丸をつけます(写真2枚目)。「“自然の美しさを持つ”扇風機ねぇ…そうか!例えば花びら型とか?」なんて閃いたらミニ付箋にメモを書き込んでおくこともできます。

このアプリでは赤丸をつけることを「クリップ」と呼んでいて、トップ画面から「クリップリスト」を開いてテーマを選択すると赤丸をつけた付箋とそのメモ内容を一覧したり、メモの編集を行ったりすることもできます(写真3枚目)。またこのデータはExcel等で読み込みやすいCSV(カンマ区切りテキスト)形式にして、メールで送信したり、iTunesから取り出したりできます。CSV形式でクリップボードにコピーすることもできるので、Evernote等に貼り付けても良し、です。

 

mzl.eirkhwti.320x480-75mzl.qqnnybor.320x480-75mzl.gmguttdg.320x480-75

 

で、ここで使われている117の発想刺激ワードというのが、単に思いつきで書き殴ったものではなく、U’eyes Designのリサーチに基づいたものであることがこのアプリの価値となっています。簡単にいうと、「あなたが最近感動したものは?」というアンケート調査をして、その回答(感動シチュエーション)を分析して抽出された、いわば感動エッセンスとでも言うべきワード集なんです。これをU’eyes DesignではXB法(クロスビーと発音)としてチームで発想会議をする手法として導入しセミナー等を行ってきました。これをスマートフォン向けアプリとしてスピンアウトし、一人でも実践できるようにしたのがこの「独りブレスト!発想会議」というワケです。「独りなのにブレスト?会議?」というツッコミ待ちのネーミングが秀逸ですよね(σ(^^)の発案ではないので自画自賛ではない)。

商品企画に携わっていない人でも、家族や友人へのプレゼント選びのような「感動」させたい発想の支援に幅広く利用できると思います。お値段230円!プライベートでもご利用いただきやすいお手頃価格となっております。是非お試しあれ!

2011.07.14追記:

2011.07.12頃、ついにビジネス有料ランキングで1位を獲りました!ありがとうございます。

あとYouTubeに解説動画がアップされました。動いている様子をご覧いただけます!

 

独りブレスト!発想会議 - U'eyes Design Inc.

iOS開発修行中に参考になった本を紹介 (2)

以前のエントリから更に追加で買いまくったので紹介。今回ほぼボランティアなんだけど、投資だけはこんなにしてしまって大丈夫かw?

■木下誠「iOS開発におけるパターンによるオートマティズム」

今回一番役に立った本です。前回紹介した「たのしいCocoaプログラミング」の木下さんの本で、あれほど砕けたノリではないものの、iOS開発でお約束の定型ルーチンのお手本を示してくれています。特にデータの保存と読み込み周りはこの本のおかげで実装できたといっても過言はないです。


■Dave Mark「はじめてのiPhone3プログラミング」

独立の複数筋から激しくオススメされたので購入。Amazonのレビューで翻訳の質がイケてないという指摘があり、また世代的にも古いので最初は下の原著を買ったんですが、UITableView等の理解がおぼつかなくて少しでも負荷を下げようと結局購入。

誤訳も多いと指摘でしたが重版で直ってるっぽいからいいかと思って買ったのに、帰省中に豊橋で一番大きな書店の店頭在庫を買ったらまさかの初版で激しく落胆(帰宅してから気付いた)。これから買う人はお気を付け下さい。

というか改訂版出ないんですかねぇ。


■Dave mark「Beginning iPhone 4 Development: Exploring the iOS SDK」

上記の原著、改訂バージョンです。Kindle版を買いました。章毎にお題を掲げてサンプルアプリを実装していく形式で、なかなか実用的なお題で、ViewController周りなどは参考にしました。

(洋書では普通かも知れませんが)この人もノリは軽めです。


■安倍吉俊、カワサキタカシ「サルにもできる iPhone 同人誌の創り方」

画像ファイルを差し替えるだけで電子書籍アプリを作れるというウリの本です。今回作ったアプリは書籍ではないですがスワイプでページをめくるという部分は同じだったので、こちらの本のコードを大いに参考にさせていただきました。というかこのソースをベースに機能拡張をしていったので、完成形は似ても似つかないですが、ViewControllerのクラス名がいまだにsABViewerだったりしますw。本当にありがとうございました。

半分は安倍さんのイラスト集なのでファンでないと割高感あるかも(笑)。あと技術サイドの著者であるカワサキさんは掲示板も開設しておられるようです。ユーザ登録まではしましたが結局まだ書き込みはしてませんが。


■森巧尚「よくわかるiPhoneアプリ開発の教科書」

カラーで見やすいレイアウトと丁寧なコード解説ですごくとっつきやすい本でした。こちらもテーブル表示の章はずっとにらめっこして大いに助けになりました。

初めて読む入門書としてはオススメの一冊です。


■畑 圭輔「iOS4プログラミングブック」

こちらも推薦を受けて買いました。Ratinaディスプレイ周りを参考にしました。逆に非RatinaなiPhone3GSなどで1ピクセル幅の線を描画してもアンチエイリアスがかかってボケて2ピクセルになってしまうのを回避する方法などをこれで勉強しました。iOSの表示倍率の考え方についてとても詳しく書かれているので、これから更に機種が増えて互換性をとるのがややこしいことになった時にとても重宝すると思います。


■國居貴浩「iOSデバッグ&最適化技法 for iPad/iPhone」

開発後期段階になって効率化やメモリリーク対応の勉強のために買いました。Xcodeの一部である解析ツールの使い方などについて紹介しています。

ただσ(^^)のメモリ管理に対する理解が浅いせいか、ちと物足りない印象でした。Provosioning周りの説明なんかもあるんですが、そういうのはいらないのでもっとタイトルの内容をつきつめて欲しかった気がします。「実践編」みたいな続編を期待。


■Alasdair Allan「Learning iPhone Programming」

ProvisioningやAppStore申請周りについて詳しく知りたいなぁと思って物色していたところ、こちらが章を割いて解説してるっぽかったので買いました。オライリーですが日本語はまだ出てないっぽいです。Kindle版で買いました。

実際結構参考になりましたが、後でAppleが日本語PDFで結構詳しいドキュメントを配布しているのに気付き、もしかすると最初からそれだけで済んだかもという気もしています。これからの人はまず先にそちらを熟読してみて下さい。

全体としては普通にプログラミングの本ですが、目的の章以外は読んでません。その意味でもちょっと割高感。まぁ元の値段自体が安いからいいんですけど。

■高山恭介「iPhoneSDK開発のレシピ」

よくある、「○○をしたい」的な小さなテクニックがたくさん詰まった系の本です。UIAlertViewの中に入力欄を持たせたものが標準でなかったので、これを参考に実装しました(結局使わなかったけど)。あとメールにデータを添付して送信するという部分も参考にしたかな。ヒット率(あー、それしたいわと思う率)は結構高いレシピ本だと思います。


■D・H・スタインバーグ「iPadプログラミング (Smart Mobile Developer)」

これはつい最近の購入で、今回のアプリには直接役だってはないですが、iPad(iOS3.2)から実装されたジェスチャー認識機構(GestureRecognizer)についての詳しい説明が参考になりました。オリジナルのジェスチャーコマンドを実装する方法についても紹介されています。また、UIPopoverViewなどiPad独自のGUIパーツはiPhone系の本だとあまり触れられていないので、iPad専用アプリを作るのには重宝します。

GestureRecognizerはもう少し早く知っていれば、今回のアプリにも積極的に活用できたのになぁという印象です。今回のアプリではデバッグ段階で複数のボタンを同時にタップした時に両方反応してしまって思わぬ動作を引き起こす、という現象の抑止にかなり時間を割きました。たぶん、GestureRecognizerを使ってタップ判定を一元化しておけば簡単に抑制できたんじゃないかと予測。


■細谷日出海「iPhoneデジカメプログラミング」

これに至ってはまだ昨日買ったばかりで読んですらいませんが、バーコード読み取りとAmazonから商品情報をひっぱってくる辺りのサンプルが扱われていたので、今やりたいと思ってるアイデアに直接役立つだろうと思って押さえてみました。

バーコードに関しては標準APIではないですが簡単に利用できる外部ライブラリがあるみたいです。またAmazonからの商品情報取得は、Mac用に考えてるアプリで応用できるんじゃないかと。読むのが楽しみです。


 

とまぁ、買いも買ったり、前回分も含めればン万円ですね。申請が済んだ某アプリに対する報酬額が未だに通知されないのですが、元が取れなかったらどうしよう…。まぁ今後の為の投資だと思えばいいんですけどね。こういうのを全部自腹で買わなければならないのは自営業の辛いところです。

ですがまぁ、(震災で大変だったことを別にすれば)総じて楽しい三ヶ月でした。