2019-05-30

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

ついに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

Envoy Proxyに入門した

Envoy Proxy

最近Kubernetes周りの技術をよく触るのですが、Envoy Proxy (Envoy)もよく耳にするので勉強しました。

Envoy Proxy

Envoyとは？

EnvoyはクラウドネイティブなWebサービスのために設計されたロードバランサーです。元はLyftが開発しており、現在はCNCF (Cloud Network Computing Foundation) によって管理されています。 Envoyには大きく２つの用途があります。

サービスメッシュの通信バス: サービスメッシュ内の各サービス間の通信を制御するプロキシ。サービスディスカバリーや流量の制御をする。
エッジプロキシ: サービス内のプライベートネットワークとサービス外をつなぐプロキシ。データセンターやKubernetesクラスタの外からのアクセスを受け付ける。

背景

モノリスで …

2018-12-23

Arch Linux上でSteamのゲームで遊ぶ

Linux

PortalとPortal 2がセットで180円という電波を受信したので早速買いました。自分のマシンはArch Linuxということで、Linux環境でSteamをインストールしてゲームの起動までチャレンジしました。結果を先に言うと、普通にプレイできました。大きな障害もなくて驚きです。

SteamのLinuxサポートはかなり前からニュースになってました。正式にサポートしてるOSはUbuntuまたはSteamOS(Debianベース)のみですが、Arch Linuxでも動かしてみました。自分の環境は以下のとおりです。

Arch Linux
nVIDIA GeForce GT 1030

依存パッケージのインストール

まずはゲームを起動するための依存パッケージをインストールします。 Steamのゲームは32ビットバイナリでビルドされて …

2018-12-15

初めてのアメリカでKubeCon + CloudNativeConに参加した

12月10日から13日の4日間、北アメリカのシアトルでKubeCon + CloudNativeCon North Americaが開催されました。自分も今のチームメンバーと一緒に参加しました。

イベント自体の報告は会社のブログで公開してるので、そちらを参考にしてください。

自分はこれまで、シンガ …

2018-11-07

「WebExtensionsとテスト」というお話をしてきました

WebExtensions

先日、WebExtensions Meetup #3 が開催され、そこで「WebExtensionsとテスト」というお話をしてきました。この発表では、 WebExtensionsのテストの方法と、Vim Vixenが取り組んでいることについてお話しました。

WebExtensionsとテスト - Speaker Deck

この記事では発表資料をかいつまんで、より詳しく説明してゆきたいとおもいます。それでははじまりはじまり〜。

はじめに

タイトルスライド自己紹介スライド

まずは自己紹介。 WebExtensions歴は1年ちょいです。メインで開発してるWebExtensionsは「Vim Vixen」です。

Vim Vixen Vim Vixenの開発環境

Vim Vixenの開発をスタートしたきっかけは、XUL製だったVimperatorが使えなくなったからです。開発を始めて1年が経ち、現在はユーザー数も10,000を超えるほどになりました。

開発的な視点で見てみると、本体コードが5,000行程度、テストコードは3,000行程度の規模感です。ビルドはBabelを使ってES7をトランスパイルし、webpackでシングルJS化して …