テーマ作成時に基盤に使える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の強みと弱みを振り返る

Share on Facebook
LINEで送る
Pocket

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

最近、お客さんのところでconcrete5のことを話していると、前よりもconcrete5を既に知っているケース(名前だけ知ってるも含め)が増えてきて、いいことだなーと思っていたりしています。

ただ、ここ1、2年ほどで成熟してきて、これから日本国内に大きく広がってくるフェイズだと思うので、まだ知らないケースが多くて、あまり知らないお客さんにconcrete5がいったいどういうものか説明することが多いです。

コーポレートサイトなど発信ベースのサイト制作の場合には、「高機能な汎用的なCMS」という伝え方で問題ないのですが、通常スクラッチで開発するような独自性の高いサービスの制作というケースだと、大きな勘違いをされるケースが多くあります。

なので改めて強みと弱みを理解しておこうと思い、ここに残しておきます。

WordPressと比較されるケースが多い

どうしてもCMSという単語が出るとWordpressと比較したくなる気持ちになりますよね、僕もでした。まずここで明示しておくとWordpressとは全くもって別物です。触ればすぐに分かります。

続きを読む concrete5の強みと弱みを振り返る

Share on Facebook
LINEで送る
Pocket

クロスキューブのコーポレートサイトをconcrete5でリニューアルしました。

Share on Facebook
LINEで送る
Pocket

先日クロスキューブのコーポレートサイトを暫定ではありますが、リニューアルしました。もちろんconcrete5使ってますw

今年に入って私含めクロスキューブに役員が2人加わったので、クロスキューブで提供できるサービスも増えました。なので以前のコーポレートサイトもconcrete5を使っていたんですが、コンテンツを早急に整理する必要があったため、ついでにデザインも一新してしまおうということでリニューアルに至りました。

配布、販売されてるThemeがやっぱり優秀

上記でも書いたとおりですが、出来る限り早くリリースする必要がありました。ということで、今回はconcrete5公式で販売しているテーマ『Super Mint』を購入して使いました。

concrete5テーマ

このテーマ、Bootstrapベースにカスタマイズして作られたものなんですが、色々とすごいです。

続きを読む クロスキューブのコーポレートサイトをconcrete5でリニューアルしました。

Share on Facebook
LINEで送る
Pocket

執筆したconcrete5公式ガイドブックが地元の本屋に並んでいましたw

Share on Facebook
LINEで送る
Pocket

concrete5日本語コミュニティの仲間と執筆した、はじめての日本語でのconcrete5の解説本、concrete5公式ガイドブックがマイナビさんより2月14日に発売になりました。

concrete5公式ガイドブック

kindle版も同時出版されており、電子書籍としても購入できます。(紙の本は重いです…)

実は出版の話はずいぶん前から出ておりましたが、それ以前にconcrete5公式サイトの整備など他にやる事が多かったために、後回し後回しになっていました。

いざ執筆!となってからもメンバーが多忙で1年以上かかってしまいました…

そういった中で無事発売日を迎え、店頭に並ぶ日が来たので、実際に並んでいるかどうか?平積みテロでもしに地元、国分寺の書店に見に行ってきました。

紀伊国屋書店国分寺店様、コンクリ本 平積みありがとうございます!!

concrete5公式ガイドブックいやー、ちゃんとありました。
それどころか平積みされてましたよ!

Amazonに並んだ時も感じるところがありましたが、郊外の地元の書店の店頭に実際に並んでいると感慨深いものがありますね。

執筆陣の皆さん、お疲れ様でした!

これからconcrete5を勉強する方へ

僕はコンクリートファイブジャパン株式会社のCTOという肩書きもあるので、主にアーキテクチャー部分など、技術的な部分を担当していますが、この本はインストールから操作方法など、初心者向けの内容からカスタマイズまで広範囲にわたって解説されております。

誌面の都合から完全網羅とまではいきませんが、かなり詳しく書かれており、入門書としては最適なものになったと思っています。

この本が無くてもconcrete5の勉強はできますが、この本があればググる手間をだいぶ省くことができるので、効率良く勉強する事ができると思います。

東京でもconcrete5勉強会やってます。

続きを読む 執筆したconcrete5公式ガイドブックが地元の本屋に並んでいましたw

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

concrete5ブログをWordPressではじめました!w

Share on Facebook
LINEで送る
Pocket

前々から「ブログ書かないの?」ってよく言われてたので、concrete5に関するブログをはじめました。WordPressでw

もし、「concrete5ってなんやソレ?」という方がいらっしゃいまいたら下記の動画とconcrete5 Japanのサイトをご覧ください。

なぜ、今頃はじめたのか?

前々から書こう書こうと思っていたのですが、ある悩みからなかなか手を付ける事ができませんでした。
その悩みと言うのは、

「ブログなんだからWordPressだろ」

という考えと

続きを読む concrete5ブログをWordPressではじめました!w

Share on Facebook
LINEで送る
Pocket