強化されたプレビュー機能

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

Version 2.70 では、プレビュー機能が強化されました。

ページ編集画面から直接入力された html の中にある URL で、その URL がそのサイトにあるいずれかのオブジェクト(ページ、サイトリソース、テンプレートリソース、ページリソース)を指している場合、ページをプレビューする時点で、それらの URL をプレビュー用の URL に書き換えてプレビューできるようになりました。

  • ページ編集画面で html を直接入力する場合、リンク先のページの URL を相対または絶対で直接記述しても、プレビュー画面でそのリンクを辿れます。

この例で使用しているテンプレートについて

まず、この例で使用しているテンプレートについてご説明しておきましょう。単純なテンプレートです。

この例で使用しているテンプレート
(ZIP・1.96kB)

Versino 2.70 以降の WebRelease でご利用ください。

  • テンプレートの名前は SimpleHTML としてあります。
  • 「複数行のテキスト」タイプの要素がひとつだけ定義されているテンプレートです。要素の名前は html としてあります。
  • 要素 html には「HTML で記入」に「可」を指定してあります。
  • 展開は、その html に記述された html をそのまま展開するだけの簡単なものです。

ページへの直接リンクを書いてみる

これから、ふたつのページを用意して、片方のページからもう一方のページへのリンクを直接 html で記述してみましょう。

ページ「はじめに」を作成します

ページ「はじめに」を作成します。先のテンプレート SimpleHTML を使って普通にページを作成してください。ページ編集画面には下記のように入力しておきます。

  • ページのタイトルは「はじめに」としておきます。
  • ファイル名は start.html とします。
  • html には下記のとおり、普通に a タグを使って next.html へのリンクを書いてみます。

ページ「次に」を作成します

次に、ページ「次に」を作ります。先の「はじめに」の時と同じように、テンプレート「SimpleHTML」を使って普通にページを作成します。

  • ページのタイトルは「次に」としておきます。
  • ファイル名は next.html とします。
  • html には、ページのタイトルを表示する h1 タグでも書いておきましょう。

ページ「はじめに」からページ「次に」へのリンクを辿ってみる

ページがふたつ作られ、ページ「はじめに」にはページ「次に」へのリンクが置かれています。ここで、ページ「はじめに」をプレビューしてみます。

プレビュー画面は下のスナップショットのようになっているでしょう。

このプレビュー画面上で、リンク「次に」をクリックすると、下のスナップショットのように「次に」ページが表示されます。

ごく当たり前の動作ですが、今まで 2.6 系以前の WebRelease をご利用になられてきた皆さんには、ちょっと目新しい動作になっていると思います。WebRelease のいままでの常識が覆される、驚きの瞬間(?)でしょうか。

Version 2.70 からは、ページのコンテンツ中に直接 html を記述する場合、他のページやリソースを参照する URL を、相対パス、絶対パスにかかわらず、直接記述できるようになっています。

  • 「はじめに」のページのプレビューを行った時点で、その html の中に書かれていた URL href="next.html" は、対応するページのプレビュー用の URL に書き換えられています。ですので、プレビュー画面上でもリンクを辿ることができます。
  • 書き換えの対象になるのは a タグの href 属性だけという訳ではありません。基本的に html のスペックで URL が書けることになっている属性の値はすべて書き換えの対象になります。

html の中でページリソースを参照してみる

さて、次は、ページにリソースを登録し、それをページの html の中から直接参照してみます。

ページリソースを登録する

Version 2.70 からは、ページにリソースを定義できるようになっています。先ほどの「次に」のページにリソースを登録してみましょう。

ページ編集画面で「リソース」タブをクリックすると、ページリソース一覧画面が表示されます。この画面の右上にある「アップロード」ボタンをクリックしてください。

「アップロード」ボタンをクリックすると、下のスナップショットのように、リソースアップロードパネルが表示されます。「ファイル選択」ボタンをクリックしてリソースとして登録するファイルを指定します。

「ファイル選択」ボタンをクリックすると下のスナップショットのように、ブラウザのファイル選択パネルが表示されます。パネルでページリソースとして登録したい画像ファイルを選択してください。ここでは picture-1.png というファイルをリソースとして登録してみます。

画像ファイルを選択したら「開く」ボタンをクリックします。

  • 最近のブラウザでは、ここで複数のファイルを選択できるようになっています。複数ファイルを選択することで、一度の操作で複数のページリソースを登録することができます。
  • 最近のブラウザでは「ファイル選択」ボタンの上に画像をドラッグ&ドロップできるものもあるようです。ファイル選択ボタンをクリックしてファイル選択パネルを開いて、そこでファイルを指定する手順を踏まずに、直接アップロードするファイルをドラッグできます。

「アップロードするファイル」の欄を見ると、目的のファイル picture-1.png が選択されているのがわかります。間違いがなければ「次へ」ボタンをクリックしてください。

「次へ」ボタンをクリックすると、登録内容を確認するパネルが表示されますので登録内容を確認してください。まちがいが無ければ「実行」ボタンをクリックします。

「実行」ボタンをクリックすると、指定したファイルがページリソースとして登録されます。そして、下のスナップショットのようなページリソースの一覧画面が表示されます。指定したファイルがリソースとして登録されているのがわかります。

登録されたリソースの小さなサムネイルにマウスを乗せると、登録されている画像が原寸で表示されます。リソースの確認に利用できます。

以上で、ページ「次に」にページリソース picture-1.png の登録が完了しました。

ページの html の中からページリソースを URL で参照する

次は、今登録したリソースをページのコンテンツ中から参照してみましょう。

先ほど作成した「次に」ページを少し修正して、その html の中からいま登録した picture1.png を参照してみます。直接 URL での参照が可能です。

ページ「次に」の html を修正したら、ページをプレビューしてみてください。img タグの src 属性が picture-1.png のプレビュー用の URL に書き換えられているので、プレビュー画面で正しく画像が表示されているのが確認できるでしょう。

まとめ

Version 2.70 では html や css 中の URL を、プレビュー用の URL に書き換えてプレビューする機能が追加されました。

この機能についてはもっといろいろな角度からご説明させていただきたいと思っているのですが、少し長くなってしまったのでここで一区切りとさせていただきました。別の機会にもう少し説明させていただければと思っております。それまでしばらくお待ちください。

  • プレビュー時に URL を自動書き換えしてプレビューできるようになりました。
  • この機能により、外部で作成した html + image + script + css を取り込みやすくなりました。
  • プレビュー時の URL 書き換えの対象になるファイルは html または css です。javascript 内は書き換えの対象になりません。
  • ページに記述した html だけでなく、リソースとして登録されている html や css の中の URL も書き換えの対象になります。
  • この機能はプレビュー時にのみ動作します。この機能が公開コンテンツに影響を与えることはありません。

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

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

ページの先頭へ

お問い合わせ・資料請求

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

資料ダウンロード