カテゴリー別アーカイブ: 運用・操作方法

concrete5を使ったWebサイトの運用や操作方法に関する情報です。

テーマ作成時に基盤に使える5.7用bootstrapテーマを作りました

Share on Facebook
LINEで送る
Pocket

concrete5のadvent calendar 10日目を担当します。

昨日は弊社の田原くんが「concrete5を導入するなら、発注側も制作に関わると良いかもしれない。という話。」という記事を書いてるのでクロスキューブ2日連続です。

テーマ作成時に使えるテーマを作りました。

テーマ作成を開始するとき、まず最初何をしていますか?
僕の場合ですが、elementalはすでに色々されているので、Bootstrapを落としてきて読み込ませて、まっさらなテーマを作るんですが、これが毎回面倒でした

なので、毎回作ってるものをテーマ化しました
自由にお使いください。 続きを読む テーマ作成時に基盤に使える5.7用bootstrapテーマを作りました

Share on Facebook
LINEで送る
Pocket

concrete5 Ver.5.7でのコンポーザーの使い方

Share on Facebook
LINEで送る
Pocket

concrete5 バージョン5.7系では今までの5.6系と、コンポーザーの使い方が変わっています。

このコンポーザーの詳しい使い方がどこにも書いてなかったので、書いてみました。

concrete5のコンポーザーとは?

concrete5Webページを直接GUIでグリグリいじってページのコンテンツを制作していくタイプの直感的CMSです。
とてもわかりやすくて、専門的なWebの知識(HTMLCSS)がない人でも簡単にWebサイトを作る事ができます。

ただ、WordPressの様に投稿画面のフォームに上から順番にダーっと入力していけばページが作られるという、古来からのUIが好きな人もいますし、その方が効率が良いWebページもあります。

concrete5では、そういった投稿画面も自由に管理画面から作る事ができ、それをコンポーザーと言います。
コレ、使いこなすと非常に便利です。

Ver. 5.7で変わったコンポーザー

このコンポーザー機能ですが、5.6系でも使えるのですが、バージョン 5.7になって使い方が少し変わりました。

5.7のページタイプとページテンプレート

コンポーザーはページタイプ毎に設定するものなのですが、 Ver. 5.7では新たに「ページテンプレート」という概念が追加されました。

これは5.6までのページタイプの一部を切り離した物です。

今までページのテンプレートファイルとページタイプは1対1の関係でしたが、これによりひとつのページタイプが複数のテンプレートファイルを使える様になりました。

具体的な例で言うと、「新着情報」というページタイプが「右サイドバー」と「左サイドバー」二つのテンプレートファイルを使える、という様な事ができるようになりました。

これで5.6系でよく勘違いされていたページタイプの役割、「見た目のレイアウトを決めるもの」と、ページタイプ本来の役割である「どんな用途かを決めるもの」が分かれ、よりわかりやすくなりました。

これにより、コンポーザーの使い方、設定方法等も大きく変わっています。

まず、コンポーザーのフォームの設定から

concrete5 Ver. 5.7系でコンポーザーを設定する時は、まずページタイプの設定からフォームの設定をします。

ページタイプ管理画面

ページタイプの設定画面を開き、この「フォームを編集」ボタンをクリックします。
フォームを編集

フォームの設定画面が表示されますので、ここでコンポーザーに表示したい項目を決めていきます。
コンポーザーに表示する項目の設定

各セットのタイトルバーにカーソルをホバーすると、メニューアイコンが表示されます。(これ、ホバーしないと表示されないのってどうなん?とは思いますが)
」をクリックすると、入力項目の追加ができます。
フォームセットの編集アイコン

ブロック内蔵プロパティカスタム属性の中から好きな要素を追加できます。
試しに、ブロックImage(画像)を追加します。(ここ翻訳漏れしてるな…)
フォームアイテムの設定画面

フォームセットに追加されます。
ここもカーソルをホバーすると編集アイコンが表示されるので、エンピツのアイコンをクリックすると編集できます。
スクリーンショット 2015-04-30 6.45.44

この様に要素の設定画面が表示されるので、適当に埋めます。
カスタムラベルは表示する要素の名前、説明は簡単な要素の説明文を入れます。
とりあえず今回は「サンプル画像」としておきます。
画像ブロックの設定画面

次に、ページタイプの一覧画面に戻り、今フォーム要素の編集をしたページタイプの「出力」ボタンをクリックします。
ページタイプ設定画面:出力ボタン

このページタイプで利用できるページテンプレートの一覧が表示されるので、編集したいページテンプレートの「デフォルトを編集」ボタンをクリックします。
ページテンプレート設定画面

5.6系と同様のデフォルトブロックの編集画面が表示されるので、普通のページにブロックを足すのと同じ様に、メニューバーの「+」をクリックして、ブロックタイプ一覧の一番下の方にある「コンポーザーコントロール」というブロックを表示させたいエリアにドラッグ&ドロップして配置します。
コンポーザーブロック

 

そうすると、さっき設定したコンポーザーのコントロール要素を選択できる画面が表示されるので、ここに表示したいアイテムを選びます。
フォームアイテム設定画面

これでコンポーザーに自分が追加した要素が表示される様になります。

コンポーザーで開けないときは

コンポーザーの設定をしたのに、ページの設定メニューに「コンポーザー」が無くてコンポーザーでページを開けない時は、そのページタイプの「基本情報」で設定します。

ページタイプ基本情報

基本情報設定画面を開くと、「コンポーザーで開きますか?」という設定項目があります。ここを「はい」に設定すると、コンポーザーで開く事が出来る様になります。
コンポーザーに表示する設定

ページを追加メニューに表示させたい時は

コンポーザーで開く設定の下に、「このページタイプはよく追加されますか?」という設定項目があります。ここを「はい」に設定すると、
ページを追加メニューに表示させる設定
メニューバーの、ページ追加ボタンをクリックすると表示される画面の、「新しいページ」という項目に表示される様になります。

もっと詳しく知りたい方は

僕は月一回、下北沢のオープンソースカフェというコワーキングスペースでconcrete5の勉強会を開催しています。(詳しくはコチラ concrete5東京ユーザーグループ

ぜひこの勉強会に参加して質問して頂ければと思います。

それ以外にも僕がCTOをやっている、コンクリートファイブ ジャパン株式会社でも有償のトレーニングサービスも行っていますので、こちらをご利用ください。

もちろん、弊社株式会社クロスキューブでもconcrete5を使ったWebサイトの開発、カスタマイズなど行っていますので、そういったご相談も大歓迎ですw
ぜひお問合せください。

5.6のコンポーザーの事や、concrete5の基本が知りたい方には、既に発売されている書籍もオススメです。

Share on Facebook
LINEで送る
Pocket

オープンソースCMS「concrete5」の4つのエンタープライズ向けの有償機能

Share on Facebook
LINEで送る
Pocket

クロスキューブの山崎です。

8月11日、オープンソース汎用CMS「concrete5」がエンタープライズ向けの有償機能を新たに2つ提供開始することを発表しました。

これにより「concrete5」は以前より提供されている2つの有償機能と併せて、4つの有償機能が提供されていることになりましたが、このタイミングで改めてどんな機能でどういった時に活用できるのかを改めて振り返って見たいと思います。

静的HTML出力(HTML Exporter)

「Wordpress」や「concrete5」などの動的なCMSでは、アクセス毎に処理が行われページが生成される仕組みとなっています。そのため、更新内容の即時反映や、リアルタイムな情報の入出力が可能となっています。

しかしながら、当然毎回処理が行われるため、アクセスが増加すればその分だけPHPがDBにアクセスし、サーバへの負荷も増加するため、それに耐えうるサーバ環境の検討や構築が必要になってきます。

しかし、この機能を使うことで「concrete5」の通常通りの直感的なUIを使って作成したページを、静的なHTMLのWebサイトとして出力することが可能となります。

ページのHTMLだけではなく、サイトのディレクトリ構造も生成され出力されます。

スクリーンショット 2014-08-11 19.37.03

静的なHTMLは、言葉通りすでに生成されたHTMLファイルにアクセスをするため、PHPが処理する様な動的な処理が発生せず、サーバなどへの負荷を最小限に抑えることが可能です。また、データの入出力が基本的には行われないため、セキュリティ的にも動的なページより強固なものとなります。

もちろん動的なページには、プログラムを使うことで様々な機能が実装できますが、更新頻度の低いページやそういった機能が必要ないページで静的HTMLを使うことで負荷軽減セキュリティ強化などが行えます。

スクリーンショット 2014-08-11 19.37.07
静的HTML出力の設定画面一部

統合デジタルアセット管理(Centralized Digital Asset Management/CDAM)

画像や動画、モバイルを含むアプリケーション、ニュース記事などのデジタルコンテンツをメタデータ、カテゴリなどを使い、一元管理することが可能となります。

スクリーンショット 2014-08-11 19.38.40
メタデータ、カテゴリの設定画面

これにより、外部へ提供する画像やニュース記事などのデジタルコンテンツを一元管理や、社内のデジタル資産や製品カタログなどの一元管理などに利用することも可能となります。

iPhoneやAndroidなどのモバイルアプリや、Adobe InDesighn向けのデータの出力など、様々な形式に対応する事ができます。

昨今、バイラルメディアや、コンテンツマーケティングなどの重要性が増してきています。
また、今までの単純なSEOから、よりコンテンツ重視のSEOが必要となってきました。

そういった状況で、企業のマーケティングにこのアセット管理機能は大いに役立つと思います。

多段階ワークフロー(Multi-Step Content Workflow)

concrete5では通常でもコンテンツの編集に対する承認、または却下のステップを挟む1段階のワークフロー機能が標準搭載されているのですが、大規模な組織ではより複雑な承認フローが必要な場合があります。

この機能により、多段階の承認フローを実現することが可能となるため、社内のワークフローを他ツールを使わず、concrete5内のみで完結することができます。もちろん直感的な操作で。

スクリーンショット 2014-08-11 19.41.23
ワークフローの設定画面

今までは既存業務フローに合わせたワークフローのしくみを構築しようとすると、とても高額な開発費用がかかりましたが、この機能が提供された事により、安価に業務内容に合わせた最適なワークフローのシステムを構築する事ができる様になりました。

1ツールによる完結により、ランニングコストの削減できますし、公開までの期間を短縮することで、よりアウトプットの結果を最大化することが可能です。

多言語サイト運用支援(Internationalization)

concrete5は元々、多言語対応のニーズに対応するため、無償の他言語化アドオンが提供されていますが、この機能では更に踏み込んだ対応が可能です。

具体的に言うと、単語の翻訳内容を言語ごとに設定し、その内容をサイト全体に適用することができます。これを使うことでユーザーインターフェイスからコンテンツまで細かな部分の翻訳が可能、かつ非常にわかりやすい操作で行えます。

スクリーンショット 2014-08-11 19.42.15
各言語の編集画面

多言語対応は言語によっては翻訳が非常に専門的なものとなりやすいものですが、その専門性と作業内容をできる限り、効率的かつ簡単に行えます。

社外の翻訳業者と共同で作業する際等は、前述の多段階ワークフローと合わせると、必要な部分だけを翻訳業者に公開して作業ができます。

エンタープライズ機能全体を通した感想としては…

元々過去のバージョンではエンタープライズ向けのCMSであるため、無償の機能の中にも通常エンタープライズ向けCMSでしか、提供されていない機能もふんだんに実装されているのですが、さらにその「concrete5」をエンタープライズ向けに強化できる機能だということは間違いありません。

無償の機能とアドオン、有償の機能とカスタマイズ、こういったものを組み合わせ、なおかつコストも見据えながら、理想のサイトやシステムの制作を可能とするのが汎用CMSである「concrete5」の強みです。

そして、その選択肢のベストを選択できるのが「concrete5」によるWEBサイト制作を数多く経験してきた我々だと考えていますので、まずはぜひとも弊社まで一度ご相談ください。

Share on Facebook
LINEで送る
Pocket

concrete5の5.7βがリリース!

Share on Facebook
LINEで送る
Pocket

クロスキューブの山崎です。

日々のタスクに忙殺されていたこともあり前回の記事からだいぶ間が空いてしまいましたが、本日concrete5のメジャーアップデートである5.7のベータ版がリリースされたので、これはご紹介すべきと思い、書いております。

私も早速インストールを行ったのですが、まったく新しいconcrete5という感じでして、ひと通りの操作を試しているだけでも、驚くことが非常に多いアップデートだと思いました。

とりあえず動画で見てください

続きを読む concrete5の5.7βがリリース!

Share on Facebook
LINEで送る
Pocket

Webディレクターだけどconcrete5をインストールしてみる

Share on Facebook
LINEで送る
Pocket

クロスキューブの山崎です。

今日は改めてconcrete5の最初の導入、いわゆるインストール方法を書いていきます。私はディレクション回りを担当しているので、こういった技術的な話は厳密には畑違いですが、お客様に紹介したり実際案件と進める上で、導入方法から開発回りについても知っておくべき情報だとは思っています。

ということで、開発者の方以外も是非見てもらえればと思いますので、お付き合いください。

concrete5を入れるサーバーは・・・

入れるサーバーですが、選択肢は非常に広く、ニフティさんの提供するc4saについては、ブラウザ上から数クリックで環境が整ったりします。

またKDDIさんが提供するホスティングサービスのcpiでは、レンタルサーバマネージドプランでも、簡単に環境を作れるサービスが提供されていたりしますので、選択肢のひとつとして、考えてもらえればと思います。

ただ今回については、環境構築からインストールまでをご紹介したいというところもあるので、sakuraさんのVPS(CentOS)にインストールしたいと思います

まずはインストールできる環境にセットアップ

まずは準備ということで、ターミナルからsshでログインして、concrete5の日本語公式ページにある動作要件ページを参考に、サーバに必要なものをインストールしていきます。

続きを読む Webディレクターだけどconcrete5をインストールしてみる

Share on Facebook
LINEで送る
Pocket

『concrete5公式活用ガイドブック』 出版記念セミナーに参加してきました!

Share on Facebook
LINEで送る
Pocket

XROSS CUBEの山崎です。

近日弊社代表の佐々木も著者として参加している「concrete5公式活用ガイドブック」が出版されるのですが、その出版記念セミナーに参加してきました。

日本初のconcrete5本

参加者には、そのガイドブックがフライングゲットできるという特典付き。

まだまだWEB上にもconcrete5に関連したドキュメントが不足している中、日本初のconcrete5 関係の本です。

早速流し読みしてみましたが、制作・開発から運用まで色々と書いてあるので、気になる方は発売後チェックしてみてください。


concrete5 公式活用ガイドブック

セミナーの感想は・・・

肝心のセミナーですが実際の事例を元に、制作から営業まで様々な視点から話がありましたが、何より印象的なのが「お客さんが勝手に使い方を覚えちゃうCMS」というところですね。

続きを読む 『concrete5公式活用ガイドブック』 出版記念セミナーに参加してきました!

Share on Facebook
LINEで送る
Pocket

concrete5の「クリップボードにコピー」がわりと便利

Share on Facebook
LINEで送る
Pocket

XROSS CUBEの山崎です。

1月の頭からXROSS CUBEにjoinして、気づいたらもう1ヶ月も立ちましたが、去年末ぐらいから今までガッツリとconcrete5をいじっていて、どんどんconcrete5の素敵さに惹かれていたりします。

で今回なんですが、concrete5の基本的な機能である「クリップボードにコピー」について、すごい便利な機能なので紹介したいと思います。

このワードから「control(command)+c 」的な機能を想像する方が多いんじゃないかなと思いますが、concrete5のクリップボードは、これとはちょっと違って便利です。

どういうことかというと・・・・

続きを読む concrete5の「クリップボードにコピー」がわりと便利

Share on Facebook
LINEで送る
Pocket