TweetOverview2.0.3でのキーボードショートカット対応とiPad/キーボードに関する考察

TweetOverview 2.0.3がリリースされました。
iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 TweetOverview ツイート俯瞰デスクサイドアプリ

今回のバージョンでは、キーボードショートカットに対応しています。
特にiPadでデスクサイドに置いた時に、リンクのウェブページを見ている時に矢印キーでページの上下が出来ればと思い、iOS 7 のキーボードショートカット機能を使用して作成しました。動作でもはこちら

現在対応しているショートカットは以下のものです。

  1. ウェブページ表示中の、↑↓矢印キーによるスクロール
  2. ウェブページ、詳細画面を、⌘+wキーで閉じる
  3. ツイート一覧画面を、← → キーでスクロールする

iPadのキーボードは、Logicoolのウルトラスリムキーボードミニを使っています。iPad miniのサイズでキーボードがうちやすいか心配だったのですが、このキーボードはよく考えられていて、caps-lockを削ったりして、aキーからlキーの幅を確保して、タイピングがしやすくなっています。MacBook風の色もいいですね。同じキーボードの白と黒は9,000円くらいなのに、この色だけセールで4700円ほどになっているみたいで、おすすめです。白とも黒ともマッチしないシルバーなので不人気なのかな?黒とは同じ色ではないですが、キーの色が黒なのでマッチしている気はします。このキーボードにしたのは、まず薄くて軽いことと、次にiPadをたてても使えることです。アプリによっては,たてた方が使いやすいアプリも多いので、このキーボードのように縦向きでも横向きでも使えるのはとても便利です。

技術的には、iOS7で追加されたキー取得のAPIを使用しました。@k_katsumi さんの、サンプルコードを参照しました。
kishikawakatsumi/KeyboardShortcuts
ViewControllerでキーを取得するのですが、childViewControllerを使用していると、最下層(親)のViewControllerにしかキーがいかないので、受け渡しの仕組みを作る必要がありました。また、キーをキャプチャすると、WebViewの入力時にそのキーが効かなくなるので(矢印など)、それもwebViewの入力中のステータスを確認して読み込みたいキーを変えていく必要があります。

APIとして、ボタンを押し続けているステータスや、ボタンのリピートなどがあればさらに良いと思うので、その辺は将来のiOSに期待です。

最後にiPadにおけるキーボードの考察ですが、やはりタッチによる操作中でも、キーボードによる操作は非常に便利であるということが分かりました。スクロール操作を行うために画面にタッチするよりも、キーボードのしたボタンに指を置いて一定量を読んだ後にボンポンキーを押していく方が楽です。また、⌘+wなどは使う人には染み付いているので、その自然な動作がキーボードで出来れば、タッチパネルをタッチするよりも使用感が高いです。もちろんiPadアプリの場合はタッチでの動作がメインになるのですが、キーボードを使用している層には、このようにキーボードショートカット対応してもらえるとうれしい機能がたくさんあると思いました。実際このアプリになれてしまうと、Safariや別のアプリでウェブを見ている時も、ついつい上下ボタンを押してしまうようになりました。

ちょっと癖のあるアプリですが、是非TweetOverviewを使って、追加してほしいキーボードショートカットなどがあったらレポートいただければと思います。

Text Kitを使用してUITextViewにリンクを埋め込んだりタブでカラムつけたりする方法

TweetOverview 2.0.2 がリリースされました。
iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 TweetOverview ツイート俯瞰デスクサイドアプリ

TweetOverviewはiOS 7限定でアップデートしたのですが、iOS7限定にして、iOS7の最新機能を出来るだけ取り込むためにそうしました。その一つがTextKitです。「上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7編」を書きました[内容紹介あり] | Zero4Racer PRO Developer’s Blog こちらのリンクにもある、iOS7の解説本を書くためにいろいろテストをした機能を使って作成しています。

“Text Kitを使用してUITextViewにリンクを埋め込んだりタブでカラムつけたりする方法” の続きを読む

「上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7編」を書きました[内容紹介あり]

iOS 7向けのiOSアプリ開発を解説した書籍で、わたしも共著で参加せせて頂いた本が12月末に発売予定になり、Amazonにも登録されました。

わたしは今回は以下の部分に参加させていただきました。

  • Text Kit(一部)
  • Sprite Kit
  • 付録のGame Controller

発売に向けて現在は校正などを行っていますが、とても良い本に出来上がっていると思います。わたし以外が書いた部分を読むと特に、分かりやすく書かれているなと感じます。扱われている内容をリストアップすると、 “「上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7編」を書きました[内容紹介あり]” の続きを読む

コードからUIWebViewをスクロールさせる方法

昔は難しかったのですが、iOS5から、UIWebViewがscrollViewをプロパティで持つようになったので簡単になった!オフセットしすぎると中身が見えなくなってしまうので、maxOffset以下にするのがポイント。
スクロールダウン(一度に画面の1/3)

float maxYOffset = self.webView.scrollView.contentSize.height - self.webView.scrollView.frame.size.height;
[wself.webView.scrollView setContentOffset:CGPointMake(self.webView.scrollView.contentOffset.x, MIN(self.webView.scrollView.contentOffset.y+self.webView.bounds.size.height/3.,maxYOffset)) animated:YES];

スクロールアップ
[wself.webView.scrollView setContentOffset:CGPointMake(self.webView.scrollView.contentOffset.x, MAX(self.webView.scrollView.contentOffset.y-self.webView.bounds.size.height/3.,0)) animated:YES];

このスクロールと、前の記事の編集中判定を使って、TweetOverviewでキーボードでスクロールダウン、スクロールアップ、cmd+wで詳細画面を閉じるというのを実装したのですが、外部キーボードと組み合わせると非常にいい感じです。審査して来週ぐらいにリリースされると思いますのでお楽しみに。

UIWebViewが編集中かを確かめる方法

UIWebViewが編集中かを確かめる方法がStackoverflowにもはっきりと分かりやすいのがなかったので備忘で書いておきます。UITextViewだと
[textView isFirstResponder]
で編集中か分かるのですが、UIWebViewの場合は、内部にある要素の一部が編集中になるため、webView自体のisFirstResponderはfalseが帰ってきます。
それで、再帰的に内部を確かめてどれか一つの要素が編集中かを確かめるメソッドがこちら。

使う時は、
if([webView isFirstResponderRecursive])
のように使うことが出来ます。

iOS 7 でAVSpeechSynthesizerを使用して音声を読み上げる

TweetOverviewの新機能の一つとして、音声読み上げ機能があります。最新のタイムライン上のツイートをsiriの声で自動で読み上げてくれるので、デスクサイドに置いておけば新しいツイートも分かりますし、関心ある論題かを知る事も出来ます。精度はまだいまいちですが、日本語で知っているトピックだと結構理解出来ます。
iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 TweetOverview ツイート俯瞰デスクサイドアプリ

これは、iOS7で追加された、AVSpeechSynthesizer、AVSpeechUtteranceという機能を使用して作成しています。AVSpeechSynthesizerの方が実際に読み上げるオブジェクトで、AVSpeechUtteranceは読み上げる内容を定義したものです。
“iOS 7 でAVSpeechSynthesizerを使用して音声を読み上げる” の続きを読む

TweetOverview 2.0 リリース記念で、広告削除アドオン半額セール

TweetOverview 2.0.0がリリースされました。

iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 TweetOverview ツイート俯瞰デスクサイドアプリ
“TweetOverview 2.0 リリース記念で、広告削除アドオン半額セール” の続きを読む

UIKit Dynamics を使用してViewを滑らかに移動する方法

TweetOverview 2.0.0 がリリースされました。
iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 TweetOverview ツイート俯瞰デスクサイドアプリ

これまでのバージョンがiOS7でちょっと不具合があり、修正しようと思ったところ、ここもなおそう、あそこもなおそうとやっていたら、ほぼ書き直しになってしまいました。前バージョンではUITableViewを使用してスクロールしていたのですが、これがデータが多くなるとパフォーマンスも落ちますし、また検索ストリームにあまりにたくさんのツイートが入ってきた時に安定性が悪いという問題がなかなか解決しませんでした。
“UIKit Dynamics を使用してViewを滑らかに移動する方法” の続きを読む

4畳半のスペースにIKEAで作った!見えるところにものを置かない、快適ホームオフィス空間

追記:2015/8/14
さらに改善した新しいオフィスの記事はこちらIKEAの家具で作った!スタンディングで作業できるヘルシーホームオフィス |

以前アメリカにいた時のホームオフィスの記事自宅作業が多い方にオススメ!IKEA で作った快適自宅オフィス | Zero4Racer PRO Developer’s Blog が人気だったので、日本に引っ越してきて新しく作り直したホームオフィスも記事にしてみます。

引越前のオフィスはこんな感じでした。

以前のホームオフィス
以前のホームオフィス

これはこれで気に入っていたのですが、やはりちょっと見た感じですっきりしていないのと、やはり電子機器が多いのでケーブルが多いのが気になっていました。写真とる時はケーブルを整理して撮るのですが、通常モードになると、どうしてもデスク中にケーブルが広がります。また、テーブルのスペースがやはりたくさんあると資料をいろいろ並べてみたり、一時的に必要な書類をまとめたり非常に便利なので、今回はL型のデスクを作りたいと思っていました。引っ越してきた家で、使う事が出来るスペースは、4畳半(260cm x 260cm)の部屋です。
“4畳半のスペースにIKEAで作った!見えるところにものを置かない、快適ホームオフィス空間” の続きを読む

UIImage の非透明部分だけを切り出す方法

Photoshopだと、非透明部分だけをトリムして切り取るのは簡単に出来ますが、UIImageに対しては、ちょっと面倒だったので備忘のために書いときます。

UIImage の切り取り自体は結構簡単なのですが、透明部分の判定が以外と面倒です。検索すると、wrep/UIImage-Trim ちょうど対応したUIImageカテゴリを発見。使ってみたのですが、どうもUIImageのScaleが2以上のときにうまく動いていないので対応。
tomohisa/UIImage-Trim
こちらにプロジェクトをforkして、scaleを考慮するように変更しました。

それに加えて、切り取る際にマージンを付ける機能も欲しかったので、


- (UIImage *) imageByTrimmingTransparentPixelsWithMargin:(UIEdgeInsets)insets;

このようなものも追加
それで、


UIImage * imageTrimmed = [image imageByTrimmingTransparentPixelsWithMargin:UIEdgeInsetsMake(10, 10, 10, 10)];

こんな感じでトリム出来るようになりました。本家のgithubにもpull requestを送ったのですが、マージしてもらえるでしょうかね?