PowerCMS™
2025年1月1日購入分よりライセンスの価格を改定いたします。
[ブログ] PowerCMS 6 でのアップデートまとめ を追加しました。
[よくあるご質問] システムログに「タスクを実行するために必要なロックを獲得できませんでした」というログが残っている を追加しました。
[よくあるご質問] 特定のシステムログに絞って確認できますか？ を追加しました。

PowerCMS ブログ

ホーム > PowerCMS ブログ > 設定・管理画面カスタマイズ > PowerCMSの会員サイトに一般公開ページを設ける

2017年11月28日

PowerCMSの会員サイトに一般公開ページを設ける

PowerCMSには会員サイト機能がありますが、ユーザーガイドの手順で会員サイトを構築すると、対象のウェブサイト（ブログ）配下のページは全て会員限定ページとなり、ログインしないと内容を見られません。

ただ一般的に見る会員機能付きサイトのページには、例えばYahoo!などのポータルサイトのトップページの様に、一般公開ではあるものの、ログインすると一部表示が変化するものがあります。

例:Yahoo!のトップページ）

ログイン前:
members_customize__yahoo01.png

ログイン後:
members_customize__yahoo02.png

そこで今回はこのようなページが案件の要件として出た場合に、PowerCMSの会員サイト機能でどのように実現するかについて、以降に簡単ではありますが実装例を紹介します。

実装例（サンプルテーマ）

前提

今回は、次の前提で構築を行います。
※今回はPowerCMSのウェブサイトを利用していますが、ブログの場合も前提や構築手順は同様です。

  • PowerCMSのウェブサイトをベースに作成。
  • テーマは「PowerCMS Eiger」を利用。
  • 一般公開ページとする対象は、次の通り。
    • インデックスページ
    • ウェブページ
  • ウェブページは、編集画面からカスタムフィールドによる値指定で、会員限定/一般公開 のいずれのページにするか選択可能にする。
  • 一般公開ページのヘッダー部分の会員向けUIでは、未ログイン/ログイン済み で表示を次の様に変化させる。
    • 未ログイン時 → リンク「新規会員登録」「サインイン」.
    • ログイン済み → 「ようこそ○○さん」（プロフィール編集画面へのリンク）、リンク「サインアウト」.
  • 一般公開ページよりログイン/ログアウトした場合は、その操作を行ったページを再度表示する。

サンプルテーマ

今回サンプルテーマを用意しました。※次のリンクよりダウンロード可能です。

中身を解凍するとフォルダ「power_mcs_eiger」が生成されますので、その内容を、適用対象のCMSの次のディレクトリに上書きする形でアップロードしてください。

  • [CMS本体ディレクトリ]/themes/power_cms_eiger

CMSのインストールウィザードおよびCMS管理画面上では、サンプルテーマ名は次の通りです。

  • PowerCMSブログ記事「PowerCMSの会員サイトに一般公開ページを設ける」サンプルテーマ

なお、利用にあたっては次に注意してください。

  • PowerCMS 4.33 にて動作確認しています。
  • PowerCMS プロフェッショナル版以上でないと動作しません。
  • Movable Typeのみでは動作しません。
  • 異なるバージョンのPowerCMSでは動作しない可能性あります。
  • PowerCMSデフォルトのテーマ「PowerCMS Eiger」の内容を上書きしますので、運用中のCMS環境には適用せず、検証用環境で使用して下さい。
サンプルテーマを試せる環境がお手元に無い方へ

アルファサードでは、お手元にPowerCMS環境を試せる環境が無い方向けに、お客様の環境でお試しいただく「評価版」と、弊社デモ環境でお試しいただく「デモ版」をご用意しております。

これらに本記事のサンプルテーマをインストールしてお使いいただく事も可能です。 詳しくは次の「お問い合わせ」よりご連絡ください。

お問い合わせ

サンプルテーマにおけるカスタマイズ内容の解説

ヘッダー部分の会員向けUI

前提として、テーマのデフォルトのCMSテンプレート構成では、ログインした際の会員向けUIの生成は、テンプレートモジュール「バナーフッター」が司っています（次の図中の赤枠部分）。

members_customize__banner_header.png

サンプルテーマではこれをベースとして、一般公開ページ向けにテンプレートモジュール「バナーヘッダー2」を新規に設けています。
変更点として、次のようにコードを置き換えています。

変更前:

  <$mt:Include module="メンバーブロック"$>

変更後:

<div class="login-block">
<MTBuildRecurs><$mt:ml tag="mt:SetVarBlock" params='name="return_url"'$><$mt:CanonicalURL current_mapping="1"$><$mt:ml tag="/mt:SetVarBlock"$><mt:RawMTML>
<$mt:BlogID setvar="blog_id"$>
<mt:Unless name="return_url"><mt:BlogURL setvar="return_url"></mt:Unless>
<$MTVar name="flag__login" value="0" $>
<mt:SetVarBlock name="member_script"><$mt:CGIPath$><$MTMembersScript$></mt:SetVarBlock>
<MTIfLogin>
<$MTVar name="flag__login" value="1" $>
ようこそ<a href="<$mt:Var name="member_script" trim="1" strip_linfeeds="1" escape="html"$>?__mode=edit_profile&amp;blog_id=<$mt:BlogID escape="html"$><mt:If name="return_url">&amp;return_url=<$mt:Var name="return_url" escape="url"$></mt:If>"><$mt:AuthorDisplayName escape="html"$></a>さん 
（<a href="<$mt:Var name="member_script" trim="1" strip_linfeeds="1" escape="html"$>?__mode=logout&amp;blog_id=<$mt:BlogID escape="html"$><mt:If name="return_url">&amp;return_url=<$mt:Var name="return_url" escape="url"$></mt:If>">サインアウト</a>）
</MTIfLogin>
<MTIf name="flag__login" ne="1">
<a href="<$MTVar name="member_script" $>?__mode=signup&amp;blog_id=<$MTVar name="blog_id" $>">新規会員登録</a> 
<a href="<$MTVar name="member_script" $>?__mode=&amp;blog_id=<$MTBlogID$>&amp;return_url=<$MTVar name="return_url" escape="url" $>">サインイン</a>
</MTIf>
</mt:RawMTML></MTBuildRecurs>
</div>

会員向けUI（div.login-blockの配下）以外は、「バナーフッター」と同一です。
未ログイン/ログイン済みで表示を動的に変化させる為、MTBuildRecursタグで囲ってDynamicMTMLとしています。
また、ログイン/ログアウトした際に、その操作を行ったページに戻る為、ログイン/ログアウトのリンク先URLでは、クエリとして「return_url」を付加していますが、指定する値（URL）をMTCanonicalURLタグで取得しています。

ウェブサイトのインデックスページの一般公開ページ化

インデックステンプレート「インデックスページ」に変更を加えています。

まず、コード全体を囲っているMTIncludeBlockタグ（次のコード）を取り払っています。

<mt:IncludeBlock module="サインインチェック" loginPanel="members_login">
～
</mt:IncludeBlock>

これにより、会員サイト機能による閲覧制限を取り払う事が出来ます。

次に、未ログイン/ログイン済みによる会員向けUIの表示変化に対応させる為、「バナーヘッダー」を参照しているMTInlcudeタグを先述の「バナーヘッダー2」に置き換えています。

...
  <body>
    <header role="banner">
      <$mt:Include module="バナーヘッダー2"$>
      <$mt:Include module="ナビゲーション"$>
    </header>
...

ウェブページを会員限定/一般公開か選択できるようにする実装

具体的には、ウェブページの編集画面にて、カスタムフィールド「ページの種類」の値を設定し保存・更新する事で、ウェブページより出力するページについて、一般公開とするか会員限定とするか指定できるように実装しています。

変更内容としては、アーカイブテンプレート「ウェブページ」に変更を加え、更にテーマにテンプレートモジュールとカスタムフィールドと1つづつ新規に設けています。

まずアーカイブテンプレート「ウェブページ」を次の内容に変更しています。

<MTIf tag="cf_page_mode" eq="一般公開ページ">
<$MTInclude module="ウェブページの内容"$>
<MTElse>
<mt:IncludeBlock module="サインインチェック" loginPanel="members_login">
<$MTInclude module="ウェブページの内容"$>
</mt:IncludeBlock>
</MTIf>

次に、カスタムフィールド「ページの種類」を、次の内容で設けています。

  • システムオブジェクト : ウェブページ
  • 名前 : ページの種類
  • 種類 : ドロップダウン
  • オプション : 会員向けページ,一般公開ページ
  • 必須？ : チェックする
  • ダイナミック : チェックする
  • ベースネーム : cf_page_mode
  • テンプレートタグ : cf_page_mode

次に、アーカイブテンプレート「ウェブページ」の内容をベースに、テンプレートモジュール「ウェブページの内容」を設けています。
変更点として、これも先述の「インデックスページ」のように、全体を囲うMTIncludeBlockタグを取り払った上、「バナーヘッダー」を参照しているMTInlcudeタグを「バナーヘッダー2」に置き換えています。

HTMLヘッダーの調整

一般公開ページの会員向けUIの表示が崩れないように、テンプレートモジュール「HTMLヘッダー」に少し変更を加えて、会員向けのCSSが未ログイン時にも適用されるように実装しています。

変更内容としては、「 <mt:If name="enable_members">～</mt:If>」の条件判断を取り除いただけです。

変更前:

<mt:If name="enable_members"><link rel="stylesheet" href="<$mt:Link template="members_css" encode_html="1"$>"></mt:If>

変更後:

<link rel="stylesheet" href="<$mt:Link template="members_css" encode_html="1"$>">

参考 - ウェブページへの実装後のイメージ

未ログイン/ログイン済でヘッダー部分の表示が変わっている事が確認できます（次の画像の赤枠部分）。

未ログイン:
members_customize__page_signout.png

ログイン済:
members_customize__page_signin.png

最後に

今回は、PowerCMSの機能によるフォーム（ContactFormによるフォーム、PowerSearchによる検索結果画面）ではない、通常のページのみ扱いました。
フォームに対応する実装は説明が長くなってしまうので今回は割愛しましたが、基本的には今回紹介した実装例のようなイメージになります（※ただPowerSearchの方はCMSプラグインを作る必要があるかも、、、）。

以上のように、PowerCMSは、CMSテンプレートのカスタマイズなどCMS管理画面上からのカスタマイズ次第で、様々な要望に対応できる"幅"がある事を知っていただければ幸いです。

カテゴリー
DynamicMTML
PowerCMS 4
技術情報
設定・管理画面カスタマイズ
投稿者
松本

Archives

Recent Entries

Categories

  • PowerCMS クラウド
  • PowerCMS 8341
  • PowerSync