バーコード作成／モバイルデバイス対応もカンタン！　さらに高度な機能まで、Forguncy 3の充実機能を見てみよう：特集： Forguncy 3新機能解説（4/6 ページ）

» 2017年07月07日 05時00分公開

CSSリソースの登録

　Forguncy 2でもProエディションでは、ページの任意のセルにCSSクラス名を設定したり、CSSファイルをライブラリとして登録したりすることで、ページの表示をカスタマイズできた。Forguncy 3では、CSSファイルや外部JavaScriptファイルで使用する画像ファイルなどのリソースを登録できるようになった。

　例として、CSSを利用して画像を表示するページを考えてみる。ここではCSSのbackground-imageプロパティを利用する。まずは以下のようなCSSファイルを用意しよう。ファイル名は「customcss.css」としている。

.myimage {
background-image: url('miyajima.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

miyajima.jpgファイルを表示するためのCSS

　そして、任意のページ（ここでは「photos」とした）で適当な範囲をセル結合して、その範囲にCSSクラス「myimage」を設定する。

画面中央上部のセル範囲にCSSクラス「myimage」を設定（赤枠内）

　このページを実行すれば、CSSファイルに記述したようにmiyajima.jpgファイルが画面に表示されるようにしようというわけだ。そのためには、［ファイル］タブにある［オプション］ペーンでその設定を行う必要がある。［オプション］ペーンで［ライブラリJavaScript／CSS］を選択したら、［ライブラリCSSファイルの登録］の下にある［ファイルを追加］ボタンをクリックして、CSSファイルを指定する。ここまでを行った画面を以下に示す。

ライブラリCSSファイルとして「customcss.css」を追加したところ

　ちなみにファイル名の隣にある［-］ボタンでファイルを削除できる。その隣にある2つの上下の矢印ボタンで複数のCSSファイルを指定した場合の読み込み順序を指定できる。その隣の［ダウンロード］ボタンをクリックすれば、CSSファイルをローカル環境にダウンロード（コピー）でき、一番右の［割り当てられたエディタで開く］ボタンをクリックすれば任意のエディタでそのファイルを編集できる。

　上述したようにForguncy 3では、画像ファイルなどのリソースもこの画面からアプリに追加（登録）できる。これには［リソースフォルダーを開く］ボタンをクリックする。すると、Windowsエクスプローラーが起動してForguncyアプリのリソースを管理するディレクトリが表示されるので、必要なファイルをそこにコピーしておく。ここではmiyajima.jpgファイルをコピーしたものとしよう。

　この状態でアプリを実行すると、次のように宮島の写真が表示される。

画像を表示するだけのForguncyアプリ

　注意点としては、リソースフォルダに置かれたファイルに（JavaScriptコードから）アクセスするには「Resources/UserFile」をファイル名に前置する必要がある点だ。例えば、上のアプリを修正して、次のように3つのボタンをクリックすると、そのボタンに応じたファイルが表示されるようにしてみる（miyajima.jpg以外にcarp.jpgファイルとpenguin.jpgファイルをリソースフォルダに追加している）。