1 目 次 1 目 次 2 2 はじめに 3 3 ログイン 4 4 WEB ページ 5 5 ホームページ 6 6 テンプレート 7 7 ナビゲーション 9 8 コンタクトフォーム 12 9 制 限 エリア 15 10 検 索 17 11 キャンペーン 情 報 バナー ニュース 20 12 スタイルシ

XyXon, Inc XyXon, Inc wwwxyxoncojp support@xyxoncojp HeartCore Web コンテンツ 管 理 システム 簡 易 スタートガイド 簡 単 安 価 に Webサイトを 作 成 公 開 管 理 2013 年 5 月 Version821

1 目 次 1 目 次 2 2 はじめに 3 3 ログイン 4 4 WEB ページ 5 5 ホームページ 6 6 テンプレート 7 7 ナビゲーション 9 8 コンタクトフォーム 12 9 制 限 エリア 15 10 検 索 17 11 キャンペーン 情 報 バナー ニュース 20 12 スタイルシート 23 Page 2 of 24

HeartCore Webコンテンツ 管 理 システム 簡 単 安 価 に Web サイトを 作 成 公 開 管 理 2 はじめに HeartCore Web コンテンツ 管 理 システム は インターネット イントラネット エクストラネッ ト 上 に 構 築 した Web 上 のコンテンツへのアクセスを 容 易 にすることで コンテンツの 制 作 と 更 新 を 支 援 する Web ソリューションで 本 書 では わかりやすい 手 順 を 通 じて HeartCore Web コンテンツ 管 理 システム の 使 い 方 を 説 明 しま 下 図 のような Web サイトを 制 作 する 一 連 の 作 業 を 行 いまこの Web サイトでは メニュー コンタクトフォーム アクセス 制 限 ページ 検 索 バナー キャンペーン 情 報 といった 汎 用 的 な 機 能 を 使 用 しま 弊 社 のオンライン トライアル 版 を 試 用 中 の 場 合 は 次 の ログイン セクションに 進 んで Web サイトの 制 作 を 開 始 してください システムをサーバーにインストール 済 みの 場 合 は インストール 作 業 と 設 定 を 正 しく 行 ってい ることをご 確 認 ください 作 業 を 開 始 する 前 に トライアル 版 のデータベースまたは ベーシ ック データベースをインポート 済 みであることも 確 認 してください システムにログインし た 時 に クイックスタートの 設 定 ページが 表 示 される 場 合 は システムの 設 定 が 完 了 してい ません HeartCore Web コンテンツ 管 理 システム インストールガイド の クイックスタート 設 定 セクションを 参 照 して 指 示 に 従 ってください Page 3 of 24

3 ログイン Web サイトの 制 作 と 更 新 を 行 うには HeartCore Web コンテンツ 管 理 システム の 管 理 ページに ログインする 必 要 がありまログイン 手 順 を 以 下 に 示 しま ログイン Web サイトのアドレスに 続 けて /webadmin/ を Web ブラウザ のアドレス フィールドに 入 力 し またとえば 以 下 のように なりま https://wwwmysitecom/webadmin/ ユーザー 名 とパスワードを 入 力 しま 既 定 のユーザー 名 とパ スワードは 以 下 のとおりで ユーザー 名 : admin パスワード: admin ログインボタンをクリックしま ログインに 成 功 すると HeartCore Web コンテンツ 管 理 シ ステム のトップ ページが 表 示 さ れま 表 示 されるメニュー は お 使 いのエディションと 利 用 可 能 なアドオン モジュールに よって 異 なりま ログインできない 場 合 は ユ ーザー 名 とパスワードの 大 文 字 と 小 文 字 の 区 別 に 間 違 いがない こと 前 後 に 空 白 が 付 いていな いことを 確 認 してください Page 4 of 24

4 Web ページ このセクションでは Web ページを 作 成 して 更 新 する 方 法 を 説 明 しまサンプル Web サイト 上 の 部 屋 施 設 料 金 キャンペーン 情 報 ロケーション メンバー ニュース といったペー ジは いずれもこの 方 法 で 作 成 できま 連 絡 フォーム や 予 約 といった 特 殊 なページの 作 成 方 法 は 後 続 のセクションで 説 明 しま Web ページの 作 成 と 更 新 ツールバーから [Web サイトコン テンツ] を 選 択 します [ページ] を 選 択 しま Web ページを 新 規 作 成 するに は [ 追 加 ] ボタンをクリックし ままたは 既 存 の Web ペー ジを 更 新 するには ページのタ イトルをクリックしま 新 しい 画 面 が 表 示 されま 既 存 の Web ページのコンテンツ は すべて [コンテンツ] フィー ルドに 表 示 されます [タイトル] フィールドに Web ペ ージのタイトルを 入 力 するか 表 示 されたタイトルを 更 新 しま Web ページのコンテンツを [コン テンツ] フィールドに 追 加 する か 表 示 されたものを 変 更 しま す [ 保 存 して 閉 じる] ボタンをクリ ックしま 一 覧 画 面 に 戻 りまWeb ペー ジを 新 規 作 成 した 場 合 は ペー ジ リストに 追 加 されま [コンテンツ] フィールドにコ ンテンツを 追 加 したり コンテ ンツを 変 更 する 方 法 の 詳 細 は HeartCore Web コンテンツ 管 理 システム ウェブサイト 作 成 者 ガ イド の(コンテンツ エディ タ) セクションを 参 照 してくだ さい Page 5 of 24

5 ホームページ ホームページを 設 定 するには 上 のセクションの 説 明 に 従 って Web ページを 作 成 し その Web ページをホームページに 設 定 する 必 要 がありまそうすると Web サイトの 訪 問 者 が Web サ イトの URL (http://wwwmysitecom など) にアクセスした 時 にホームページが 表 示 されま ホームページの 設 定 ツールバーから [ 設 定 ] を 選 択 し ま 設 定 画 面 が 表 示 されま [システム] メニュー 項 目 の 左 に ある [+] アイコンをクリックして 展 開 し サブメニューの [ウェブ サイト] を 選 択 しま [ 特 殊 ページ] タブを 選 択 しま 既 定 のページ (ホームページ) の [ 選 択 ] をクリックしま ポップアップが 表 示 されま [ページ] をクリックしま ホームページに 設 定 したいペー ジを 選 択 しま [OK] をクリックします [ 保 存 ] をクリックしま 訪 問 者 が Web サイトの URL (http://wwwmysitecom など) にア クセスすると 設 定 したホーム ページが 表 示 されま Page 6 of 24

6 テンプレート Web サイト 上 の 全 ページのレイアウトを 統 一 するには テンプレートを 作 成 する 必 要 がありまテンプレ ートには フッターやロゴ 付 きのヘッダーに 加 え その 他 の 構 成 要 素 やデザインを 含 めることができま ヘッダーとフッター 付 きの 単 純 なテンプレートの 作 成 方 法 を 以 下 に 示 しままた テンプレートを Web サイト 全 体 に 適 用 するように 設 定 する 方 法 も 説 明 しまこのテンプレートは 後 ほど 拡 張 してメニューな どの 要 素 を 追 加 しま テンプレートの 作 成 ツールバーから [Web サイトコン テンツ] を 選 択 します 左 側 のメニューから [テンプレー ト] を 選 択 しま [ 追 加 ] ボタンをクリックしま テンプレートを 追 加 する 空 白 の 追 加 画 面 が 表 示 されま テンプレート 名 を [タイトル] に 入 力 しま テンプレートに 盛 り 込 みたいヘ ッダーやフッターなどのデザイ ンを この 大 きな 入 力 エリアへ 追 加 しま ページのコンテンツを 表 示 した い 位 置 に @@@content@@@ というコードを 入 力 しま [ 保 存 して 閉 じる] をクリックし ま Page 7 of 24 テンプレートは 罫 線 のない 表 形 式 で 構 成 されていることが よくありまエディタの [ 詳 細 を 表 示 ] ボタンをクリックして 表 の 罫 線 を 表 示 してください

テンプレートの 適 用 ツールバーから [ 設 定 ] を 選 択 し ま [システム] メニュー 項 目 の 左 に ある [+] アイコンをクリックして 展 開 し サブメニューの [ウェブ サイト] を 選 択 しま これまでのステップで 作 成 した テンプレートを 選 択 します [ 保 存 ] をクリックしま 訪 問 者 が Web サイトの URL (http://wwwmysitecom など) にア クセスすると 設 定 したホーム ページが 設 定 したテンプレート 内 に 表 示 されま Page 8 of 24

7 ナビゲーション Web サイトにメニューやツールバーを 追 加 するには Web ページにリンクするメニューやツー ルバーの 要 素 を 作 成 して そのメニューやツールバーをテンプレートに 挿 入 しまメニュー を 作 成 する 例 を 以 下 に 示 しまツールバーの 作 成 方 法 も 同 様 で メニュー 要 素 の 作 成 ツールバーから [Web サイトコン テンツ] を 選 択 しま [クラス] メニュー 項 目 の 左 にあ る [+] アイコンをクリックして 展 開 し サブメニューの [menu] を 選 択 しま [ 追 加 ] ボタンをクリックしま 要 素 を 追 加 する 空 白 の 追 加 画 面 が 表 示 されま メニュー 名 を [タイトル] に 入 力 しま [コンテンツ] フィールド 内 でメ ニューを 作 成 しま 各 メニュ ー 項 目 を 1 つずつ 順 番 に 選 択 し 以 下 のステップ 6 ~ 9 の 作 業 を 行 って Web ページにハイパ ーリンクを 挿 入 します エディタ ツールバーの [ハイパー リンクを 挿 入 ] ボタンをクリック しま ポップアップ 画 面 が 表 示 されま [ページ] を 選 択 しま リンクしたい Web ページを 選 択 しま [OK] をクリックしま [ 保 存 して 閉 じる] ボタンをクリ Page 9 of 24

ックしま 新 しいページは Web コンテ ンツ エディタのハイパーリンク マネージャを 使 用 して 作 成 でき ま テンプレートへのメニュー のアサイン ツールバーから [Web サイトコ ンテンツ] を 選 択 しま メニューから [テンプレート] を 選 択 しま これまでのステップで 作 成 した テンプレートを 見 つけて その テンプレートのタイトルをクリ ックしま 更 新 画 面 が 表 示 されま メニューを 表 示 したい 位 置 に @@@menucontent@@@ というコードを 入 力 しま [ 追 加 コンテンツ] タブをクリッ クします Page 10 of 24

[ 追 加 コンテンツ] タブが 表 示 さ れま [ 追 加 ] ボタンをクリックしてメ ニューを 表 示 しま [menu] をクリックしま [menu] リストから これまでの ステップで 作 成 したメニュー 要 素 を 選 択 しま [OK] をクリックしま 保 存 して 閉 じる] ボタンをクリッ クしま 上 記 のステップを 繰 り 返 して ツールバー メニューを 作 成 しま 完 成 した Web サイトは このよ うになりま Page 11 of 24

8 コンタクトフォーム コンタクトフォームを 設 置 することにより Web サイトの 訪 問 者 は あらかじめ 設 定 した 管 理 者 の 電 子 メール アドレス 宛 てに Web サイトを 通 じて 電 子 メールを 送 信 できるようになりま コンタクトフォームを 作 成 するには 通 常 の Web ページに 特 殊 なフォーム 要 素 を 追 加 する 必 要 がありまフォームを 正 しく 機 能 させるために 挿 入 する 必 要 がある 要 素 には コンタクトフ ォームに 関 する 一 般 情 報 を 収 めたフォーム コンテナ フォーム コンテナ 内 のフォーム フィール ド フォーム コンテナ 内 に 設 置 する [ 送 信 ] ボタン ユーザーが [ 送 信 ] ボタンをクリックした 時 に 表 示 するランディング ページを 指 定 するためにコンタクトフォーム 内 に 設 置 する 特 殊 な 非 表 示 フィールドなどがありまコンタクトフォームの 詳 細 な 作 成 方 法 を 以 下 に 示 しま 予 約 フォームの 作 成 方 法 も 同 様 で フォーム コンテナの 挿 入 上 記 の Web ページ セクショ ンで 説 明 したように Web ペー ジを 作 成 するか 開 きます (この スクリーンショットには 表 示 さ れていません) [コンテンツ] フィールド 内 で フォーム コンテナを 配 置 したい 位 置 にカーソルを 置 きま [フォームを 挿 入 ] ボタン 上 にマ ウスを 置 いて ドロップダウン リストよりフォームの 挿 入 を 選 択 しま ポップアップ 画 面 が 表 示 されま [メソッド] ドロップダウン リス トから [POST] を 選 択 しま [アクション URL] フィールドに /contactjsp と 入 力 しま (もしくは /contactaspx) [OK] をクリックしま [ 詳 細 を 表 示 ] ボタンをクリック して フォーム コンテナを 示 す 赤 い 破 線 を 表 示 しま ここで フォーム コンテナ 内 に 表 テキスト 画 像 などのオブ ジェクトを 追 加 することもでき ま Page 12 of 24

フォーム フィールドの 挿 入 フォーム 罫 線 内 で フォーム フ ィールドを 配 置 したい 位 置 にカ ーソルを 置 きま [フォームの 挿 入 ] ボタン 上 にマ ウスを 置 いて ドロップダウン リストよりテキスト 入 力 の 挿 入 を 選 択 しま ポップアップ 画 面 が 表 示 されま [ 名 前 ] フィールドに name と 入 力 して Web サイトの 訪 問 者 が 自 分 の 名 前 を 入 力 できるフィ ールドを 作 成 しま [OK] ボタンをクリックして [コ ンテンツ] セクションにフィール ドを 挿 入 しま 上 記 のステップ 1 ~ 3 を 繰 り 返 して 他 のフィールドを 挿 入 し まフィールド 名 の 1 つに 件 名 を 指 定 する 必 要 があり まこれは 設 定 した Web サ イト 管 理 者 宛 ての 電 子 メールの 件 名 として 使 用 しま [ 送 信 ] ボタンの 挿 入 フォーム 罫 線 内 で [ 送 信 ] ボタ ンを 配 置 したい 位 置 にカーソル を 置 きま コンテンツ エディタ ツールバー の [フォームの 挿 入 ] ボタン 上 に マウスを 置 いて 送 信 ボタンの 挿 入 をクリックしま ポップアップ 画 面 が 表 示 されま Send と 入 力 しま [OK] ボタンをクリックして [ 送 信 ] ボタンを 挿 入 しま Page 13 of 24

ランディング ページの 指 定 フォーム 罫 線 内 の 任 意 の 場 所 に カーソルを 置 きま [フォームの 挿 入 ] ボタン 上 にマ ウスを 置 いて Hidden フィール ドの 挿 入 をクリックしま ポップアップ 画 面 が 表 示 されま [ 名 前 ] フィールドに redirect と 入 力 しま [ 値 ] フィールドに /pagejsp?id=xxx (もしくは /pageaspx?id=xxx)と 入 力 しま ただし xxx は Web サイ トの 訪 問 者 がフォーム 内 の [ 送 信 ] ボタンをクリックした 時 に 訪 問 者 をリダイレクトする 先 の ページ id に 差 し 替 えま [OK] ボタンをクリックして 非 表 示 の 入 力 フィールド ボタンを 挿 入 します [ 保 存 して 閉 じる] をクリックし ま これで Contact Us ページがここ に 示 すようなものになりま Web サイトの 訪 問 者 がフォーム に 入 力 し [ 送 信 (Send)] ボタンを クリックすると フォームに 入 力 された 詳 細 情 報 を 通 知 する E メールが コンタクト E メール を 受 け 取 るように 設 定 されてい る 管 理 者 に 届 きま Page 14 of 24

9 制 限 エリア Web サイト 上 に 登 録 済 みの Web サイト 訪 問 者 のみがアクセスできる 領 域 を 作 成 できまこ うしたアクセス 制 限 は Web ページ 単 位 ページ タイプ 単 位 またはページ グループ 単 位 に 設 定 できまページ 単 位 にアクセス 制 限 を 設 定 する 方 法 と Web サイト 訪 問 者 を 登 録 する 方 法 を 以 下 に 示 しまページ タイプやページ グループ 単 位 にアクセス 制 限 を 設 定 する 方 法 の 詳 細 に ついては HeartCore Web コンテンツ 管 理 システムユーザーガイド の(ユーザー アクセス 制 限 ) セクションを 参 照 してください Web ページへのアクセス 制 限 アクセス 制 限 が 必 要 な 各 ページ について 以 下 のステップ 1 ~ 4 の 作 業 を 行 いま 上 記 の Web ページ セクショ ンで 説 明 したように 該 当 する Web ページを 作 成 するか 開 き ます (このスクリーンショットに は 表 示 されていません) [アクセス 制 限 ] タブをクリック しま [ 閲 覧 ] リストから [ 制 限 -] を 選 択 しま [ 保 存 して 閉 じる] をクリックし ま ユーザーの 登 録 [ユーザーデータベース] を 選 択 しま [ユーザ] をクリックしま [ 追 加 ] ボタンをクリックしま Page 15 of 24

[ユーザ 名 ] フィールドにユーザ ー 名 ( member など) を 入 力 し ま [パスワード] フィールドにパス ワード ( member など) を 入 力 しま [ 保 存 ] ボタンをクリックしま Web サイトの 訪 問 者 がアクセス 制 限 のかかったページにアクセ スすると ログインするよう 求 められま 正 しいユーザー 名 とパスワードを 入 力 して [Login] ボタンをクリックすると アク セス 制 限 のかかったページが 表 示 されま Page 16 of 24

10 検 索 Web サイトに 検 索 フィールドを 追 加 して 訪 問 者 が 任 意 のキー フレーズを 含 むコンテンツを 検 索 できるようにすることができま 検 索 フィールドは ページやテンプレートに 加 え ツー ルバーやメニューといった 要 素 に 挿 入 できまこの 例 では ツールバーに 検 索 フィールドを 挿 入 する 方 法 を 説 明 しま 検 索 フィールドを 挿 入 するには フォーム コンテナ 検 索 フィー ルドそのもの そして 検 索 ボタンを 挿 入 する 必 要 がありま 検 索 機 能 を 正 しく 機 能 させるに は これら 3 つのすべてが 挿 入 されている 必 要 がありま ツールバーのオープン 処 理 [Web サイトコンテンツ] を 選 択 しま [クラス] メニュー 項 目 の 左 にあ る [+] アイコンをクリックして 展 開 し サブメニューの [toolbar] を 選 択 しま ツールバー 要 素 の Toolbar Hotel element のタイトルをクリック しま フォーム コンテナの 挿 入 Web コンテンツ エディタの 入 力 フィールド 内 にカーソルを 置 き ま [フォームの 挿 入 ] ボタン 上 にマ ウスを 置 いて フォームの 挿 入 をクリックしま ポップアップ 画 面 が 表 示 されま [メソッド] リストから [GET] を 選 択 しま [アクション URL] フィールドに /searchjsp と(もしくは /searchaspx)と 入 力 しま [OK] ボタンをクリックしま [ 詳 細 を 表 示 ] ボタンをクリック して 今 挿 入 したフォーム コ ンテナのフォーム 罫 線 を 表 示 し ま Page 17 of 24

ここで フォーム コンテナ 内 に 表 テキスト 画 像 などのオブ ジェクトを 追 加 することもでき ま 検 索 フィールドの 挿 入 検 索 フィールドを 配 置 したい 位 置 にカーソルを 置 きま コンテンツ エディタのツールバ ーの[フォームの 挿 入 ] ボタン 上 にマウスを 置 いて テキスト 入 力 の 挿 入 をクリックしま ポップアップ 画 面 が 表 示 されま [ 名 前 ] フィールドに search と 入 力 しま [OK] ボタンをクリックします [ 検 索 ] ボタンの 挿 入 [ 検 索 ] ボタンを 配 置 したい 位 置 にカーソルを 置 きま コンテンツ エディタのツールバ ーの[フォームの 挿 入 ] ボタン 上 にマウスを 置 いて [ 送 信 ボタン の 挿 入 ] をクリックしま ポップアップ 画 面 が 表 示 されま ボタンに 表 示 したいテキスト ( Search など) を [ 値 ] フィー ルドに 入 力 しま OK] をクリックしま [ 保 存 して 閉 じる] をクリックし ま Page 18 of 24

Web サイトがこのようになりま 検 索 ボックスに 検 索 語 ( location など) を 入 力 して [Search] ボタンをクリックしま location という 言 語 を 含 むす べてのページがページ 上 に 表 示 されま 訪 問 者 が 検 索 結 果 のリンクをク リックすると 該 当 するページ にリダイレクトされま Page 19 of 24

11 キャンペーン 情 報 バナー ニュース HeartCore Web コンテンツ 管 理 システム を 使 用 すると キャンペーン 情 報 バナー ニュース を Web サイトに 追 加 できまこれを 行 うには バナー キャンペーン 情 報 ニュースを 構 成 要 素 として 作 成 して テンプレートに 挿 入 しまキャンペーン 情 報 の 構 成 要 素 を 作 成 してテ ンプレートに 挿 入 する 方 法 を 以 下 に 示 しまバナーやニュースを Web サイトに 追 加 する 方 法 も 同 様 で キャンペーン 情 報 要 素 の 作 成 ツールバーから [Web サイトコン テンツ] を 選 択 しま [クラス] メニュー 項 目 の 左 にあ る [+] アイコンをクリックして 展 開 し サブメニューの [offer] を 選 択 しま [ 追 加 ] ボタンをクリックしま キャンペーン 名 を [タイトル] に 入 力 しま キャンペーン 情 報 のコンテンツ を [コンテンツ] フィールドに 追 加 しまコンテンツは 画 像 や テキストでもかまいません [ 保 存 して 閉 じる] をクリックし ま ステップ 3 ~ 6 を 繰 り 返 して 他 のキャンペーン 情 報 を 作 成 し ま Web コンテンツ エディタのメ ディア マネージャを 使 用 する と 画 像 を 追 加 できま 詳 細 は HeartCore Web コンテンツ 管 理 システム ウェブサイト 作 成 者 ガイド を 参 照 してくださ い Page 20 of 24

キャンペーン 情 報 のテンプレ ートへのアサイン ツールバーから [Web サイトコン テンツ] を 選 択 しま メニューから [テンプレート] を 選 択 しま これまでのステップで 作 成 した テンプレートを 見 つけて その タイトル をクリックしま 更 新 画 面 が 表 示 されま キャンペーン 情 報 を 表 示 したい 位 置 に @@@offercontent@@@ というコードを 追 加 しま [ 追 加 コンテンツ] タブをクリッ クしま [ 追 加 コンテンツ] タブが 表 示 さ れま [offer] リストから これまでのス テップで 作 成 したキャンペーン 情 報 の 構 成 要 素 を 選 択 するか [ ランダム-] を 選 択 しま[ ラン ダム-] を 選 択 した 場 合 テンプ レートを 表 示 するたびにキャン ペーン 情 報 要 素 がランダムに 1 つ 表 示 されま [ 保 存 して 閉 じる] ボタンをクリ ックしま Page 21 of 24

キャンペーン 情 報 バナー ニ ュースの 各 構 成 要 素 をすべてテ ンプレートに 挿 入 すると Web サイトはこのようになります Page 22 of 24

12 スタイルシート CSS (カスケーディング スタイル シート) を 使 用 すると 配 色 フォント レイアウトといった Web ページの 見 栄 えを 左 右 する 特 徴 を 定 義 できま 配 色 フォント レイアウトは Web ペー ジ 上 で 定 義 できるため スタイル シートは Web サイトの 構 築 に 必 須 ではありません しかし スタイル シートを 使 用 すると 選 択 肢 が 広 がり Web サイト 上 の 書 式 を 一 括 管 理 できま HeartCore Web コンテンツ 管 理 システム でスタイル シートを 作 成 して Web サイト 上 のすべて の Web ページに 適 用 するように 設 定 できまこれを 行 う 方 法 を 以 下 に 示 しま スタイル シートの 作 成 ツールバーから [Web サイトコ ンテンツ] を 選 択 しま [スタイルシート] を 選 択 しま [ 追 加 ] ボタンをクリックしま スタイル シート 名 を [タイトル] に 入 力 しま スタイル シートのコンテンツを [コンテンツ] フィールドに 追 加 しま [ 保 存 して 閉 じる] をクリックし ま Page 23 of 24

スタイル シートの 適 用 ツールバーから [ 設 定 ] を 選 択 し ま [システム] メニュー 項 目 の 左 に ある [+] アイコンをクリックし て 展 開 し サブメニューの [Web サイト] を 選 択 しま [デフォルトスタイルシート (テ キスト)] リストから これまで のステップで 作 成 したスタイル シートを 選 択 しま [ 保 存 ] をクリックしま スタイル シートを 作 成 すると Web サイトはこのようになりま フォントや 行 の 高 さなどレ イアウトが 変 化 していま Page 24 of 24