7章ページの作成

25. 外部作成コンテンツのインポート

html コンテンツを WebRelease と異なるコンテンツ制作環境で作成し、出来上がった html と関連リソースを WebRelease に取り込む時に、それらを zip 形式のファイルとして一括して取り込むことができます。

ページインポート機能では、html や css などのファイルを直接インポートしましたが、ここで説明する html 取り込み機能は、1 つの html と関連するリソース類をひとつの zip ファイルにまとめたものを「複数行テキスト」形式の要素に対してアップロードして取り込みます。zip 中には 1 つの html ファイルが必要です。その html の内容はアップロードの対象となった複数行テキスト形式の要素の値になります。また、zip 中にあった関連するファイル類は、そのページのページリソースとして取り込まれます。

取り込まれたファイル群は WebRelease 上でひとつのページとして扱われるため、ファイル群全体を承認ワークフローに流したり、公開開始／終了指定時刻を指定したりすることができます。状況によっては、ページインポート機能を使ってファイルを個別に取り込むより扱いやすい場合もあるでしょう。

取り込みの操作は「複数行テキスト」形式の入力エリアに対して行います。この入力エリアは、右側に「HTML」のチェックボックスが表示されている、html 入力が許可されているエリアでなければなりません。「HTML」のチェックボックスの右下には「アップロード」ボタンが表示されているはずです。

zip を取り込む場合には、この「アップロード」ボタンをクリックします。クリックするとアップロードパネルが表示されます。

アップロードするファイル

アップロードする zip ファイルを指定してください。

zip ファイル中にはひとつの html ファイルが含まれていなければなりません。また、ふたつ以上の html ファイルが含まれていてはなりません。
zip ファイルに含まれている html ファイルの内容は「複数行テキスト」に取込まれます。
zip ファイルに含まれている html 以外のファイルは、すべてページリソースとして登録されます。
パスワードで保護されている zip ファイルはアップロードできません。

ここでは zip ファイルのアップロードを前提にしていますが、複数のファイルを指定してアップロードすることもできるので、html と関連するリソース（画像、スタイルシートなど）を、バラバラの状態でアップロードすることもできます。

必ずひとつ html ファイルをアップロードしてください。ふたつ以上の html ファイルをアップロードすることはできません。
html 以外のリソースがあれば、それらも一緒に指定してください。現在のブラウザは、PC 上の異なるフォルダにあるファイルを一度にアップロードすることはできないようなので、アップロードするすべてのファイルは PC 上の同じフォルダに準備しておく必要があります。

オプション

アップロードされた html ファイルの title タグの内容をページタイトルに設定する

このオプションを ON にしておくと、アップロードした html ファイルの <title> タグの内容がこのページのページタイトルに設定されます。

アップロードされた html ファイル名をページのファイル名に設定する

このオプションを ON にしておくと、アップロードした html ファイルのファイル名がこのページのファイル名に設定されます。

現在登録されているリソースの上書きを許可する

このオプションを ON にしておくと、既にページに登録されているリソースを上書きしてアップロードすることができるようになります。OFF の状態では上書きが起きる場合にはエラーになります。

今回は、例として、下記の内容の sample1.zip というファイルをアップロードしてみます。

zip ファイルの内容

Archive:  sample1.zip
  Length      Date    Time    Name
---------  ---------- -----   ----
     5048  08-24-2022 11:03   images/photo_by_NASA_1.jpg
    73151  08-24-2022 11:29   images/photo_by_NASA_2.png
      595  08-24-2022 11:38   sample.html
---------                     -------
    78794                     3 files

images/photo_by_NASA_1.jpeg という画像ファイルが含まれています。
images/photo_by_NASA_2.png という画像ファイルが含まれています。
sample.html という html ファイルがひとつ含まれています。

① 取り込むファイル群を収めた sample1.zip を指定します
② オプションをふたつ ON にしてみましょう。（必須ではありません）
③ 実行ボタンをクリックします。

アップロードの完了結果は下記のとおりです。

① ページタイトル欄にはこの html 中の <title> タグの内容「こんにちは」が取り込まれています。
② このページのファイル名はアップロードされた html ファイルのファイル名 sample.html に設定されています。
③ テキストエリアには、アップロードした zip ファイルに含まれていた sample.html の内容が取り込まれています。

ページリソース一覧を見てみましょう。

アップロードした zip ファイルに含まれていた images/photo_by_NASA_1.jpg と images/photo_by_NASA_2.png がページのリソースとして登録されています。images というディレクトリも作成されています。html 中にある <img src="images/photo_by_NASA_1.jpg"> という記述は登録された画像を参照しています。

zip ファイル中には、取り込む html と、取り込むページのページリソースに登録するファイルしか含めることはできません。もし html がいくつかの html ファイルから共通して参照されるスタイルシートやスクリプトを必要としているのであれば、それらはサイトリソースとして登録しておき、html からはそれらを絶対パスで参照する方法を採ることを検討してください。

サイトリソースには、デザイナー権限がなくても、ライター権限だけで書込みが可能なフォルダを作成することができます。そういった機能をうまく使うことでライター権限で管理されるファイルマネージャー領域を運営することも可能です。

ページリソースは、そのページの公開、公開終了に同期して公開されたり公開終了したりしますので、他のページのページリソースを参照するのはなるべく止めておいた方が良いでしょう。

取り込んだ html の加工

取り込んだ HTML は <!DOCTYPE html> から始まる、完全な形の html であったり、または、body タグの内側のみの html フラグメントであったりするかもしれません。取り込みにより WebRelease にコンテンツを登録する場合には、どういう形式でコンテンツを取り込むのか、事前に取り決めておく必要があります。

先の例では完成した html を取り込んでいるので、テンプレートの展開は取り込んだ html を何の加工もせずに出力するだけの単純なもので良いでしょう。

取り込んだ html に対して何らかの加工が必要になる場合がありますが、下記の関数・オブジェクトを使って加工することを検討してください。

parseHtml() 関数で取り込んだ html をパースすると HTMLDocument オブジェクトに変換することができます。
HTMLDocument オブジェクトは、HTMLComment, HTMLDataNode, HTMLElement, HTMLElements, HTMLTextNode オブジェクトなどを援用して、さまざまな加工が可能です。
テンプレートの展開では、取り込んだ html を加工して部分を切り出すなどして作り出した html 断片と、テンプレート中で生成したメニューやフッターなどを組み合わせて完全な html ページを組み立てることで、取り込んだ html と導線を組み合わせたページを作り出すことができます。

特に加工が必要ない形状での html の取り込みができればそれが一番簡単です。