Webブラウザに設定されている言語を判別するjsライブラリ「Blang.js」



Webブラウザに設定されている言語を判別する Javascript用のライブラリ「Blang.js」の紹介です。

 javascript には " ブラウザの判別 ", " モバイルの判別 "、 様々な detect ライブラリが存在しますが、" ブラウザに設定されている言語を判別する軽量のライブラリがあれば便利そう " っということで「Blang.js」というライブラリを作ってみました。

Blang.js で出来ること 

Webブラウザに設定されている言語を判別し、booleanで結果を返します

* Blang.jsの例 


Blang.js のインストール

 Blang.js は ' npm ' 又は ' yarn ' を使って インストールします。CDN の URLを ' script ' タグの ' src ' 内に記述すれば Webブラウザ上から直接読み込むことが出来ます。

# npm
npm i blang
# yarn
yarn add blang
# CDN
https://unpkg.com/dist/blang.min.js


ライブラリの読み込み

/*** Babel での読み込み ***/
import lang from "blang";

lang.is.en(); // ライブラリの呼び出し

/*** CommonJS での読み込み ***/
const lang =  require('blang');

lang.is.en(); // ライブラリの呼び出し

/*** ブラウザから直接呼び出す場合 ***/
// tag
blang.is.en(); // ライブラリの呼び出し


Blang.js の使い方

is.ランゲージコード()

' is ' は ランゲージコードメソッドと組み合わせるオブジェクトで、
 ブラウザに設定されている言語が 指定した言語と一致している時に ' true '、そうでない場合は ' false ' を返します。

判別可能な言語 : GitHub

/* is + ランゲージコードメソッドで 言語を判定 */
import lang from "blang";

// もしブラウザの言語が英語に設定されていれば true、そうでなければ false を返す
lang.is.en(); // 英語

lang.is.ja(); // 日本語
lang.is.fr(); // フランス語
lang.is.ru(); // ロシア語
lang.is.he(); // ヘブライ語
lang.is.zh(); // 中国語
lang.is.hi(); // ヒンディー語


幾つかの言語では、国が指定されているランゲージコードも存在します。

英語 を例に挙げると、
' en ', ' en-AU ',  ' en-CA ', ' en-IN ', ' en-NZ ', ' en-ZA ', ' en-GB ', ' en-US '
英語1つの中に、これだけの国のコードが定義されています。

・ en    : 英語  * 明確な国が設定されていない
・ en-AU : オーストラリア
・ en-CA : カナダ
・ en-IN : インド
・ en-NZ : ニュージーランド
・ en-ZA : 南アフリカ
・ en-GB : イギリス
・ en-US : アメリカ

明確な地域(国) まで含めた言語の判別がしたい時は 引数内に文字列型で地域を指定できます。
( 対応言語 :  中国語( zh ), 英語( en ), フランス語( fr ), ドイツ語( de ), イタリア語( it ), ポルトガル語( pt ), スペイン語( es )  )

下のスニペットは ブラウザに設定されている言語は ' en-gb ( 英語: イギリス ) ' の判別をします。

// if 'en-gb' to be 'true', otherwise 'false'
lang.is.en("gb"); 


 配列で複数の地域 ( 国 ) を指定することもできます。複数の地域を指定する場合、国が設定されていない言語コードは除外されません。

// 英語 : アメリカとカナダを指定
/**
 ○ en
 ○ en-us
 ○ en-ca
*/
lang.is.en(['us', 'ca']);

// 英語 : オーストラリアとニュージーランドを指定
/**
 ○ en
 ○ en-au
 ○ en-nz
*/
lang.is.en(['au', 'nz']);

 

plural( Array )

' plural ' は判別したい言語が複数ある場合に使うメソッドです。

 下のスニペットは、ブラウザで設定されている言語が ' 英語 ', ' フランス語 ', ' スペイン ', 又は ' ドイツ語 ' の時には ' true ' を返し、それ以外の場合は ' false ' を返します。

import lang from "blang";

lang.plural(['en', 'fr', 'es', 'de']);

 

detect()

 ' detect ' は ブラウザに設定されている 言語を返すメソッドです。ブラウザによって 末尾が 大文字、小文字の場合がありますが、全て小文字で返します。

* e.x.p : en-US => en-us

import lang from "blang";

lang.detect();
// e.x.p: fr-ca, en-us, en, zh-tw ... etc
// 日本語の場合は ' ja ' を返す

 

Blang.js の使用例

Moment.js と組み合わせた例

下のスニペットは 日付操作でお馴染みのライブラリ、 Moment.js と組み合わせた例です。

 ブラウザに設定されている言語が 日本語の場合は 日本語( ja ) に、そうでない場合は 英語( en ) に切り替えています。

var m = moment;

blang.is.ja() === true
    ? m.locale('ja')
    : m.locale('en');

moment(new Date()).format('LLLL');
// e.x.p : if ja : 2018年7月8日 日曜日 17:30
// e.x.p : else : Sunday, July 8, 2018 5:30 PM


vuex (vue.js) と組み合わせた例

こちらは vuex ( vue.js 用ステートメントマネージメントライブラリ ) と組み合わせた例です。

<template>
<div>
<!-- if English to be rendering  -->
<div v-if="lang().en()">
  <h2> 英語 </h2>
</div>

<!-- if setting as 'en-ca'  -->
<div v-if="lang().en('ca')">
  <h2> カナダ </h2>
</div>

<!-- if setting as 'en-au', 'en-nz' or 'en'  -->
<div v-if="lang().en(['au', 'nz'])">
  <h2> オセアニア (オーストラリア, ニュージーランド, 英語) </h2>
</div>

</div>
</template>


<script>
import lang from "blang";

export default {
  name: 'HelloWorld',
  methods : {
    lang() { return lang.is; }
  }
}
</script>


React.js と 組み合わせた例

 最後に、React.js と組み合わせたサンプルです。 ' react-extras ' というプラグインと組み合わせて、設定されている言語によってレンダリングを切り替えています。

過去記事 : react-extras : react.jsでrenderメソッド内のタグが少し楽に書けるライブラリ

import { Choose } from "react-extras";
import language from "blang";

//...
render() {
 const lang = language.is;

 return(
 <div>
 {/* Choose */}
  <Choose>
     /* rendering if set as English */
    <Choose.When condition={lang.en()}>
     <h1> Hello! </h1>
    </Choose.When>
    /* rendering if set as Chinise */
    <Choose.When condition={lang.zh()}>
     <h1> 你好! </h1>
    </Choose.When>
    /* rendering if set as Japanese */
    <Choose.When condition={lang.ja()}>
     <h1> こんにちは! </h1>
    </Choose.When>

    <Choose.Otherwise>
     <h1> Somthing else. </h1>
    </Choose.Otherwise>
  </Choose>
 </div>
 )
} // ! render()


Summary

 言語によってリクエストのURLを変えたり、VirtualDOMライブラリのレンダリングを切り替えたりなど、使い方によっては面白いことが出来ると思います。

ライブラリ本体も ' 約5KB ' と軽量なので、気になった人はチェックしてみてください。

GitHub : cupof-github/blang.js

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ