質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

7342閲覧

JSで多言語ページ(URL)の切り替えを行う方法

sugi_sw

総合スコア14

URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/16 08:01

多言語ページの切り替え方法について質問します。

現状とあるドメイン「hogehoge.com」で日本語のページがあるとします。
これに新たに英語版のページを作ることになり、
「hogehoge.com/en/~」というディレクトリのなかで日本語版と同じページ構成を作る際、
ヘッダーの言語切替aタグリンクボタン「JP/EN」で日本語⇔英語と切り替わるようにしたいです。

調べてみて一番参考になりそうなのが下記
https://www.webdesignleaves.com/wp/jquery/220/
だったのですが、

日本語ページは/jp/というディレクトリを切るのではなく直下で展開したいです。
英語になった場合のみ、/en/の中にリンクしたいのですが、
この場合JS(jQuery)でどう書けば正しく遷移できるでしょうか。

また、ただJP⇔ENで切り替えるのみでなく、英語版ページにいるときに、ヘッダーから別のコンテンツ(コンタクトフォームやプライバシーポリシーなどのページ)に遷移する際も、英語ページ→英語ページに遷移するようにしたいです。

当方HTMLとCSSしか分からずJSはコピペを多少いじって使える程度の理解度しか無く困っています。

理想の動きとしては、下記のようになります。

【ヘッダーの言語切り替えをクリックすると…】
1)トップページ(日本語)⇒トップページ(英語版)
2)下層コンテンツAページ(日本語:「hogehoge.com/コンテンツA」)⇒同一コンテンツAページの英語版(「hogehoge.com/en/コンテンツA」)
【ヘッダーから別ページに移動する際は言語はママ】
3)下層コンテンツAページ(英語版にいる)⇒ヘッダーの別のコンテンツBページをクリック⇒英語版のコンテンツBページが表示される

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/11/16 09:03

JavaScript側(フロントエンド)だけで済む話ではないような・・・。 サーバーサイドは何か使っていないのでしょうか?
sugi_sw

2020/11/19 09:58

ご回答ありがとうございます。 サーバーサイドでは何も使いません。
guest

回答1

0

ベストアンサー

サーバ側じゃなくてJSで操作するということでしたら、以下のコードでリンク先のURLが取得できます。

JavaScript

1let current_path = location.pathname, 2 path_arr = current_path.split('/'), 3 link_to; 4 5if (path_arr[1] === "en") { 6 path_arr.splice(1, 1); 7} else { 8 path_arr.splice(1, 0, 'en'); 9} 10 11link_to = path_arr.join('/');

あとはこのlink_toの値を、ページ読み込み時に言語切り替えのボタンに割り当てるか、ボタンをクリックした際にこのURLに飛ばすかどちらかのスクリプトを書けば大丈夫です。

【追記】
「link_toの値をページ読み込み時に言語切り替えのボタンに割り当てる」というのは例えば以下のようなやり方です。
言語切り替えのリンクaのidを仮にlang-switchとします。

JavaScript

1const linkBtn = document.getElementById('lang-switch'); 2 3document.addEventListener('DOMContentLoaded', function() { 4 linkBtn.setAttribute('href', link_to); 5}); 6

「ボタンをクリックした際にこのURLに飛ばす」というのは以下のような方法です。

JavaScript

1const linkBtn = document.getElementById('lang-switch'); 2 3linkBtn.addEventListener('click', function(e){ 4 e.preventDefault(); 5 location.href = link_to; 6}); 7

ちなみにjQueryを使用するならそれぞれ以下のようになります。

jQuery

1const linkBtn = $('#lang-switch'); 2 3$(function(){ 4 linkBtn.attr('href', link_to); 5});

jQuery

1const linkBtn = $('#lang-switch'); 2 3linkBtn.on('click', function(e){ 4 e.preventDefault(); 5 location.href = link_to; 6});

投稿2020/11/16 12:16

編集2020/11/19 21:06
cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sugi_sw

2020/11/19 09:59

ご回答ありがとうございます。 >あとはこのlink_toの値を、ページ読み込み時に言語切り替えのボタンに割り当てるか、ボタンをクリックした際にこのURLに飛ばすかどちらかのスクリプトを書けば大丈夫です。 知識がなさすぎて上の意味がまったく分かりませんでした。 すみません。
sugi_sw

2020/11/24 01:16

詳しくご説明いただきありがとうございます。 こちらの記述を参考に無事うまくいきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問