1.2. 目的

本ガイドラインは、画面遷移を基本とするウェブアプリケーション開発のフレームワークMacchinetta Client (1.x)を構成するJavaScriptやCSSのライブラリ・フレームワーク(以降、構成ライブラリ)の主な利用方法を説明する。

本ガイドラインを読むことで、次の2点を達成することを目的としている。

• Macchinetta Client (1.x)を利用したウェブアプリケーション開発、特に多くのウェブアプリケーションで頻繁に求められる機能のコーディングが円滑に進むこと。
• 構成ライブラリへの理解を深めることにより、最終的にライブラリの公式リファレンスを基に本ガイドラインで記載している機能以外のコーディングも円滑に行えるようになること。

1.3. 留意事項

以下の点に留意すること。

• Macchinetta Client (1.x)の構成ライブラリは、多くのウェブアプリケーションで頻繁に求められる機能を基に選定されている。
• 構成ライブラリは必ずしもすべてを利用する必要はないため、必要なライブラリを選択し、利用すること。
• 個別の要件によっては構成ライブラリ以外にも有用なライブラリ・フレームワークがあるため、それらの利用も検討すること。
• 実際のアプリケーション開発では、サーバとの連携が必要となる。サーバサイドについては、Macchinettaオンライン版 開発ガイドライン ( http://macchinetta.github.io/server/guideline/の Macchinetta Server Framework (1.x) Development Guideline ) を参照すること。

1.4. 対象読者

本ガイドラインはウェブプリケーション開発経験のあるアーキテクトやプログラマ向けであり、 以下を前提としている。

• HTML・CSS・JavaScriptに関する基礎的な知識がある
• jQueryに関する基礎的な知識がある

1.5. 構成

• 2章 構成ライブラリ

  構成ライブラリのバージョン、主な機能、公式サイト、依存ライブラリなどを説明する。

• 3章 UIコンポーネント

  UIコンポーネントに関する構成ライブラリの利用方法を、サンプルとソースコードを用いて説明する。

• 4章 テーブル

  テーブルに関する構成ライブラリの利用方法を、サンプルとソースコードを用いて説明する。

• 5章 操作性向上・制御

  ユーザー操作の制御や補助に関する構成ライブラリの利用方法を、サンプルとソースコードを用いて説明する。

• 6章 非同期処理

  非同期処理に関する問題点と改善方法を、サンプルとソースコードを用いて説明する。

• 7章 JavaScriptの開発方法

  JavaScriptの開発に関する問題点や改善方法などを説明する。

• 8章 付録

  構成ライブラリを使用する際のTipsや構成ライブラリ以外の便利なライブラリの使用方法を説明する。

1.6. 動作確認環境

本ガイドラインにて紹介するサンプルコードについては以下の環境で動作確認を実施している。

ブラウザ	バージョン
Internet Explorer	11.576.14393.0
Mozilla Firefox	ESR 45.5.1
Google Chrome	55.0.2883.75 m

Warning

Google Chrome を使用する場合、以下のサンプル（Ajax通信箇所）はWebサーバ上に配置する必要がある。ローカルに配置した場合はブラウザ仕様により動作しないため注意すること。

機能	サンプル名
テーブルのスクロールによる非同期データ取得	SlickGridによる非同期データ取得サンプル
画面要素間の連動	非同期通信を使用したドロップダウンリストの連動
Deferredによる非同期処理制御	Ajaxの再利用

1.7. 更新履歴

更新日付	改訂箇所	改訂内容
2017-5-31	-	1.1.0.RELEASE公開
	全般	ガイドラインの全般的な修正 章立ての見直し 記載内容の一部を表形式に修正 ガイドライン内のコードスニペットに記載していたコメントを、本文内に表形式で記載するよう修正 利用方法に影響しない誤記や表現の修正 ガイドラインに付随するサンプルコードの全般的な修正 OSSライブラリの格納先を集約 HTMLに実装されているstyleをCSSファイルに切り出すよう修正
	留意事項	記載内容の変更 クライアントSPA版に関する記載を削除
	構成	記載内容の変更 ガイドラインの拡充に伴う構成追加を反映
	動作確認環境	記載内容の変更 動作確認した各ブラウザのバージョン情報を修正 Google Chromeで動作させることができないサンプルの一覧および注意事項を追加
	構成ライブラリ	記載内容の変更 章立ての変更に伴い、一部の記載内容を 構成ライブラリ概要 に移動
	構成ライブラリ概要	記載内容の変更 機能分類の表について、章立てに合わせるよう修正 機能拡充に伴い、以下のライブラリを追加 slick bootstrap-datepicker Moment.js Parsley tablesorterについて、公式サイトのリンクを修正
	機能と構成ライブラリの対応	記載内容の移動 章立ての変更に伴い、表「機能を実現するために使用するライブラリ」を本節に移動 記載内容の変更 機能拡充に伴い、加筆した機能を追加
	UIコンポーネント	UIコンポーネント の全般的な変更 各コンポーネントの概要にイメージ図を追加 jQueryとBootstrapの両方の使用方法を紹介しているコンポーネントについて、紹介順序を整理 記載内容の変更 BootStrapを推奨する記載を見直し bootstrap-datepickerの追加に伴い、注釈を追加 jQueryとBootstrapを併用する場合の注意点を追加
	ボタン	記載内容の追加 ガイドラインの記載とサンプルコードの追加
	モーダルダイアログ	記載内容の変更 jQueryUIの記載とサンプルコードを追加
	アコーディオン	記載内容の追加 ガイドラインの記載とサンプルコードの追加
	タブ	記載内容の変更 jQueryUIの記載とサンプルコードを追加
	スライダー	記載内容の追加 ガイドラインの記載とサンプルコードの追加
	カルーセル	記載内容の追加 ガイドラインの記載とサンプルコードの追加
	日付入力時のカレンダー表示	記載内容の移動 「bootstrap-datepickerを用いた日付入力時のカレンダー表示」を付録から移動 記載内容の変更 休日設定（背景色・休日選択不可・休日定義） について、性能を考慮した実装に改善 カレンダーのロケール設定 について、ロケールの誤記を修正（jp⇒ja）
	オートコンプリート	記載内容の変更 オートコンプリートの候補を非同期通信で取得する方法について記載を追加 「jQuery UI AutocompleteでIMEを使用する際の不具合」について、Firefoxのバージョンアップで解消したため、記載とサンプルコードを削除
	プログレスバーによる進捗度表示	記載内容の追加 ガイドラインの記載とサンプルコードの追加
	テーブル	記載内容の変更 機能拡充に伴い、ライブラリが実現できる機能に加筆した機能を追加 テーブルの表示セル数に関する注意点を追加 SlickGridとBootstrapを併用する場合の注意点を追加
	テーブルのスクロールによる非同期データ取得	記載内容の追加 ガイドラインの記載とサンプルコードの追加
	ショートカットキー制御	記載内容の変更 対応可能なキーの確認方法について記載を追加
	範囲選択防止	記載内容の追加 ガイドラインの記載とサンプルコードの追加
	二度押し無効化（二重送信防止）	記載内容の変更 同一フォーム内に複数のボタンを設置する場合 について、ガイドラインの記載とサンプルコードの追加 非同期通信中を表示する場合 について、ガイドラインの記載とサンプルコードの追加 a要素によるリンクに対して二度押しを無効化する場合 について、ガイドラインの記載とサンプルコードの追加
	画面要素間の連動	記載内容の追加 ガイドラインの記載とサンプルコードの追加
	フォーマット変換・文字種変換	記載内容の追加 ガイドラインの記載とサンプルコードの追加 「Moment.jsによる日付処理」を付録から本節に移動
	入力値チェック	記載内容の変更 「Parsleyを用いた入力値チェック」を付録から本節に移動 サンプルコードのバグ（必須チェック誤り、エラーメッセージの文字色誤り）を修正
	非同期処理	記載内容の追加 ガイドラインの記載とサンプルコードの追加
	JavaScriptの開発方法	記載内容の追加 ガイドラインの記載の追加
	スタイル競合によるテーブルの表示崩れ	記載内容の変更 GitHubのissueのリンク誤りを修正
	Macchinetta Server Framework (1.x)との連携	記載内容の追加 ガイドラインの記載とサンプルコードの追加
2015-2-27	-	初版制定