7章ページの作成 - 24. ページインポート機能

2. スタイルシートのインポート

WebRelease はスタイルシートファイルをインポートすることができます。

サフィックスが .css または .scss のファイルはスタイルシートとしてインポートされます。
インポートしたスタイルシートファイルに対応して WebRelease 上に作成されるページのタイトルにはインポートされたファイルのファイル名が使用されます。
インポートにより作成されたページが公開サーバ上で公開される時のファイル名は、インポートされたファイルのファイル名になります。
インポートするファイルのファイル名には日本語は使用できません。
ファイルのエンコーディングは、css の先頭に @charset "????"; の形式の宣言がある場合にはそれに従います。宣言がない場合には UTF-8 として扱われます。UTF-8 以外のエンコーディングで作成されているスタイルシートをインポートする場合には、先頭に @charset の指定をしておく必要があります。@charset "????"; の記述は正確に行われている必要があります。@charset がファイルの先頭から始まっていること、@charset の後に空白文字 (0x20) が 1 文字だけあること、その後ろに " (ダブルクオート 0x22)があること、その直後にエンコーディングを指定する語があること、その直後に " (ダブルクオート 0x22) があること、その直後に ; （セミコロン 0x3b) があること、その直後に改行コードがあること、が必要です。
ページの作成には「テキストファイル取り込みテンプレート (システム組み込み)」というシステム組み込みのテンプレートが使用されます。または、特定の条件を満たすテンプレートを作成しておくことで、ユーザ定義のテンプレート（カスタムテンプレート）を使ってファイルをインポートすることも可能です。カスタムテンプレートで取り込めば、取り込んだファイルの内容を加工してから公開サーバに配信することが可能になります。

インポートの手順

スタイルシートをインポートする場合には、インポートしたいファイルを WebRelease にアップロードします。事前に準備する必要があるものは取り込むファイルだけです。取り込みには、基本的にシステム組み込みのテンプレートが使われるのでテンプレートの事前準備は必要ありません。

まず、ページを作成したい（インポートしたファイルでページを作成したい）フォルダに移動します。必要があればフォルダを作成すると良いでしょう。今回は example3 というフォルダを作成し、そこにコンテンツを取り込んでみることにします。フォルダに移動したら画面右上にある「インポート」ボタンをクリックします。

① 表示されるダイアログで「ファイルをアップロード....」を選びます。
② アップロードしたいファイルを選択します。今回は default.css をインポートしてみましょう。ここではファイルをひとつだけインポートしていますが、複数のファイルを指定して同時にインポートすることもできます。

日本語のファイル名を持つファイルはインポートできません。

③ 必要に応じて、オプションを設定してください。

既存のファイルの上書きを許可する

WebRelease はファイルをインポートする時、インポートの結果作成されるページと同じページタイトルを持つページが既に WebRelease 上にある場合には、そのページを上書きしようとします。このオプションを ON にすると既に存在するページの上書きを許可できます。このオプションが OFF の状態では、既存のページが上書きされることはありません。上書きが発生するファイルのインポートはエラーとなり、インポートは行われません。（同時にアップロードした他のファイルのインポートも中止されます）

上書きの対象となるページは、インポートしようとしているファイルのファイル名と同じページタイトルを持っているページです。例えば default.css をインポートする場合には、default.css というページタイトルを持つページが上書きの対象になります。

ページを上書きする場合、上書きされるページの状態が、編集中、編集完了、または作業コピーとなっている場合には、取り込まれたファイルによりページの該当リビジョンが直接上書き更新されます。ページの状態がそれ以外の場合には、上書きされるページに新しいリビジョンが作成され、そこにインポートしたファイルの内容が取り込まれます。

上書き対象となるページが、これから取り込まれようとしているファイルに適用されるテンプレートと異なるテンプレートを使用している場合には上書きはできません。WebRelease では、ひとつのページに属するすべてのリビジョンは同じテンプレートをベースにしている必要があるためです。

既存のファイルの新規リビジョンとしてインポート

このオプションは、上記の「既存のファイルの上書きを許可する」を ON にした場合にのみ表示され、指定できるようになります。このオプションを ON にすると、既存のページの上書きが発生する場合には、そのページの状態にかかわらず、常に新規リビジョンが作成されてからファイルが取り込まれます。

取り込んだ html ファイル中の title 要素の値をページタイトルに使用する

このオプションはスタイルシートのインポートでは意味がありませんので指定は不要です。ON / OFF どちらでも動作に影響はありません。

取り込んだ html css js ... xhtml ファイルの行末コードを 0x0d + 0x0a (CR + LF) に置き換える

このオプションを指定するとアップロードしたファイルの行末コードを 0x0d + 0x0a (CR + LF) に置き換えてから取り込むことができます。

④ ダイアログパネル右上の「インポート」ボタンをクリックすると、コンテンツが取り込まれます。

取り込んだスタイルシートファイルの編集

インポートした css ファイルはページとして編集可能です。先ほどインポートした default.css の編集画面を開いてみましょう。ページ一覧画面の「編集」ボタンをクリックすると編集画面に入ることができます。

インポートした default.css ファイルの編集画面は下記のようになっているでしょう。

① このページの作成には「テキストファイル取り込みテンプレート(システム組み込み)」という名前のテンプレートが使われています。インポート時にユーザ定義のカスタムテンプレートを指定している場合には、ページは指定したテンプレートで作成されます。

② インポートして作成したページのページタイトルは「default.css」となっています。css ファイルをインポートした場合、作成されるページのページタイトルはインポートしたファイルのファイル名になります。ページタイトルは必要があれば変更することができます。

③ ページのファイル名は default.css になっています。css ファイルをインポートした場合、作成されるページのファイル名はアップロードされたファイルのファイル名と同じになります。このページが公開サーバ上に公開される時にはこの default.css というファイル名で公開されます。ファイル名は必要があれば変更することができます。

④ このページのエンコーディングは「UTF-8」になっています。このページが公開サーバ上に公開される時にはファイルのエンコーディングは UTF-8 で公開されます。これは、インポートした css ファイルに @charset の指定がなかったため、デフォルトの UTF-8 としてインポートされたためです。先頭に @charset の指定のある css ファイルをインポートした場合には、エンコーディングはそこに指定されているものとなります。エンコーディングを変更する場合には、それに合わせて正しく @charset の指定を行ってください。