【B3】 PHPテク
PHPテクニカルセッション
カルセッション

17Th
Developer Camp「RadPHP新バージョン情報＋モバイル開発の可能性を探る」

エンバカデロ・テクノロジーズ
エヴァンジェリスト
ヴジ
高橋智宏
1アジェンダ• RadPHP XE2 に関するアップデート• RPCL components for Zend Framework(tm)

デモ– 計43個• jQuery Mobile– 最近のトレンド– RPCL と jQueryjQ
M
Mobilebil の融合デモ• MPage & Mxxxx系コンポーネント群• PhoneGap
Ph
G– メリット、その仕組み– RPCL + jQ
jQuery M
Mobilebil でネイティブアプリ

デモ

2

17Th
Developer CampRadPHP XE2 に関するアップデート

13アップデート• IDEのRTM版のビルド番号– 4.0.0.1547 (IDEの不具合修正多数!!)• 開発環境– Apache 2.2.15 (Win32)– PHP 5.2.14 (VC6 x86, Thread Safe版)– Xdebug 2.1.0• RPCL(RadPHP
RPCL(R dPHP CComponentt LibLibrary))– Ver 3.0 の最新版
– http://rpcl.svn.sourceforge.net/viewvc/rpcl/trunk/rpcl/rpcl/
http://rpcl svn sourceforge net/viewvc/rpcl/trunk/rpcl/rpcl/• フォームデザイナのレンダリングエンジン– IE から WebKit に変更
4アップデート(続き)• ライブラリ & フレームワーク– jQuery 1.4.3– qooxdoo 1.2.1– jQuery Mobile 1.0 Beta 1 + jQuery 1.6.1– Zend Framework 1.11.7

5

Tips: 付属のPHPエンジンとXdebugを置き換える• http://blogs.embarcadero.com/teamj/2011/08/18/2327/

6

17Th
Developer CampRPCL components forZend Framework(tm)27計43個に増えました!!

8Captcha の例 - Zend_Captcha_Figlet

9

17Th
Developer Camp

jQuery Mobile

310モバイル向けWebサイトのトレンド• Mobile Web Technology Report August 2011
• http://trends.builtwith.com/Reports/Mobile-WebTechnology-2011/Mobile-Web-Technology-2011.html– <meta name=“viewport”> タグの登場– モバイル専用コンテンツの提供率– 採用されているモバイル向けライブラリの割合• jQTouchjQ• jQuery Mobile• iUI• Sencha Touch• iWebKit…
11

こんな経験はありませんか？
えっ!?

12

jQuery Mobile とは？ - jquerymobile.com• 2010年8月11日に始まったオープンソースプロジェクト• jQueryをベースに、モバイルデバイスのWebブラウザにjy特化したGUIを提供するJavaScriptライブラリ13サポートされるプラットフォーム• Aグレード(フルサポート)• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/d
ocs/about/platforms.html

14

RadPHP XE2 でモバイルWebアプリ開発• [ファイル]-[新規作成]-[その他…]-[Mobile Application]

15

MPage & Mxxxx系コンポーネント群• MPage - …¥rpcl¥jquerymobile¥forms.inc.php

16Ajaxで画面更新• MPage の UseAjaxプロパティ を true にするだけ!!

17リンクによる移動 – アニメーション• MLink または MToolBar– SystemIconプロパティ– Linkプロパティ
Li kプ パテ と Transitionプロパティ
Titi プ パテ

18

17Th
Developer Camp

PhoneGap

419

PhoneGap とは？ － www.phonegap.com• Nitobi Software社が開発している「HTMLコンテンツをネイティブアプリとしてラップしてくれるライブラリ」– オープンソース(BSDオ プ(BSD or MITライセンス)
MITライセ)– 先々月の下旬にようやく「バージョン1.0.0」になった。
– 主に iOS, Android 向け

20

PhoneGapのメリット、仕組み•

Objective-CやJavaのコンピュータ言語や、iOS,AndroidのAPIを知らなくても、ネイティブアプリを作成&登録できる– HTML,HTML CSS
CSS, JavaScript を利用します•

モバイルデバイスやOS特有の機能は、JavaScript向けに用意されているPhoneGapの標準API や Plugin を使ってアクセスしますHTML,CSS,JavaScript
UIWebView / WebView

JavaScriptpPlugin

PhoneGapライブラリ
ネイティブアプリ
iOS / Adnroid

21

PhoneGapのメリット、仕組み(続き)•HTMLコンテンツの作成時に、さきほど解説した「jQuery Mobile」を使用することも可能。
– PhoneGapで開発したネイティブアプリは基本的にWebページなので…

•

プログラムは、JavaScriptで書く!!
– RPCLのjQuery Mobileコンポーネント使用時は、jQueryを活用することになる•基本的にWeb
基本的にWebページなので、外部にアクセスする場合は、jQueryジなので、外部にアクセスする場合は、jQuery / Ajax /JSON などを使用すればよい

22

PhoneGap － 一般的な作業手順• Webページを「HTML5+CSS3+JavaScript」で記述する• iOS– PhoneGapをXcodeに統合– PhoneGap専用プロジェクトを作成– プロジェクトにHTMLコンテンツを追加
プロジ クトにHTML ンテンツを追加– ビルド• Android– Eclipseで通常のAndroidプロジェクトを作成• プロジェクトのアクティビティやマニフェストをPhoneGap向けに修正– プロジェクトにHTMLコンテンツを追加
プロジ クトにHTMLコンテンツを追加– プロジェクトにPhoneGapライブラリ(phonegap-1.0.0.jar)を追加– ビルド
Get Started Guide
http://www.phonegap.com/start23

PhoneGap － RadPHP XE2の手順• [ファイル]-[新規作成]-[その他…]-[Mobile Application]– PHPのイベントハンドラは使用できない– JavaScriptイベントハンドラのみを使用• [ツール]-[Wizard for PhoneGap]– iOS (3.0(3 0 ～ 4.3)
4 3)
• Xcode用のプロジェクト一式を生成– Android (1.5 ～)• Eclipse用プロジェクト
E li
用プロジ クト にも 使えるファイル群を生成使えるフ イル群を生成24

PhoneGapでネイティブアプリに変換後…

25

ハードウェアの機能にアクセスする• RadPHP XE2 の「Mobile Hardware」コンポーネント群– PhoneGapの標準APIをラップした非ビジュアルコンポーネント
例:
RadPHP XE2のMobile Application+
RPCLに昔からあるGoogleMapコンポーネント
gp+
RadPHP XE2のMGeolocationコンポーネント

26

カメラを起動して、撮影した画像を画面に表示•RPCLが、PhoneGapのAPIをラップしたJavaScript関数を自動生成してくれるので、それを呼ぶ– 例: MCapture1Capture();• navigator.device.capture.captureImage(…);

27

17Th
Developer Camp

Q&A28