Smart Gadget Laboratory

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

2013-03-19T09:08:00.000+09:00

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

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

実機実行に必要なファイル
・証明書署名要求ファイル（CertificateSigningRequest.certSigningRequest）
cerファイルのダウロードに必要な証明書

・developer_identity.cer、AppleWWDRCA.CER
Macでのビルドを許可するための証明書

・プロビジョニングファイル（*.mobileprovision）
実機実行のためのMacとiOS端末とを紐付ける証明書

手順概要
(1) 証明書要求ファイルの作成
(2) cerファイルのインストール
(3) iOS端末の登録
(4) アプリケーションIDの登録
(5) プロビジョニングファイルの設定
(6) iOS端末へのインストール

(1) 証明書署名要求ファイルの生成
1. Macのアプリケーション/ユーティリティ配下にあるキーチェーンアクセスを起動。

2. メニューの[キーチェーンアクセス]→[環境設定]→[証明書]タブを選択し、次のように設定。
オンライン証明書状況プロトコル（OCSP）：切
証明書失効リスト（CRL）：切

3. メニューの[キーチェーンアクセス]→[証明書アシスタント]→[認証局に証明書を要求…]を選択すると証明書アシスタントが開くので、次のように設定して続けるをクリック。
ユーザのメールアドレス：【登録に使用したメールアドレス】
通称：【自分の名前】
CAのメールアドレス：【空】
要求の処理：ディスクに保存を選択

保存場所が聞かれるので適当な場所を選択して[保存]をクリック→「証明書要求がディスク上に作成されました。」の文言を確認して[完了]ボタンをクリック→ディスクに証明書署名要求ファイル「CertificateSigningRequest.certSigningRequest」が作成されていることを確認。

(2) cerファイルのインストール
1. iOS Developerにログインし、[iOS Provisioning Portal]を開く。

2. 左側メニューの[Certificates]をクリック→[Development]を選択→[Request Certificate]をクリック→[Create iOS Development Certificate]が表示される。

3. [ファイルを選択]をクリックし、「CertificateSigningRequest.certSigningRequest」を選択→[Submit]をクリック→[Current Development Certificates]が表示される→しばらく待った後、リロード→[Download]ボタンが現れるので、それをクリック→「ios_development.cer」がダウンロードされる。

4. [Current Development Certificates]の画面の[click here to download now.]をクリック→「AppleWWDRCA.cer」がダウンロードされる。

5. 「ios_development.cer」をダブルクリック→[キーチェン：]に[ログイン]が選択されていることを確認して[追加]ボタンをクリック。

6. 「AppleWWDRCA.cer」をダブルクリック→[キーチェン：]に[システム]が選択されていることを確認して[追加]ボタンをクリック。

(3) iOS端末の登録
1. iOS端末をMacに接続→XCodeを開き、右上の[Organizer]をクリック→接続しているiOS端末を表示し、そこのidentifierの値をコピーする。

2. [iOS Provisioning Portal]を開き、[Devices]をクリック→[Manage]を選択し、[Add Devices]をクリック→[Device Name]に適当な名前、[Device ID]に1でコピーした値を入力し、[Submit]ボタンをクリック→[Current Registered Devices]に入力した端末が表示されていればOK。

(4) アプリケーションIDの登録
1. [iOS Provisioning Portal]を開き、 [App IDs]をクリック→[Manage]を選択し、[New App ID]をクリック。

2. [Description]、[Bundle Identifier]にそれぞれ適当なアプリケーション名、アプリケーションID（他の人の重複しないようなドメイン）を入力→[Submit]をクリック。（アプリケーションIDはドメイン名の逆＋アプリ名が推奨されているようです。hoge.piyo.HelloWorldなど。）

(5) プロビジョニングファイルの設定
1. [iOS Provisioning Portal]を開き、 [Provisioning]をクリック→[Development]を選択し、[New Profile]をクリック→[Create iOS Development Provisioning Profile]が表示される。

2. 下記設定項目を入力して[Submit]をクリックします。
Profile Name：プロビジョニングファイル名。適当な名前を入力。
Certificates：自分のらしいのを選択。
App ID：登録したアプリケーション名を選択。
Devices：登録した端末名を選択。

3. [Development Provisioning Profiles]が表示されるので、しばらく待って後リロード→[Download]ボタンが現れるのでクリック→プロビジョニングファイル「【アプリケーション名】.mobileprovision」がダウンロードされる。

4. プロビジョニングファイルをXcode 4のアイコンにドラッグ&ドロップ→[Organizer]の[Provisioning Profiles]に追加されたことを確認。

5. XCodeの任意のプロジェクトを起動し、[TARGETS]より[Summary]を選択→[Bundle Identifier]に登録したアプリケーションIDを入力。

6. XCodeの[TARGETS]より[Build Settings]を選択→[Code Signing]：[Code Signing Identify]のDebug、Releaseそれぞれの[Any iOS SDK]にダウロードしたプロビジョニングファイルを設定。

(6) iOS端末へのインストール
1. iOS端末をMacに接続した状態でOrganizerを起動し、接続端末を選択→[User for Development]ボタンを押下。

2. iOS端末のアプリの設定→[一般]の[プロファイル]にアプリケーション名が表示されていることを確認。

3. XCodeの[PROJECT]より[Info]を選択→[Configurations]のUseを[Debug]に設定。

4. スキーマに登録したiOS端末名を指定して[Run]を押下→アプリの起動ができたら完了です。

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

2013-03-18T09:03:00.000+09:00

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

1日目
1. 登録は下記サイトから行います。
https://developer.apple.com/jp/programs/ios/

[今すぐ登録]より登録フローを進めていきます。

2. [今すぐ登録]→[続ける]と進むと「サインインするか、新しいApple IDを作成してください」の画面に進みます。Apple IDアカウントを日本語で登録していると面倒なことになるらしいので、開発用の英語アカウントを新規に作成します。

3. [Apple IDを作成]にチェック→[進む]→[Individual]と進むと「Complete your personal profile」画面に進みます。ここで個人情報を入力します。10分くらいでセッションが切れたので、それまでに入力を完了させないといけないようです。

Create Apple ID：
メールアドレスとパスワードを入力します。

Security Information：
誕生日と秘密の質問を入力します。

Personal Information：
名前、住所、電話番号を入力します。住所は英語で登録する必要があります。日本語で入力した住所を英語向けに変換する下記サイトを利用しました。
http://judress.tsukuenoue.com/

電話番号(Phone:)のCountry Codeは、日本の場合、81になります。その後、市外局番（先頭の0はなし、090→90）、電話番号と入力します。最後の空白は内線番号のようで、未入力でも大丈夫でした。

4. [Continue]をクリックすると[Complete your professional profile]の画面に進みます。アンケートのようなので、任意の部分にチェックを入れて[Continue]をクリックします。[Registered Apple Developer Agreement]の画面（利用規約の同意チェック）が表示されるので、[By Checking this box I confirm that …]にチェックを入れて[I Agree]をクリックします。

5. 登録したメールアドレスにAppleより「Please verify your email address.」とうタイトルのメールが届きます。その中の「Verification Code」を表示されている画面に入力して次へ進むと[Enter your billing information for identity verification]の画面が表示されます（うろ覚えです。。）。この画面ではちゃんとした情報（クレジットカードの登録時に使用した名前と住所等）を入力して[Continue]をクリックします。[Select your program]画面に進みます。

6. [iOS Developer Program]を選択して[Continue]をクリック→[Review your enrollment information & submit.]画面表示→[Continue]クリック→[Program License Agreement]画面表示→[By Checking this box I confirm that …]にチェックを入れて[I Agree]をクリック→[Proceed to your country's Apple Online Store to purchase.]画面表示→[Add to cart]クリック→[Developer Program Purchase & Activation]画面が表示されるとともに、日本のApp Storeのオンライン購入画面へ進みます。あとは注文フローに従って購入します。

2日目
7. 「Apple Developer Program Activation Code」というタイトルのメールが届きました。
Activation Codeのリンクをクリックし、ログインします。[Apple Developer Program Enrollment]画面が表示されました。泣きそうになりました。何かが失敗したっぽいので、[contact us]をクリック→[Program Enrollment]をクリック→[Contact US]画面を表示して必要な情報を入力します。

入力内容は次のページを参考にしました。
http://mushikago.com/i/?p=917

8. [Submit]をクリックして内容を送信→数分後に「Acknowledgement of your email/submission」というタイトルのメールが届きました。

3日目
9. 「アクティベーションコードの有効化準備が整ったので、再度有効化を試してください」という旨のメールが届きました。7.のメールよりActivation Codeのリンクをクリックし、ログイン→[Activate your Program]の画面が表示される。きた。[Activate]をクリック→[Activation Complete]の画面が表示される。

10. [Get Started]をクリック→[Dev Centers]のiOSをクリック→右サイドの上部メニューに[iOS Developer Program]が表示されていればOKっぽいです。

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

2013-03-04T09:05:00.000+09:00

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

サンプルコード
PhoneGap APIを参照すると、pause/resumeがそれぞれアプリがバックグラウンド動作になったタイミング/バックグラウンドから復帰したタイミングで呼ばれる関数のようです。それらが呼ばれたタイミングでStorage APIを利用して入力値をローカルストレージに退避します。

<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
        <script type="text/javascript" charset="utf-8">
              
                // イベントリスナの登録。デバイスの準備完了まで待つ
                document.addEventListener("deviceready", onDeviceReady, false);
              
                // デバイス準備完了時にコールバック
                function onDeviceReady() {
                    // イベントリスナの登録。アプリがバックグラウンド動作になったときに呼び出される
                    document.addEventListener("pause", onPause, false);
                  
                    // イベントリスナの登録。アプリがバックグラウンドから復帰したときに呼び出される
                    document.addEventListener("resume", onResume, false);
                  
                    // 退避値の表示
                    showText();
                }
          
                // アプリがバックグラウンド動作になった時にコールバック
                function onPause() {
                    // 入力値の退避
                    var saveText = $("#sampleText").val();
                    window.localStorage.setItem("saveText", saveText);
                }
          
                // アプリがバックグラウンド動作から復帰した時にコールバック
                function onResume() {
                    // 退避値の表示
                    showText();
                }
          
                // 退避値の表示
                function showText() {
                    // 入力値の復帰
                    var saveText = window.localStorage.getItem("saveText");
                    $("#sampleText").val(saveText);
                }
          
        </script>
        <title>Pause Resume Test</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="content">
                <form id="sampleForm">
                    <input type="text" id="sampleText">
                </form>
            </div>
        </div>
    </body>
</html>

アプリ起動→Homeボタン→アプリ再表示と遷移しても値はちゃんと表示されました。アプリ起動→アプリ終了→アプリ再起動でも値は復帰されました。

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

2013-03-01T09:02:00.000+09:00

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

AppStore：もっさり解消 for iPhone

もっさり解消のやり方は簡単で、起動して「もっさり解消しとく」のボタンタップするだけです。タップするとメモリ解放などの処理が行われます。右上に最近メモリを使用したアプリの一覧が表示されているので、もっさり感の要因となっているアプリの推定もできます。

また、タブバーには小ワザ集というのもあります。マルチタスクバーからアプリを停止させる、Spotlight検索をOFFにする、などのもっさり解消技が載っていて役に立ちます。

関連：
Androidアプリの動作が重いと感じたら『メモリブースター』

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

2013-02-25T08:31:00.000+09:00

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

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

Storage API

情報はキーとアイテムのセットで保存します。

window.localStorage.setItem("key", "value");

キーを指定してアイテムを読み込みます。

var value = window.localStorage.getItem("key");

キーで指定されたアイテムを削除します。

window.localStorage.removeItem("key");

clearを呼び出すと、全ての情報が削除されます。

window.localStorage.clear();

ソースコード
getItemでcountの情報を取得し、その情報を表示した後、countをインクリメントしてsetItemで保存します。getItemで取得されるアイテムがない場合はnullが返るため、その場合は初回起動とみなします。

<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
        <script type="text/javascript" charset="utf-8">
              
                // イベントリスナの登録。デバイスの準備完了まで待つ。
                document.addEventListener("deviceready", onDeviceReady, false);
              
                // デバイス準備完了時にコールバック。
                function onDeviceReady() {
                    // キーで指定されたアイテムの取得
                    var count = window.localStorage.getItem("count");
                  
                    // 初回起動
                    if (count == null) {
                        count = 1;
                    }
                  
                    // ローカルストレージ初期化
                    document.getElementById("launced-count").innerHTML = count;
                  
                    // キーで指定してアイテムを保存
                    window.localStorage.setItem("count", ++count);
                }
          
        </script>
        <title>Count Up Test</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="content">
                <h1 id='launced-count'></h1>
            </div>
        </div>
    </body>
</html>

実行するとちゃんとカウントアップされました。

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

2013-02-18T09:04:00.000+09:00

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

準備
下記サイトにアクセスします。
http://dev.jtsage.com/jQM-DateBox2/demos/install.html

[Download Links - Current Version]より次のファイルをダウンロードして適当な場所に配置します。
・jqm-datebox.min.css
・jqm-datebox.core.min.js
・jqm-datebox.mode.calbox.min.js

ソースコード
準備したファイルをインポートして、inputのdata-role属性に"date-box"、data-options属性に日付のフォーマット等を指定することで利用できるようになります。下記では入力後に表示される日付の形式をYYYY/MM/DDとしています。

<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
        <link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="js/jqm-datebox.core.min.js"></script>
        <script type="text/javascript" src="js/jqm-datebox.mode.calbox.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
        <title>Input Date Test</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="content">
                <label for="date">Input Date</label>
                <input id="date" name="date" type="date" data-role="datebox" data-options='{"mode":"calbox", "overrideDateFormat":"%Y/%m/%d"}' />
            </div>
        </div>
    </body>
</html>

実行すると、上述のように、フォームの右端にカレンダーっぽいアイコンが現れます。これをタップするとカレンダーが現れて日付が入力できるようになりました。

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

2013-02-04T09:04:00.000+09:00

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

準備
下記サイトの”Downlords”より、jquery-validation-1.10.0.zipをダウンロードします。
URL：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

解凍するとdistフォルダの配下に"jquery.validate.min"が含まれているので、このファイルを適当なフォルダに配置します。

ソースコード
inputのクラス名にチェックしたい要素を指定し、イベント定義でバリデーション実行を行います。チェックが成功したときにコールバックされる関数をsubmitHandlerに定義します。

サンプルとして数値チェックのコードを次のように書きました。数値入力のtype属性をtextにしています。実行すると文字列を入力したときにちゃんと怒られました。

<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.validate.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
        <script type="text/javascript">
            // イベント処理定義
            $(document).on("pageinit", "#index", function(e){
                           // バリデーション実行
                           $("#sampleForm").validate({
                                        submitHandler: function() {
                                                     alert("チェックOK");
                                        }
                                        });
                           });
        </script>
        <title>Hello World!</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="content">
                <form id="sampleForm" method="get" action="">
                    <input type="text" class="number">
                    <input type="submit" value="チェック">
                </form>
            </div>
        </div>
    </body>
</html>

また、必須チェックを行うにはrequiredを指定します。

<input type="number" class="required number">

3文字以上、10文字以下といった文字列長の指定は次のように行います。

<input type="number" class="number" minlength="3" maxlength="10">

その他にも次の項目がチェックできます。

メールアドレス：

<input type="email" class="email">

URL：

<input type="url" class="url">

日付：

<input type="date" class="date">

入力文字を解析して整合性を検証する手間が省略できていいですね。

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

2013-02-01T09:01:00.000+09:00

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

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

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

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

Google Play：MyScript Calculator
App Store : MyScript Calculator

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

2013-01-28T09:03:00.000+09:00

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

ソースコード
jQuery1.7以降では、イベント処理の定義は次のような書式で書くことができるようです。（jQuery1.6以前のbind、live、delegateにそれぞれ対応します）

$(セレクタ).on(イベント名, ハンドラ);
$(document).on(イベント名, セレクタ, ハンドラ);
$(セレクタ).on(イベント名, 子セレクタ, ハンドラ);

クリックしたときのイベントは"click"や"vclick"などが利用できるようですが、"vclick"は"click"よりもレスポンスが早いといった特徴があるようです。

ページ遷移は$.mobile.changePageで行えます。オプションにページの切替効果や送信データ等を指定できるようです。

<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
        <script type="text/javascript">
            // イベント処理定義
            $(document).on("pageinit", "#index", function(e){
           
                           // アンカータグのクリックを検知
                           $(this).on("vclick", "a", function(e){
                                     
                                      // アンカーのIDがnext-pageに一致したとき
                                      if ($(this).attr("id").match(/next-page/)) {
                                     
                                            // フリップスイッチの値を取得
                                            var flipValue = $('#flip-a').val();
                                     
                                            // フリップスイッチの値によって、ページ遷移分岐
                                            if (flipValue=="off") {
                                                $.mobile.changePage("#off-page");
                                            } else if (flipValue=="on") {
                                                $.mobile.changePage("#on-page");
                                            }
                                      }
                                      });
                           });
        </script>
        <title>Hello World!</title>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="content">
                <select name="slider" id="flip-a" data-role="slider">
                    <option value="off">OFF</option>
                    <option value="on">ON</option>
                </select>
                <a href="#" id="next-page" data-role="button">NEXT PAGE</a>
            </div>
        </div>
        <div data-role="page" id="off-page">
            <div data-role="content">
                OFF
            </div>
        </div>
        <div data-role="page" id="on-page">
            <div data-role="content">
                ON
            </div>
        </div>
    </body>
</html>

これでNEXT PAGEボタンをクリックしたとき、フリップスイッチの状態によって画面遷移先を切り替えることができました。

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

2013-01-15T09:01:00.000+09:00

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

事前準備
http://www.jqplot.com/にアクセスし、jquery.jqplot.1.0.4r1121.zipをダウンロードします。解凍すると次のファイルやフォルダがあるので、適当な箇所に配置します。
・jquery.jqplot.min.js
・jquery.jqplot.min.css
・pluginsフォルダ

ソースコード
jquery.jqplot.min.jsとjquery.jqplot.min.cssをインポートしてグラフを描画します。（pluginsフォルダ配下のライブラリは必要なときに利用）。PhoneGapではデバイス準備が完了した後に描画処理を行います。グラフは$.jqplotに要素id、データ、オプションを指定することで描画されます。

<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.min.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
        <script type="text/javascript" charset="utf-8">
               
            // イベントリスナの登録。デバイスの準備完了まで待つ。
            document.addEventListener("deviceready", onDeviceReady, false);
               
            // デバイス準備完了時にコールバック。
            function onDeviceReady() {
                var graphData = [
                                 [1,3,2,5,4,7,6,9,8],
                                 [1,2,4,6,9,6,4,2,1]
                                 ];
               
                var options = {
                    title : '折れ線グラフ'
                };
               
                // グラフ描画
                var plot = $.jqplot('chart', graphData, options);
            }
               
        </script>
           
        <title>Hello World!</title>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>header</h1>
            </div>
            <div data-role="content" id="main">
                <div id="chart"></div>
            </div>
            <div data-role="footer" data-position="fixed">
                <h1>footer</h1>
            </div>
           
        </div>
    </body>
</html>

実行すると上手のような折れ線グラフが描画されました。

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

2013-01-12T19:20:00.002+09:00

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

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

原因はjquery.mobile-1.2.0.min.cssを配置したフォルダに、jQuery Mobileのライブラリに含まれているimagesフォルダを配置していなかったためでした。このフォルダを適切に配置することで問題は解決できました。

ファイル配置
PhoneGapとjQuery Mobileを使ったネイティブアプリ開発でのファイルの配置はよくよく調べてみるとイケてないことに気づいたので、次のように修正しました。

ライブラリを適切にインポートして実行すると正しくアイコンは表示されました。

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

2012-12-17T08:32:00.000+09:00

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

サンプルコード
index.htmlを次のような流れでコーディングしました。

1. デバイス準備完了を待つ。
2. デバイス準備の完了後、HELLOテーブルを作成し、「Hello World!」の文字を挿入。
3. 「Hello World!」の文字を検索し、画面に表示。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="spec/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css">
        <script type="text/javascript" src="spec/lib/jquery.mobile-1.2.0/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="spec/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
       
        <title>Hello World!</title>
            <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
            <script type="text/javascript" charset="utf-8">
               
                // イベントリスナの登録。デバイスの準備完了まで待つ。
                document.addEventListener("deviceready", onDeviceReady, false);
               
                // デバイス準備完了時にコールバック。
                function onDeviceReady() {
                    var db = window.openDatabase("Database", "1.0", "Hello DB ", 200000);
                    db.transaction(populateDB, errorCB, successCB);
                }
               
                // テーブル準備
                function populateDB(tx) {
                    tx.executeSql('DROP TABLE IF EXISTS HELLO');
                    tx.executeSql('CREATE TABLE IF NOT EXISTS HELLO (key PRIMARY KEY, data)');
                    tx.executeSql('INSERT INTO HELLO (key, data) VALUES ("hello", "Hello World!")');
                }
               
                // テーブル準備、hello検索の失敗時にコールバック。
                function errorCB(err) {
                    console.log("Error processing SQL: "+err.code);
                }
               
                // テーブル準備の成功時にコールバック。
                function successCB() {
                    var db = window.openDatabase("Database", "1.0", "Hello DB", 200000);
                    db.transaction(queryDB, errorCB);
                }
               
                // hello検索
                function queryDB(tx) {
                    tx.executeSql('SELECT data FROM HELLO WHERE key = "hello"', [], querySuccess, errorCB);
                }
               
                // hello検索の成功時にコールバック。
                function querySuccess(tx, results) {
                    if (results.rows.length == 1) {
                        console.log("oi");
                        document.getElementById("hello").innerHTML = results.rows.item(0).data;
                    }
                }
               
                </script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>header</h1>
            </div>
            <div data-role="content">
                <h1 id='hello'></h1>
            </div>
            <div data-role="footer" data-position="fixed">
                <h1>footer</h1>
            </div>
        </div>
    </body>
</html>

サンプルはPhoneGapのAPIリファレンスを参照して作成しました。 http://docs.phonegap.com/en/2.2.0/cordova_storage_storage.md.html

実行結果
iPhone SimulatorのiOS6.0で実行した場合、DBは"0000000000000001.db"という名前で下記パスに作成されていました。

{ホーム}/Library/Application Support/iPhone Simulator/6.0/Applications/{アプリケーションID}/Library/WebKit/LocalStorage/file__0

SQLiteBroweser等のDBを参照するツールで見ると、HELLOテーブルに"hello"と"Hello World"のレコードが追加されてました。こんな簡単にDB操作ができるとは。。

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

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

2012-12-15T20:30:00.000+09:00

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

PhoneGapの準備
以下にまとめています。
PhoneGapによるiOSアプリ開発環境を構築する（Xcode編）
PhoneGapによるAndroidアプリ開発環境を構築する（Eclipse編）

jQuery Mobileの準備
jQuery Mobileを利用するためには次の3つが必要っぽいので、本家からダウンロードします。
・jquery-1.8.2.min.js （jQuery本体）
・jquery.mobile-1.2.0.min.css　（jQuery Mobileのスタイルシート）
・jquery.mobile-1.2.0.min.js　（jQuery Mobile本体）

ダウロードは次のサイトからできます。
http://jquery.com/download/ （jQuery本体）
http://jquerymobile.com/download/ （jQuery Mobileのスタイルシートと本体）

ファイルの配置
次のディレクトリを作って、準備した3つのファイルを配置しました。
www/spec/lib/jquery.mobile-1.2.0

ソースコード
www配下のindex.htmlを次のように変更します。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=default-width; user-scalable=no"/>
        <meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="spec/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css">
        <script type="text/javascript" src="spec/lib/jquery.mobile-1.2.0/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="spec/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
      
        <title>Hello World!</title>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>header</h1>
            </div>
            <div data-role="content">
                <h1>Hello World!</h1>
            </div>
            <div data-role="footer">
                <h1>footer</h1>
            </div>
        </div>
    </body>
</html>

iPhoneとAndroid端末のシミュレータで実行すると上図のようになりました。

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

2012-12-12T23:17:00.000+09:00

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

Android開発環境のインストール
下記サイトにアクセスし、「Download the SDK ADT Bundle for MAC」から「adt-bundle-mac-x86_64.zip」をダウンロードして任意の場所に解凍します。
http://developer.android.com/intl/ja/sdk/index.html

解凍したディレクトリのeclipse/Eclipse.appを起動します。

PhoneGapのプロジェクト作成
Terminal.appを起動し、ホームディレクトリで次のコマンドをタイプして.bash_profileに環境変数を追加します。

touch ~/.bash_profile; open ~/.bash_profile

ファイルの中身は「adt-bundle-mac-x86_64.zip」を解凍したフォルダのplatform-toolsとtoolsまでのパスを記載します。/Applications直下に解凍したなら次のように記述します。

export PATH=${PATH}:/Applications/adt-bundle-mac/sdk/platform-tools:/Applications/adt-bundle-mac/sdk/tools

記載したらファイルを保存し、次のコマンドで再読み込みさせます。

source ~/.bash_profile

PhoneGapを解凍したディレクトリ配下のlib/android/binに移動した後、次のコマンドを入力します。

./create <project_folder_path> <package_name> <project_name>

iOS版（Xcode編）ではHelloWorld2を作成したので、Android版（Eclipse編）ではHelloWorld3というプロジェクト名を作りました。

./create ~/work/HelloWorld3 org.apache.HelloWorld3 HelloWorld3

次にEclipseで[File]→[New]→[Other Project]→[Android]の[Android Project from Existing Code]を選択し、[Next]をクリック。
[Import Projects]ウィンドウが開くので、[Root Directory]にproject_folder_pathを入力し、[Finish]をクリック。
Eclipseメニューの[Window]→[Android Device Virtual Manager]より適当なAVDを作成し、Runすると次のような画面が表示されました。

wwwディレクトリはプロジェクト直下のassets配下にあります。AndroidのwwwとiOSのそれとを共有すれば、両OSのアプリが一度に作れる気配です。なんとすごい！

共有のやり方はいろいろ調べたのですが、今はまだうまくいかずです。git等を利用してリポジトリ管理するのが良さそうです。

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

2012-12-09T21:13:00.001+09:00

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

事前準備
iOSアプリ開発にまず次のツールを用意します。

・Xcode4.5.2
AppStoreよりインストールします。

・Xcode Command Line Tools
Xcodeを開き、[XCode]→[Preferences]→[Downloads]→[Components]より[Command Line Tools]をインストールします。

・PhoneGap2.2.0
次のPhoneGapの公式サイトに移動し、「Download PhoneGap」→「Download」よりPhoneGap2.2.0をダウンロードします。
http://www.phonegap.com/

DL完了したら、そのzipファイルを任意のディレクトリへ解凍します。

プロジェクト作成
Terminal.appを起動し、PhoneGapを解凍したディレクトリ配下のlib/ios/binに移動した後、次のコマンドを入力します。

./create <project_folder_path> <package_name> <project_name>

例えば、HelloWorld2というプロジェクト名を次のように作りました。

./create ~/work/HelloWorld2 org.apache.HelloWorld2 HelloWorld2

入力後、project_folder_pathのフォルダに移動すると、HelloWorld2.xcodeprojが作成されています。それを起動し、そのままSimulatorも起動させると次のように表示されました。

HelloWorld表示
最初に表示されている画面はプロジェクトのwwwディレクトリ配下のindex.htmlです。なので、これを書き換えると表示も変更されます。

<html>
    <head>
        <title>Hello World 2</title>
    </head>
    <body>
        Hello World 2
    </body>
</html>

wwwディレクトリ内をいろいろ変更してアプリを作っていくイメージです。楽しみです。

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

2012-10-15T08:31:00.000+09:00

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

Format Match

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

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

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

2012-09-09T12:02:00.000+09:00

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

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

あとマルには予定をひとつだけ設定できます。例えば情報処理技術者試験など、直近の重要な予定をひとつだけ設定することで、その目標に向かって集中できそうな予感がします。

バッジに日数を表示する発想が素敵です。iOSには、Androidのウィジェットみたいな機能がないため、ホーム画面に様々な情報を盛り込むことは出来ないですが、情報の見せ方を工夫するだけで面白いアプリが生まれることを実感しました。

関連：目標達成まであと何日？『Countdown Widget』

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

2012-09-07T09:03:00.000+09:00

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

プログラム
UIToolBarのインスタンスを作成して、UIWindowのインスタンスに追加します。ツールバーへのボタン配置は、UIBarButtonItemのインスタンス作成してUIToolBarのitemsに追加することで実現できます。ボタンの種類は、UIBarButtonItemのinitWithBarButtonSystemItemに指定します。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    self.window.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
    
    // ツールバーの作成
    CGRect toolBarFrame = [UIScreen mainScreen].applicationFrame;
    toolBarFrame.size.height = 44;
    UIToolbar* toolBar = [[[UIToolbar alloc] initWithFrame:toolBarFrame] autorelease];

    // ボタンの作成とツールバーへの配置
    UIBarButtonItem* doneButtonItem = [[[UIBarButtonItem alloc]
                                        initWithBarButtonSystemItem:UIBarButtonSystemItemDone
                                        target:self
                                        action:@selector(done)]
                                       autorelease];
    toolBar.items = [NSArray arrayWithObject:doneButtonItem];
    
    // ツールバーをwindowに追加
    [self.window addSubview:toolBar];

    [self.window makeKeyAndVisible];
    return YES;
}

- (void)done{
}

実行結果は上の図の通りになります。ただ、ステータスバーとツールバーの隙間に違和感を感じます。違和感を無くすには、UIViewControllerでツールバーを作成するように構成を変える必要があるかもしれないです。

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

2012-09-05T08:55:00.000+09:00

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

プログラム
NSUserDefaultsでは、情報をキーと値のセットで扱います。NSUserDefaultsから整数値を読み出すにはintegerForKey、保存するにはsetIntegerメソッドにキーを指定します。そして、synchronizeメソッドで情報を反映させます。

アプリケーションの動作が可能になったときに呼ばれるapplicationメソッドに、アプリの起動回数をカウントするコードを次のように書きました。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{

    NSUserDefaults* userDefaults = [NSUserDefaults standardUserDefaults];
    int appLaunchedCountValue = [userDefaults integerForKey:@"appLauchedCount"];
    appLaunchedCountValue++;
    NSLog(@"appLaunchedCountValue = %d", appLaunchedCountValue);
    [userDefaults setInteger:appLaunchedCountValue forKey:@"appLauchedCount"];
    [userDefaults synchronize];

    return YES;
}

実行結果
アプリの起動と停止をシミュレータで4回繰り返した結果をコンソールで確認しました。起動回数がちゃんとカウントアップされています。

NSUserDefaultsが書きだすファイル(*.plist)は、iOS5.1のシミュレータであれば下記の場所にありました。隠しファイルなので、Finderで表示するときは全てのファイルを表示するように設定する必要があります。

/Users/[ユーザ名]/Library/Application Support/iPhone Simulator/5.1/Applications/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/Library/Preferences

plistファイルは開いて値を変更したりすることもできます。

NSUserDefaultsは、Androidのプリファレンスのような機能です。設定値の保存に便利そうです。

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

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

2012-09-02T20:31:00.000+09:00

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をきれいに表示

マルチスレッドとは・・・

2012-09-01T19:56:00.000+09:00

マルチスレッドプログラムについて経験値がいくらかたまったので、一度自分の知見をまとめてみようと思います。自分の知識の整理を目的としたいと思います。

スレッドとは

端的に言うと、スレッドとは、プログラムを実行する主体の最小単位です。ここで言っている主体とは、例えば、a.outという実行ファイルを実行する"そのもの"を指します。プログラムを実行するスレッドが1つであればそれをシングルスレッドプログラムと呼び、プログラムを実行するスレッドが複数であればそれをマルチスレッドプログラムと呼びます。シングルスレッドプログラムはa.outを逐次実行し、マルチスレッドプログラムはa.outを並列・並行実行します。
次にリソースの観点では、スレッドはプログラムカウンタを始めとしたレジスタ群とスタックを個別に持ちます。スレッドは、プログラムを実行する主体の最小単位であるため、それぞれに個別のプログラムカウンタとスタックを持つ必要があります。一方で、命令コードと静的データ、ヒープは、スレッド間で共有されます。これら命令コード、静的データ、ヒープを所有する主体となるのが、プロセスです。
スレッドは、必ず1つのプロセスに属します。また、1つのスレッドが2つ以上のプロセスに属することはありません。プロセスというのは、実行される実行ファイルごとのメモリ上の区切りのようなものです。プロセスごとに、命令コード、静的データ、ヒープ、スタックをメモリ上に持ちます。実行ファイルa.outを2つ同時に実行すれば、2つのプロセスがコンピュータ上に同時に存在するということになります。もちろんこのとき、それぞれのプロセスにスレッドが存在します。

シングルスレッドプログラムとマルチスレッドプログラム

シングルスレッドプログラムとマルチスレッドプログラムの実装の違いを、簡単に見てみます。マルチスレッドプログラムで用いるスレッドライブラリは、openMPとpthreadを使いました。
以下、printfを10回実行するプログラムです。環境によっては、マルチスレッドプログラムのhelloがプリントされる順番が入れ替わったりするかと思います。

singleThread.c

#include <stdio.h>

int main(void)
{
 int i;
 
 for(i = 0; i < 10; i++)
 {
  printf("hello%d\n", i);
 }
 
 return 0;
}

multiThread_openMP.c

#include <stdio.h>
#include <omp.h>

int main(void)
{
 int i;
 
 #pragma omp parallel for
 for(i = 0; i < 10; i++)
 {
  printf("hello%d\n", i);
 }
 
 return 0;
}

multiThread_pthread.c

#include <stdio.h>
#include <pthread.h>

#define NUMOF_THREADS 10

void* printHello(void* arg)
{
 printf("hello%d\n", *(int*)arg);
}

int main(void)
{
 int i;
 pthread_t threads[NUMOF_THREADS];
 int threadArg[NUMOF_THREADS];
 
 for(i = 0; i < NUMOF_THREADS; i++)
 {
  threadArg[i] = i;
  pthread_create(&threads[i], NULL, printHello, (void*)&threadArg[i]);
 }
 
 for(i = 0; i < NUMOF_THREADS; i++)
 {
  pthread_join(threads[i], NULL);
 }
 
 return 0;
}

singleThread.cは、単にprintfをfor文で回しているだけなので、特に問題ないと思います。
multiThread_openMP.cは、singleThread.cとほぼ同じです。異なるのは、openMPのヘッダをインクルードしていることと、for文の前に#pragma omp paralle forの1行があることだけです。たったこれだけで、for文のなかのprintfが並列・並行実行されます。
multiThread_pthread.cは、openMPのものと同じ並列・並行実行であるのに対して、コード量が多くなっています。これは、pthreadでは、スレッドの作成と、終了待ちを関数呼び出しで明示的に行う必要があるためです。openMPの方では、ほぼスレッドなど意識せずただfor文を並列に実行する、とプログラムしているだけでした。
上記の例を一見すると、openMPの方が簡単にマルチスレッドプログラムを作ることができます。しかし、for文の並列化はopenMPが得意とするところなので、openMPの方がコード量を少なく記述できているだけです。
世にいくつかもあるスレッドライブラリですが、それぞれに得意なところ、不得意なところがあります。得意なところは、比較的コード量が少なくなり、不得意なところはコード量が多くなるのが一般的かと思います。また、各スレッドの同期等の細かな動作を細かく制御できるスレッドライブラリは、細かく制御できる分、コード量が多めになる傾向があります。pthreadは比較的何でもできるスレッドライブラリなので、並列化のためのコード量が多めになりがちです。

まとめ

スレッドの概念、スレッドとプロセスの関係を説明し、マルチスレッドプログラムの例を見ました。スレッドライブラリはいくつもあり、それぞれに得意・不得意なところを持っていることを述べました。マルチスレッドプログラムに関して、説明しなかったしなかったことは、なぜマルチスレッドにするのか？、何をマルチスレッド化するのか？、どのようにマルチスレッド化するのか？といったことになります。こういったことは、マルチスレッドに関する本が参考になります。また、現実に使われているマルチスレッドプログラムを探しだして読むことも参考になります。

気になる色を調べたい『色彩ヘルパー』

2012-08-26T09:30:00.000+09:00

目の前の素敵な色や、写真に含まれている色を調べたいとき、『色彩ヘルパー(Coler Helper)』が便利です。『色彩ヘルパー』は、iPhoneやiPadで利用できるアプリで、カメラで映した映像や、端末内に保存されている画像に含まれている色を識別してくれます。

カメラで撮影中の映像に含まれるカラーをリアルタイムで表示します。iOS端末内に保存されている写真のカラーも、読み込んで表示します。

色見本では、色のサンプルが一覧になっていて、色を参照するのにとても便利です。配色に悩んだ時、このアプリがあればとても心強いと思います。

App Store：色彩ヘルパー

CGRectContainsPointで特定の範囲がタッチされたかどうかを判別する

2012-08-18T09:30:00.000+09:00

CGRectContainsPointは、指定した領域に指定した位置が含まれるかどうかを判別するメソッドです。これを利用して、指定した範囲がタッチされたかどうかを判別するサンプルを書きました。

プログラム
タッチした時に呼ばれるtouchesBeganメソッドで、CGRectContainsPointを利用した分岐処理を記述しました。CGRectContainsPointの第一引数は領域、第二引数は位置を指定します。

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    CGRect targetRect = CGRectMake(0, 0, 44, 44);
    CGPoint location = [[touches anyObject] locationInView:self];
    if (CGRectContainsPoint(targetRect, location)) {
        NSLog(@"touched in targetRect");
    }
}

xやyといった位置や、widthやheightといった幅や高さで判別するような記述を行わなくて済むので、これで記述量が少なくなりそうです。

関連：iPhoneでのタッチやタップをtouchesBeganで検知する

Windows XPにスナップに似た機能を搭載する『WinSplit Revolution』

2012-08-08T09:33:00.000+09:00

Windows 7のスナップ機能はドラッグ操作で画面を整理するのに便利な機能です。慣れると手放せなくなる機能ですが、Windows XPにはその機能がありません。ただ、画面を整理するという点で、スナップに似た機能を実現するソフトウェアがありました。『WinSplit Revolution』といいます。

DL：http://winsplit-revolution.com/

インストールすると、タスクトレイにアプリが表示されます。アイコンをクリックすると上図のような画面が現れます。例えば左上にウィンドウを合わせたい時は、対象のウィンドウを選択して左上矢印のボタンをクリックします。

専ら便利なのは画面整理のショートカットを作成できる点です。例えば、[Win] + [Ctrl] + 上矢印キーでウィンドウを上部に合わせるといったことができます。ショートカットの設定は[Hotkey settings]からできます。

たくさん起動したTera Termを見やすく並べたり、WordやExcel等の内容比較をやりやすくするのに便利なツールです。

MacBookにスナップ機能を搭載する『BetterTouchTool』

2012-08-07T09:01:00.000+09:00

スナップ機能とは、Windows 7に搭載されている機能で、ウィンドウを画面の端にドラッグすると画面のサイズを自動で調整してくれる機能です。Mac OS Xにはその機能は無いのですが、『BetterTouchTool』を使うとそんなスナップ機能が実現できます。

DL：http://blog.boastr.net/

スナップ機能の設定は、『BetterTouchTool』起動→[Action Settings(Windows Snapping etc.)]選択→[Window Snapping]タブ選択→[Window Snapping Enabled]チェックでできます。この画面でスナップ機能の詳細な設定ができます。

また、『BetterTouchTool』を使うと、トラックパッドのタッチ位置に応じて任意のアプリを起動するように設定できるようです。極めると手放せなくなりそうなツールです。