DTPab

印刷やデザイン、アドビ製アプリやスクリプトなど、雑多な技術ブログ

DTPerのスクリプトもくもく会#20 オンライン を開催しました

もくもく会 report ExtendScript CEP VSCode
f:id:uske_S:20200531002825p:plain

2020年11月22日、DTPerのスクリプトもくもく会#20を開催しました！
もう20回目の開催になるのですね〜。感慨深い。
今回も初めましての方にご参加いただけて嬉しい限りです。新しい方に参加してもらえないとこういった勉強会は緩やかに衰退していくような気がしているので（最終的に内輪の集まりになりかねない）、本当にありがたいです！

では今回の開催振り返り報告です。

試験的オフライン開催

今回、主催2名（自分とこうちゃん黒猫まみれ（id:macneko-ayu）氏）に @KappaCauser 氏にも加わっていただき、試験的にオフラインでも集まりました。

開催時に注意したこと

集まる際に注意した点は下記のとおりです。

  • 朝の検温（体調管理）
  • マスクの着用
  • スペース入室直前の手指の消毒
  • レンタルスペースの換気
  • ソーシャルディスタンスを意識した座席配置
  • 席の移動なし
  • 飲食物の共有をしない

今回借りたスペースは軽く10名は入れるところで、そこを3人で利用しました。最低でも1.5m以上は確保できたし、面と向かって座らない工夫もしました。
スペースが角部屋だったこともあり換気も十分できましたし、５名程度であれば（管理の範囲としても、室内の利用密度としても）今後オフラインでも開催できそうかな、という印象を得ました。
ただ、また感染者数が増加傾向にありますし、しばらくはオンラインをメインに開催することにはなりそうです。社会情勢を見ながら対応していきます。

開催にあたっての気づき

  • 同室に複数名参加するため、ヘッドセット等がないとハウリングしてオンライン参加の方に迷惑
    • 今回は僕以外のマシンの内蔵マイクをオフにして対応した（協力いただいたお二方、ありがとう！）
  • Wi-Fiの速度が事前にわかる場合はいいが、スペースによっては通信速度が確保できない可能性がある
    • 今回のスペースは事前にWi-Fiのスペックが分かっていたので助かった（下記はスペースの掲載数値）
      • 最大同時接続数：16人
      • 通信速度：下り 128Mbps 上り 86Mbps
    • 3人が同時にGoogle Meetに接続しても何ら問題なかった
  • 基本的な質問のやりとりはSlackで行ったため、誰かの質問で全員の集中が切られることがなかったのは良かった
    • チャットで質問されると否が応でもそちらに意識がいってしまい（少なくとも自分は）集中が途切れると感じるため
    • SlackであればURLやコードのやりとりがしやすいのも良い
    • 必要に応じて画面共有も行ったものの、Slackを見てないと急に共有されて驚かれたかもしれない（反省）
  • Google Meetは適当に背景処理ができて良い（Zoomもできるけど有料契約してないので）
  • やはりGoogle Meet＋InDesign＋VSCode＋Google Chromeは2013モデルのMBAでは処理が重いw
  • オンラインだと画面共有できるのでプロジェクタを借りる必要はなかった

次回に向けて

  • 画面共有の前に参加者には一度確認したほうが良いかも（Slackのどの質問に対する対応なのかなど）
  • Slackに慣れない参加者（特にDTP界隈は使ったことがないひとが多いはず）もいるので、かんたんな操作説明みたいのがあったほうが良さそう
  • 新しいMacbook Airが欲しい

いただいた質問や話題

記憶の範囲でいただいた質問や出た話題を共有します。

マウスポインタの位置・座標的なものを取得する手法（ExtendScript）

おそらくないと思います、と回答しました。Keyboard Maestroなどを使えばあるいは？ みたいなことをこうちゃんと僕とで言いました。
目的としては特定の場所でクリックすることのようなので、例えばAppleScriptにはClickイベントがあるよ的なこと*1も伝えました。

CEPでcsInterface.evalScript()が引数を持って実行できない

これは自分でつまずいたやつ。例えば、

var x = "hoge";
csInterface.evalScript(`myFunc(${x})`);

が実行できなかった。

分かってしまえば単純だったんだけど、引数には文字列型しか渡せないので文字列で展開する必要がある。正解はこう*2。

var x = "hoge";
csInterface.evalScript(`myFunc("${x}")`);

CEPをリモートデバッグできない

以前とやり方が変わったっぽい？*3

手順

  1. アプリからCEPのパネルを展開しておく（ここまでは従前と同じ）
  2. chrome://inspect/#devices にアクセス
  3. Configure...をクリック
    f:id:uske_S:20201122224422p:plain
    Configure... をクリック
  4. localhost:8090を追加（InDesignの場合）*4
    f:id:uske_S:20201122224531p:plain
    localhost:8090 を追加
  5. Remote Targetのinspectをクリック
    f:id:uske_S:20201122224826p:plain
    inspect をクリック
  6. こんな感じで要素の検証やコンソールを利用できる
    f:id:uske_S:20201122225326p:plain
    リモートデバッグの様子

ESDebugger for VSCodeで「function の行で ";"が必要です。」というLintエラーが出る？

f:id:uske_S:20201122225619p:plain
Lintエラー？
実はfunctionの綴りを間違えたタイポだったのですが、Lintエラーの内容は文字通り受け取れないケースが多々あります。この辺は慣れるしかない（どんなエラーでどんな対処が必要か経験値が必要）ので、エラーの内容が検討つかなければ言われた行やスコープを、目を皿のようにして不具合を探し出すしかないです*5。

CEPのパネル側のHTMLにラジオボタンが描画されない

VSCodeのCC Extension BuilderのSpectrumでビルドしたCEPで、ラジオボタンが表示されない事象に遭遇しました。

f:id:uske_S:20201122225927p:plain
ラジオボタン…？

その後改めて調べてみたのですが、本当の原因は分からずじまいでした。その後新規にテンプレートからビルドしたのですが、普通に表示されたので…。
以下が新しく作ったCEPのソースコード（manifestは適宜修正してください）。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <link id="ccstyleTheme" href="css/styles-dark.css" rel="stylesheet" type="text/css" />
    <link id="hostStyle" rel="stylesheet" href="css/styles.css" />

    <title></title>
</head>

<body require-nodejs class="hostElt">
    <div id="content">
        <div>
            <input type="radio" id="huey" name="drone" value="huey" checked>
            <label for="huey">Huey</label>
        </div>

        <div>
            <input type="radio" id="dewey" name="drone" value="dewey">
            <label for="dewey">Dewey</label>
        </div>

        <div>
            <button id="btn_test" class="btn-big ccstyle hostFontSize">Call ExtendScript</button>
        </div>

    </div>

    <!-- These are debugging shortcuts.  Class debuglink items only appear in debug mode  -->
    <span class="debuglink" id="reload">Reload</span>
    <span class="debuglink" id="debug">Debug</span>
    <span class="debuglink" id="sources">Sources</span>

    <script src="js/libs/CSInterface.js"></script>
    <script src="js/libs/jquery-2.0.2.min.js"></script>

    <script src="js/themecolors.js"></script>
    <script src="js/main.js"></script>

</body>

</html>

/*Your styles*/

body {
    width: 100%;
}
#content {
    margin: 10px;
    vertical-align:middle;
}

#btn_test{
    width: 100%;
}

/*
Those classes will be edited at runtime with values specified
by the settings of the CC application
*/
.hostFontColor{}
.hostFontFamily{}
.hostFontSize{}

/*font family, color and size*/
.hostFont{}
/*background color*/
.hostBgd{}
/*lighter background color*/
.hostBgdLight{}
/*darker background color*/
.hostBgdDark{}
/*background color and font*/
.hostElt{}


.hostButton{
    border:1px solid;
    border-radius:2px;
    height:20px;
    vertical-align:bottom;
    font-family:inherit;
    color:inherit;
    font-size:inherit;
}

これを表示したものがこちら。

f:id:uske_S:20201123104833p:plain
特に何もせず表示された
んー、わからんが、うまくできそうなのでこの件は放っておくことにする。

宿題

前回に引き続き、参加者の方からモノルビをグループルビに変換するスクリプトについて相談をいただいています。Slackにコードが載っているので、気になる方は読んでみてください（チャンネルは #event-mkmk20です）。
その後、スレッドにてゼロから書き上げたものを掲載しています。aalt/naltグリフを基底グリフに置換するスクリプトで利用した処理を応用しました。

最後に

記念すべき第20回目の開催となったわけですが、粛々と開催しました。
コロナ禍で大々的にオフライン開催はできないものの、やはり場所を借りて物理的に箱詰め状態になるというのは非常に効果的だなと改めて思いました。何しろ進捗が出る。すごい。
次回からもしばらくオンライン開催は継続していきますので、また来年、よろしくお願いします。次回は都合により2月半ばくらいかな〜と考えています。

それではまた！

*1:参照：http://piyocast.com/as/archives/7090
ただ下記注意事項あり。

ただし、これはあくまで「指定のGUI部品や指定座標をクリックしたというメッセージ」を対象（アプリケーション）に送るというものであり、実際にマウスカーソルを移動させてクリックを実行するものではありません。

*2:ちなみにはてなブログのシンタックスハイライトはテンプレートリテラルに対応してないので騙されないで

*3:参照：https://kawano-shuji.com/justdiary/2020/09/06/2020%E5%B9%B49%E6%9C%88%E7%89%88%E3%80%80adobe-cep%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83/

*4:.debug ファイルに記述された各アプリケーションのPortに従う

*5:ちなみに、VSCodeはデフォルトではjsxファイルをReactファイルとして識別してLintします。単純なJavaScriptとして見て欲しい場合は関連付けを変えましょう。関連付けの変え方は+Designing v.50のコラム「ラクラボ。」に解説しています。