デベロッパーサイトのカスタムフィールドメーカーを改良しました。
従来のカスタムフィールドメーカーから生成されたソースコードだと、カスタムフィールドグループの際に、下の画像のように項目が横に積まれてしまい入力欄が狭くなってしまう問題がありました。
そこで今回は縦向きレイアウトに対応しました。縦向きレイアウトだと、下記の画像のように先ほどと同じ項目数ですが、入力欄が狭くなりません。
スイッチトグルで従来の横向きレイアウトか、新しい縦向きレイアウトか選択できるようにしています！ ぜひご活用ください！
5月18日（金）、19日（土）に、 a-blog cms Training Camp 2018 Spring を開催しました。a-blog cms Training Camp は年に2回行われている a-blog cms の最大規模の勉強会です。 ご参加いただいたみなさま、ありがとうございました。
今年、2018年3月26日に公開された a-blog cms Ver.2.8ではより外部サービスと連携しやすい仕組みを用意しています。そこで今後いくつかの連携機能をa-blog cmsの本体とは別に拡張アプリという形で配布することにしました。 その第5弾として今回は 拡張アプリ「Zoho」を用意しました。拡張アプリ「Zoho」を使うとお問い合わせフォームなどから送信された入力内容を Zoho CRM 上に蓄積することができます。
以下の3つのステップでa-blog cmsとzohoを連携します。
まずはZoho CRM に登録します。機能は制限されますが、無料版がありますのでアカウントがない人はまずは無料版を使ってみましょう。
下記のURLより、クライアントIDを追加します。 https://accounts.zoho.com/developerconsole
設定後は、先ほど追加したクライアントに対して、セルフクライアントの設定をします。
スコープにはZohoCRM.modules.allと入力してください。期限は何分でも構いませんが、その期限内にoAuth認証を済ませる必要があります。入力をすませると、oAuth認証に必要なgrantトークンが表示されるはずです。このトークンを覚えておきましょう。
configuration.propertiesとoauth_configuration.propertiesに設定を追記します。
場所は、extension/plugins/Zoho/vendor/zohocrm/php-sdk/src/resources にあります。
configuration.properties
apiBaseUrl=www.zohoapis.com
apiVersion=v2
sandbox=false
applicationLogFilePath=./
currentUserEmail={Zohoに登録したメールアドレス}
oauth_configuration.properties
client_id={取得したClientID}
client_secret={取得したClient Secret}
redirect_uri={リダイレクトURL}
accounts_url=https://accounts.zoho.com
token_persistence_path=./
access_type=offline
persistence_handler_class=ZohoOAuthPersistenceHandler
管理ページ > 拡張アプリ より「拡張アプリ管理」のページに移動します。そのページより下の図のようにZohoをインストールします。
インストール完了後は、先ほどのgrantトークンを「a-blog cmsの管理画面 > 拡張メニュー > Zoho」より入力します。zohoの登録で使用しているメールアドレスもここで入力しておく必要があります。 入力後は設定を保存し、「認証」ボタンをクリックします。無事に認証ができると、下の図のように「認証済み」というラベルが表示されるはずです。
config.server.phpでHOOKを有効にしておく必要があります
define('HOOK_ENABLE', 1);
先ほどのgrantトークンをa-blog cmsの管理画面 > 拡張メニュー > Zoho より入力します。zohoの登録で使用しているメールアドレスもここで入力しておく必要があります。
「管理画面 > フォーム管理 > 設定したいフォームID」よりフォームに対するZohoの設定を行うことができます。 a-blog cmsのForm内のキーに対してZoho側のキーを紐づけることで、a-blog cms側のフォームの送信結果を処理してzohoに送信することができます。Zoho側のキーは下の図のようにラベル名に対応しています。
以下3つの作業が必要になります。
フォームIDごとに、Zohoのどのモジュールに対してInsert（データの挿入）及びUpdate（データの更新）ができるかを設定できます。例えば、下の画像の場合、CustomModule1のモジュールに対してInsert権限があり、Contactsのモジュールに対してはUpdate権限があります。またInsertやUpdate時に「会員番号」がユニークキーとして処理が実行されます。
次は、カスタムフィールドの設定です。ここではa-blog cmsのフォーム側の変数とZoho側のカスタムフィールドの紐付けを行います。例えば、一番最初の列では、a-blog cms側のカスタムフィールドemailの項目はZoho側のLeadsモジュールとCustomModule1モジュールのEmailに対応しています。
この際に、新規レコードに追加したい変数は、「Insert」にチェックし、既存レコードの更新を行いたい変数については「Update」にチェックを入れてください。
またZoho側に登録したデータどうしをlookupIDを通して紐づけることができます。 例えば、商品に対してその商品を誰が買ったのかをルックアップIDを使って以下のように紐づけます。 ルックアップIDにはそのルックアップIDに使用されているzoho側のラベル名を登録します。
ご希望の方は下記のURLよりお問い合わせください。
![[キャプチャ]ランディングページテーマ](https://developer.a-blogcms.jp/archives/009/201804/large-c06bf56509c4719b76099efdb513901f.png)
Ver.2.8.0より、あたらしくランディングページテーマ（lp@site2018）を追加しました。
ランディングページテーマの大きな特徴としては、以下の3つです。
ランディングページや1カラムのテンプレートを作成する際に、カスタマイズのベースとしてご活用ください。
それでは、実際の使い方について解説します。
ランディングページテーマは、CMSをインストールした際に選択できないようになっています。ですが、機能を把握するためにもデータがないと困るかと思いますので、外部URLでインストールデータを用意しております。以下、インストールデータをインポートする手順になります。
このテーマは、site2018テーマを継承したテーマです。lp@site2018を使用する際は、themesフォルダからsite2018を削除しないでください。
テーマの継承については詳しくは以下のドキュメントをご覧ください。
詳細ページのテンプレートです。
lp@site2018テーマを選択したときに、テンプレートをまとめて設定できるファイルです。使用するかどうかは管理画面＞コンフィグ＞テーマ設定 にて変更できます。
ユニットで挿入できるフォームの終了画面です。
lp@site2018テーマオリジナルの管理画面のテンプレートが入ったフォルダ。 lp@site2018テーマでは主に以下のテンプレートが入っています。
lp@site2018テーマで使っているCSSが入ったフォルダです。
カスタムユニット「フォーム」で使用するフォルダです。
lp@site2018テーマで使っている画像が入ったフォルダです
lp@site2018テーマ内のインクルードしているテンプレートをまとめたフォルダです。
lp@site2018テーマで使っているJavaScriptが入ったフォルダです。
lp@site2018テーマで使っているSCSSファイルが入っているフォルダです。 このscssフォルダに入っているSCSSファイルをコンパイルしてCSSを出力しています。
![[キャプチャ]背景画像](https://developer.a-blogcms.jp/archives/009/201804/large-aa7fe030597c0aa2726eda60c9faf6d5.png)
背景画像
![[キャプチャ]メディアレイアウト](https://developer.a-blogcms.jp/archives/009/201804/large-94b55663abb9b7f8a320089a45a77b65.png)
メディアレイアウト
![[キャプチャ]ご注文フォーム](https://developer.a-blogcms.jp/archives/009/201804/large-a426611a626e016d6c8c77aab9129d4e.png)
ご注文フォーム
![[キャプチャ]スプリットレイアウト](https://developer.a-blogcms.jp/archives/009/201804/large-e4abaf3a378421873280c4d25a4b28c2.png)
スプリットレイアウト
![[キャプチャ]アコーディオン](https://developer.a-blogcms.jp/archives/009/201804/large-b8951a2a120ca1838113f7739490fc55.png)
アコーディオン
![[キャプチャ]お客様の声](https://developer.a-blogcms.jp/archives/009/201804/large-d7eec775a69595ae3dfe6075eb9e5fd5.png)
お客様の声
![[キャプチャ]特徴](https://developer.a-blogcms.jp/archives/009/201804/large-e4484064257e640c57ad8c59a276d255.png)
特徴
![[キャプチャ]よくある質問](https://developer.a-blogcms.jp/archives/009/201804/large-d794e90fbb0da0c977baf40b6db3f336.png)
よくある質問
![[キャプチャ]SNSシェアボタン](https://developer.a-blogcms.jp/archives/009/201804/large-7dc428fd35305dd3609985d91b23895f.png)
SNSシェアボタン
ユニットグループの背景色や、見出しやリード文、本文の文字色を指定するために、カラーピッカーを使用しています。エントリーのカスタムフィールドとして用意しています。
カラーピッカーの使用場所
以下のパーツがエントリーごとに表示・非表示を設定できるようになっています。
チェックをつければ各パーツが表示されます。
ランディングページテーマの解説は以上となります。それでは、みなさまのカスタマイズのご参考に役立てればと思います。
Ver. 2.8.0 管理画面
いつもお世話になっております。開発の伊藤です。
今回は Ver. 2.8.0 リリースまでもう少し！という事で、Ver. 2.8.0 の新機能 & 変更点についてまとめてみたいと思います。 最後に変更点一覧を乗せてあります。
Ver. 2.8 より下記のパッケージになり、php7.2まで対応できるようになります。
Ver. 2.7 で導入したセマンティックバージョニングや様々な自動化により、不具合修正などのパッチバージョンをスムーズにリリース出来るようになりました。ただそれに伴いバージョンアップが大変になりました。そこで管理画面からのアップデートを使うことにより、楽にシステム更新が出来るようになります。
管理画面 > コンフィグ > 機能設定 の 「オンラインアップデート」にオプションがあります。
「デフォルトのパッチバージョンのみ」は不具合修正のバージョンのみアップデートを行います。仕様変更などは含まれませんので、安心してアップデートできます。「マイナーバージョンも含める」は、2.8 から 2.9 へのアップデートのようにマイナーバージョンアップの更新も出来るようになります。「更新メニューを非表示」は管理メニューに更新メニューを出さないようにします。お客様に引き渡す時に、あまり触ってほしくない場合などに便利です。
ログインしていると以下のようなポップアップが現れ、キーワード検索で色々な情報にアクセス出来るようになりました。
クリックサーチ
フリーキーワードで検索はそのまま、キーワードを入力すればいいですが、そのほかに２つのモードが用意されています。
テキストユニットの標準に導入されるエディターが「Lite Editor」になりました。下のように以前は「リンク挿入」などをクリックすると直接HTMLが挿入されていましたが、新しいエディターでは実際にどのように表示されるか視覚的にわかりやすくなりました。
以前のテキストユニット
新しいテキストユニット
インクルード文を新しい書き方で書くことができるようになりました。
<!-- include file="/path/to/file" -->
@include("/path/to/file")もちろん Ver. 2.8 でも以前の書き方のインクルードは動くようになっていますので、バージョンアップしても大丈夫です。
以前のインクルードはただファイルを読み込んでくるだけでしたが、新しいインクルード文には、変数を読み込み先テンプレートに渡せる機能が追加されています。
@include("/path/to/file", {"key": "value", "key2": "value2"})<p>{{key}}</p>
<p>{{key2}}</p>変数の渡し方は、@include()の第２引数に、JSON形式で渡します。変数の使い方は、通常の変数と違い２重の中括弧で囲むことで表示できるようになります。
テンプレートを継承できる機能が追加されました。今までは、テンプレートをインクルードする事でテンプレートファイルを分割していましたが、この継承機能と組み合わせる事で、テーマをわかりやすく、シンプルに管理しやすくできます。
@section(header) <header>...省略</header> @endsection @section(main) <h2>継承元のコンテンツ</h2> @endsection
ポイントは @section(セクション名) と @endsection で 囲んだブロックが継承できる範囲になります。 継承しそうなところを @section で囲みます。
@extend要素を使うことで、テンプレートを継承することが出来ます。
上記のテンプレートを継承してみます。
@extend(/layout/base.html) @section(main) <h2>継承したメインのコンテンツ</h2> @endsection
表示されるHTML
<header>...省略</header> <h2>継承したメインのコンテンツ</h2>
どうでしょうか？ 継承したテンプレートでは、メインのコンテンツしか記述していないのに、最終的に表示されるHTMLには継承元の情報も出力され、書き換えたいところだけ書き換えることが出来ました。
継承は、何回でも検証できますので、継承したテンプレートをさらに別テンプレートで継承するといった使い方もできます。
@section を使う事で、親テンプレートの要素を書き換える事ができるようになりましたが、全て置き換えてしまうので不便な場合があります。例えばJavaScriptの読み込みなどです。
全体で利用するJavaScriptは親テンプレートで読み込んでおきますが、継承したテンプレートのみでしか使わないJavaScriptを読み込みたい場合などがあります。
@section(head-js) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js" charset="UTF-8"></script> @endsection
@section(head-js) @parent <!-- ここに親の@section(head-js)内が挿入される --> <script src="/js/example.js" charset="UTF-8"></script> @endsection
上記のように @parent要素を @section内で使うことにより、親テンプレートを参照できるようになります。更に親のテンプレートを参照する場合は、@@parent のように @の数を増やすことで可能です。
テンプレートの継承機能を使ってテーマを作ると、テンプレートを複数のレイヤーに分けることができ、変更箇所のみテンプレートに書けばいいので、シンプルで分かりやすく、共通箇所も共有できるので、保守しやすテンプレートになると思います。
モジュールの呼び出しに新しい機能が追加されました。今までは、モジュールで表示する情報を制御するには、モジュールIDを作り管理画面で絞り込む情報を入力していたのですが、テンプレート側でも指定可能になりました。
<!-- BEGIN_MODULE Entry_List ctx="bid/1/cid/2" --> ...省略 <!-- END_MODULE Entry_List -->
上記のように とすることで、モジュールのURLコンテキストを指定できます。 指定の仕方はURLコンテキストと同じで、 bid/1/cid/2/eid/3 のように指定できます。
もちろん id="" をつけてモジュールID化したものに設定することも可能です。ただモジュールIDでもURLコンテキストの設定が可能なのでバッティングしてしまいます。なので設定の優先度が存在しますのでご注意ください。
基本的にはモジュールIDの設定が優先されると考えていただければ大丈夫です。
コンテキストの優先度
以上より、モジュールIDが設定されている場合は、チェックが入っていない & 固定値がないコンテキストと、チェックが入っていても、そのページのURLコンテキストがない場合に、テンプレートのコンテキストが使用されます。
以前までは、モジュール内のブロック（など）や 変数（{url}など）はバックスラッシュをつけることにより、エスケープが可能でした。
<!-- BEGIN\ entry:loop -->
\{url\}
<!-- END\ entry:loop -->これに加え、Ver. 2.8 より モジュール自体のエスケープも可能になりました。モジュールが入れ子の場合は通常内側から実行されますのが、モジュールのエスケープを使うことにより、外側のモジュールから実行させることができるようになります。
このモジュールのエスケープと先ほどのテンプレートからのコンテキスト指定を組み合わせることで、今まで出来なかったことができるようになります。例えば、Blog_ChildList と Entry_List を組み合わせて、 ブログ毎にエントリー一覧を出力するようなことが出来ます。サイトマップなども作れると思います。
<!-- BEGIN_MODULE Blog_ChildList -->
<ul class="acms-list-group">
<!-- BEGIN blog:loop -->
<li>
<a href="{url}" class="acms-list-group-item">ブログ: {name}</a>
<!-- BEGIN_MODULE\ Entry_List ctx="bid/{id}" -->
<div class="acms-margin-bottom-medium">
<ul class="acms-list-group">
<!-- BEGIN\ entry:loop -->
<li><a href="\{url\}" class="acms-list-group-item">\{title\}</a></li>
<!-- END\ entry:loop -->
</ul>
</div>
<!-- END_MODULE\ Entry_List -->
</li>
<!-- END blog:loop -->
</ul>
<!-- END_MODULE Blog_ChildList -->画像のロスレス圧縮に対応できるようになりました。画像サイズが小さくなり、Google の PageSpeed Insights などの点数も上がりパフォーマンスがよくなります。
ただ、サーバーに下記の画像圧縮ライブラリが必要になります。入っているソフトによって対応できるフォーマットが増減します。
CMSでロスレス圧縮が可能かどうかは、管理画面 > チェックリスト の 「ロスレス圧縮対応フォーマット 」で確認することができます。
Ver. 2.7 ではコンフィグのエクスポートはルール、モジュール、コンフィグの全てをブログ単位で一括エクスポート・インポートでしたが、ブログ作成時のデフォルト値を作るのに、これでは作成できませんでした。
そこで、デフォルトのコンフィグのみをエクスポート・インポート出来るようにしました。ここで書き出したyamlを private/config.system.yaml に記述すると、新規ブログ作成時に、エクスポートした設定が新しいブログの初期状態として反映されるようになります。
部分的なコンフィグのエクスポート・インポートが可能になりました。例えば、コンフィグの編集設定は設定項目も多く、インポートで対応したいが、他のテーマなどの設定も変わってしまいます。そこで、この部分インポートを使うと、他のコンフィグに影響なく、部分的にインポート出来るので便利です。
エクスポートしたい、各コンフィグのページに移動します。例えば、編集設定ページなど。移動すると右上にエクスポートボタンがあるので、ここをクリックするとyamlデータとしてエクスポートされます。
コンフィグの部分エクスポート
また、ルール適応状態のコンフィグもエクスポート・インポートできます。
コンフィグの部分インポートは、エクスポートと同じく、コンフィグの各ページの右上の「インポート」ボタンから移動するか、管理ページ > コンフィグ > 「コンフィグの部分インポート」から移動できます。
ここでインポートすることにより、yamlにはない情報は削除せずに、yamlにある情報だけ上書きして部分的に書き換えます。
コンフィグの部分インポート
今までは、既存モジュールを使い、複雑なテンプレート（大量のIF分岐）で OGPのタイトルや画像の出力に対応していましたが、使いづらく、また多くのモジュールを組み合わせて出力していましたので、パフォーマンスが悪かったです。
そこで、Ver. 2.8 でOGPモジュールを追加し、一つのモジュールでシンプルなテンプレートでOGPの情報を出力できるようにしました。モジュール設定で、適応するフィールド名が設定できたり、タイトルの順番やフォーマットが指定できるようになっています。
Ogpモジュール設定
CMSのパスワードに記号が使えなかったのを使えるようにしました。また、機能設定にパスワードポリシー設定を設け、パスワードポリシー条件に満たないパスワードは設定できないようにしました。
パスワードポリシー設定
ユーザーのパスワード設定画面で、パスワード強度を視覚的に分かりやすくする機能を追加しました。パスワードが短かったり、使われている文字の種類が少なかったり、推測されやすいパスワード（P@ssW0rdなど）を危険と判断して教えてくれます。
危険なパスワード
不安なパスワード
注意が必要なパスワード
妥当なパスワード
安全なパスワード
以前まではテンプレートを指定した部分的な静的（HTML）書き出しはあったのですが、 サイト全体を書き出すことは出来ませんでした。
しかしセキュリティやパフォーマンスを気にされる方や、静的HTMLでしか運用されないお客様などから 度々要望に上がっており、今回のVer. 2.8からプロフェッショナル版以上になりますが対応ができるようになりました。
静的書き出し
ページのURLが変更されます。
ブログ単位で書き出せるので、あまり変更の無いブログは静的書き出しを行うのもいいと思います。
特定のエントリーだけを表示したいことがあると思います。a-blog cmsではカスタムフィールドを応用することで、カテゴリーをまたがったピックアップ表示を実装することができます。
今回はモジュールIDを利用して、ブログ全体から特定のエントリー（ピックアップ用のフラグになるカスタムフィールドを設定したエントリー）だけを表示する設定について説明します。
この記事では、現在いるエントリーと同じカスタムフィールドの値を持つエントリーを表示する方法をご紹介します。
たとえば、{select_item}という変数があったとします。{select_item}では「りんご」「もも」「ぶどう」の中から値が選べるようになっています。記事Aというエントリーが、「りんご」という値を持っていたとき、記事Aの詳細ページに、{select_item}という変数で「りんご」を選択しているエントリーをリストにして一覧することができます。
select_itemが「りんご」だったときの詳細ページの図
今回はモジュールで出力されるカスタムフィールドの値を使用したいので、モジュールが出力された後にモジュールを実行しなければいけません。実行順序を少し遅らせるためには、ポストインクルードを使います。ポストインクルードについて詳しくはドキュメントをご覧ください。
<!-- BEGIN_MODULE Entry_Field id="current_eid" -->
<form action="" method="post" class="js-post_include-ready">
<input type="hidden" value="{select_item}" name="select_item">
<input type="hidden" value="select_item" name="field[]">
<input type="hidden" name="tpl" value="include/sub/entryList.html">
<input type="submit" name="ACMS_POST_2GET" style="display:none;">
</form>
<!-- END_MODULE Entry_Field -->今回はエントリーの情報を表示したかったため、Entry_Fieldのモジュールを使用しました。
あらかじめ、Entry_Fieldモジュールで、モジュールID名で作成しておきます。ここではモジュールID名を「current_eid」としました。新しく作成したモジュールIDでは、現在いるエントリーの情報を表示できるように、「エントリーID（eid）」のURLコンテキストにチェックをつけておきました。
ポストインクルードで使用するためのモジュールIDの設定
5行目で指定している、include/sub/entryList.html には、とくに特殊な設定は必要なく、通常のモジュールを置いてください。
<input type="hidden" name="tpl" value="include/main/curriculum/this_course_summary.html">
<!-- BEGIN_MODULE Entry_List id="select_item_list" -->
<div class="acms-margin-bottom-medium">
<!--#include file="/admin/module/setting.html"-->
<ul class="acms-list-group">
<!-- BEGIN entry:loop -->
<li><a href="{url}" class="acms-list-group-item">{title}</a></li>
<!-- END entry:loop -->
</ul>
</div>
<!-- END_MODULE Entry_List -->entryList.htmlの中に記述したモジュールにはモジュールIDの設定をしておく必要があります。ポストインクルードでフィールドの情報を渡しているため、フィールドのURLコンテキストが有効になった状態になったので、モジュールでもフィールドの情報が表示できるようになりました。Entry_List でフィールドの情報を表示するため、モジュールの設定も「フィールド（field）」のURLコンテキストを有効にしましょう。
表示用のモジュールIDの設定
ポストインクルードの記述で値を渡したカスタムフィールドの変数（この記事では「select_item」）と同じカスタムフィールド（この記事ではエントリーのカスタムフィールド）を作成し、値を入力してください。
ポストインクルードを設置したページに戻り、「include/sub/entryList.html」のテンプレートの中身が表示されれば完成です。もし表示されなかった方は手順をもう一度ご確認ください。
予定より遅くなっており申し訳ありません。やっとa-blog cmsの次期バージョンであるa-blog cms Ver. 2.7.0をリリースできる準備ができてきました。そこで今回は、ほぼリリース版と同じ a-blog cms Ver. 2.7.0 GM（ゴールデンマスター）をダウンロード出来るようにしました。
注意事項: このバージョンはサポート対象ではありません。
a-blog cmsの次期バージョンであるa-blog cms Ver. 2.7.0のパブリックベータをダウンロード出来るようにしました。 このバージョンは開発版になりますので、運用中のサイトにはインストールしないで下さい。このバージョンはサポート対象ではありません。
現状ライセンス発行のほうがphp7対応ができていませんので、開発ライセンスや正式ライセンスを使ってphp7で動かすことができません。パッケージに含まれるライセンスならphp7でも動かすことはできるようになっています。
