2019-06-10

英和辞書をポップアップするVimプラグインを作った

Vim Vimscript

ついこの間、Vimにpopupが実装されたという話題と、Mouse Dictionaryがタイムラインに流れてきました。自分もVimのPopupを使って英単語の意味を調べるプラグインを作ってみました。

GitHubレポジトリはこちらです。

ueokande/popupdict.vim 読力、活力、元気 github.com

使い方

dein.vimやvim-plugのパッケージマネージャーでインストールできるはずです。

" vim-plug
Plug 'ueokande/popupdict.vim'

" dein.vim:
dein#add('ueokande/popupdict.vim')

" NeoBundle …

2019-06-05

TSyringe - JavaScript/TypeScript向けの軽量DIコンテナ

Vim Vixen TypeScript

Vim VixenではClean Architecture風の設計をしており、扱うモデルやレイヤー毎にクラスを作成します。現在はクラス数が100を超えて、クラスにインスタンスをいちいち渡したり、インスタンスの作成と管理が面倒になってきました。そこでVim VixenではDependency Injection (DI)コンテナを導入することにしました。

いろいろ探してみると、すでにJavaScript/TypeScript用のDIコンテナがいくつか存在するようです。その中で（巨人の肩に乗るつもりで）Microsoftの「TSyringe」という軽量DIコンテナを採用しました。

microsoft/tsyringe Lightweight dependency injection container for JavaScript/TypeScript github.com

TSyringeはデコレーター（Javaのアノテーションのようなもの）でDIするクラスを指定したり、必要なクラスをコンストラ …

2019-05-30

TypeScriptに移行して気づいた10の事実

Vim Vixen TypeScript

ついにVim VixenをTypeScriptに移行しました。今まで強がりでECMAScriptで書いてたのですが、静的型付き言語の便利さに負けてついに移行しました。その時に新しい発見がいくつかあったので簡単にまとめます。

エコシステムが十分に育っている

TypeScriptに移行するのなら、トランスパイラ本体だけではなく周辺ライブラリのサポートも必要です。たとえばVim VixenではWebpackでのビルドやLinterのチェックをしてます。また使ってるライブラリの型定義もほしいです。それらTypeScript以外とのエコシステムの成熟度が、今回の移行の鍵でした。

結論として無事移行できました。 Vim Vixenのライブラリ利用状況は以下のようになりました。

ビルド: Webpack + ts-loader
Linter: ESLint + @typescript-eslint/eslint-plugin
テスト: karma-webpack + mocha/chai

若干@typescript-eslint/eslint-pluginで不具合がありま …

2019-04-17

いろいろできるぞexecuteScript()

WebExtensions

WebExtensionsのtabs.executeScript()メソッドは、Background ScriptからContent Script上にJavaScriptを注入できます。たまたま調べる機会があって挙動が面白かったので簡単に記事にまとめました。

基本動作

executeScript()はContent Script上で任意のスクリプトを実行して最後に評価した値を返します。 executeScript()はPromiseを返す非同期関数で、評価した値はthenの引数から取得できます。最後に評価した値は、例えば以下の例では'my result'になります。

var foo='my result';foo;

executeScript() の結果は各フレームで評価された値がArrayに格納されます（フレームを指定しないとトップウ …

2019-03-25

３年間働いたサイボウズを退職しません

今年も花粉と共に退職エントリが舞う季節になりました。せっかくなので退職しませんエントリを書きました。

この3月でサイボウズに勤めててから丸3年が経ちます。学生の頃はWebエンジニアといえば、技術を片手に渡り鳥のように転々するかなと思ってました。しかし実際サイボウズに入ってみると、意外と居心地が良かったので、この4月からも引き続きサイボウズで働きます！

サイボウズとのきっかけ

入社以前からサイボウズLiveは知っていて、母校（奈良高専）もサイボウズOfficeを導入してました。そのためサイボウズが何を作ってるかはなんとなくイメージできました。

入社しようと思ったきっかけは、学校（NAIST）の説明会で中の人と合う機会があったからです。企業向けビジネスだけどネクタイの会社じゃなかったという安心感もありましたが、中の人と実際会ってみてなんとなく雰囲気が合いそうという感じもありました。話を聞けば聞くほど技術的にも会社的にも興味が湧き、自分にぴったりだと思い入社を決めました。

入社後アプリ基盤へ配属

初めて配属されたチームは「アプリ基盤」というチームで、製品のミドルウ …

2019-03-13

Envoy ProxyのためのEDSサーバーを作る

Envoy Proxy

いよいよEnvoyの肝であるxDSサーバーを使いたいと思います。まず手始めにエンドポイントを設定できるEndpoint Discovery Service (EDS) を提供するサービスを実装します。

xDSおさらい

EnvoyではgRPCまたはREST API経由で動的に設定変更できます。これはEnvoyにリクエストを送るのではなく、EnvoyがAPIを提供するサーバーに繋ぎにいきます。 APIには、エンドポイントの設定を提供する Endpoint Discovery Service (EDS) や、クラスタの設定を提供する Cluster Discovery Service (CDS) などがあります。これらをまとめてxDS APIと呼びます。

xDS APIのデータ構造はProtocol Bufferによって定義されています。 v2 API referenceも大体はこのProtocol Bufferに基づきます。またEnvoy起動時にロードする静的な設定も、ほとんどの設定項目がこの構造体の定義に基づきます。

xDS APIを提供するサーバーをコントロールプ …

2019-02-03

Envoy Proxyで作るHTTPロードバランサー

Envoy Proxy

Envoy Proxyに入門してポチポチ勉強を進めてます。 Envoy Proxyは動的な設定とxDS APIが魅力的ですが、手始めに静的な設定ファイルで動かしてみましょう。この記事ではHTTPロードバランサーをEnvoyで構築します。完成図は以下の図になります。

HTTPロードバランサーの後ろには、目的の異なる2つのクラスタがあります。今回はNGINXとApache httpdを使っています。それぞれのクラスタはnginx.localとhttpd.localというホスト名（バーチャルホスト）で経路を分岐します。

2019-02-06追記 : DEPRECATEDなプロパティを修正しました。

Envoyの設定ファイル

Envoyをどういう環境で利用するにもBootstrap …

2019-01-27

ブログエンジンをMiddlemanからHUGOに移行した

このブログ、以前はMiddlemanでビルドしてたんですが、この度HUGOに移行しました。結論から言えば、機能的にはほぼ同じで移行も簡単でした（すでにこのブログも移行済みです）。いくつか工夫する部分があったのでそれを記事にまとめました。

テンプレートエンジンの移行

HUGOはテンプレートエンジンにGoのhtml/templateを使ってます。 HUGOではMiddlemanと同様 partial を使ってHTMLを外部ファイルとして記述できるので、パーツの共通化ができます。 MiddlemanからHUGOへの移行も、.erbファイルをGoのテンプレートに変換するだけで移行できました。 HUGOではMiddlemanと同じよう、テンプレート内から現在の記事のタイトルや全ての記事を取得できます。

MiddlemanではRubyで書いたヘルパメソッドをテンプレート …

2019-01-22