4D Japan
テクニカルサポートブログ-
PROJECT DATABASESシリーズ：スタイルシートを使ってフォームを美しくする
これまでの4Dバイナリー・ストラクチャは、macOSとWindowsプラットフォームの両方でフォーム中に使われるフォント、フォントサイズ、テキストのスタイルを特定するためのスタイルシートを定義できました。プロジェクト・データベースでは、さらに進化して4ステイト・ボタンのプロパティを定義したり、全てのライン・オブジェクトの色や境界線を特定したり、アプリケーションのリストボックス 全てのヘッダーの高さを設定することもできます！CSSの文法やシンタックスにインスパイアされて、4Dはプロジェクト・データベースのフォームの特定のニーズに合わせて改良しました。スタイルシートのおかげで、本当に視覚にアピールするフォームを作成するためのプロパティ全てを設定できます。このブログでその方法を紹介します！
プラットフォーム
プロジェクトデータベースでは、両方のプラットフォーム（WindowsとmacOS）に対して、個々のスタイルシートと「オーバーオール（全てに適用）」スタイルシートを定義できます。
なぜプラットフォームごとに異なるスタイルシートが必要なのでしょうか？それは、macOSで使われるフォント/フォントサイズはWindowsのものとは異なることがあるからです。その一方で、テキストのカラーはどちらも同じということがよくあります。
”Stylesheets.css”ファイルと独自のファイル中のプラットフォーム指定のスタイルを定義できるようになりました：”stylesheets_mac.css”と”stylesheets_windows.css”です。
プロパティー
プロジェクト・データベースの主な改革の一つは、フォームオブジェクトがサポートする全てのプロパティーをスタイルシートの中で使えることです。
例えば、”ボタン-アクション”クラスを作成して、”ツールボックス”状で、グレイのテキストの、フォーカス化できない4ステート・ボタンを作成することができます。
.buttonAction {
iconFrames: 4;
style: toolbar;
stroke: grey;
focusable: false;
}
これにより、同じグラフィックデザインを保持しながら、アプリケーションに対するデザインフォームを簡単に作れます。
セレクター
もう一つの大きな変更は、クラス、オブジェクトタイプ、オブジェクト名、属性によってスタイルシートを作成できることです。
オブジェクトタイプ・セレクター
オブジェクトタイプ・セレクター（CSSエレメント・セレクターと同等）を使うと、データベース中の全てのオブジェクトに適用できる汎用的なプロパティーを定義できます。例えば、全てのリストボックス が２行のヘッダーを持ち、空の行は表示されない、列の背景はgainsboroとwhitesmokeにします。
listbox {
headerHeight: 2em;
hideExtraBlankRows: true;
fill: Gainsborough;
alternateFill: white smoke;
このセレクターのおかげで、フォームオブジェクトに独自の外観とフィーリングを定義できます。
アトリビュート・セレクター
アトリビュート・セレクターを使うと、プロパティの値によってスタイルシートを定義できます。
例えば、データの入力/出力フォームで、レコードの追加、編集、削除のボタンがあります。これら全てのボタンは同じアイコン、タイトル、ヘルプティップを使います。
アクションボタンにスタイルシートを作成して、アクションプロパティに特定の値を指定しないのはなぜでしょう。例えば、もしアクションプロパティが”editSubrecord”の場合：
.buttonAction[action=editSubrecord] {
icon: url(“/RESOURCES/Images/Buttons/edit.png”);
tooltip: “:Cliff:button_tip_EditRecord”;
text: “:xliff:button_EditRecord” !important;
}
ボーナスとして、実際の動作をデモしています！
-
PROJECT DATABASESシリーズ：アーキテクチャ
プロジェクトデータベースは、4D v18リリースのヘッドラインで、チームがコラボレートして作業できるように、アプリケーションのコードをソース管理システムの中に保存することができます。そのテキストファイルの中には、フォーム、メニュー、ユーザー設定、あらゆる必要なリソースを含めて、データベース・ストラクチャからユーザー・インターフェイスまであります。そして、プロジェクトデータベースはテキストベースのファイルでできているため、いくつかのフォルダとファイルを一つの親データベース・フォルダの中に保存します。このブログでは、プロジェクトデータベースのアーキテクチャを見ていくことで、新しいタイプのデータベースをよりよく理解しましょう。
PROJECT DATABASEのアーキテクチャ
プロジェクトデータベースは、一つの親データベース・フォルダの中に保存された、いくつかのフォルダとファイルで構成されています。
プロジェクトデータベースを作成する時、ほとんどのフォルダが同じ伝統的なバイナリーデータベースであることに気づくでしょう：
- データ
- ログ
- リソース
- セッティング
- ウェブフォルダ プロジェクトデータベースは二つの追加フォルダを含みます：
- Project – アプリケーション・ソースコード（4DBと同等）
- userPreferences.
- このフォルダはユーザー設定（例：ブレークポイントの位置、ウィンドウ位置など）を記憶するファイルを含みます。
プロジェクトとソース管理
プロジェクトデータベースの中にフォルダとファイルがあることが分かりましたが、どのフォルダとファイルをソース管理システムにアップロードすべきでしょうか？おそらく、ResourceとProjectフォルダと考えるでしょう。では、データベースをコンパイルするときに、4Dは”Project/DerivedData”フォルダにコンパイルしたコードを保存します。従いまして、”Resources”フォルダ、”WebFolder”、”Project”フォルダ（サブフォルダの”DerivedData”は不要）をソース管理システムにアップロードすることをお勧めします。
バイナリーデータベースvs プロジェクトデータベース
このビデオでは、バイナリーデータベース(.4DB)とプロジェクトデータベース (.4DProject)のアーキテクチャを比較します。
例えば、自分のバイナリーデータベースを開くには、”.4db”あるいは”.4dc”拡張子のファイルを選択します。project データベースで同等のものは何でしょう？それは”.4DProject”拡張子のファイルです。
コンパイルされたデータベースに対して、”.4DC”に代わるものは何でしょう？バイナリーデータベースでは、アプリケーションのソースコードは”.4DB”と”.4DIndy”拡張子のファイルにありました。プロジェクトデータベースでは、ストラクチャに関係するフォルダやファイルはどこにあるのでしょう？
これらの疑問の答えは下記のビデオで見つかります：
-
PROJECT DATABASESシリーズ：バイナリからテキストベースへ
4D v17 R5で新しいタイプの4Dデータベース：プロジェクト・データベースのベータテストを開始しました。4D v18では、プロジェクト・データベースが最終リリースになったことをお知らせします。今こそ軽い分散型フォーマットの多用途性と組み合わされた4Dの開発プラットフォームのパワーを活かす時です！
プロジェクト・データベースは、伝統的なバイナリー・フォーマットではなく、テキストベースのファイルを使って4D中で開発されます。プロジェクト・データベースを作成するには：
既存のデータベースを変換
バイナリー・データベースをプロジェクトに変換するには、シンプルに”ファイル”→”書き出し”→”ストラクチャからプロジェクト”メニュー項目をクリックするだけです。
一度バイナリー・データベースの変換が完了すれば、その成功を知らせるメッセージが表示されます。4Dはまた、手を加える必要があるエラーが見つかった場合もお知らせします（例：すでにサポートされていない古いフォーム・オブジェクトがある）。
さらに詳しくはこのドキュメントを見てください。
具体的なサンプル
以下のビデオでは、4D ウェブサイトからダウンロードできる”Contacts”データベースを変換しました。
“ファイル→書き出し→ストラクチャからプロジェクト”メニュー項目の使って、バイナリーストラクチャ・ファイル(.4DB)をprojectに変換します。4Dは交換の間にエラーが発生したことを知らせてくれます。ログファイルを開いたとき、データベースがハイライト・ボタンを使うことに気づきます。上記のように、プロジェクト・データベースでは、古いオブジェクトの中にはサポートしていないものもあります。
この場合、シンプルにボタン・タイプをハイライトから非表示に変更します。データベース中では、”ボタン”にイメージ、固定テキスト、ハイライト・ボタンを含む場合、これらの３つのオブジェクトを一つのオブジェクト：3Dボタンに置き換えることをアドバイスします。もしコンテキストに従ってランタイム時にボタンを表示あるいは非表示にする場合、コードの変更が必要です。
いくつかの修正後に、”Contacts”データベースは再度書き出されて、今回は成功しています。
今度はあなたが実行する番です！