外部作成コンテンツの取り込み:ZIPアップロード

WebRelease 2 Version 2.70 の新機能のご紹介

今回は、外部で作成した html コンテンツを WebRelease のページの一部に組み込んで使用する方法についてご紹介します。

Version 2.70 では、html をパースする機能が実装されています。この機能を使うと、外部で作成した <html>...</html> の全体を取り込んでおいて、その中から 特定のタグで囲まれた部分を切り出してページの一部として利用することができます。

WebRelease で作成されたページの一部に外部コンテンツを取り込んで利用する上での大きな課題は、もともとの WebRelease のページの html と、取り込むコンテンツの html を合成することが難しい点にあります。html のパース機能を使うことで、html の合成をある程度行うことができるようになります。

  • CMS 導入時に既存のコンテンツを可能な限りそのまま取り込みたい。
  • 非定型のコンテンツの作成を外部に委託していて html / css / javascript / image を zip 形式で納入してもらっている。それを簡単に WebRelease のページの一部分として取り込んで利用したい。
  • ページの基本的な構成要素、たとえば、ヘッダー、メニュー、フッター、記事一覧、などは WebRelease のテンプレートを使って自動生成したいが、ページ内のコンテンツに外部で作成した「一点もの」のコンテンツを組み込みたい。

Html パーサを使うことでこういったニーズにある程度応えることができるようになります。Html パーサは、多少、扱いの難しい面がありますが、使いこなせばスイスアーミーナイフのように威力を発揮します。

外部で作成したコンテンツを取込む方法

外部で作成した html コンテンツは、下記の方法で WebRelease のページの一部に組み込んで利用することができます。

  • Html の取り込みができるテンプレートを準備します。このテンプレートは取り込んだ html から必要な部分を切り出してページに組み込むように作成しておきます。
  • 取込む html コンテンツを zip 形式で用意します。Zip ファイルには html ファイルをひとつだけ格納します。そして、その html が参照している css javascript image などの関連するファイルも格納しておきます。
  • 用意したテンプレートでページを作成し、そのページに、先の zip ファイルをアップロードして取込みます。

一度テンプレートを作成してしまえば、外部コンテンツの取り込みの作業は、コンテンツの準備(zip 形式)と、ページを作成して zip ファイルをアプロードするだけで終えることができます。

テンプレートを準備する

まず、テンプレートを準備しましょう。ここで紹介するテンプレートは、名前を「外部コンテンツ取り込み」としてあります。

ここで使用しているテンプレートはここからダウンロードできます。
(ZIP・3.83kB)

Version 2.70 以降の WebRelease でご利用ください。Zip 化されていますので解凍して import_html_example.wrt を取り出してから使用してください。

テンプレートの要素定義

このテンプレートは、ひとつの「複数行のテキスト」型の要素を持っています。要素名は html としてあります。この要素の要素設定は下記のスナップショットのとおりです。

  • 要素名は html です。
  • 要素のタイプは「複数行のテキスト」です。
  • 「HTML で記入」は ON です。
  • 「自動改行」と「Markdown」はいずれも OFF です。
テンプレート「外部コンテンツ取り込み」の要素定義画面

この要素 html には、zip ファイル中の .html ファイルの全体が取り込まれます。後ほど説明しますが、zip ファイル中にはひとつだけ html ファイルを含めることができます。Zip ファイルをアップロードすると、その中に格納されている html ファイルの内容がこの要素に取り込まれます。Zip ファイル中の他のファイルはページのリソースとして取り込まれることになります。

extractHead() メソッド

このテンプレートには、extractHead() と extractBody() というふたつのメソッドが定義されています。どちらも、取り込んだ html から、ページに組み込む部分を切り出すメソッドです。まず、extractHead() について説明しましょう。

extractHead() は、要素 html に取り込まれた html の <head>〜</head> 内から必要な部分を切り出します。今回は、script, link rel="stylesheet", style の 3 種類のタグを選別して切り出しています。

メソッドの定義は下記のスナップショットのとおりです。

extractHead() メソッドの定義画面

メソッド extractHead() の説明

<wr-->
  html に何も入力されていない場合には何もせずに戻ります。</wr-->
</wr-->
<wr-if condition="isNull(html)"><wr-return value=""/></wr-if>
<wr-->
  html に入力されている文字列を parseHtml() 関数でパースします。
  parseHtml() 関数の戻り値は HTMLDocument オブジェクトです。
</wr-->
<wr-variable name="htmlDocument" value="parseHtml(html)" />
<wr-->
  上手くパースできなかった場合には何もせずに戻ります。
</wr-->
<wr-if condition="isNull(htmlDocument)"><wr-return value=""/></wr-if>
<wr-->
  HTMLDocument オブジェクトの head() メソッドで head タグ部分を取り出します。
</wr-->
<wr-variable name="head" value="htmlDocument.head()" />
<wr-->
  head タグがない(見つからない)場合には何もせずに戻ります。
</wr-->
<wr-if condition="isNull(head)"><wr-return value=""/></wr-if>
<wr-->
  head タグ以下にある script, link rel="stylesheet", style タグを取り出します。
  HTMLElement オブジェクトの select() メソッドのパラメタの書き方は css のセレクタによく似ています。
</wr-->
%head.select("script, link[rel=\"stylesheet\"], style").outerHtml()%

下記のマニュアルページも参考にしてください。

extractBody() メソッド

extractBody() は、要素 html に取り込まれた html の <body>〜</body> の内側全体を切り出します。メソッドの定義は下記のスナップショットのとおりです。

extractBody() メソッドの定義画面

メソッド extractBody() の説明

<wr-->
  html に何も入力されていない場合には何もせずに戻ります。
</wr-->
<wr-if condition="isNull(html)"><wr-return value=""/></wr-if>
<wr-->
  html に入力されている文字列を parseHtml() 関数でパースします。
  parseHtml() 関数の戻り値は HTMLDocument オブジェクトです。
</wr-->
<wr-variable name="htmlDocument" value="parseHtml(html)" />
<wr-->
  上手くパースできなかった場合には何もせずに戻ります。
</wr-->
<wr-if condition="isNull(htmlDocument)"><wr-return value=""/></wr-if>
<wr-->
  HTMLDocument オブジェクトの body() メソッドで body タグ部分を取り出します。
</wr-->
<wr-variable name="body" value="htmlDocument.body()" />
<wr-->
  body タグがない(見つからない)場合には何もせずに戻ります。
</wr-->
<wr-if condition="isNull(body)"><wr-return value=""/></wr-if>
<wr-->
  body タグの内側の html を返します。
</wr-->
%body.html()%

下記のマニュアルページも参考にしてください。

テンプレートの展開

テンプレート「外部コンテンツ取り込み」の展開は下のスナップショットのとおりです。

  • <head>〜</head> 内で、先の extractHead() メソッドを呼び出しています。これにより、取り込んだん html 中の <head>〜</head> 内に書かれていた script, link rel="stylesheet", style を切り出した結果をこの場所に組み込んでいます。
  • <body>〜</body> 内で、先の extractBody() メソッドを呼び出しています。これにより、取り込んだ html 中の <body>〜</body> 内に書かれていた内容をこの場所に組み込んでいます。
  • その他の部分は普通の展開の記述になっています。
テンプレートの展開画面

外部作成した html コンテンツを格納した zip ファイルを準備する

テンプレートの準備はできたので、取り込む html コンテンツを準備しましょう。どのような zip を用意すればよいのかは、例をご覧いただければおわかりいただけると思います。今回は import_html_example.zip というファイルを準備してゆくことにします。

Zip ファイルの中のファイル一覧

Archive:  import_html_example.zip
  Length     Date   Time    Name
 --------    ----   ----    ----
     4955  11-17-15 17:12   import_html_example.html
        0  11-17-15 17:11   mpifhh00000000cy-res/
     1668  11-17-15 17:10   mpifhh00000000cy-res/default.css
        0  11-17-15 17:10   mpifhh00000000cy-res/images/
   123102  11-17-15 17:10   mpifhh00000000cy-res/images/p1.png
   110765  11-17-15 17:10   mpifhh00000000cy-res/images/p2.png
    59631  11-17-15 17:10   mpifhh00000000cy-res/images/p3.png
   108273  11-17-15 17:10   mpifhh00000000cy-res/images/p4.png
    74581  11-17-15 17:10   mpifhh00000000cy-res/images/p5.png
    69214  11-17-15 17:10   mpifhh00000000cy-res/images/p6.png
     6327  11-17-15 17:10   mpifhh00000000cy-res/images/yellowBox.png
      490  11-17-15 17:10   mpifhh00000000cy-res/responsiveslides.css
     3397  11-17-15 17:10   mpifhh00000000cy-res/responsiveslides.min.js
 --------                   -------
   562403                   13 files
  • Zip ファイルの中には import_html_example.html という html ファイルがひとつだけ格納されています。Zip ファイル中には html ファイルを必ずひとつ入れてください。ふたつ以上入っていると取り込めません。
  • html ファイルのファイル名はなんでもかまいません。
  • この html ファイルが参照している画像やスクリプト、スタイルシートなどは mpifhh00000000cy-res というサブディレクトリ以下に格納されています。
  • import_html_example.html 内でのリソースの参照は、ディレクトリ mpifhh00000000cy-res 以下のリソースを参照するように相対パスを記述しておく必要があります。
  • Zip をページに取り込む段階で zip ファイル中に格納されている html ファイルのファイル名を、ページのファイル名に自動設定するオプションが選択できます。外部で html ファイルを作成するときにこのオプションの利用を念頭に html ファイルのファイル名を決めておくと良いでしょう。今回は import_html_example.html としておきました。
  • Zip をページに取り込む段階で html ファイルに指定されている title タグの内容を、ページのタイトルに自動設定するオプションが選択できます。外部で html コンテンツを作成するときにこのオプションの利用を念頭に title タグの内容を決めておくと良いでしょう。今回は「外部コンテンツ取り込みのサンプル」としておきました。

html ファイル以外のリソース類は、ひとつのサブディレクトリにまとめて格納するようにしてください。そして、このサブディレクトリ名はユニークな名前にしておきます。これにより、他のページのリソースと URL が衝突するのを防ぎます。default.css などのありがちな名前を使用しているといとも簡単に他のページのリソースと URL が衝突してしまします。ユニークな名前を付けたサブディレクトリ以下に封入することで URL の衝突を避けるようにしましょう。

今回は import_html_example.html の内容は下記のようなものにしてみました。

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<head>
		<title>外部コンテンツ取り込みのサンプル</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<link rel="stylesheet" href="mpifhh00000000cy-res/default.css">
		<link rel="stylesheet" href="mpifhh00000000cy-res/responsiveslides.css">
		<script src="mpifhh00000000cy-res/responsiveslides.min.js"></script>
		<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
	</head>
	<body>
	<div class="imported">
		<h1>この部分には外部で作成されたコンテンツが組み込まれています</h1>
		 <ul class="rslides left" id="slider1">
			<li><img src="mpifhh00000000cy-res/images/p1.png" alt="PIA19839: Strata at Base of Mount Sharp "><p class="caption">NASA: PIA19839: Strata at Base of Mount Sharp</p></li>
			<li><img src="mpifhh00000000cy-res/images/p2.png" alt="PIA19920: Curiosity Self-Portrait at 'Big Sky' Drilling Site "><p class="caption">NASA: PIA19920: Curiosity Self-Portrait at 'Big Sky' Drilling Site</p></li>
			<li><img src="mpifhh00000000cy-res/images/p3.png" alt="PIA19807: Curiosity Low-Angle Self-Portrait at 'Buckskin' Drilling Site on Mount Sharp"><p class="caption">NASA: PIA19807: Curiosity Low-Angle Self-Portrait at 'Buckskin' Drilling Site on Mount Sharp</p></li>
			<li><img src="mpifhh00000000cy-res/images/p4.png" alt="PIA19066: Within Rover's Reach at Mars Target Area 'Alexander Hills'"><p class="caption">NASA: PIA19066: Within Rover's Reach at Mars Target Area 'Alexander Hills'</p></li>
			<li><img src="mpifhh00000000cy-res/images/p5.png" alt="PIA17939: Curiosity Making Headway West of 'Dingo Gap'"><p class="caption">NASA: PIA17939: Curiosity Making Headway West of 'Dingo Gap' </p></li>
			<li><img src="mpifhh00000000cy-res/images/p6.png" alt="PIA19810: Test Rover at JPL During Preparation for Mars Rover's Low-Angle Selfie "><p class="caption">NASA: PIA19810: Test Rover at JPL During Preparation for Mars Rover's Low-Angle Selfie </p></li>
		 </ul>
		 <script>$(function () {$("#slider1").responsiveSlides({maxwidth: 450, speed: 1000, timeout: 8000});});</script>
  		 <p>Lorem ipsum dolor sit amet, , quis nostrud exercitation consectetur adipisicing elit, , quis nostrud exercitation consectetur adipisicing elit, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation consectetur adipisicing elit.</p>
<div style="font-size: 11px;">
\[
  \frac{\pi}{2} =
  \left( \int_{-\infty}^{\infty} \frac{\sin x}{\sqrt{x+z}} dx \right)^2 =
  \sum_{k=0}^{\infty} \frac{(2k)!}{2^{3k}(k!)^2} \frac{1}{2k+1} 
  \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 7}
\]
</div>
		 <p>quis nostrud exercitation consectetur adipisicing elit, sed do eiusmod tempor incididunt ut ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit. Lorem ipsum dolor sit amet, in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  labore et dolore magna aliqua.</p>
		 <p>
		 <ul class="yellow">
			   <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
			   <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim</li>
			   <li>amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</li>
			   <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
		  </ul>
		  </p>
		  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <code>voluptate velit esse cillum dolore eu fugiat nulla pariatur.</code> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		  <code><pre style="float:right;">
adding: images/TwoGears.jpg (deflated 1%)
adding: images/yellowBox.png (stored 0%)
adding: index.html (deflated 79%)
adding: responsiveslides.css (deflated 50%)</pre></code>
		   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <strong>eiusmod tempor</strong> incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco <code>y = ax<sup>2</sup> + bx + c</code> laboris  Ut enim ad minim veniam,  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <a href="http://www.frameworks.co.jp/">voluptate velit esse cillum</a> dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		   <h1>外部で作成されたコンテンツはここで終わりです</h1>
	</div>
	</body>
</html>
  • リソースの参照は <link rel="stylesheet" href="mpifhh00000000cy-res/default.css"> のように相対パスで行われているのがわかります。
  • ごく普通の html コーディングになっていることがわかると思います。
  • 外部で作成したコンテンツを WebRelease に取り込む場合、WebRelease のページ側に指定しているスタイルが取り込んだコンテンツにも影響してしまう場合があります。取り込まれるコンテンツを作成するときには、使用するタグについて、しっかりとスタイルを指定しておく方が安全でしょう。
  • 一方で、WebRelease のページ側で指定されているスタイルの中には引き継いだ方がよいものもあるかもしれません。例えば、文字の大きさなどは揃えたいと考えるかもしれません。兼ね合いを考えてコンテンツを作成してください。

ページを作成して外部コンテンツの zip ファイルを取り込む

さて、次は、先ほど用意したテンプレートを使ってページを作ってみましょう。ページ作成直後のページ編集画面は下のスナップショットのようになっていると思います。Zip ファイルを取り込むために、入力エリア html の右側に表示されている「アップロード」ボタンをクリックします。

ページ作成直後のページ編集画面

アップロードボタンをクリックすると zip ファイルをアップロードするパネルが表示されます。「ファイル選択」ボタンをクリックしてください。

Zip アップロードパネル

「ファイル選択」ボタンをクリックするとブラウザのファイル選択パネルが表示されます。ここで先ほど作成しておいた zip ファイル(ここでは import_html_example.zip という名前で zip ファイルを作成しておきました)を指定します。Zip ファイルを指定したら「開く」ボタンをクリックします。

ブラウザのファイル選択パネルで import_html_example.zip を選択しているところ

「開く」ボタンをクリックすると、再度、zip アップロードパネルが表示されます。正しく zip ファイルが指定されているのを確認したら「実行」ボタンをクリックします。

この時、ふたつのオプションが選択できます。ひとつは「アップロードされた html ファイルの中の title タグの内容をページタイトルに設定する」というオプションです。このオプションを ON にして取り込みを実行すると、html ファイル中の title タグの内容がこのページのページタイトルに設定されます。

もうひとつのオプションは「アップロードされた html ファイル名をページのファイル名に設定する」というオプションです。このオプションを ON にして取り込みを実行すると、アップロードされた html のファイル名がこのページのファイル名に設定されます。

今回は、両方 ON で取り込んでみましょう。

Zip アップロードパネルで「実行」ボタンをクリックします

「実行」ボタンをクリックすると、zip ファイルの取り込みが行われた後、ページ編集画面が表示されます。

  • import_html_example.html の内容が、入力フィールド html にとりこまれているのがわかります。
  • このページのページタイトルが、アップロードした zip ファイル中に格納しておいた import_html_example.html という html の title タグの内容に設定されているのがわかります。
  • このページのファイル名が、アップロードした zip ファイル中に格納しておいた import_html_example.html というファイルの名になっていることがわかります。
Zip ファイル取り込み後のページ編集画面

さて、リソースの登録状況も確認してみましょう。「リソース」タブをクリックしてページリソースの一覧を表示してください。

  • フォルダアイコンをクリックするとフォルダを開いて表示することができます。
  • アップロードした zip ファイルに格納されていたファイルがページリソースとして登録されているのがわかります。
  • import_html_example.html 自体はページの要素内にとりこまれているためリソースとしては登録されません。

取り込んだ結果のページの出来映えをプレビューして確認してみましょう。画面左上にあるプレビューアイコンをクリックしてください。

Zip インポート後のリソース一覧画面

プレビューアイコンをクリックするとプレビューウインドウが開いてページのプレビューが表示されます。プレビューウインドウの表示は下のスナップショットのようになるでしょう。Zip ファイルでアップロードしたコンテンツが取り込まれているのがわかります。

まとめ

いかがでしたでしょうか。外部で作成したコンテンツを zip 形式にまとめておいてページに取り込む方法をご紹介しました。

このサンプルのサイトのエキスポートファイルはここからダウンドードできます。
(ZIP・736kB)

Version 2.70 以降の WebRelease でご利用ください。Zip 化されていますので解凍して import_html_example.wrb を取り出してから WebRelease にインポートしてお試しください。

  • 今回は、body タグの内側全体を取り込みましたが、特定の class 属性を持つ div の内側だけを取り込んだり、body タグの内側にある特定のタグを削除してから取り込むなども可能です。テンプレートでいろいろと工夫してみてください。
  • 外部コンテンツ取り込みの仕組みをコンポーネント化することでいろいろな場所で利用できるようになるでしょう。
  • 外部コンテンツの必要とする css と、それを取り込む側のページの css は干渉しやすいので注意が必要です。取り込むページ側で指定しているスタイルが、取り込まれたコンテンツにも適用されてしまうことが原因で取り込み結果が意図しない表示になることがあります。今回の例で言うと class 属性に importedArea が指定されている div に対して、一旦 css をリセットする記述をしておいても良いかもしれません。
  • 同様に script についても干渉に注意が必要です。例えば、ページ側と、取り込まれるコンテンツ側で、別々に jquery をロードしてしまわないように気をつけるなどの注意が必要です。
  • 外部コンテンツの body タグは取り込むのが難しいので、外部コンテンツ作成時には body タグに重要な class 属性や style 属性を指定するのはやめておいた方が良いでしょう。内側にdiv タグを入れるなどして対処するのが良いでしょう。
  • WebRelease に組み込まれている html のパーサは Jsoup です。

WebRelease 2 Version 2.70 の新機能のご紹介

このページの記述は WebRelease 2 Version 2.70 にもとづいています。他のバージョンの WebRelease には当てはまらない場合があります。
このページの記述は予告なく変更されたり削除される場合があります。あらかじめご了承ください。

ページの先頭へ

お問い合わせ・資料請求

WebRelease2 の最新カタログと関連資料をお送りいたします。お気軽にご請求ください。

資料ダウンロード