INTER-Mediator《大》勉強会
今日から使えるWebアプリを作る・ハンズオン大会

2015-08-08 (Sat) at NII

本日の予定

13:00〜13:30：プレゼンター新居雅行

INTER-Mediatorで作るWebシステム〜基本から開発モデルまで

13:30〜16:30：モデレーター飯島基文

INTER-Mediatorハンズオン大会

16:30〜16:50：プレゼンター新居雅行

MySQLで使うINTER-Mediator

16:50〜17:10：プレゼンター松尾篤

FileMaker Serverで使うINTER-Mediator

17:10〜17:40：モデレーター飯島基文：Q&A

18:00〜：懇親会（同じ会場で行います）

お手洗い、タバコ、非常階段の位置のご案内
飲食は常識的な範囲でOKです。自販機はこのフロアにあります

INTER-Mediator《大》勉強会
INTER-Mediatorで作る
Webシステム
基本から開発モデルまで

2015-08-08 (Sat) at NII

Masayuki Nii

nii@msyk.net

msyknii

msyk_nii

このプレゼンはhttp://nii.ac/JQoDから

自己紹介：新居雅行（にいまさゆき）

システム開発業を自営業者として行う

iOSやOS Xのネイティブアプリケーション

FileMakerのソリューション開発。特にカスタムWeb

データベース絡みのWebアプリケーション

コンサルティング、トレーニングコース開発、トレーナー

INTER-Mediatorとの関わり

2009年(大晦日-1)に突然開発し、動き出す

2010年公開、半年でスクラッチから書き直す

2011年ごろから実用度が上がり、案件に使い始める

2013年にソフトウェア論文が通る、エミックがFMPress Publisherを開発

2015年にINTER-Mediatorの研究で電気通信大学より博士（工学）を取得

Agenda

Webアプリケーション、データベース等の基本概念（ごく簡単に）
INTER-Mediatorで作るWebアプリケーション
システム開発とINTER-Mediator

INTER-MediatorによるWebアプリケーション

基本概念

Webアプリケーションとは？

サーバーからWebブラウザにダウンロードして実行されるアプリケーション

サーバーサイドでの処理実行

古くからあるCGIの仕組み（サーバーにリクエストを送ると、レスポンスが返る）

クライアントサイドでの処理実行

JavaScriptで記述されたプログラムで、ユーザーの要求に応じて即座に処理を実施

なぜデータベースが使われるのか？

データを一元的に共有したい

クライアントサイドにファイルで配布したExcelファイルはもはや管理不可能

複数のユーザーが同一のデータを参照するには、一元化がいちばん単純

データを安定的に記録したい

メモリだと電源オフで消えてしまう。であれば、磁気メディア等に記録すれば良い

記録したデータを効率的に利用したい

大量のデータを扱える、必要なデータだけを取り出せるなどの利便性が必要

これらを満たすのは？

リレーショナル・データベース・エンジン（例えば、MySQL）

業務システムとWeb利用

データベースを核にして業務システムが作成できる

“問い合わせ”が容易にできるデータベースは、ビジネス現場の要求を満たす

RDBが扱えるデータとビジネスデータに親和性

表形式のデータ（リレーション）は、現実のビジネスデータの基本形

Web利用によって満たされるニーズ

標準規格がベースであり、（原則として）デバイスを選ばない

管理対象は基本的にはサーバーに集中している

フレームワークとしてのINTER-Mediator

Webページ開発の流れ

上流工程はほかのフレームワークと同様

要求分析、ドメイン分析ができている

それらに基づいてデータベースのスキーマが定義され適用されている

アプリケーションの大枠を開発

定義ファイル：データベース接続時や動作の定義

ページファイル：バインディング情報を含めたHTMLのテンプレート

いずれも宣言的な記述で完結する

高度な要求があれば、対応するためのプログラムを開発

ユーザーインタフェースの改善：クライアントサイドのJavaScript

データ処理の拡張：サーバーサイドのPHP

定義ファイル

コンテキストの定義

コンテキスト＝データベースのテーブルやビューに意味づけをしたもの

検索条件やソート条件を交えたデータベースアクセスのルール

そのほか、ユーザーインタフェース上の動作などの定義

そのほかの定義可能な内容

データベースへの基本的な接続指定

認証や認可に対する設定、など

コンテキストについて

定義ファイルの例

PHPのコードで記述するが、プログラムではなく連想配列

require_once('INTER-Mediator.php');	// Importing the framework.

IM_Entry(	// Always IMEntry function.
    array(
        array(   // This array is referred as "Context."
            'name' => 'person',
            'view' => 'person_layout',	// Layout name for reading from DB
            'table' => 'person_layout',	// Layout name for writing to DB
            'records' => 1,
            'paging' => true,
            'repeat-control' => 'confirm-delete confirm-insert',
        ),
    :

定義ファイルエディタ

PHPのコードで書かなくてもエディタで作成可能

ページファイル

HTMLのルールを外れることなくテンプレートを記述

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Sample Page</title>
    <script type="text/javascript" src="def25.php"></script>   // Including the Framework
</head>
<body onload="INTERMediator.construct()">   // Generating Page
  <div>Search: <input type="text" data-im="_@condition:person:name,mail:*match*" /></div> // For 6. Search UI
  <div id="IM_NAVIGATOR"></div>  // For 2 Pagenation
  <table style="float:left;margin-right:20px;">   // 5. This is Master Component
    <tbody>   // 2. This is "Enclosure"
      <tr>      // 2. This is "Repeater"
        <td></td>
        <td><div data-im="person@name"></div><div data-im="person@mail"></div></td>
        <td></td>    // 1. data-im attribute binds a element to the database
      </tr>
    </tbody>
  </table>

ページ合成の動作のポイント

バインディング、モデル連動

複数レコードに対応する繰り返し

再帰的な定義によるリレーションシップの適用

バインディング、モデル連動

ページ上の要素とデータベースの特定のフィールドが連動

data-im属性を記述するだけで実現

ページ上の同一フィールドへも変更結果は波及

複数レコードに対応する繰り返し[1]

複数レコードに対応する繰り返し[2]

再帰的な定義によるリレーションシップの適用[1]

再帰的な定義によるリレーションシップの適用[2]

再帰的な定義によるリレーションシップの適用[3]

システム開発とINTER-Mediator

システム開発の問題点

開発作業を全て外注する習慣が強い

利用者が開発に関わる習慣がない？　あるいは避けている？　あるいは誤解？

メンテナンスのかかるコストは非常に高い

日本におけるいくつかの調査では開発費と同等かそれ以上にかかる

その結果として

意図したシステムが作られない。業界はその際のトラブル回避を積極的に展開

予算が続かずメンテナンスされず、結果的に使えない、使われれないシステムへ

問題点の解決ができるとしたら

エンドユーザーのシステム開発への参画がキーになると考える

業務システムのエンドユーザー、あるいは、オンラインサービスの場合だと、サービス提供者を、ここでは「エンドユーザー」と呼ぶことにする

エンドユーザー参画におけるメリットとデメリット

メリット	対応するデメリット
予算を抑えられる	人件費に転化される，兼任スタッフが多忙になる
保守の即時対応	（同上）
現場担当者が取り組める	技術の習得が必要，少ない学習コストで使えるツールが必要
現場の知識を活用	システムの抽象化が不十分になる，仕様書不在になりがち
要件の明確化	担当者の知識範囲外が考慮されない，将来を見越した設計にならない
的確なテストができる	システム的な限界点をテストできない
自由にシステム運用ができる	組織から見れば非効率，セキュリティ方針やコンプライアンスに対する違反の可能性

INTER-Mediatorを利用した開発のプロセス

INTER-Mediatorが可能とする貢献

低い学習コストから、現場担当者が取り組める

プログラミング言語より容易なHTML

学習実験から、Webデザイナーは2時間程度で問題がある程度解けるレベルになった

コード量が少なくなり、コスト削減につながる

同一のアプリケーションをCodeIgniterと比較するとコード量は約半分だった

現場担当者自身が使用しながら保守を行える

保守作業において、宣言的な記述の変更でできる範囲が他のフレームワークより多い

INTER-Mediatorはプログラマの仕事を奪うか?

全てをエンドユーザーができるわけではない

全体的なマネージメントはエンジニアが行う必要がある

手が空いた分は、上流工程に時間をかけるようにできる

要求に応じるには、プログラムを書かないといけない場面は多々ある

FileMaker市場からの類推

FileMakerは「誰でも簡単にデータベースが作成できる」点を謳う

実際には一定上の難易度のシステムは業者が作っている

INTER-Mediatorによるワークフローの改善を目指せる

小さな改変は顧客で進め、エンジニアは全体的な統括とプログラムが必要な箇所を担当する

まとめ

INTER-Mediatorはデータベースを利用するWebアプリケーションを開発するためのフレームワークです。
HTMLのページファイル、PHPによって記述される設定を含む定義ファイルの2つを作成します。
宣言的な記述のみで、バインディグ、繰り返し、リレーションシップなど、アプリケーションの骨格をなす機能を構築できます。
エンドユーザーを巻き込むシステム開発が可能な開発プラットフォームです。

このプレゼンはhttp://nii.ac/JQoDから

INTER-Mediator《大》勉強会
ハンズオン大会

2015-08-08 (Sat) at NII

Masayuki Nii

nii@msyk.net

msyknii

msyk_nii

ハンズオンの資料はhttp://nii.ac/LdXEから

このプレゼンはhttp://nii.ac/JQoDから

INTER-Mediator《大》勉強会
MySQLで使うINTER-Mediator

2015-08-08 (Sat) at NII

Masayuki Nii

nii@msyk.net

msyknii

msyk_nii

このプレゼンはhttp://nii.ac/JQoDから

Agenda

MySQLサーバーへの接続
アプリケーション構築上のポイント
PDO対応データベース
INTER-Mediatorの開発コミュニティ

MySQLサーバーへの接続

基本的には全てをDSNで記述

ソケットでもホスト接続でも構わない

文字エンコードはutf8ではなく、utf8mb4を使用すべき

インデックスは自前で設定することから、検索や並べ替え対象のフィールドでは忘れずに設定する

プロバイダでの利用

制約が多かったり、古いバージョンだったりと苦労はある

どうしても「set use utf8」を実行したい場合、対処方法はある

アプリケーション構築上のポイント

一般的な考慮点

スピードは速いので、あまり神経は使わなくてもいいとも言える

1ページ、数万レコードを出すような使い方はINTER-Mediatorには向かない

MySQLだと、データベース処理はできてしまうが、ブラウザ側のレンダリングに時間がかかる

検索して集計するような処理は、場合によっては生成されるSQLの工夫やビューの工夫が必要

ビューをうまく使いこなす

セキュリティ設定を適切に行う

ビューをうまく使いこなす

ビューによって実現すること

リレーション等で得られるデータが1回のアクセスでも得られ、スピードアップ

複雑なデータ構造でも、必要なデータに絞れば、ページファイルの構築はやりやすくなる

OPTIONタグ内にタグは配置できないなどの制約を回避できる

コンテキストの定義

READに対する“view”キー、CREATE/UPDATE/DELETEに対する“table”キー

双方で主キーを合わせれば、動作は正しく行われる

セキュリティ設定を適切に行う

理想は、データベースのユーザーを3段階に分ける

管理ユーザー：データベース定義コマンドを実行できる

読み書きユーザー：INSERT、DELETE、UPDATE、SELECTが実行できる

読み出しのみユーザー：SELECTが実行できる

定義ファイルでユーザーを使い分ける

管理ユーザーは原則としてアプリケーションで使わない

通常は、読み出しのみのユーザーで運用する

データベース更新処理があるところだけ、読み書きユーザーを適用する

そのほかのPDO対応データベース

SQLiteはMySQLとほぼ同等

PostgreSQL

“sequence”キーによりSEQUENCEオブジェクトを特定する必要がある

そのほかの対応データベース

PDO対応であれば、動作は可能であるはず

だが、コード内にデータベースごとの分岐部分がいくつかあり、そこにコード追加が必要

INTER-Mediatorの開発コミュニティ

INTER-Mediatorの学習コンテンツ

演習を通じて開発手法を学習できる電子書籍

5,400円（税込）で販売中

INTER-Mediator-Server VMを利用して演習を実施

INTER-Mediatorの開発に関わりませんか？

INTER-Mediator Directive Committee

開発、マーケティングなどの活動をドライブするグループ

Committers on GitHub

開発結果を集約、現在はサイトもレポジトリベース

Facebook Group

INTER-Mediatorに関するさまざまなことを話題にするコミュニティ

Q&A

このプレゼンはhttp://nii.ac/JQoDから

INTER-Mediator《大》勉強会今日から使えるWebアプリを作る・ハンズオン大会

本日の予定

13:00〜13:30：プレゼンター 新居雅行

INTER-Mediatorで作るWebシステム〜基本から開発モデルまで

13:30〜16:30：モデレーター 飯島基文

INTER-Mediatorハンズオン大会

16:30〜16:50：プレゼンター 新居雅行

MySQLで使うINTER-Mediator

16:50〜17:10：プレゼンター 松尾篤

FileMaker Serverで使うINTER-Mediator

17:10〜17:40：モデレーター 飯島基文：Q&A

18:00〜：懇親会（同じ会場で行います）

INTER-Mediator《大》勉強会INTER-Mediatorで作るWebシステム基本から開発モデルまで

自己紹介：新居雅行（にいまさゆき）

システム開発業を自営業者として行う

iOSやOS Xのネイティブアプリケーション

FileMakerのソリューション開発。特にカスタムWeb

データベース絡みのWebアプリケーション

コンサルティング、トレーニングコース開発、トレーナー

INTER-Mediatorとの関わり

2009年(大晦日-1)に突然開発し、動き出す

2010年公開、半年でスクラッチから書き直す

2011年ごろから実用度が上がり、案件に使い始める

2013年にソフトウェア論文が通る、エミックがFMPress Publisherを開発

2015年にINTER-Mediatorの研究で電気通信大学より博士（工学）を取得

Agenda

INTER-MediatorによるWebアプリケーション

基本概念

Webアプリケーションとは？

サーバーからWebブラウザにダウンロードして実行されるアプリケーション

サーバーサイドでの処理実行

古くからあるCGIの仕組み（サーバーにリクエストを送ると、レスポンスが返る）

クライアントサイドでの処理実行

JavaScriptで記述されたプログラムで、ユーザーの要求に応じて即座に処理を実施

なぜデータベースが使われるのか？

データを一元的に共有したい

クライアントサイドにファイルで配布したExcelファイルはもはや管理不可能

複数のユーザーが同一のデータを参照するには、一元化がいちばん単純

データを安定的に記録したい

メモリだと電源オフで消えてしまう。であれば、磁気メディア等に記録すれば良い

記録したデータを効率的に利用したい

大量のデータを扱える、必要なデータだけを取り出せるなどの利便性が必要

これらを満たすのは？

リレーショナル・データベース・エンジン（例えば、MySQL）

業務システムとWeb利用

データベースを核にして業務システムが作成できる

“問い合わせ”が容易にできるデータベースは、ビジネス現場の要求を満たす

RDBが扱えるデータとビジネスデータに親和性

表形式のデータ（リレーション）は、現実のビジネスデータの基本形

Web利用によって満たされるニーズ

標準規格がベースであり、（原則として）デバイスを選ばない

管理対象は基本的にはサーバーに集中している

フレームワークとしてのINTER-Mediator

Webページ開発の流れ

上流工程はほかのフレームワークと同様

要求分析、ドメイン分析ができている

それらに基づいてデータベースのスキーマが定義され適用されている

アプリケーションの大枠を開発

定義ファイル：データベース接続時や動作の定義

ページファイル：バインディング情報を含めたHTMLのテンプレート

いずれも宣言的な記述で完結する

高度な要求があれば、対応するためのプログラムを開発

ユーザーインタフェースの改善：クライアントサイドのJavaScript

データ処理の拡張：サーバーサイドのPHP

定義ファイル

コンテキストの定義

コンテキスト＝データベースのテーブルやビューに意味づけをしたもの

検索条件やソート条件を交えたデータベースアクセスのルール

そのほか、ユーザーインタフェース上の動作などの定義

そのほかの定義可能な内容

データベースへの基本的な接続指定

認証や認可に対する設定、など

コンテキストについて

定義ファイルの例

PHPのコードで記述するが、プログラムではなく連想配列

定義ファイルエディタ

PHPのコードで書かなくてもエディタで作成可能

ページファイル

HTMLのルールを外れることなくテンプレートを記述

ページ合成の動作のポイント

INTER-Mediator《大》勉強会
今日から使えるWebアプリを作る・ハンズオン大会

13:00〜13:30：プレゼンター新居雅行

13:30〜16:30：モデレーター飯島基文

16:30〜16:50：プレゼンター新居雅行

16:50〜17:10：プレゼンター松尾篤

17:10〜17:40：モデレーター飯島基文：Q&A

INTER-Mediator《大》勉強会
INTER-Mediatorで作る
Webシステム
基本から開発モデルまで

利用者が開発に関わる習慣がない？　あるいは避けている？　あるいは誤解？

INTER-Mediator《大》勉強会
ハンズオン大会

INTER-Mediator《大》勉強会
MySQLで使うINTER-Mediator