INTER-MediatorによるWebアプリケーション開発入門

-- Views

September 14, 13

スライド概要

2013/09/14 FM-Chubu発表資料

profile-image

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

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

INTER-Mediatorによる Webアプリケーション開発入門 2013/9/14 FM-Chubu発表資料 松尾 篤(株式会社エミック)

2.

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

3.

INTER-Mediatorとは

4.

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

5.

INTER-Mediatorの概要 • データベースと連動したWebページを作 成するためのソフトウェア • FileMaker Server、PDO対応データベース (MySQL、PostgreSQL、SQLite)で利用 可能

6.

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

7.

データベースとの連携 • データベースと定義ファイルを用意 • HTMLには要素のclass or title属性に対応 するテーブル名やフィールド名を記述 記述例:<div class="IM[[email protected]]"></div>

8.

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

9.

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

10.

INTER-Mediator 利用事例

11.

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

12.

INTER-Mediatorを利用したサービス例 FMPress(https://www.emic.co.jp/fmpress/) • FileMakerデータベース連動Webアプリケーションを超高速開発 ②アップロード FMPress ③ファイル自動生成 ①データベース開発・DDR生成 ④Webブラウザーからアクセスして利用

13.

INTER-Mediator はじめの一歩

14.

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

15.
[beta]
Step2 定義ファイルを作成
ファイル名:include.php(例)
<?php
require̲once('./INTER-Mediator/INTER-Mediator.php');
IM̲Entry(
array(
array(
'records' => 5,
'paging' => true,
'name' => 'イベントの詳細',
'key' => 'イベント ID 照合フィールド',
),
),
array(),
array('db-class' => 'FileMaker̲FX', 'database' => 'イベント管理'),
false
);

16.
[beta]
Step3 ページファイルを作成
ファイル名:index.html(例)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>INTER-Mediator Sample</title>
<link rel="stylesheet" type="text/css" href="./sample.css"/>
<script src="./include.php"></script>
</head>
<body onload="INTERMediator.construct(true);">
<div id="IM̲NAVIGATOR"></div>
<table>
<tr><td><input type="text" name="eventname" class="IM[イベントの詳細@イベ
ント]"></td></tr>
</table>
</body>
</html>

17.

Step4 IMをダウンロード • develop-imフォルダ内のINTER-Mediator フォルダをindex.htmlと同じ階層に配置 • develop-imフォルダ内のsample.cssファイ ルをindex.htmlと同じ階層に配置

18.

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 = 'FMPro7'; //$dbDatabase = ''; $dbProtocol = 'HTTP';

19.

Demo

20.

FileMaker Server 利用時の注意点 • 定義ファイルに記述するテーブル名は レイアウト名を指定する • テーブルには主キーが必要 • キーフィールドを指定したレイアウト 上に配置する必要がある

21.

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

22.

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