lang-select.js

lang-select


概要

lang-selectはあるホームページを訪れた場合、そのホームページに訪れた人の第一言語版があった場合、第一言語版へのページ遷移を提案するプログラムです。サンプルサイト ソースコード

使い方

ユーザが<div class="lang-select" id="foge"></div>を作成し、JavaScriptでid名、このサイトが対象とする言語と遷移先がある言語と遷移先、遷移を促すメッセージ、ボタンに表示するメッセージの4項組または連想配列のリストを渡してインスタンスを生成する

<div id="foge"></div>

<script>
    window.addEventListener('DOMContentLoaded', function(){
	new LangSelect("foo", [
        {"lang": "language code of ISO 639", "url": "http://example.com", "message": "message", "btn_message": "message on button"},
    ])});
</script>

ホームページに訪れた人の第一言語がlangの値と一致していれば、<div id="foge"></div>が次のようになる。

<div class="active" id="foge">
  <div class="message">
	<p>message</p>
  </div>
  <div class="change-site">
	<button onclick="http://example.com">message on button</button>
  </div>
  <div class="reject-message">
	<button></button>
  </div>
</div>

例えば、次のように設定を行う。

<div id="foge"></div>

<script>
    window.addEventListener('DOMContentLoaded', function(){
	new LangSelect("foo", [
        {"lang": "ja", "url": "../ja/index.html", "message": "日本向けサイトがあります", "btn_message": "クリック"},
    ])});
</script>

訪れた人の第一言語が日本語であった場合、次のようになる。

<div id="foge">
  <div class="message">
	<p>日本向けサイトがあります</p>
  </div>
  <div class="change-site">
	<button onclick="ユーザが入力した遷移先">クリック</button>
  </div>
  <div class="reject-message">
	<button></button>
  </div>
</div>

設計

このプログラムで実現する機能

  1. ブラウザの言語設定によって、表示するサイトの変更を提案
  2. 以前変更がキャンセルされていた場合、1ヶ月間メッセージを表示しない

フローチャート

*ブラウザの言語==ホームページの言語とする条件分岐は無くなりました


フローチャート

クラス

LangSelect

コンストラクタメソッド

フローチャートにおいて、クッキーの確認、ページ遷移の提案に相当する処理を行う。

引数:divタグのid(String)、言語コード・遷移先URL・表示するメッセージ・遷移リンクに表示されるメッセージをまとめた連想配列のリスト(連想配列は全てString型)

recommend_site_change メソッド

サイトの変更を提案するHTMLを表示するメソッド。フローチャートの「ページ遷移を提案」の処理に相当する。

引数:言語コード・遷移先URL・表示するメッセージ・遷移リンクに表示されるメッセージをまとめた連想配列
返り値:void

check_info_list メソッド

言語コード・遷移先URL・表示するメッセージ・遷移リンクに表示されるメッセージをまとめた連想配列のリストの中に、サイト訪問者のブラウザの第一言語があるかどうかを線形探索する。コンストラクタメソッドで用いられる。

引数:なし(ただしメソッド中に this.info_list を参照する)
返り値:言語コード・遷移先URL・表示するメッセージ・遷移リンクに表示されるメッセージをまとめた連想配列 または null

check_browser_cookie メソッド

ブラウザにクッキーが埋め込まれているかどうかを確認する(クッキーは以前提案が拒否された場合に埋め込まれている)。コンストラクタメソッドで用いられる。

引数:なし(ただしメソッド中でブラウザに埋め込まれているクッキーを document.cookie で取り出す)
返り値:ブール値

embedding_cookie メソッド

提案が拒否された場合、それを示すクッキーを埋め込む。reject_recomend_event メソッドで用いられる。

引数:なし
返り値:void

remove_lang_select メソッド

表示されているhtmlをDOMから除去する。reject_recomend_event メソッドで用いられる。

reject_recomend_event メソッド

表示された提案の拒否ボタン(class="reject-message"のbutton)が押された時に、recomend_site_change メソッドで作成したDOMが削除される。


関連記事

この記事のハッシュタグに関連する記事が見つかりませんでした。

最新記事

カテゴリー

アーカイブ