btn_arrowcmn-facebookcmn-tiktokcmn-twittercmn-xcmn-youtubecorroborationengineerEngineerhamburgericon-angleicon-arrow-bottom-lineicon-arrow-diagonal-01icon-arrow-diagonal-02icon-arrow-next-01icon-arrow-next-02icon-arrow-strokeicon-arrowicon-close-btnicon-externalicon-facebookicon-fukidashi-01icon-fukidashi-02icon-fukidashi-03icon-fukidashi-04icon-fukidashi-05icon-fukidashi-06icon-fukidashi-07icon-fukidashi-08icon-fukidashi-09icon-fukidashi-10icon-fukidashi-11icon-fukidashi-12icon-fukidashi-13icon-fukidashi-14icon-fukidashi-15icon-fukidashi-16icon-fukidashi-17icon-fukidashi-18icon-fukidashi-19icon-hatebuicon-instagramicon-is-index-illust-01icon-is-index-illust-02icon-is-index-illust-03icon-lineicon-linked_inicon-pinteresticon-rank-dash-offseticon-rank-frameicon-rank-no-frameicon-rank-trophy-item-01icon-rank-trophy-item-02icon-rank-trophy-staricon-triangle-01icon-triangle-02icon-twittericon-xicon-youtubeis-bg-book-01is-bg-book-02is-bg-book-03is-bg-book-04is-bg-book-05is-bg-book-06is-bg-boxis-bg-cupis-bg-desktopis-bg-flagis-bg-glassis-bg-hatenais-bg-human-01is-bg-human-02is-bg-human-03is-bg-human-04is-bg-pcis-bg-plusis-bg-smartphoneis-feature-01-lineis-font-daiis-font-gokuis-font-jiis-font-senis-footer-illust-01is-footer-illust-02is-nav-arrowis-prologue-boxlicense-foreignlicenselogo-gree

TECH BLOG

【TECH BLOG #3】Atomの自動補完でシナリオ演出快適化

どうも、戦国アスカZEROチームのSです。
通信やダウンロード周りの機能を担当する事が多いです。

C++ガチ勢なので構造化束縛(C++17)のマニアックな使い方について語ろうかとも思ったんですが、今回はAtomを使ってシナリオの演出作業を効率化する手法について紹介します。

ちなみに、Atom(アトム)はGitHubが開発したオープンソースのテキストエディタで、色々と拡張しやすい構造になっています。(個人的にはVSCodeよりも改造しやすい印象です)

このようなスクリプトの編集を支援するAtomのプラグインを作りました。
元々は他のプロジェクト用に作って運用していたものなんですが、戦国アスカZEROでも活用できないか試験的に移植しているところです。
通常のエディッタ機能以外に、整形インポート、自動補完(サムネイル表示)、シンタックスハイライト(エラーチェック)等を追加しているので、それぞれの機能の内容と実装方法について簡単に説明してみたいと思います。

Atomプラグイン(パッケージ)について

まず、Atomプラグイン(パッケージ)はNode.jsのパッケージとして管理されているので、package.jsonを用意します。
依存するライブラリ等以外にも、後述する自動補完機能への参照などもこのファイルに書きます。
メニューの”Package”に”Package Generator”というのがあるので、慣れるまではそちらから作る方がいいかもしれません。

機能の実装はJavaScriptかCoffeeScriptで書けます。以前はCoffeeScriptで書いていたんですが、可搬性を考えて今はJavaScriptにしています。
設定などはJSONかCSON(CoffeeScript版のJSON)で書けるんですが、こちらは後者の方がおすすめです。(JSONを手書きするのは色々と罠が多いので……)

ちなみに、GitHubに配布用のリポジトリを用意しておくとpackage.json内のバージョン表記を変更するだけでアップデートを提供できます。Atomを使う側はツール上でアップデートを適用できるので便利です。
メニューに機能を追加するには、menusフォルダ内にJSON(またはCSON)形式でメニューの定義を書いたファイルを用意します。
スクリプトの整形や入出力の機能は、ここから呼ばれるようにしています。
前述の”Package Generator”でテンプレートから生成した場合は、メニュー定義のサンプルも付いてくるので参考になると思います。

自動補完の機能について

次に自動補完の機能について。
コマンドの一覧や、文脈に応じてファイル名やサムネイル等の一覧を表示します。
Atomに独自言語の自動補完を提供するには、はじめから入っているautocomplete-plusというパッケージを活用するのが便利です。
package.json の “providedServices” というパラメータに定義を書くことで、そのプロバイダを参照してくれます。
「Autocomplete Providers」で検索すると色々な言語のプロバイダが見つかると思うので参考にしましょう。
autocomplete-plusのwikiに「Provider API」というページがあるので、そこを見れば大体わかると思います。
自動補完候補の問い合わせが来た際、内容をHTMLで返せるパラメータがあるので、これにimgタグを入れて返してあげればサムネイル表示の完成です。
(動画再生でも何でもできますが、あまり変なことすると壊れます)
この時、引数としてクラス(後述の文法定義で指定)や現在入力中の文字列などが渡されてくるんですが、文脈を特定するには若干情報不足かと思います。
エディッタから全部のテキストを取得する手段があるので、自分でパースして調べましょう!(引数editorのgetTextメソッド)
ここは、使い勝手に直結する部分なので拘った方がいいです。

文法の定義について

最後に文法の定義について。
シンタックスハイライトをちゃんと機能させる為には、grammarsフォルダにその言語用の文法定義を書いたJSON(またはCSON)ファイルを用意します。(構造が深くなりがちなのでCSON推奨です)
language-htmlとかlanguage-cssとか、適当に文法が近そうな言語のパッケージを探してきて弄るのが良いです。
ドキュメントとしては「Atom Flight Manual」の「Creating a Grammar」に一通り書いてあります。
いま配布されている言語パッケージでは、古いTextMate形式の方で書かれているものもあるので注意が必要です。
古い形式では、正規表現を文字列リテラルとしてエスケープする必要があったので、スペースは‘s’ではなく‘\s’、バックスラッシュは‘\\’と書く必要がありました。(Tree-sitter万歳!!)

ちなみに、シンタックスハイライトの配色までカスタマイズしたいなら、index.lessファイルを入れましょう。
例えば、非推奨な記述を文法定義しておいて、ここのファイルで目立つ色に設定したりすると簡易的なlintとして使えます。(デフォルトのスタイルのままでも、illegal.invalidクラスにすれば赤くなります)

最後に

さて、いかがでしょうか。
色々やっているように見えますが、プラグインの機能自体は300行前後のコードで済んでいます。(良い時代になりました)
演出作業を短縮できれば、シナリオシーンをリッチにしたり、もっと旬なネタを盛り込んだりできるようになるかもしれません。
頑張っていきましょう!

※2021年7月1日よりファンプレックスはグリーエンターテインメントへ商号変更いたしました。
※2021年6月30日以前の記事においてファンプレックスという表記がある場合がございますが、ご了承ください。

information

グリーエンターテインメント株式会社 広報担当

東京都港区六本木6-10-1 六本木ヒルズ森タワー

E-mail:info-ent@ml.gree.net