ごんれのラボ

iOS、Android、Adobe系ソフトの自動化スクリプトのことを書き連ねています。

InDesign に配置されたPDF形式ファイルの配置オプション「背景を透明に」のチェックの状態を確認する CEP Extensions を作った

概要

InDesign に配置されたPDF形式ファイルの配置オプション「背景を透明に」のチェックの有無を確認する CEP Extensions を作った。

背景

Twitter で下記記事が話題になっていた。
www.screen.co.jp

かなり厄介なバグ?でみなさん戦々恐々といった感じ。
しかも一度配置されたファイルの設定を手動で確認する方法がないという。
そんな中、一緒にもくもく会を主催してくれている @Uske_S さんが早速スクリプトを公開されていたのを見て、自分もなにか書こうと思ったことがきっかけ。

作ったもの

youtu.be

使い方

動画で大体のイメージがつくと思うけど、簡単に説明。

  1. zxp をダウンロードする(この記事の最後にリンクがあるのでそこから入手)
  2. ZXPInstaller で zxp をインストール(ZXPInstaller については別記事を参照)
  3. InDesignを再起動する
  4. 「メニュー>ウィンドウ>エクステンション」から「背景を透明にチェック簡易版」を選択
  5. 「背景を透明にチェック簡易版」パネルが表示されるので、他のパネルにくっつけるなどする
  6. グラフィックフレーム、もしくは画像を選択すると、パネルに情報が表示されるので、確認する

仕様的なもの

  • InDesign でオブジェクトを選択したイベントをトリガーにチェックを実行
  • グラフィックフレーム、もしくは画像を選択すると、「背景を透明に」オプションのチェックボックスの状態をパネルに表示
    • チェックがオンの場合は、「ON」と表示
    • チェックがオフの場合は、「OFF」と表示し、パネルの背景を赤にする
    • PDF形式以外の画像の場合は、「背景を透明にオプションがない形式の配置画像です」と表示
  • グラフィックフレーム以外は「配置画像ではありません」と表示
  • ドキュメントを開いていない、オブジェクトが選択されていない、選択したオブジェクトが2つ以上の場合は、「グラフィックフレーム、または画像を1つだけ選択してください」と表示

対応バージョン

InDesign CC 2015以降。

ソースコード

index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/styles.css"/>
        <link id="hostStyle" rel="stylesheet" href="css/theme.css"/>
        <title>背景を透明にチェック簡易版</title>
    </head>
    <body class="panel">
        <div class="container" style="padding: 5px; font-size: 12px; font-family: sans-serif; line-height: 250%; text-align: center;">
            <span>配置オプションの「背景を透明に」: <br />
                <span id="state" style="font-size: 16px; font-weight: bold;">グラフィックフレームか画像を1つだけ選択してください</span>
            </span>
        </div>
        <script src="js/libs/CSInterface-4.0.0.js"></script>
        <script src="js/libs/jquery-2.0.2.min.js"></script>
        <script src="js/themeManager.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

main.js

(function () {
    'use strict';
    var csInterface = new CSInterface();
    function init() {
        themeManager.init();
        // プロジェクト内のjsxディレクトリのパスを取得
        var jsxDirPath = csInterface.getSystemPath(SystemPath.EXTENSION) + "/jsx";
        // jsxにjsxディレクトリのパスを渡す
        csInterface.evalScript('setDirPath("' + jsxDirPath + '")');

        // オブジェクト選択時のイベントを受け取って、なんかする
        csInterface.addEventListener("afterSelectionChanged", function (evt) {
            csInterface.evalScript('setCallback()', function (e) {
            });
        });

        csInterface.addEventListener("getCallback", function (evt) {
            var message = '';
            var state = evt.data;
            if (state === 'notSelected') {
                message = 'グラフィックフレーム、または画像を1つだけ選択してください';
            } else if (state === 'notExistPdfAttributes') {
                message = '背景を透明にオプションがない形式の配置画像です';
            } else if (state === 'notImageObject') {
                message = '配置画像ではありません';
            } else if (state === 'ON') {
                message = 'ON';
            } else {
                message = 'OFF';
            }
            $(".panel").css('background', state === 'OFF' ? 'red' : '');
            $("#state").text(message);
        });
    }
    init();
}());

hostscript.jsx

// グローバル変数でjsxディレクトリのパスを保持
var dirPath = "";

// 引数で渡ってきたパスをグローバル変数に代入する
function setDirPath(jsxDirPath) {
    dirPath = jsxDirPath;
}

// コールバックをセットする
function setCallback() {
    try {
        var xLib = null;
        // PlugPlugExternalObject.frameworkのパスを生成
        var ppLibFile = File(dirPath + "/PlugPlugExternalObject.framework");
        if (ppLibFile.exists) {
            // ExternalObjectを生成
            xLib = new ExternalObject("lib:"+ ppLibFile.fullName);
        }
        else {
            throw new Error("Can't find 'PlugPlugExternalObject.framework'.");
        }
    }  catch(e) { alert(e); }

    // 配置オプションの「背景を透明に」の状態を返す(初期値はtrueを返す)
    var checkTransparentBackground = function () {
        if (app.documents.length === 0) return 'notSelected';
        if (app.selection.length !== 1) return 'notSelected';
        var selObj = app.selection[0];
        if (selObj.constructor.name === 'Rectangle'
            && selObj.graphics.length === 1
            && selObj.graphics[0].imageTypeName.indexOf("PDF") > -1) {
            // pdfAttributesはisValidが動作しない...
            try {
                if (selObj.graphics[0].pdfAttributes.transparentBackground) {
                    return 'ON';
                } else {
                    return 'OFF';
                }
            } catch (e) {
                return 'notExistPdfAttributes';
            }
        }
        if (selObj.constructor.name === 'TextFrame') {
            return 'notImageObject';
        }
        try {
            if (selObj.pdfAttributes.transparentBackground) {
                return 'ON';
            } else {
                return 'OFF';
            }
        } catch (e) {
            return 'notExistPdfAttributes';
        }
        return 'OFF';
    };

    // コールバック処理
    var eventObj = new CSXSEvent();
    eventObj.type = "getCallback";
    eventObj.data = checkTransparentBackground();
    eventObj.dispatch();
    xLib.unload();
    return true;
}

ダウンロード

https://drive.google.com/open?id=0B22BuC_RZ_hvLWZKWk4tbENvQlU
サポートしていないファイルのせいか、エラーが表示されるが、ダウンロードはできるはず。

ZXPInstaller を使って、Adobeアプリケーションのエクステンションをインストールする

概要

Adobe Add-Ons 以外から入手した zxp(CEP Extensions のパッケージ)を、ドラッグ&ドロップで簡単にインストールできる ZXPInstaller の紹介。
自分で開発した CEP Extensions を配布前にちゃんとインストールできるか、起動できるかの確認にも使える。

入手方法

zxpinstaller.com

上記からダウンロード。

インストール方法

Mac のインストール方法を紹介する。 ダウンロードした dmg をダブルクリックして、表示されたダイアログ内の ZXPInstaller のアイコンを、同じダイアログ内の Applications フォルダにドラッグ&ドロップする。

使い方

ZXPInstaller を起動して、インストールしたい zxp をウインドウ内にドラッグ&ドロップする。
おそらく初回起動時はMacの設定によって、セキュリティの警告が表示される(開発元がどうとか)ので、よしなに対応する。
インストール開始時に管理者パスワードの入力を求められる。
zxp インストール後は対象の Adobe アプリケーションを再起動する。

f:id:macneko-ayu:20170823233700j:plain 起動時

f:id:macneko-ayu:20170823233653j:plain インストール中

f:id:macneko-ayu:20170823233648j:plain インストール完了

インストールされた zxp の場所

/Library/Application Support/Adobe/CEP/extensions

DTPerのスクリプトもくもく会 #3 を開催します

申し込みページ

dtpmkmk.connpass.com

Information

  • 今回は少し大きめの会議室(15人程度収容可能)をお借りしました(猫社員はおりません)
  • ちょっとしたサプライズをご用意しています
  • 参加者が相変わらず豪華です
  • 8/22時点で一般枠、初心者枠が埋まっておりますが、一般枠を2名追加しました
  • 大型モニタをお借りしているので、画面を使って質問したいこと、発表したいことがあればハッシュタグ(#dtpscriptmkmk3)に流してください
    • モニタはDサブとHDMIに対応しています。Thunderbolt2→HDMIの変換ケーブルを1本ご用意します。

最後に

ご参加お待ちしております!

DTPerのスクリプトもくもく会 #2 を開催しました

前説

DTPerのスクリプトもくもく会 #2 を開催しました。

dtpmkmk.connpass.com

参加者は私を含め11名でした。
今回は電子書籍に詳しい方、文字化けに詳しい方が参加されていました。
また、初心者枠を3名に増員し、メンター枠を設けました。

当日の雰囲気

みなさん熱心にもくもくされていて、特に初心者枠の方々は各自やりたいことを自分で決めて進めていらっしゃったので、他の参加者にも良い刺激になったのではないかしら。
少なくとも私は「これはすぐ追い抜かれそうだ…」とワクワクしていました。
CEPに興味を持たれている方もいらっしゃったので、西の御方を召喚する会もやりたいですねー。

Tweetのまとめ

Togetter でまとめました。
togetter.com

今後の予定

次回は9/9(土)に開催します。
参加者、絶賛募集中! dtpmkmk.connpass.com

bootstrap-select のプルダウンの矢印を文字(▼)にする方法

概要

bootstrap-select を使ってて、プルダウン横の矢印が小さすぎるので、自分でサイズを指定したい、できたら font-size 指定したいなーと思ったので、やってみた。

環境

項目名 バージョン
bootstrap-select.js v1.2.2
Chrome v59.0.3071.115

やりかた

CSSをいじるだけ。
dropup は使ってないので、無視しています。

/* デフォルトの矢印を非表示にする */
.bootstrap-select.btn-group .dropdown-toggle .caret {
    display: none;
}
/* プルダウンの右端に▼を挿入する */
.bootstrap-select.btn-group .btn .filter-option:after {
    content: '▼';
    float: right;
    font-size: 20px;
}

before/after

https://jsfiddle.net/c26zc1f3/2/

before
f:id:macneko-ayu:20170727153000p:plain

after
f:id:macneko-ayu:20170727153005p:plain

昔書いたスクリプトを見直すときに留意しておくこと

概要

DTPerのスクリプトもくもく会 #2 で参加者の方にお話しした内容の抜粋版。
これぐらいの気持ちでリファクタリングするのが心理的負担も少なくていいと思う。

本題

  • typoを直す
    • 変数名、メソッド名、コメントのtypoを直す
  • 同じ処理を二度書かない
    • 複数回書いている処理を抽出してメソッドに書き直す
    • プロパティは変数にいれておく
  • コメントを見直す
    • 読み直して意味がわからないものは書き直す
  • メソッドに概要、パラメーター、戻り値などのコメントをつける
  • 処理をシンプルなものに書き直せないか見直す
    • if文、for文のネストを減らす

追加でやるなら

  • 変数名、メソッド名が処理に沿っているか見直す
    • imageなのにtextFrameって命名するのはダメ etc.
  • どのスクリプトでも共通して書いているような処理はincludeで読み込むようにする
    • 自分用のライブラリを作る
  • 頻繁に使わないものを優先して見直す
    • 使わないものは忘れるのも早い

諦めることも必要

rbenv global で ruby のバージョンが切り替えられなくて困った

概要

久しぶりに自宅 Mac の rbenv で ruby のバージョンを切り替える必要があり、

$ rbenv global system

とコマンドを叩いてみたが、rbenv でインストールしたバージョンから変わらなかった。
困った。

環境

Macbook Air Mid 2012
macOS Sierra 10.12.4

結論

/Users/(user_name)/.ruby_version というファイルのせいで、rbenv で選択している ruby のバージョンが更新されていなかった模様。
/Users/(user_name)/.ruby_version の名前を、/Users/(user_name)/.ruby_version.bak に変更して、様子見をすることにした。

試行錯誤

.bashrc を確認

ちゃんと設定されていた。

eval "$(rbenv init -)"

$PATH を確認

いろいろ入ってるけど、/usr/bin より先に /Users/(user_name)/.rbenv/shims が出力されているので、問題ないはず。

$ echo $PATH
/Users/(user_name)/.pyenv/shims:/Users/(user_name)/.rbenv/shims:/Users/(user_name)/.nodebrew/current/bin:/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/eclipse/android/platform-tools:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/share/dotnet:/Library/Frameworks/Mono.framework/Versions/Current/Commands

ruby のパスを確認

あってた。

$ which ruby
/Users/(user_name)/.rbenv/shims/ruby

rbenv を一度アンインストールして、再インストール

アンインストール。

$ brew uninstall rbenv

削除されたことを確認。

$ which rbenv

出力されないので削除成功。
再度、インストール。

$ brew install rbenv

インストールされたことを確認。

$ which rbenv
/usr/local/bin/rbenv
$ rbenv -v
rbenv 1.1.1

インストール成功。

バージョンが切り替えられるようになったか確認したが、症状は改善せず。

新たに v.2.4.1 の ruby をインストール

rbenv install 2.4.1

成功。

rbenv でインストール済みのバージョンを削除

$ rbenv uninstall 2.3.0

削除した結果、

$ rbenv global 2.4.1

ってコマンド叩くと、rbenv から「2.3.0 なんてバージョン見つからない」って怒られるようになったw
ですよねー。
知ってた。

とあるファイルの存在に気づいた

$ rbenv versions
  system
* 2.4.1 (set by /Users/(user_name)/.ruby_version)

.ruby_version is なに?
調べたらこのファイルで ruby の current version を管理している模様。
そして、

/Users/(user_name)/.rbenv/version

というファイルの存在にも気づく。

$ rbenv global (ruby_version)

というコマンドを叩いたときに更新されていたのは、

/Users/(user_name)/.rbenv/version

だった。

更新されていないファイルが悪さしている?

リネームして読み込まれないようにしてみる。

$ mv /Users/(user_name)/.ruby_version /Users/(user_name)/.ruby_version.bak

試してみる。

$ rbenv versions
  system
* 2.4.1 (set by /Users/(user_name)/.ruby_version)
$ rbenv global system
$ rbenv versions
* system
 2.4.1 (set by /Users/(user_name)/.ruby_version)

直った!!!

まとめ

強引に対処してしまったので、これでいいのか自信がないので、「こんなことのある」程度で読んでくださいまし。