1.
3分ではじめる
スマホアプリのビジュアル開発
16-D-4 高橋 智宏
エンバカデロ・テクノロジーズ
エヴァンジェリスト
Developers Summit 2012

2.
アジェンダ
アジ ンダ
 Embarcadero Technologies とは?
とは?
 ボ ランド(Borland)？
ボーランド Borland)？
ボーランド(
ランド(
 ネイティブ言語で iOS アプリ開発
 Webアプリ
Webアプリ
 ネイティブアプリ
 PHP言語でモバイルアプリ開発
PHP言語でモバイルアプリ開発
 Webアプリ
プ
Webアプリ
 ネイティブアプリ
Developers Summit 2012

3.
エンバカデロについて
ソフトウェアに ソフトウェアライセンス ネットワーク管理型 グローバル企業
かかわってきた 管理技術を提供して ライセンス供給の として展開
0年以 の歴史
20年以上の歴史 10年以上
年以 パイオ ア
パイオニア
ソフトウェアの開発 • 320万のユーザー
ネットワークベースの
から管理に至るまで 2000万以上の • global 2000の97%
ライセンスを12,000
ポートフォリオを拡大 ライセンス • 80ヶ国
以上の組織が利用
エンバカデロ設立 ボーランド(Borland)の
(本社は米国サンフランシスコ) 開発ツール部門と合併
AppWave
ToolCloud
T lCl d
1983 1993 1995 1997 2000 2006 2007 2008 2009
2010 2011
ER/Studio DB Optimizer
RapidSQL Change EA/Studio PowerSQL
Delphi Manager RAD Studio
JBuilder All-Access
InterBase
Delphi.NET
p
CM/Data XE2
CM/Config
IDEの発明 DBArtisan C++Builder
RadPHP ER/Studio Enterprise
Turbo Pascal 3rdRail
Developers Summit 2012

4.
Developers Summit 2012

5.
Embarcadero Delphi XE2
 コンポーネントによるビジュアル開発で 高性能アプリケーションを
コンポ ネントによるビジュアル開発で、高性能アプリケ ションを
開発できるクロスプラットフォーム開発環境(
開発できるクロスプラットフォーム開発環境(IDE) の最新版
 http://www.embarcadero.com/jp/products/delphi
 サポートするプラットフォーム
 Windows OS 32bit / 64bit : Windows XP から Windows Server 2008 R2
 MacOS X : Snow Leopard(10.6) と Lion(10.7)
 iOS : 4.2 から 5.0
Developers Summit 2012

6.
ネイティブ言語でWebアプリを構築
VCL for the Web(IntraWeb)
IDE + ビジュアルデザイナ
Delphi言語 C++言語
I t W bによるW bサ バ 内蔵W bアプリ
IntraWebによるWebサーバー内蔵Webアプリ
•スタンドアロンなWindowsプロセス
•IIS向けのISAPI DLL
デスクトップ版 スマートフォンの
WAP
Webブラウザ Webブラウザ
Developers Summit 2012

7.
通常のWebアプリ作成機能
 GUIアプリを作成する手順と同じ
GUIアプリを作成する手順と同じ
 画面設計
 イベントハンドラ
 画面の更新はAjax対応
画面の更新はAjax対応
 セッション管理は自動
 Web画面
Web画面
 ユーザーデータ
 デバッグ
 スマートフォントのWebブラウザからもアクセス可
スマ トフォントの
スマートフォントのWebブラウザからもアクセス可
トフォントのWeb
 もちろんWeb画面の見た目は異なるが…
もちろんWeb画面の見た目は異なるが…
Developers Summit 2012

8.
iOS向けWebアプリ
リ ( )
(※)
 コントロールを変えるだけで、iOSブラウザ(Webkit)
コントロールを変えるだけで、iOSブラウザ(
に特化したWebアプリに大変身
に特化したWebアプリに大変身
 iPadにも対応可能
iPadにも対応可能
※http://www.tmssoftware.com/site/tmsiwiphone.asp
Developers Summit 2012

9.
ハイパフォーマンスな
GUIアプリケーションプラットフォーム
IDE + ビジュアルデザイナ
Delphi言語 C++言語
共通ランタイム + GUIフレームワーク「FireMonkey」
Direct 2D/3D OpenGL, Quartz OpenGL ES
GPU
Win32 / Win64 Mac OS X iOS
Developers Summit 2012

10.
Why FireMonkey ？
 Windows上で開発
 Delphi(Object Pascal)言語で開発
 GUIはすべて OpenGL(ES) でフルレンダリング
p ( )
 JavaのSwingと似てますね!
 Cocoa APIなども呼び出せます
 FireMonkeyでの「iOSアプリ」開発手順
 フォームを作成
 コントロールを配置
 コントロールのプロパティを設定
 コントロールのイベントハンドラを実装
 Windows上でビルドして動作確認
 最後にXcode上でビルドするだけ
Developers Summit 2012

11.
ビジネスアプリ
Developers Summit 2012

12.
2D / 3D アプリ
Developers Summit 2012

13.
iOSアプリでRESTfulなRPC
アプリで な
 モバイルアプリは リモートサーバーに接続してなんぼでしょ
モバイルアプリは、リモ トサ バ に接続してなんぼでしょ
 サーバー側のビジネスロジックをiOSアプリ内から呼び出したい
 REST（Representational State Transfer）って？
 HTTP(s)を使用した クライアント／サーバー プロトコル
( )を使用 クラ ア
 Webサービス用の通信方式の一種
 よくある課題
 Webサーバーの選択
 サーバー側・クライアント側の言語の選択
 パラメータや戻り値のフォーマット
 JSON or XML ?
 コードは再利用不可
Developers Summit 2012

14.
HTTP(S)/RESTful/JSONによる
サーバー&クライアント通信
 C++言語 or Delphi言語で、クラスのメソッドをクライアントに公開
言語 言語 ク ドをク イ 開
 単一の.exeファイルで、HTTPサーバー機能も内蔵
 クライアント用プロキシコ ドは自動生成!!
クライアント用プロキシコードは自動生成!!
 C++(Win/Mac), Delphi(Win/Mac), .NET, PHP5, JavaScript に対応
 iOS Android BlackBerry Windows Phone に対応
iOS, Android, BlackBerry,
HTTP リクエスト
ビジネスロジック
HTTP(S)/RESTful/JSON
HTTP レスポンス
Developers Summit 2012

15.
Before, After
,
Delphiで書くと…
Objective Cで自前で書くと…
Objective-Cで自前で書くと…
Developers Summit 2012

16.
Developers Summit 2012

17.
Embarcadero RadPHP XE2
 PHP開発で初めてドラッグ＆ドロップによるビジュアル開発
開発 初め ド グ ド
PHP開発で初めてドラッグ＆ドロップによるビジュアル開発 プ よるビジ 開発
を実現した革新的な統合開発環境(
を実現した革新的な統合開発環境(IDE) の最新版
 htt //
http://www.embarcadero.com/jp/products/radphp
b d /j / d t / d h
 内蔵されるPHP環境
 Apache 2 2 15 (Win32)
2.2.15
 PHP 5.2.14 (VC6 x86, Thread Safe版)
 Xdebug 2.1.2
 200種類以上のコンポーネント(もちろん拡張可能)
 RadPHP Component Library
p y
 jQuery Mobile, jQuery, jQuery UI
 PhoneGap
 htt // l
http://rpcl.svn.sourceforge.net/viewvc/rpcl/trunk/rpcl/rpcl/
f t/ i / l/t k/ l/ l/
Developers Summit 2012

18.
DelphiライクなPHP開発
 デザイン情報(.xml.php) + PHPコード(.php)
デ
デザイン情報(.xml.php) PHPコード(.php)
情報(
情報( p p) ( p p)
unit1.xml.php unit1.php
+
Developers Summit 2012

19.
ASP.NETライクなPHP開発
 コンポーネント情報(.xml.php) + HTML(.html) + PHPコード(.php)
コンポーネント情報(.xml.php) PHPコード(.php)
unit2.xml.php unit2.php
unit2.html
Developers Summit 2012

20.
PHPのSmartyエンジンと連携
 コンポーネント情報(.xml.php) + HTML(.html) + PHPコード(.php)
コンポーネント情報(.xml.php) PHPコード(.php)
unit3.xml.php unit3.php
index.html
Developers Summit 2012

21.
モバイル対応Webアプリ？？
Developers Summit 2012

22.
モバイル向けW bサイトのトレンド
モバイル向けWebサイトのトレンド
 Mobile Web Technology Report August 2011
 http://trends builtwith com/Reports/Mobile Web
http://trends.builtwith.com/Reports/Mobile-Web-
Technology-2011/Mobile-Web-Technology-2011.html
 <meta name=“viewport”> タグの登場
p
 モバイル専用コンテンツの提供率
 採用されているモバイル向けライブラリの割合
 jQTouch
 jQuery Mobile
 iUI
 Sencha Touch
 iWebKit
iW bKit
Developers Summit 2012

23.
j
jQuery Mobile とは？
y
 2010年8月11日に始まったオープンソースプロジェクト
 jQueryをベースに モバイルデバイスのWebブラウザに特
jQueryをベ スに、モバイルデバイスのWebブラウザに特
化したGUIを提供するJavaScriptライブラリ
 つい先日 1.0 Final がリリースされました
Developers Summit 2012

24.
サポ トされるプラットフォ ム
サポートされるプラットフォーム
 Aグレード(フルサポート)
グレ ド フルサポート)
グレード(フルサポ ト
ド( ト)
Developers Summit 2012

25.
RadPHP XE2で
PHP Webアプリをビジュアル開発
プ ビ
 GUIアプリ開発と同じ手順で Pure PHP5 + jQuery Mobile のモバイル対応
GUIアプリ開発と同じ手順で、Pure
Webアプリを開発可能!!
Developers Summit 2012

26.
AjaxモードでPHPを呼び出して
Web画面を更新
Developers Summit 2012

27.
PhoneGap とは？
p
 旧Nitobi Software社（先日アドビに買収されまし
た）が開発していた「Webアプリをネイティブアプリ
としてラップしてくれるネイティブライブラリ」
 オ プンソ ス(BSD or MITライセンス)
オープンソース(BSD
 現在は、Apache Callback プロジェクト という名称に変更
 主に iOS, Android, BlackBerry, Windows Phone 向け
Developers Summit 2012

28.
PhoneGapのメリット、仕組み
 Objective-C, Java, .NETのコンピュータ言語や、
iOS Android BlackBerry WP特有のAPIを知らなくても ネイティブアプリを作
iOS,Android,BlackBerry,WP特有のAPIを知らなくても、ネイティブアプリを作
成&登録できる
 HTML, CSS, JavaScript を利用します
 モバイルデバイスやOS特有の機能は、JavaScript向けに用意されている
バイルデバイスやOS特有の機能は J S i t向けに用意されている
PhoneGapの標準API や Plugin を使ってアクセスします
HTML,CSS,JavaScript
JavaScript
Plugin
UIWebView / WebView
PhoneGapライブラリ
ネイティブアプリ
iOS / Android / BB / WP
Developers Summit 2012

29.
PhoneGapのメリット、仕組み(続き)
 HTMLコンテンツの作成時に、さきほど解説した「jQuery Mobile」を使
用することも可能。
 PhoneGapで開発するネイティブアプリは基本的にWebページなので…
 プログラムは、PHP(サーバー側) or JavaScript(クライアント側)で書く
 jQuery Mobile に付属する jQuery も活用する
j y j y
 基本的にWebページなので、外部にアクセスする場合は Ajax, jQuery,
JSON, XML などを使用すればよい
Developers Summit 2012

30.
RadPHP XE2
Wizard for PhoneGap
 基本的に、JavaScriptイ ント ンドラを使用して
基本的に、JavaScriptイベントハンドラを使用してコーディング ディング
 フォームの UseAjax と UseAjaxUri のプロパティを使用すれば、PHPのイベン
トハンドラも利用可能
 http://blogs.embarcadero.com/teamj/2011/10/12/2473/
 http://blogs.embarcadero.com/teamj/2011/10/13/2484/
 iOS (3.0 ～ 5.0)
 Xcode 3 2 6 ～ Xcode 4 2 1用のプロジェクト一式を生成
3.2.6 4.2.1用のプロジェクト 式を生成
 Android (1.5 ～)
 Eclipse用プロジェクトにも使えるファイル群を生成
 BlackBerry
Developers Summit 2012

31.
ネイティブアプリに変換すると…
Developers Summit 2012

32.
Thank You 
ttakahashi@embarcadero.com
Delphi XE2
Delphi XE2
RadPHP XE2
RadPHP XE2
Developers Summit 2012