わりと使えそうHTML5  Builder

毛利春幸

前回 東京から中山さんに来て頂きました

•  前回東京から中山さん来て頂いて  １泊して観光して帰られたとの事です  

•  中山さんありがとうございます。

■NEWS •  今週デブサミが目黒雅叙園でありました  •  Delphiユーザー会として  

中山さん林さんやましょうさんが  ブースをたてておられました  

僕は今週大阪だったので  デブサミには行けてません

■NEWS2

•  デブサミ2015雅叙園エンバカデロさんのブースもあったみたいです

←伊賀さんです

■NEWS3

•  エンバカデロさんキャンペーン開始です

ご存知の方教えてください。  これなに？  

HTML5  Builder。

•  またDelphiと無関係な話ですいません  •  RAD  Studio  製品を買うとHTML5  Builderついて

ますよね  •  つかったりされてますか？  •  あんがい使える事を最近知りました  

HTML5やPHPどうやって書いてますか？

•  PHP書いたりデバッグしたりするフリーソフトたくさんありますよね  

•  Eclipseとか  •  Aptana  Studioとか  •  他にもたくさんの環境があると思います  •  僕の中のHTML5  Builderはその沢山ある  PHPデバッグ出来る環境の一つと位置づけてます

HTML5Builderのうれしいところ

•  インストールが楽  •  簡単にローカルデバッグができます  •  jQueryが何も考えず使えます  •  PHPはそのまま書ける  •  PHPのコード補完  •  jQueryのコード補完(これ必要？？)  •  専用コンポーネントが使えます

ひょっとしてエンバカデロさん気合入れて作ってないかも？

•  HTML5  Builder起動時XE5と出ます  •  ですがオンラインヘルプ起動すると

なぜかXE3？

RPCL,  Zend,  NuSOAP,  jQuery

•  RPCL エンバカさんが作った？  PHP用VCLもどきのFrameworkです(LGPL)  

•  Zend  Framework  (ZF)  は、PHP  5 で実装されたオープンソースのオブジェクト指向Webアプリケーションフレームワークであり、修正BSDライセンスで提供されている(wikiペタ)  

•  NuSOAP  これも同じくオープンソース  •  jQuery 皆さんご承知の通り

何が作れるのか

ファイル新規作成

JavaScript  +  HTML  記述はjQuery風に行う

JavaScript  +  PHP(HTML)  記述はPHPとjQuery風

PHPは使わないので  ブラウザベースでの挙動となる

PHPファイルがServerで実行前提  

新規作成　クライアントページ

•  クライアント ページは、クライアント側技術のみを実装した Web  ページです。

•  サーバー Web  ページとは異なり、クライアント Web  ページは動作するのに Web  サーバーに頼る必要はなく、インターネット接続がなくても、どこででも Web  ブラウザで開くことができます。

•  それでも、配布を目的として、他のあらゆる Web  ページと同様に、Web  サーバーに配置することはできます。

ファイルの拡張子がJSになります

デバッグ実行 クライアントページ

•  デバッグ実行してみるとPHPになってます

PHP

なぜかデバッグの時だけがPHPになります

クライアントページ作成時のファイル

•  内部のファイルはどうなっているのでしょう

５つのファイルが出来ていました

*.bomと*.htmlは0KByteのようです

*.PHPと*.JSには実際なにが書かれているのか気になります

クライアントページ 作成時のPHPファイル

•  クライアントページ作成時に作成されるPHPファイルの中身

class  Unit4  extends  Page  {          public  $Bu`on1  =  null;          public  $Label1  =  null;  }    global  $applicadon;    global  $Unit4;    //Creates  the  form  $Unit4=new  Unit4($applicadon);    $Unit4-­‐>isclientpage=true;    //Read  from  resource  file  $Unit4-­‐>loadResource(__FILE__);    //Shows  the  form  $Unit4-­‐>show();  

ClassがNewされてShow()されるまでが  書いてありました  

コードはPHPですね

*.xml.phpと言うファイルもあるので  それも見てみます

クライアントページ *.xml.php •  ビジュアルフォーム関係のオブジェクトタグでした

<?php  <object  class="Unit4"  name="Unit4"  baseclass="Page">      <property  name="Animadons">a:0:{}</property>      <property  name="Background"></property>      <property  name="Capdon">Unit4</property>      <property  name="Height">370</property>      <property  name="HiddenFields">a:0:{}</property>      <property  name="Name">Unit4</property>      <property  name="Width">597</property>      <object  class="Bu`on"  name="Bu`on1"  >          <property  name="Animadons">a:0:{}</property>          <property  name="Capdon">Bu`on1</property>          <property  name="Height">35</property>          <property  name="Ler">7</property>          <property  name="Name">Bu`on1</property>          <property  name="Top">13</property>          <property  name="Width">171</property>      </object>      <object  class="Label"  name="Label1"  >          <property  name="Animadons">a:0:{}</property>          <property  name="Capdon">Label1</property>          <property  name="Height">19</property>          <property  name="Ler">7</property>          <property  name="Name">Label1</property>          <property  name="Top">63</property>          <property  name="Width">163</property>      </object>  </object>  ?>

Bu`on1

Label1

クライアントページでHello  World

•  Bu`on1.OnClick()を使ってLabel1に  「Hello  World」を出してみました。

記述する内容はjQuery(JavaScript)です

Bu`onのEventHandlerを  Delphiの時と同じように作成します  

クライアントページでHello  World

•  「F9」デバッグでブラウザが起動します

このPHP拡張子は気になりますが  Java  Scriptが実行されています

ボタンをClickすると 「Hello  World<br  />jQuery」と表示されました。

クライアントページでHello  World

•  Java  ScriptなのでBu`onは  Submitではありません。

Bu`onType  =  btNormalに  しないとリロードしてしまいます

クライアントページ 配置

•  PHPファイルがどうなるか気になるので  先にクライアントページの配置をしてみました。

配置実行→

ちゃんとHTMLファイルで実行できました。

クライアントモバイルページ 新規作成

•  クライアント モバイル ページは、クライアント側技術のみを実装したモバイル ページです。

•  サーバー モバイル ページとは異なり、クライアント モバイル ページは動作するのに Web  サーバーに頼る必要はなく、動作するのにインターネット接続に頼らないネイティブ Web  アプリケーションとしてモバイル プラットフォームに配置できます。

•  それでも、配布を目的として、他のあらゆる Web  ベース アプリケーションと同様に、Web  サーバーに配置することはできます。

クライアントモバイルページ 新規作成２

•  クライアントモバイルページを新規作成してみます。

っぽい画面が出てきました。  これも先ほどと同じようなjsファイルです

クライアントモバイルページにBu`on配置

•  クライアントモバイルページにBu`onとEditを配置してみました。

先ほどとは違う感じでモバイルっぽい  ボタンになりました。

クライアントモバイル「F9」実行

•  クライアントモバイルページで「F9」デバッグ実行してみます。

見た目が  モバイルっぽくなりましたが  中身はjQueryです

クライアントモバイルで「Hello  World」

•  クライアントモバイルページのMbu`onのClickイベントを作成し「Hello  Mobile」をMeditに出してみます  

•  実装方法はクライアントページの方法と同じです

ボタンをClickすると  Editエリアに「Hello  Mobile」が  

でました  

クライアントモバイル iPhone

•  IDEの見た目をiPhoneにしてみました  

Delphiでスケルトン作って組み合わせても良いかもです

クライアントモバイルの配置

•  クライアントモバイルも同じく配置実行する事でhtml吐き出しが可能です

HTML吐き出しすると*.css,  *.html,  *.js,  *_php.jsが出来ました

Adobe  PhoneGap  (Android)として配置

•  AdobeのCloudを利用してPhoneGapのコンパイルが可能です  

•  Cloud上で APKまで作ってくれるみたいです

でも．．．．

以前ボクのアカウントでテストしててLimit  reachedでした。

新規作成 「サーバーユニット(php)」

•  新規作成 項目にサーバーユニットがあります  

こんなアイコンです

純粋なPHPはこの項目を選択して記述するのがよろしいかと思います

簡単なサンプルを組んで試してみようと思います  

サンプルphpinfo();

•  まず試すと言えばphpinfo()です  

F9実行してみます↓

動きました  PHP5.3.6みたいな事書いてます

PHPエディタ

•  HTML5  BuilderはPHPエディタだ！  と思った時に少し便利かなっと思った事

Delphiみたいなコード補完なのでわかりやすい

新規作成 「サーバーページ」

•  サーバー ページは、サーバー内で動作する Web  ページです。

•  任意のサーバー側またはクライアント側 Web  技術を使用することができ、データベース操作と AJAX のサポートが組み込まれています。

•  高度なインターフェイス ローカライズ機能も使用可能です。

•  いったんサーバーに配置されれば、任意のデバイスから Web  ブラウザを通じてアクセスすることができます。

「サーバーページ」

•  純粋なPHPエディタとは違いフォーム画面が出てBu`onなどの配置が行えます  

•  構成はクライアントページに似てます  •  イベントハンドラーに特徴があります

サーバーページ新規作成

•  新規作成するとフォームが出てきます  •  F12するといつものようにエディタ画面が開きます

サーバーページにボタン配置

•  サーバーページにボタンコンポーネントを配置

オブジェクトインスペクタが  プロパティ・イベント以外に  JavaScriptがあります  

PHPイベントとJavaScriptイベント

•  サーバーページはPHPとJavaScriptとを  同時に同じエディタ内で記述できます

PHP

JavaScript

サーバーページデバッグ実行

•  F9でサーバーページデバッグ実行

HTML5なので

•  HTML5なので頑張れば こんな事もできます

WebGL  JavaScriptで書いています  

まとめ

•  FireMonkyと組み合わせれば  いろんな事ができそうです  

•  配置実行は面倒ですが  純粋なPHPエディタとしても使えそうです  

•  HTML5  Builderは残りそうですか？  •  HTML5  Builder無くなった時にソースはどうな

る？