Adobe Creative SDK ハンズオン資料

03. /themes/site2015/include/head/js.html に以下の記述を追加する

Ver. 2.6.1以上とVer. 2.6.1未満でコードが違いますので、バージョンにあった方をご利用ください。

<!-- Load Feather code -->
<script type="text/javascript" src="http://feather.aviary.com/imaging/v2/editor.js"></script>

<!-- Instantiate Feather -->
<script>
var featherEditor = new Aviary.Feather({
    apiKey: ' ※ここに取得した CLIENT SECRET を入力してください ',
    theme: 'dark', // Check out our new 'light' and 'dark' themes!
    tools: 'all',
    appendTo: '',
    onSave: function(imageID, newURL) {
        var image           = new Image(),
            target          = this.target,
            createObjectURL = window.URL && window.URL.createObjectURL,
            req             = new XMLHttpRequest();

        req.open('GET', newURL, true);
        req.responseType = 'blob';
        req.send(null);
        
        req.onload = function( ) {
            if ( req.status != 200 ) {
                alert('error');
                return false;
            }

            // Ver. 2.6.1以上
            var resize = new ACMS.Dispatch.Imgresize(target);

            image.force         = true;
            image.target        = target;
            image.mime          = req.response.type;
            image.onload        = ACMS.Dispatch.Utility.imgToDataURL;
            image.src           = createObjectURL(req.response);
            image.callback      = function ( elm, dataUrl, reisze ) {
                resize.set(target, dataUrl, true);
            };

            // Ver. 2.6.1未満
            image.force         = true;
            image.target        = target;
            image.mime          = req.response.type;
            image.onload        = ACMS.Dispatch.Utility.imgToDataURL;
            image.src           = createObjectURL(req.response);
            image.callback      = function ( elm, dataUrl, reisze ) {
                ACMS.Dispatch._imgresize.set(target, dataUrl, true);
            };

            // 分岐ここまで
    
            featherEditor.close();
        };
    },
    onError: function(errorObj) {
        alert(errorObj.message);
    }
});

ACMS.addListener("acmsAddUnit", function( event ) {
    var item = event.obj.item;

    $('.js-adobe_cc_sdk', item).on("click", function() {
        var $self   = $(this),
            id      = $self.data('id'),
            src     = $self.data('src');

        featherEditor.launch({
            image: id,
            url: src,
            target: item
        });
        return false;
    });
});
</script>

<!-- BEGIN_IF [{tiny}/nem/] -->
<td class="entryFormFileentryFormImages">
	<a href="%{HTTP_ARCHIVES_DIR}{popup}" rel="prettyPhoto[]"><img src="%{ARCHIVES_DIR}{tiny}" width="{tinyX}" height="{tinyY}" alt="<!--T-->プレビュー<!--/T-->" class="js-img_resize_preview entryFormFileImage" /></a>
</td>
<!-- ELSE -->
<td class="entryFormFileentryFormImages">
	<img src="" width="280" alt="<!--T-->プレビュー<!--/T-->" class="js-img_resize_preview entryFormFileImage" style="display:none;" />
</td>
<!-- END_IF -->

<!-- BEGIN_IF [{tiny}/nem/] -->
<td class="entryFormFileentryFormImages">
	<a href="#" data-id="{id}" data-src="%{HTTP_ARCHIVES_DIR}{popup}" class="js-adobe_cc_sdk js-img_data_url"><img id="{id}" src="%{ARCHIVES_DIR}{tiny}" width="{tinyX}" height="{tinyY}" alt="プレビュー" class="js-img_resize_preview entryFormFileImage" /></a>
</td>
<!-- ELSE -->
<td class="entryFormFileentryFormImages">
	<a href="#" data-id="{id}" data-src="" class="js-adobe_cc_sdk js-img_data_url"><img id="{id}" src="" width="280" alt="プレビュー" class="js-img_resize_preview entryFormFileImage" style="display:none;" />
	</a>
</td>
<!-- END_IF -->