2.5.1 / 2.5.1.1 をご利用の方へ アップロード画像がPNG形式に

今回、2.5.1 で実装された新しい機能で、ブラウザ上で画像をリサイズする機能というものがあります。この機能ですが、現状の仕様だとアップロードした画像のほとんどのファイルが形式が png になってしまいます。

もし、現状のバージョンで、png になってしまう事を止めたいという事であれば、 /js/config.js の 510行目のあたりにある resizeImage の設定を off にしてください。

//--------------
// resize image
resizeImage : 'off',

標準が off になっていて、全部 png になってもいいから、大きなファイルでもアップできた方がいい人が on にする仕様にするべきでした。申し訳ありませんでした。

今回の機能としては、canvas を活用してアップロードする前にリサイズ機能をブラウザ側で実装しています。その際に、canvas では png 形式を必須としており一部のブラウザでは、jpeg をサポートしていない事から、このような仕様となっていました。

参考:

今後の改良として、大きな画像というところでは、jpeg である事が多いですので、対応していないブラウザの時のみ png にし、対応しているブラウザであった場合には jpeg になるように、次のバージョン 2.5.1.2 で改良したいと思っています。

近日中にリリース予定ですので、よろしくお願いいたします。

組み込みJSについて

a-blog cmsには、標準でJavaScriptが組み込まれています(組み込みJSと呼んでいます)
設定変更の方法について紹介します。各機能の詳細についてはリファレンスを参照してください。

各種ライブラリの使用と設定について

各種機能には、ライブラリを使用しているものが多数あります。基本的な設定は/js/config.js に記載しています。
CKEditorなどライブラリによっては、それぞれのconfigファイルがあるものもあります。

設定を変更する場合は、config.jsの内容を変更する必要がありますが、直接/js/config.jsファイルを変更するのではなく、/themes/お使いのテーマ/js/xxxx.js を作成し、必要な値を上書きするようにします。
直接config.jsを変更しないのは、CMSのバージョンアップ時に誤ってconfig.jsを上書きするリスクを回避するためです。

設定を編集する

使用したいJavaScriptファイルを用意する

適用しているテーマフォルダ内にJavaScriptファイルを入れます。

例)「sample.js」というJavaScriptファイルを使用したい場合
/themes/適用しているテーマ/js/sample.js

テンプレートから参照する

JavaScriptを適用したいテンプレートのhead内に、使用したいJavaScriptファイルを参照するソースコードを記述します。a-blog cms用のJavaScriptファイルの参照コード(「BEGIN_MODULE Js」〜「END_MODULE Js」の部分)より後に記述してください

例)「sample.js」というJSファイルを使用したい場合のhead内の記述

<!-- BEGIN_MODULE Js --><script type="text/javascript" src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
<script type="text/javascript" src="/js/sample.js" charset="UTF-8"></script>

JavaScriptを編集する

手順1項で作成したJavaScriptファイルに、設定を記述します。/js/config.jsの設定を上書きすることになります。頭に「ACMS.Config.」を付けて記述してください。
また、Ver. 2.5.0よりacms.jsが非同期的にjavascriptを読み込み実行しますので、config.jsが読まれた事が保証される
ACMS.Ready(function() { });
の中に書きます。

例)検索キーワードのハイライトを適用するセレクタ要素を追加する場合

ACMS.Ready(function() {
    ACMS.Config.searchKeywordHighlightMark  = '.entryTitle, .search .summary, .selectKeyword';
});

配列で設定を複数記述する記述方法

同じページで同じJavaScriptの動作を複数の場所で動作させたい場合、ブログ内で違う設定で動作させたい場合などに、配列で記述します。括弧([], {})の位置に注意してください。

例)絵文字の設定を配列で複数設定する場合

ACMS.Ready(function() {
ACMS.Config.emoArray    = [
    {
        'mark'      : 'textarea.js-emoditorEmoji',
        'toolbar'   : [['Emoji']],
        'config'    : {
            enterMode       : 1,
            language        : 'ja'
        }
    },
    {
        'mark'      : 'textarea.js-emoditorColor',
        'toolbar'   : [['TextColor','BGColor']],
        'config'    : {
             enterMode       : 1,
             language        : 'ja'
        }
    }
];
});
ACMS.Ready(function() {
ACMS.Config.bxsliderConf = 
{
    mode            : 'fade', // horizontal | vertical | fade
    speed           : 800,
    captions        : true,
    auto            : true,
    pause           : 6000,
    adaptiveHeight  :true
};
});