.
.
.
.
.
.
.
.
.
.
XyXon, Inc.
HeartCore
Web
コンテンツ管理システム
簡易スタートガイド
簡単・安価に
Web
サイトを作成・公開・管理
2013 年 5 月 Version8.2.11
目次
1 目次 ... 2 2 はじめに ... 3 3 ログイン ... 4 4 WEB ページ ... 5 5 ホームページ ... 6 6 テンプレート ... 7 7 ナビゲーション ... 9 8 コンタクトフォーム ... 12 9 制限エリア ... 15 10 検索 ... 17 11 キャンペーン情報、バナー、ニュース ... 20 12 スタイルシート ... 23HeartCore
Web コンテンツ管理システム
簡単・安価に
Web
サイトを作成・公開・管理
2 はじめに
HeartCore Web コンテンツ管理システム は、インターネット、イントラネット、エクストラネッ ト上に構築した Web 上のコンテンツへのアクセスを容易にすることで、コンテンツの制作と更 新を支援する Web ソリューションです。本書では、わかりやすい手順を通じて HeartCore Web コンテンツ管理システム の使い方を説明します。下図のような Web サイトを制作する一連の作 業を行います。この Web サイトでは、メニュー、コンタクトフォーム、アクセス制限ページ、 検索、バナー、キャンペーン情報といった汎用的な機能を使用します。 弊社のオンライン トライアル版を試用中の場合は、次の「ログイン」セクションに進んで Web サイトの制作を開始してください。 システムをサーバーにインストール済みの場合は、インストール作業と設定を正しく行ってい ることをご確認ください。作業を開始する前に、トライアル版のデータベースまたは「ベーシ ック」データベースをインポート済みであることも確認してください。システムにログインし た時に「 クイックスタートの設定」 ページが表示される場合は、システムの設定が完了してい ません。HeartCore Web コンテンツ管理システム「インストールガイド」の「クイックスタート 設定」セクションを参照して、指示に従ってください。3 ログイン
Web サイトの制作と更新を行うには、HeartCore Web コンテンツ管理システム の管理ページに ログインする必要があります。ログイン手順を以下に示します。
ログイン
Web サイトのアドレスに続けて 「/webadmin/」を Web ブラウザ のアドレス フィールドに入力し ます。たとえば、以下のように なります。 https://www.mysite.com/webadmin/
ユーザー名とパスワードを入力 します。既定のユーザー名とパ スワードは、以下のとおりで す。 ユーザー名: admin パスワード: admin ログインボタンをクリックしま す。 ログインに成功すると、 HeartCore Web コンテンツ管理シ ステム のトップ ページが表示さ れます。表示されるメニュー は、お使いのエディションと利 用可能なアドオン モジュールに よって異なります。
4
Web ページ
このセクションでは、Web ページを作成して更新する方法を説明します。サンプル Web サイト 上の 部屋、施設、料金、キャンペーン情報、ロケーション、メンバー、ニュース といったペー ジは、いずれもこの方法で作成できます。連絡フォーム や 予約 といった特殊なページの作成方 法は、後続のセクションで説明します。Web ページの作成と更新
ツールバーから [Web サイトコン テンツ] を選択します
[ページ] を選択します。
Web ページを新規作成するに は、[追加] ボタンをクリックし ます。または、既存の Web ペー ジを更新するには、ページのタ イトルをクリックします。 新しい画面が表示されます。既 存の Web ページのコンテンツ は、すべて [コンテンツ] フィー ルドに表示されます
[タイトル] フィールドに Web ペ ージのタイトルを入力するか、 表示されたタイトルを更新しま す。
Web ページのコンテンツを [コン テンツ] フィールドに追加する か、表示されたものを変更しま す
[保存して閉じる] ボタンをクリ ックします。 一覧 画面に戻ります。Web ペー ジを新規作成した場合は、ペー ジ リストに追加されます。
[コンテンツ] フィールドにコ ンテンツを追加したり、コンテ ンツを変更する方法の詳細は、 『HeartCore Web コンテンツ管理 システム ウェブサイト作成者ガ イド』の（コンテンツ エディ タ） セクションを参照してくだ さい。
5
ホームページ
ホームページを設定するには、上のセクションの説明に従って Web ページを作成し、その Web ページをホームページに設定する必要があります。そうすると、Web サイトの訪問者が Web サ イトの URL (http://www.mysite.com など) にアクセスした時にホームページが表示されます。ホームページの設定
ツールバーから [設定] を選択し ます。 設定 画面が表示されます。
[システム] メニュー項目の左に ある [+] アイコンをクリックして 展開し、サブメニューの [ウェブ サイト] を選択します。
[特殊ページ] タブを選択しま す。
既定のページ (ホームページ) の [選択] をクリックします。 ポップアップが表示されます。
[ページ] をクリックします。
ホームページに設定したいペー ジを選択します。
[OK] をクリックします
[保存] をクリックします。 訪問者が Web サイトの URL (http://www.mysite.com など) にア クセスすると、設定したホーム ページが表示されます。
6
テンプレート
Web サイト上の全ページのレイアウトを統一するには、テンプレートを作成する必要があります。テンプレ ートには、フッターやロゴ付きのヘッダーに加え、その他の構成要素やデザインを含めることができます。 ヘッダーとフッター付きの単純なテンプレートの作成方法を以下に示します。また、テンプレートを Web サイト全体に適用するように設定する方法も説明します。このテンプレートは、後ほど拡張してメニューな どの要素を追加します。テンプレートの作成
ツールバーから [Web サイトコン テンツ] を選択します
左側のメニューから [テンプレー ト] を選択します。
[追加] ボタンをクリックしま す。 テンプレートを追加する空白の 追加 画面が表示されます。
テンプレート名を [タイトル] に入力します。
テンプレートに盛り込みたいヘッダーやフッターなどのデザイ ンを、この大きな入力エリアへ 追加します。
ページのコンテンツを表示したい位置に @@@content@@@ というコードを入力します。
[保存して閉じる] をクリックし ます。
テンプレートは、罫線のない 表形式で構成されていることが よくあります。エディタの [詳細 を表示] ボタンをクリックして表 の罫線を表示してください。
テンプレートの適用
ツールバーから [設定] を選択し ます。
[システム] メニュー項目の左に ある [+] アイコンをクリックして 展開し、サブメニューの [ウェブ サイト] を選択します。
これまでのステップで作成した テンプレートを選択します
[保存] をクリックします。 訪問者が Web サイトの URL (http://www.mysite.com など) にア クセスすると、設定したホーム ページが設定したテンプレート 内に表示されます。
7
ナビゲーション
Web サイトにメニューやツールバーを追加するには、Web ページにリンクするメニューやツー ルバーの要素を作成して、そのメニューやツールバーをテンプレートに挿入します。メニュー を作成する例を以下に示します。ツールバーの作成方法も同様です。メニュー要素の作成
ツールバーから [Web サイトコン テンツ] を選択します。
[クラス] メニュー項目の左にあ る [+] アイコンをクリックして展 開し、サブメニューの [menu] を 選択します。
[追加] ボタンをクリックしま す。 要素を追加する空白の 追加 画面 が表示されます。
メニュー名を [タイトル] に入力 します。
[コンテンツ] フィールド内でメ ニューを作成します。各メニュ ー項目を 1 つずつ順番に選択 し、以下のステップ 6 ～ 9 の作 業を行って Web ページにハイパ ーリンクを挿入します
エディタ ツールバーの [ハイパー リンクを挿入] ボタンをクリック します。 ポップアップ画面が表示されま す。
[ページ] を選択します。
リンクしたい Web ページを選択 します。
[OK] をクリックします。
[保存して閉じる] ボタンをクリ
ックします。
新しいページは、Web コンテ ンツ エディタのハイパーリンク マネージャを使用して作成でき ます。テンプレートへのメニュー
のアサイン
ツールバーから [Web サイトコ ンテンツ] を選択します。
メニューから [テンプレート] を 選択します。
これまでのステップで作成した テンプレートを見つけて、その テンプレートのタイトルをクリ ックします。 更新 画面が表示されます。
メニューを表示したい位置に @@@menu.content@@@ というコードを入力します。
[追加コンテンツ] タブをクリッ クします
[追加コンテンツ] タブが表示さ れます。
[追加] ボタンをクリックしてメ ニューを表示します。
[menu] をクリックします。
[menu] リストから、これまでの ステップで作成したメニュー要 素を選択します。
[OK] をクリックします。
保存して閉じる] ボタンをクリッ クします。 上記のステップを繰り返して、 ツールバー メニューを作成しま す。 完成した Web サイトは、このよ うになります。
8
コンタクトフォーム
コンタクトフォームを設置することにより、Web サイトの訪問者は、あらかじめ設定した管理 者の電子メール アドレス宛てに、Web サイトを通じて電子メールを送信できるようになります。 コンタクトフォームを作成するには、通常の Web ページに特殊なフォーム要素を追加する必要 があります。フォームを正しく機能させるために挿入する必要がある要素には、コンタクトフ ォームに関する一般情報を収めたフォーム コンテナ、フォーム コンテナ内のフォーム フィール ド、フォーム コンテナ内に設置する [送信] ボタン、ユーザーが [送信] ボタンをクリックした時 に表示するランディング ページを指定するためにコンタクトフォーム内に設置する特殊な非表 示フィールドなどがあります。コンタクトフォームの詳細な作成方法を以下に示します。予約 フォームの作成方法も同様です。フォーム コンテナの挿入
上記の「Web ページ」セクショ ンで説明したように、Web ペー ジを作成するか、開きます (この スクリーンショットには表示さ れていません)。
[コンテンツ] フィールド内で、 フォーム コンテナを配置したい 位置にカーソルを置きます。
[フォームを挿入] ボタン上にマ ウスを置いて、ドロップダウン リストよりフォームの挿入を選 択します。 ポップアップ画面が表示されま す。
[メソッド] ドロップダウン リス トから [POST] を選択します。 .
[アクション URL] フィールドに 「/contact.jsp」と入力します。 （もしくは /contact.aspx）
[OK] をクリックします。
[詳細を表示] ボタンをクリック して、フォーム コンテナを示す 赤い破線を表示します。
フォーム フィールドの挿入
フォーム罫線内で、フォーム フ ィールドを配置したい位置にカ ーソルを置きます。
[フォームの挿入] ボタン上にマ ウスを置いて、ドロップダウン リストよりテキスト入力の挿入 を選択します。 ポップアップ画面が表示されま す。
[名前] フィールドに「name」と 入力して、Web サイトの訪問者 が自分の名前を入力できるフィ ールドを作成します。
[OK] ボタンをクリックして、[コ ンテンツ] セクションにフィール ドを挿入します。 上記のステップ 1 ～ 3 を繰り返 して、他のフィールドを挿入し ます。フィールド名の 1 つに 「件名」を指定する必要があり ます。これは、設定した Web サ イト管理者宛ての電子メールの 件名として使用します。[送信] ボタンの挿入
フォーム罫線内で、[送信] ボタ ンを配置したい位置にカーソル を置きます。
コンテンツ エディタ ツールバー の [フォームの挿入] ボタン上に マウスを置いて、送信ボタンの 挿入をクリックします。 ポップアップ画面が表示されま す。
「Send」と入力します。
[OK] ボタンをクリックして [送 信] ボタンを挿入します。
ランディング ページの指定
フォーム罫線内の任意の場所に カーソルを置きます。
[フォームの挿入] ボタン上にマ ウスを置いて、Hidden フィール ドの挿入をクリックします。 ポップアップ画面が表示されま す。
[名前] フィールドに「redirect」 と入力します。
[値] フィールドに 「/page.jsp?id=xxx」（もしくは /page.aspx?id=xxx）と入力しま す。ただし、「xxx」は Web サイ トの訪問者がフォーム内の [送 信] ボタンをクリックした時に、 訪問者をリダイレクトする先の ページ id に差し替えます。
[OK] ボタンをクリックして、非 表示の入力フィールド ボタンを 挿入します
[保存して閉じる] をクリックし ます。 これで、Contact Us ページがここ に示すようなものになります。 Web サイトの訪問者がフォーム に入力し、[送信(Send)] ボタンを クリックすると、フォームに入 力された詳細情報を通知する E メールが、コンタクト E メール を受け取るように設定されてい
9
制限エリア
Web サイト上に、登録済みの Web サイト訪問者のみがアクセスできる領域を作成できます。こ うしたアクセス制限は、Web ページ単位、ページ タイプ単位またはページ グループ単位に設定 できます。ページ単位にアクセス制限を設定する方法と、Web サイト訪問者を登録する方法を 以下に示します。ページ タイプやページ グループ単位にアクセス制限を設定する方法の詳細に ついては、『HeartCore Web コンテンツ管理システムユーザーガイド』の(ユーザー アクセス制 限) セクションを参照してください。Web ページへのアクセス制
限
アクセス制限が必要な各ページ について、以下のステップ 1 ～ 4 の作業を行います。
上記の「Web ページ」セクショ ンで説明したように、該当する Web ページを作成するか、開き ます (このスクリーンショットに は表示されていません)。
[アクセス制限] タブをクリック します。
[閲覧] リストから [–制限-] を選 択します。 .
[保存して閉じる] をクリックし ます。ユーザーの登録
[ユーザーデータベース] を選択 します。
[ユーザ] をクリックします。
[追加] ボタンをクリックしま す。
[ユーザ名] フィールドにユーザ ー名 (「member」など) を入力し ます。
[パスワード] フィールドにパス ワード (「member」など) を入力 します。
[保存] ボタンをクリックしま す。 Web サイトの訪問者がアクセス 制限のかかったページにアクセ スすると、ログインするよう求 められます。正しいユーザー名 とパスワードを入力して [Login] ボタンをクリックすると、アク セス制限のかかったページが表 示されます。
10 検索
Web サイトに検索フィールドを追加して、訪問者が任意のキー フレーズを含むコンテンツを検 索できるようにすることができます。検索フィールドは、ページやテンプレートに加え、ツー ルバーやメニューといった要素に挿入できます。この例では、ツールバーに検索フィールドを 挿入する方法を説明します。検索フィールドを挿入するには、フォーム コンテナ、検索フィー ルドそのもの、そして検索ボタンを挿入する必要があります。検索機能を正しく機能させるに は、これら 3 つのすべてが挿入されている必要があります。ツールバーのオープン処理
[Web サイトコンテンツ] を選択 します。
[クラス] メニュー項目の左にあ る [+] アイコンをクリックして展 開し、サブメニューの [toolbar] を選択します。
ツールバー要素の Toolbar Hotel element のタイトルをクリック します。フォーム コンテナの挿入
Web コンテンツ エディタの入力 フィールド内にカーソルを置き ます。
[フォームの挿入] ボタン上にマ ウスを置いて、フォームの挿入 をクリックします。 ポップアップ画面が表示されま す。
[メソッド] リストから [GET] を 選択します。
[アクション URL] フィールドに 「/search.jsp」と（もしくは /search.aspx）と入力します。
[OK] ボタンをクリックします。
[詳細を表示] ボタンをクリック して、今、挿入したフォーム コ ンテナのフォーム罫線を表示し ます。
ここで、フォーム コンテナ内に 表、テキスト、画像などのオブ ジェクトを追加することもでき ます。
検索フィールドの挿入
検索フィールドを配置したい位 置にカーソルを置きます。
コンテンツ エディタのツールバ ーの[フォームの挿入] ボタン上 にマウスを置いて、テキスト入 力の挿入をクリックします。 ポップアップ画面が表示されま す。
[名前] フィールドに「search」と 入力します。
[OK] ボタンをクリックします[検索] ボタンの挿入
[検索] ボタンを配置したい位置 にカーソルを置きます。
コンテンツ エディタのツールバ ーの[フォームの挿入] ボタン上 にマウスを置いて、[送信ボタン の挿入] をクリックします。 ポップアップ画面が表示されま す。
Web サイトがこのようになりま す。 検索ボックスに検索語 (「location」など) を入力して、 [Search] ボタンをクリックしま す。 「location」という言語を含むす べてのページがページ上に表示 されます。 訪問者が検索結果のリンクをク リックすると、該当するページ にリダイレクトされます。
11 キャンペーン情報、バナー、ニュース
HeartCore Web コンテンツ管理システム を使用すると、キャンペーン情報、バナー、ニュース を Web サイトに追加できます。これを行うには、バナー、キャンペーン情報、ニュースを構成 要素として作成して、テンプレートに挿入します。キャンペーン情報の構成要素を作成してテ ンプレートに挿入する方法を以下に示します。バナーやニュースを Web サイトに追加する方法 も同様です。キャンペーン情報要素の作成
ツールバーから [Web サイトコン テンツ] を選択します。
[クラス] メニュー項目の左にあ る [+] アイコンをクリックして展 開し、サブメニューの [offer] を 選択します。
[追加] ボタンをクリックしま す。
キャンペーン名を [タイトル] に 入力します。
キャンペーン情報のコンテンツ を [コンテンツ] フィールドに追 加します。コンテンツは画像や テキストでもかまいません。
[保存して閉じる] をクリックし ます。 ステップ 3 ～ 6 を繰り返して、 他のキャンペーン情報を作成し ます。
Web コンテンツ エディタのメ
キャンペーン情報のテンプレ
ートへのアサイン
ツールバーから [Web サイトコン テンツ] を選択します。
メニューから [テンプレート] を 選択します。
これまでのステップで作成した テンプレートを見つけて、その タイトル をクリックします。 更新 画面が表示されます。
キャンペーン情報を表示したい 位置に @@@offer.content@@@ というコードを追加します。
[追加コンテンツ] タブをクリッ クします。 [追加コンテンツ] タブが表示さ れます。
[offer] リストから、これまでのス テップで作成したキャンペーン 情報の構成要素を選択するか、[– ランダム-] を選択します。[–ラン ダム-] を選択した場合、テンプ レートを表示するたびにキャン ペーン情報要素がランダムに 1 つ表示されます。
[保存して閉じる] ボタンをクリ ックします。
キャンペーン情報、バナー、ニ ュースの各構成要素をすべてテ ンプレートに挿入すると、Web サイトはこのようになります
12 スタイルシート
CSS (カスケーディング スタイル シート) を使用すると、配色、フォント、レイアウトといった Web ページの見栄えを左右する特徴を定義できます。配色、フォント、レイアウトは Web ペー ジ上で定義できるため、スタイル シートは Web サイトの構築に必須ではありません。しかし、 スタイル シートを使用すると、選択肢が広がり、Web サイト上の書式を一括管理できます。 HeartCore Web コンテンツ管理システム でスタイル シートを作成して、Web サイト上のすべて の Web ページに適用するように設定できます。これを行う方法を以下に示します。
