iOSアプリを実機で動かすまでの手順メモ

試作したiOSアプリをiPod touch等の実機で動かすための手順をメモしました。cerファイルやプロビジョニングファイル等の作成/インストールやXCodeの設定等をメインにまとめています。「iOS Developer Program」への登録はiOSアプリの実機開発環境を整える 〜iOS Developer Programへの登録〜にまとめています。


参考書籍：
iPhone/iPad/iPod touch プログラミングバイブル iOS 6/Xcode 4対応 (smart phone programming bible)

「iOS Developer Program」への登録 〜iOSアプリを実機で動かすための準備〜

試作したiOSアプリをiPhoneやiPad等の端末で動作させるためにはまず「iOS Developer Program」に登録する必要があります。登録のために実際にやったことを以下に記述します。

PhoneGapのAPIを利用して、バックグラウンド動作への遷移周りで入力値の退避と復帰を行う

スマホアプリ起動中にHomeボタンを押し、再度アプリを表示させたとしても、アプリの処理で使用している値は正しく保持しておきたいです。PhoneGapを利用して、アプリがバックグラウンド動作へと移行する前後で、入力値の退避と復帰を行うサンプルコードを実装しました。

重くなってきたiPhoneの動作を軽くする『もっさり解消』

iPhoneやiPadなどのiOS製品を長時間使用していると、アプリの起動やタップしてからの反応が遅くなる（もっさりする）ことがあります。そんなもっさりした状態をワンタップで解消するアプリが『もっさり解消』です。

 

AppStore：もっさり解消 for iPhone

PhoneGapのStorage APIを利用してアプリの起動回数をカウントする

PhoneGapのStorage APIを利用するとアプリのローカルストレージに簡単な情報を書き込んだり読み込んだりできます。Objective-CでのNSUserDefaults、Androidでのプリファレンスみたいな機能です。このStorage APIを利用してアプリの起動回数をカウントするサンプルを書きました。


関連：
NSUserDefaultsを利用してアプリの起動回数をカウントする
SharedPreferencesを利用してアプリの起動回数をカウントする

jQuery Mobile Dateboxを利用して日付入力を簡単にする

jQuery Mobile Dateboxは日付入力を支援するjQuery Mobileのプラグインです。date型に対応していないブラウザでの入力に便利です。日付入力方式はいろいろあるのですが、今回はカレンダー式の入力(CalBox)を試してみました。

jQuery Validationを利用して入力値をチェックする

jQuery Validationは入力値チェックが簡単に行えるHTML5とjQueryのフレームワークです。このプラグインを利用して数値やメールアドレス、日付等の入力値チェックを行ってみました。

手書きの数式から自動で答えが導かれる『MyScript Calculator』

『MyScript Calculator』は、手で書いた数式を認識して、その数式の解答を自動で表示するスマホアプリです。分数やルートといった数式だけでなく、対数、sinやcosといった三角関数なども利用できます。


例えば、こんな感じでルート2分の1を入力すると、

数式を自動で変換して解を表示してくれます。

これは本当すごい！ちょっとした複雑な計算を行いたいときにすごく便利なアプリだと思います。


Google Play：MyScript Calculator
App Store : MyScript Calculator

フリップスイッチの値によってページ遷移先を分岐させる

jQuery Mobileでアンカータグをクリックしたとき、条件によってページ遷移先を分岐させる処理を模索していました。vclickイベントで検知して、$.mobile.changePageで遷移させる方法が良さそうです。というわけで、フリップスイッチの値がOFFならばOFF画面へ、ONならばON画面へ遷移する処理を実装しました。

jqPlotとPhoneGapでアプリに折れ線グラフを描画する

jqPlotは折れ線グラフや円グラフ等が描画できるJavaScriptのライブラリです。このjqPlotとPhoneGapを利用して、アプリに簡単な折れ線グラフを描画してみました。

jQuery Mobileを利用したボタンにアイコンが表示されない問題を解決する

jQuery Mobileを利用するとボタンにアイコンを簡単に表示させることができますbutton要素の中に”data-icon”属性を追加することでアイコン付きボタンを表示させることができるのですが、そのアイコンが表示されない問題に遭遇しました。

<button data-icon="add">追加</button>

PhoneGapのAPIを利用してDatabaseを簡単に操作する

PhoneGapのAPIを利用するとDatabaseを簡単に操作できるようです。そのAPIを利用して、「Hello World!」の文字を格納したテーブルを作成し、そのテーブルから「Hello World!」を取得して画面に表示するプログラムを作成しました。

PhoneGapとjQuery Mobileを使ったネイティブアプリ開発

iOSやAndroidのネイティブアプリをjQuery Mobileで作りたい。PhoneGapというフレームワークを使えばそれが可能なようなので、さっそくPhoneGapとjQuery MobileでHello World!の表示まで試してみました。

PhoneGapによるAndroidアプリ開発環境を構築する（Eclipse編）

MacにAndroidアプリの開発環境をインストールしてPhoneGapが利用できる環境を構築しました。PhoneGapによるiOSアプリ開発環境を構築する（Xcode編）の続きです。

PhoneGapによるiOSアプリ開発環境を構築する（Xcode編）

PhoneGapはiOSやAndroidなどをサポートするオープンソースのモバイルアプリケーション開発フレームワークです。このフレームワークを使うことで、HTMLやJavaScriptでアプリが作れるようです。そこで、まずはPhoneGapをXcodeから利用できる開発環境を構築しました。

スタイルを含んだ文字から文字だけをコピーする『FormatMatch』

MacbookでWebサイトの気になる文章をEvernoteにコピーしたり、Evernoteで編集したブログの記事をBloggerにコピーしたりするとき、コピー元のスタイルを含んだままコピーされてしまいます。それを手軽に解決してくれるのが『Format Match』です。

Format Match


Format Matchを起動すると、メニューバーにそのアイコンが表示されます。アイコンが活性になっているときは、スタイルを含んだ文章をコピーしてもスタイルが取り除かれた状態でコピーされます。アイコンが非活性になっているときは、文章はスタイルを含んだ状態でコピーされます。

アイコンの活性、非活性はクリックで切り替えられます。アイコンを活性から非活性にするときはDeactivate、非活性から活性にするときはActivateをクリックします。シンプルでとても使いやすいです。

大切な予定までの日数をカウントする『あとマル』

あとマルは直近の特定日までの日数を表示してくれるアプリです。日時と予定を入力するだけで、その日までの残り日数をバッジに表示してくれます。バッジとはアイコンの右上に表示される赤い円のことです。

App Store：あとマル - 残り日付をバッジでカウントダウン

iOSのツールバーをUIToolBarで作成する

iOSアプリでよく見るツールバーはUIToolBarを用いて簡単に作成できるようです。UIToolBarでツールバーを作成し、そこにiOS標準のボタンを設置して表示するプログラムを作成しました。

NSUserDefaultsを利用してアプリの起動回数をカウントする

NSUserDefaultsクラスを利用すると、軽めの情報をiOSアプリ内へ簡単に保存したり読み出したりすることができます。このクラスを利用して、アプリの起動した回数をカウントするコードを書きました。

Objective-CのSyntaxHighlighterをBloggerで利用できるようにする

SyntaxHighlighterはソースコードを色分けして綺麗に表示するJavaScriptのライブラリです。しかし、Objective-Cは本家のライブラリに含まれていないため、その言語を利用したい場合はそれ専用のファイルを別のサイトから持ってくる必要があります。いろいろと試して何とかObjective-CのSyntaxHighlighterをBloggerで利用できるようになったので、その導入手順をメモします。


導入手順は次の通りです。

1. SyntaxHighlighterをソースコードの色付け - SyntaxHighlighter - <設定編>の方法で設定します。
2. UNDER MY HATのSYNTAX HL BRUSHESから"Oxygen"にあるファイル(shBrushObjectiveC.js)を開いてコピーします。（"Objective-C"にあるjsファイルは別もののようです）
3. 1.で設定したタグ<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript">と<script language="javascript">の間に<script></script>を記述します。
4. 3で記述した<script></script>の間に2でコピーした内容を貼り付けます。
5. 後はObjective-Cのコードを <pre class="brush: objc"></pre>で囲むと色付けされるようになります。


実行サンプルは次の通り。（色付けが少し寂しい気がしますが。。）

この導入方法は簡単で良いのですが、本家ライブラリとshBrushObjectiveC.jsを自サイトにアップロードして利用するのが本来のやり方だと思います。しかし、Bloggerではjsファイルをアップロードして利用するということが難しそうだったのでこの方法を採りました。自サイトへのアップロードはまた別の機会に。


SyntaxHighlighterの本家URL：SyntaxHighlighter
Objective-CのSyntaxHighlighter：UNDER MY HAT
導入まとめ1：ソースコードの色付け - SyntaxHighlighter - <概要編>
導入まとめ2：ソースコードの色付け - SyntaxHighlighter - <使用編>
導入まとめ3：ソースコードの色付け - SyntaxHighlighter - <設定編>
導入参考サイト1：はてなブログでSyntaxHighlighterでObjective-Cを表示
導入参考サイト2：SyntaxHighlighterでObjective-Cをきれいに表示