ブログのワークフローと権限設定 – concrete5 Ver.8.1.0

子ページの権限設定
Share on Facebook
LINEで送る
Pocket

友人に、concrete5 Ver.8.1.0でのブログのワークフローがうまく動かない!と言われたので、「んなバグ知らんなー」と思い、設定してみたら見事にハマったので、備忘録代わりに書いときます。

権限設定まわりはいつまで経ってもハマるなぁ…

concrete5でのブログの権限設定

ブログでワークフローを使いたい、となると、通常下記の様な運用を実現したいという事になると思います。

  1. 編集者グループのユーザが記事を作成・編集
  2. 管理者グループの人間が記事を確認後、承認・却下のアクションを実行
  3. 記事が公開・差し戻される

この場合、記事一覧ページが親ページとなり、各記事のページがその下にぶら下がっていく構造になると思います。

各記事は編集者が編集できないといけませんが、ブログトップは管理者しか編集できない権限を設定しないといけません。

しかし、concrete5のデフォルトでは、子ページは親ページの権限を継承する事になるので、そのままだと親ページであるblogページに対して編集者による編集権限を与えないといけません。

こんな時は、子ページの権限設定を親ページからの継承ではなく、ページタイプのデフォルト権限を使用します。

そうすると、「親ページのblogページは管理者しか編集できないが、その子ページである各記事は編集者権限のユーザも編集できる」という権限設定が可能になります。

さあ、そんなconcrete5の最も素晴らしく便利で難解なページの権限設定についておさらいしましょう。
“ブログのワークフローと権限設定 – concrete5 Ver.8.1.0” の続きを読む

Share on Facebook
LINEで送る
Pocket

concrete5 Ver.5.6系向けのAMP Add-onを作ってみた。

concrete5 Ver.5.6 Accelerated Mobile Pages
Share on Facebook
LINEで送る
Pocket

最近、AMP ( Accelerated Mobile Pages ) 対応ページって増えてきましたよね。
ますますPCからモバイルへとインターネット端末になっていくなか、軽快に閲覧できるこの機能はとても良いなぁと思っています。

WordPressはいち早く対応プラグインが公開されていましたが、concrete5用のAMP対応アドオンはVer.7系や8系のはhissyが作ったのが既にあるんですが、5.6系のは無かったので、作ってみました。

結構まだまだVer.5.6系使っている人多いんですよね。

AMP ( Accelerated Mobile Pages )とは?

そもそも、AMPってなんでしょう?

AMPとは、Accelerated Mobile Pagesの略で、Googleが提唱しているHTMLの仕様です。
インターネットへの接続端末のメインがスマホなどの携帯端末に変わってきたことにより、不安定な回線速度やPCに比べ非力なCPU等でも快適にWebサイトを閲覧できる様にするものです。

具体的な仕組みとしては、通常各ホームページのサーバでホストされているWebサイトの情報を、Googleが代わりに保存(キャッシュ)しておいてそれをユーザに見せます。
ここで、Googleが保存しやすく、かつモバイル端末でも快適に見れる様に専用のHTMLの仕様がAMP HTMLです。

その他にも、Googleのサイト高速表示のノウハウが詰まったAMP JSというJavascriptのライブラリも使います。

AMP HTMLとHTML5

AMP用のHTML、 AMP HTMLと通常のHTML5とはどこが違うのでしょう?
利用できるタグに制限があったりと色々違うのですが、大きいところだと外部のリソースを参照する系のタグ(imgタグやiframeタグ)が使えなかったり、style属性が使えなかったりとかでしょうか?

詳しくはこことかここに書いてありますので興味があったら参照してください。僕はちょっと見ただけで自力での変換を諦めましたw

AMPってSEOに効くの?

今のところSEO的には直接的に表示順位に影響があるかというと微妙なところです。複合的、間接的に影響があるといったところでしょうか?
ただ、Googleはモバイル向けに高速なWebブラウジングを提供することがユーザの大きな価値になると考えており、やっておいた方がSEO的にプラスな事にかわりは無いと思います。

また、schema.orgタグを使った構造化マークアップをする事により、検索結果のカルーセルに表示されたりと、通常の検索結果よりも目立つ事になるので、そういった事からトラフィックは増えそうです。

concrete5をカスタマイズ?いいえadd-onです。

さあ、ではconcrete5のページをAMP対応してみましょう。テーマやコアファイルをカスタマイズすると、バージョンアップの時に面倒なので、イベントを使ったAdd-on(Package)として作ります。

“concrete5 Ver.5.6系向けのAMP Add-onを作ってみた。” の続きを読む

Share on Facebook
LINEで送る
Pocket

Ver.8 から使えるExpressオブジェクトとは?

Share on Facebook
LINEで送る
Pocket

この記事はconcrete5 Japan Advent Calendar 2016の4日の記事です。3日の記事はacliss19xxさんの「検索ブロックのカスタマイズ」、5日の記事はmizuno.fumitoさんの「concrete5をウェブサービスのベースとして活用する」です。
この記事と合わせて読んでみてください。

concrete5 Ver.8 が12月1日にやっとリリースされました!

新しいUI、機能が盛りだくさんのメジャーバージョンアップ、concrete5 Ver.8がやっと出ました!
たくさんの新機能の中でも僕が一番注目し、喜んでいるのが Express オブジェクト です。

Express オブジェクトをわかりやすく言うと、concrete5の中にMS AccessやKintoneの様なデータベースを作れる機能です。凄いんですコレ。

今日はそんな新機能のExpressオブジェクトの使い方をご紹介します。 “Ver.8 から使えるExpressオブジェクトとは?” の続きを読む

Share on Facebook
LINEで送る
Pocket

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

concrete5 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

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

concrete5公式ガイドブック
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

Designer Contentアドオンで作ったブロックを修正する時の権限の問題

Designer Content デザイナーコンテント
Share on Facebook
LINEで送る
Pocket

concrete5にはDesigner Contentデザイナーコンテント)という素晴らしいアドオンがあります。

concrete5には標準でいくつものブロックタイプが準備されており、Google マップやyoutubeを挿入できる物など、いろんなブロックタイプが準備されています。
このアドオンは、ここにオリジナルの新しいブロックタイプを追加できるというアドオンです。
しかも無料!!!

ただ、残念ながらこのアドオンにもいくつか不便な点があります。

まず、一度作ったブロックは管理画面から修正できない事。
あとapacheのモジュールとしてPHPを動かしている場合、ファイルたディレクトリのオーナーがapacheになってしまい、FTP等で接続して直接ファイルを編集しようとしても権限の問題でできない事がある事です。

Designer Contentでできる事

まず最初に、Designer Contentで具体的にどんな事ができるかをご説明します。

簡単な入力フォーム付きの物しか作れないのですが、サイト全体のHTML構造を崩さずに簡単に入力できるブロックを新しく作る事ができるので、非常に重宝しています。

例えば、

<div class="row">
    <div class="span4"><img alt="xxx" src="xxx.jpg" /></div>
    <div class="span8">
        <h3>タイトル</h3>
        <p>テキストテキストテキストテキスト</p>
    </div>
</div>

の用なHTMLを出力するブロックを作るとします。

管理画面の[ブロック] > [デザイナーコンテント]をクリックし、ブロックタイプの設定画面を開きます。

デザイナーコンテント設定画面

ブロックハンドル、ブロック名、説明文を入力します。

次に「フィールドを選択」の「画像」を選択し、imgタグを囲うHTML等を入力します。

同じ様に「テキスト」「テキストエリア」のフィールドを設定していきます。

デザイナーコンテント フィールド設定

最後に、「ブロックを作成!」ボタンをクリックすると、/blocksにブロックタイプのファイルが生成され、各エリアに置ける様になります。

実際に置く場合の入力画面は、このブロックの場合こうなります。

スクリーンショット 2014-02-12 9.18.59いやー、便利ですね〜。最高です。

これを見つけた時は思わず日本語ファイルをみんなで作ってプルリクエスト送っちゃいました。なので日本語でも使えます。

作ったブロックのパーミッションが…

でも、作ったブロックのviewファイルとかを少し変えたくなった時、apacheモジュールとしてPHPを動かしていると、apacheユーザでブロックが作成されるため編集できない場合があります。

これを解決するためには以下の方法があります。

“Designer Contentアドオンで作ったブロックを修正する時の権限の問題” の続きを読む

Share on Facebook
LINEで送る
Pocket