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ヶ月間メッセージを表示しない
フローチャート
＊ブラウザの言語==ホームページの言語とする条件分岐は無くなりました
フローチャート
クラス
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が削除される。
