sitateru tech blog: プラグイン

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル プラグイン の投稿を表示しています。 すべての投稿を表示
ラベル プラグイン の投稿を表示しています。 すべての投稿を表示

2019年2月27日水曜日

シタテルウェブサイトの多言語化

2月 27, 2019

こんにちは!
シタテル株式会社CTOの和泉です。

シタテルのウェブページはWordpressで運用されています。

https://sitateru.com/

なんと!今後の世界展開(あるのか!?)を目指して多言語化を行いました!!

images/image-1.png

多言語化するにあたってプラグインなど色々と調査した結果Polylangというプラグインがとても使いやすかったので紹介します。

Polylang

どんなプラグイン?

Wordpressウェブサイトの多言語化をサポートしてくれるプラグインです。

機能としては

  • ポストやページ、メディア、カテゴリ、タグ、メニュー、ウィジェットなどの翻訳
  • urlによる言語の切り替え
  • 言語切り替え機能がウィジェットやナビゲーションメニュー
  • プログラムによる言語判定
    などなど。

自動翻訳を組み込むこともできるようになっていますが、今回はすべて手動で翻訳しました。

軽く使い方

インストールはプラグインメニューから新規追加で行なえます。

images/image-3.png

が、今回はProバージョンの機能を使いたかったので、Polylangのウェブサイトからライセンスを購入し、Proバージョンのバイナリを入手して、圧縮ファイルをアップロードする形でインストールしました。

Proバージョンだと言語間でURL末尾が同じものにできるなどの追加機能があります。
ウェブサイトで使用しているJavascriptのライブラリの都合でこれが必須だったのでライセンス購入しました。

プラグインをアクティベートすると、メニューに「languages」が追加されます。

images/image-2.png

詳しい設定の仕方はこちらを参考にさせていただきました。わかりやすい!

多言語対応化WordPressプラグインならPolylangが秀逸!その特徴と使い方

Custom post type

独自の投稿テンプレートを使えるようにする「Custom post type UI」というプラグインを使っているのですが、Polylangはこれにも対応してくれています。素晴らしい!

images/image-4.png

PolylangのAPI

ページなどWordpressの機能で作られている部分は設定画面から多言語化できるのですが、シタテルのサイトではヘッダーなどテンプレートにPHPでゴリッと記載している部分もありました。その辺りはPolylangのAPIを使って言語による切り替えなどを実装することで実現できます。

PolylangのAPI

こういうのがしっかり揃っているところも、このプラグインの素晴らしいところですね。

まとめ

ということで、いくつかの候補の中からこれを選んで正解だった気がします。

今回はサービスページの英語対応をしましたが、ユーザー登録やログイン後はまだ日本語のみですので、引き続き多言語化をすすめていきます!世界中で衣服生産のプラットフォームとして、皆さんに価値が提供できるようにがんばります。ご期待ください!

2018年12月17日月曜日

【備忘録】Visual Studio Codeで文字検索範囲が広すぎるときに疑う箇所

12月 17, 2018

こんにちは!
シタテル株式会社エンジニアのいしづかです。

みなさんはコードを書く時、どんなエディタを使ってらっしゃるでしょうか。

現在開発が続いているシタテルコントロールシステムのバックエンドはRailsで書かれています。

開発メンバーはそれぞれ自分が合うエディタを使っています。Ruby Mine使っている人もいますし、Atomもいたような・・・。

わたしはVisual Studio Codeを使っています。え?Vimであらずは人であらず?いや、まぁ、えへへ。

コードを書いているとコード内検索をかけたくなります。その際にはnode_modules配下とかは最初から外しておきたいものです。

今回はVisual Studio Code限定ですが、除外設定でハマったので備忘録としてその内容を書こうと思います。

Visual Studio Codeの除外設定

Visual Studio Codeの除外設定は大きく2つあり、 Files ExcludeSearch Exclude があります。

Files Excludeにパスを登録すると、その配下はエクスプローラー上にすら表示されません。Visual Studio Codeからは完全に管理対象外となり、当然検索にも引っかからなくなります。

Search Excludeにパスを登録すると、エクスプローラー上には表示されますが、検索に引っかからなくなります。

よって、検索の除外対象は「Files Exclude」+「Search Exclude」ということになります。

わたしがSearch Excludeに登録しているのは

の4つです。もうちょっと増やしてもいいかなと思うんですが、必要最低限で運用しています。

設定完了であるはずが、、、アレ、logの中身とか検索対象になってる。。。

パターンの書き方が間違っているのか?
設定する箇所が間違っているのか?

アレコレ試した挙げ句、最終的にたどり着いたのは

このボタンがONになっていないだけでした。。。

デフォルトではONでなにかのときにOFFにしちゃっていたのかもしれませんが、こんなの気づかないよVisual Studio Codeさん。。。

まとめ

何かを検索したとき、ほしいものがほしい分だけパッと手に入るっていいですよね。

検索範囲を適度なものに調整しておくのはコードを書くときのストレスを軽減してくれると思います。

かく言うわたしが、この除外設定が効いていなかった数十分間はストレスフルな状態でした。

他の開発メンバーがどんなチューニングを行っているかちょっと気になるところです。どんなプラグイン入れているかとか聞けたらレポートしたいと思います。