WebRelease ver.2.70 新機能のご紹介

ver.2.70 新機能のご紹介
WebRelease 2 ver.2.70 新機能のご紹介
はじめに
本資料は、現在 WebRelease をご利用中のお客様、および新規導入をご検討中のお客様へ、
2015 年 9 月にリリースされた WebRelease のメジャーバージョンアップ ver.2.70 で新しく
追加された機能に関する情報をご提供することを目的としています。ver.2.70 をリリース後、
フレームワークスソフトウェアのウェブサイトに順次掲載された記事を一つの資料としてま
とめたものです。
WebRelease ver.2.70 には、強力なリビジョン比較機能やページ検索機能、外部リンク
チェック機能などの他、数々の新機能が追加されています。ver.2.70 をご採用いただくこと
で多くのメリットを得ることができます。
コンテンツ運用の省力化・ミスの低減
リンク切れや修正漏れを無くしウェブサイトの品質を向上
テンプレートの作成や改修、チューニング作業の効率化
ユーザのアカウント管理・権限管理の省力化
パスワードの安全性向上やログイン履歴管理等によるセキュリティの強化
本資料の各章では、実際に WebRelease を操作するご担当者や CMS 管理者を対象に、具
体例をもとにした管理画面のスクリーンショットと操作手順をご説明しながら、各機能の詳
細をご紹介しています。本資料で新機能をご確認いただき、WebRelease ver.2.70 の採用
をご検討ください。
WebRelease ver.2.70 に関するお問い合わせはこちらへ
[email protected]
2
2015 年 12 月
WebRelease 2 ver.2.70 新機能のご紹介
Index
ページのリビジョン比較機能…………………………………………………………………… 4
ページ検索機能………………………………………………………………………………… 12
外部リンクチェック機能：設定編…………………………………………………………… 17
外部リンクチェック機能：活用編…………………………………………………………… 22
ページのリビジョン一括削除機能…………………………………………………………… 26
ページフォルダの一括作成…………………………………………………………………… 28
ユーザ一括登録：登録編……………………………………………………………………… 30
ユーザ一括登録：更新・削除編 …………………………………………………………… 32
ユーザ一の一括削除…………………………………………………………………………… 39
サイトリソースの管理：基礎編……………………………………………………………… 41
サイトリソースの管理：ZIP 編 ……………………………………………………………… 49
サイトリソースの管理：ライター権限……………………………………………………… 54
Javascript と CSS の圧縮と難読化 ………………………………………………………… 56
テンプレート・プロファイラ………………………………………………………………… 59
テンプレート検索……………………………………………………………………………… 64
テンプレートのデバッグ機能の強化………………………………………………………… 69
テンプレートの WTL 一括設定機能 ………………………………………………………… 71
強化されたプレビュー機能…………………………………………………………………… 73
Markdown を使ってみる …………………………………………………………………… 80
ページリソースの利用………………………………………………………………………… 88
外部作成コンテンツの取込み：ZIP アップロード ………………………………………… 98
スタッフ登録機能……………………………………………………………………………… 111
その他の機能追加……………………………………………………………………………… 118
3
2015 年 12 月
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン比較機能
2015 年 12 月
ページのリビジョン比較機能
Version 2.70 には、ページのリビジョン間の比較機能が搭載されました。
リビジョン比較機能は、あるページの任意のふたつのリビジョン間の違いを洗い出す時に使用します。リビジョン比較機能は次のよう
な局面で威力を発揮するでしょう。
公開中のページを修正して新リビジョンを作成した。公開前に修正個所をもう一度しっかりと確認しておきたい。
修正を依頼した箇所が期待どおりに修正されているかを素早く確実にチェックしたい。
ページをブラウザで表示して比較したが、違いのある箇所が簡単に見つからない。
違いが見つかったが、他に違いはないのだろうか？確証が欲しい。
ページ中のある表現がどのリビジョンから存在するのかを調べたい。
meta タグや alt 属性など、画面の表示には直接は現れない違いも把握したい。
バージョン 2.70 で実装されたリビジョン比較機能は、このようなニーズをしっかりと支援する強力なものに仕上がっています。
リビジョン比較画面を呼び出す
リビジョンの比較はリビジョン比較専用の画面（リビジョン比較画面）で行ないます。WebRelease のメインの操作画面とは別のウイ
ンドウ（タブ）を使用します。
このリビジョン比較画面は、コントロールキー、または、シフトキーを押しながらプレビューアイコンをクリックすることで呼び出す
ことができます。
上のスナップショットはページ一覧画面のケースですが、プレビューアイコンが
表示されている場所であれば、どこでもリビジョン比較画面を呼び出すことがで
きます。
バージョン 2.70 では、従来プレビュー画面を表示することができていた場所で
は、プレビュー画面とリビジョン比較画面のを両方を表示できるようになってい
ます。プレビューアイコンをクリックすると従来どおりプレビュー画面が表示さ
れます。また、プレビューアイコンを CTRL + クリック、または SHIFT + クリッ
クするとリビジョン比較画面が表示されます。
Rev.07
4
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン比較機能
2015 年 12 月
プレビューアイコンが表示されている箇所であれば、どこからでもリビジョン比較画面を呼び出せます。
もちろん、ページ編集画面からも呼び出せます。
承認画面からも呼び出せますので、差分を確認しながら効率よく確実な承認業務がおこなえます。
リビジョン比較画面は CTRL + クリックまたは SHIFT + クリックで呼び出せるということは覚えてしまいましょう。
比較するリビジョンの選択
リビジョン比較画面が表示されると、画面中に、ふたつのポップアップボタンがあります。左側のボタンで旧リビジョンを、右側のボ
タンで新リビジョンを選択して比較対象を選びます。
ポップアップでリビジョンを選択すると、比較画面はすぐに選ばれたリビジョンの比較画面に切り替わります。
比較方法の種類と選択
リビジョン比較を行なう場合、比較するリビジョン間にどのような差分があるのかに応じて、適切な方法で比較する必要があります。
PDF などの添付ファイルを差し替えたり meta タグの記述を変更したなどの場合は、そのページをブラウザで表示してみても視
覚的な違いが現れてこない。
画像を軽量化したものに差し替えた場合なども、ふたつのリビジョンをブラウザで表示して目視で比較してみても違いは判らな
い場合が多い。
（もともと、判らないであろう範囲で軽量化を行なっているのですから判らなくて当然です。
）
一方、テキストを小修正した場合などは、修正箇所が色づけされて強調表示されるような画面をブラウザで表示するだけで直感
的に差分の把握が行なえる。
WebRelease 2.70 では、多角的にリビジョン比較ができるよう、下記の 6 種類の比較方法が用意されています。
要素比較：要素レベルでの比較
左右比較：ページのコンテンツを左右対比で比較
行単位比較：ページのコンテンツを行単位で比較
ビジュアル 1：HTML をビジュアルに比較 -- 削除部分を赤色表示＋加筆部分を緑色表示
ビジュアル 2：HTML をビジュアルに比較 -- 削除部分を赤色表示
ビジュアル 3：HTML をビジュアルに比較 -- 加筆部分を緑色表示
比較方法の選択は、リビジョン比較画面にある 6 つのタブのいずれかを選んで決めます。タブを切り替えるだけで各種の比較ができる
ので、スピーディにさまざまな角度から差分を確認することができます。
5
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン比較機能
2015 年 12 月
要素比較：要素レベルでの比較
リビジョン比較画面の一番左側にある「要素比較」タブを選ぶと要素レベルでの比較が表示されます。
この画面では、画面左半分に旧リビジョンで入力されていたデータが表示され、右半分に新リビジョンに入力されているデータが対比
される形で表示されます。
「複数行テキスト」の比較
このスナップショットは、
「セクション [1]. 本文 . 文章 . 説明文」という要素に入力されているテキストが、リビジョン 2 とリビジョ
ン 3 で異なっている場合の表示例です。
画面左側が「チャネル別コンテンツ生成」というタイトルのページのリビジョン 2 の「セクション [1]. 本文 . 文章 . 説明文」に
入力されているテキストです。赤色に表示されている部分はリビジョン 2 にあってリビジョン 3 からは削除されている部分です。
画面右側は、同様に、リビジョン 3 の「セクション [1]. 本文 . 文章 . 説明文」に入力されているテキストです。緑色に表示され
ている部分はリビジョン 2 にはなくリビジョン 3 で加筆された部分です。
「チェックボックス」の比較
このスナップショットは、
「チェックボックス要素の比較」というページのリビジョン 1 と 2 を比較した場合の表示例です。

「月の名前 [0]」という要素はリビジョン 1 とリビジョン 2 の両方にありますが、そのチェックボックスの設定状態が異なってい
ます。
リビジョン 2 には「月の名前 [1]」という要素が追加されています。
リビジョン 1 側でのみチェックされているチェックボックスは赤色で表示されています。
リビジョン 2 側でのみチェックされているチェックボックスは緑色で表示されています。
6
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン比較機能
2015 年 12 月
「画像」の比較
このスナップショットは、
「画像の比較」というページのリビジョン 1 と 2 を比較した場合の表示例です。
リビジョン 1 にあった「写真 [0]」という要素はリビジョン 2 では削除されているのがわかります。
リビジョン 1 と 2 の両方に「写真 [1]」という要素がありますが、この要素のリビジョン 2 の画像には軽量化（ファイルサイズ
を小さくする処理）が加えられているのか、見た目は殆ど同じですがファイルサイズが異なっているのがわかります。
比較画面中では、画像は少し大きめのサムネール程度のサイズで表示されていますが、画像をクリックすればその画像をオリジナルの
サイズで確認することができます。
7
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン比較機能
2015 年 12 月
添付ファイルの比較
このスナップショットは、
「添付ファイルの比較」というページのリビジョン 1 と 2 を比較した場合の表示例です。
リビジョン 1 の「参考資料 [0]」と、リビジョン 2 の「参考資料 [0]」には、どちらも B-WR0260-005.pdf という添付ファイルが
指定されていますが、そのサイズに違いがあることがわかります。
リビジョン 1 には「参考資料 [1]」という添付ファイル要素がありましたが、
リビジョン 2 では削除されていることがわかります。
ページタイトル／公開開始指定時刻／公開終了指定時刻／ファイル名の比較
このスナップショットは、
「公開時刻とファイル名の差分」というページのリビジョン 1 と 2 を比較した場合の表示例です。要素比較
では、要素に入力されているデータだけでなく「ページタイトル」
「公開開始指定時刻」
「公開終了指定時刻」
「ファイル名」について
も違いが表示されます。
スナップショット中のオレンジ枠内に注目してください。要素比較では、この部分には選択されているリビジョンで使われてい
るページタイトルが表示されます。この例では、リビジョン 1 ではページタイトルが「公開時刻とファイル名のの差分」となっ
ていましたが、リビジョン 2 では「公開時刻とファイル名の差分」に変更（訂正）されているのがわかります。
リビジョン 1 では公開開始指定時刻は指定されていませんが、リビジョン 2 では 2015/11/01 00:00 に指定されていることがわ
かります。
リビジョン 1 では公開終了指定時刻が 2019/01/01 00:00 に指定されていますが、リビジョン 2 では 2017/02/01 00:00 に変更
されているのがわかります。
リビジョン 1 ではファイル名は index.html となっていますが、リビジョン 2 では index_2.html となっているのがわかります。
その他のタイプの要素比較
ここまでのご紹介で、要素比較については、ある程度イメージを掴んでいただけたでしょうか。他のタイプの要素も、それぞれの要素
タイプに適した形での差分表示が行なわれます。
8
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン比較機能
2015 年 12 月
コンテンツ生成の結果をテキストファイルとして比較する
この比較では、比較対象のふたつのリビジョンに対してコンテンツ生成を実行し、得られた結果の差分を表示します。テキストファイ
ルとしての比較が行われるので、生成されるコンテンツのタイプは問いません。多くの場合は html なわけですが css や javascript を
生成するページの場合でも比較を行うことができます。
この比較方法では、比較対象のリビジョン間で、画像や添付ファイルが差し替えられていても、そのファイル名が変更されてい
ない場合には差分として表示されませんので注意してください。
左右比較：ページのコンテンツを左右対比で比較
このスナップショットは、
「チャネル別コンテンツの生成」というページのリビジョン 2 から生成された html と、同ページのリビジョ
ン 3 から生成された html の差分を左右に対比して表示しています。
違いのある行が見つかると、その行全体は黄色い背景色で表示されます。
リビジョン 2 にあり、リビジョン 3 で削除された部分は赤色で表示されます。
リビジョン 2 にはなく、リビジョン 3 で加筆された部分は緑色で表示されます。
行単位比較：ページのコンテンツを行単位で比較
このスナップショットは、
「チャネル別コンテンツの生成」というページのリビジョン 2 から生成された html と、同ページのリビジョ
ン 3 から生成された html の差分を行単位で表示しています。
差分のある行は赤色または緑色で表示されます。
リビジョン 2 側のテキストは赤色で表示されます。
リビジョン 3 側のテキストは緑色で表示されます。
9
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン比較機能
2015 年 12 月
HTML をビジュアルに比較
差分をビジュアルに表示することもできます。この比較ではページのプレビューの中に修正箇所が色付けされ、強調された状態で表示
されます。非常に直感性のある比較表示ですが、欠点もありますので注意して使用してください。
比較できるのは html のみです。css や javascript などは比較できません。
テキスト以外の差分は画面には現れませんので注意してください。
この方式での差分表示は比較的小規模なテキストの修正の確認に向いています。修正箇所がはっきりとわかります。
リビジョン間の違いが大きい場合は直感性のない表示になってしまう場合があります。
もともとの html の中に赤色や緑色に着色されている部分があると、どこに差分があるのかがわかりにくくなってしまう場合が
あります。
他の差分表示で差分を把握した上で補助的に使うのがよいでしょう。
ビジュアル 1：削除部分を赤色表示＋加筆部分を緑色表示
このスナップショットは「チャネル別コンテンツの生成」というページのリビジョン 2 とリビジョン 3 を「ビジュアル 1」と呼ばれる
方法で比較表示した場合の例です。
この差分表示は、ふたつのリビジョンを合成した html を表示します。
リビジョン 2 にあってリビジョン 3 で削除されている部分は赤色で表示されます。
リビジョン 2 にはなくリビジョン 3 で加筆されている部分は緑色で表示されます。
両リビジョン間に大きな違いがある場合、特に、レイアウトが変わってしまっているような場合には、あまり綺麗な表示はでき
ません。ふたつのリビジョンの html の合成には限界があるためです。
10
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン比較機能
2015 年 12 月
ビジュアル 2：削除部分を赤色表示
このスナップショットは「チャネル別コンテンツの生成」というページのリビジョン 2 とリビジョン 3 を「ビジュアル 2」と呼ばれる
方法で比較表示した場合の例です。
この差分表示で表示される画面は、基本的にはリビジョン 2 のプレビューと同じです。
リビジョン 2 にあってリビジョン 3 で削除された部分については、赤色に表示されます。
リビジョン 3 での加筆部分は表示対象にはなりません。
ビジュアル 3：加筆部分を緑色表示
このスナップショットは「チャネル別コンテンツの生成」というページのリビジョン 2 とリビジョン 3 を「ビジュアル 3」と呼ばれる
方法で比較表示した場合の例です。
この差分表示で表示される画面は、基本的にはリビジョン 3 のプレビューと同じです。
リビジョン 2 にはなく、リビジョン 3 で加筆された部分が緑色に表示されます。
リビジョン 2 から削除された部分は表示対象にはなりません。
まとめ
ご紹介してきましたとおり、WebRelease 2.70 には強力なリビジョン比較機能が実装されています。この機能をご活用いただければ
コンテンツの作成／更新作業が効率化され、また、コンテンツのクオリティーも一段と向上するのではないでしょうか。
プレビューアイコンを CTRL + Click または SHIFT + Click で比較画面を呼び出せます。
プレビューアイコンが表示されている場所であればどこからでも比較画面を呼び出すことができます。
6 種類の比較表示で差分を確実に把握できます。
11
WebRelease 2 ver.2.70 新機能のご紹介 - ページ検索機能
2015 年 12 月
ページ検索機能
Version 2.70 には、ページ検索機能が搭載されました。
ページ検索機能は、指定された検索語を含んでいるページを見つけ出して一覧表を表示します。ページ検索機能はさまざまな局面で強
力なツールになります。
公開コンテンツ中に誤字を見つけたが対応するページが WebRelease 中でなかなかみつからない。他のページからコンテンツの
一部を取り込んでいるページでは問題となっているページがなかなかみつからない場合がある。
サイト上の全コンテンツについて同じ修正を大量に行う必要が生じた。修正箇所を確実に洗い出す必要がある。
サイト上のコンテンツ中にある誤字の指摘を受けた。指摘された問題箇所がどこにあるのか、効率よく確実に見つけ出して早急
に修正したい。
ページ検索画面
ページ検索は、ページ検索画面で行います。ページ一覧画面にある「検索」タブをクリックするとページ検索画面が表示されます。
Rev.07
12
WebRelease 2 ver.2.70 新機能のご紹介 - ページ検索機能
2015 年 12 月
検索の実行
「検索文字列」欄に検索したい語を入力してから画面右上の「検索」ボタンをクリックすると検索が実行され、結果が表示されます。
検索結果を利用する
検索結果の一覧から、
そのページを直接プレビューすることができます。また、
そのページのページ編集画面に直接入ることができます。
検索結果一覧の「該当部分」欄には検索文字列が一致した部分が表示されています。まず、この部分で、目的のページかどうか
を判断するとよいでしょう。
検索結果一覧に表示されているページのタイトル（下スナップショットオレンジ枠部分）をクリックすると、そのページをプレ
ビューすることができます。目的のページかどうかをしっかりと確認できます。
検索結果一覧の「操作」欄にある黄色い編集ボタン（下スナップショットグリーン枠部分）をクリックすると、
そのページのペー
ジ編集画面に直接入ることができます。すぐに必要な修正を行うことができます。
13
WebRelease 2 ver.2.70 新機能のご紹介 - ページ検索機能
2015 年 12 月
検索オプション
検索の方法を変更するオプションがふたつあります。下のスナップショットのオレンジ枠内にあるチェックボックスで指定します。
AND 検索
「検索文字列」欄には、複数の検索語を入力することができます。複数の検索語を入力する場合には検索語をスペースで区切って入
力します。
「AND 検索」のチェックボックスを ON にして検索を実行すると、検索文字列欄に指定した検索語をすべて含むページ
が検索結果になります。OFF にして検索を実行すると、いずれかの検索語を含むページが検索結果になります。
大文字小文字を区別しない
検索時に大文字と小文字を区別して検索するかどうかを指定することができます。このチェックボックスを ON にして検索を行
うと、大文字と小文字は区別されずに検索が実行されます。たとえば、検索語に html と指定して検索を行った場合に html Html
HTML いずれもマッチするようになります。
検索の対象を絞り込む
ページ数の多いサイトでは検索対象を事前に絞り込めることは重要です。それができないと、検索結果の件数が多くなり目的のページ
に辿り着けなくなってしまいます。殆どの場合は、検索結果は少ない方が便利でしょう。
検索語が含まれている場所を限定して絞り込む
検索文字列に指定した語がページのどの部分に含まれている場合に検索結果に含めるかを指定することができます。たとえば、下記の
ような状況で活用してみましょう。
ページに入力されているテキスト中を探したい。
ページのタイトルで探したい。
ページのファイル名やパス名で探したい。例えば /news/index.html を探したい。
ページの最終更新者で探したい。
下のスナップショットのオレンジ色の枠内のチェクボックスで指定します。
14
WebRelease 2 ver.2.70 新機能のご紹介 - ページ検索機能
2015 年 12 月
入力データ
検索文字列に指定された語がページを構成する要素の入力データに含まれている場合にそのページを検索結果に含めます。例えば、
検索文字列に「インストール」という語を指定した場合、ページを構成するいずれかの要素に「インストール」という語が含まれ
ているページが検索結果に含まれるようになります。
ページタイトル
検索文字列に指定された語がページタイトルに含まれている場合にそのページを検索結果に含めます。特定のタイトルのページを
探したい場合に便利です。
ファイル名
検索文字列に指定された語がページのファイル名（パス名）に含まれている場合にそのページを検索結果に含めます。例えば、検
索文字列に /news/ を指定することで /news/ 以下のディレクトリに置かれているページを検索することができます。また、検索文
字列に index.html を指定すれば index.html というファイル名を持っているページを検索することができます。
要素名
特定の要素名の要素を持っているページを検索することができます。例えば、検索文字列に「囲み記事」という語を指定すると、
「囲
み記事」という要素名の要素を持っているページを検索することができます。
最終更新者
検索文字列に指定した語がページの最終更新者のユーザ ID に含まれている場合にそのページが検索結果に含まれるようになります。
例えば admin という語を検索文字列に指定すると、最終更新者が admin であるページを検索することができます。
ページの状態を指定して絞り込む
特定の状態のページだけを検索対象とすることができます。下のスナップショットのオレンジ枠内のチェックボックスで指定します。
チェックボックスが ON になっている状態のページだけが検索対象になります。
例えば「公開中」のみ ON にした状態で検索を行うと公開中のページについてのみ検索が実行されます。
特定のフォルダ以下で検索する
事前に特定のフォルダに移動してから検索を実行すると、そのフォルダ以下のページのみが検索対象になります。
トップのフォルダで検索を行うと、すべてのページを検索対象にすることができます。
「ページ一覧」タブ側で目的のフォルダまで降りて行き、そこで「検索」タブをクリックして検索を始めることで、特定のフォルダ以
下についてのみ検索を行うことができます。下のスナップショットの例は、フォルダ「ホーム」の下の「マニュアル」の下の「システ
ムの運用管理」というフォルダ内で検索を実行した様子を表しています。
15
WebRelease 2 ver.2.70 新機能のご紹介 - ページ検索機能
2015 年 12 月
まとめ
ページ検索機能について説明させていただきました。このページ検索機能を活用すれば、コンテンツの更新を効率化できるでしょう。
また、コンテンツのクオリティの向上にも役立つでしょう。
ページの検索は「ページ一覧」画面の「検索」画面で行います。
指定された検索語をすべて含むページを検索することができます。また、指定された検索語のいずれかを含むページを検索する
こともできます。
大文字小文字を区別する検索、区別しない検索の両方が行えます。
検索対象を限定して検索することができます。
「入力データ」
「ページタイトル」
「ファイル名」
「要素名」
「最終更新者」
ページのステータスを限定して検索することができます。
「編集中」
「編集完了」
「公開待」
「公開中」
「公開終了待」
「公開終了」
特定のフォルダ以下での検索が可能です。
検索結果から、直接ページをプレビューすることができます。
（リビジョン比較画面も表示できます）
検索結果から、直接ページの編集画面に入ることができます。
16
WebRelease 2 ver.2.70 新機能のご紹介 - 外部リンクチェック機能：設定編
2015 年 12 月
外部リンクチェック機能：設定編
Version 2.70 には、新たに外部リンクチェック機能が搭載されました。
サイトの運営を長く続けていると、コンテンツ中にある外部サイトへのリンクにリンク切れが散見されるようになってきます。コン
テンツ作成時には正しく URL を指定してリンクを作成していても、先方のサイトの都合によりリンク先のページが削除されてしまい、
リンク切れとなってしまうことがあります。このような状況は致し方のないものですが、リンク切れはなるべく早く検知して対応して
おきたいものです。
外部リンクチェック機能を利用すると、公開サーバにアップロードされているコンテンツ中に含まれているすべての外部リンクについ
て、定期的にリンク状況をチェックすることができます。また、リンク切れが検出された場合に通知メールを受け取ることができます。
ここでは、外部リンクチェック機能の設定について説明してゆきます。
外部リンクチェック機能の動作モード
WebRelease の外部リンクチェック機能の動作モードは３種類あります。
定期的に外部リンクのチェックを行う
このモードに設定して外部リンクチェック機能を利用すると、WebRelease は定期的に、例えば一日に１回、すべての外部リンク
先について、実際にそのリンク先へのアクセスを試み、正常にアクセスできるかどうかをチェックします。リンク切れが見つかると、
指定されたメールアドレスに通知メールが発送します。チェック間隔や、リンク切れと判断する基準は、あらかじめ設定パネルで
指定しておくことができます。実サイトの運用にはこのモードが最適でしょう。
「今すぐチェック」ボタンで手動でチェックする
このモードでは、外部リンクのチェックは自動では実行されません。そのかわりに、外部リンクチェック画面に表示される「いま
すぐチェック」ボタンで、必要に応じて手動でチェックを行います。定期的なチェックまでは必要ないと思われる場合はこのモー
ドでの運用がよいでしょう。
外部リンクのチェックは行わない
この設定にすると、外部リンクのチェックは行われなくなります。
「今すぐチェック」ボタンも表示されません。
外部リンクチェック機能のデフォルトのモードは、
２番目の『
「今すぐチェック」ボタンで手動でチェックする』の設定になっています。
定期的に外部リンクのチェックを行う
外部リンクチェックの動作モードを「定期的に外部リンクのチェックを行う」に設定する場合の手順を見てみましょう。
まず、外部リンクチェック画面を表示します。外部リンクチェック画面は「サイト設定」の「外部リンク」タブを選択すると表示する
ことができます。
Rev.07
17
WebRelease 2 ver.2.70 新機能のご紹介 - 外部リンクチェック機能：設定編
2015 年 12 月
表示された外部リンクチェック画面の右上にある「設定」ボタンをクリックします。
「設定」ボタンをクリックすると、外部リンクチェック設定パネルが表示されます。この設定パネルを使って外部リンクに関する諸設
定を行います。
「定期的に外部リンクのチェックを行う」のモードで外部リンクチェック機能を利用する場合、パネル上部の「チェッ
ク方式」欄で「定期的に外部リンクのチェックを行う」を選択します。
そして、各種の設定を入力してゆきます。
18
WebRelease 2 ver.2.70 新機能のご紹介 - 外部リンクチェック機能：設定編
2015 年 12 月
チェック実行間隔
外部リンクにアクセスできるかどうかのチェックを実行する間隔を指定します。ポップアップから希望するチェック間隔を設定し
てください。
チェック間隔は、デフォルトで 24 時間になっています。この指定は、24 時間より短くしない方がよいかもしれません。先方のサ
イトへの負担も念頭において決定するとよいでしょう。
なお、いったんリンク切れが発見されると、その URL に対するその後のチェック間隔は強制的に 1 時間になります。これは、リン
ク切れの継続時間を計測するためです。リンク切れが解消されると、また、ここで設定されているチェック間隔に戻ってチェック
が続けられます。
リンク切れ通知メールアドレス
リンク切れが検出された場合に発送される通知メールの送付先メールアドレスを指定します。複数のアドレスを指定したい場合に
は、
アドレスをカンマ (,) で区切って並べてください。なお、
この欄は空欄でもかまいません。その場合、
定期的な外部リンクのチェッ
クは行われますが、メールでの通知は行われなくなります。
19
WebRelease 2 ver.2.70 新機能のご紹介 - 外部リンクチェック機能：設定編
2015 年 12 月
通知メール発送タイミング
いずれかの外部リンクでリンク切れが発見された場合に、その事象を「リンク切れ通知メール」として担当者にメール通知するま
での、経過観察をする時間を指定します。ポップアップから希望する時間を設定してください。
デフォルトは「リンク切れが 3 時間以上継続した時」です。このタイミングを短く設定すると、偶発的な、ほんの一時的なリンク
切れでメールが発送されてしまうかもしれません。先方サイトがメンテナンスなどを行う可能性もありますので、少し長めの「明
らかに切れている」と感じられる程度の時間設定が実用的でよいのではないでしょうか。
通知メール言語
リンク切れ通知メールの言語を設定します。英語または日本語のいずれかを選べます。
外部リンクチェック除外 URL
サイトのコンテンツに含まれている外部リンクのうち、外部リンクチェックの対象としない URL のパターンを指定します。例えば、
maps.googleapis.com ドメインの URL はチェックしない、などの指定が可能です。
設定パネルの各項目への入力が終わったら、パネル右上にある保存ボタンをクリックします。
20
WebRelease 2 ver.2.70 新機能のご紹介 - 外部リンクチェック機能：設定編
2015 年 12 月
設定が完了すると外部リンクチェック機能の稼働準備が整います。実際に外部リンクチェック機能が稼働し始めるのは、次回の FTP/
SFTP の実行後になります。WebRelease は FTP/SFTP 実行のタイミングで、公開サーバにアップロードされるコンテンツ中の外部リ
ンクの抽出を行ないます。外部リンクチェック機能は、その抽出の結果を利用して稼働を開始することになります。
いったん FTP/SFTP が実行されて公開コンテンツ中の外部リンクの抽出が行なわれると、外部リンクチェック画面には下のスナップ
ショットのように、外部リンクの一覧が表示されます。この画面の説明は、
「外部リンクチェック機能：活用編」を参照してください。
まとめ
公開コンテンツ中に含まれる外部リンクの一覧を画面で確認することができます。また、それぞれのリンク状況を確認すること
ができます。
外部リンクチェック機能には３つの動作モードがあります。実サイトの運用では「定期的に外部リンクのチェックを行う」のモー
ドで利用するのがよいでしょう。
自動で定期的にリンクチェックを行なうことができます。
リンクチェックを行なう間隔は最短 1 時間ごと、最長 48 時間ごとを指定することができます。
リンク切れを検出した時に、通知メールを受け取ることができます。
リンク切れを検出してから、一定期間の「経過観察」期間をおいた上で、リンク切れ通知メールを発送することができます。そ
れにより、ごく短期的なリンク切れによる通知メールの誤送出を排除することができます。
リンクチェックの対象としない URL のパターンを指定しておくことができます。
WebRelease は FTP/SFTP 時に公開コンテンツ中に含まれている外部リンクを抽出し、それをベースに外部リンクチェックを行
ないます。
21
WebRelease 2 ver.2.70 新機能のご紹介 - 外部リンクチェック機能：活用編
2015 年 12 月
外部リンクチェック機能：活用編
前回の「外部リンクチェック機能：設定編」に続いて「活用編」をお届けします。前回の設定編でご説明した設定を行うと、定期的な
外部リンクのチェックと、リンク切れ発見時のメール通知が受け取れるようになります。
今回は、外部リンクチェック機能が稼働している状況での活用方法について説明してゆきます。
外部リンクの一覧を見る
外部リンクチェック機能が稼働している状態では「サイト設定」画面の「外部リンク」タブを開くことで、
その時点で公開サーバにアッ
プロードされ公開されているコンテンツ中のすべての外部リンクの一覧をみることができます。
この一覧表示される外部リンクは、その時点で公開サーバにアップロードされ、公開されているコンテンツの中に含まれるリン
クです。編集中、公開待、公開終了などになっているコンテンツ中の外部リンクは表示対象ではありません。
外部リンクは、ページからだけでなくリソース中の css や html からも抽出されています。
この一覧でリンクの状態をチェックすることで、公開中のコンテンツ中のリンクの状態を正確に把握することができます。
外部リンクとしてリストアップされている URL は a タグによるリンクだけではありません。html 中および css 中で URL が記
述できる場所ほぼすべてに書かれている URL がリストアップされています。例えば、css 中にある URL() 構文、iframe や img
タグの src 属性、del タグの cite 属性などに書かれている URL も外部リンクとして抽出され、表示されています。
このスナップショットには表現されていませんが、外部リンクの数が多い場合、この画面は、いわゆる「ページめくり」形式で
表示されます。外部リンクが数千件単位で存在しているサイトでも一覧を表示することが可能です。
Rev.07
22
WebRelease 2 ver.2.70 新機能のご紹介 - 外部リンクチェック機能：活用編
2015 年 12 月
リンクの状態を確認する
外部リンクチェック画面では、リンクの一覧とともに、各リンクの状態を調べることができます。まず、下のスナップショットのオレ
ンジ枠部分に注目してください。ここを見ることで、外部リンクの状態を全体的に把握することができます。
ここには、外部リンクの総数、リンク切れになっているリンクの数、リンク切れになっていない有効なリンクの数、チェックがまだ行
われていないリンクの数、チェック対象外となっているリンクの数、が、それぞれ表示されています。
「未チェック」という状態は、そのリンクに対して、まだリンク切れのチェックが実行されていない状況を意味しています。外部リン
クの数が多数ある場合など、リンクチェックは順次実行されるため、未チェック状態のリンクが表示されることがあります。しばらく
時間を置いてから、この画面を再表示すると、そのリンクについてリンクチェックが終わっているでしょう。
今度は、下のスナップショット中のオレンジ枠部分に注目してください。ここには、個々の外部リンクの状態が表示されています。
リンク切れの URL はこのリストの上部に表示されます。リストの上部に赤マークの URL がなければ、公開中のコンテンツの中
にはリンク切れはないことがわかります。
チェック対象外の URL はこの一覧の下部に表示されます。マーカーの色は黄色です。
23
WebRelease 2 ver.2.70 新機能のご紹介 - 外部リンクチェック機能：活用編
2015 年 12 月
下のスナップショットのオレンジ枠部分に注目してください。この部分のチェックボックスを操作することで、外部リンク URL のサ
フィックスを使って一覧に表示する URL を絞り込むことができます。リンクの数が多い場合などに有効です。下の例では .js というサ
フィックスを持つ外部リンクのみに絞り込んで表示しています。
リンク元を調べる
一覧にリストされている外部リンクのリンク元（その URL を含む html / css を生成したページやリソース）を調べることができます。
下のスナップショットのオレンジ枠内にある黄色いボタンをクリックすると、その URL のリンク元の一覧を見ることができます。リ
ンク元は必ずしも１ページとは限りません。複数のページやリソースの中に同じ URL へのリンクが含まれていることはよくあること
です。
リンク切れと判定されている http://wwww.frameworks.cojp のリンク元を表示してみましょう。これは、明らかにスペルミスのよ
うです。リンク元一覧ページを表示してみると、この URL へのリンクはふたつのページ「WebRelease 2.70 リリースのお知らせ」と
「WebRelease 2.60M リリースのお知らせ」に含まれていることがわかります。
このリンク元一覧ページの操作欄にある黄色いボタンをクリックすることで、直接、ページ編集画面に入ることができます。リンク切
れをすぐに修正できます。
24
WebRelease 2 ver.2.70 新機能のご紹介 - 外部リンクチェック機能：活用編
2015 年 12 月
まとめ
いかがでしたでしょうか。外部リンクチェック機能について簡単ですがご紹介させていただきました。外部リンクのチェックからリン
ク切れへの対応まで、この機能を便利にお使いいただけるかと思います。
公開されているコンテンツ中にある外部リンクの一覧をいつでも確認することができます。
各リンクの状態を正確に把握することができます。
抽出され、チェックされるリンクの範囲は広範囲に及んでいます。css 中の URL() もチェック対象になっています。
すべての外部リンクについて、そのリンク元（参照元）を調べることができます。
リンクの参照元のページやリソースの編集画面に直接入ることができます。
25
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン一括削除機能
2015 年 12 月
ページのリビジョン一括削除機能
WerRelease を長期に渡って使っていると、特定のページのリビジョン数が大変多くなってしまう場合があります。ある程度は過去の
リビジョンも保存しておきたいのですが、増えすぎると無駄に思えてきます。
2.70 からは、ページのリビジョンを一括して削除できるようになりました。これは比較的小さな機能追加ですが、状況によっては大変
便利にお使いいただけると思います。
それでは、ページのリビジョンの一括削除機能についてご紹介します。
ページリビジョンの一括削除の手順
まず、ページ編集画面の、リビジョン一覧画面を表示します。下のスナップショットは「ホーム」というページに、既に 49 のリビジョ
ンができている状況を示しています。少しリビジョンが多すぎるかもしれません。不要な過去のリビジョンを削除したいと思います。
リビジョンの一括削除を行うには、画面の右上に「一括削除」ボタンをクリックします。
「一括削除」ボタンをクリックすると、
削除するリビジョンを選択するパネルが表示されますので、
削除したいリビジョンをチェックボッ
クスで選択してください。
チェクボックス周辺をマウスでドラッグすることで連続してチェックボックスの ON/OFF を操作することができます。チェック
ボックスをひとつずつクリックする必要はありません。
Rev.05
26
WebRelease 2 ver.2.70 新機能のご紹介 - ページのリビジョン一括削除機能
2015 年 12 月
削除対象を決めたら「次へ」ボタンをクリックしてください。
「次へ」ボタンをクリックすると、削除対象を確認するパネルが表示されます。削除対象を確認してから「削除」ボタンをクリックし
てください。選択されたリビジョンがすべて削除されます。
削除対象を変更したい場合は「戻る」ボタンを使って前の画面に戻ってください。
まとめ
ページのリビジョンを一括して削除することができます。
不要になったリビジョンを削除してしまうことで、ディスクやメモリーの消費量を削減することができます。
削除したリビジョンは復活できません。気をつけて削除してください。
27
WebRelease 2 ver.2.70 新機能のご紹介 - ページフォルダの一括作成
2015 年 12 月
ページフォルダの一括作成
大規模なサイトの構築の時に、大量のフォルダ（ディレクトリ）を作成しなければならない場合があります。従来はフォルダをひとつ
ずつ作る必要があったので作業が大変でしたが、2.70 以降では CSV 形式のデータでフォルダを一括して作成できるようになりました。
また、フォルダの作成時にサーバ上でのディレクトリ名も同時に指定できるようになりました。
ページフォルダの一括作成方法
フォルダの作成方法は従来と特に変わりません。フォルダを作成したいフォルダで「新規フォルダ」ボタンをクリックしてフォルダ作
成画面を表示してください。
「新規フォルダ」ボタンをクリックすると「フォルダ作成」画面が表示されます。画面中の「作成するフォルダの名称」の欄に、作成
したいフォルダの名前を入力します。入力欄には、下のスナップショットのように、フォルダの名称と、そのフォルダの公開サーバ上
でのディレクトリ名を CSV 形式で指定します。
フォルダ名とディレクトリ名はカンマ (,) で区切ってください。
ディレクトリ名は入力しなくてもかまいません。
事前に csv ファイルを作成しておいて、Copy & Paste で貼付けることもできます。
入力したら、画面右上の「実行」ボタンをクリックしてください。フォルダが作成されます。
Rev.05
28
WebRelease 2 ver.2.70 新機能のご紹介 - ページフォルダの一括作成
2015 年 12 月
フォルダ「千葉」の編集ボタンをクリックしてフォルダ設定画面に入ってみましょう。フォルダ作成時に指定したディレクトリ chiba
も設定されています。
まとめ
小さな機能追加ですが地味に便利な機能ではないでしょうか。
複数のページフォルダを一括して作成できます。
フォルダ作成時に、公開サーバ上のディレクトリも同時に指定することができます。
29
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一括登録：登録編
2015 年 12 月
ユーザ一括登録：登録編
Version 2.70 では、CSV ファイルを使ってユーザの一括登録、一括属性設定、一括削除、ができるようになっています。定期的な人事
異動などに伴う登録情報の更新時などに便利にご利用いただけるようになりました。
ここでは、最初にユーザの一括登録についてご紹介します。
登録に使用する CSV ファイルの準備
ユーザの一括登録を行なう場合、登録するユーザに関する情報を CSV 形式のファイルで用意しておく必要があります。サンプルの
CSV ファイルを添付おきますので参考にしてください。フォーマットの詳細につきましては（多少こみいっていますので）ユーザーズ
マニュアルを参照してください。
ÂÂユーザ一括登録に使用する CSV ファイルのサンプル (CSV・6.90kB)
ÂÂWebRelease 2.70 ユーザーズマニュアル（ユーザ登録情報の一括処理）
ユーザの一括登録
ユーザの一括登録を行なうには、ユーザ一覧画面にある「アップロード」ボタンをクリックします。このボタンが「一括登録」などの
名称になっていないのは、ここからユーザ登録だけでなく、一括削除や、属性の一括設定も行なえるからです。
アップロードボタンをクリックすると CSV ファイルのアップロードを行なうためのパネルが表示されます。
「登録する CSV ファイル」欄に、準備しておいた CSV ファイル（この例ではサンプルの UserReg.csv）を指定します。
「エンコーディング」欄には、CSV ファイルのエンコーディングを指定します。最近では UTF-8 以外を使用する機会は少なくな
りました。
「オプション」欄を適切に指定します。先ほど例として添付した UserReg.csv は１行目にコメント行があるので「1 行目はコメ
ントなので無視する」にチェックを入れておきます。
Rev.06
30
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一括登録：登録編
2015 年 12 月
CSV ファイルとオプションの指定が終わったら画面右上の「次へ」ボタンをクリックしてください。下のスナップショットのような登
録内容を確認するパネルが表示されます。
登録内容が意図したとおりなら「実行」ボタンをクリックしてください。CSV ファイルの内容に従ってユーザ登録が実行されます。
まとめ
ユーザの CSV 一括登録機能を使えば、多くのユーザを効率よく登録することができます。また、ユーザの登録と同時に細かい属性の
設定も行なうことができます。
ユーザの一括登録が実行できるのは、システム管理ユーザだけです。
CSV ファイルさえ準備すれば多くのユーザを一括して登録することができます。
登録時にはユーザごとにアカウントの有効期限を指定して登録することができます。
一括登録するユーザの中の特定のユーザをシステム管理ユーザとして登録することもできます。
登録時にユーザのパスワードを指定して登録することができます。
ユーザ一括登録に使用したファイルを保全しておくことで、登録の履歴を管理することができるでしょう。
31
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一括登録：更新・削除編
2015 年 12 月
ユーザ一括登録：更新・削除編
前回は CSV ファイルを使って一括してユーザ登録する方法をご説明しました。今回は、登録されているユーザの情報を CSV ファイル
を使って一括して変更する方法をご紹介します。
登録されているユーザの属性を CSV ファイルを使って一括して更新することができます。
登録されているユーザを CSV ファイルを使って一括して削除することができます。
ユーザの所属の一括更新
最初に、登録されているユーザの所属を一括して更新する方法をご紹介します。CSV ファイルを使っての更新は所属だけでなく、パス
ワード、氏名、よみがな、メールアドレス、メール署名、電話番号、セッションタイムアウト ( 分 )、有効期限、システム管理者指定、
アカウント休止指定、などどれでも行うことができますが、ここでは、比較的良くありそうな所属の変更の場合を例にご説明します。
ÂÂユーザ登録情報の一括処理 WebRelease 2.70 ユーザーズマニュアル
以下の説明では具体的な CSV ファイルの例を挙げて説明していますが CSV ファイルのフォーマットの詳細につきましてはユー
ザーズマニュアルをご参照ください。
CSV ファイルを用意する
CSV ファイルを使ってユーザの所属情報の一括更新を行なう場合には、まず、更新に使用する CSV ファイルを作成します。例えば下
記のような形式の CSV ファイルを用意します。
下の例では aoyama endo endo2 endo3 の 4 ユーザの所属が更新されます。
ユーザの所属を一括更新する場合の CSV ファイルの例
" コマンド ", " ユーザ ID", " パスワード ", " 氏名 ", " よみがな ", " 所属 "
"u",
"aoyama",
,
,
,
" マーケティング部 "
"u",
"endo",
,
,
,
" 営業部 "
"u",
"endo2",
,
,
,
" 製品企画部 "
"u",
"endo3",
,
,
,
" 製品企画部 "
CSV ファイルの左端のコマンドを指定するカラムには "u" と指定します。
CSV ファイルの 2 カラムめのユーザ ID 欄には、更新を行いたいユーザのユーザ ID を指定します。
CSV ファイルの 3 カラムめのパスワード欄は、パスワードの更新を行わないので空欄にしておきます。
CSV ファイルの 4 カラムめの氏名欄は、氏名の更新を行わないので空欄にしておきます。
CSV ファイルの 5 カラムめのよみがな欄は、よみがなの更新を行わないので空欄にしておきます。
CSV ファイルの 6 カラムめには、更新する所属を指定します。
CSV ファイルの 7 カラムめ以降は空欄でかまいません。
この例では 1 行目にコメント行を入れています。コメント行を入れた場合はファイルをアップロードするときにオプションで
「コ
メント行あり」を指定してアップロードします。
ÂÂユーザ一の所属の一括更新に使用する CSV ファイルのサンプル UpdateUser1.csv(CSV・215B)
Rev.04
32
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一括登録：更新・削除編
2015 年 12 月
CSV ファイルをアップロードしてユーザの所属の一括更新を行なう
CSV ファイルが準備できたらそれを使って実際にユーザの所属の一括更新を実行してみましょう。まず、ユーザ一覧画面で「アップロー
ド」ボタンをクリックしてください。
「登録する CSV ファイル」
アップロードボタンをクリックすると CSV ファイルのアップロードを行なうためのパネルが表示されます。
欄に、ユーザ所属一括更新用に準備しておいた CSV ファイル（この例ではサンプルの UpdateUser1.csv）を指定します。
今回準備した CSV ファイルは 1 行目にコメント行が入っているので、オプション「１行目はコメントなので無視する」を ON にして
おきます。
CSV ファイルを指定したら画面右上の「次へ」ボタンをクリックしてください。
「次へ」ボタンをクリックすると下のスナップショットのような更新内容を確認するパネルが表示されます。今回は、4 ユーザの所属情
報の更新なので「属性が修正されるユーザ数」の欄が 4 になっています。
画面右上の「実行」ボタンをクリックするとユーザ属性の設定が実行されます。
33
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一括登録：更新・削除編
2015 年 12 月
実行ボタンをクリックするとユーザ属性の更新が実行され、再度、ユーザ一覧画面が表示されます。いま更新したユーザの所属情報が
CSV ファイルに指定したとおりに更新されているのがわかるでしょう。
ユーザの複数属性の一括更新
今度は CSV ファイルを使ってユーザの複数の属性を一括して更新してみましょう。
CSV ファイルを用意する
今回は少し複雑な CSV ファイルです。といってもたいしたことはありません。
ユーザの属性設定を行う CSV ファイルの例
コマンド , ユーザ ID, パスワード , 氏名 , よみがな , 所属 , メールアドレス ,
メール署名 ,
セッションタイムアウト ( 分 ),
有効期限 ,
システム管理者指定 ,
アカウント休止指定
u,
,
,
[email protected] , ,
,
,
,
,
,
,
,
,
,
,
,
,
asano,
,
endo,
,
endo2,
,
,
u,
2016-03-31,,
,
u,
,
電話番号 ,
,
,
2016-03-31,,
,
,
1,
CSV ファイルの左端のコマンドを指定するカラムには u と指定します。u コマンドは空欄になっている属性を更新しません。値
が指定されている欄のみ更新します。
ユーザ asano さんのメールアドレスを [email protected] に設定します。
ユーザ asano さんと endo さんのアカウントの有効期限を 2016-03-31 に設定します。有効期限を設定するときには YYYY-
MM-DD 形式で期限を指定します。指定した日の 24 時でアカウントの有効期限が切れます。
ユーザ endo2 さんのアカウントを「休止」に設定します。アカウントの休止の設定を行う場合には、アカウント休止指定欄に
1 を指定します。
ÂÂユーザ一の複数属性の一括更新の CSV ファイルのサンプル UpdateUser2.csv(CSV・669B)
34
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一括登録：更新・削除編
2015 年 12 月
CSV ファイルをアップロードしてユーザ属性の一括更新を行なう
CSV ファイルが準備できたらそれを使って実際にユーザ属性の一括更新を実行してみましょう。まず、ユーザ一覧画面で「アップロー
ド」ボタンをクリックしてください。
アップロードボタンをクリックすると CSV ファイルのアップロードを行なうためのパネルが表示されます。
「登録する CSV ファイル」
欄に、ユーザ所属一括更新用に準備しておいた CSV ファイル（この例ではサンプルの UpdateUser2.csv）を指定します。
今回準備した CSV ファイルは 1 行目にコメント行が入っているので、オプション「１行目はコメントなので無視する」を ON にして
おきます。
CSV ファイルを指定したら画面右上の「次へ」ボタンをクリックしてください。
「次へ」ボタンをクリックすると下のスナップショットのような更新内容を確認するパネルが表示されます。
asano さんと endo さんの属性変更（メールアドレス、有効期限など）を行っているので「属性が修正されるユーザの数」の欄
が 2 となっています。
endo2 さんの休止設定をおこなっているので「新たに休止中に指定されるユーザの数」の欄に 1 となっています。
画面右上の「実行」ボタンをクリックするとユーザの属性変更が実行されます。
35
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一括登録：更新・削除編
2015 年 12 月
実行ボタンをクリックするとユーザの一括属性設定が実行され、再度、ユーザ一覧画面が表示されます。
asano さんと endo さんのアカウントの有効期限が 2016/03/31 に設定されています。
asano さんのメールアドレスが [email protected] に設定されています。
endo2 さんが休止ユーザになっています。
ユーザの一括削除
CSV ファイルを使ってユーザを一括削除することができます。以下の手順で実行してください。
CSV ファイルを用意する
CSV ファイルを使ってユーザの一括削除を行なう場合には、まず、削除対象ユーザを列挙した CSV ファイルを作成します。下記のよ
うな形式の CSV ファイルを用意します。
下の例では morishige oota toyota の 3 ユーザが削除されます。
ユーザの一括削除を行なう場合の CSV ファイルの例
"d", "morishige"
"d", "oota"
"d", "toyota"
CSV ファイルの左端のコマンドを指定するカラムには "d" と指定します。
CSV ファイルの左から２カラムめには、削除したいユーザのユーザ ID を指定します。
システム管理ユーザはこの方法では削除できません。削除するユーザがシステム管理ユーザの場合には、システム管理属性を外
してから削除する必要があります。
ÂÂユーザ一括削除に使用する CSV ファイルのサンプル DeleteUser.csv(CSV・43B)
36
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一括登録：更新・削除編
2015 年 12 月
CSV ファイルをアップロードしてユーザの一括削除を行なう
CSV ファイルが準備できたらそれを使って実際にユーザの一括削除を実行します。実行方法は先述の方法と殆ど同じです。まず、ユー
ザ一覧画面で「アップロード」ボタンをクリックしてください。
「登録する CSV ファイル」
アップロードボタンをクリックすると CSV ファイルのアップロードを行なうためのパネルが表示されます。
欄に、ユーザ削除用に準備しておいた CSV ファイル（この例ではサンプルの DeleteUser.csv）を指定します。
CSV ファイルを指定したら画面右上の「次へ」ボタンをクリックしてください。
「次へ」ボタンをクリックすると下のスナップショットのような登録内容を確認するパネルが表示されます。今回は、3 ユーザの削除な
ので「削除されるユーザの数」の欄が 3 になっています。
画面右上の「実行」ボタンをクリックするとユーザの削除が実行されます。
37
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一括登録：更新・削除編
2015 年 12 月
まとめ
いかがでしたでしょうか。ユーザ属性の一括更新、ユーザの一括削除の方法をご紹介しました。
ユーザの一括処理が実行できるのはシステム管理ユーザだけです。
今回はご紹介できませんでしたが、ひとつの CSV ファイルで登録、登録、削除の処理をいっぺんに行うこともできます。CSV ファ
イルのコマンド欄には１行ごとに異なるコマンドを指定することができます。
ユーザ登録情報の一括処理の方法については下記マニュアルも参照してください。
ÂÂユーザ登録情報の一括処理
38
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一の一括削除
2015 年 12 月
ユーザ一の一括削除
Version 2.70 では、ユーザを一括して削除することができるようになりました。
人事移動の多い季節など、登録ユーザの情報を一括して書き換える場合などの便利です。ユーザの一括登録機能と組み合わせて効果的
にご利用ください。
ユーザ一括削除の手順
ユーザの一括削除を行なうには、ユーザ一覧画面にある「一括削除」ボタンをクリックします。
「一括削除」ボタンをクリックすると、削除対象のユーザを指定するパネルが表示されますので削除したいユーザを選択してください。
選択欄のチェックボックス周辺をドラッグすると、連続してチェックボックスの ON/OFF を操作することができます。チェック
ボックスをひとつずつクリックする必要はありません。
削除するユーザを選択したら、画面右上の「次へ」ボタンをクリックしてください。
Rev.06
39
WebRelease 2 ver.2.70 新機能のご紹介 - ユーザ一の一括削除
2015 年 12 月
「次へ」ボタンをクリックすると、削除対象ユーザを確認するパネルが表示されます。
削除対象ユーザに間違いがなければ、画面右上の「実行」ボタンをクリックしてください。ユーザの削除が実行されます。
まとめ
Version 2.70 からは、ユーザの一括削除ができるようになりました。
システム管理ユーザはそのままでは一括削除できません。システム管理ユーザ属性を外してから削除してください。
CSV ファイルを使ってのユーザの一括削除も行なえます。詳しくは 2.70 ユーザーズマニュアルを参照してください。
ÂÂWebRelease 2.70 ユーザーズマニュアル（ユーザ登録情報の一括処理）
40
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：基礎編
2015 年 12 月
サイトリソースの管理：基礎編
WebRelease 2.70 では、サイトリソースの扱いが大幅に強化されました。
画像や css などの複数のファイルを一括してサイトリソースとして登録したい。
jquery mobile などに代表される、既に ZIP ファイルとして構成されているライブラリ／フレームワークをそのままアップロー
ドしてサーバ上で解凍して使いたい。
サイトリソースとして登録されている javascript や css をサーバ上で直接編集したい。
css や js は配信前に圧縮難読化しておきたい。
デザイナ権限を持たないコンテンツ作成担当者にもリソース登録できる仕組みが欲しい。
2.70 で導入されたサイトリソースの管理機能はこのようなニーズを満たす強力なものに仕上がっています。
サイトリソースを登録してみる
まずは、
サイトリソース管理画面でリソースを登録してみましょう。リソース登録は「サイト設定」画面の「リソース」タブで行ないます。
画面の右上にある「アップロード」ボタンをクリックしてください。
「アップロード」ボタンをクリックするとリソースのアップロードパネルが表示されます。
Rev.06
41
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：基礎編
2015 年 12 月
パネル中の「ファイルを選択」ボタンをクリックして、ブラウザのファイル選択パネルを表示します。
（このスナップショットは
Google Chrome で作成しました）
パネル上で、リソースに登録したいファイルを指定してください。最近の新しいブラウザでは、複数のファイルを一度にアップロード
することができます。ここでは jpeg ファイルを 4 つアップロードしてみます。画像に限らず、どんなファイルでもリソースとして登
録できます。PDF なども登録できます。ですが、多くの場合は画像、css、javascript でしょう。
アップロードするファイルを指定したら「開く」ボタンをクリックしてください。
アップロードパネル上で「アップロードするファイル」欄には「4 ファイル」と表示されているのがわかります。指定したファイルをアッ
プロードするために「次へ」ボタンをクリックしてください。
既にリソースとして登録されているファイルを上書きアップロードする場合には「現在登録されているリソースの上書きを許可
する」のチェックボックスを ON にしてください。
リソースには「リソース名」付けることができます。テンプレート中でリソースを参照するときには、リソースをリソース名ま
たはパス名で参照可能ですが、リソース名を付けてその名前で参照するようにしておく方がリソースの差し替えなどの時に若干
有利です。リソース名には任意の名前を付けられますが、リソースごとにユニークな名前を考えるのも面倒な場合が多いもので
す。
「リソース名をファイル名から自動生成する」のチェックボックスを ON にしておけば、ファイル名から適当にリソース名
を自動生成することができます。
42
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：基礎編
2015 年 12 月
「次へ」ボタンをクリックすると、リソース登録内容の確認パネルが表示されます。
登録内容を確認して「実行」ボタンをクリックしてください。リソース登録が実行されます。
必要があれば、この段階で「ファイル名」や「リソース名」の変更が可能です。
「実行」ボタンをクリックすると、リソース登録が実行され、リソース一覧画面が表示されます。指定したファイルがアップロードされ、
リソースとして登録されているのがわかります。
画像系のリソースの場合、リソース一覧画面の画像の小さいサムネールにマウスを乗せることで画像を実寸で表示することができます。
43
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：基礎編
2015 年 12 月
フォルダの作成
リソースは、
フォルダに分類して管理することができます。ここでのフォルダとは、
リソースが公開サーバにアップロードされた場合の、
公開サーバ上でのディレクトリのことです。フォルダを作成する場合には「新規フォルダ」ボタンをクリックします。
「新規フォルダ」ボタンをクリックすると下のスナップショットのようなフォルダ作成パネルが表示されます。
「フォルダ名」の欄に作成したいフォルダの名前を指定してから、画面右上の「実行」ボタンをクリックします。ここでは images と
いう名前のフォルダ（ディレクトリ）を作成してみましょう。
images という名称のフォルダが作成されました。また、現在のフォルダも images に移動しているのがわかります。
44
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：基礎編
2015 年 12 月
リソースの一括移動
さて、次は、登録されているリソースの場所を移動してみましょう。リソースの移動には「一括移動」の機能を使うのが便利です。
今は、先ほど作成した「images」というフォルダにいる状態です。このフォルダから、以前登録した 4 点の画像が置かれているフォ
ルダ「/」へ移動してから作業を始めましょう。親フォルダへの移動には、
画面左上にある現在のフォルダの位置を示しているインジケー
タを利用します。
「/」の部分をクリックすることでフォルダ「/」へ移動することができます。
「/」部分をクリックしてトップのフォルダを移動しました。フォルダ「/」に登録されているリソースが一覧表示されています。これか
ら、これらの画像リソースを先ほど作成した「images」とうフォルダに移動してみましょう。
複数のリソースを一括して移動するので「一括移動」機能を使います。画面右上にある「一括移動」ボタンをクリッックします。
「一括移動」ボタンをクリックすると一括移動パネルが表示されます。パネルで移動の詳細を指定します。
移動先のフォルダを指定します。
移動したいリソースをチェックボックスで指定します。チェックボックス周辺をドラッグすると、連続的にチェックボックスを
操作できます。チェックボックスをひとつずつクリックする必要はありません。
45
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：基礎編
2015 年 12 月
指定を終えたら「次へ」ボタンをクリックします。移動内容を確認するパネルが表示されます。移動対象のリソースと、移動先のフォ
ルダの指定が間違っていないか確認しましょう。
指定内容に間違いがなければ「実行」ボタンをクリックします。リソースの移動が完了すると、リソースの一括移動を開始したリソー
ス一覧画面に戻ります。指定したリソースが移動しているのがわかります。
移動したリソースは、フォルダ images の下にあるはずです。フォルダを移動して確認してみましょう。フォルダ images に移動する
にはフォルダ名 images の部分をクリッックします。
フォルダ images に移動したリソースがあることが確認できました。
46
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：基礎編
2015 年 12 月
リソースの削除
次は、
リソース一括削除機をご紹介しましょう。リソースの一括削除を行なう場合はリソース一覧画面にある
「一括削除」
ボタンをクリッ
クします。
一括削除ボタンをクリックすると削除対象のリソースを選択するパネルが表示されます。削除したいリソースを選択してから「次へ」
ボタンをクリックします。
「次へ」ボタンをクリックすると確認パネルが表示されます。削除対象に間違いがないかどうか確認します。画像の小さなサムネイル
にマウスを乗せることで、画像を原寸で表示することができます。確認に活用してください。
47
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：基礎編
2015 年 12 月
削除対象に間違いがなければ「実行」ボタンをクリックします。
削除が完了するとリソース一覧画面が表示されます。指定したふたつの画像リソースが削除されているのがわかります。
まとめ
WebRelease 2.70 では、サイトリソースの管理画面が強化されています。前のバージョンよりも格段に使いやすくなっています。ぜ
ひご活用ください。
リソース一覧画面が以前よりコンパクトになり、多数のリソースを扱う必要のあるサイトでの利便性が向上しました。
自由にフォルダ階層を組み立ててリソースを配置することができます。
複数のファイルをまとめてサイトリソースとして登録することができます。
複数のリソースを選択して一括移動したり一括削除することができます。
リソースが画像の場合、小さく表示されているサムネールの上にマウスを乗せると画像を原寸で表示することができます。
ZIP の扱いや YUICompressor を使った圧縮難読化などについては続編でご説明いたします。
48
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：ZIP 編
2015 年 12 月
サイトリソースの管理：ZIP編
サイトリソースの管理画面では、複数のファイルをまとめた ZIP ファイルをアップロードして、それをサーバー上で解凍することがで
きます。jquery-ui など、ZIP 形式で提供されているライブラリを、まとめてサーバにアップロード・登録することができます。
また、サーバ上のディレクトリを指定してそのディレクトリ以下をひとつの ZIP ファイルに固めることができます。
ZIP ファイルのアップロードと解凍
サイトリソース画面から zip ファイルをアップロードしてみましょう。まず、サイトリソースの一覧画面にある「アップロード」ボタ
ンをクリックします。
アップロードボタンをクリックするとリソースのアップロード画面が表示されます。パネル中の「ファイルを選択」ボタンをクリック
して、ブラウザのファイル選択パネルを表示します。
アップロードする ZIP ファイルを指定します。ここでは、おなじみの jquery-ui-1.11.4.zip をアップロードしてみましょう。アップロー
ドするファイルを指定したら「開く」ボタンをクリックします。
（このスナップショットは Google Chrome で作成しました）
Rev.07
49
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：ZIP 編
2015 年 12 月
「開く」ボタンをクリックするとリソースアップロードパネルが表示されます。指定した jquery-ui.1.11.4.zip が指定されているのがわ
かります。アップロード内容に間違いがなければ「次へ」ボタンをクリックしてください。
「次へ」ボタンをクリックすると、アップロード内容の確認パネルが表示されます。アップロード内容に間違いがなければ「実行」ボ
タンをクリックしてください。
「実行」ボタンをクリックすると指定したファイルがアップロードされ、リソースとして登録されます。
「実行」ボタンをクリックするとリソース一覧画面が表示されます。アップロードしたファイル jquery-ui-1.11.4.zip が登録されている
のがわかります。
50
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：ZIP 編
2015 年 12 月
ZIP ファイルの解凍
次は、アップロードした ZIP ファイルをサーバ上で解凍してみましょう。解凍するには ZIP 形式のリソースの「編集ボタン」をクリッ
クしてリソースの編集画面に入ります。
編集ボタンをクリックするとリソース編集画面が表示されます。リソース編集画面にある UnZip ボタンをクリックすると ZIP ファイル
を解凍することができます。
ZIP ファイルのリソース編集画面では ZIP ファイル中に納められているファイルの一覧を見ることができます。この一覧を見る
ことで解凍前に ZIP ファイルの内容を知ることができます。
「UnZip」ボタンをクリックすると UnZip パネルが表示されます。
51
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：ZIP 編
2015 年 12 月
ZIP ファイルにパスワードが設定されている場合には、パスワード欄にそのパスワードを入力してください。
解凍した結果、既に登録されているいずれかのリソースを上書きすることになる場合は「既存のリソースの上書きを許可する」
のチェックボックスを ON にしてください。
パネル右上の「UnZip」ボタンをクリックすると解凍が実行されます。
解凍が実行されるとリソース一覧画面が表示されます。ディレクトリが作成され、その下に ZIP の内容が展開されているのがわかりま
す。
解凍を実行しても、元の zip ファイル（この場合 jquery-ui-1.11.4.zip）は削除されるわけではありません。解凍後、不要になる
のであれば別途削除してください。
解凍した結果を確認してみましょう。解凍してできたフォルダ jquery-ui-1.11.4 のフォルダアイコンをクリックすると、そのフォルダ
を開いてフォルダ以下のファイルの一覧を表示することができます。
52
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：ZIP 編
2015 年 12 月
フォルダアイコンをクリックするとフォルダ以下にあるファイルの一覧を見ることができます。CSS や javascript や画像など jquery-
ui-1.11.4 を構成するファイル群が展開されているのがわかります。
まとめ
いかがでしたでしょうか。サイトリソース管理画面では直接 ZIP ファイルをアップロードしてサーバ側で解凍することができます。サ
イトの構築時に便利にお使いいただけるのではないかと思います。
ZIP ファイルをリソースとしてアップロードし、それをサーバ上で解凍することができます。
パスワードで保護されている ZIP ファイルも解凍することができます。
今回はご紹介できませんでしたがフォルダ以下を ZIP ファイルに変換することもできます。
53
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：ライター権限
2015 年 12 月
サイトリソースの管理：ライター権限
基本的に、サイトリソースを登録や編集したりできるのはデザイナーまたはマネージャー権限を持つスタッフに限られています。しか
し、これらの権限を持たないスタッフもサイトリソースの登録や編集ができると便利な場合があります。
デザイナーまたはマネージャー権限を持つスタッフが、サイトリソースのフォルダを指定してそのフォルダへの書き込みを許可する設
定を行なうと、そのフォルダ以下にはデザイナー／マネージャー権限を持たないスタッフでもサイトリソースの登録や編集ができるよ
うになります。
安易に利用しすぎるとサイトリソースの管理レベルが下がってしまうリスクがありますが、使い方によっては大変便利な機能です。
サイトリソースフォルダへの書き込みを許可する
では、デザイナー・マネージャーでないユーザが書き込むことができるサイトリソースフォルダを作ってみましょう。まず、新しくサ
イトリソースフォルダを作成するところから始めてみます。
サイトリソースフォルダを作成するために、サイトリソース一覧画面の右上にある「新規フォルダ」ボタンをクリックします。
「新規フォルダ」ボタンをクリックすると、サイトリソースフォルダ作成パネルが表示されます。フォルダ名の欄に作成するフォルダ
の名前を指定してます。ここでは user としてみました。このフォルダ名は、公開サーバ上でのディレクトリ名となりますので、その
ことを念頭に名前付けしてください。フォルダ名を指定したら、画面右上の「実行」ボタンをクリックします。
「実行」ボタンをクリックするとフォルダが作成され、サイトリソース一覧画面が表示されます。フォルダ user が作成され、そのフォ
ルダに入った状態になっていることがわかります。
次に、フォルダ user の設定を変更するために、黄色の編集ボタンをクリックします。
Rev.03
54
WebRelease 2 ver.2.70 新機能のご紹介 - サイトリソースの管理：ライター権限
2015 年 12 月
編集ボタンをクリックすると、
フォルダ設定パネルが表示されます。パネルの下の方に
「ライター権限での書き込みを許可」
というチェッ
クボックスがあるので、それを ON にします。その後、画面右上の「完了」ボタンをクリックしてください。
完了ボタンをクリックすると設定が保存され、再度、サイトリソース一覧画面が表示されます。一覧の中でフォルダ user のアイコン
の色が緑色になっているのがわかります。ライター権限での書き込みが許可されているフォルダはこの緑色で表示されます。
このフォルダ user 以下にはライター権限やエディター権限でリソースを作成することができます。
まとめ
ライターやエディター権限のスタッフにもサイトリソースへの書込みを許可する設定についてご紹介しました。いわゆるファイルマ
ネージャのような使い方ができるのは便利かもしれません。
あるフォルダに対してライター権限での書き込みを許可すると、そのフォルダ以下のすべてのフォルダで書き込みが許可される
ようになります。
サイトリソースに登録されているリソースは、ページのリソースとは異なり、登録されている限り公開サーバ上にアップロード
され公開されます。リソースの公開・公開終了をページの公開・公開終了に連動させたい場合にはページリソースの利用などを
検討しましょう。
55
WebRelease 2 ver.2.70 新機能のご紹介 - Javascript と CSS の圧縮と難読化
2015 年 12 月
JavascriptとCSSの圧縮と難読化
WebRelease 2.70 には javascript と css を圧縮難読化するツール YUICompressor が組み込まれました。このツールを使う事で
javascript や CSS を圧縮難読化してから配信することができるようになりました。
圧縮難読化できるのは javascript と css です。具体的にはサフィックスが js または css のファイルです。
圧縮対象はサイトリソース、テンプレートリソース、ページリソース、ページのいずれかです。
圧縮難読化するかどうかは、リソースごと、また、ページごとに個別に指定することができます。
サイトリソースを YUICompressor で圧縮配信する
まず、サイトリソースとして登録されている javascript ファイルを YUICompressor を使って圧縮難読化してから配信する方法をご紹
介します。
サイトリソースに圧縮難読化の指定を行うには、リソース編集画面を使います。
「サイト設定」画面の「リソース」タブをクリックし
てサイトリソース一覧画面を表します。画面に表示されているリソースの一覧の中から、圧縮難読化して配信したいリソースを選んで
ください。ここでは jquery-ui.js を圧縮難読化してから配信するように指定してみましょう。
目標のリソースの操作欄にある黄色いボタンをクリックするとリソース編集画面に入ることができます。
リソース編集画面の中程に「コンテンツ生成時に YUICompressor で圧縮する」というチェックボックスがあります。このチェックボッ
クスを ON に指定することで圧縮難読化を指定できます。
このチェックボックスは、サフィックスが .js または .css のリソースについてのみ表示されます。
Rev.06
56
WebRelease 2 ver.2.70 新機能のご紹介 - Javascript と CSS の圧縮と難読化
2015 年 12 月
チェックボックスを ON にしたら、画面右上の「完了」ボタンをクリックしてください。設定完了です。
圧縮した結果を見る
圧縮難読化を指定してある javascript ファイルは、公開サーバにアップロードされる前に YUICompressor を使って圧縮難読化の処理
が施されます。先ほど jquery-ui.js を圧縮難読化の指定をしましたが、その配信結果は下記のようになります。
（先頭部分のみです）
ファイルサイズが小さくなり、また、スクリプトの内容が少しだけ解読しにくくなっているのがわかります。なお、難読化はスクリプ
トの内容の解読を不可能にするわけではありません。難読化することによってスクリプトやスタイルシートの内容が「少しだけ解読し
にくくなる」ということを念頭に利用してください。
57
WebRelease 2 ver.2.70 新機能のご紹介 - Javascript と CSS の圧縮と難読化
2015 年 12 月
ページに対して圧縮難読化の指定をする
先ほどは、サイトリソースに対して圧縮難読化の指定を行いました。次はページに対して指定してみましょう。
ページのファイル名のサフィックスが .css または .js となっているページの場合、そのページのページ編集画面に、下のスナップショッ
トのように「コンテンツ生成時に YUICompressor で圧縮処理する」というチェックボックスが表示されます。このチェックボックス
を ON にすることで、ページが配信される前に YUICompressor で圧縮難読化の処理が施されます。
まとめ
リソースやページを、配信前に圧縮難読化する方法をご紹介しました。
圧縮難読化の指定は、リソースやページに対して、簡単に指定することができます。
圧縮によりファイルサイズが小さくなります。ネットワークを通過するデータ量が小さくなりますので Web ページの表示時間
が短くなるでしょう。特にモバイル向けコンテンツで重要な特性ではないでしょうか。
圧縮難読化できるのは javascript と css です。
ここではご紹介致しませんでしたが、テンプレートリソース、ページリソースについても同様の方法で圧縮難読化の指定ができ
ます。
58
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート・プロファイラ
2015 年 12 月
テンプレート・プロファイラ
WebRelease 2.70 にはテンプレート・プロファイラが実装されました。テンプレート・プロファイラは、テンプレートの性能チュー
ニングを支援するツールです。
WebRelease を長期に渡り使用していると、次のような局面が訪れることがあります。
最近、ページ数が増えてきたせいか、FTP（コンテンツ生成）にかかる時間が長くなってきた。なんとか３分以内程度に抑えたい。
テンプレートをチューニングして FTP 時間を短縮することになったが、どの処理に時間がかかっているのか判らない。チューニ
ングが手探りになってしまう。
サーバの増強を行う前に、テンプレートで対応可能な部分がないかどうか、しっかりと調べたい。
このようなニーズに応えるべく、2.70 ではテンプレート・プロファイラが実装されました。
プロファイルを取得する
最初に、テンプレート・プロファイラを使って、プロファイルを取得してみましょう。プロファイルの取得は簡単です。
「テンプレー
ト一覧」画面の「プロファイル」タブをクリックし、プロファイル画面を表示します。
表示されるプロファイル画面の上部に「次回 FTP 時に計測実施」というチェックボックスがあります。このチェックボックスを ON に
した状態で 1 回 FTP（コンテンツ生成）を実行すると、FTP 中にプロファイラが動作してテンプレートのプロファイルが取得されます。
このチェックボックスは ON にするだけで OK です。保存ボタンをクリックする必要はありません。
Rev.06
59
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート・プロファイラ
2015 年 12 月
チェックボックスを ON にした状態で FTP を実行したあと、再度プロファイル画面を表示すると、下記のようにプロファイル結果が
表示されます。
60
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート・プロファイラ
2015 年 12 月
プロファイル結果を読み解く
では、次に、このプロファイル結果をどのように読み解けばよいのかをご紹介しましょう。
下のスナップショットの「１」の部分に注目してください。getDocumentDate() というメソッドの名前が表示されています。
ここに表示されているのが、FTP 実行中に、その内部で一番時間を消費したメソッドの名前です。
「2」の部分には、
そのメソッド（この例では getDocumentDate() というメソッド）が定義されているコンポーネントやテンプレー
トの名前が表示されます。この例では getDocumentDate() メソッドは MethodLibrary というコンポーネントに定義されている
ことを表しています。
「3」の部分には、消費時間の内訳が表示されています。この例では、このメソッド内で 1,690.6 ミリ秒が消費されたこと、この
メソッドがトータルで 104,965 回呼び出されたこと、そして、結果的に 1 回あたりの実行に要した時間は 16.1 μ秒であったこ
とが表示されています。
消費時間には、そのメソッドが呼び出した、他のメソッドの処理時間は含まれていません。そのメソッド内で消費した時間のみ
が表示されています。
全メソッドに渡って消費時間を合算すると FTP に要した実時間より長くなる場合があります。これは、内部で並列処理が行われ
ているためです。理論的には、消費時間の合算値は最大で実時間のコア数倍になります。
61
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート・プロファイラ
2015 年 12 月
次は、メソッドの呼び出し元に関する情報について見てみましょう。下のスナップショット中のグリーン枠の部分に注目してください。
この部分には、上記の getDocumentDate() というメソッドがどこから呼び出されたのかに関する詳細な情報が表示されています。
「呼
び出し元メソッド・展開」欄には、呼び出し元のメソッドの名前が表示されています。この例では、偶然ですが、呼び出し元のメソッ
ドの名前も getDocumentDate() メソッドでした。この表示から、呼び出し元についてもそのメソッドが定義されているテンプレート、
消費時間、呼び出し回数など、詳細な情報が読み取ることができます。
62
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート・プロファイラ
2015 年 12 月
下のスナップショットのオレンジ枠部分には 2 番目に時間を消費したメソッドに関する情報が表示されています。表示内容と解釈は先
述のとおりです。2 番目以降のメソッドについても、プロファイル結果は延々と続きます。
まとめ
簡単ですが、テンプレート・プロファイラについてご紹介させていただきました。この機能を利用することで効果的にテンプレートの
チューニングができるでしょう。
プロファイルの取得は簡単です。
プロファイルの取得を行っても FTP 時間へのオーバーヘッドは比較的小さく抑えられています。保証できる数値ではありません
が、オーバーヘッドは 30% 以下と考えていただいてよいでしょう。ただし、プロファイルの取得が必要ない場合にはプロファ
イラは OFF にしておくのがよいでしょう。
消費時間の長いメソッドから順にチューニングしてゆくのがチューニングの基本です。１回あたりの実行時間を減らすか、また
は、呼び出される回数を減らすかのどちらかが主な対策となると思います。
プロファイル結果は画面右上の「ダウンロード」ボタンでダウンロードすることができます。チューニング結果の比較のために
はダウンロードして保存しておくとよいでしょう。
この例には現れませんでしたが、システム組み込み関数も計測され表示されます。
63
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート検索
2015 年 12 月
テンプレート検索
Version 2.70 では、テンプレートを検索できるようになりました。ページの検索と同じように、検索語を指定して全テンプレート・コ
ンポーネントの中から検索語を含むものをリストアップすることができます。この検索機能は、下記のような状況で大変便利です。
あるメソッドの呼び出し元の一覧が欲しい。
メソッドにパラメタを追加したいが、影響する個所をすべて洗い出したい。
charset 属性を指定している箇所を洗い出したい。
javascript のリソースを保有しているテンプレートまたはコンポーネントを洗い出したい。
テンプレート検索機能は、このようなニーズに応える強力な機能です。
テンプレート検索画面
テンプレート検索は、テンプレート検索画面で行います。テンプレート一覧画面にある「検索」タブをクリックするとテンプレート検
索画面が表示されます。
検索の実行
「検索文字列」欄に検索したい語を入力してから画面右上の「検索」ボタンをクリックすると検索が実行され、結果が表示されます。
Rev.04
64
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート検索
2015 年 12 月
検索結果を利用する
検索結果一覧から、そのテンプレートまたはコンポーネントの編集画面に直接入ることができます。特に、該当部分の編集画面に直接
入ることができます。例えば、該当箇所があるメソッドの中にある場合、編集ボタンをクリックすることで、そのメソッドの編集画面
に直接入ることができます。
試しに、MethodLibrary というコンポーネントの編集画面に入ってみましょう。該当部分は、このコンポーネント内の
metaCommon() というメソッドの中にあるようです。編集画面に入るには、検索結果一覧の「操作」欄にある黄色いボタンをクリッ
クします。
編集ボタンをクリックすると、下のスナップショットのように、コンポーネント MethodLibrary のメソッド metaCommon() の編集
画面に直接入ることができます。
65
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート検索
2015 年 12 月
検索オプション
検索の方法を変更するオプションがふたつあります。下のスナップショットのオレンジ枠内にあるチェックボックスで指定します。
AND 検索
「検索文字列」欄には、複数の検索語を入力することができます。複数の検索語を入力する場合には検索語をスペースで区切って入
力します。
「AND 検索」
のチェックボックスを ON にして検索を実行すると、
検索文字列欄に指定した検索語をすべて含むテンプレー
トまたはコンポーネントが検索結果になります。OFF にして検索を実行すると、いずれかの検索語を含むテンプレートまたはコン
ポーネントが検索結果になります。
大文字小文字を区別しない
検索時に大文字と小文字を区別して検索するかどうかを指定することができます。このチェックボックスを ON にして検索を行
うと、大文字と小文字は区別されずに検索が実行されます。たとえば、検索語に html と指定して検索を行った場合に html Html
HTML いずれもマッチするようになります。
検索の対象を絞り込む
検索文字列に指定した語がテンプレートやコンポーネントのどの部分に含まれている場合に検索結果に含めるかを指定することができ
ます。たとえば、下記のような状況で活用してみましょう。
javascript のファイルをリソースに持っているテンプレートを探したい。
charset= という指定を持っているメソッドまたは展開を探したい。
あるメソッドが定義されているテンプレートまたはコンポーネントを探したい。
66
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート検索
2015 年 12 月
下のスナップショットのオレンジ色の枠内のチェクボックスで指定します。
テンプレート名
検索文字列に指定された語がテンプレート名またはコンポーネント名に含まれている場合に、そのテンプレートまたはコンポーネ
ントを検索結果に含めます。例えば、
検索文字列に「記事」という語を指定した場合、
テンプレート名またはコンポーネント名に「記
事」という語が含まれているテンプレートまたはコンポーネントが検索結果に含まれるようになります。
要素名
検索文字列に指定された語を要素名または要素別名に含む要素が定義されているテンプレート又はコンポーネントを検索結果に含
めます。
メソッド名
検索文字列に指定された語をメソッド名に含むメソッドが定義されているテンプレート又はコンポーネントを検索結果に含めます。
例えば、検索文字列に generateHTML と指定すると、generateHTML という名前の（generateHTML という綴りを含む）メソッ
ド名のメソッドを持つテンプレートまたはコンポーネントを探すことができます。
メソッド内
検索文字列に指定された語をメッソドの定義内に含むメソッドが定義されているテンプレート又はコンポーネントを検索結果に含
めます。例えば、検索文字列に charset= と指定すると、メソッド内に charset= という記述があるメソッドが定義されているテン
プレートまたはコンポーネントを探すことができます。
展開内
検索文字列に指定された語を展開内に含むテンプレートを検索結果に含めます。
リソース名
検索文字列に指定された語をリソース名に含むリソースが定義されているテンプレート又はコンポーネントを検索結果に含めます。
67
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレート検索
2015 年 12 月
リソースファイル名
検索文字列に指定された語をリソースのファイル名に含むリソースが定義されているテンプレート又はコンポーネントを検索結果
に含めます。例えば、検索文字列に .js を指定すると javascript をリソースに持っているテンプレートまたはコンポーネントを探す
ことができます。
まとめ
テンプレート検索機能についてご紹介させていただきました。このテンプレート検索機能を使えば、テンプレートのメンテナンスの効
率が向上するでしょう。
テンプレートの検索は「テンプレート一覧」画面の「検索」画面で行います。
テンプレートとコンポーネントを横断的に検索することができます。
指定された検索語をすべて含むテンプレートを検索することができます。また、指定された検索語のいずれかを含むテンプレー
トを検索することもできます。
大文字小文字を区別する検索、区別しない検索の両方が行えます。
検索対象を限定して検索することができます。
「メソッド内」
「展開内」
「リソース名」
「テンプレート名」
「要素名」
「メソッド名」
「リソースファイル名」
検索結果から、直接テンプレートの編集画面に入ることができます。
68
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレートのデバッグ機能の強化
2015 年 12 月
テンプレートのデバッグ機能の強化
Version 2.70 からは、コンテンツ生成エラー発生時のエラーメッセージ中に、そのエラーの発生個所までの到達経路が表示されるよう
になりました。
エラー発生に至るまでの経路がはっきりとわかるので、テンプレートのデバッグが効率的に行なえます。
デバッグの終わった、正しく作られているテンプレートを使ってページの作成を行なっている状況ではこの画面を見ることはないので
すが、テンプレートの開発時にはよく見る画面でしょう。地味な機能ですが大変に便利です。
コンテンツ生成エラー発生時の表示例
テンプレートに問題があり、コンテンツ生成ができなかった場合、プレビュー画面にコンテンツ生成エラーが表示されます。下記のス
ナップショットは、あるテンプレートで作成したページのプレビュー時にコンテンツ生成エラーが発生した場合のプレビュー画面の表
示例です。
この例について解説してみましょう。
テンプレート
「汎用記事」
の展開の 1 行目でコンポーネント
「FrameWorks」
の genericPage1() というメソッドを呼び出している。
コンポーネント「FrameWorks」の genericPage1() というメソッドは、その 1 行目でコンポーネント「FrameWorks」の
genericPage0() というメソッドを呼び出している。
コンポーネント「FrameWorks」の genericPage0() というメソッドは、その 8 行目でコンポーネント「FrameWorks」の
generateHTML() というメソッドを呼び出している。
コンポーネント「FrameWorks」の generateHTML() というメソッドは、その 13 行目でテンプレート「汎用記事」の
pageContents() というメソッドを呼び出している。
テンプレート「汎用記事」の pageContents() というメソッドは、その 1 行目でコンポーネント「MethodLibrary」の
generateHTMLHelper() というメソッドを呼び出している。
Rev.05
69
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレートのデバッグ機能の強化
2015 年 12 月
コンポーネント「MethodLibrary」の generateHTMLHelper() というメソッドは、
その 1 行目でコンポーネント「MethodLibrary」
の generateHTMLHelperCollapsible() というメソッドを呼び出している。
コンポーネント「MethodLibrary」の generateHTMLHelperCollapsible() というメソッドは、その 28 行目でコンポーネント
「ModuleSelector」の generateHTML() というメソッドを呼び出している。
コンポーネント「ModuleSelector」の generateHTML() というメソッドは、その 1 行目でコンポーネント「PageChainNavi3」
の generateHTML() というメソッドを呼び出している。
コンポーネント「PageChainNavi3」の generateHTML() というメソッドの 35 行目で「指定された関数またはメソッドが呼び
出せない」というエラーを起こした。
まとめ
従来は、コンテンツ生成エラー時には、エラー発生個所の情報しか得られませんでしたが、2.70 からは、エラーの発生した箇所までの
到達経路が表示されるようになりました。従来より効率的にテンプレートのデバッグができるようになりました。
70
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレートの WTL 一括設定機能
2015 年 12 月
テンプレートのWTL一括設定機能
WebRelease を利用していると、複数のテンプレートやコンポーネントの WTL を一斉に最新に設定したい場合があると思います。
Version 2.70 からは、テンプレートの WTL を一括設定することができるようになりました。
テンプレートの数が増えてきている。リニューアルのタイミングでテンプレートを改修するのだが、WTL の再設定に手間がかか
る。
WTL の設定状態を一望にできる画面が欲しい。
WTL を一括設定する
複数のテンプレートやコンポーネントの WTL を一括設定する場合、
テンプレート一覧画面で画面右上にある
「WTL 設定」
ボタンをクリッ
クします。
WTL 設定ボタンをクリックすると、下のスナップショットのような WTL 一括設定パネルが表示されます。選択欄のチェックボックス
で WTL を設定したいテンプレートを選択してください。
WTL は任意の WTL に設定することはできません。その時点で設定されている WTL を使い続けるか、または、最新の WTL に更
新するかのいずれかになります。
この画面を見ると、どのテンプレートにどの WTL が設定されているかを一望にすることができます。
Rev.02
71
WebRelease 2 ver.2.70 新機能のご紹介 - テンプレートの WTL 一括設定機能
2015 年 12 月
WTL を再設定したいテンプレートを選択したら画面右上の「次へ」ボタンをクリックします。
「次へ」ボタンをクリックすると、選択したテンプレートを確認する画面が表示されます。間違いがなければ「実行」ボタンをクリッ
クします。WTL の再設定が実行されます。
まとめ
テンプレートの WTL 一括設定機能をご紹介しました。利用機会はあまり多くないと思いますが、いざという時には便利にお使いいた
だけると思います。
ここではテンプレートのケースでご紹介しましたが、コンポーネントに対しても同じように設定を行うことができます。
WTL は、テンプレート改修などのタイミングでなるべく最新に再設定しておきましょう。
72
WebRelease 2 ver.2.70 新機能のご紹介 - 強化されたプレビュー機能
2015 年 12 月
強化されたプレビュー機能
Version 2.70 では、プレビュー機能が強化されました。
ページ編集画面から直接入力された html の中にある URL で、その URL がそのサイトにあるいずれかのオブジェクト（ページ、サイ
トリソース、テンプレートリソース、ページリソース）を指している場合、ページをプレビューする時点で、それらの URL をプレビュー
用の URL に書き換えてプレビューできるようになりました。
ページ編集画面で html を直接入力する場合、リンク先のページの URL を相対または絶対で直接記述しても、プレビュー画面で
そのリンクを辿れます。
この例で使用しているテンプレートについて
まず、この例で使用しているテンプレートについてご説明しておきましょう。単純なテンプレートです。
ÂÂこの例で使用しているテンプレート (ZIP・1.96kB)
Versino 2.70 以降の WebRelease でご利用ください。
テンプレートの名前は SimpleHTML としてあります。
「複数行のテキスト」タイプの要素がひとつだけ定義されているテンプレートです。要素の名前は html としてあります。
要素 html には「HTML で記入」に「可」を指定してあります。
Rev.07
73
WebRelease 2 ver.2.70 新機能のご紹介 - 強化されたプレビュー機能
2015 年 12 月
展開は、その html に記述された html をそのまま展開するだけの簡単なものです。
ページへの直接リンクを書いてみる
これから、ふたつのページを用意して、片方のページからもう一方のページへのリンクを直接 html で記述してみましょう。
ページ「はじめに」を作成します
ページ「はじめに」を作成します。先のテンプレート SimpleHTML を使って普通にページを作成してください。ページ編集画面には
下記のように入力しておきます。
ページのタイトルは「はじめに」としておきます。
ファイル名は start.html とします。
html には下記のとおり、普通に a タグを使って next.html へのリンクを書いてみます。
74
WebRelease 2 ver.2.70 新機能のご紹介 - 強化されたプレビュー機能
2015 年 12 月
ページ「次に」を作成します
次に、
ページ「次に」を作ります。先の「はじめに」の時と同じように、
テンプレート「SimpleHTML」を使って普通にページを作成します。
ページのタイトルは「次に」としておきます。
ファイル名は next.html とします。
html には、ページのタイトルを表示する h1 タグでも書いておきましょう。
ページ「はじめに」からページ「次に」へのリンクを辿ってみる
ページがふたつ作られ、
ページ「はじめに」にはページ「次に」へのリンクが置かれています。ここで、
ページ「はじめに」をプレビュー
してみます。
プレビュー画面は下のスナップショットのようになっているでしょう。
このプレビュー画面上で、リンク「次に」をクリックすると、下のスナップショットのように「次に」ページが表示されます。
ごく当たり前の動作ですが、今まで 2.6 系以前の WebRelease をご利用になられてきた皆さんには、ちょっと目新しい動作になって
いると思います。WebRelease のいままでの常識が覆される、驚きの瞬間（？）でしょうか。
75
WebRelease 2 ver.2.70 新機能のご紹介 - 強化されたプレビュー機能
2015 年 12 月
Version 2.70 からは、ページのコンテンツ中に直接 html を記述する場合、他のページやリソースを参照する URL を、相対パス、絶対
パスにかかわらず、直接記述できるようになっています。
「はじめに」のページのプレビューを行った時点で、その html の中に書かれていた URL href="next.html" は、対応するページ
のプレビュー用の URL に書き換えられています。ですので、プレビュー画面上でもリンクを辿ることができます。
書き換えの対象になるのは a タグの href 属性だけという訳ではありません。基本的に html のスペックで URL が書けることに
なっている属性の値はすべて書き換えの対象になります。
html の中でページリソースを参照してみる
さて、次は、ページにリソースを登録し、それをページの html の中から直接参照してみます。
ページリソースを登録する
Version 2.70 からは、ページにリソースを定義できるようになっています。先ほどの「次に」のページにリソースを登録してみましょう。
ページ編集画面で「リソース」タブをクリックすると、
ページリソース一覧画面が表示されます。この画面の右上にある「アップロード」
ボタンをクリックしてください。
「アップロード」ボタンをクリックすると、下のスナップショットのように、リソースアップロードパネルが表示されます。
「ファイル
選択」ボタンをクリックしてリソースとして登録するファイルを指定します。
76
WebRelease 2 ver.2.70 新機能のご紹介 - 強化されたプレビュー機能
2015 年 12 月
「ファイル選択」
ボタンをクリックすると下のスナップショットのように、
ブラウザのファイル選択パネルが表示されます。パネルでペー
ジリソースとして登録したい画像ファイルを選択してください。ここでは picture-1.png というファイルをリソースとして登録してみ
ます。
画像ファイルを選択したら「開く」ボタンをクリックします。
最近のブラウザでは、ここで複数のファイルを選択できるようになっています。複数ファイルを選択することで、一度の操作で
複数のページリソースを登録することができます。
最近のブラウザでは「ファイル選択」ボタンの上に画像をドラッグ＆ドロップできるものもあるようです。ファイル選択ボタン
をクリックしてファイル選択パネルを開いて、そこでファイルを指定する手順を踏まずに、直接アップロードするファイルをド
ラッグできます。
「アップロードするファイル」の欄を見ると、目的のファイル picture-1.png が選択されているのがわかります。間違いがなければ「次
へ」ボタンをクリックしてください。
77
WebRelease 2 ver.2.70 新機能のご紹介 - 強化されたプレビュー機能
2015 年 12 月
「次へ」ボタンをクリックすると、
登録内容を確認するパネルが表示されますので登録内容を確認してください。まちがいが無ければ「実
行」ボタンをクリックします。
「実行」ボタンをクリックすると、
指定したファイルがページリソースとして登録されます。そして、
下のスナップショットのようなペー
ジリソースの一覧画面が表示されます。指定したファイルがリソースとして登録されているのがわかります。
登録されたリソースの小さなサムネイルにマウスを乗せると、登録されている画像が原寸で表示されます。リソースの確認に利用でき
ます。
以上で、ページ「次に」にページリソース picture-1.png の登録が完了しました。
78
WebRelease 2 ver.2.70 新機能のご紹介 - 強化されたプレビュー機能
2015 年 12 月
ページの 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 も書き換えの対象になります。
この機能はプレビュー時にのみ動作します。この機能が公開コンテンツに影響を与えることはありません。
79
WebRelease 2 ver.2.70 新機能のご紹介 - Markdown を使ってみる
2015 年 12 月
Markdownを使ってみる
Version 2.70 には Markdown プロセッサが組み込まれました。
html を直接コーディングするのは大変。もう少し手軽な文書作成フォーマットはないのか？
ページ全体の導線やメニュー・ナビゲーションなどは WebRelease のテンプレートで自動生成するが、ページのメインコンテン
ツ部分をブログのようにイージーに作成したい。
それほど強力なレイアウトが欲しい訳ではない。適度に定型化された文書を手軽に作成して公開したい。
Markdown は上記のようなニーズに応えられる、手軽な文書作成フォーマットです。
Markdown を記述できるように要素を設定する
Markdown を記述できる箇所は「複数行のテキスト」型の要素の中です。テンプレート作成時に「複数行のテキスト」型の要素を定義し、
その設定で Markdown を「可」に指定しておくことで、Markdown を記述できる入力エリアを作ることができます。
この設定が行われている「複数行のテキスト」型の要素を持っているテンプレートでページを作成すると、下記のようなページ編集画
面が表示されるでしょう。
Rev.12
80
WebRelease 2 ver.2.70 新機能のご紹介 - Markdown を使ってみる
2015 年 12 月
スナップショット中のオレンジ枠部分に「Markdown」というチェックボックスが見えますが、これを ON の状態にしておくことで、
その入力エリアに入力されたテキストは Markdown として処理されるようになります。
Markdown を使ってみる
さて、次に Markdown を使って作った文書を実際にお見せしましょう。以下「見出しと強調とリンクの書き方」から「コードブロッ
クを置いてみましょう」までの部分は、ひとつの Markdown 文書として作成されています。
この Markdown 文書を適切に表示するためにスタイルシートが使われています。
Markdown 中で参照されている２点の画像はページリソースとして登録されているものです。
ÂÂMarkdown 記述例 (TXT・11.7kB)
このページでご紹介している Markdown コンテンツの記述をダウンロードできます。
ÂÂMarkdown の使い方サンプルサイト (ZIP・1.49MB)
ここでご紹介したサンプルが入ったサイトアーカイブファイルです。Version 2.70 以降の WebRelease でご利用ください。
81
WebRelease 2 ver.2.70 新機能のご紹介 - Markdown を使ってみる
82
2015 年 12 月
WebRelease 2 ver.2.70 新機能のご紹介 - Markdown を使ってみる
83
2015 年 12 月
WebRelease 2 ver.2.70 新機能のご紹介 - Markdown を使ってみる
84
2015 年 12 月
WebRelease 2 ver.2.70 新機能のご紹介 - Markdown を使ってみる
85
2015 年 12 月
WebRelease 2 ver.2.70 新機能のご紹介 - Markdown を使ってみる
86
2015 年 12 月
WebRelease 2 ver.2.70 新機能のご紹介 - Markdown を使ってみる
2015 年 12 月
まとめ
いかがでしたでしょうか。Version 2.70 に組み込まれた Markdown プロセッサは、うまく使うことで強力なツールとなりうるのでは
ないでしょうか。
Markdown は Markdown 記法のドキュメントを html のマークアップに変換するだけです。変換された html には特にスタイ
ル指定は行われていませんので、適切なスタイルシートと組み合わせてご使用ください。スタイルシートの腕の見せ所とも言え
ます。
Markdown でも結構なレイアウトを生み出すことができます。一方でイメージなどの扱いはあまり得意ではないので、
Markdown にこだわらず html との混在で利用するとよいでしょう。
Markdown の中からサイトリソースやページリソースに登録されているイメージや添付ファイルを参照することができます。
Markdown は単純なだけに限界もあります。あまり高度なことは望まずに使い方を工夫するのがよいのではないでしょうか。
Markdown にこだわるばかりに css が妙に複雑になるのは避けたいものです。
87
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
ページリソースの利用
サイトにリソースを登録して利用できることはすでにご紹介いたしました。Version 2.70 からは、ページにもリソースを登録して利用
することができます。ここではページにリソースを登録してそれを利用してみましょう。
ページリソースの登録方法は、サイトリソースの場合とほぼ同じです。
ページリソースは、そのページ内に記述する html から直接参照します。
ページリソースは、ページの公開と同時に公開サーバにアップロードされ、公開されます。また、ページの公開終了と同時に公
開サーバから削除されます。
今回は ResponsiveSlides という jquery のプラグイン (MIT ライセンスで配布されています ) をページリソースに登録し、イメージの
スライドショーを作成してみます。
ここで使用しているテンプレートについて
ここで使用しているテンプレートについて説明しておきましょう。テンプレートの名前は「ページリソースの利用例」としてあります。
このテンプレートは、二つの「複数行のテキスト」型の要素を持っています。それぞれ head と body という名前を付けてあります。
テンプレートの要素 head の要素設定は下記のスナップショットのとおりです。
要素名は head です。
要素のタイプは「複数行のテキスト」です。

「HTML での記入」は ON です。

「自動改行」と「Markdown」はいずれも OFF です。
Rev.02
88
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
テンプレートの要素 body の要素設定は下記のスナップショットのとおりです。要素名が「body」である点を除いて head の設定と同
じです。
テンプレートの展開は下記のとおりです。要素「head」を <head></head> の間に、また、要素「body」を <body></body> の間
にそのまま埋め込む簡単なものです。
ページを作成する
まず、ページを作成します。ページ一覧画面で「新規ページ」ボタンをクリックします。
「新規ページ」ボタンをクリックするとテンプレート「ページリソースの利用例」でページが作成され、新たに作成されたページのペー
ジ編集画面が表示されます。
このサイトには、今は、テンプレートは「ページリソースの利用例」がひとつだけ定義されている状態ですので「新規ページ」
ボタンをクリックするとテンプレートを選択する余地なくテンプレート「ページリソースの利用例」でページが作成されます。
テンプレートが複数定義されているサイトの場合には「新規ページ」ボタンのクリック後にテンプレートを選択するステップを
経由することになります。
89
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
ページ編集画面が表示されたら、
ひとまず、
ページタイトルを「無題」から、
何か適当なもの変えておきましょう。ここでは「ページリソー
スの利用例」としておきます。ページタイトル欄を書き換えたら画面右上の「保存」ボタンをクリックして変更を保存しておきます。
ResponsiveSlides をページリソースに登録する
さて、ページが作成できたので、そのページにページリソースを登録してみます。ここでは、ResponsiveSlides という jquery プラグ
インをページのリソースに登録してみます。
ÂÂResponsiveSlides
ResponsiveSlides はイメージスライダを実現する小さな jquery プラグインです。詳しくは上記リンクで確かめてみてください。
このプラグインを zip 形式でダウンロードしてページリソースとして登録する準備をしておきます。
ページリソースの登録はページ編集画面の「リソース一覧」画面でおこないます。リソース一覧画面の「アップロード」ボタンをクリッ
クしてください。
90
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
「アプロード」ボタンをクリックするとリソースアップロードパネルが表示されます。パネル中の「ファイル選択」ボタンをクリック
してブラウザのファイル選択パネルを表示します。
ファイル選択パネルでアップロードするリソースを選択します。ここでは ResponsiveSlides.js-master.zip を選択します。
ReponsiveSlides.js-master.zip を指定したらパネル右上の「次へ」ボタンをクリックします。
「次へ」ボタンをクリックすると、登録内容を確認するパネルが表示されます。間違いがなければ「実行」ボタンをクリックします。
91
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
「実行」ボタンをクリックするとリソース登録が実行され、リソース一覧画面が表示されます。指定した ResponsiveSlides.js-master.
zip が登録されているのがわかります。
登録したリソースは zip 形式なので、その zip を解凍しておきます。リソース一覧画面の「操作」欄にある黄色い編集ボタンをクリッ
クします。
編集ボタンをクリックするとリソース編集画面が表示されます。画面の右上に「UnZip」ボタンをクリックして zip を解凍します。
「UnZip」ボタンをクリックすると UnZip パネルが表示されます。Zip がパスワード保護されている場合にはここでパスワードを指定し
ておきます。解凍を実行するには画面右上の「UnZip」ボタンをクリックします。
92
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
「UnZip」ボタンをクリックすると解凍が実行され、再度リソース一覧画面が表示されます。リソース一覧画面にディレクトリ
ResponsiveSlides.js-master が作成されているのがわかります。
ここで ResponsiveSlides.js-master のフォルダアイコンをクリックしてみましょう。
フォルダアイコンをクリックするとそのフォルダが開かれ、フォルダ以下のファイルが表示されます。解凍されたファイルがフォルダ
以下に展開されているのがわかります。
さて、
次にフォルダ / の名前を変えておきましょう。
これは、
このフォルダ以下に登録したページリソースの URL が、
他のページやリソー
スの URL と衝突しないようにするためです。フォルダの名前を変えるために、操作欄にある黄色い編集ボタンをクリックします。
編集ボタンをクリックするとフォルダ編集パネルが表示されます。パネル中で「ディレクトリ名」の欄に joo9qd0000000021-res と
指定しておきます。ここで指定するディレクトリ名は、このページのページリソースが公開サーバにアップロードされるときの、公開
サーバ上のディレクトリ名となるものです。ディレクトリ名として適切な名前であれば何を指定しても良いのですが、このディレクト
リ名が他のディレクトリの名前と衝突しないように、
ページ ID をベースにディレクトリ名を決めておくことをお勧めします。ここでは、
このページのページ ID が joo9qd0000000021 でしたので、その ID の末尾に -res を付けたものにしてみました。
ディレクトリ名を指定したら画面右上の「完了」ボタンをクリックします。
93
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
完了ボタンをクリックするとディレクトリ名が設定され、再度リソース一覧画面が表示されます。ディレクトリ名が変更されているの
がわかります。
これで ResponsiveSlides プラグインのページリソースへの登録が完了です。
なお、ページ ID はページごとに異なる 16 文字の ID です。ページ編集画面の上部に表示されています。
ページリソースを使ってページを作成する
ResponsiveSlides プラグインのページリソースへの登録が終わったので、次は、それを使ってページを作ってゆきましょう。ページ
編集画面で head と body に下記のように html を記述します。
head と body を記述したら画面右上の「保存」ボタンをクリックします。
94
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
head の記述
<!-まず jquery をロードします。
ここでは CDN からロードしていますが jquery をサイトリソースに登録して利用するのも良い方法でしょう。
-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-次に、ResponsiveSlides の本体のスクリプトをロードします。先ほど登録したページリソースを相対パスで指定します。
-->
<script src="joo9qd0000000021-res/ResponsiveSlides.js-master/responsiveslides.min.js">
</script>
<!-ResponsiveSlides のスタイルシートを読み込みます。先ほど登録したページリソースを相対パスで指定します。
-->
<link rel="stylesheet" href="joo9qd0000000021-res/ResponsiveSlides.js-master/responsiveslides.css">
<!-ResponsiveSlides を動かします。jquery プラグインのお決まりの書き方ですね。
-->
<script>
$(function () {$("#slider1").responsiveSlides({maxwidth: 800, speed: 800});});
</script>
body の記述
<h1>ResponsiveSlides を使ったスライドショー </h1>
<!-スライドショーに使う画像を ul/li で指定します。利用する画像を相対パスで指定します。
ここでは、先ほど登録したページリソースの中にデモ用の画像が含まれていましたのでそれをそのまま使ってみました。
実際には、スライドショーに使う画像を別途ページリソースに登録して使用することになるでしょう。
-->
<ul class="rslides" id="slider1">
<li><img src="joo9qd0000000021-res/ResponsiveSlides.js-master/demo/images/1.jpg" alt=""></li>
<li><img src="joo9qd0000000021-res/ResponsiveSlides.js-master/demo/images/2.jpg" alt=""></li>
<li><img src="joo9qd0000000021-res/ResponsiveSlides.js-master/demo/images/3.jpg" alt=""></li>
</ul>
95
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
作ったページをプレビューしてみる
ページができたので、早速プレビューしてみましょう。ページ編集画面左上にあるプレビューアイコンをクリックしてください。
プレビューアイコンをクリックするとプレビューウインドが表示されます。プレビューウインドウの表示は下のように見えるでしょう。
96
WebRelease 2 ver.2.70 新機能のご紹介 - ページリソースの利用
2015 年 12 月
まとめ
いかがでしたでしょうか。プラグインを使って簡単なスライドショーを作成してみました。
ResponsiveSlides には今回ご紹介していないオプションがいろいろあります。いろいろと試してみるのも面白いと思います。
今回は ResponsiveSlides を使用しましたが、他のプラグインでも同様の手順で利用できるものが多いと思います。
ÂÂここで説明したサイトのアーカイブファイル (ZIP・835kB)
ご参考に、ここでご紹介したサンプルが入ったサイトアーカイブファイルを置いておきます。Version 2.70 以降の WebRelease
でご利用ください。
今回はプラグインをページのリソースに登録して使用しましたが、複数のページで使用するプラグインはサイトリソースに登録
したり、テンプレート化するなどして使用する方が良いでしょう。
ページリソースは、そのページの pageID を含んだサブディレクトリ以下に置くようにしましょう。そうすれば、他のページのペー
ジフォルダとサーバ上での URL が衝突することを避けることができます。
ページ内に記述する html は、事実上、他のページに登録されているページリソースもパス（URL）を指定することで参照する
ことができますが、管理上の理由で避けた方がよいでしょう。他のページのリソースは、そのページの公開開始のタイミングで
公開サーバにアップロードされ、また、公開終了のタイミングで公開サーバから削除されます。参照する側のページと、参照さ
れている側のページの公開開始、公開終了のタイミングが確実に一致している状況でない限り、リンク切れなどの問題を起こし
やすくなります。
当社は ResponsiveSlides.js の利用を推奨しているわけではありません。また、それが正常に期待どおり動作することを保証す
るものでもありません。あらかじめご了承ください。
97
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
外部作成コンテンツの取込み：ZIPアップロード
今回は、外部で作成した 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 を取り出し
てから使用してください。
Rev.05
98
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
テンプレートの要素定義
このテンプレートは、ひとつの「複数行のテキスト」型の要素を持っています。要素名は 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 種類のタグを選別して切り出しています。
99
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
メソッドの定義は下記のスナップショットのとおりです。
メソッド 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()%
100
2015 年 12 月
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
下記のマニュアルページも参考にしてください。
ÂÂparseHtml() 関数のマニュアル
ÂÂHTMLDocument オブジェクトのマニュアル
ÂÂHTMLElement オブジェクトのマニュアル
extractBody() メソッド
extractBody() は、要素 html に取り込まれた html の <body> ∼ </body> の内側全体を切り出します。メソッドの定義は下記のスナッ
プショットのとおりです。
メソッド 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-->
101
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
body タグの内側の html を返します。
</wr-->
%body.html()%
下記のマニュアルページも参考にしてください。
ÂÂparseHtml() 関数のマニュアル
ÂÂHTMLDocument オブジェクトのマニュアル
ÂÂHTMLElement オブジェクトのマニュアル
テンプレートの展開
テンプレート「外部コンテンツ取り込み」の展開は下のスナップショットのとおりです。
<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 というファイルを準備してゆくことにします。
ÂÂ今回使用した import_html_example.zip はここからダウンロードできます。(ZIP・558kB)
102
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
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 の衝突を避けるようにしましょう。
103
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
今回は 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}
\]
104
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
</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 のページ側で指定されているスタイルの中には引き継いだ方がよいものもあるかもしれません。例えば、
文字の大きさなどは揃えたいと考えるかもしれません。兼ね合いを考えてコンテンツを作成してください。
105
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
ページを作成して外部コンテンツの zip ファイルを取り込む
さて、次は、先ほど用意したテンプレートを使ってページを作ってみましょう。ページ作成直後のページ編集画面は下のスナップショッ
トのようになっていると思います。Zip ファイルを取り込むために、入力エリア html の右側に表示されている「アップロード」ボタ
ンをクリックします。
「ファイル選択」ボタンをクリックし
アップロードボタンをクリックすると zip ファイルをアップロードするパネルが表示されます。
てください。
「ファイル選択」
ボタンをクリックするとブラウザのファイル選択パネルが表示されます。ここで先ほど作成しておいた zip ファイル
（こ
こでは import_html_example.zip という名前で zip ファイルを作成しておきました）を指定します。Zip ファイルを指定したら「開く」
ボタンをクリックします。
106
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
「開く」ボタンをクリックすると、再度、zip アップロードパネルが表示されます。正しく zip ファイルが指定されているのを確認した
ら「実行」ボタンをクリックします。
この時、ふたつのオプションが選択できます。ひとつは「アップロードされた html ファイルの中の title タグの内容をページタイトル
に設定する」
というオプションです。このオプションを ON にして取り込みを実行すると、
html ファイル中の title タグの内容がこのペー
ジのページタイトルに設定されます。
もうひとつのオプションは「アップロードされた html ファイル名をページのファイル名に設定する」というオプションです。このオ
プションを ON にして取り込みを実行すると、アップロードされた html のファイル名がこのページのファイル名に設定されます。
今回は、両方 ON で取り込んでみましょう。
「実行」ボタンをクリックすると、zip ファイルの取り込みが行われた後、ページ編集画面が表示されます。
import_html_example.html の内容が、入力フィールド html にとりこまれているのがわかります。
このページのページタイトルが、アップロードした zip ファイル中に格納しておいた import_html_example.html という html
の title タグの内容に設定されているのがわかります。
このページのファイル名が、アップロードした zip ファイル中に格納しておいた import_html_example.html というファイルの
名になっていることがわかります。
107
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
さて、リソースの登録状況も確認してみましょう。
「リソース」タブをクリックしてページリソースの一覧を表示してください。
フォルダアイコンをクリックするとフォルダを開いて表示することができます。
アップロードした zip ファイルに格納されていたファイルがページリソースとして登録されているのがわかります。
import_html_example.html 自体はページの要素内にとりこまれているためリソースとしては登録されません。
取り込んだ結果のページの出来映えをプレビューして確認してみましょう。画面左上にあるプレビューアイコンをクリックしてくださ
い。
プレビューアイコンをクリックするとプレビューウインドウが開いてページのプレビューが表示されます。プレビューウインドウの表
示は下のスナップショットのようになるでしょう。Zip ファイルでアップロードしたコンテンツが取り込まれているのがわかります。
108
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
109
2015 年 12 月
WebRelease 2 ver.2.70 新機能のご紹介 - 外部作成コンテンツの取込み：ZIP アップロード
2015 年 12 月
まとめ
いかがでしたでしょうか。外部で作成したコンテンツを 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 です。
ÂÂjsoup: Java HTML Parser
110
WebRelease 2 ver.2.70 新機能のご紹介 - スタッフ登録機能
2015 年 12 月
スタッフ登録機能
新しくなったスタッフ登録機能をご紹介しましょう。サイトのスタッフ登録の操作が一新され、使いやすくなりました。
スタッフ登録時に、WebRelease にユーザ登録されているユーザの一覧から、スタッフに登録したいユーザを選んで登録します。
スタッフ登録と同時に、各スタッフに与える権限を指定することができます。
スタッフのフォルダへのアクセス制限をスタッフ設定画面から行うことができます。
サイトのスタッフの登録
サイトのスタッフの登録は「サイト設定」画面の「スタッフ設定」画面で行います。スタッフの登録を開始する時には、
画面右上の「追
加」ボタンをクリックします。
追加ボタンをクリックすると、下のスナップショットのようなスタッフ登録パネルが表示されます。パネルには、WebRelease にユー
ザ登録されているユーザの一覧が表示されています。一覧の中から、スタッフに登録したいユーザをチェックボックスで選択してくだ
さい。
フタッフとして既に登録されているユーザのチェックボックスは選択できない状態で表示されていますのでスタッフの重複登録
の心配はありません。
スタッフに登録するユーザを選択したら「次へ」ボタンをクリックします。
Rev.03
111
WebRelease 2 ver.2.70 新機能のご紹介 - スタッフ登録機能
2015 年 12 月
「次へ」ボタンをクリックすると、下のスナップショットのように、新規に登録するスタッフの権限を指定するパネルが表示されます。
各スタッフに必要な権限を指定してください。
また、登録対象のユーザに間違いがないかどうか確認します。
OK であれば「実行」ボタンをクリックします。
「実行」ボタンをクリックすると指定に従ってスタッフ登録が実行され、再度スタッフ一覧画面が表示されます。指定とおりにスタッ
フが登録されているのがわかります。
スタッフの一括権限設定
次は、スタッフの権限を一括して設定する方法をご紹介しましょう。全スタッフの権限設定状況を一望にして設定できるので間違いが
起きにくく、また、手早く設定できるはずです。
権限の一括設定を行う場合には、スタッフ一覧画面右上にある「権限設定」ボタンをクリックします。
112
WebRelease 2 ver.2.70 新機能のご紹介 - スタッフ登録機能
2015 年 12 月
「権限設定」ボタンをクリックすると、下のスナップショットのような権限設定パネルが表示されます。このパネルを使って、各スタッ
フの権限の設定を変更してください。
設定を入力したら、画面右上の「保存」ボタンをクリックします。
「保存」ボタンをクリックすると変更が保存され、
再度スタッフ一覧画面が表示されます。権限の設定が変更されているのがわかります。
スタッフのフォルダへのアクセス制限設定
スタッフごとに、
アクセスを制限するフォルダ（立ち入り禁止のフォルダ）を指定することができます。アクセス制限の設定は、
そのフォ
ルダのフォルダ設定画面で行うことができますが、スタッフ設定画面側からも同様に設定することができます。
フォルダ設定画面から設定しても、スタッフ設定画面から設定しても、どちらも効果は同じです。使いやすい方で設定してくだ
さい。
あるスタッフがどのようなアクセス制限を受けているかを一望にできる点がこの画面の利点です。
あるスタッフに対して、
アクセス制限の設定を行う場合、
まず、
スタッフ一覧画面の「操作」欄にある黄色の編集ボタンをクリックします。
ここではユーザ haraguchi さんの設定を行ってみましょう。
113
WebRelease 2 ver.2.70 新機能のご紹介 - スタッフ登録機能
2015 年 12 月
黄色の編集ボタンをクリックすると、スタッフ設定の「全般」画面が表示されます。フォルダのアクセス制限設定を行う場合には「ア
クセス制限」タブをクリックして、アクセス制限パネルを表示します。
「アクセス制限」タブをクリックすると、下のスナップショットのようなアクセス制限設定画面が表示されます。このパネルでスタッ
フのアクセス制限を設定します。
「操作」欄にある、
赤いボタンをクリックすると、
スタッフはそのフォルダ以下へのアクセス（立ち入り）ができなくなります。ここでは、
ユーザ haraguchi さんを、フォルダ「セミナー」以下への立ち入りを制限してみましょう。
赤いボタンをクリックすると、ブラウザの確認パネルが表示されます。OK をクリックするとアクセス制限が設定され、下記のような
画面が表示されます。
114
WebRelease 2 ver.2.70 新機能のご紹介 - スタッフ登録機能
2015 年 12 月
フォルダ「セミナー」以下の「アクセス制限」欄のマーカーの色が青から赤に変わっています。マーカが赤のフォルダには立ち
入りが制限されています。
フォルダ「セミナー」で制限を加えたので、そのサブフォルダにも制限が加えられています。マーカーの色も赤色になっている
のがわかります。
アクセス制限を解除する時には、操作欄の青色のボタンをクリックします。このボタンは、アクセスが制限されているフォルダにのみ
表示されます。
115
WebRelease 2 ver.2.70 新機能のご紹介 - スタッフ登録機能
2015 年 12 月
青色ボタンをクリックすると、ブラウザの確認パネルが表示されます。OK をクリックするとアクセス制限が解除され、下のような画
面が表示されます。アクセス制限欄のマーカーの色が青色になり、制限が解除されていることがわかります。
サイトのスタッフの一括削除
サイトに登録されているスタッフを一括して削除することができます。一括削除を行う場合は、スタッフ一覧画面の右上にある「一括
削除」ボタンをクリックします。
一括削除ボタンをクリックすると、一括削除パネルが表示されます。パネル中で、削除したいスタッフをチェックボックスで選択して
から「次へ」ボタンをクリックします。
116
WebRelease 2 ver.2.70 新機能のご紹介 - スタッフ登録機能
2015 年 12 月
「次へ」ボタンをクリックすると、削除対象のスタッフの確認パネルが表示されます。削除するスタッフの指定に間違いがなければ「実
行」ボタンをクリックします。
実行ボタンをクリックするとスタッフの削除が実行され、再度スタッフ一覧画面が表示されます。削除したユーザがスタッフから削除
されているのがわかります。
まとめ
Version 2.70 からは、サイトのスタッフの操作画面が改良されています。
多くのスタッフを抱えるサイトの管理がやりやすくなりました。
スタッフの権限を一括して設定できるようになりました。
スタッフのフォルダへのアクセス制限の設定をサイトスタッフ画面側からも行えるようになりました。
スタッフの一括削除ができるようになりました。
117
WebRelease 2 ver.2.70 新機能のご紹介 - その他の機能追加
2015 年 12 月
その他の機能追加
Version 2.70 の新機能をいろいろ紹介してきましたが、ついに今回が最終回です。
今回は、今までにご紹介できなかった小さな機能追加をまとめてご紹介いたします。
パスワード管理の強化
ユーザが使用するパスワード中に含まれていなければならない、記号、英字大文字、英字小文字、数字、の最低数を指定できるように
なりました。これにより、ユーザにより安全性の高いパスワードを設定するように要求することができるようになりました。
新たに設定した基準を満たさないパスワードを使用しているユーザには、次回ログイン時に基準を満たすパスワードへのパスワード変
更を自動で求めます。
Developer Edition を識別する表示を追加
Developer Edition の場合に操作画面の最上部にオレンジ色のバーが表示されるようになりました。これにより本番環境とテスト環境
の識別がしやすくなりました。
Developer Edition の場合にはメニューバー上部がオレンジ色になります
Developer Edition 以外ではメニューバーの表示は従来どおり黒色です
Rev.01
118
WebRelease 2 ver.2.70 新機能のご紹介 - その他の機能追加
2015 年 12 月
ログイン中のユーザの一覧表示
その時点でログインしているユーザの一覧を表示できるようになりました。作業中のサイトがあれば、その情報も表示されます。
ログイン履歴情報の強化
システムのログイン履歴に、ログインしたユーザの IP アドレスと User-Agent が記録されるようになりました。
公開開始指定時刻と公開終了指定時刻の必須入力指定
ページの公開開始指定時刻、公開終了指定時刻を、必須入力項目に指定できるようになりました。指定はテンプレートごとにおこなえ
ます。
119
WebRelease 2 ver.2.70 新機能のご紹介 - その他の機能追加
2015 年 12 月
メソッドの private 指定
テンプレートやコンポーネントに定義したメソッドに対して private の指定ができるようになりました。Private 指定されているメソッ
ドは、そのテンプレートまたはコンポーネント外からは呼び出すことができないため、そのメソッドの呼び出し元を限定することがで
きます。これによりメソッドのメンテナンス性が向上します。
Private に指定されているメソッドには、緑色のマーカーが表示されます。
リンク要素の小さな改良
リンク要素のリンク先にページデータ型のテンプレートから作成されたページを指定できないように制限することができるようになり
ました。
120
WebRelease 2 ver.2.70 新機能のご紹介 - その他の機能追加
2015 年 12 月
追加された関数
下記の関数が追加されました。詳しくはそれぞれの関数のマニュアルを参照してください。
ÂÂhasElement()
hasElement() 関数は、ある要素が指定された名前の子要素をもっているかどうか調べるときに使用します。例えば、リンクや目次
を経由して入手したページが、ある要素を持っているかどうか調べる時に使用します。
ÂÂhasMethod()
hasMethod() 関数は、ある要素が指定された名前のメソッドをもっているかどうか調べるときに使用します。例えば、リンクや目
次を経由して入手したページが、ある名前のメソッドを持っているかどうか調べる時に使用します。
ÂÂfullURL()
fullURL() 関数は、与えられたオブジェクトが公開サーバ上に配信された場合の URL を返します。いろいろなオブジェクトの URL
を得ることができます。
ÂÂquote()
quote() 関数は与えられた文字列中の & < > " を、それぞれ & < > " に置き換えます。タグの属性の値として安全に使える文
字列を生成するために使用します。
ÂÂjstr()
jstr() 関数は、任意の文字列を javascript の文法に沿った文字列に変換します。この関数を使えば、任意の文字列を安全に json な
どに組み込むことができるようになります。
ÂÂparseHtml()
parseHtml() 関数は html テキストをパースして HTMLDocument オブジェクトに変換します。
ÂÂpreviewClock()
previewClock() 関数はプレビュー時刻を返します。この関数は isPreview() が true になる状況でのみ呼び出せます。つまり、プレ
ビュー専用のコンテンツを生成する場合にのみ利用可能です。
ÂÂrtlCount()
rtlCount() 関数は文字列中に含まれるアラビア語またはヘブライ語の文字の数を数えて返します。一般的に、これらの文字からなる
単語は右から左に向けて表示されます。
ÂÂrtlRatio()
rtlRatio() 関数は文字列中に含まれるアラビア語またはヘブライ語の文字の比率を返します。返される値は 0 から 1 の間の数値です。
ÂÂcodePointAt()
codePointAt() 関数は文字列中の指定された位置の文字の Unicode Code Point を返します。
ÂÂunescapeEntities()
unescapeEntities() 関数は、文字列中の文字参照、例えば & などの表記を、対応する文字に置き換えます。
121
WebRelease 2 ver.2.70 新機能のご紹介 - その他の機能追加
2015 年 12 月
追加されたオブジェクト
下記のオブジェクトが追加されました。詳しくはそれぞれのマニュアルを参照してください。
ÂÂHTMLComment オブジェクト
HTMLComment オブジェクトは html 中のコメントを表すオブジェクトです。
ÂÂHTMLDataNode オブジェクト
HTMLDataNode オブジェクトは html 中の style 要素や script 要素の内側の、テキスト的な部分を表すオブジェクトです。
ÂÂHTMLDocument オブジェクト
HTMLDocument オブジェクトは parseHtml() 関数の実行結果として得られる、テキスト表現の html 文書をパースした結果のオブ
ジェクト（DOM）です。パースした html から css や jquery のセレクタのような表記を使って、特定の要素を拾い出したり、また、
html を加工して形を変えるなどの操作を行うことができます。
ÂÂHTMLElement オブジェクト
HTMLElement オブジェクトは、parseHtml() 関数でパースした HTML 文書中の要素（タグ）を表すオブジェクトです。
ÂÂHTMLElements オブジェクト
HTMLElements オブジェクトは、基本的に HTMLElement オブジェクトの配列です。
ÂÂHTMLTextNode オブジェクト
HTMLTextNode オブジェクトは html 中のテキストを表すオブジェクトです。
追加された拡張タグ
下記の拡張タグが追加されました。
ÂÂwr-switch wr-case wr-default
ある式を評価した結果の値によって多分岐したい場合には wr-switch wr-cond wr-default を使うと便利です。
ÂÂwr-conditional wr-cond
条件に応じて多分岐したい場合には wr-conditional タグを使うと便利です。
最後に
Version 2.70 の新機能の説明はひとまず今回で終了とさせていただきます。わかりにくい部分がございましたら、お気軽に
[email protected] までお問い合わせください。
強化された WebRelease 2.70 を採用いただき、これまで以上のサイトの運用管理の効率化と品質向上にお役立ていただければ幸いで
す。
122
WebRelease 2 ver.2.70 新機能のご紹介
2015 年 12 月
© 2000-2015 FrameWorks Software, Inc. All rights reserved.
本資料に記載の内容は 2015 年 9 月現在の WebRelease ver.2.70 に基づくものです。
製品の仕様や価格等は予告無く変更する場合があります。
WebRelease は株式会社フレームワークスソフトウェアの登録商標です。
その他記載されている会社名、製品名等は該当する各社の商標または登録商標です。
123
F-WR0270-001

Download Report