2019/03/27

手を動かして学ぶ Redis 入門

会社でRedisを使っているサービスがあり、そのメンテナーになった。RedisがIn-Memory Databaseということは知っていたのだが、その他の特徴や操作方法などまったくわからないので、チュートリアルを中心に手を動かしながら学んだことをまとめていく。またNode.jsからRedisにアクセスする方法もあわせて紹介する。


Redis の特徴


Redisはメモリー上にデータを保存するKey-Value型のNoSQLデータベースのひとつ。用途はデータベースだけにとどまらず、キャッシュやメッセージブローカーとしても利用される。

2019/03/26

details要素を使ってHTML/CSSのみでドロップダウンメニューを実装する

HTML5からdetails要素が追加された。この要素は折りたたみ可能なウィジェットを作成するもので、open状態になったときだけ子要素(summary要素など)を表示することができる。
このdetails要素を使えばHTMLだけでアコーディオンメニューが簡単につくれるようになる。

今回はこのdetails要素に手を加え、JavaScriptを使わず、HTML/CSSのみでドロップダウンメニューを実装する方法を紹介する。

完成予想図

2019/03/19

Transifexとvue-i18nで国際化対応のコラボレーション環境を構築する

国内向けのサービスであっても在日外国人が使うこともある。そういった背景から昨今、国際化対応(多言語化対応)の重要度が増している。とはいえフロントエンドエンジニアがウェブアプリケーションを開発しながらメッセージ翻訳を行うには限界がある。できれば翻訳作業はローカリゼーションチームに任せたい。

しかし、ローカリゼーションチーム(非エンジニア)にgitを使って言語ファイルをダウンロード、JSONやYamlファイルを見ながら翻訳、終わったらPull Requestを作ってもらうというのは少し酷だろう。もちろんJSON→Excel→翻訳→JSONなんてことはしたくない。

そこで当記事ではTransifexとvue-i18nを使って、国際化対応におけるフロントエンドチームとローカリゼーションチームのコラボレーション環境の構築方法について紹介する。あわせて実運用で得たノウハウを共有しようと思う。
また、当記事ではNuxt.jsをメインに紹介するが、Vue.jsでも同様のことはできるので読み替えてほしい。

環境は以下の通り。
  • macOS Mojave
  • Nuxt.js@2.4.5 / Vue.js@2.6.8
  • vue-i18n@8.8.2
  • transifex-client@0.13.6

2019/03/15

Nginxのlocationとproxy_passの末尾スラッシュによる挙動の違いを理解する

Nginxでリバースプロキシの設定をするとき、いつもlocationとproxy_passの末尾スラッシュ(Trailing Slash、トレイリングスラッシュ)による挙動の違いを忘れてしまう。ということで、locationとproxy_passのURIに末尾スラッシュをつけた場合、つけない場合でどのような挙動になるか実験した。その結果についてまとめる。

Nginxのリバースプロキシ設定は以下の4パターンになる。
パターンlocationproxy_pass
1/path/reverse-path
2/path/reverse-path/
3/path//reverse-path
4/path//reverse-path/


これに対し、4パターンのリクエストを投げて実験を行った。
  1. http://example.com/path
  2. http://example.com/path/
  3. http://example.com/path-test
  4. http://example.com/path/test