SmartPhoto.js を a-blog cms に実装するには


最近のアップルップルの新しい動きとして、a-blog cms に実装する前に JavaScript ライブラリーとして公開して、その後の安定稼働版を取り込んでいくようにしています。ですから、a-blog cms 以外で作られた Webサイトにも利用が可能で、暫定的ではありますが、SmartPhoto.js WordPress 用のプラグイン も準備しています。

テンプレートの探し方

テーマをカスタマイズしているとテンプレートファイルはどうしても多くなってきます。そんな大量のテンプレートの中から、目的のテンプレートを探すのは時間がかかります。また自分以外が作ったテーマを触る場合もテンプレートを探すのに一苦労します。

そこで、ここでは目的のテンプレートを早く見つける方法を紹介していきます。

下準備

管理ページ > コンフィグ > 出力設定の HTMLコメントの削除 のチェックがついていたら外します。


出力設定管理画面

出力設定管理画面


config.server.phpDEBUG_MODE を "1" に設定。

サイトが公開中の場合は、DEBUG_MODEをOFFにする事はオススメできないので、以下のように特定IPアドレスからのアクセスのみDEBUG_MODEをOFFにする事もできます。

if ( $_SERVER['REMOTE_ADDR'] === 'xxx.xxx.xxx.xxx' ) {
  define('DEBUG_MODE', 1);
} else {
  define('DEBUG_MODE', 0);
}

テンプレート確認

ログインをして、テンプレートを確認したいページに移動します。ログインをしている状態だと以下のように、現在表示中のテンプレートと表示され、どのテンプレートが使用されているかわかります。


管理ボックス

管理ボックス


ただし、このテンプレートに目的の修正箇所があればいいのですが、インクルードされたテンプレートがほとんどだと思います。そこで次は修正箇所周辺のソースを確認します。確認すると以下のようにインクルードされている箇所がHTMLコメントで表示されるようになります。


インクルードファイルのソース周辺

インクルードファイルのソース周辺


インクルードファイルのパスがHTMLコメントでわかるようになりました。これで目的のテンプレートをすぐに探すことが出来るようになりました。

ロリポップ/レンタルサーバー‎ で画像がアップロードできない


GMOペパボ の ロリポップ レンタルサーバーサービスで a-blog cms をご利用の場合、画像がアップロードできない場合があることが確認されました。

原因

画像エンジンの Image Magick 周りの問題で、うまくファイルを保存できないことが原因。

対策方法

画像エンジンにGDを使います。 private/config.system.yaml ファイルに以下を追記ください。

image_magick : off

以上になります。 今後ともa-blog cmsをよろしくお願いいたします。

default_nostyle

この記事では、omakeフォルダ内に同梱している、default_nostyleフォルダについての説明をしています。

場所は、/omake/snippets/default_nostyle/ にて用意しています。

default_nostyleフォルダとは

default_nostyleフォルダに入っているのはacms.cssのクラス名なしのコードをまとめたスニペット集になります(※Ver.2.5.1より、リファレンスや管理画面内で用意しているスニペットはacms.cssのクラス名がすでに適応されているコードに変更されました)。

default_nostyleフォルダで用意しているEntry_List の例

<!-- BEGIN_MODULE Entry_List -->
<div>
<!--#include file="/admin/module/setting.html" -->
<ul>
	<!-- BEGIN entry:loop -->
	<li><a href="{url}">{title}</a></li>
	<!-- END entry:loop -->
</ul>
</div>
<!-- END_MODULE Entry_List -->

上記のコードのように、default_nostyleフォルダで用意しているスニペットには、クラスは適応されていません。

使い方

default_nostyleフォルダの使い方は自由となっておりますが、以下のような場面でご利用いただけます。

  • acms.cssのクラス名が必要ないとき
  • acms.cssのクラス名がないバージョンで、テキストエディターやスニペット管理アプリなどのスニペットを作りたいとき
  • 管理画面のスニペットをacms.cssのクラス名が付与されていない状態にしたいとき

1つめ、2つめについてはご自由にお使いください。ここでは、3つめの「管理画面のスニペットをacms.cssのクラス名が付与されていない状態にしたいとき」だけ方法をご説明します。

管理画面のスニペットをacms.cssのクラス名が付与されていない状態にしたいとき

/default_nostyle/の中のコード・フォルダ全てを /themes/使用中のテーマ/acms-code/snippets/ に移動してください。

srcフォルダについて

/omake/snippets/default_nostyle/ を見ると、/src/というフォルダが含まれています。こちらは、管理画面で使っているスニペットを表示するためのCSSとJSになるので、/src/フォルダも一緒に移動してください。


(スクリーンショット)

/src/フォルダの中にはsnipets.cssとsnippets.jsが入っている

管理画面>コンフィグの順にページを移動し、Entry_Listのスニペットのテキストリンクをクリックすると、acms.cssのクラス名が外れているスニペットを参照できるようになっています。


(スクリーンショット)

クラス名が外れているEntry_Listのスニペット表示画面