タグ: Designer Content

DesignerContent(オリジナル)ブロックのインストール

●DesignerContent(デザイナーコンテント)で作成した、ブロックを他のconcrete5のブロックに追加する (concrete5 5.6.3.3.ja)

 ※パッケージを使ってインストールできるようにするほうがよいかもです。
  (理由は、そのテーマでしか使わなかったりするためです。そうするとカスタムテンプレートも含むほうがいいですね)

 例)ここでは、『画像切替ブロック』を他のconcrete5(5.6.3.3.ja)へインストールする方法とします。 PCサイトとスマホ(スマートフォン)サイトの画像を切り替える方法(3)(4)(5)で作成&変更したブロック

 [1]DesignerContentでダウンロードしていた「select_image_by_agent」フォルダを
  インストールしたいconcrete5の/blocksフォルダへアップロードします。


 [2]ブロックタイプからインストール待ちのブロックのインストールを押す。
  「管理画面 → (スタックとブロック) → ブロックタイプ → (画像切替(ByAgent)) → インストール」

org_block_inst1.jpg


ブロックタイプがインストールされました。
org_block_inst2.jpg


 [3]画像切替(ByAgent)ブロックが追加されたことを確認する。

org_block_inst3.jpg

 [4](補足)DesignerContent(オリジナル)ブロックのアンインストール
  (注意)念のため、データベースのバックアップを取得しておいてください。
   「管理画面 → システムと設定 → (バックアップとリストア) → データベースをバックアップ」にて「DBバックアップを実行」を押す

   ※使用中のブロック(履歴含む)の場合でも削除されます。

block_delete1.jpg

「削除」ボタンを押すと、以下のダイアログでますので、「OK」を押してください。
block_delete1_alert.jpg

   ※btDCSelectImageByAgentテーブルは削除されません。
   手動で削除する必要があります。

   (手順)MySQLのデータベース管理画面から、該当データベースを選びSQLで、
       drop table btDCSelectImageByAgent
       として、削除してください。

   ※アンインストールが完了すると、上記手順[2]のインストール待ちの状態に戻ります。

block_delete2.jpg

   ※最後に、アップロードしていた、「select_image_by_agent」フォルダを/blocksから削除してください。

PCサイトとスマホ(スマートフォン)サイトの画像を切り替える方法(6)

6)動作検証
 (キャッシュ設定変更、キャッシュをクリア後)::PCとスマートフォン等から画像が切り替わっていることの確認
 (※当マインドハーツのトップページがこの機能を使って、ビルボード画像を切り替えています)

 [1]ページへブロックの追加
org_block_insert1.jpg

org_block_insert2.jpg

 [2]ブロックの編集画面で、画像2枚、リンクを2つ(※画像切替なので、リンク先は同じ)
org_block_img_set1.jpg

org_block_img_set2.jpg

 [3](重要)キャッシュのクリア
   ※「管理画面 → システムと設定 → 最適化 → キャッシュをクリア」にて「キャッシュをクリア」を押す

 [4](重要)キャッシュの設定
   ※注意!・・・「フルページキャッシュ」に設定してしまうと、画像切替ができません。

cache_setting.jpg

 [5]スマートフォンもしくは、ブラウザ(FireFox等でユーザーエージェントを変更できるもの)で
   表示を確認する
   ※参考画像リンク(トップページ)

PCサイトとスマホ(スマートフォン)サイトの画像を切り替える方法(5)

5)controller.phpのキャッシュの修正

●ブロックキャッシュをOFFにする修正(controller.php)
 ※これを変更するためだけに、オリジナルのブロックを作っているようなものなんです。
  ページ単位で、キャッシュをOFFにしておくなら、通常のカスタムテンプレートで、
  画像を切り替えるコードをかいてあげるだけでOKです。(最初はそうしていました)

  しかし、concrete5にはブロック単位でキャッシュをコントロールする機能があるので、
  (この例は単純な画像の切り替え)用途は広いと思います。

 ※キャッシュ制御に関して、詳しくは、本家concrete5日本語サイト
  テーマで叩いたAPIのキャッシュについて
  http://concrete5-japan.org/community/forums/development/post-8796/
  を参照ください。

[修正前] (controller.php・・・一部)
(省略)

class SelectImageByAgentBlockController extends BlockController {

protected $btName = '画像切替(ByAgent)';
protected $btDescription = 'UserAgentによる2種類の画像切替ブロック(DesignerContent)';
protected $btTable = 'btDCSelectImageByAgent';

protected $btInterfaceWidth = "700";
protected $btInterfaceHeight = "450";

protected $btCacheBlockRecord = true;
protected $btCacheBlockOutput = true;
protected $btCacheBlockOutputOnPost = true;
protected $btCacheBlockOutputForRegisteredUsers = false;
protected $btCacheBlockOutputLifetime = CACHE_LIFETIME;

(省略)



[修正後] (controller.php・・・一部)
(省略)

class SelectImageByAgentBlockController extends BlockController {

protected $btName = '画像切替(ByAgent)';
protected $btDescription = 'UserAgentによる2種類の画像切替ブロック(DesignerContent)';
protected $btTable = 'btDCSelectImageByAgent';

protected $btInterfaceWidth = "700";
protected $btInterfaceHeight = "450";

protected $btCacheBlockRecord = true;
// protected $btCacheBlockOutput = true;  ※これで、ブロック毎のキャッシュを制御
protected $btCacheBlockOutput = false;
protected $btCacheBlockOutputOnPost = true;
protected $btCacheBlockOutputForRegisteredUsers = false;
protected $btCacheBlockOutputLifetime = CACHE_LIFETIME;

(省略)

PCサイトとスマホ(スマートフォン)サイトの画像を切り替える方法(4)

4)画像切り替え追加

( 2)でできたブロックのview.php(カスタムテンプレートでもどうぞ)に 3)のメソッド(関数)を使って作成 )

ダウンロードした、フォルダ(select_image_by_agent)内は以下のファイルがあります。

add.php
auto.js
controller.php
db.xml
edit.php
icon.png
view.php

※ファイル個々の内容は、本家サイト、
ホーム → concrete5の使い方・ヘルプv5.6 → 開発者向け → ブロックの作り方
concrete5 ブロックの基本」 → 「ブロックのファイル構成」参照
http://concrete5-japan.org/help/5-6/developer/making_blocks/

ここでは、controller.phpview.phpを修正します。
※view.php はカスタムテンプレート(本家サイト参照)を使って作成・変更しても結構です。 http://concrete5-japan.org/help/5-6/design/block_custom_template/

●画像を切替える修正(view.php)
http://concrete5-japan.org/community/forums/beginner/post-10347/post-10351/
より、デバイスを切り替えるクラスがconcrete5に標準であるので、この「Mobile_Detect」を使って、 画像を切り替えることが出来るようにコードを追加します。

[修正前] (view.php)
<?php defined('C5_EXECUTE') or die("Access Denied.");
$nh = Loader::helper('navigation');
?>

<class = "slide">

<?php if (!empty($field_2_image)): ?>
<!-- 画像1(PC) -->
<?php if (!empty($field_2_image_internalLinkCID)) { ?><a href="<?php echo $nh->getLinkToCollection(Page::getByID($field_2_image_internalLinkCID), true); ?>"><?php } ?><img src="<?php echo $field_2_image->src; ?>" width="<?php echo $field_2_image->width; ?>" height="<?php echo $field_2_image->height; ?>" alt="" /><?php if (!empty($field_2_image_internalLinkCID)) { ?></a><?php } ?> <?php endif; ?>

<?php if (!empty($field_3_image)): ?>
<!-- 画像2(SP) -->
<?php if (!empty($field_3_image_internalLinkCID)) { ?><a href="<?php echo $nh->getLinkToCollection(Page::getByID($field_3_image_internalLinkCID), true); ?>"><?php } ?><img src="<?php echo $field_3_image->src; ?>" width="<?php echo $field_3_image->width; ?>" height="<?php echo $field_3_image->height; ?>" alt="" /><?php if (!empty($field_3_image_internalLinkCID)) { ?></a><?php } ?> <?php endif; ?>

</div>


[修正後] (view.php)
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$nh = Loader::helper('navigation');
$md = new Mobile_Detect();
?>

<div class="slide">

<?php
if(!$md->isMobile()) {
?>
<?php if (!empty($field_2_image)): ?>
<!--画像1(PC) -->
<?php if (!empty($field_2_image_internalLinkCID)) { ?><a href="<?php echo $nh->getLinkToCollection(Page::getByID($field_2_image_internalLinkCID), true); ?>"><?php } ?><img src="<?php echo $field_2_image->src; ?>" width="<?php echo $field_2_image->width; ?>" height="<?php echo $field_2_image->height; ?>" alt="" /><?php if (!empty($field_2_image_internalLinkCID)) { ?></a><?php } ?> <?php endif; ?>
<?php
} else {
<?php if (!empty($field_3_image)): ?>
<!--画像2(SP) -->
<?php if (!empty($field_3_image_internalLinkCID)) { ?><a href="<?php echo $nh->getLinkToCollection(Page::getByID($field_3_image_internalLinkCID), true); ?>"><?php } ?><img src="<?php echo $field_3_image->src; ?>" width="<?php echo $field_3_image->width; ?>" height="<?php echo $field_3_image->height; ?>" alt="" /><?php if (!empty($field_3_image_internalLinkCID)) { ?></a><?php } ?> <?php endif; ?>
?>

<?php
}
?>

</div>

PCサイトとスマホ(スマートフォン)サイトの画像を切り替える方法(3)

2)オリジナルブロックの作成(リンク付き画像2個[PC用/スマホ用]表示ブロック)

Designer Conctent のインストールが正常に完了すると、『管理画面』 → 「スタックとブロック」の一番下に 「Designer Content」が表示されるので、クリックする。

Manager Display.jpg

オリジナルブロックを作成する画面が開く

Designer Content make_block.jpg

 
 ※Designer Content の表示が英語、日本語混じりなのは、このバージョンが、部分的にしか、ローカライズ(日本語化)されていないためかと思われます。
  あらかじめご了承ください。

Block Handle:
ブロック名:
Block Description:
(ブロックの説明はオプション)

に以下のように設定しています。

※命名規則は、小文字とアンダースコアのみ
 (でないと以下のエラーが出ます)
Cannot proceed! Please correct the following errors:
* Block Handle can only contain lowercase letters and underscores.

Block Handle: select_image_by_agent
ブロック名: 画像切替(ByAgent)
Block Description: UserAgentによる2種類の画像切替ブロック(Designer Content)

make_block_1(Designer Content).jpg

 ★作成するブロックの仕様では、画像を2個登録できるようにするので

Add Field: [Static HTML] [Text Box] [テキストエリア(複数行)] [画像] [File Download] [Page Link] [外部URL] [Date Picker]  [Dropdown List] [WYSIWYG Editor]

[Static HTML] をクリック。
続いて、 [画像]2回クリックする。
最後に、もう一度、[Static HTML]をクリックして、
以下のように「class」と編集画面で表示される「画像1(PC)」、「画像2(SP)」を適宜入力する。

※画像にリンク必要なら、Show Link Field: 「なし」 → 「Sitemap  or外部URL にしてください
(当手順では、サイト内のリンクを追加しています)

make_block_2(Designer Content)s.jpg

 設定が出来たら、『Make The Block!』ボタンを押す。

 ※一度作成すると、再編集はできないので、作成中の画面のハードコピーを取得しておくか、何らかのメモを残しておくこと。
 ※一度作成してみて、どんなファイル構造になっているかを確認するのも使い方に慣れるのにはおすすめです。

make_block_4(Designer Content).jpg

 「Success!」 と表示されればブロックは完成で利用が可能です。

 ※concrete5フォルダ内、Blocks/フォルダを確認してください。
select_image_by_agentフォルダができているので、これをFTPソフト等で、ダウンロードします。

 ※データベースには、btDCSelectImageByAgent というテーブルが作成されています。

btDCSelectImageByAgent 

フィールド種別ヌル(NULL)デフォルト値コメント
bID int(10) いいえ     
field_2_image_fID int(11) はい  NULL   
field_2_image_internalLinkCID int(11) はい  NULL   
field_3_image_fID int(11) はい  NULL   
field_3_image_internalLinkCID int(11) はい  NULL   

※上記の結果表示用Tableは、jquery plugin の jQuery Basic Table を使用して整形しています