B3 PHPテクニカルセッション 17 Th Developer Camp RadPHP 新バージョン情報 + モバイル開発の可能性を探る エンバカデロ テクノロジーズ エヴァンジェリスト高橋智宏 1
アジェンダ RadPHP XE2 に関するアップデート RPCL components for Zend Framework(tm) 計 43 個 jquery Mobile 最近のトレンド RPCL と jquery Mobile の融合 MPage & Mxxxx 系コンポーネント群 PhoneGap デモ メリット その仕組み RPCL + jquery Mobile でネイティブアプリデモ デモ 2
17 Th Developer Camp RadPHP XE2 に関するアップデート 1 3
アップデート 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 Component Library) Ver 3.0 の最新版 http://rpcl.svn.sourceforge.net/viewvc/rpcl/trunk/rpcl/rpcl/ 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
17 Th Developer Camp RPCL components for Zend Framework(tm) 2 7
計 43 個に増えました!! 8
Captcha の例 - Zend_Captcha_Figlet 9
17 Th Developer Camp jquery Mobile 3 10
モバイル向け Web サイトのトレンド Mobile Web Technology Report August 2011 http://trends.builtwith.com/reports/mobile-web- Technology-2011/Mobile-Web-Technology-2011.html <meta name= viewport > タグの登場 モバイル専用コンテンツの提供率 採用されているモバイル向けライブラリの割合 jqtouch jquery Mobile iui Sencha Touch iwebkit 11
こんな経験はありませんか? えっ!? 12
jquery Mobile とは? - jquerymobile.com 2010 年 8 月 11 日に始まったオープンソースプロジェクト jquery をベースに モバイルデバイスのWebブラウザに特化した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 プロパティと Transition プロパティ 18
17 Th Developer Camp PhoneGap 4 19
PhoneGap とは? - www.phonegap.com Nitobi Software 社が開発している HTML コンテンツをネイティブアプリとしてラップしてくれるライブラリ オープンソース (BSD or MIT ライセンス ) 先々月の下旬にようやく バージョン1.0.0 になった 主に ios, Android 向け 20
PhoneGap のメリット 仕組み Objective-C や Java のコンピュータ言語や ios,android の API を知らなくても ネイティブアプリを作成 & 登録できる HTML, CSS, JavaScript を利用します モバイルデバイスや OS 特有の機能は JavaScript 向けに用意されている PhoneGap の標準 API や Plugin を使ってアクセスします HTML,CSS,JavaScript UIWebView / WebView JavaScript Plugin PhoneGap ライブラリ ネイティブアプリ ios / Adnroid 21
PhoneGap のメリット 仕組み ( 続き ) HTMLコンテンツの作成時に さきほど解説した jquery Mobile を使用することも可能 PhoneGapで開発したネイティブアプリは基本的にWebページなので プログラムは JavaScript で書く!! RPCL の jquery Mobile コンポーネント使用時は jquery を活用することになる 基本的に Webページなので 外部にアクセスする場合は jquery / Ajax / JSON などを使用すればよい 22
PhoneGap - 一般的な作業手順 Webページを HTML5+CSS3+JavaScript で記述する ios PhoneGapをXcodeに統合 PhoneGap 専用プロジェクトを作成 プロジェクトに HTMLコンテンツを追加 ビルド Android Eclipseで通常のAndroidプロジェクトを作成 プロジェクトのアクティビティやマニフェストをPhoneGap 向けに修正 プロジェクトに HTML コンテンツを追加 プロジェクトにPhoneGapライブラリ (phonegap-1.0.0.jar) を追加 ビルド Get Started Guide http://www.phonegap.com/start 23
PhoneGap - RadPHP XE2 の手順 [ ファイル ]-[ 新規作成 ]-[ その他 ]-[Mobile Application] PHP のイベントハンドラは使用できない JavaScript イベントハンドラのみを使用 [ ツール ]-[Wizard for PhoneGap] ios (3.0 ~ 43) 4.3) Xcode 用のプロジェクト一式を生成 Android (1.5 ~) Eclipse 用プロジェクトにも使えるファイル群を生成 24
PhoneGap でネイティブアプリに変換後 25
ハードウェアの機能にアクセスする RadPHP XE2 の Mobile Hardware コンポーネント群 PhoneGap の標準 API をラップした非ビジュアルコンポーネント 例 : RadPHP XE2のMobile Application + RPCLに昔からあるGoogleMap コンポーネント + RadPHP XE2のMGeolocationコンポーネント 26
カメラを起動して 撮影した画像を画面に表示 RPCLが PhoneGapのAPIをラップしたJavaScript 関数を自動生成してくれるので それを呼ぶ 例 : MCapture1Capture(); navigator.device.capture.captureimage( ); 27
17 Th Developer Camp Q & A 28