• 現在地:  
  • Home
  • FileMaker

FileMaker
参照数: 6270

FileMaker12から実装された、テーマ機能。１つ問題がありまして、デフォルトのフォントが「ＭＳ Ｐゴシック」になります。Macであろうが、タッチデバイスであろうが（！）です。

このままではレイアウトを作る度にイライラすることになるのと、フォントをテーマから変えていくのはパフォーマンス的に宜しくないようなので、カスタムテーマを作ってみることにしました。

この例では

カスタムテーマは完全に新規で作ることもできますが、流石に1から全て作るのは厳しいのでFileMakerに予め用意されているテーマを複製して、中身を弄っていきます。

ベースになるテーマは「エンライトンド」です。フォルダ名等は「enlightened」になっています。

既存のテーマのファイルをコピーする

テーマファイルの場所

まず、テーマファイルの置いてある場所なのですが、ググるとこんなページが出てきます。

ただこれは、FileMaker11時代のもので、13の同様のヘルプは公開されていない？ようです。参考にして探ってみると、

  • Mac

    FileMaker Pro Advanced/Contents/Resources/Themes

  • Windows

    （FileMaker Pro Advancedのインストールディレクトリ）￥Themes

この中に、テーマ毎のフォルダが格納されています。

ちなみに、MacのFileMaker Pro Advanced以降のフォルダは、アプリケーションの中のFileMaker Pro Advancedを右クリック、パッケージの内容を表示で見ることが出来ます。

この中から「enlightened」フォルダを選んでコピーします。

テーマファイルのコピー先

このページを参考に調べた所、

  • Mac

    /Users/（ユーザー名）/Library/Application Support/FileMaker/Extensions/Themes

  • Windows

    C:￥Users￥（ユーザー名）￥AppData￥Local￥FileMaker￥Extensions￥Themes

このフォルダの中のようです。

コピーしたテーマのフォルダ名

このテーマのフォルダ名は特に何かに影響するわけではないようで、何でも良いようです。1とかaaaとかでも大丈夫。

とはいえ、ある程度中身がわかる名前にしておいたほうが良いと思います。

この例では、コピーしたフォルダ名を「mytheme」と変更します。

テーマファイルの内容を変更する

さて、コピーしたフォルダを開くとこんなファイルが入っています。

  • manifest.xml : テーマに関する設定が書かれているファイル（削除不可）
  • manifest_言語.xml : それぞれの言語に対応した設定が書かれているファイル
  • テーマ名.css : 全体的なスタイルの指定が書かれたファイル
  • テーマ名_言語.css : それぞれの言語に対応したフォント設定が書かれたファイル
  • images : プレビューに表示される画像が入っているフォルダ

という構成になっているようです。

不要なファイルの削除

言語別に色々なファイルが入っていますが、日本語環境でしか使わないのであれば、本体と日本語ファイル以外は消してしまっても構いません。

ファイル名の変更

XMLファイルの名前は変更出来ない様なので、そのまま使います。

CSSファイルの名前は、この例では、enlightened.cssをmytheme.cssに、enlightened_ja.cssをmytheme_ja.cssとリネームしています。名前自体はXMLファイルで指定すればいいので何でも良いですが、管理しやすい名前にした方がよいでしょう。

ファイルの削除と名前を変更したあとはこんな感じです。

XMLファイルの編集

まず、manifest.xmlを開きましょう。ずらずらと色々書かれていますが、とりあえず編集が必要な部分はこのあたりです。

	<id>com.filemaker.theme.enlightened</id>
	<name>Enlightened</name>
	<group>Aspire</group>
	<version>5</version>
	<cssfile>enlightened.css</cssfile>
	<platform>Desktop</platform>
	<preview>images/enlightenedPreview.png</preview>

まず、IDタグの部分を書き換えます。

<id>com.filemaker.theme.mytheme</id>

このID名がかぶると、かぶっているテーマのスタイルが読み出されたりするようです。

次に名前を書き換えます。

<name>MyTheme</name>

次にCSSファイルが指定されている部分を書き換えます。先ほど変更したCSSファイルの名前を指定します。ここでは、テーマ名.cssの方を指定するように注意してください。

<cssfile>mytheme.css</cssfile>

これ以外の行ですが、必要に応じて書き換えてください。それぞれの行の意味は以下の通り。

  • group : このテーマが所属するグループ
  • version : バージョン管理用だと思いますが、表示されるだけ？
  • platform : PC用・iOS用等を示す項目だと思いますが、必須なのか不明
  • preview : プレビュー部分に表示される画像

次に、manifest_ja.xmlを開きます。編集する必要があるのは上の方の3行。こんな感じに書き換えます。

	<name>マイテーマ</name>
	<group>アスパイア</group>
	<cssfile>mytheme_ja.css</cssfile>

日本語環境で使用する場合は、nameに関してはこのmanifest_ja.xmlの内容が優先されますが、groupに関してはmanifest.xmlの内容が優先されるようです。空でも構わないような気がします。

CSSファイルは日本語環境のものを指定します。manifest.xmlで指定したCSSファイルに加えて、ここで指定したCSSファイルが読まれるようです。

CSSファイルの編集

具体的なスタイルは（おおむね標準の）CSSで書かれているので、該当するファイルを開いて変更します。

初期フォントの変更例

リネームしたmytheme_ja.cssを開くと、以下のような指定をされている行がいくつかあります。

font-family: -fm-font-family(ＭＳ Ｐゴシック, shiftjis);

このＭＳ Ｐゴシックの部分を任意のフォント名に変えます。

font-family: -fm-font-family(メイリオ, shiftjis);

例えばこんなとか。

作成したカスタムテーマを使用する

ここまでやれば、レイアウトモードからテーマを選択する一覧に表示されているはずなので、選択すれば適用されます。

作成したテーマの再編集と適用

作成したテーマを編集する場合コピーしたファイルを編集するのですが、編集して保存しただけではFileMaker側に適用されたテーマの表示は変更されません。

何故かと言うと、適用されたテーマは適用したFileMakerのファイルに読み込まれるからで、カスタムテーマが置いてある場所を参照しているわけではないからです。

変更した部分を適用させるには、一度テーマをファイルから削除した上で、再度読み込む必要があります。

  1. レイアウトモードで別のテーマを選択
  2. レイアウトモードの終了
  3. 管理からテーマへ
  4. カスタムテーマを削除
  5. レイアウトモードに入り、カスタムテーマを再度選択

これで編集した部分が適用されているはずです。テーマが使用されている状態ではテーマの削除は出来ないので注意してください。

応用

スタイルを増やしてみる

インスペクタのスタイルタブには、各種の適用出来るスタイルが用意されています。例えば、テキストだとこんなスタイルが用意されています。

これらのスタイルを選べば、予めCSSで設定したスタイルが適用されるわけです。このスタイルを追加してみます。

今回の例では、「タイトルテキスト 3」というスタイルを追加してみることにします。

  1. manifest.xmlの編集

    まず、manifest.xmlを開きましょう。スクロールしていくと、「<namedstyles>」という開始タグがあると思います。その下をもう少し進むと、

    			<title_text_1>Title Text 1</title_text_1>
			<title_text_2>Title Text 2</title_text_2>

    と書かれている部分があります。この下に、

    			<title_text_3>Title Text 3</title_text_3>

    こう1行書き加えます。

  2. manifest_ja.xmlの編集

    次に、manifest_ja.xmlを開きましょう。この手順を省略すると、スタイルタブには「Title Text 3」と表示されます。

    このファイルもスクロールしていくと同様に、「<namedstyles>」という開始タグがあると思います。その下をもう少し進むと、

    			<title_text_1>タイトルテキスト１</title_text_1>
			<title_text_2>タイトルテキスト２</title_text_2>

    と書かれている部分があります。何故かタイトルテキストのみ全角数字が振られていて困惑しますが、この下に、

    			<title_text_3>タイトルテキスト 3</title_text_3>

    こう1行書き加えます。

    ちなみにこのままで保存すると、全角と半角の差で並び順が変になるので、1と2の方も「タイトルテキスト 1」と「タイトルテキスト 2」にしたほうが良いかもしれません。

  3. mytheme.cssの編集

    最後にmytheme.cssを開きましょう。title_textで検索をかけると、こんな行が見つかります。

    text_box.title_text_1 .self {
font-weight: bold;
color: #000000;
font-size: 24pt;

}


text_box.title_text_2 .self {
font-weight: bold;
color: #000000;
font-size: 18pt;

}

    先ほど編集したタグ名はclassセレクタの名前になっているようです。

    この下にタイトルテキスト3用のスタイルを追加します。manifest.xmlには「<title_text_3>」と書いたので、

    text_box.title_text_3 .self {
font-weight: bold;
color: #000000;
font-size: 14pt;

}

    このようなセレクタにして書きます。

ここまで終わったら、「作成したテーマの再編集と適用」で書いたように再度カスタムテーマを読み込んでください。インスペクタのスタイルタブに、「タイトルテキスト 3」が追加されているはずです。

セレクタ名について

スタイルを増やすにも、例えば長方形ツールで作ったコンテナの要素名は何になるのか？がわからないとCSSが書けないので、それに関しての情報です。

  • 「形成」に属するもの

    「長方形ツール」、「角丸長方形ツール」、「楕円ツール」で作ったコンテナ

    要素名

    rectangle

    例
    rectangle.ex_color_1 .self {
background-color: rgba(40, 141, 206, 1.0);
background-image: none;

border-color: rgba(40, 141, 206, 1.0);

border-image-source: none;

}
  • 「編集ボックス」に属するもの

    「フィールド/コントロールツール」やフィールドピッカーで作ったフィールド（ただしオブジェクトフィールドは該当しない）

    要素名

    edit_box

    例
    edit_box.ex_edit_box_1 {
    background-color: transparent;
    color: #ffffff;
    border-style: none;
    border-radius: 0;
}
  • 「テキスト」に属するもの

    「テキストツール」で作ったテキストコンテナ（マージフィールドやマージ変数も含む）

    要素名

    text_box

    例
    text_box.ex_text_1 .self {
    font-weight: bold;
    color: #ffffff;
    font-size: 24pt;
}
  • 「ボタン」に属するもの

    「ボタンツール」で作ったボタン

    要素名

    button

    例
    button.accent_button_1:normal .self {
    background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(52, 160, 244, 1.0)), to(rgba(18, 104, 166, 1.0)));
    border-color: rgba(18, 104, 166, 1.0);
    border-image-source: none;
    color: #ffffff;
}


button.accent_button_1:hover .self {
    background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(77, 176, 247, 1.0)), to(rgba(33, 120, 182, 1.0)));
    border-color: rgba(18, 104, 166, 1.0);
    color: #ffffff;
}


button.accent_button_1:pressed .self {
    background-image: -webkit-gradient(linear, 25% 0%, 25% 100%, from(rgba(47, 151, 225, 1.0)), to(rgba(21, 98, 154, 1.0)));
    border-color: rgba(18, 104, 166, 1.0);
    color: #ffffff;
}

    ボタンのみに有効というわけではないが、この例の通りにnormal・hover・pressedという擬似クラスが有効。

  • 「ポータル」に属するもの

    「ポータルツール」で作ったポータル

    要素名

    portal

    例
    portal.portal_pettern_1 .self {
    border-style: none;
    border-radius: 0;
    -fm-use-portal-current-row-style: true;
}

portal.portal_pettern_1 .row {
    background-color: transparent;
    border-top-style: dashed;
    border-color: #c8d7d4;
    border-width: 1pt;
}

portal.portal_pettern_1 .row_active {
    background-color: rgba(200, 215, 212, 0.5);
    border-top-style: dashed;
    border-color: #c8d7d4;
    border-width: 1pt;
}

    ポータルは「.row」でポータル内の行のスタイルを、「.row_active」で選択されているポータル内の行のスタイルを指定可能。

  • 「オブジェクト」に属するもの

    オブジェクトフィールドが該当

    要素名

    container

    例
    container.container_1 .self {
    background-color: rgba(175, 163, 118, 1.0);
    border-style: none;
    border-radius: 0;
    color: #ffffff;
    font-size: 12pt;
    line-height: 1line;
    text-align: left;
}

CSSファイルを切り分ける

manifest.xmlのcssfileタグは複数書くことが出来るので、複数のCSSファイルを適用することが出来ます。例えば、

	<cssfile>thomsoon.css</cssfile>
	<cssfile>thomsoon_edit_box.css</cssfile>
	<cssfile>thomsoon_text_box.css</cssfile>

この様に編集ボックス用のCSSやテキスト用のCSSをそれぞれ用意して読み込むことが出来ます。

クラス名を使いまわしてみる

「スタイルを増やしてみる」ではmanifest.xmlにタグを追加することで、CSSのクラスセレクタで使用できるようにしていました。このクラスセレクタを、複数の要素で使いまわせるようにしてみます。

といっても単純で、まずmanifest.xmlにタグを追加します。

<accent_4>Accent 4</accent_4>

そして、CSSでこのタグ名をクラスセレクタとして使用します。

rectangle.accent_4 .self {
    background-color: rgba(238, 238, 238, 1.0);
    background-image: none;

    border-top-style: solid;
    border-width: 1pt;
}

text_box.accent_4 .self {
    font-weight: bold;
    color: #fcbf3b;
}

これで、「形成」と「テキスト」の両方に「Accent 4」が出てきます。このような汎用性の高い名前のもの（アクセントだとかグラデーションだとかついてるもの）は纏めてしまったほうがXMLの可読性が上がって良いかもしれません。

なお、日本語名で出す場合は、manifest_ja.xmlにも同様のタグを書きましょう。

補足 : クラスセレクタのみのスタイルは指定できるか
.accent_4 .self {
    font-weight: bold;
    color: #fcbf3b;
}

こういうスタイルは指定できるのかということですが、これは残念ながら出来ません。

その他カスタムテーマに関する雑多なメモ

CSSに関して

  • FileMakerはfont-familyを使ってフォントの指定をしている癖に、複数のフォントの指定は出来ない。

    font-family: -fm-font-family(ヒラギノ角ゴ Pro W3,メイリオ, shiftjis);

    例えばこんな指定をしてみても無視される。エラーは起きないようだけど…

  • 線に関して。

    border-bottom-style: solid;

    この指定はいいけれど、

    border-bottom-width: 1pt;

    この指定はやめておいたほうがいい。インスペクタ上では、個別の線の指定(border-***-style)は個別に設定の項目が用意されているけれど、線の太さに関しては一括指定しかないため、CSSで個別に設定すると「-」と表示されてしまう。

    border-width: 1pt;

    こうしよう。なお、線の単位はptで。

  • :first-lineは動かない
  • letter-spacingは動かない
  • font-weight: lighter;は無視される

FileMaker記事一覧

このサイトについて

このサイトは管理者の趣味関係の文章やらデータやらの保存目的と、Joomla!関係の実験目的で運営されています。

FF14関係の表記

記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。
Copyright (C) 2010 - 2013 SQUARE ENIX CO., LTD. All Rights Reserved.