INTER-MediatorによるWebアプリケーション開発入門(2014年版)

スライド概要

2014/11/25 INTER-Mediator勉強会2014-#7発表資料

profile-image

松尾篤

@matsuo_atsushi

作者について:

株式会社エミック代表取締役。Claris FileMaker 認定デベロッパ、kintone認定 アプリデザインスペシャリスト(2020年2月)、kintone認定 カスタマイズスペシャリスト(2020年3月)。 https://www.emic.co.jp/

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2014-11-25 21:00:00

各ページのテキスト

1. INTER-Mediatorによる Webアプリケーション開発入門 (2014年版) 2014/11/25 INTER-Mediator勉強会2014-#7発表資料 松尾 篤(株式会社エミック)

2. Agenda • INTER-Mediatorとは • INTER-Mediator利用事例 • INTER-Mediatorはじめの一歩

3. INTER-Mediatorとは

4. INTER-Mediator • Webアプリケーションフレームワーク • オープンソース(MITライセンス) • 新居雅行氏が開発、2010年1月に公開

5. INTER-Mediatorの概要 • データベースと連動したWebアプリケー ションを開発できる • HTMLへの属性追加と設定ファイルを作 成するだけで開発できる

6. 対応データベース • MySQL • FileMaker Server • PostgreSQL • SQLite

7. INTER-Mediatorの特長 • データベースとの連携が容易 • デザインとロジックの分離を実現 • 簡単さと拡張性を両立

8. データベースとの連携 • データベースと定義ファイルを用意 • HTMLには要素のdata-im属性に対応する テーブル名やフィールド名を記述 記述例:<div data-im="person@name"></div>

9. デザインとロジックの分離 • インターフェースをPure HTMLで記述 (独自のタグや属性の追加はなし) • デザイナーとプログラマーの分業がし やすい

10. 簡単さと拡張性を両立 • 基本的な機能の設定や変更を宣言的な 記述で実現できる • 複雑な処理や細かな制御は手続き的な プログラミングで拡張可能

11. INTER-Mediator 利用事例

12. INTER-Mediatorを利用したサイト例 ふち無しはがき印刷本舗 • オンデマンド印刷の受注およびユーザーページの運用

13. INTER-Mediatorを利用したシステム例 naha̲regi • YiiとINTER-Mediatorを利用して開発された簡易レジスタシステム

14. INTER-Mediatorを利用したサービス例 FMPress Publisher • FileMakerデータベースからWebアプリを生成

15. INTER-Mediator はじめの一歩

16. Step1 データベースを用意 FileMaker Serverでホスト アカウント設定やXML Web公開でのアクセスを許可する設定も必要

17. Step1 データベースを用意 FileMaker Serverでホスト アカウント設定やXML Web公開でのアクセスを許可する設定も必要

18. [beta]

Step2 定義ファイルを作成
ファイル名:include.php(例)
<?php
require̲once(dirname(̲̲FILE̲̲) . '/INTER-Mediator/INTER-Mediator.php');
IM̲Entry(
array(
array(
'records' => 5,
'paging' => true,
'name' => 'イベントの詳細', // レイアウト名
),
),
array(),
array('db-class' => 'FileMaker̲FX', 'database' => 'イベント管理'),
false
);

19. [beta]

Step3 ページファイルを作成
ファイル名:index.html(例)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>INTER-Mediator Sample</title>
<link rel="stylesheet" type="text/css" href="./INTER-Mediator/Samples/
sample.css">
<script type="text/javascript" src="./include.php"></script>
</head>
<body onload="INTERMediator.construct(true);">
<table><tr><td><input type="text" name="eventname" data-im="イベントの詳細@
イベント"></td></tr></table>
</body>
</html>

20. Step4 IMをダウンロード • 「INTER-Mediator」というフォルダ名で index.htmlと同じ階層に配置 •

21. Step5 DB接続情報の設定 ファイル名:params.php <?php /* * common settings for DB̲FileMaker̲FX and DB̲PDO: */ $dbUser = 'web'; $dbPassword = 'password'; /* * DB̲FileMaker̲FX aware below: */ $dbServer = '127.0.0.1'; $dbPort = '80'; $dbDataType = 'FMPro12'; //$dbDatabase = ''; $dbProtocol = 'HTTP';

22. Demo

23. FileMaker Server 利用時の注意点 • 定義ファイルに記述するテーブル名は レイアウト名を指定する • 表示や入力に必要なフィールドをレイ アウト上に配置する • テーブル内の主キーや定義ファイルで のキーフィールドの指定は不要

24. まとめ • INTER-Mediatorは…… • データベースとの連携が容易 • デザインとロジックの分離を実現 • 簡単さと拡張性を両立

25. 関連URL • INTER-Mediator http://inter-mediator.org/ https://github.com/msyk/INTER-Mediator