たった一言でエンジニアを怒らせる方法 10 おまけ付き

この記事は、Tech KAYAC Advent Calendar 2020 の17日目の記事になります。

こんにちは。はじめまして。クライアントワーク事業部でコピーライターをしている合田ピエール陽太郎と申します。

www.kayac.com

コピーライターとは

普段は、広告を見る人に向けて、どんな言葉を言えば振り向いてくれるか、商品を手に取ってもらえるかを考え続けて全精力を捧げている人間です。いわゆる短い言葉で、人を惹きつけるにはどうすればいいかを常日頃から考えています。たとえば、YouTubeの『好きなことで生きていく』、日産の『やっちゃえ日産』などは一度は目にしたことがあるのではないでしょうか。そういった言葉をディレクターから依頼されて考えることが多いです。

書こうと思ったきっかけ

僕がこれまで数社を渡り歩いてきた中でエンジニアと他の職能の人とが言葉のやりとりで上手くいかずに憤慨しているシーンをいくつか目撃してきました。何を言うと怒るのか、コピーライター的な視点からまとめてみました。全部で10種類あります。ご覧ください。

---

ライブラリなども含めて世の中にたくさん元となるコードがあると思っているために発せられる一言です。どこかにあるとしても、それを探すのは大変なことですし、見つからなかったら自分で一からコードを書かなければなりません。地味な修正でも、プロセスを見るとかなり大変です。他の職能の人には、なかなか見えにくい部分なので、軽く頼まれてしまうのでしょう。どういうプロセスがあるのか理解することで発せられることが減少すると思われます。

細かい配置や演出などを決めず、むしろエンジニアに自由にやってもらいたいときに発せられる一言です。自由にやっていいなんて最高だと思われがちですが、こんな言葉があります。

荒々しい自由の海には、波がつきものだ。
〜トーマス・ジェファーソン〜

デザインや文言などを考えるなどのエンジニアの領域を出て荒波にもまれることもしばしば。頼んだ人によって、「よしな」の内容が異なるので、何度もやりとりするより、一度すりあわせる方が効率がいいこともありそうです。

自分の頭のイメージを伝えたつもりだったけど、できあがったものがちがったときに発される一言です。コピーでは「伝える」と「伝わった」は全然ちがうと言われますが、それに似たようなことかもしれません。エンジニアに依頼するときは、リファレンスなどを用いて自分の頭の中が伝わるように心がけることも手の一つだと思います。 「よしなに頼むわ」とのコンボは最悪なパターンです。くれぐれも口にしないでくださいね。

この一言は、正しく動いてないと認識されたときに発されがちです。

Dir：バグだ
Eng：こういうものです
Dir：いや、バグでしょ
Eng：仕様書通りです

このような押し問答が起こることもあります。このまま会話がバグってしまうので、控えておくべき一言です。

提案が通ったと聞き、企画を見ると、複雑な仕様。スケジュールもカツカツ。正直に難しいと伝えたときに発せられる一言です。確かに提案が通った喜びとの落差も相まって口走ってしまう気持ちも理解できます。
この一言の真意は、何か仕様を削るなどして近い体験を得たいのだけど、どうすればいいかということではないでしょうか。また、エンジニアの難しいも、（このままの仕様とスケジュールでは）難しい、ということだと思います。お互いに歩み寄る一言を添えてみれば、憤慨することが減少するかもしれません。

もう世の中にあるサービスを引き合いに出して、簡単じゃないのという憶測から発せられる言葉です。しかし、Googleも一朝一夕でできたわけではありません。
「できるっていっちゃったよ」とのコンボが決まると、爆裂憤慨してしまうので、細心の注意が必要です。

大きな課題にぶつかったときに発せられる一言です。AIならなんでも、全知全能の神のようになんでも解決してくれる、というよな印象を持たれているのがいけないのかもしれません。
聞いたことがあるからと言って、安易に口にするのは控えた方がよさそうです。

修正が反映されていないときに発せられる一言です。言葉だけではニュアンスが絶妙に異なります。ドキュメントに残して、誰でも分かるように心がける必要があります。
「よしなに頼むわ」と「思ってたのとちがう」との三連コンボが炸裂した日には、エンジニアが憤死しかねませんので要注意です。

【憤死】ふん・し
　憤慨して命を落とすこと。

簡単にワンクリックで修正できるんじゃないかと思ったときに発せられる一言。
たとえば、「洗濯なんて、洗濯機に入れてボタン押すだけでしょ？」なんて言ってお母さんに怒られた経験はありませんか。泥汚れがひどいものは下洗いしてたり、外で干したり、さまざまな行程があるのです。
さらにエンジニアは、お母さんでもありません。家族以上の思いやりが必要ですね。

何度も何度も修正を重ね、何度も最後と言われた後に発せられる一言です。ほとんどの確率で、このあとも修正は来ます。知り合いには、修正が来る度によくできるチャンスを得たと捉えている人がいました。見習いたいですが、やっぱり怒りたくなるときはありますよね。

---

さいごに

お互い何を思っているのか、考えているのか、を共有することが大切なのかも知れませんね。
こんな言葉は燃やしましょう。

というわけで、明日は期待の燃えるエンジニア@takumifukasawaがものすごい何かを発表してくれます！ （期待値をあげたパスも怒らせる方法のひとつです）

おまけ

コピーライターを怒らせる一言も紹介します。

musicを別の言葉にする以外、何か方法ありますか‥。


自動販売機じゃありません‥。

さようなら！

Text::MicroTemplate(Perlのテンプレートエンジン)のシンタックスハイライトを作った話

はじめに

この記事はTech KAYAC Advent Calendar 2020の16日目の記事になります。

こんにちは。技術部の中山といいます。普段はぼくらの甲子園！ポケットチームでUnityとかGAS(Google Apps Script)を触ったりしています。

自分は使っていないのですが、チーム内でText::MicroTemplateというPerlのテンプレートエンジンが使われていて、「シンタックスハイライトがなくて書きにくい」みたいなことを言っている人がいたのでVSCodeのシンタックスハイライトを作りました。

VSCodeの拡張機能を検索する画面で「ext:mt」とか「MicroTemplate」とかで検索するか、 https://marketplace.visualstudio.com/items?itemName=quarter.vscode-microtemplate-syntax-highlight を開いて「Install」を押すとインストールできます。

こんな感じでハイライトされます。

コードはGitHubで公開しています。

techblog.kayac.com

以前こういう記事を書いたのですが、ここには書いていないことをいくつかやったので、この記事で紹介しようと思います。

作り方

次のような手順で作りました。

1. ファイル全体にHTMLのハイライトの規則が適用されるようにする
2. MicroTemplateの記法を見つけたらそこにPerlのハイライトの規則を適用する

以下で順番に説明していきます。

ファイル全体にHTMLのハイライトの規則が適用されるようにする

ターミナルで

npm i -g yo
npm i -g vsce
yo code

と入力して質問に答えるといろいろファイルが作られるのですが、その中の syntaxes/xxx.tmLanguage.json みたいな名前のファイルを開いて、 repository というキーを消して、 patterns を

{
    "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
    "name": "MicroTemplate",
    "patterns": [{
        "include": "text.html.derivative"
    }],
    "scopeName": "source.microtemplate"
}

のようにすると、ファイル全体がHTMLとしてハイライトされるようになります。 text.html.derivative はHTMLファイルを開いたときに使われる規則の名前です。

↑の場合は scopeName というキーに source.microtemplate と書いてあるので、 source.microtemplate という規則が text.html.derivative という規則と同じ挙動をするようにしているということになります。

MicroTemplateの記法を見つけたらそこにPerlのハイライトの規則を適用する

プロジェクトを生成すると package.json の contributes.grammars は以下のようになっていると思うのですが、

[{
    "language": "microtemplate",
    "scopeName": "source.microtemplate",
    "path": "./syntaxes/microtemplate.tmLanguage.json"
}]

この配列に要素を足して次のようにします。

[{
    "language": "microtemplate",
    "scopeName": "source.microtemplate",
    "path": "./syntaxes/microtemplate.tmLanguage.json"
}, {
    "injectTo": ["source.microtemplate"],
    "scopeName": "source.microtemplate.embedded",
    "path": "./syntaxes/microtemplate.embedded.tmLanguage.json"
}]

直前の章で source.microtemplate という規則がHTMLファイルに適用される規則と同じになるように設定しましたが、そこに injectTo というキーを使って別の規則を注入するということをしています。

あとは、 path で指定したファイルに scopeName で指定した名前の規則を書けば完成です。

ファイルの中身は100行くらいありますが、↓のような規則が何個か書いてあるだけです¹。

ファイル全体が見たい方はここをご覧ください。

さいごに

ここではPerlのシンタックスハイライトの規則をVSCodeに初めから入ってるものを利用してて、たまたまそれっぽくハイライトされてるんですが、本当は ? とか <? ~ ?> とかで分断されてるコードをハイライトしてくれる保証はないはずなので自分で書いたものを使わないといけないと思います。

が、Perlの文法何も知らないのでとりあえずこのままにしておこうと思います。

---

1. begin/endの動作はおそらく前に書いた記事のような感じになるので、ここで貼った画像の説明は正確じゃないと思うんですが、このくらいの小さいものを作るだけならこういう雑な理解で別にいいんじゃないかなと思ってます。↩