クリック画像の実寸表示

段ボール箱を机にした猫 ファイルメーカー（filemaker）のちらしの裏のメモ書き

TOP 　＞　 FileMakerでカードゲームを楽しもう！（１）
作成日：2025年02月10日

FileMakerでカードゲームを楽しもう！（１）

イメージイラスト
にゃん太

どうも、にゃん太です

先日フリーイラストを探していたら、偶々トランプカードのイラストを見つけました

ちょっと気に入ったので、今回のメモではこのイラストを使用してカードゲームを作成してみる事にします


使用するトランプイラスト

まずは今回使用させて頂くトランプのイラストがこちらです

トランプカード一覧
イラストACさんのサイトからダウンロードできます
１枚の画像データなので、頑張ってカードごとに切り出していきます

カードをめくる

トランプのカードには裏と表があります
大半のゲームでは基本的には裏を見せて、必要な場合に表を見せるという行為を行う事になります
画面演出としては、表示画像を切り替える事になります
とは言っても、パッと差し替えるだけでは味気ないので、回転効果が欲しいところです
幸いCSSアニメーションで簡単に演出を追加できます

HTML

<div class='card rotate'>
	<img class='ura' src='img/20250210_image03.jpg'>
	<img class='omote' src='img/20250210.jpg'>
</div>

CSS

@charset "utf-8";

.card {
	position: relative;
	margin: 50px auto;
	width: 271px;
	height: 413px;
}
.card img {
	position: absolute;
	backface-visibility: hidden;
}
.card.rotate .omote {
	animation: omote 2s 0s linear infinite;
}
.card.rotate .ura {
		animation: ura 2s 0s linear infinite;
}
@keyframes omote {
	0% {
		transform: rotateY(-180deg);
	}
	50% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(180deg);
	}
}
@keyframes ura {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

トランプの裏 トランプの表（ジョーカー）

どうでしょう、こんな感じで作ればめくっているイメージが損なわれません

FileMakerでカードをめくる（Webビューア）

先ほどは、HTML＋CSSでカードをめくる演出を作成しました
FileMakerでも、Webビューアを使用すれば同様に表示させる事ができます
但し、画像へのリンクだけは若干の変更が必要です
色々な方法があると思いますが、今回はオブジェクトフィールドに画像を保管し、それを呼び出す事にします
具体的には、Base64Encode関数を使用します
関数の詳細はClaris社のヘルプを見て頂くとして、この関数を使用する事で画像データをBase64フォーマットのテキストに変換し、それをIMGタグのSRC属性に割り当てる事で表示させます
実際に作成してみましょう
とりあえず、下図の様にテーブルを作成し、画像を割り当てておきます

テーブル構造
次に、WebビューアのWebアドレス欄に設定する内容です

Webビューア

"data:text/html,
<!DOCTYPE html>
<head>
<style type='text/css'>
.card {
	position: relative;
	width: 271px;
	height: 413px;
}
.card img {
	position: absolute;
	backface-visibility: hidden;
}
.omote {
	animation: omote 2s 0s linear infinite;
}
.ura {
	animation: ura 2s 0s linear infinite;
}
@keyframes omote {
	0% {
		transform: rotateY(-180deg);
	}
	50% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(180deg);
	}
}
@keyframes ura {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}
</style>
</head>
<body>
<div class='card'>
	<img class='omote' src='data:image/png;base64," & Base64Encode ( card::cardImage2 ) & "'>
	<img class='ura' src='data:image/png;base64," & Base64Encode ( card::cardImage1 ) & "'>
</div>
</body>
</html>"

これで、ブラウザと同じ様に表示する事ができます

FileMakerでカードをめくる（基本機能）

Webビューアなら簡単に表示できる様になりましたが、色々と応用した使い方をしようとするとJavaScriptによる処理が必要となったりします
難易度も向上しますので、可能ならFileMakerの基本機能だけで作成できるに越したことはありません
もちろん、FileMakerではオブジェクトを回転させる様な処理はできませんので、疑似的に再現する方法を考える必要があります
FileMakerでは、オブジェクトフィールドに配置した画像を拡大／縮小する事ができます
その時「グラフィックの縦横比率を維持」のチェックを外せば、横幅だけを縮める事ができるのです

カードの横幅を順番に縮小したイメージ
これを順番に表示していけば、回転している感じになるはずです
OnTimerスクリプトを使用して試してみましょう

回転

# ##################################################
# カードを回転するOnTimerを呼び出し
# ##################################################

変数を設定 [$$timer; 値: 0]
OnTimerスクリプトをインストール [「timer_回転」; 間隔: .1]

timer_回転

# ##################################################
# カードを回転させる処理
# ##################################################

変数を設定 [$$timer; 値: Mod ( $$timer + 1; 21 )]
If [$$timer = 1]
	フィールド設定 [global::card1; card;;cardImage1]
Else If [$$timer = 2]
	フィールド設定 [global::card1; ""]
	フィールド設定 [global::card2; card;;cardImage1]
Else If [$$timer = 3]
	フィールド設定 [global::card2; ""]
	フィールド設定 [global::card3; card;;cardImage1]
Else If [$$timer = 4]
	フィールド設定 [global::card3; ""]
	フィールド設定 [global::card4; card;;cardImage1]
Else If [$$timer = 4]
	フィールド設定 [global::card3; ""]
	フィールド設定 [global::card4; card;;cardImage1]
Else If [$$timer = 5]
	フィールド設定 [global::card4; ""]
	フィールド設定 [global::card5; card;;cardImage1]
Else If [$$timer = 6]
	フィールド設定 [global::card5; ""]
Else If [$$timer = 7]
	フィールド設定 [global::card5; card;;cardImage2]
Else If [$$timer = 8]
	フィールド設定 [global::card5; ""]
	フィールド設定 [global::card4; card;;cardImage2]
Else If [$$timer = 9]
	フィールド設定 [global::card4; ""]
	フィールド設定 [global::card3; card;;cardImage2]
Else If [$$timer = 10]
	フィールド設定 [global::card3; ""]
	フィールド設定 [global::card2; card;;cardImage2]
Else If [$$timer = 11]
	フィールド設定 [global::card2; ""]
	フィールド設定 [global::card1; card;;cardImage2]
Else If [$$timer = 12]
	フィールド設定 [global::card1; ""]
	フィールド設定 [global::card2; card;;cardImage2]
Else If [$$timer = 13]
	フィールド設定 [global::card2; ""]
	フィールド設定 [global::card3; card;;cardImage2]
Else If [$$timer = 14]
	フィールド設定 [global::card3; ""]
	フィールド設定 [global::card4; card;;cardImage2]
Else If [$$timer = 15]
	フィールド設定 [global::card4; ""]
	フィールド設定 [global::card5; card;;cardImage2]
Else If [$$timer = 16]
	フィールド設定 [global::card5; ""]
Else If [$$timer = 17]
	フィールド設定 [global::card5; card;;cardImage1]
Else If [$$timer = 18]
	フィールド設定 [global::card5; ""]
	フィールド設定 [global::card4; card;;cardImage1]
Else If [$$timer = 19]
	フィールド設定 [global::card4; ""]
	フィールド設定 [global::card3; card;;cardImage1]
Else If [$$timer = 20]
	フィールド設定 [global::card3; ""]
	フィールド設定 [global::card2; card;;cardImage1]
Else
	フィールド設定 [global::card2; ""]
	フィールド設定 [global::card1; card;;cardImage1]
End If

このスクリプトを動かしたのが次の動画です


流石にCSSで動かしている様にスムーズにはいきませんが、まぁまぁ動いている感じになったのではないでしょうか
実際に使用する場合は裏から表に変えるだけの動作になりますので、十分な動きだと言えます

なんだかカードをめくるだけの動作に時間を掛けすぎました
長くなってしまったので今回はここまでとします
次回は実際にカードゲーム「ハイアンドロー」を作ってみたいと思います
FileMakerでカードゲームを楽しもう！（２）へ続きます
メモ書き終了の案内イラスト

以上で今日のメモ書きは終了です

内容はいかがでしたか？

もしご意見やご要望、誤りの指摘などありましたら、下記フォームよりお気軽にご連絡ください

ご連絡フォーム