tag:blogger.com,1999:blog-35427824817265141022024-03-14T16:10:48.956+09:00Smart Gadget LaboratoryiOS、Android、IT技術等のまとめブログ。小さくても大きな効果を発揮する知的ツールの調査、開発結果を報告しています。yasu_keihttp://www.blogger.com/profile/04253441709562141482noreply@blogger.comBlogger151125tag:blogger.com,1999:blog-3542782481726514102.post-89704385928885924332013-03-19T09:08:00.000+09:002013-03-19T09:08:00.164+09:00iOSアプリを実機で動かすまでの手順メモ試作したiOSアプリをiPod touch等の実機で動かすための手順をメモしました。cerファイルやプロビジョニングファイル等の作成/インストールやXCodeの設定等をメインにまとめています。「iOS Developer Program」への登録は<a href="http://smartgadgetlaboratory.blogspot.jp/2013/03/ios-developer-program-ios.html">iOSアプリの実機開発環境を整える 〜iOS Developer Programへの登録〜</a>にまとめています。<br />
<br />
<br />
参考書籍:<br />
<a href="http://www.amazon.co.jp/gp/product/4883378446/ref=as_li_tf_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4883378446&linkCode=as2&tag=sgl-22">iPhone/iPad/iPod touch プログラミングバイブル iOS 6/Xcode 4対応 (smart phone programming bible)</a><img alt="" border="0" height="1" src="http://www.assoc-amazon.jp/e/ir?t=sgl-22&l=as2&o=9&a=4883378446" style="border: none !important; margin: 0px !important;" width="1" />
<br />
<a href="http://www.amazon.co.jp/gp/product/4883378446/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=4883378446&linkCode=as2&tag=sgl-22"><img border="0" src="http://ws.assoc-amazon.jp/widgets/q?_encoding=UTF8&ASIN=4883378446&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=sgl-22" /></a><img alt="" border="0" height="1" src="http://www.assoc-amazon.jp/e/ir?t=sgl-22&l=as2&o=9&a=4883378446" style="border: none !important; margin: 0px !important;" width="1" />
<br />
<br />
<br />
<a name='more'></a><b><span style="color: #e06666; font-size: large;">実機実行に必要なファイル</span></b><br />
<b>・証明書署名要求ファイル(CertificateSigningRequest.certSigningRequest)</b><br />
cerファイルのダウロードに必要な証明書<br />
<br />
<b>・developer_identity.cer、AppleWWDRCA.CER</b><br />
Macでのビルドを許可するための証明書<br />
<br />
<b>・プロビジョニングファイル(*.mobileprovision)</b><br />
実機実行のためのMacとiOS端末とを紐付ける証明書<br />
<br />
<br />
<b><span style="color: #e06666; font-size: large;">手順概要</span></b><br />
(1) 証明書要求ファイルの作成<br />
(2) cerファイルのインストール<br />
(3) iOS端末の登録<br />
(4) アプリケーションIDの登録<br />
(5) プロビジョニングファイルの設定<br />
(6) iOS端末へのインストール<br />
<br />
<br />
<b><span style="color: #e06666; font-size: large;">(1) 証明書署名要求ファイルの生成</span></b><br />
1. Macのアプリケーション/ユーティリティ配下にあるキーチェーンアクセスを起動。<br />
<br />
2. メニューの[キーチェーンアクセス]→[環境設定]→[証明書]タブを選択し、次のように設定。<br />
オンライン証明書状況プロトコル(OCSP):切<br />
証明書失効リスト(CRL):切<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2ljbpyUpE-U5mCDJ53LYajgYnUc0kW88_6N8Yl10fbssHMSopowi5thJ2w-IQMoa9Odh5E88dw4EN5UEgc3ZNBgd0sIE4Ejxi5Mv7sPZfxRW3FhrFL9XUxvW7W6kANllFScIWs9JrG29/s1600/iOS_dev1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh2ljbpyUpE-U5mCDJ53LYajgYnUc0kW88_6N8Yl10fbssHMSopowi5thJ2w-IQMoa9Odh5E88dw4EN5UEgc3ZNBgd0sIE4Ejxi5Mv7sPZfxRW3FhrFL9XUxvW7W6kANllFScIWs9JrG29/s320/iOS_dev1.png" width="320" /></a></div>
<br />
3. メニューの[キーチェーンアクセス]→[証明書アシスタント]→[認証局に証明書を要求…]を選択すると証明書アシスタントが開くので、次のように設定して続けるをクリック。<br />
ユーザのメールアドレス:【登録に使用したメールアドレス】<br />
通称:【自分の名前】<br />
CAのメールアドレス:【空】<br />
要求の処理:ディスクに保存を選択<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNnscY0muyGyGHpJ5dBQ4V0IFNZbPi71Wsrnnb5TkT6FBf5hCja_5U-iq5PCs7BQgFGTzuYroVdIG8ZgxJhKMpoHONZPFkbiS3QjNBjEHQF2iDsSE-hJVoMuON5CbDre_vpCzwzQ7DFUoq/s1600/iOS_dev2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNnscY0muyGyGHpJ5dBQ4V0IFNZbPi71Wsrnnb5TkT6FBf5hCja_5U-iq5PCs7BQgFGTzuYroVdIG8ZgxJhKMpoHONZPFkbiS3QjNBjEHQF2iDsSE-hJVoMuON5CbDre_vpCzwzQ7DFUoq/s320/iOS_dev2.png" width="320" /></a></div>
保存場所が聞かれるので適当な場所を選択して[保存]をクリック→「証明書要求がディスク上に作成されました。」の文言を確認して[完了]ボタンをクリック→ディスクに証明書署名要求ファイル「CertificateSigningRequest.certSigningRequest」が作成されていることを確認。<br />
<br />
<br />
<b><span style="color: #e06666; font-size: large;">(2) cerファイルのインストール</span></b><br />
1. iOS Developerにログインし、[iOS Provisioning Portal]を開く。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7d19T44naR-rh57mHIP8-2WZGgfZLvPca9qKZyhQHo2IL7h8X0E6w9hZleQGcNbw019qmw45Lasc5fNgScPBc9v7YnAVQCORyhflC90zGopVduMLEPBPFxm-0D5AZDbYc_MYTtwv7YClg/s1600/iOS_dev3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7d19T44naR-rh57mHIP8-2WZGgfZLvPca9qKZyhQHo2IL7h8X0E6w9hZleQGcNbw019qmw45Lasc5fNgScPBc9v7YnAVQCORyhflC90zGopVduMLEPBPFxm-0D5AZDbYc_MYTtwv7YClg/s320/iOS_dev3.png" width="320" /></a></div>
<br />
2. 左側メニューの[Certificates]をクリック→[Development]を選択→[Request Certificate]をクリック→[Create iOS Development Certificate]が表示される。<br />
<br />
3. [ファイルを選択]をクリックし、「CertificateSigningRequest.certSigningRequest」を選択→[Submit]をクリック→[Current Development Certificates]が表示される→しばらく待った後、リロード→[Download]ボタンが現れるので、それをクリック→「ios_development.cer」がダウンロードされる。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEYsMmfuzxKVuwvULenNOK3DvEX1PD1hR_35k4xADmf_5_Bx5T7-bghZs-bmNjKkQdboIrkWhkufUKD1uUAbX2fGa0ZnSR88_ikIJ5Zm0BncxQddeuDioe_-xytAlv0ZkzoDyErcIV31Tv/s1600/iOS_dev4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEYsMmfuzxKVuwvULenNOK3DvEX1PD1hR_35k4xADmf_5_Bx5T7-bghZs-bmNjKkQdboIrkWhkufUKD1uUAbX2fGa0ZnSR88_ikIJ5Zm0BncxQddeuDioe_-xytAlv0ZkzoDyErcIV31Tv/s320/iOS_dev4.png" width="320" /></a></div>
<br />
4. [Current Development Certificates]の画面の[click here to download now.]をクリック→「AppleWWDRCA.cer」がダウンロードされる。<br />
<br />
5. 「ios_development.cer」をダブルクリック→[キーチェン:]に[ログイン]が選択されていることを確認して[追加]ボタンをクリック。<br />
<br />
6. 「AppleWWDRCA.cer」をダブルクリック→[キーチェン:]に[システム]が選択されていることを確認して[追加]ボタンをクリック。<br />
<br />
<br />
<b><span style="color: #e06666; font-size: large;">(3) iOS端末の登録</span></b><br />
1. iOS端末をMacに接続→XCodeを開き、右上の[Organizer]をクリック→接続しているiOS端末を表示し、そこのidentifierの値をコピーする。<br />
<br />
2. [iOS Provisioning Portal]を開き、[Devices]をクリック→[Manage]を選択し、[Add Devices]をクリック→[Device Name]に適当な名前、[Device ID]に1でコピーした値を入力し、[Submit]ボタンをクリック→[Current Registered Devices]に入力した端末が表示されていればOK。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg99G0DLcHMxLktLI8PHROcV5_P7FSqy86KgpJs0TT-iLMoEJhD_Wr0Tc1THLCQAqrqBgDw6muI233Z8nMXAybpA6sbcB-0dbz0i1RNyKT8NzLpuj20b2fOANg-xJqY8GiwHKcNbnQVYifl/s1600/iOS_dev5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg99G0DLcHMxLktLI8PHROcV5_P7FSqy86KgpJs0TT-iLMoEJhD_Wr0Tc1THLCQAqrqBgDw6muI233Z8nMXAybpA6sbcB-0dbz0i1RNyKT8NzLpuj20b2fOANg-xJqY8GiwHKcNbnQVYifl/s320/iOS_dev5.png" width="320" /></a></div>
<br />
<br />
<b><span style="color: #e06666; font-size: large;">(4) アプリケーションIDの登録</span></b><br />
1. [iOS Provisioning Portal]を開き、 [App IDs]をクリック→[Manage]を選択し、[New App ID]をクリック。<br />
<br />
2. [Description]、[Bundle Identifier]にそれぞれ適当なアプリケーション名、アプリケーションID(他の人の重複しないようなドメイン)を入力→[Submit]をクリック。(アプリケーションIDはドメイン名の逆+アプリ名が推奨されているようです。hoge.piyo.HelloWorldなど。)<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUoSU_lYoVm_oEiJNHvPUChmrR8tmle-Mqal6YmI62jPEZ-DH4GdofTFp-b8-jfBFKnpzSDeksANPoZ7LNYIsfESLCg1Jd3i5ytPLgwtfBXHUuk_8mraYAsCzsskfFaf_a7ZeZwP5GzV1/s1600/iOS_dev6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjUoSU_lYoVm_oEiJNHvPUChmrR8tmle-Mqal6YmI62jPEZ-DH4GdofTFp-b8-jfBFKnpzSDeksANPoZ7LNYIsfESLCg1Jd3i5ytPLgwtfBXHUuk_8mraYAsCzsskfFaf_a7ZeZwP5GzV1/s320/iOS_dev6.png" width="320" /></a></div>
<br />
<br />
<b><span style="color: #e06666; font-size: large;">(5) プロビジョニングファイルの設定</span></b><br />
1. [iOS Provisioning Portal]を開き、 [Provisioning]をクリック→[Development]を選択し、[New Profile]をクリック→[Create iOS Development Provisioning Profile]が表示される。<br />
<br />
2. 下記設定項目を入力して[Submit]をクリックします。<br />
Profile Name:プロビジョニングファイル名。適当な名前を入力。<br />
Certificates:自分のらしいのを選択。 <br />
App ID: 登録したアプリケーション名を選択。<br />
Devices:登録した端末名を選択。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDBmBEs9VBPxEypLYly03kpfiwDMnzkpfcq79Ux7YWmQ2OUPiBQIXN67pKSumVtEKSlPJ1cjIapcbgY447Y9ZvNs8uNfw0gXXv8hyphenhyphenGwhdTkkGKUyqUGtDDlr4yTgYV5sx6uGkGFAj-wr4Z/s1600/iOS_dev7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDBmBEs9VBPxEypLYly03kpfiwDMnzkpfcq79Ux7YWmQ2OUPiBQIXN67pKSumVtEKSlPJ1cjIapcbgY447Y9ZvNs8uNfw0gXXv8hyphenhyphenGwhdTkkGKUyqUGtDDlr4yTgYV5sx6uGkGFAj-wr4Z/s320/iOS_dev7.png" width="320" /></a></div>
<br />
3. [Development Provisioning Profiles]が表示されるので、しばらく待って後リロード→[Download]ボタンが現れるのでクリック→プロビジョニングファイル「【アプリケーション名】.mobileprovision」がダウンロードされる。<br />
<br />
4. プロビジョニングファイルをXcode 4のアイコンにドラッグ&ドロップ→[Organizer]の[Provisioning Profiles]に追加されたことを確認。<br />
<br />
5. XCodeの任意のプロジェクトを起動し、[TARGETS]より[Summary]を選択→[Bundle Identifier]に登録したアプリケーションIDを入力。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHSP80ej59SX79tAvC6HxxyoDz5-7gITO-T6rEuq1vnA_Yz_kWMrGmzUAjy5h34ypGO4XEG5p_t91K1hUNwcgfPuZHM6kM0gyPCHifVhp825huoy1aWwdGS2J4Ctk2v3YqZq4RdvFp4Ea/s1600/iOS_dev8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHSP80ej59SX79tAvC6HxxyoDz5-7gITO-T6rEuq1vnA_Yz_kWMrGmzUAjy5h34ypGO4XEG5p_t91K1hUNwcgfPuZHM6kM0gyPCHifVhp825huoy1aWwdGS2J4Ctk2v3YqZq4RdvFp4Ea/s320/iOS_dev8.png" width="320" /></a></div>
<br />
6. XCodeの[TARGETS]より[Build Settings]を選択→[Code Signing]:[Code Signing Identify]のDebug、Releaseそれぞれの[Any iOS SDK]にダウロードしたプロビジョニングファイルを設定。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIRedjNYgH_6msSi05RudmzhYVP9-Cq1LuwZS8eK-YATALhXWGbUVPl3bM7GbdEZQdmk_voP5UeTSmYqBrvfJgxc6HbnDhHLi0hEj0jFbWseTxlm8902gAM-PJKyHhdiLbZCmZ1G4_r1Mb/s1600/iOS_dev9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIRedjNYgH_6msSi05RudmzhYVP9-Cq1LuwZS8eK-YATALhXWGbUVPl3bM7GbdEZQdmk_voP5UeTSmYqBrvfJgxc6HbnDhHLi0hEj0jFbWseTxlm8902gAM-PJKyHhdiLbZCmZ1G4_r1Mb/s320/iOS_dev9.png" width="320" /></a></div>
<br />
<b><span style="color: #e06666; font-size: large;">(6) iOS端末へのインストール</span></b><br />
1. iOS端末をMacに接続した状態でOrganizerを起動し、接続端末を選択→[User for Development]ボタンを押下。<br />
<br />
2. iOS端末のアプリの設定→[一般]の[プロファイル]にアプリケーション名が表示されていることを確認。<br />
<br />
3. XCodeの[PROJECT]より[Info]を選択→[Configurations]のUseを[Debug]に設定。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiaO9dPVO_Ow-jOFnOQmNvOZFP17HW_ooQE2mfq6Xb6BHAMhlPbqu3u7F1BgrMoykkMsBRhnYAIc5aldhlMUd1PwHLH2VtXISEI5ZL36pp3r7budQ_1HKJHBnfGy5yCny8kfN-cesxjhr/s1600/iOS_dev10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiaO9dPVO_Ow-jOFnOQmNvOZFP17HW_ooQE2mfq6Xb6BHAMhlPbqu3u7F1BgrMoykkMsBRhnYAIc5aldhlMUd1PwHLH2VtXISEI5ZL36pp3r7budQ_1HKJHBnfGy5yCny8kfN-cesxjhr/s320/iOS_dev10.png" width="320" /></a></div>
<br />
4. スキーマに登録したiOS端末名を指定して[Run]を押下→アプリの起動ができたら完了です。yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com1tag:blogger.com,1999:blog-3542782481726514102.post-15385957691321008242013-03-18T09:03:00.000+09:002013-03-18T09:03:00.418+09:00「iOS Developer Program」への登録 〜iOSアプリを実機で動かすための準備〜試作したiOSアプリをiPhoneやiPad等の端末で動作させるためにはまず「iOS Developer Program」に登録する必要があります。登録のために実際にやったことを以下に記述します。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYAcrNt1YofglIKnVLc1qS2boX9iyosXIhNyBdTAHrRVvN4WZmkfOLxPT8LGnsbP3V9kbmQkUE-w8vDSjQ5MFXoXGr0NRUbW7BupesDuo64-J-avWCREnLDygMQcvyMSeMluqPvj5PsOh/s1600/iOS_Regist1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYAcrNt1YofglIKnVLc1qS2boX9iyosXIhNyBdTAHrRVvN4WZmkfOLxPT8LGnsbP3V9kbmQkUE-w8vDSjQ5MFXoXGr0NRUbW7BupesDuo64-J-avWCREnLDygMQcvyMSeMluqPvj5PsOh/s320/iOS_Regist1.png" width="320" /></a></div>
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">1日目</span></b><br />
1. 登録は下記サイトから行います。<br />
<a href="https://developer.apple.com/jp/programs/ios/">https://developer.apple.com/jp/programs/ios/</a><br />
<br />
[今すぐ登録]より登録フローを進めていきます。<br />
<br />
<br />
2. [今すぐ登録]→[続ける]と進むと「サインインするか、新しいApple IDを作成してください」の画面に進みます。Apple IDアカウントを日本語で登録していると面倒なことになるらしいので、開発用の英語アカウントを新規に作成します。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGntSsHu0QejHWPRHIrcdaiWerV-gcIPgnFx8Hn0PhLjwNLztWfZmN_PpBDOZA_LAZ6zk2MPygmgNhykEpcMVQ09hL5kHbMBrRkDW1RWsTxJ8PeCIVN4AubI_CeaxqlvCOphxlHZT71BuH/s1600/iOS_Regist2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGntSsHu0QejHWPRHIrcdaiWerV-gcIPgnFx8Hn0PhLjwNLztWfZmN_PpBDOZA_LAZ6zk2MPygmgNhykEpcMVQ09hL5kHbMBrRkDW1RWsTxJ8PeCIVN4AubI_CeaxqlvCOphxlHZT71BuH/s320/iOS_Regist2.png" width="320" /></a></div>
<br />
<br />
3. [Apple IDを作成]にチェック→[進む]→[Individual]と進むと「Complete your personal profile」画面に進みます。ここで個人情報を入力します。10分くらいでセッションが切れたので、それまでに入力を完了させないといけないようです。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCiLq3QtsCPK48GAdEB6C6yct_B8RfqKFAFP1jnSsXRS6pRgHkN-w99KKeNACd1iuYe942z6THENQL3HE4C8CeMLOH8IGZsUf7Ffghfp6cNQZQe_deX2sScu46UTF5r49dZXZzhI2eGTRG/s1600/iOS_Regist3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCiLq3QtsCPK48GAdEB6C6yct_B8RfqKFAFP1jnSsXRS6pRgHkN-w99KKeNACd1iuYe942z6THENQL3HE4C8CeMLOH8IGZsUf7Ffghfp6cNQZQe_deX2sScu46UTF5r49dZXZzhI2eGTRG/s320/iOS_Regist3.png" width="320" /></a></div>
<br />
<b>Create Apple ID:</b><br />
メールアドレスとパスワードを入力します。<br />
<br />
<b>Security Information:</b><br />
誕生日と秘密の質問を入力します。<br />
<br />
<b>Personal Information:</b><br />
名前、住所、電話番号を入力します。住所は英語で登録する必要があります。日本語で入力した住所を英語向けに変換する下記サイトを利用しました。<br />
http://judress.tsukuenoue.com/<br />
<br />
電話番号(Phone:)のCountry Codeは、日本の場合、81になります。その後、市外局番(先頭の0はなし、090→90)、電話番号と入力します。最後の空白は内線番号のようで、未入力でも大丈夫でした。<br />
<br />
<br />
4. [Continue]をクリックすると[Complete your professional profile]の画面に進みます。アンケートのようなので、任意の部分にチェックを入れて[Continue]をクリックします。[Registered Apple Developer Agreement]の画面(利用規約の同意チェック)が表示されるので、[By Checking this box I confirm that …]にチェックを入れて[I Agree]をクリックします。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW6u68T-I1PAZ-fQ8ywNr3GjDCd28saruILCIjJSFnfk9GDLxUnRQayt4j_09dlnOvgynNL5f2a6fLwwywLBLhAVegM2COGBprxWhLPLo9KTaM0T1tlWGKjk04eGosLH1quReIKUhbC3ks/s1600/iOS_Regist4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW6u68T-I1PAZ-fQ8ywNr3GjDCd28saruILCIjJSFnfk9GDLxUnRQayt4j_09dlnOvgynNL5f2a6fLwwywLBLhAVegM2COGBprxWhLPLo9KTaM0T1tlWGKjk04eGosLH1quReIKUhbC3ks/s320/iOS_Regist4.png" width="320" /></a></div>
<br />
<br />
5. 登録したメールアドレスにAppleより「Please verify your email address.」とうタイトルのメールが届きます。その中の「Verification Code」を表示されている画面に入力して次へ進むと[Enter your billing information for identity verification]の画面が表示されます(うろ覚えです。。)。この画面ではちゃんとした情報(クレジットカードの登録時に使用した名前と住所等)を入力して[Continue]をクリックします。[Select your program]画面に進みます。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTLvIXJCPZXtFv2_DARbLGZoEDsK0lixkyu-1GwXPnqAhEnOJKewZ0XV-j_pWIesARa2bJEAGxXmvPD0MRFjj-4aRCqZVmqgGChFPMBhb7oOvdg_s_Zmhlwy5FS2FJfcnS9YcmTVp3dfLI/s1600/iOS_Regist5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTLvIXJCPZXtFv2_DARbLGZoEDsK0lixkyu-1GwXPnqAhEnOJKewZ0XV-j_pWIesARa2bJEAGxXmvPD0MRFjj-4aRCqZVmqgGChFPMBhb7oOvdg_s_Zmhlwy5FS2FJfcnS9YcmTVp3dfLI/s320/iOS_Regist5.png" width="320" /></a></div>
<br />
<br />
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のオンライン購入画面へ進みます。あとは注文フローに従って購入します。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkq0-HLJnD3RPC-mF9-ZufEKGoMsJj-yHk-jRfaJqwFCUzPD3SX-b57yDfEH-bDGC8bu1L0a5eBv_Hw9XRxQqMm6RaO-gqhGVj674-KnkyQ3iMy7t8TH01Z6CA13o0KPdm0HpAdW_mDez/s1600/iOS_Regist6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkq0-HLJnD3RPC-mF9-ZufEKGoMsJj-yHk-jRfaJqwFCUzPD3SX-b57yDfEH-bDGC8bu1L0a5eBv_Hw9XRxQqMm6RaO-gqhGVj674-KnkyQ3iMy7t8TH01Z6CA13o0KPdm0HpAdW_mDez/s320/iOS_Regist6.png" width="320" /></a></div>
<br />
<br />
<b><span style="font-size: large;">2日目</span></b><br />
7. 「Apple Developer Program Activation Code」というタイトルのメールが届きました。<br />
Activation Codeのリンクをクリックし、ログインします。[Apple Developer Program Enrollment]画面が表示されました。泣きそうになりました。何かが失敗したっぽいので、[contact us]をクリック→[Program Enrollment]をクリック→[Contact US]画面を表示して必要な情報を入力します。<br />
<br />
入力内容は次のページを参考にしました。<br />
<a href="http://mushikago.com/i/?p=917">http://mushikago.com/i/?p=917</a><br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Igk4QMj17hmFWlsNQUXpb0KKNq0dwLT6C4ZPmhqc4f9eE7S1iH1MvaAFMcZIB2tMRXO3DK2wqFLv_RxEHZbw8NNpenIkHAa4dj2wmWu_Hy43wEIwYyvnxci6jYMPnE7PjzbITTXv06qf/s1600/iOS_Regist7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Igk4QMj17hmFWlsNQUXpb0KKNq0dwLT6C4ZPmhqc4f9eE7S1iH1MvaAFMcZIB2tMRXO3DK2wqFLv_RxEHZbw8NNpenIkHAa4dj2wmWu_Hy43wEIwYyvnxci6jYMPnE7PjzbITTXv06qf/s320/iOS_Regist7.png" width="320" /></a></div>
<br />
<br />
8. [Submit]をクリックして内容を送信→数分後に「Acknowledgement of your email/submission」というタイトルのメールが届きました。<br />
<br />
<br />
<b><span style="font-size: large;">3日目</span></b><br />
9. 「アクティベーションコードの有効化準備が整ったので、再度有効化を試してください」という旨のメールが届きました。7.のメールよりActivation Codeのリンクをクリックし、ログイン→[Activate your Program]の画面が表示される。きた。[Activate]をクリック→[Activation Complete]の画面が表示される。<br />
<br />
<br />
10. [Get Started]をクリック→[Dev Centers]のiOSをクリック→右サイドの上部メニューに[iOS Developer Program]が表示されていればOKっぽいです。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAIYpsfjXRz1VgrK2WyRrcYgzVH8_wo49k64T-qHJ5pKNaR9GS8iQ0R7uFWv5b_AyduDaA8HtQSca6vgJPPAvVf0AfcUSLNZAgU60qpZQNHSCf6T8IDvJBNeSxVJ55GmwzRQFN5hY1Sk2c/s1600/iOS_Regist8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAIYpsfjXRz1VgrK2WyRrcYgzVH8_wo49k64T-qHJ5pKNaR9GS8iQ0R7uFWv5b_AyduDaA8HtQSca6vgJPPAvVf0AfcUSLNZAgU60qpZQNHSCf6T8IDvJBNeSxVJ55GmwzRQFN5hY1Sk2c/s320/iOS_Regist8.png" width="320" /></a></div>
<br />
<div>
<br /></div>
yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-72270647492822187442013-03-04T09:05:00.000+09:002013-03-04T09:05:00.294+09:00PhoneGapのAPIを利用して、バックグラウンド動作への遷移周りで入力値の退避と復帰を行うスマホアプリ起動中にHomeボタンを押し、再度アプリを表示させたとしても、アプリの処理で使用している値は正しく保持しておきたいです。PhoneGapを利用して、アプリがバックグラウンド動作へと移行する前後で、入力値の退避と復帰を行うサンプルコードを実装しました。<br />
<br />
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">サンプルコード</span></b><br />
PhoneGap APIを参照すると、pause/resumeがそれぞれアプリがバックグラウンド動作になったタイミング/バックグラウンドから復帰したタイミングで呼ばれる関数のようです。それらが呼ばれたタイミングでStorage APIを利用して入力値をローカルストレージに退避します。<br />
<br />
<pre class="brush: js"><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>
</pre>
<br />
<br />
アプリ起動→Homeボタン→アプリ再表示と遷移しても値はちゃんと表示されました。アプリ起動→アプリ終了→アプリ再起動でも値は復帰されました。<br />
<br />
<div>
<br />
<b>関連:</b><br />
<a href="http://smartgadgetlaboratory.blogspot.jp/2013/02/phonegapstorage-api.html">PhoneGapのStorage APIを利用してアプリの起動回数をカウントする</a></div>
<br />yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-33163997339415035012013-03-01T09:02:00.000+09:002013-03-01T09:02:00.515+09:00重くなってきたiPhoneの動作を軽くする『もっさり解消』<br />
iPhoneやiPadなどのiOS製品を長時間使用していると、アプリの起動やタップしてからの反応が遅くなる(もっさりする)ことがあります。そんなもっさりした状態をワンタップで解消するアプリが『もっさり解消』です。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJZcG6qq25pNkej0kWCW65ViHlY_59OmtsQwoq591PQfymRNIHJ7w3q2idojHb6QUZq9rkLgwLb0JyM6o_uieJfOwO_udOSo8UE5QlVGZGYXg2IUMNgSHJq3XRReCB_newj7sewwB8uPV/s1600/Mossari1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJZcG6qq25pNkej0kWCW65ViHlY_59OmtsQwoq591PQfymRNIHJ7w3q2idojHb6QUZq9rkLgwLb0JyM6o_uieJfOwO_udOSo8UE5QlVGZGYXg2IUMNgSHJq3XRReCB_newj7sewwB8uPV/s320/Mossari1.PNG" width="213" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtZzmu9QGjLxfw2MYIw2ZBXcv9os-_1tf3gBqoUElgzU7uk8YD4VBqU1CdU1PwMWdaHjKK19D1Fl7pvrJaugxRxOYWVS19rW_5uD6CJXX1Y9Pb8g4fV7cRNyIuBn_eliur06m-kylgvxk/s1600/Mossari2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtZzmu9QGjLxfw2MYIw2ZBXcv9os-_1tf3gBqoUElgzU7uk8YD4VBqU1CdU1PwMWdaHjKK19D1Fl7pvrJaugxRxOYWVS19rW_5uD6CJXX1Y9Pb8g4fV7cRNyIuBn_eliur06m-kylgvxk/s320/Mossari2.PNG" width="213" /></a></div>
<br />
AppStore:<a href="https://itunes.apple.com/jp/app/mossari-jie-xiao-for-iphone/id534968145?mt=8">もっさり解消 for iPhone</a><br />
<br />
<br />
<a name='more'></a><br />
もっさり解消のやり方は簡単で、起動して「もっさり解消しとく」のボタンタップするだけです。タップするとメモリ解放などの処理が行われます。右上に最近メモリを使用したアプリの一覧が表示されているので、もっさり感の要因となっているアプリの推定もできます。<br />
<br />
<br />
また、タブバーには小ワザ集というのもあります。マルチタスクバーからアプリを停止させる、Spotlight検索をOFFにする、などのもっさり解消技が載っていて役に立ちます。<br />
<br />
<br />
関連:<br />
<a href="http://smartgadgetlaboratory.blogspot.jp/2012/01/android.html">Androidアプリの動作が重いと感じたら『メモリブースター』</a><br />
<br />
<br />
yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-53201633138249030492013-02-25T08:31:00.000+09:002013-02-25T08:31:00.218+09:00PhoneGapのStorage APIを利用してアプリの起動回数をカウントするPhoneGapのStorage APIを利用するとアプリのローカルストレージに簡単な情報を書き込んだり読み込んだりできます。Objective-CでのNSUserDefaults、Androidでのプリファレンスみたいな機能です。このStorage APIを利用してアプリの起動回数をカウントするサンプルを書きました。<br />
<br />
<br />
<b>関連:</b><br />
<a href="http://smartgadgetlaboratory.blogspot.jp/2012/09/nsuserdefaults.html">NSUserDefaultsを利用してアプリの起動回数をカウントする</a><br />
<a href="http://smartgadgetlaboratory.blogspot.jp/2011/06/sharedpreferences.html">SharedPreferencesを利用してアプリの起動回数をカウントする</a><br />
<br />
<br />
<a name='more'></a><b><span style="font-size: large;">Storage API</span></b><br />
<br />
情報はキーとアイテムのセットで保存します。<br />
<pre class="brush: js">window.localStorage.setItem("key", "value");
</pre>
<br />
キーを指定してアイテムを読み込みます。<br />
<pre class="brush: js">var value = window.localStorage.getItem("key");
</pre>
<br />
キーで指定されたアイテムを削除します。<br />
<pre class="brush: js">window.localStorage.removeItem("key");
</pre>
<br />
clearを呼び出すと、全ての情報が削除されます。<br />
<pre class="brush: js">window.localStorage.clear();</pre>
<br />
<br />
<b><span style="font-size: large;">ソースコード</span></b><br />
getItemでcountの情報を取得し、その情報を表示した後、countをインクリメントしてsetItemで保存します。getItemで取得されるアイテムがない場合はnullが返るため、その場合は初回起動とみなします。<br />
<br />
<pre class="brush: js"><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>
</pre>
<br />
<br />
実行するとちゃんとカウントアップされました。<br />
<div>
<br /></div>
yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-91828705564286451422013-02-18T09:04:00.000+09:002013-02-18T09:04:00.637+09:00jQuery Mobile Dateboxを利用して日付入力を簡単にする<br />
jQuery Mobile Dateboxは日付入力を支援するjQuery Mobileのプラグインです。date型に対応していないブラウザでの入力に便利です。日付入力方式はいろいろあるのですが、今回はカレンダー式の入力(CalBox)を試してみました。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqaTBnKHcAftk3olJwOH3vhISjAPLlpdueTRzAUKsI2Scy7sROUrHXpfVYN6wena1JM_AXBzCJRln9-Q3dgYvvwjw6J9rMAFFJXVzudGEwIdHepSYFaGy_MldoX9-fBdiFoPkeWssOnh05/s1600/Datebox1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqaTBnKHcAftk3olJwOH3vhISjAPLlpdueTRzAUKsI2Scy7sROUrHXpfVYN6wena1JM_AXBzCJRln9-Q3dgYvvwjw6J9rMAFFJXVzudGEwIdHepSYFaGy_MldoX9-fBdiFoPkeWssOnh05/s320/Datebox1.png" width="170" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWx2Vsi5KoCOA7_hypvzkM3T91PRZ52x1sYQJMeY4hO79RC6a_ANxoiFVT3sgUOPYhIF1jF9_wkpOuIn2DqrdYgzL68EMZ5uX9ct0l85dBqOq5VZ3hlC8_d6lQxDPsyvmstGkorUQuRq5W/s1600/Datebox2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWx2Vsi5KoCOA7_hypvzkM3T91PRZ52x1sYQJMeY4hO79RC6a_ANxoiFVT3sgUOPYhIF1jF9_wkpOuIn2DqrdYgzL68EMZ5uX9ct0l85dBqOq5VZ3hlC8_d6lQxDPsyvmstGkorUQuRq5W/s320/Datebox2.png" width="170" /></a></div>
<br />
<a name='more'></a><b><span style="font-size: large;">準備</span></b><br />
下記サイトにアクセスします。<br />
http://dev.jtsage.com/jQM-DateBox2/demos/install.html<br />
<br />
[Download Links - Current Version]より次のファイルをダウンロードして適当な場所に配置します。<br />
・jqm-datebox.min.css<br />
・jqm-datebox.core.min.js<br />
・jqm-datebox.mode.calbox.min.js<br />
<br />
<br />
<b><span style="font-size: large;">ソースコード</span></b><br />
準備したファイルをインポートして、inputのdata-role属性に"date-box"、data-options属性に日付のフォーマット等を指定することで利用できるようになります。下記では入力後に表示される日付の形式をYYYY/MM/DDとしています。<br />
<br />
<br />
<pre class="brush: 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="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>
</pre>
<br />
<br />
実行すると、上述のように、フォームの右端にカレンダーっぽいアイコンが現れます。これをタップするとカレンダーが現れて日付が入力できるようになりました。<br />
<div>
<br /></div>
yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com1tag:blogger.com,1999:blog-3542782481726514102.post-76860436489511961192013-02-04T09:04:00.000+09:002013-02-04T09:04:00.385+09:00jQuery Validationを利用して入力値をチェックするjQuery Validationは入力値チェックが簡単に行えるHTML5とjQueryのフレームワークです。このプラグインを利用して数値やメールアドレス、日付等の入力値チェックを行ってみました。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFFQPCj1kwDsx-TsO-BeowSKxkrgXVD0IKvoe0cyMhIV-w1Z7nBcWj4XvTZCtOZ0OZuXp1tREume4Je6wXnhZpgxF1BhkkQxUUQHJdCIyOxs7kiUpT52KGs3pTvvJO_WAk5Zye3c8mdUci/s1600/jqueryValidation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFFQPCj1kwDsx-TsO-BeowSKxkrgXVD0IKvoe0cyMhIV-w1Z7nBcWj4XvTZCtOZ0OZuXp1tREume4Je6wXnhZpgxF1BhkkQxUUQHJdCIyOxs7kiUpT52KGs3pTvvJO_WAk5Zye3c8mdUci/s320/jqueryValidation.png" width="170" /></a></div>
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">準備</span></b><br />
下記サイトの”Downlords”より、jquery-validation-1.10.0.zipをダウンロードします。<br />
URL:http://bassistance.de/jquery-plugins/jquery-plugin-validation/<br />
<br />
解凍するとdistフォルダの配下に"jquery.validate.min"が含まれているので、このファイルを適当なフォルダに配置します。<br />
<br />
<br />
<b><span style="font-size: large;">ソースコード</span></b><br />
inputのクラス名にチェックしたい要素を指定し、イベント定義でバリデーション実行を行います。チェックが成功したときにコールバックされる関数をsubmitHandlerに定義します。<br />
<br />
サンプルとして数値チェックのコードを次のように書きました。数値入力のtype属性をtextにしています。実行すると文字列を入力したときにちゃんと怒られました。<br />
<br />
<pre class="brush: js"><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>
</pre>
<br />
<br />
また、必須チェックを行うにはrequiredを指定します。<br />
<pre class="brush: js"><input type="number" class="required number">
</pre>
<br />
<br />
3文字以上、10文字以下といった文字列長の指定は次のように行います。<br />
<pre class="brush: js"><input type="number" class="number" minlength="3" maxlength="10">
</pre>
<br />
<br />
その他にも次の項目がチェックできます。<br />
<br />
<b>メールアドレス:</b><br />
<pre class="brush: js"><input type="email" class="email">
</pre>
<br />
<b>URL:</b><br />
<pre class="brush: js"><input type="url" class="url">
</pre>
<br />
<b>日付:</b><br />
<pre class="brush: js"><input type="date" class="date">
</pre>
<br />
<br />
入力文字を解析して整合性を検証する手間が省略できていいですね。<br />
<div>
<br /></div>
yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-17142020853984030832013-02-01T09:01:00.000+09:002013-02-01T09:01:00.339+09:00手書きの数式から自動で答えが導かれる『MyScript Calculator』<br />
『MyScript Calculator』は、手で書いた数式を認識して、その数式の解答を自動で表示するスマホアプリです。分数やルートといった数式だけでなく、対数、sinやcosといった三角関数なども利用できます。<br />
<br />
<br />
例えば、こんな感じでルート2分の1を入力すると、<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHfNvU77-uvJbeGOITcf1sVRst214lZbxdXFfFcuBcSHcpU8moyhGy0fDNSxaeYkhgUuaiP560nqjZ_R4PuWYc1IOvVCi2Konpvv_Q96Rg9um9xFfjCQ9lbmpZNcxgjNDCyqWAsTUmhZJL/s1600/MyScriptCalculator1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHfNvU77-uvJbeGOITcf1sVRst214lZbxdXFfFcuBcSHcpU8moyhGy0fDNSxaeYkhgUuaiP560nqjZ_R4PuWYc1IOvVCi2Konpvv_Q96Rg9um9xFfjCQ9lbmpZNcxgjNDCyqWAsTUmhZJL/s320/MyScriptCalculator1.PNG" width="213" /></a></div>
<br />
<br />
数式を自動で変換して解を表示してくれます。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0q0DW8FMmRUrd-Tei1WpEnbGL9RILddcOcDQE3QgGkegmThSKuDly7Fc5-p135cII6ekQHWRB64wa0KsNuRfJIQOQC38qztp1Zvg-TJipMjzK-suNoPNH5f1KUOhFbtxy8GCSyv6sETaV/s1600/MyScriptCalculator2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0q0DW8FMmRUrd-Tei1WpEnbGL9RILddcOcDQE3QgGkegmThSKuDly7Fc5-p135cII6ekQHWRB64wa0KsNuRfJIQOQC38qztp1Zvg-TJipMjzK-suNoPNH5f1KUOhFbtxy8GCSyv6sETaV/s320/MyScriptCalculator2.PNG" width="213" /></a></div>
<br />
<br />
これは本当すごい!ちょっとした複雑な計算を行いたいときにすごく便利なアプリだと思います。<br />
<br />
<br />
Google Play:<a href="https://play.google.com/store/apps/details?id=com.visionobjects.calculator">MyScript Calculator</a><br />
App Store : <a href="https://itunes.apple.com/jp/app/myscript-calculator/id578979413?mt=8">MyScript Calculator</a><br />
<br />
<div>
<br /></div>
yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-36685743690058016992013-01-28T09:03:00.000+09:002013-01-28T09:03:00.541+09:00フリップスイッチの値によってページ遷移先を分岐させるjQuery Mobileでアンカータグをクリックしたとき、条件によってページ遷移先を分岐させる処理を模索していました。vclickイベントで検知して、$.mobile.changePageで遷移させる方法が良さそうです。というわけで、フリップスイッチの値がOFFならばOFF画面へ、ONならばON画面へ遷移する処理を実装しました。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsEamfEOPAFrxQA5tIq3HPejJCjWYrAczYVT3nRB3lK8j4_x5zeNyFpvaRiZ2xogB9ZJySTngU5UPGDZr3uNva9ZEb4fUBGa95-d3Y8p7lXtPHlzvuPedR480GlUS2DSQjzHdctgFaweC1/s1600/FlipSwitch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsEamfEOPAFrxQA5tIq3HPejJCjWYrAczYVT3nRB3lK8j4_x5zeNyFpvaRiZ2xogB9ZJySTngU5UPGDZr3uNva9ZEb4fUBGa95-d3Y8p7lXtPHlzvuPedR480GlUS2DSQjzHdctgFaweC1/s320/FlipSwitch.png" width="170" /></a></div>
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">ソースコード</span></b><br />
jQuery1.7以降では、イベント処理の定義は次のような書式で書くことができるようです。(jQuery1.6以前のbind、live、delegateにそれぞれ対応します)<br />
<br />
<pre class="brush: js">$(セレクタ).on(イベント名, ハンドラ);
$(document).on(イベント名, セレクタ, ハンドラ);
$(セレクタ).on(イベント名, 子セレクタ, ハンドラ);
</pre>
<br />
クリックしたときのイベントは"click"や"vclick"などが利用できるようですが、"vclick"は"click"よりもレスポンスが早いといった特徴があるようです。<br />
<br />
ページ遷移は$.mobile.changePageで行えます。オプションにページの切替効果や送信データ等を指定できるようです。<br />
<br />
<br />
<pre class="brush: js"><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>
</pre>
<br />
これでNEXT PAGEボタンをクリックしたとき、フリップスイッチの状態によって画面遷移先を切り替えることができました。<br />
<br />
<br />yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-89308448651250399182013-01-15T09:01:00.000+09:002013-01-15T09:01:00.299+09:00jqPlotとPhoneGapでアプリに折れ線グラフを描画するjqPlotは折れ線グラフや円グラフ等が描画できるJavaScriptのライブラリです。このjqPlotとPhoneGapを利用して、アプリに簡単な折れ線グラフを描画してみました。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxndcVsES6wqwoFj75Ywcft6zHUJgwzwu1o8ybpnzp2A_uz2gBi0sFYKOwNKUa0S4J_3yn7xP76Nj74jYXle_Kjnq7agbr4mYp4tCRi4Y0ar1w90-3tRwe7L5NZzAFqi7L_Et_54Q-8ay8/s1600/jqPlot1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxndcVsES6wqwoFj75Ywcft6zHUJgwzwu1o8ybpnzp2A_uz2gBi0sFYKOwNKUa0S4J_3yn7xP76Nj74jYXle_Kjnq7agbr4mYp4tCRi4Y0ar1w90-3tRwe7L5NZzAFqi7L_Et_54Q-8ay8/s320/jqPlot1.png" width="170" /></a></div>
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">事前準備</span></b><br />
<a href="http://www.jqplot.com/">http://www.jqplot.com/</a>にアクセスし、jquery.jqplot.1.0.4r1121.zipをダウンロードします。解凍すると次のファイルやフォルダがあるので、適当な箇所に配置します。<br />
・jquery.jqplot.min.js<br />
・jquery.jqplot.min.css<br />
・pluginsフォルダ<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLicdVw9xHt3y8WgmGnrliy6mWnlttoP38y8RfAcrKvhrq9Pkzfbaee_sXmJgTT0zsHtovfgkqISmXEdLCZSKtAYtiIOKR2g9yaOT68COdpIsrBJaPpdChOBFDx0oIiRvHewEMsL9WMLtY/s1600/jqPlot2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLicdVw9xHt3y8WgmGnrliy6mWnlttoP38y8RfAcrKvhrq9Pkzfbaee_sXmJgTT0zsHtovfgkqISmXEdLCZSKtAYtiIOKR2g9yaOT68COdpIsrBJaPpdChOBFDx0oIiRvHewEMsL9WMLtY/s1600/jqPlot2.png" /></a></div>
<br />
<br />
<b><span style="font-size: large;">ソースコード</span></b><br />
jquery.jqplot.min.jsとjquery.jqplot.min.cssをインポートしてグラフを描画します。(pluginsフォルダ配下のライブラリは必要なときに利用)。PhoneGapではデバイス準備が完了した後に描画処理を行います。グラフは$.jqplotに要素id、データ、オプションを指定することで描画されます。<br />
<br />
<pre class="brush: js"><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>
</pre>
<br />
実行すると上手のような折れ線グラフが描画されました。yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-21207662209741188432013-01-12T19:20:00.002+09:002013-01-12T19:20:42.508+09:00jQuery Mobileを利用したボタンにアイコンが表示されない問題を解決する<div class="separator" style="clear: both; text-align: left;">
jQuery Mobileを利用するとボタンにアイコンを簡単に表示させることができますbutton要素の中に”data-icon”属性を追加することでアイコン付きボタンを表示させることができるのですが、そのアイコンが表示されない問題に遭遇しました。</div>
<br />
<pre class="brush: html"><button data-icon="add">追加</button>
</pre>
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQWeSTKfYBZYJodNAd-aD29AJfRVyaviTwLq5rZPfxdDDSErjNDAVbB3DhkV_2ipn9Og7TDDKo48XUldpR6rE0iiyelOoAgOb-JBFwxM45miwdvmguPW7Pj4rBCeZ8aXePcM3ohPEq7tcC/s1600/jQueryMobileNoIcon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQWeSTKfYBZYJodNAd-aD29AJfRVyaviTwLq5rZPfxdDDSErjNDAVbB3DhkV_2ipn9Og7TDDKo48XUldpR6rE0iiyelOoAgOb-JBFwxM45miwdvmguPW7Pj4rBCeZ8aXePcM3ohPEq7tcC/s320/jQueryMobileNoIcon.png" width="170" /></a></div>
<br />
<a name='more'></a><br />
原因はjquery.mobile-1.2.0.min.cssを配置したフォルダに、jQuery Mobileのライブラリに含まれているimagesフォルダを配置していなかったためでした。このフォルダを適切に配置することで問題は解決できました。<br />
<br />
<br />
<b><span style="font-size: large;">ファイル配置</span></b><br />
<a href="http://smartgadgetlaboratory.blogspot.jp/2012/12/phonegapjquery-mobile.html">PhoneGapとjQuery Mobileを使ったネイティブアプリ開発</a>でのファイルの配置はよくよく調べてみるとイケてないことに気づいたので、次のように修正しました。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Vl1zKelFbK5BR6TwFkE0_TwqTk7eUfAdOYhpVi_RKzkuYcYPCXbf1FTBgHWNctS7gXZ7BQLv74L8c7JuY8mxehiGtUPpHulSpAgz2_jtXBbfplsRkWtzW5HBHtYkVQdjniuTg3RbOZTJ/s1600/FileLocation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Vl1zKelFbK5BR6TwFkE0_TwqTk7eUfAdOYhpVi_RKzkuYcYPCXbf1FTBgHWNctS7gXZ7BQLv74L8c7JuY8mxehiGtUPpHulSpAgz2_jtXBbfplsRkWtzW5HBHtYkVQdjniuTg3RbOZTJ/s1600/FileLocation.png" /></a></div>
<br />
ライブラリを適切にインポートして実行すると正しくアイコンは表示されました。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUj6od1d3tJ0_K57hlD58kZBKTdC2yjmNGkDo6s2_9S7K3CjH467Qa8UqvqqFmZd9gNziqR7AXw7qKwft8fSmr1b6BYBg_WMX5rLVGMqfqCg_O3QxYOxzfDMaFztM15JRn_SXKJUhx6_co/s1600/jQueryMobileIcon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUj6od1d3tJ0_K57hlD58kZBKTdC2yjmNGkDo6s2_9S7K3CjH467Qa8UqvqqFmZd9gNziqR7AXw7qKwft8fSmr1b6BYBg_WMX5rLVGMqfqCg_O3QxYOxzfDMaFztM15JRn_SXKJUhx6_co/s320/jQueryMobileIcon.png" width="170" /></a></div>
<br />yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-49817870494842412502012-12-17T08:32:00.000+09:002012-12-17T08:32:00.760+09:00PhoneGapのAPIを利用してDatabaseを簡単に操作するPhoneGapのAPIを利用するとDatabaseを簡単に操作できるようです。そのAPIを利用して、「Hello World!」の文字を格納したテーブルを作成し、そのテーブルから「Hello World!」を取得して画面に表示するプログラムを作成しました。<br />
<br />
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">サンプルコード</span></b><br />
index.htmlを次のような流れでコーディングしました。<br />
<br />
1. デバイス準備完了を待つ。<br />
2. デバイス準備の完了後、HELLOテーブルを作成し、「Hello World!」の文字を挿入。<br />
3. 「Hello World!」の文字を検索し、画面に表示。<br />
<br />
<pre class="brush: js"><!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>
</pre>
<br />
サンプルはPhoneGapのAPIリファレンスを参照して作成しました。
<a href="http://docs.phonegap.com/en/2.2.0/cordova_storage_storage.md.html">http://docs.phonegap.com/en/2.2.0/cordova_storage_storage.md.html</a><br />
<br />
<br />
<b><span style="font-size: large;">実行結果</span></b><br />
iPhone SimulatorのiOS6.0で実行した場合、DBは"0000000000000001.db"という名前で下記パスに作成されていました。<br />
<br />
{ホーム}/Library/Application Support/iPhone Simulator/6.0/Applications/{アプリケーションID}/Library/WebKit/LocalStorage/file__0<br />
<br />
SQLiteBroweser等のDBを参照するツールで見ると、HELLOテーブルに"hello"と"Hello World"のレコードが追加されてました。こんな簡単にDB操作ができるとは。。<br />
<br />
関連:<a href="http://smartgadgetlaboratory.blogspot.jp/2012/12/phonegapjquery-mobile.html">PhoneGapとjQuery Mobileを使ったネイティブアプリ開発</a>yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-62125714410966432832012-12-15T20:30:00.000+09:002012-12-15T20:30:02.035+09:00PhoneGapとjQuery Mobileを使ったネイティブアプリ開発iOSやAndroidのネイティブアプリをjQuery Mobileで作りたい。PhoneGapというフレームワークを使えばそれが可能なようなので、さっそくPhoneGapとjQuery MobileでHello World!の表示まで試してみました。<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQ-NiPc1ET5S6tR1JEiUIpx90Yon2nLFk7bO1ih_uCHvFJ2MOreRzw5idGODX4IUDUCbBZwVsterie-sboH16NghZIbMBGRUoSUDsGnpJKPnhi9lLR4Hqd6XViMNIUSWiOpH9800Ict9M/s1600/HelloWorldIOS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwQ-NiPc1ET5S6tR1JEiUIpx90Yon2nLFk7bO1ih_uCHvFJ2MOreRzw5idGODX4IUDUCbBZwVsterie-sboH16NghZIbMBGRUoSUDsGnpJKPnhi9lLR4Hqd6XViMNIUSWiOpH9800Ict9M/s320/HelloWorldIOS.png" width="170" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFepFQXIJ-uzIuFJVqZfPt8u8gO5pzzNOQHruCjxd2FzkGYD-RLQEQCv9PSYf7FEkkUYiIsy9DhRSj4c49uh6RluRCJmZv7fWk8FKPtMoeeFGzxxQbN8fVhjYAViu8W1d9GUNu4i-8llMu/s1600/HelloWorldAndroid.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFepFQXIJ-uzIuFJVqZfPt8u8gO5pzzNOQHruCjxd2FzkGYD-RLQEQCv9PSYf7FEkkUYiIsy9DhRSj4c49uh6RluRCJmZv7fWk8FKPtMoeeFGzxxQbN8fVhjYAViu8W1d9GUNu4i-8llMu/s320/HelloWorldAndroid.png" width="259" /></a><br />
<br />
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">PhoneGapの準備</span></b><br />
以下にまとめています。<br />
<a href="http://smartgadgetlaboratory.blogspot.jp/2012/12/phonegapiosxcode.html">PhoneGapによるiOSアプリ開発環境を構築する(Xcode編)</a><br />
<a href="http://smartgadgetlaboratory.blogspot.jp/2012/12/phonegapandroideclipse.html">PhoneGapによるAndroidアプリ開発環境を構築する(Eclipse編)</a><br />
<br />
<br />
<b><span style="font-size: large;">jQuery Mobileの準備</span></b><br />
jQuery Mobileを利用するためには次の3つが必要っぽいので、本家からダウンロードします。<br />
・jquery-1.8.2.min.js (jQuery本体)<br />
・jquery.mobile-1.2.0.min.css (jQuery Mobileのスタイルシート)<br />
・jquery.mobile-1.2.0.min.js (jQuery Mobile本体)<br />
<br />
ダウロードは次のサイトからできます。<br />
<a href="http://jquery.com/download/">http://jquery.com/download/</a> (jQuery本体)<br />
<a href="http://jquerymobile.com/download/">http://jquerymobile.com/download/</a> (jQuery Mobileのスタイルシートと本体)<br />
<br />
<br />
<b><span style="font-size: large;">ファイルの配置</span></b><br />
次のディレクトリを作って、準備した3つのファイルを配置しました。<br />
www/spec/lib/jquery.mobile-1.2.0<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_r8slOMRHmAAfNEv-4PvYb_ivnA8QGUM3mznr_FbnKPsKUAYNtY91Zix3Y3rbQjKzrSSApo10ZYkFEQHn-PqvF9L_jpgvDb1qT_eP6eqUeT-BGFd0npxL_wbsklTqx2TtXYgj7cAioaF/s1600/jQueryMobileDirectory.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_r8slOMRHmAAfNEv-4PvYb_ivnA8QGUM3mznr_FbnKPsKUAYNtY91Zix3Y3rbQjKzrSSApo10ZYkFEQHn-PqvF9L_jpgvDb1qT_eP6eqUeT-BGFd0npxL_wbsklTqx2TtXYgj7cAioaF/s1600/jQueryMobileDirectory.png" /></a></div>
<br />
<br />
<b><span style="font-size: large;">ソースコード</span></b><br />
www配下のindex.htmlを次のように変更します。<br />
<br />
<pre class="brush: 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>
</pre>
<br />
iPhoneとAndroid端末のシミュレータで実行すると上図のようになりました。yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-59936450711144108712012-12-12T23:17:00.000+09:002012-12-12T23:19:00.288+09:00PhoneGapによるAndroidアプリ開発環境を構築する(Eclipse編)MacにAndroidアプリの開発環境をインストールしてPhoneGapが利用できる環境を構築しました。<a href="http://smartgadgetlaboratory.blogspot.jp/2012/12/phonegapiosxcode.html">PhoneGapによるiOSアプリ開発環境を構築する(Xcode編)</a>の続きです。<br />
<br />
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">Android開発環境のインストール</span></b><br />
下記サイトにアクセスし、「Download the SDK ADT Bundle for MAC」から「adt-bundle-mac-x86_64.zip」をダウンロードして任意の場所に解凍します。<br />
<a href="http://developer.android.com/intl/ja/sdk/index.html">http://developer.android.com/intl/ja/sdk/index.html</a><br />
<br />
解凍したディレクトリのeclipse/Eclipse.appを起動します。<br />
<br />
<br />
<b><span style="font-size: large;">PhoneGapのプロジェクト作成</span></b><br />
Terminal.appを起動し、ホームディレクトリで次のコマンドをタイプして.bash_profileに環境変数を追加します。<br />
<br />
<pre class="brush: xml">touch ~/.bash_profile; open ~/.bash_profile
</pre>
<br />
ファイルの中身は「adt-bundle-mac-x86_64.zip」を解凍したフォルダのplatform-toolsとtoolsまでのパスを記載します。/Applications直下に解凍したなら次のように記述します。<br />
<br />
<pre class="brush: xml">export PATH=${PATH}:/Applications/adt-bundle-mac/sdk/platform-tools:/Applications/adt-bundle-mac/sdk/tools
</pre>
<br />
記載したらファイルを保存し、次のコマンドで再読み込みさせます。<br />
<br />
<pre class="brush: xml">source ~/.bash_profile
</pre>
<br />
PhoneGapを解凍したディレクトリ配下のlib/android/binに移動した後、次のコマンドを入力します。<br />
<br />
<pre class="brush: xml">./create <project_folder_path> <package_name> <project_name></pre>
<br />
iOS版(Xcode編)ではHelloWorld2を作成したので、Android版(Eclipse編)ではHelloWorld3というプロジェクト名を作りました。<br />
<br />
<pre class="brush: xml">./create ~/work/HelloWorld3 org.apache.HelloWorld3 HelloWorld3
</pre>
<br />
次にEclipseで[File]→[New]→[Other Project]→[Android]の[Android Project from Existing Code]を選択し、[Next]をクリック。<br />
[Import Projects]ウィンドウが開くので、[Root Directory]にproject_folder_pathを入力し、[Finish]をクリック。<br />
Eclipseメニューの[Window]→[Android Device Virtual Manager]より適当なAVDを作成し、Runすると次のような画面が表示されました。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE_NT9RmQoWpeIDUHbuz0ChnttVaLUGDimYOeCKv5Yf_kPpkBozV8jzhiBzl7lpawrRBLnorHsvxVIYHlnmrnj_Q3rcsithUJTOAWS4DQZMAe3YF9GQRq0fV1nSraXrEVZyulRdyVgJEdH/s1600/PhoneGapAndroid.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE_NT9RmQoWpeIDUHbuz0ChnttVaLUGDimYOeCKv5Yf_kPpkBozV8jzhiBzl7lpawrRBLnorHsvxVIYHlnmrnj_Q3rcsithUJTOAWS4DQZMAe3YF9GQRq0fV1nSraXrEVZyulRdyVgJEdH/s320/PhoneGapAndroid.png" width="259" /></a></div>
<br />
wwwディレクトリはプロジェクト直下のassets配下にあります。AndroidのwwwとiOSのそれとを共有すれば、両OSのアプリが一度に作れる気配です。なんとすごい!<br />
<br />
共有のやり方はいろいろ調べたのですが、今はまだうまくいかずです。git等を利用してリポジトリ管理するのが良さそうです。yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-46875534288705034202012-12-09T21:13:00.001+09:002012-12-15T15:58:44.500+09:00PhoneGapによるiOSアプリ開発環境を構築する(Xcode編)PhoneGapはiOSやAndroidなどをサポートするオープンソースのモバイルアプリケーション開発フレームワークです。このフレームワークを使うことで、HTMLやJavaScriptでアプリが作れるようです。そこで、まずはPhoneGapをXcodeから利用できる開発環境を構築しました。<br />
<br />
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">事前準備</span></b><br />
iOSアプリ開発にまず次のツールを用意します。<br />
<br />
<b>・Xcode4.5.2</b><br />
AppStoreよりインストールします。<br />
<br />
<b>・Xcode Command Line Tools</b><br />
Xcodeを開き、[XCode]→[Preferences]→[Downloads]→[Components]より[Command Line Tools]をインストールします。<br />
<br />
<b>・PhoneGap2.2.0</b><br />
次のPhoneGapの公式サイトに移動し、「Download PhoneGap」→「Download」よりPhoneGap2.2.0をダウンロードします。<br />
<a href="http://www.phonegap.com/">http://www.phonegap.com/</a><br />
<br />
DL完了したら、そのzipファイルを任意のディレクトリへ解凍します。<br />
<br />
<br />
<b><span style="font-size: large;">プロジェクト作成</span></b><br />
Terminal.appを起動し、PhoneGapを解凍したディレクトリ配下のlib/ios/binに移動した後、次のコマンドを入力します。<br />
<br />
<pre class="brush: xml">./create <project_folder_path> <package_name> <project_name></pre>
<br />
例えば、HelloWorld2というプロジェクト名を次のように作りました。
<br />
<br />
<pre class="brush: xml">./create ~/work/HelloWorld2 org.apache.HelloWorld2 HelloWorld2
</pre>
<br />
入力後、project_folder_pathのフォルダに移動すると、HelloWorld2.xcodeprojが作成されています。それを起動し、そのままSimulatorも起動させると次のように表示されました。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZtfScMTeYxL11fit1b03mvB-8T4OA_Ju_QbsIcTAnQuJPE4mg11wlEhJNHIXjZjODrYoXlmvfm3nMLLN5UCFLdrp1WinEIT2NsKXyAFZG_fpXOco60w8OcPJpwNObVullvp_rJNSisTr/s1600/PhoneGap1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIZtfScMTeYxL11fit1b03mvB-8T4OA_Ju_QbsIcTAnQuJPE4mg11wlEhJNHIXjZjODrYoXlmvfm3nMLLN5UCFLdrp1WinEIT2NsKXyAFZG_fpXOco60w8OcPJpwNObVullvp_rJNSisTr/s320/PhoneGap1.png" width="170" /></a></div>
<br />
<br />
<b><span style="font-size: large;">HelloWorld表示</span></b><br />
最初に表示されている画面はプロジェクトのwwwディレクトリ配下のindex.htmlです。なので、これを書き換えると表示も変更されます。<br />
<pre class="brush: html"><html>
<head>
<title>Hello World 2</title>
</head>
<body>
Hello World 2
</body>
</html>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhUB7U8jpeYdetyYKjLXw-Mgn3t6eDKp4mGwsDKdwqDT0aS_HkTc4Dt6ew_AphDJc5GDQVGxUqXezRDip4ClxkLmIuHUHagharza3UG1cUuyYu036PLdTybG2FtIdm0CClDXE1qPdN_jG/s1600/PhoneGap2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhUB7U8jpeYdetyYKjLXw-Mgn3t6eDKp4mGwsDKdwqDT0aS_HkTc4Dt6ew_AphDJc5GDQVGxUqXezRDip4ClxkLmIuHUHagharza3UG1cUuyYu036PLdTybG2FtIdm0CClDXE1qPdN_jG/s320/PhoneGap2.png" width="170" /></a></div>
<br />
<br />
wwwディレクトリ内をいろいろ変更してアプリを作っていくイメージです。楽しみです。yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-30339245479278560912012-10-15T08:31:00.000+09:002012-10-15T08:31:00.197+09:00スタイルを含んだ文字から文字だけをコピーする『FormatMatch』MacbookでWebサイトの気になる文章をEvernoteにコピーしたり、Evernoteで編集したブログの記事をBloggerにコピーしたりするとき、コピー元のスタイルを含んだままコピーされてしまいます。それを手軽に解決してくれるのが『Format Match』です。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP__O_z-I3dHnfCV15vaTYMH5tWpiruJMPjl-WBc5jjdBIrgmuevAC5ksfZiq0hQEJIe9tgrNpTFKwdeVmTfEy-NdPvgBzqHizITsqvsAo9FjgB_XZSTgB1F_kMqBVChpPr15p79Rqn1sF/s1600/FormatMatch.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="136" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP__O_z-I3dHnfCV15vaTYMH5tWpiruJMPjl-WBc5jjdBIrgmuevAC5ksfZiq0hQEJIe9tgrNpTFKwdeVmTfEy-NdPvgBzqHizITsqvsAo9FjgB_XZSTgB1F_kMqBVChpPr15p79Rqn1sF/s320/FormatMatch.PNG" width="320" /></a></div>
<br />
<a href="http://www.freemacware.com/format-match-app-store/">Format Match</a><br />
<br />
<br />
Format Matchを起動すると、メニューバーにそのアイコンが表示されます。アイコンが活性になっているときは、スタイルを含んだ文章をコピーしてもスタイルが取り除かれた状態でコピーされます。アイコンが非活性になっているときは、文章はスタイルを含んだ状態でコピーされます。<br />
<br />
アイコンの活性、非活性はクリックで切り替えられます。アイコンを活性から非活性にするときはDeactivate、非活性から活性にするときはActivateをクリックします。シンプルでとても使いやすいです。<br />
<div>
<br /></div>
yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-68845282385179341812012-09-09T12:02:00.000+09:002012-09-09T12:02:04.511+09:00大切な予定までの日数をカウントする『あとマル』あとマルは直近の特定日までの日数を表示してくれるアプリです。日時と予定を入力するだけで、その日までの残り日数をバッジに表示してくれます。バッジとはアイコンの右上に表示される赤い円のことです。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5sb__BO4ZipzZNk8BIDlifgyy6VnhDavIe4FC9wv1457S9N727RX-Ks4EmSRgUxsxqMMgn_VnNSPSzQAtRJB1JJQHKtb7sci3hE7imDuYQxXPn8xCVjN3lOnGA_LIkv1dl7Ac48qnmnPf/s1600/atomaru1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5sb__BO4ZipzZNk8BIDlifgyy6VnhDavIe4FC9wv1457S9N727RX-Ks4EmSRgUxsxqMMgn_VnNSPSzQAtRJB1JJQHKtb7sci3hE7imDuYQxXPn8xCVjN3lOnGA_LIkv1dl7Ac48qnmnPf/s320/atomaru1.PNG" width="213" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-gUKsNzDZ1bTC4SifWOf65OL5eTfgr2aVWWTrHmJ2WOlUuvV-FY4S3xxtpgNDTG79vqtp2c1tyGN-WLJ8zb16-he_xohssiT2BkOkalkbfd6fhF_mBWPNd18nvjLxjDdeVV5wmgWk_-ci/s1600/atomaru2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-gUKsNzDZ1bTC4SifWOf65OL5eTfgr2aVWWTrHmJ2WOlUuvV-FY4S3xxtpgNDTG79vqtp2c1tyGN-WLJ8zb16-he_xohssiT2BkOkalkbfd6fhF_mBWPNd18nvjLxjDdeVV5wmgWk_-ci/s320/atomaru2.PNG" width="213" /></a></div>
<br />
App Store:<a href="http://itunes.apple.com/jp/app/atomaru-canri-ri-fuwobajjidekauntodaun/id466693925?mt=8">あとマル - 残り日付をバッジでカウントダウン</a><br />
<br />
<br />
<a name='more'></a><br />
あとマルには予定をひとつだけ設定できます。例えば情報処理技術者試験など、直近の重要な予定をひとつだけ設定することで、その目標に向かって集中できそうな予感がします。<br />
<br />
<br />
バッジに日数を表示する発想が素敵です。iOSには、Androidのウィジェットみたいな機能がないため、ホーム画面に様々な情報を盛り込むことは出来ないですが、情報の見せ方を工夫するだけで面白いアプリが生まれることを実感しました。<br />
<br />
<br />
関連:<a href="http://smartgadgetlaboratory.blogspot.jp/2011/09/countdown-widget.html">目標達成まであと何日?『Countdown Widget』</a><br />
<div>
<br /></div>
yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-48365622056422129562012-09-07T09:03:00.000+09:002012-09-07T09:03:00.156+09:00iOSのツールバーをUIToolBarで作成するiOSアプリでよく見るツールバーはUIToolBarを用いて簡単に作成できるようです。UIToolBarでツールバーを作成し、そこにiOS標準のボタンを設置して表示するプログラムを作成しました。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Z8uS_comwohFdfL0fQSAcAkxKLXWeyVNdFZnWgz21SgLLEWHIofu_9VwflJmwHFXzT_Tt91nuu2rMUWq8qUJ9RDX_TIn3pkJkfjFbqWxszc5WerJP1qYgHMBbm4qAH8q1cHvtdi283XK/s1600/UIToolBar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Z8uS_comwohFdfL0fQSAcAkxKLXWeyVNdFZnWgz21SgLLEWHIofu_9VwflJmwHFXzT_Tt91nuu2rMUWq8qUJ9RDX_TIn3pkJkfjFbqWxszc5WerJP1qYgHMBbm4qAH8q1cHvtdi283XK/s320/UIToolBar.png" width="170" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<a name='more'></a><b><span style="font-size: large;">プログラム</span></b><br />
UIToolBarのインスタンスを作成して、UIWindowのインスタンスに追加します。ツールバーへのボタン配置は、UIBarButtonItemのインスタンス作成してUIToolBarのitemsに追加することで実現できます。ボタンの種類は、UIBarButtonItemのinitWithBarButtonSystemItemに指定します。<br />
<br />
<pre class="brush: objc">- (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{
}
</pre>
<br />
<br />
実行結果は上の図の通りになります。ただ、ステータスバーとツールバーの隙間に違和感を感じます。違和感を無くすには、UIViewControllerでツールバーを作成するように構成を変える必要があるかもしれないです。yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-57680660682310235012012-09-05T08:55:00.000+09:002012-09-05T08:55:00.290+09:00NSUserDefaultsを利用してアプリの起動回数をカウントするNSUserDefaultsクラスを利用すると、軽めの情報をiOSアプリ内へ簡単に保存したり読み出したりすることができます。このクラスを利用して、アプリの起動した回数をカウントするコードを書きました。<br />
<br />
<br />
<a name='more'></a><br />
<b><span style="font-size: large;">プログラム</span></b><br />
NSUserDefaultsでは、情報をキーと値のセットで扱います。NSUserDefaultsから整数値を読み出すにはintegerForKey、保存するにはsetIntegerメソッドにキーを指定します。そして、synchronizeメソッドで情報を反映させます。<br />
<br />
アプリケーションの動作が可能になったときに呼ばれるapplicationメソッドに、アプリの起動回数をカウントするコードを次のように書きました。<br />
<br />
<pre class="brush: objc">- (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;
}
</pre>
<br />
<br />
<b><span style="font-size: large;">実行結果</span></b><br />
アプリの起動と停止をシミュレータで4回繰り返した結果をコンソールで確認しました。起動回数がちゃんとカウントアップされています。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62qiyj0A7PkVy6SJkrZH24u3aaIWgNllUfYFP8gybKthuUYXc77w2V3GRS2mwJHEJEOAYDwbIeEMPPwsNFKqlzRzMEFgW6Ig57f4qgQBtbiTtI-3C8gnS7XnJSgxU0IHOZJjUhvGgU2Oi/s1600/NSUserDefaults_Log.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62qiyj0A7PkVy6SJkrZH24u3aaIWgNllUfYFP8gybKthuUYXc77w2V3GRS2mwJHEJEOAYDwbIeEMPPwsNFKqlzRzMEFgW6Ig57f4qgQBtbiTtI-3C8gnS7XnJSgxU0IHOZJjUhvGgU2Oi/s320/NSUserDefaults_Log.png" width="320" /></a></div>
<br />
NSUserDefaultsが書きだすファイル(*.plist)は、iOS5.1のシミュレータであれば下記の場所にありました。隠しファイルなので、Finderで表示するときは全てのファイルを表示するように設定する必要があります。<br />
<br />
/Users/[ユーザ名]/Library/Application Support/iPhone Simulator/5.1/Applications/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/Library/Preferences<br />
<br />
plistファイルは開いて値を変更したりすることもできます。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0FuAJuMeDs_rQGt3G0Hkf7VSjMZu2xfzbZooHh6jKuiDzpr1W7LaQF_wkQRiGKDAaCCzF9yB6S0SFPb9wizvRjqRb4O3OK66ZpSDO9LVW3drSJSsUWmUQoxQWVqrFjXW3GK6XDymiMr92/s1600/NSUserDefaults_plist.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0FuAJuMeDs_rQGt3G0Hkf7VSjMZu2xfzbZooHh6jKuiDzpr1W7LaQF_wkQRiGKDAaCCzF9yB6S0SFPb9wizvRjqRb4O3OK66ZpSDO9LVW3drSJSsUWmUQoxQWVqrFjXW3GK6XDymiMr92/s320/NSUserDefaults_plist.png" width="320" /></a></div>
<br />
NSUserDefaultsは、Androidのプリファレンスのような機能です。設定値の保存に便利そうです。<br />
<br />
関連:<a href="http://smartgadgetlaboratory.blogspot.jp/2011/06/sharedpreferences.html">SharedPreferencesを利用してアプリの起動回数をカウントする</a><br />
<br />yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-47634260181309417012012-09-02T20:31:00.000+09:002012-09-02T20:31:00.728+09:00Objective-CのSyntaxHighlighterをBloggerで利用できるようにするSyntaxHighlighterはソースコードを色分けして綺麗に表示するJavaScriptのライブラリです。しかし、Objective-Cは本家のライブラリに含まれていないため、その言語を利用したい場合はそれ専用のファイルを別のサイトから持ってくる必要があります。いろいろと試して何とかObjective-CのSyntaxHighlighterをBloggerで利用できるようになったので、その導入手順をメモします。<br />
<br />
<br />
導入手順は次の通りです。<br />
<br />
1. SyntaxHighlighterを<a href="http://smartgadgetlaboratory.blogspot.jp/2010/12/syntaxhighlighter_12.html">ソースコードの色付け - SyntaxHighlighter - <設定編></a>の方法で設定します。<br />
2. <a href="http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/">UNDER MY HATのSYNTAX HL BRUSHES</a>から"Oxygen"にあるファイル(shBrushObjectiveC.js)を開いてコピーします。("Objective-C"にあるjsファイルは別もののようです)<br />
3. 1.で設定したタグ<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript">と<script language="javascript">の間に<script></script>を記述します。<br />
4. 3で記述した<script></script>の間に2でコピーした内容を貼り付けます。<br />
5. 後はObjective-Cのコードを <pre class="brush: objc"></pre>で囲むと色付けされるようになります。<br />
<br />
<br />
実行サンプルは次の通り。(色付けが少し寂しい気がしますが。。)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEvXIpcCRsidt5Yv6VM6CEmaHX3FTG30-FHBuoMyEuLxTqhymbX1AGnVD1PAeLfqNixF71d_5VSDaPdJE1uCVa83KMo8GFoenQeXTi1KB-JxzNG4vxEhwAx3wBmkXJ6uxa2T5QOWAHIt9r/s1600/SyntaxHighlighter_Objective-C.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEvXIpcCRsidt5Yv6VM6CEmaHX3FTG30-FHBuoMyEuLxTqhymbX1AGnVD1PAeLfqNixF71d_5VSDaPdJE1uCVa83KMo8GFoenQeXTi1KB-JxzNG4vxEhwAx3wBmkXJ6uxa2T5QOWAHIt9r/s320/SyntaxHighlighter_Objective-C.png" width="320" /></a></div>
<br />
この導入方法は簡単で良いのですが、本家ライブラリとshBrushObjectiveC.jsを自サイトにアップロードして利用するのが本来のやり方だと思います。しかし、Bloggerではjsファイルをアップロードして利用するということが難しそうだったのでこの方法を採りました。自サイトへのアップロードはまた別の機会に。<br />
<br />
<br />
SyntaxHighlighterの本家URL:<a href="http://alexgorbatchev.com/SyntaxHighlighter/">SyntaxHighlighter</a><br />
Objective-CのSyntaxHighlighter:<a href="http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/">UNDER MY HAT</a><br />
導入まとめ1:<a href="http://smartgadgetlaboratory.blogspot.jp/2010/12/blog-post.html">ソースコードの色付け - SyntaxHighlighter - <概要編></a><br />
導入まとめ2:<a href="http://smartgadgetlaboratory.blogspot.jp/2010/12/syntaxhighlighter.html">ソースコードの色付け - SyntaxHighlighter - <使用編></a><br />
導入まとめ3:<a href="http://smartgadgetlaboratory.blogspot.jp/2010/12/syntaxhighlighter_12.html">ソースコードの色付け - SyntaxHighlighter - <設定編></a><br />
導入参考サイト1:<a href="http://md.hatenablog.com/entry/2012/05/22/072212">はてなブログでSyntaxHighlighterでObjective-Cを表示</a><br />
導入参考サイト2:<a href="http://dev2next.blog134.fc2.com/blog-entry-6.html">SyntaxHighlighterでObjective-Cをきれいに表示</a><br />
<br />yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-81236244545639938802012-09-01T19:56:00.000+09:002012-09-01T23:04:34.967+09:00マルチスレッドとは・・・マルチスレッドプログラムについて経験値がいくらかたまったので、一度自分の知見をまとめてみようと思います。自分の知識の整理を目的としたいと思います。<br />
<br />
<h2>
スレッドとは</h2>
端的に言うと、スレッドとは、プログラムを実行する主体の最小単位です。ここで言っている主体とは、例えば、a.outという実行ファイルを実行する"そのもの"を指します。プログラムを実行するスレッドが1つであればそれをシングルスレッドプログラムと呼び、プログラムを実行するスレッドが複数であればそれをマルチスレッドプログラムと呼びます。シングルスレッドプログラムはa.outを逐次実行し、マルチスレッドプログラムはa.outを並列・並行実行します。<br />
次にリソースの観点では、スレッドはプログラムカウンタを始めとしたレジスタ群とスタックを個別に持ちます。スレッドは、プログラムを実行する主体の最小単位であるため、それぞれに個別のプログラムカウンタとスタックを持つ必要があります。一方で、命令コードと静的データ、ヒープは、スレッド間で共有されます。これら命令コード、静的データ、ヒープを所有する主体となるのが、プロセスです。<br />
スレッドは、必ず1つのプロセスに属します。また、1つのスレッドが2つ以上のプロセスに属することはありません。プロセスというのは、実行される実行ファイルごとのメモリ上の区切りのようなものです。プロセスごとに、命令コード、静的データ、ヒープ、スタックをメモリ上に持ちます。実行ファイルa.outを2つ同時に実行すれば、2つのプロセスがコンピュータ上に同時に存在するということになります。もちろんこのとき、それぞれのプロセスにスレッドが存在します。<br />
<br />
<h2>
シングルスレッドプログラムとマルチスレッドプログラム</h2>
シングルスレッドプログラムとマルチスレッドプログラムの実装の違いを、簡単に見てみます。マルチスレッドプログラムで用いるスレッドライブラリは、openMPとpthreadを使いました。<br />
以下、printfを10回実行するプログラムです。環境によっては、マルチスレッドプログラムのhelloがプリントされる順番が入れ替わったりするかと思います。<br />
<br />
singleThread.c<br />
<pre class="brush: c">#include <stdio.h>
int main(void)
{
int i;
for(i = 0; i < 10; i++)
{
printf("hello%d\n", i);
}
return 0;
}
</pre>
<br />
multiThread_openMP.c<br />
<pre class="brush: 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;
}
</pre>
<br />
multiThread_pthread.c<br />
<pre class="brush: 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;
}
</pre>
<br />
<br />
singleThread.cは、単にprintfをfor文で回しているだけなので、特に問題ないと思います。<br />
multiThread_openMP.cは、singleThread.cとほぼ同じです。異なるのは、openMPのヘッダをインクルードしていることと、for文の前に#pragma omp paralle forの1行があることだけです。たったこれだけで、for文のなかのprintfが並列・並行実行されます。<br />
multiThread_pthread.cは、openMPのものと同じ並列・並行実行であるのに対して、コード量が多くなっています。これは、pthreadでは、スレッドの作成と、終了待ちを関数呼び出しで明示的に行う必要があるためです。openMPの方では、ほぼスレッドなど意識せずただfor文を並列に実行する、とプログラムしているだけでした。<br />
上記の例を一見すると、openMPの方が簡単にマルチスレッドプログラムを作ることができます。しかし、for文の並列化はopenMPが得意とするところなので、openMPの方がコード量を少なく記述できているだけです。<br />
世にいくつかもあるスレッドライブラリですが、それぞれに得意なところ、不得意なところがあります。得意なところは、比較的コード量が少なくなり、不得意なところはコード量が多くなるのが一般的かと思います。また、各スレッドの同期等の細かな動作を細かく制御できるスレッドライブラリは、細かく制御できる分、コード量が多めになる傾向があります。pthreadは比較的何でもできるスレッドライブラリなので、並列化のためのコード量が多めになりがちです。<br />
<br />
<h2>
まとめ</h2>
スレッドの概念、スレッドとプロセスの関係を説明し、マルチスレッドプログラムの例を見ました。スレッドライブラリはいくつもあり、それぞれに得意・不得意なところを持っていることを述べました。マルチスレッドプログラムに関して、説明しなかったしなかったことは、なぜマルチスレッドにするのか?、何をマルチスレッド化するのか?、どのようにマルチスレッド化するのか?といったことになります。こういったことは、マルチスレッドに関する本が参考になります。また、現実に使われているマルチスレッドプログラムを探しだして読むことも参考になります。<br />
<br />
<br />
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=amazonaffi0ee-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4900900664" style="height: 240px; width: 120px;"></iframe>
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=amazonaffi0ee-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=4873114357" style="height: 240px; width: 120px;"></iframe>
yasu_keihttp://www.blogger.com/profile/04253441709562141482noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-19097844165592278042012-08-26T09:30:00.000+09:002012-08-26T09:30:00.094+09:00気になる色を調べたい『色彩ヘルパー』
<br />
<div class="p1">
目の前の素敵な色や、写真に含まれている色を調べたいとき、『色彩ヘルパー(Coler Helper)』が便利です。『色彩ヘルパー』は、iPhoneやiPadで利用できるアプリで、カメラで映した映像や、端末内に保存されている画像に含まれている色を識別してくれます。</div>
<div class="p2">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx20DiBZ2Iy_B_mS0N9WTvob8mNBdMhyX0cR1BUMzlCkXST1veVjwrZxnQSmj4Gd8CxvhQQX-_0o89WOqHJKasCRWliRVVUNf-8PYUkskcILaE_DXFJvWI3qobxMrUa9GB4kM4Vbr05ZDG/s1600/ColorHelper1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx20DiBZ2Iy_B_mS0N9WTvob8mNBdMhyX0cR1BUMzlCkXST1veVjwrZxnQSmj4Gd8CxvhQQX-_0o89WOqHJKasCRWliRVVUNf-8PYUkskcILaE_DXFJvWI3qobxMrUa9GB4kM4Vbr05ZDG/s320/ColorHelper1.PNG" width="213" /></a></div>
<div class="p1">
<br /></div>
<div class="p1">
カメラで撮影中の映像に含まれるカラーをリアルタイムで表示します。iOS端末内に保存されている写真のカラーも、読み込んで表示します。</div>
<div class="p2">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHAr-W_nnFKDFHlPaGrokClzulZSUXqX5ndUfIaK0LmwJ0-Q53Id8PPaMmoKy4BxznUQJ_1y460uuNmwZWQAIaZWH6aFjGB3xY_alodvhCKHU_GonVeXeUKcdOMAct3O2S_Mnvv3Z07Sj/s1600/ColorHelper2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHAr-W_nnFKDFHlPaGrokClzulZSUXqX5ndUfIaK0LmwJ0-Q53Id8PPaMmoKy4BxznUQJ_1y460uuNmwZWQAIaZWH6aFjGB3xY_alodvhCKHU_GonVeXeUKcdOMAct3O2S_Mnvv3Z07Sj/s320/ColorHelper2.PNG" width="213" /></a></div>
<div class="p1">
<br /></div>
<div class="p2">
<br /></div>
<div class="p1">
色見本では、色のサンプルが一覧になっていて、色を参照するのにとても便利です。配色に悩んだ時、このアプリがあればとても心強いと思います。 </div>
<div class="p1">
<br /></div>
<div class="p1">
App Store:<a href="http://itunes.apple.com/jp/app/se-caiherupa/id541379161">色彩ヘルパー</a></div>
yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-73672910245097109852012-08-18T09:30:00.000+09:002012-08-18T09:30:00.267+09:00CGRectContainsPointで特定の範囲がタッチされたかどうかを判別するCGRectContainsPointは、指定した領域に指定した位置が含まれるかどうかを判別するメソッドです。これを利用して、指定した範囲がタッチされたかどうかを判別するサンプルを書きました。<br />
<br />
<br />
<b><span style="font-size: large;">プログラム</span></b><br />
タッチした時に呼ばれるtouchesBeganメソッドで、CGRectContainsPointを利用した分岐処理を記述しました。CGRectContainsPointの第一引数は領域、第二引数は位置を指定します。<br />
<br />
<pre class="brush: c">- (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");
}
}
</pre>
<br />
<br />
xやyといった位置や、widthやheightといった幅や高さで判別するような記述を行わなくて済むので、これで記述量が少なくなりそうです。
<br />
<br />
関連:<a href="http://smartgadgetlaboratory.blogspot.jp/2012/07/iphonetouchesbegan.html">iPhoneでのタッチやタップをtouchesBeganで検知する</a>yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-39200614875283799442012-08-08T09:33:00.000+09:002012-08-08T09:33:00.960+09:00Windows XPにスナップに似た機能を搭載する『WinSplit Revolution』<div class="p1">
Windows 7のスナップ機能はドラッグ操作で画面を整理するのに便利な機能です。慣れると手放せなくなる機能ですが、Windows XPにはその機能がありません。ただ、画面を整理するという点で、スナップに似た機能を実現するソフトウェアがありました。『WinSplit Revolution』といいます。</div>
<div class="p2">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYHtmze7MA-sPzPSU0qv86eHl-3rSO-62TYOZ8A80VJFwYkbQyqjdq_NaAWFj_5ErOzWsVb_Uf7zE6-vQkVF7aEIFK0VjVOEppZp4jqpuga8jbiXmNRENRNrsfyVAdXkgn7vHuGnNdlOB/s1600/WinSplit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUYHtmze7MA-sPzPSU0qv86eHl-3rSO-62TYOZ8A80VJFwYkbQyqjdq_NaAWFj_5ErOzWsVb_Uf7zE6-vQkVF7aEIFK0VjVOEppZp4jqpuga8jbiXmNRENRNrsfyVAdXkgn7vHuGnNdlOB/s1600/WinSplit.png" /></a></div>
<div class="p1">
DL:<a href="http://winsplit-revolution.com/">http://winsplit-revolution.com/</a></div>
<div class="p2">
<br /></div>
<div class="p1">
インストールすると、タスクトレイにアプリが表示されます。アイコンをクリックすると上図のような画面が現れます。例えば左上にウィンドウを合わせたい時は、対象のウィンドウを選択して左上矢印のボタンをクリックします。</div>
<div class="p2">
<br /></div>
<div class="p1">
専ら便利なのは画面整理のショートカットを作成できる点です。例えば、[Win] + [Ctrl] + 上矢印キーでウィンドウを上部に合わせるといったことができます。ショートカットの設定は[Hotkey settings]からできます。</div>
<div class="p2">
<br /></div>
<div class="p1">
たくさん起動したTera Termを見やすく並べたり、WordやExcel等の内容比較をやりやすくするのに便利なツールです。</div>yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0tag:blogger.com,1999:blog-3542782481726514102.post-69684616234969759112012-08-07T09:01:00.000+09:002012-08-07T09:01:00.262+09:00MacBookにスナップ機能を搭載する『BetterTouchTool』スナップ機能とは、Windows 7に搭載されている機能で、ウィンドウを画面の端にドラッグすると画面のサイズを自動で調整してくれる機能です。Mac OS Xにはその機能は無いのですが、『BetterTouchTool』を使うとそんなスナップ機能が実現できます。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZLlouZpzNft5lAXHv63A4O55S8m2J_m0SB0wirQFIL1FDUy_rnLPYedEDx-XP_zalN9vffBgmpRUpl9X6yhYTtvyQVinUGOphmPN5tz5hcfPW8uKy2IaJK9Q3cXqcZJ_IpMADtaOiNvZP/s1600/BetterTouchTool.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZLlouZpzNft5lAXHv63A4O55S8m2J_m0SB0wirQFIL1FDUy_rnLPYedEDx-XP_zalN9vffBgmpRUpl9X6yhYTtvyQVinUGOphmPN5tz5hcfPW8uKy2IaJK9Q3cXqcZJ_IpMADtaOiNvZP/s1600/BetterTouchTool.png" /></a></div>
DL:<a href="http://blog.boastr.net/">http://blog.boastr.net/</a><br />
<br />
<a name='more'></a><br />
スナップ機能の設定は、『BetterTouchTool』起動→[Action Settings(Windows Snapping etc.)]選択→[Window Snapping]タブ選択→[Window Snapping Enabled]チェックでできます。この画面でスナップ機能の詳細な設定ができます。<br />
<br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhah9QDepp_1dz8ALRWcaniyYpVSXmy0EaLSJh0T-Ezr05Uzr7VNdiin9FKa4xKQvfljayhJ8hs8zoVnha5vxmiw4awWI-I7aIrlcdzOYED7uApFrjKniumuwvjB4sIiMY2mUQ0W_A_aAhu/s1600/BetterTouchToolSnapSetting.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhah9QDepp_1dz8ALRWcaniyYpVSXmy0EaLSJh0T-Ezr05Uzr7VNdiin9FKa4xKQvfljayhJ8hs8zoVnha5vxmiw4awWI-I7aIrlcdzOYED7uApFrjKniumuwvjB4sIiMY2mUQ0W_A_aAhu/s320/BetterTouchToolSnapSetting.png" width="320" /></a></div>
<br />
また、『BetterTouchTool』を使うと、トラックパッドのタッチ位置に応じて任意のアプリを起動するように設定できるようです。極めると手放せなくなりそうなツールです。yosinoohttp://www.blogger.com/profile/10324992774500549795noreply@blogger.com0