アーカイブ

たるしょ~ Advent Calendar 19日目

この記事はtarusho Advent Calendarの19日目です。遅くなってすみませんでした。


今年もあと2週間なんですね。あと11日間、たるしょ~診断を忘れないように頑張ります。

本編の前に…

うちのらぼでのたるしょ~先生の有名ぶりが見て取れるものをざっと紹介したいと思います。

Slack

うちの研究室にはドイツのトリに代表される生物や、水瀬いのられさんのような有名人が多く在籍しておりますが、中でもそのコミュニケーションを支えているSlackは大活躍しています。ちなみに研究室全体で有料版課金済みです。
現時点でチャンネルが111個ありますが、その中でも{人名}_timelineが多く存在しているのが特徴的です。(Twitterでやれ)

また、Slackのインテグレーションやカスタマイズ機能もかなり有効活用されています。

例えばひらがなカタカナが全種類絵文字用意されていたり(作成者:@oboenikui, ジェネレータ

ひらがなカタカナ全種類絵文字

ひらがなカタカナ全種類絵文字

使い方の例

使い方の例

/kininarimasu コマンド(えるたそが代弁してくれる)や(作成者:@oboenikui)、

私、気になります!

私、気になります!

/wakaru /wakaranai コマンド(わかる・わからないの意思表示を行う)が用意されていたり(作成者:@oboenikui)、

/wakaranai

/wakaranai

などなど。大変にぎやかな研究室でよろしいことですね。
で、研究室の資産を有効活用するために、私も微力ながら貢献させていただいております。

例えば、パケットを監視して自動で在室管理をする仕組みを作ったり(現在停止中)

パケット監視による在室管理BOT

パケット監視による在室管理BOT

任意の画像を、カスタムスキームを持つURIとして登録&画像展開することができたり、など。

Custom Image URI

Custom Image URI

特に弊らぼではたるしょ~先生は大人気ですので、:tarusho:絵文字はもちろん登録されていますし、/tarusho コマンド(たるしょ~診断を行う)も利用することができるようになっています。

/tarusho

/tarusho

みんなたるしょ~先生が大好きです。特に私が好きな点をピックアップすると

  • ブログの文章がすごく好き
    • 文章が面白くてすらすら頭に入ってくる
  • ツイートもその欠片がにじみ出ていて中毒性が高い
    • つらいときにツイートが流れてくるとニッコリします

という感じです。特にたるしょ~診断は最高だと思います。

本編に入る前に、らぼでのたるしょ~先生の雰囲気が伝わるツイートを紹介したいと思います。

あまりに好きすぎてふぁぼっていたら、若干キレられました。すみません、嫌いにならないでください。

本編: 桃のはちみつ漬けを作ってみた

ここから本編です。

たるしょ~先生と言えば、狼と香辛料のホロちゃんですよね。とっても可愛くて私も好きなキャラクターです。
ホロちゃんの尻尾を膝の上において温めてもらいたい人生だった…。あおばやまでホロちゃんと一緒に温泉旅館営んで一生を終えたいです。

さて、作中でロレンスが「桃のはちみつ漬け」の話をするシーンがあります。今回はたるしょ~先生に敬意を表して、桃のはちみつ漬けにチャレンジしてみたいと思います。

Step1. 仲間をあつめよう

さて、やると決めたからには、早速仲間を集めなければなりません。1人で作るのは少々不安なのと、2つ作って成功確率を上げるためです。あと絶賛金欠なので、できるだけ割りかn

幸いにも、日曜日の午前3時に「今日やろう」と友人Aに相談したところ、すぐにOKの返事が返ってきました。持つべきものは友ですね、ありがとうございます。
もっと前の日に「料理しよう」と相談したのですが、誰かさんは乗ってくれませんでした。

Step2. 材料を買おう

朝起きて、桃のはちみつ漬けを作るのに必要な材料リストを考えました。
世の中広いので、既に実際にチャレンジされている方が何人かいました。15分くらいのサーヴェイの結果、以下の材料を用意するのが良いだろうという結論に至りました。

  • 密封容器
  • いちじく
  • アーモンド類
  • はちみつ
  • 生姜

とりあえず100均に向かいました。探していると良い感じの密封容器が売っていたので、2つ買いました。順調。

次に業務用スーパーに向かいました。特に何も期待せずに入ったのですが、良い感じのスライス済みアーモンド100gとドライイチジクが売られていました。購入。

最後に普通のスーパーに向かいました。野菜コーナーでしょうがはゲットできたので、残るははちみつと桃ですね。
一口に純粋はちみつと言ってもピンキリで、安いやつは600円/kgから高いやつは1600円/250gまでありました。普通のスーパーでここまで値段差が激しい商品ってなかなかない気がします。はちみつ界すごい…。

とりあえずいろいろ検討した結果、600円/kgか1380円/kgか1800/kgで悩みました。友達に相談してみたところ
「きっとロレンスはホロのためにはケチらない」
というお言葉をいただきました。心に響きました。はちみつ 500g購入。

あとは桃です。
まあ大部分の方は察しが付くと思いますが、桃の旬は夏から遅くとも秋です。12月とか絶対に生の桃が手に入るわけがありません。残念ですね。

ということで仕方なく桃缶を買いました。「(加工によって)十分甘い」とか「すでに漬けられている」とかいうご意見はあるかと思いますが、仕方ない。

というわけで、最終的に手に入れたものはこんな感じです。かかったお金としては2つ瓶をフルで詰めて2500円くらいだと思います。

最終的に手に入れたもの

最終的に手に入れたもの

Step3. 調理しよう

保存容器の煮沸消毒

まずは保存容器を煮沸消毒しましょう。鍋の底に布を敷いて沸騰してから数分くらいするまで煮沸します。
煮沸した後はそーっと取り出して、口を下側にして冷やしましょう。急激に温度が下がらないように気を付けます。

保存容器の煮沸消毒

保存容器の煮沸消毒

材料のカット

次に、材料をカットしていきます。といっても、切られていないのは生姜と桃なので、簡単です。
友人が「確かロレンスが『薄く切った桃を…』とか言ってた」と言っていたので、薄めにカットしたものと厚めにカットしたものの両方を用意して漬けてみます。

材料のカット

材料のカット

瓶詰め

ここまで準備ができたら、あとは瓶詰めだけです。
ここでも友人曰く「確かロレンスが『桃の層とイチジクの層を交互に入れる』とか言っていた」と言っていたので、交互に入れていきます。
容器に対してあまり詰めすぎると、ハチミツが行き渡らずに空気の層ができやすくなったりするので、適度な間隔ではちみつを入れながら詰めていきましょう。
これは1本目を詰めるときに得た知見ですが、一番下にイチジクを入れると、底辺がスパースになっていい感じにはちみつが行き渡りやすくなりました。(個人の感覚です)

瓶詰め

瓶詰め

瓶詰めが終わるとこんな感じになるかと思います。
あとは金属蓋の錆の防止と密閉性を高めるため[要出典]にサランラップをした後、金属蓋できつく閉めます。

瓶詰めほぼ完了

瓶詰めほぼ完了

保管しよう

いざ保管、と行きたいところですが、保管する前にラベルをつけましょう。記録することは大切です。
友達に「ホロちゃん書いて」と言ったらノリで書いてくれました。神か。

あと、たるしょ~先生のアイコンをアイコンを勝手に使ってしまってすみません。 >たるしょ~先生、@39mixonさん(Advent Calendarでは5日目を担当されています)

ラベルをつけよう

ラベルをつけよう

ラベル付け

見た目は良い感じです

あとは、そっと冷蔵庫に保管しましょう。定期的に様子をみつつ、2カ月後を楽しみに待ちます。水分が多すぎて腐ってたり失敗してないといいな。

最後に

あとは2カ月待つだけなんですが、手ごたえとしては不安と期待が半々です。
2カ月後というと、おぼさんぺろさんの修論本審査が終わって、そろそろ仙台を離れるころなんでしょうか。寂しいですね。

この瓶は先輩方の、そして私自身の卒業記念に開けたいと考えています。
これからもみんなで楽しく過ごせればよいなという願いと、たるしょ~先生がその頃に仙台に遊びに来てくれたりしないかなという期待を込めつつ、このあたりで筆をおきたいと思います。

たるしょ~先生、これからもよろしくお願いします!


Visual Studio Code向けの簡易スペルチェッカーを実装してみる

この記事はVisual Studio Code Advent Calendar 2016の19日目の記事です。


この記事では、Visual Studio Codeにおいて…

  • 診断機能を実装する方法
  • Light bulb(電球アイコン)を使ったコードアクションを実装する方法
を、実際にちょっとしたスペルチェッカーを実装しながら紹介したいと思います。

といっても、VSCodeのExtension APIを叩くだけですし、 世の中には実用的なスペルチェッカーのソースコードが公開されているので、 それを例にソースコードを読み解いていきたいと思います。

ちなみに去年のAdvent Calendarでは、VSCodeの画面をリアルタイムで共有できるサービスを作って公開したりしましたが、今年は時間が全然なかったので何もできませんでした。すみません。

あとこの記事はだいぶ急いで書いています。 かなり殴り書きのようになってしまいましたがご容赦ください。 またご意見等ありましたら、コメントやTwitterなどでいただければと思います。

完成版はこちらからどうぞ。
https://github.com/bonprosoft/SimpleTypoChecker

スペルチェッカの動作例

診断機能を実装する

Visual Studio Codeで診断機能を実装するには、APIを通してvscode.DiagnosticCollectionを確保した後(4行目)、このコレクションに診断結果を格納する必要があります。
拡張機能それぞれで解析処理を行った結果、ユーザーに診断結果を通知する必要がある場合には、 ドキュメント中の表示する位置を求めた後(18-20行目)、診断結果を使って作成します。(21行目)
ここでDiagnosticSeverityの値をInformationやErrorなどに変更すると、それに合わせてメッセージのアイコンが変わります。
これらによって作成された診断結果のリストを、ドキュメントのURIと対応付けてコレクションへと格納します。(28行目)

あとは、新しくエディタが開かれたとき(vscode.window.onDidChangeActiveTextEditor)やドキュメントが保存されたとき(vscode.workspace.onDidSaveTextDocument)に発火するイベントをトリガーにして、createDiagnostics関数を呼び出してあげましょう。

実際にこの時点でコードを実行すると次のように診断結果が表示されることがわかります。

1つ目のHelloのみを検出する診断機能

1つ目のHelloのみを検出する診断機能

コードアクションを実装する

コードアクションを実装するのは少々複雑です。コードアクションは以下の手順で実現されます。

  1. CodeActionProviderインターフェースを実装したクラスを用意する
  2. 1.で用意したクラスをvscode.languages.registerCodeActionsProvider APIを用いて登録する
    • この時、どの言語に対してコードアクションを提供するかを指定する
  3. コードアクション用のコマンドを登録する
  4. CodeActionProviderのメンバーであるprovideCodeActionメソッドを実装する
    • このメソッドの返り値で、コードアクションとして提供するアクションコマンドのリストを提供する
    • アクションコマンドには、採用された際に実行されるコマンドのIdを指定する
    • ここまでで、診断機能が表示された箇所にLight bulb(電球マーク)が表示されるようになる
  5. アクションコマンドが実行された際に呼ばれるコマンドを実装する

以下、順を追って説明していきます。ソースコードの完成版は以下のリンクにありますので、併せて確認すると良いでしょう。
SimpleTypoChecker/checker.ts

CodeActionProviderインターフェースを実装したクラスを用意する

そのままです

1.で用意したクラスをvscode.languages.registerCodeActionsProvider APIを用いて登録する

第1引数にlanguage Id, 第2引数にCodeActionProviderインターフェースを実装したクラスのインスタンスを指定します。

コードアクション用のコマンドを登録する

コード修正用のコマンドを登録します。ここで登録したコマンドが、コードアクションによって表示されるLight bulbを実際に採用した際に行われる処理の内容となります。
この時、コールバックとなる関数はfixWithSuggestionという名前にしたため、5.でこの関数の中身を実装する必要があります。

CodeActionProviderのメンバーであるprovideCodeActionメソッドを実装する

いい感じに実装します。ここでポイントとなるのが8-12行目です。
10行目では、採用された際に実行されるコマンド(a)のId(先ほどの項目で使ったものと同じである必要があります)を指定し、11行目ではその関数へと渡す引数を指定しています。

アクションコマンドが実行された際に呼ばれるコマンドを実装する

いよいよ最後の段階まで来ました。
この中ではコードアクションの実行部分、つまり実際に指定された箇所の変更を行うコードを記述していきます。

ここでポイントとなるのが、9-10行目です。
9行目でドキュメントのURI・範囲・編集内容を記録した後、10行目で実際に記録された内容の適用を行っています。

ここまで出来たら、実際に実行してみましょう。
“Hello”が検出されて、”See you”に置換するコードアクションが表示されることでしょう。また実際にLight bulbを採用すると、コードアクションが適用されることがわかります。

おちばびろい

コードアクションを適用したのに診断結果の波線が消えない…!

こんな感じに、拡張機能側でもmapを持っておいて、コードアクションを適用したら修正/再適用してあげると良い感じになります。

保存中に診断が実行されて重い…!

こちらのソースコードをご覧ください。
この実装方法は、MS公式のvscode-spell-checkを参考にしたものですが、診断処理を行うタスクをわざと一定期間遅延させて、その間に起った診断処理の再計算を求める処理をすべて1つにまとめています。
これによって短期間に連続して何度も診断処理を行うことや、保存中にフリーズすることを防いでいます。

そもそも処理が遅い

頑張って良い感じのデータ構造・アルゴリズムを使って高速化してください。
テキストが動的に変わって、スペルチェック用のファイルがほぼ変わらないので、AC Automatonでも作ると良いんじゃないんですかね、というのがらぼでの見解でした。

まとめ

いかがでしょうか。わりと簡単に診断機能とコードアクションを使うことができることがお分かりいただけたかと思います。 実はこの拡張機能自体は今年の9月頃に作成しましたが、主に執筆時の表記ゆれを検出するのに(個人的には)大活躍しています。

非常に便利な診断機能/コードアクション向けのAPI、ぜひ何かの拡張機能で活用していきたいものですね。