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

Delphi for PHP で作るリッチコンテンツブログ
エンバカデロ・テクノロジーズ エヴァンジェリスト
高橋 智宏

アジェンダ

• コンポーネントをフル活用しよう• お馴染み、データモジュール• Blogデータの表示用ページ• Blogデータの登録用ページ

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

2

コンポーネントをフル活用しよう

開発環境の進歩と退化

80年代のIDEが登場
エディタ＋コマンドライン型の開発から脱却

ビジュアルRAD

90年代の開発の主流
マウスでドラッグ＆ドロップ、しかしツールやOSに100%依存

Visual BasicC++Builder
Delphi

IDE（統合開発環境）
Turbo C++OSSGUI
LinuxWindows
OOP

1980

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

Java1990

Eclipse2000年代の開発の主流
フリーのツールやオープンソースの活用、でも、開発スタイルは80年代型!!

2000

4

これまでのPHP開発環境に欠けていたもの• Webデザイン• WYSWYGであること• AJAXが簡単に利用できる• あくまでも目的ではなく手段• オープンソースを簡単に活用・再利用できる• プロプライエタリな世界に留まっていてはいけない• コンポーネントアーキテクチャ• 重厚長大ではいけない、しかもオープンソースを活用してこうした点に配慮しつつ、90年代型の開発生産性をWeb開発にも、もたらすことが重要

VCL for PHP
Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

5

VCL for PHP• 今回利用する VCL for PHP の コンポーネント
VCL for PHP

JSCalendar

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

6お馴染み、データモジュール

データベースのセットアップ• RDBMSには、MySQL 5.0 を利用• テーブル構造： create table blog(IDINTEGERNOT NULLBLOGDATE

VARCHAR(10)NOT NULL,TITLE

VARCHAR(255)

NOT NULL,ARTICLETEXTNOT NULL,

AUTO_INCREMENT,PRIMARY KEY(ID),UNIQUE KEY(BLOGDATE));• 主キーは、自動インクリメントを利用する• ADOdbをラップしたTableコンポーネントでは、行追加(INSERT)時に主キーを明示的に指定しなくてよい仕様• データベース/テーブルの文字コードは utf8
Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

8データモジュール！

• Database！

• Table• CharSet• Connected• Active• LimitCount

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

9データモジュールの実装• DatabaseコンポーネントのOnAfterConnectイベント• DB接続を utf8 にする• データモジュールのインスタンスを返す関数• function GetDBModule() {…}• $global を忘れずに• Blogデータを保存(INSERT or UPDATE)するメソッド• public function SaveBlog($date, $title, $article) {…}• GetDBModule()->SaveBlog(‘2008/8/20’, ‘タイトル’, ‘<HTML>…’);• Blogデータを取得(SELECT)するメソッド• public function LoadBlog($date) {…}• $blog = GetDBModule()->LoadBlog(‘2008/8/20’);• ある月のBlog日の日付の配列を返すメソッド• public function GetBlogDays($year, $mon) {…}• $blogdays = GetDBModule()->GetBlogDays(‘2008’, ‘8’);
Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

10データモジュールの実装（続き）• Database, Table - オープンソースライブラリ「ADOdb」をコンポーネント化

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

11

Blogデータの表示用ページ

カレンダ機能を追加する• MonthCalendar• オープンソースライブラリ「JSCalendar」をコンポーネント化• OnUpdate Javascriptイベント• 日付をクリックしたタイミング• OnBeforeShow イベント
• カレンダの表示形式をカスタマイズ• 今回、Javascriptコードを記述しますが、MonthCalendarコン
ポーネントを継承した拡張コンポーネントを作成して隠蔽すれば、再利用可能です• Label x ３個
• 日付
• タイトル• HTMLデータ
Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

13

Blogデータの登録用ページ

BASIC認証の機能を追加する• BasicAuthentication• 「BASIC認証」をコンポーネント化• ErrorMessageプロパティ• OnAuthenticate イベント
• 戻り値 true or false• Execute() メソッド• ページのOnCreateイベントで呼び出す• ページのOnShowイベントなどでは遅すぎる!! なぜ?

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

15

カレンダ機能と隠しフィールド• MonthCalendar - Blogデータの表示用ページと同じ• HiddenField• HTMLの<input type=“hidden” …> をコンポーネント化• 編集中のページの日付をHTMLに埋め込む• [保存]ボタンをクリック時に、編集するBlogの日付をサーバ側で取得

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

16

BlogをHTMLデータとして編集する• RichEdit• オープンソースライブラリ「Xinha」をコンポーネント化• HTMLデータを編集可能• Textプロパティで、HTMLデータを文字列として取得• Label -日付• Edit - タイトル

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

17[保存]ボタンをAjax対応にするには• VCL for PHPは、オープンソースライブラリ「Xajax」を内蔵• Button の ButtonTypeプロパティを btNormal にする• Button の OnClickイベントは使わない!!
• Button の OnClick Javascriptイベントを使う!!
• echo で Ajax用のJavaScriptコードを出力• echo $this->コンポーネント->ajaxCall(“メソッド名");• Page の UseAjaxプロパティを true にセット

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

18

画像ファイルのアップロードとAjax• Uploadコンポーネントをページに配置してみる• <input type=“file” …> をコンポーネント化• しかし…
• ButtonのOnClickイベントであれば、ファイルデータを取得できるが• Ajaxを使うと、ファイルデータは送信されない!!

• 一般的なデザインでは…
• 画像ファイルのアップロード専用のページを作成• インラインフレームを使って、画面の一部として表示<iframe id="KenIFrame1_iframe" src="UploadUnit.php" width="185"height="41"></iframe>

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

19

画像ファイルのアップロードとAjax（続き）• VCL for PHP には iframe をラップしたコンポーネントは無い• 簡単にカスタムコンポーネントを自作できます!!
• QC#61977 - http://qc.codegear.com/wc/qcmain.aspx?d=61977

Copyright ©2008 Embarcadero Technologies, Inc. All Rights Reserved.
本文書の一部または全部の転載を禁止します。

20