[Mac]PhoneGap×Xcode4.2.1でサンプルをつくる

サンプルプロジェクトを作ってみる

PhoneGap Fanというサイトにサンプルアプリの作成手順がのっているのでその手順に従って作成してみようと思います。
まず、Xcodeを起動し、プロジェクトをつくっていきます。


Templateは iOS > Application > PhoneGap-based Applicationを選択します。


Product NameやCompany Identifierは適当でOKです。

ここで、実行してみるとアプリケーション自体は実行可能なのですがなにがしかのエラーが出ている模様。(下図)

www/index.htmlがない。。。ターミナルで探しにいくと、

$ cd ${PROJECT_HOME}/PhoneGapSample
$ ls -ltr
total 0
drwxr-xr-x  10 user  group  340  3 14 14:25 PhoneGapSample
drwxr-xr-x   5 user  group  170  3 14 14:25 PhoneGapSample.xcodeproj
drwxr-xr-x   4 user  group  136  3 14 14:25 www
$ ls -ltr www/
total 256
-rw-r--r--  1 user  group  125951  3 14 14:25 phonegap-1.2.0.js
-rw-r--r--  1 user  group    2295  3 14 14:25 index.html

ないわけではなく、認識できていない模様。追加してやればやさそう。

まず、NavigatorのトップのPhoneGapSampleで右クリック > Show In Finderを選択

wwwディレクトリが見えているので、これをNavigatorのトップのPhoneGapSampleにドラッグ&ドロップする。ファイルを追加するポップアップが出てくるので「Create floder references for any added folders」を選択して、Finishを押す。

そうすると、以下の通りwwwが追加されている。

この状態で実行してみよう。

これでOKです。www/index.htmlを軽く見てみましたがまさにWebページを作っているイメージ。Javascriptのイベントで端末の状態を拾って、Native APIを呼び出せるって感じのイメージ?作ってみないとわからないけど。

Android版のページも作ったのでリンクを残しておきます。
こちら

[Mac]Phone Gapインストール

Phone Gapとは

スマートフォンアプリを作成しようととしたときにアプリがサポートするOSの範囲を考えてみます。(Android, iPhone, Windows Phone, Symbian, BlackBerry…)すべてのOSに対して同等のサービスを提供しようとすると、それぞれ開発する言語が異なるため実装コストがかかります。
絶対押さえておきたいAndroidとiPhoneでさえJavaとObjective-Cという異なる言語で実装しなければなりません。開発コストやメンテナンスコストを考えると頭が痛い。。。



そのParadoxを打ち壊すのがPhone Gapです。これは単一言語で複数のネイティブアプリを作成してくれるすごいフレームワークなのです。Phone Gapのほかにも同様のフレームワークは存在し、紹介するとTitanium Mobile, Corona, Unityなどがあります。

フレームワーク 対応OS
Phone Gap iOS, Android, Windows Phone
Titanium Mobile iOS, Android
Corona iOS, Android
Unity iOS, Android

さけられない問題

Phone Gap。すごいこれさえあれば安いコストで効率良くアプリの制作ができるスーパーフレームワークじゃないか!?と感じるかもしれませんが、やはりより各OS固有の実装は表現できないのではないかと思われます。
いや、アプリケーションの見た目より機能重視だから一般的なレイアウト・一般的なコンポーネントでいいんだ!というならばもってこいなのですが、アプリケーションのレイアウトの細部にまでこだわりユーザエクスペリエンス向上を目指すアプリには向かないかもしれません。(使ったことないのであくまで想像ですが。。。)

PhoneGapをインストールしてみる

とりあえず、インストールしないことには始まらないのでiMacにインストールしてみます。ダウンロードリンク
前提として、Xcodeがインストールされている必要があります。
ダウンロードされたzipファイルを展開し、iOs/PhoneGap-1.2.0.dmgをダブルクリック。

これでインストールは完了です。デモアプリの作成は後日。。。

[Mac]このソフトウェア・アプリはよく使うシリーズ(1)

Mac mini

サーバにはこんなアプリやソフトウェアがはっています。

Apache

HTTPサーバ。日々ブラウジングによって見ているサイトはApacheが動いている可能性が高い。
Go to wiki -> Apache

Subversion

バージョン管理システムの一つ。ドキュメントやソースコードの管理が行え、変更が入るたびにRevisionというバージョンが上がり、変更の管理・Revision XとRevision Y間での差分確認・古いRevisionへの戻しなどが行える。その他のバージョン管理システムにはGitやCVSがある。
Go to wiki -> Subversion

WordPress

オープンソースブログソフトウェア。基本的にはZip形式のモジュールを解凍し、Apacheとの連携部分とDBの接続部分だけ設定してやれば使えてしまう便利物。簡単にカスタマイズしたブログサイトの構築が可能で、多くのサードパーティープラグインが存在するところも魅力の一つ。このサイトもWordPressで構築されています。
Go to wiki -> WordPress

Tomcat

Java Servletを動かすサーブレットエンジン。HTTPサーバの機能を有するため単独で動作可能ではあるが、かなりHTTPサーバの機能がお寒いのでApacheと連携(AJPコネクタを利用)させて利用するのが一般的。多くの商用サイトがApache + Tomcatで実装されており(世間一般的にはPHPで実装されているサイトがほとんど)、PHPと比較した際の利点・欠点は大まかにパフォーマンスが出ることが利点で、実装がPHPに比べると難しいのが欠点となる。
Go to wiki -> Tomcat

Redmine

Webベースのプロジェクト管理システム。プロジェクト管理システムの有する機能の一部は以下の通り。
・プロジェクトの管理
・チケットの管理(チケット≒課題と考えてよいです)
・ガントチャート
・簡易Wiki
・(★)Subversionとの連携
・ワークフローの作成
・文章管理
上記紹介はほんの一部の機能です。Redmineの一番強力なポイントはなんといってもSubversionとの連携だと思います。Subversionの設定が非常に簡単で、さらにSubversionにコミットする際のコメント規約さえ守れば、チケットとコミットの紐付けも自動で行われる。どのチケットに対する変更なのかが一目了然です。
Go to wiki -> Redmine

MySQL

リレーショナルデータベースの一つ。無料で利用でき、性能・堅牢性にも定評があるため人気のデータベースである。
Go to wiki -> MySQL

iMac / MacBook Air

iMac / MacBook Airにはこんなアプリやソフトウェアが入っています。

chrome

超速ウェブブラウザ。シェア的にもIEに続くシェアを獲得しており、将来的にはシェアNo.1のブラウザになると思われる。また、ブラウザとしてChromeを利用している人はIEを利用している人よりも賢いらしい。
ChromeユーザーはIEユーザーより賢い?――オンラインパズルでの調査結果
Chromeはなぜ速いのか
Go to wiki -> Google Chrome

Firefox

Chromeと並ぶ人気ブラウザの一つ。動作が非常にもっさりしているのが玉に瑕。プラグインは非常に充実しており、以下のプラグインは開発時等に愛用しています。
・Live HTTP Header
・Firebug
Go to wiki -> Firefox

eclipse

フリーの統合開発環境。Javaアプリケーションを作成するさいに利用しています。(もちろんAndroidアプリ開発もコレ)プラグインも充実しており、バージョン管理システムとの連携やリファクタリング機能(コードの自動補完やエラー検出時の解決方法、ファイル名や変数名の変更)が充実しています。仕事でも毎日利用。
また、プラグインが最初からいろいろ入っているAll in Oneパッケージも存在します。
Go to Wiki -> Eclipse

svnX

オープンソースのOS X向けのSubversionクライアントです。SVNの基本コマンドに関してはGUIで直感的に操作できるところもよいです。Windows向けだとTortoiseSVNが有名。
Go to Site -> svnX

Sequel Pro

オープンソースのMySQLクライアント。接続方式は「Starndard」、「Socket」、「SSH」があり、入力が面倒なSSHのパスワード等すべて記憶させることが可能。テーブルの構造やデータの中身、データサイズ等GUIで確認可能、Query発行もでき、これさえあればコンソールをたたく必要はない。
Go to Site -> Sequel Pro

Skype

みんな大好きSkypeのクライアント。機能の紹介ははしょりますが、同様の機能を持つアプリケーションがたくさんでてきている中でSkypeは生き残れるのか。LINE, Viper, FacebookもWebブラウザを開かなくともWindows上でチャットできるクライアントアプリ「Messenger for Windows」をリリースしたのでそろそろ。。。?
Go to Site -> Skype
Go to Wiki -> Skype

Synergy

複数台のパソコンを一つのキーボードとマウスで操作できるようになるフリーのソフトウェア。設定も至って簡単で、一つのPCをホストに他のPCがクライアントモードで接続に行けばいいのです。あとはパソコン同士の相対的な位置情報を設定するだけ。このソフトのすごいところは異なるOS間でも接続が可能なこと。実際会社ではWindows XPとCent OSを接続して操作しています。
Go to Site ->Synergy
設定方法ならこのブログがおすすめ

Xcode

Appleの統合開発環境であり、AppleのアプリやiPhoneのアプリ作成には必須のソフトウェア。基本的にはWindowsでのインストールは不可能である。(Windowsに特殊な環境を構築したりVMを使ってOS Xをインストールしたりすれば可能なよう)Xcode4.0系ではInterface Builderと統合され、GUIの作成とコードの記述が一つのアプリケーションで行えるようになり、利便性が向上した。
Go to Wiki -> Xcode

iCompta

超便利かつ高機能家計簿アプリ。iPhoneとOS Xでの連携が可能であるが、ちょっと高価なのが。。。無料お試し期間的なのもあるらしいので、ぜひお試しあれ。
Go to Site -> iCompta

[Mac OS X]Messages(β)を使ってみる

Messages(β)とは

Appleが発表した次期OSの新機能のうちの一つ。今の段階からβ版としてAppleのサイトで公開されています。(→こちら)説明文を読んでいくと、iChatをリプレイスするサービスであり(ただしβ版なので既存のiChatのサービスは動き続けます)、iOS 5上のマシン(iPad, iPhone,iPodTouch)で動いているiMessageのようなイメージでメッセージングができるそうです。また、特徴として以下の点が挙げられています。(特徴的なものいから一部抜粋)
・メッセージだけではなく、画像・動画・位置情報等様々なものが送れる。
・いろいろなアカウント(AIM、Yahoo!、Google Talk、Jabber)に対応する。

早速インストールしてみる

Download Messages Free Betaのリンクをクリックして、ディスクイメージをダウンロードします。その中にインストーラが内包されているのでインストールを続行します。
※OSの再起動が必要。
※Mac OS Xの最新バージョンである必要がある。

Messagesを起動してみる

アプリケーションアイコンを選択し、起動します。

Appple IDを入力します。

続けるを選択します。

完了を選択します。

そうするとチャット画面が現れます。
宛先にチャット相手を入力し、チャットが開始します。左上のノートとペンのアイコンをクリックすると、別スレッドでチャットが起動し、先ほどとは違う相手とチャットが可能です。チャットで送りたい文字は右下のテキストエリアに入力します。
(まさにスマホ!)

試しに宛先を入れてメッセージを送信してみます。チャットから会話をしたくなった場合には、名前の右にビデオのアイコンがあるのでそちらを選択します。そうするとFacetimeが始まります。

終始、スマホを意識したUIになっているのが印象的でした。

[Mac]Eclipseの入力補完を使えるようにする

Eclipseのスーパーショートカット

Eclipseで開発を行っていて、「Ctrl + Space」のショートカットを知らない人はいないだろう。とりあえず、迷ったら。。。というのもどうかと思うが。Macだと、デフォルトではスポットライトが優先されてしまうので設定を変えなければ使用することはできない。その設定方法を以下に示す。

方法その①~スポットライトをつぶす

システム環境設定>キーボード>キーボードショートカット>Spotlight>Spotlight検索フィールドを表示
のチェックをはずすまたは割り当てられているショートカットを変更する。

ただ、Macの良さをつぶすのみあまり良くないと思うので、次の方法をお勧めする。

方法その②~Eclipseの設定でショートカットを割り当てる

Eclipse>環境設定>一般>キー>と選択していき、フィルターに「コンテンツ」と入力し、コンテンツ・アシストを選択。
コンテンツ・アシストのショートカットを新たに割り当てる。
※バインディングに新しく割り当てたいショートカットを入力すればよく。下の図では「Alt + Space」になっている。

[Server]外出先から自宅PCへリモート接続

用意する機器・サービス

機器・サービス 説明
WHR-G301N VPN機能がある無線ルータ
Serverマシン(iMac/Mac Mini Server) LAN内にある外出先から接続したいマシン
Clientマシン(Mac Book Air/iPhone 4S) LAN外から自宅LAN内へアクセスするマシン
dynDNS 動的に割り当てられるIPアドレスと、そのホスト名の対応を、動的に登録・管理する仕組みである。(from wiki)

dynDNSへ登録

まずdyndnsへアクセスしアカウントの作成を行います。(https://account.dyn.com/entrance/)

MyeService → DynDNS Hostsと選択してホスト名の登録を行います。

これでホスト名の登録は完了です。

常にホスト名でアクセスできる仕組みを構築

これでホスト名指定でWANから見た自分のIPアドレスへのアクセスできる仕組みが完成しましたが、これではまだ不十分です。通常のプロバイダ契約では動的にIPアドレスが変化してしまうので、常にIPアドレスとホスト名をひも付ける仕組みが必要となります。今回はその方法として無線ルータ親機の機能を利用します。
※MacではWhat’s UP!、WindowsではDiceというアプリケーションを利用して同様のことが実現が可能です。

まず無線ルータ親機の管理ページにアクセスし、Internet/LAN → DDNSと選択します。以下の画面に先ほどDynDNSに登録したデータを打ち込み設定するだけです。

VPNの設定

Internet/LAN → PPTPサーバと選択し、画面下部のPPTP接続ユーザの設定を行います。

前の画面に戻り、登録されていることを確認します。

画面上部の設定もあわせて行います。自宅での設定キャプチャーをのっけます。(LAN側のIPアドレス割当の箇所で警告が出ていますが問題になっていないので無視しています。)

WAN側からVPN接続

まず、iPhoneでの接続を確認します。
設定 → VPN → VPN構成を追加…と選択し、以下の通りに入力します。(PPTPを選択、サーバはdynDNSに登録したホスト名、アカウントおよびパスワードはPPTP接続ユーザの設定で入力した項目を入力します。)

設定が完了したら、作成した構成を選択した状態でVPNをONにします。

開始中となり、、、

状況が接続中となることとステータスバーに「VPN」にアイコンが出ることを確認したら完了です。

次に、MacBook Airでの接続を確認します。
システム環境変数 → ネットワークと選択し、左下の「+」を選択し新しいネットワークを作成します。インターフェースはVPN、VPNタイプはPPTP、サービス名は任意の名前を設定して作成を押します。(サーバアドレスはdynDNSに登録したホスト名、アカウント名にPPTP接続ユーザを入力し、認証設定の画面でパスワード認証を選択し、PPTP接続ユーザに対応するパスワードを入力してください。)

設定が完了したら接続ボタンを押下します。

接続中となり、、、

状況が接続済みとなることを確認したら完了です。

リモートアクセスを許可する

ここからは、サーバ(WANから接続したいマシン)の設定となります。
システム環境変数 → 共有を選択し、リモートログインとリモートマネージメントにチェックを入れておきます。

LAN内のIPアドレスを固定にする設定

システム環境変数 → ネットワークを選択します。
サーバマシンがどのようにネットワーク接続しているのかにもよりますが(EthernetかWi-Fi)、右下にある詳細…を選択します。そこでTCP/IPを選択してIPv4の構成のところを「DHCPサーバを使用(アドレスは手入力)」を選択し、IPv4アドレスを自分の設定したいアドレスを入力します。(ルーターのIP割り振りルールに従って振ってあげてください。)

固定されていることを確認するにはターミナルを開き以下のコマンドを入力します。
/sbin/ifconfig

en0またはen1のinetに設定したIPアドレスが表示されるはずです。
一通りサーバマシンがネットワークにつながっていることを確認したら、固定の設定は終了です。

LAN内にリモートデスクトップし接続確認

LAN内からでの相互リモートデスクトップは簡単ですよね。なので、割愛します。VPN接続すると擬似的にLAN内と同じネットワーク内にいるようになるのでLAN内にいるときと同じ方法で接続します。

これでネットにつながっている端末さえあればどこからでも家のPCにアクセスできる環境が構築できました。