eyemovic inc.

Works blog仕事の取り組み・ビジョン

2015.03.31

WebRelease2 サイト構築その①

 

以前スタッフブログの方でWebRelease2(ウェブリリースツー)の簡単なご紹介を行いましたが、
今回は実際に管理画面をお見せしながらどのようなCMSかをご紹介できればと思います。

 

テンプレート作成

WebRelease2ではページを作成するために、あらかじめ元となるテンプレートを作成する必要があります。
ニュースや製品情報など、パターンごとにテンプレートを用意することで、
だれでも統一性をもたせたページを、効率的に量産することができます。

それではテンプレートを作成してみましょう。

 

wr_img01

①テンプレートの情報を設定します。
サフィックスを編集することで、HTMLページのテンプレートだけでなく、
CSS、PHP、XMLなどのテンプレートを作成することも可能です。

 

wr_img02

②ページ作成時の管理画面に表示する要素を作成します。
要素とは他のCMSでいうところのカスタムフィールドのようなもので、
ページの管理画面はページタイトルやファイル名以外はこの要素によって構成されます。

今回は見出し、テキスト、筆者の要素を作成してみました。
この要素は、右上の「追加」ボタンから任意で増やすことができ、
要素のタイプとして、セレクトボックスやラジオボタン、
画像やWYSIWYGエディタなど多種多様な項目を作成でき、
さらにそれらをグループ化してループ項目に設定することもできます。

 

wr_img06

③展開はページ生成用のマークアップを記述するエリアです。
先ほど作成した要素名を%%で囲むことで、ページ作成時に入力したデータを表示することができます。
このエリアは自由に記述できるため、
①で説明したようにJavaScriptやPHPなどさまざまなテンプレートを構築することが可能です。

また、展開には独自の拡張タグも用意されています。
例えば条件分岐のif文は<wr-if>、ループ用のfor文は<wr-for>などです。
種類はあまり多くないのですぐに覚えることができます。

 

ページ作成

それでは上記で作成したテンプレートを使用してページを作成してみます。

 

wr_img04

先ほど作成したテンプレートの要素がここに表示されます。
簡単に入力してみました。
それではプレビューしてみましょう。

 

wr_img05

と、このようになります。

 

まとめ

テンプレートさえ作りこんでおけば、
HTMLに詳しくないお客様でも簡単にページを量産できます。

wr_img07

ページの管理もツリー形式でわかりやすくなっているので、
操作するエンドユーザーにやさしいCMSといえるのではないでしょうか?

とりあえず今回は簡単な構築手順をご紹介しました。
次回はテンプレートの展開での条件分岐や、ループなどの記述方を詳しくご紹介できればと思います。
ではでは。

 

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。