Q&A
ポップアップが前提としたページは相当ユーザービリティーが低いと思いますがマストなのでしょうか？
実現したいこと
- ページ内のボタンなどで言語切り替え
- 選択された言語に従ったJSファイルが読み込まれる
- デフォルトでは日本語のファイルたちを読み込んでおく
- 英語を選択されたら，読み込んでいた日本語ファイルたちの読み込みをやめて英語の方だけを読み込む
- リロードをしたとき，ブロックが適切に復元される
前提
Blocklyというツールを用いてビジュアルプログラミングを作成しています．
https://developers.google.com/blockly?hl=ja
ユーザの使う言語によって扱うブロックを変更させたいので，適切にポップアップ ボタンなどによる言語切り替えを可能にしたいです．
現状では，ポップアップによる言語の切り替え自体はできているのですが，ポップアップのボタンを押すまで読み込みが行われない仕様のため，リロードを行うとブロックが正しく復元されません．
現状，ボタンでjp，enを切り替えてもブロックが復元されない問題は解消できたのですが，なぜかjpを押してもブロックの言語が英語のままになってしまいます．
該当のソースコード
質問での文字数制限に引っかかってしまうため，詳しくは
リポジトリをご参照いただけると幸いです．
index.html
script.js
が該当するファイルとなります．
html:index.html
1<!DOCTYPE html> 2<html lang="ja"> 3 4 5 <head> 6 <title>PMusic</title> 7 <script src="https://cdn.jsdelivr.net/npm/blockly@1.0.0/blockly_compressed.min.js"></script> 8 <script src="https://cdn.jsdelivr.net/npm/blockly@1.0.0/blocks_compressed.min.js"></script> 9 <script src="https://cdn.jsdelivr.net/npm/blockly@1.0.0/msg/js/en.min.js"></script> 10 <script src="https://cdn.jsdelivr.net/npm/blockly@1.0.0/javascript_compressed.min.js"></script> 11 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> 12 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> 13 <script src="node_modules/@blockly/field-slider/dist/index.js"></script> 14 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 15 16 <div class="jp"> 17 <script src="CodeBlocks/Japanese/blocks/js/play_block.js"></script> 18 <script src="CodeBlocks/Japanese/generators/play.js"></script> 19 <script src="CodeBlocks/Japanese/blocks/js/play_block2.js"></script> 20 <script src="CodeBlocks/Japanese/generators/play2.js"></script> 21 <script src="CodeBlocks/Japanese/blocks/js/gauss_block.js"></script> 22 <script src="CodeBlocks/Japanese/generators/gauss.js"></script> 23 <script src="CodeBlocks/Japanese/blocks/js/gauss_block2.js"></script> 24 <script src="CodeBlocks/Japanese/generators/gauss2.js"></script> 25 <script src="CodeBlocks/Japanese/blocks/js/weibul_block.js"></script> 26 <script src="CodeBlocks/Japanese/generators/weibul.js"></script> 27 <script src="CodeBlocks/Japanese/blocks/js/weibul_block2.js"></script> 28 <script src="CodeBlocks/Japanese/generators/weibul2.js"></script> 29 <script src="CodeBlocks/Japanese/blocks/js/randwalk_block1.js"></script> 30 <script src="CodeBlocks/Japanese/generators/randwalk1.js"></script> 31 <script src="CodeBlocks/Japanese/blocks/js/randwalk_block.js"></script> 32 <script src="CodeBlocks/Japanese/generators/randwalk.js"></script> 33 </div> 34 35 <div class="en"> 36 <script src="CodeBlocks/English/blocks/js/play_block.js"></script> 37 <script src="CodeBlocks/English/generators/play.js"></script> 38 <script src="CodeBlocks/English/blocks/js/play_block2.js"></script> 39 <script src="CodeBlocks/English/generators/play2.js"></script> 40 <script src="CodeBlocks/English/blocks/js/gauss_block.js"></script> 41 <script src="CodeBlocks/English/generators/gauss.js"></script> 42 <script src="CodeBlocks/English/blocks/js/gauss_block2.js"></script> 43 <script src="CodeBlocks/English/generators/gauss2.js"></script> 44 <script src="CodeBlocks/English/blocks/js/weibul_block.js"></script> 45 <script src="CodeBlocks/English/generators/weibul.js"></script> 46 <script src="CodeBlocks/English/blocks/js/weibul_block2.js"></script> 47 <script src="CodeBlocks/English/generators/weibul2.js"></script> 48 <script src="CodeBlocks/English/blocks/js/randwalk_block1.js"></script> 49 <script src="CodeBlocks/English/generators/randwalk1.js"></script> 50 <script src="CodeBlocks/English/blocks/js/randwalk_block.js"></script> 51 <script src="CodeBlocks/English/generators/randwalk.js"></script> 52 </div> 53 </head> 54 55 <body> 56 57 <script> 58 window.addEventListener('load', function () { 59 const body = document.querySelector('body'); 60 const languagePopup = document.getElementById('languagePopup'); 61 body.classList.add('open_popup'); 62 // ポップアップ内のクリックイベント伝播を防ぐ 63 languagePopup.querySelector('.onetime_popup').addEventListener('click', function (e) { 64 e.stopPropagation(); 65 console.log('Popup clicked'); 66 }); 67 }, false); 68 </script> 69 70 <div id="content" style="display:flex;"> 71 <div> 72 <!-- 2タブ構成 --> 73 <div class="tab-wrap"> 74 <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">block result</label> 75 <div class="tab-content"> 76 <!-- コード反映欄 --> 77 <div id="code" style="width: 700px; padding: 5px; border: 2px solid black;"><pre/></div> 78 </div> 79 <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">write script</label> 80 <div class="tab-content"> 81 <!-- スクリプト記述欄 --> 82 <div id="codeEditor" class="tabcontent"> 83 <textarea id="codeInput" style="width: 100%;"></textarea> 84 </div> 85 </div> 86 </div> 87 88 <div class="jp"> 89 <button class="btn_code" id="Save" onclick="saveBlocks();">保存</button> <button class="btn_code" id="Load" onclick="loadBlocks();">呼出し</button> 90 </div> 91 <div class="en"> 92 <button class="btn_code" id="SaveEN" onclick="saveBlocks();">Save</button> <button class="btn_code" id="LoadEN" onclick="loadBlocks();">Load</button> 93 </div> 94 <div class="p-main"> 95 <div class="p-main__para"> 96 <p class="jp">日本語</p> 97 <p class="en">English</p> 98 <p> 99 <div class="l-lang"> 100 <a data-siteview="jp" class="l-lang__jp" href="./index.html">jp</a> 101 <a data-siteview="en" class="l-lang__en" href="./index.html">en</a> 102 </div> 103 </p> 104 </div> 105 </div> 106 </div>
JavaScript:script.js
1$(function(){ 2 // クッキーをセットする 3 function setSiteviewCookie() { 4 $('.l-lang a').bind('click', function() { //言語切り替えボタンを押下したときに発火 5 $.cookie('siteview', $(this).data('siteview'), { path: '/' }); //siteviewという名前でcookieに値をセット 6 }); 7 } 8 setSiteviewCookie(); 9 10 // 日本語 or 英語を選んだ場合の処理 11 if($.cookie('siteview') == 'en') { 12 //英語が選択されている場合(coockieの値にenが設定されている時) 13 $('.en').css('display', 'block'); //英語を表示 14 $('.jp').css('display', 'none'); //日本語を非表示 15 $('.l-lang .l-lang__en').addClass('is-active'); //言語切り替えボタンにクラスを振る処理 16 $('.l-lang .l-lang__jp').removeClass('is-active'); 17 } else { 18 //日本語が選択されている場合 19 $('.jp').css('display', 'block'); //日本語を表示 20 $('.en').css('display', 'none'); //英語を非表示 21 $('.l-lang .l-lang__jp').addClass('is-active'); 22 $('.l-lang .l-lang__en').removeClass('is-active'); 23 } 24})
試したこと
以下のようにして，先に日本語で読み込んでおいて見ようとしましたが，ブロックをおいてもスクリプトが生成されなくなってしまいだめでした
手法変更のため，関係ない記述です．
JavaScript
1var KEY = 'BlocklyStorage'; 2var workspace; 3 4window.onload = function() { 5 setLanguage('ja'); 6 console.log("onLoad"); 7 initializeBlockly(); 8}; 9 10function initializeBlockly() { 11 workspace = Blockly.inject('blocklyDiv', { 12 toolbox: document.getElementById('toolbox'), 13 trashcan: true 14 }); 15 16 // ここからBlockly関連の処理を続ける 17 window.setTimeout(function () { 18 console.log("setTimeout"); 19 if ('localStorage' in window && window.localStorage[KEY]) { 20 restoreBlocks(); 21 } else { 22 var startBlocksText = document.getElementById('startBlocks').outerHTML; 23 var xml = Blockly.Xml.textToDom(startBlocksText); 24 Blockly.Xml.domToWorkspace(xml, workspace); 25 myUpdateFunction(); 26 } 27 }, 0); 28}
追記
<div class="en" でブロックのJSファイルを読み込むというのが，Englishを選択した時に読み込むという意図で書いたのですが，想定通りには機能せず，日本語ファイルよりも後ろで読み込んでいるからどちらの言語を押しても英語のブロックが表示されているようです．(data-siteview="ja" のようにしてしているので当然と言えば当然のようではありますが)
ここをコメントアウトして日本語用のJSファイルだけを読み込んだら，どちらの言語を押しても日本語のブロックが表示されていたので．
> ポップアップのボタンを押すまで読み込みが行われない仕様のため，リロードを行うとブロックが正しく復元されません
言語選択をCookieなどに保存しておいて、リロードしたときに適用するようにするのがいいのでは、と思いました。
蛇足ですが、一度読みこんだscript要素を削除することに特に意味はないので、その辺りもご検討されてみてはいかがでしょうか。
＠yambejp 様
コメントいただきありがとうございます．
ポップアップのUX視点での評判があまり芳しくないというのは，今調べてみて初めて把握しました．
ポップアップは言語選択を行うための手段としか考えていないため，必須な要素ではございません．
自分が真っ先に思いついた案というだけですので，何かよりユーザビリティの高いものがございましたらご教示いただけると幸いです．
（あまり画面のスペースの言語選択に割きたくはないのですが，何かボタン等で実装するのが一般的なのでしょうか）
@Lhanlor_Mhy 様
コメントいただきありがとうございます．
Cookieに保存というアプローチも確かにありますね．自分でも調べて見ようと思うのですが，何かおすすめの記事やサイト等をご存知でしたら，ご教示いただけると幸いです．
JSやWeb系の知識があまりないため，おかしな質問かもしれないのですが，一度読み込んだscripty要素は削除することができないのでしょうか？試してみたことで書いたようなコードを使ってみた時，うまく動作しなかったのでもしかしたら自分の想定とその部分の認識がずれていたのではとは考えていましたが．
一つのブロックの情報を持っているJSファイルを，日本語でのもの，英語でのもので用意していて，それらを同時に読み込んでしまうと適切に動作しなくなってしまうので，そこをどうにか回避できたらというように考えております．
> 一度読み込んだscripty要素は削除することができないのでしょうか？
削除はできますが、特に意味はないです。以前にもお伝えしましたが、読み込んだときに実行されるので、削除することによって実行したものが巻き戻されるようなことはないです。
https://teratail.com/questions/g7p0mup5npbmym
＠Lhankor_Mhy 様
ご指摘のとおり以前にもおっしゃっていただいておりました．
失念しておりまして申し訳ございません．
4/11(Thu)にCoockieを用いた開発を考えてみますので，何科状況が進展し次第質問本文に追記させていただきます．
$('.en').css('display', 'block'); //英語を表示
$('.jp').css('display', 'none'); //日本語を非表示
このあたりのコードは、どのような意図がありますか？ もし、これでコードが実行されるのを防ごうとしているのであれば、効果はないと思います。
@Lhankor_Mhy様
ご指摘いただいたコード部分に関しましては，「日本語」，「English」という平文の切り替えがボタンによって確認できるかを確かめているだけですので，今回の質問に関するものとは関係のないものと考えております．
回答1件
0
ベストアンサー
Blockly詳しくないのでなにか勘違いとかあったらすみません
言語切り替え機能の方針
『ポップアップのボタンによる言語選択を行う前は日本語のファイルたちを読み込んでおく』
これが全ての複雑さの元凶で、普通はもっとシンプルに「必要な設定ファイルを必要なタイミングで読み込む」とすれば良いだけでは？という気がします。
| 表示言語切り替え機能 | 編集中の内容を保存/復元する機能が存在 | 編集中の内容の言語をリロードせずに切り替え | アクセス,ユーザの操作 | 備考 | |
|---|---|---|---|---|---|
| ①URLを分ける | ❌️ | (無関係) | ❌️ | 手前に言語選択ページを用意、2回目以降のアクセスは直接言語別ページをブクマなど | URLの階層やクエリパラメータにjaとかenを含んでおいてサーバ側処理で切り替える実装が多そう |
| ②言語切り替えでリロード1 | ⭕️ | ❌️ | ❌️ | 言語切り替え機能で、編集内容を破棄してリロード | 実質URLを分けるのと変わらない |
| ③言語切り替えでリロード2 | ⭕️ | ⭕️ | ❌️ | 言語切り替え機能で、編集内容を保存してリロード→リロード後に復元 | 編集内容を保存する機能があるなら、切り替えてページリロードするだけ |
| ④言語切り替えでDOM書き換え | ⭕️ | (無関係) | ⭕️ | 言語切り替え機能で、リロードせずにテキストを切り替え | 現在のDOMを全部たどってtextContent等を全部差し替える処理が必要になる。めんどい |
※言語切り替え機能というのは、ページ内に言語設定機能をボタンやオプション操作として用意しておくことを意味します
よくある方針としてぱっと思いつく範囲でこんな感じでしょうか
①～③はどれも、「ロード開始時点で言語が決まっていて、言語設定関連は必要なものだけを読み込む」「言語を切り替えるにはページリロードが発生する」ので特に面倒なことは考えなくてよいです。
『実現したいこと』から
『リロードをしたとき，ブロックが適切に復元される』というのは、④を意図しているのかな？と思ったのですが
『ページを開いた時に言語選択（日本語 or 英語）のポップアップを表示』からの一連の流れであれば、実質②なのでしょうか？
最初から分かれているのなら「復元」などという複雑な処理をする必要性が一切なくなり、実装コストやバグ対策コストを激減させられます。
また、仮に言語選択と関係なく編集内容を保存/復元する機能があるのであれば、④を実装するくらいなら③で良いかなと。
（編集履歴が失われてCtrl+zが効かなくなる、とかで厳密な一致ではないかもしれませんが…）
restoreBlocksというのがソースコード内にあるようですが、これは復元機能のことでしょうか？
これがあればリロード関係なく③④を同一視できるかもしれませんが
ブロックに限らずページ全体の言語切り替えが必要であれば、④のためにはやはりrestoreBlocks＋全部辿って差し替えが必要、になるかもしれません。
現状の流れ＋cookieやlocalStorage保存とかしてしまうと、一度設定した言語を切り替える手段が存在しなくなり、
例えば初回に誤操作等すると二度と挽回できないとかになりかねません（実装を把握しているかつ知識があればキャッシュ削除などで対応できますが…）
なので、最初から別ページ(①)または切り替え機能を持つ(②～④)とかの方が普通ではないかと。
コメントでも言われている通り毎回ポップアップの選択画面を出すくらいなら①の方が楽だと思います。
あと切り替え機能を持たせる＆URL分けないなら、初回表示はブラウザの第一言語という手もあります(navigator.languageとかで拾う)
実装について
上記を踏まえても面倒な④を実装しなければならない、という場合は…
多言語関連リソースを扱うなら普通はobject一式のインターフェースを合わせておいてモジュール形式で読み込んで各言語objectを切り替える、というやり方が一般的じゃないかなと思うのですが
現状は複数言語のscriptをロードすると、関数や変数がグローバルに全展開される仕組みなのでしょうか？
constやletが無くて単に再宣言で上書きされているだけであれば、ぶっちゃけそれはそれで問題ない（問題はあるけど絶対に避けられない理由があるなら仕方がない）ような気もしますが
言語切り替え時に既存の内容を全削除しなければいけないような仕組みなのでしょうか？
※2024/04/12 13:00 追記
リポジトリ確認しました。
まず1つ私が書いた部分の訂正ですが
「関数や変数がグローバルに全展開される仕組み」ではなく
Blockly.Blocks.xxxx.init に各ブロックの情報を登録する、のようです。
つまり、各言語scriptを読み込みした結果、Blockly.Blocksオブジェクトのプロパティに(上書き)登録する処理が実行される、ということです。
ですので、複数回実行しても特に問題はありません（単に最後に実行した方の言語が使用される）。
「関数や変数がグローバルに全展開される仕組み」も4割ぐらい正解で「関数や変数がBlockly専用グローバルオブジェクト配下に展開される仕組み」みたいな感じでした。
以下、コメントに反応します。
言語script
ブロックタイプとブロック情報をもつファイルが1対1でないとブロックが表示されなくなってしまうので入れていた
そもそもの話、現状は 「各言語scriptの読み込みが完了しないままrestoreBlocksとかを試みているので失敗してる」 ように見えます。
特に1対1とか必要はなく、各ブロックタイプに対して言語を問わず漏れなく1回以上読み込んでいればokです。
おそらく何か試行錯誤の過程でそのような勘違いに至ったのだと予想できるのですが
「既存の内容を削除」について、少なくとも今回は特に意味がなく発生している問題と関係ないということは認識しておいてください。（例えばscriptタグが意味もなく何千何万と増えたらDOMが肥大化するとかはあるかもしれないので、そういう観点では意味がないことはないかもしれません）
処理順・実装方法について
- 現状
- ブロックを置く
- リロード
- POP UPで言語を選択
- 選択言語に従ったブロック情報を持つファイルを読み込み
- 本来必要な処理順序 ※script.jsに記述する順序とは限らない
- 各言語scriptの読み込み(選択言語に従ったブロック情報を持つファイルを読み込み)
- 画面の構築 (初期化または以前の記録をrestoreBlocks)
- ユーザ操作 (言語設定切り替えもこのタイミングで、画面リロードを挟めば難しいことをせずに別言語にして1.からやり直せる)
上記1.の各言語scriptの読み込みですが、何らかの手法でサーバ側で切り替え(静的htmlファイルを切り替えるまたはhtmlを動的に組み立てるまたは各言語scriptの方を切り替えるetc)して、html内にscript要素が記述されているのを普通に読み込むのなら簡単なのですが
現状のsetLanguage関数のようにクライアント側のスクリプト内で動的ロードしようとすると割と複雑で面倒だと思います。（動的に読み込んだscriptファイルが全て読み込み完了したのを明示的に待ち受ける必要がある）
少なくとも現状のままsetLanguage→restoreBlocksの順で実行してもたぶんだめです（開発環境だとサーバが近いのでレスポンスが早く、たまたま成功してしまって真の問題の露見が遅れる可能性）
方針
本質問のコメント欄にあるCookieによる実装もこの手法
cookieは特にどの方針かを制限しません。
①の「URLの階層やクエリパラメータにjaとかenを含んでおいてサーバ側処理で切り替える実装」の「URLの階層やクエリパラメータ」の部分を「http requestのheaderに含まれるcookie内」に置き換えただけ、というサーバ側切り替えの方針にもできますし
②～④のどれを選んでも特に問題はありません。
特に上記のマトリックス表で明示してはいませんでしたが、②～④を選ぶにしても
cookieを使うのならサーバ側切り替えにしてもよいですし、クライアント側切り替えにしてもよいです。(クライアント側のみでやるならlocalStorageと似たような扱いになります)
>追記
とすればリロードのボタンを押す必要はないのですね
それは固定テキストをcssで切り替えるやり方なので、今回の言語scriptの話とは別です。
固定テキストも複数言語対応したい、というのであれば、別途導入すると良いと思います。
UIの種類としての話なら、言語選択の仕方は何でも良いです。
ページ内に言語の数だけボタンを並べてもよいですし、設定ダイアログやポップアップでも良いです。
とにかくユーザ操作に対して言語設定を指定または保持→ページリロードなどの更新処理、という一連の処理がかければよいです。
（もしも『リロードのボタン』というのがブラウザの更新ボタンを意味しているのであれば、ここでは特に関係はありません）
投稿2024/04/10 13:26
編集2024/04/12 04:06
総合スコア760
ご回答いただきありがとうございます．
まず，私の説明が不足していたり，わからない部分もあるように見受けられましたので，ご助言を拝見させていただき，私が考えていることとのすり合わせ，共有をさせていただきます．
DOM（https://udemy.benesse.co.jp/development/dom.html ）について知識が乏しいので簡単に調べてみましたが，
＞＞『リロードをしたとき，ブロックが適切に復元される』というのは、④を意図しているのかな？
に関しまして，おっしゃるとおりです．
「復元」というのは，「ページのリロードをした際に，リロードされる前に置いていたブロックが元通り置かれていること」でありまして，現在の実装方法では復元の際に次のような経路を辿っています，
1．ブロックを置く
2．リロード
3．POP UPで言語を選択
4．選択言語に従ったブロック情報を持つファイルを読み込み
ページ的には，手順3の時点でブロックを表示したいのですが，まだブロックの情報を持つファイルが読み込まれていないので問題が生じ，手順4でファイルを読み込んだ後でもブロックが表示されない，という問題が発生しています．
自分でコードを書いていた時の考えとして，リロードはあまりしたくないと考えていて，このようにポップアップにすれば，言語の切り替えを行わない人ならばリロードなしで実装可能だと考えていました．
しかし，実際には言語の切り替えは高頻度で行われるものではありませんし，一回のリロードなら手間にならない，かつ，今回は日本語ユーザをベースとしていこうという考えに至りましたので，最も適切なのは③の手法なのかなと，今は考えております．（本質問のコメント欄にあるCookieによる実装もこの手法ですよね？）
本文記載のコードに関しては，文字数制限に引っかかってしまったため省いているところが多々あり申し訳ございません．
restoreBlocksに関しましては，おっしゃるとおり復元機能で，キャッシュのような形で，ページをリロードしてもブロックを復元するのに使用しています．
function setLanguage(lang)
でブロックの情報を読み込ませているブロック以外は現状でもこれらの復元を行う関数によって，復元を可能としています．
実装につきまして，
関数や変数がグローバルに全展開される仕組み，というのが知識不足でうまく理解できてはいないのですが，
現在既存の内容を削除するようなものを書いている理由としましては，
<xml id="toolbox" style="display: none">
<category name="Music" colour="0">
<block type="play1"></block>
<block type="play"></block>
<block type="gauss1"></block>
<block type="gauss"></block>
<block type="weibul1"></block>
<block type="weibul"></block>
<block type="randwalk1"></block>
<block type="randwalk"></block>
</category>
</xml>
のブロックタイプとブロック情報をもつファイルが1対1でないとブロックが表示されなくなってしまうので入れていたというものであります（効果が実際にあるのかは別として）
追記
https://nnc-studio.jp/plugin/2022/05/18/jquery-lang/
このサイトにあるように
```
<div class="l-lang">
<a data-siteview="jp" class="l-lang__jp" href="./index.html">jp</a>
<a data-siteview="en" class="l-lang__en" href="./index.html">en</a>
</div>
```
とすればリロードのボタンを押す必要はないのですね，
質問本文に，今回の質問に関わる部分を切り抜いて最小化したもののリポジトリを追加させていただきました．
返信で起きているような不具合を実証する場合は，Musicタグに入っているブロックを置いてからリロードなさってみてください，
他のタグのブロックのみが置いてある場合にはリロードしても復元されますが，Musicタグのものを置いていると正しく復元できないのがわかると思います．
回答末尾に、コメントへの反応を追記しました。
ここではMarkdownが使えないため，詳細なコードをリポジトリにコミットしましたが，
常に＜script src=...>で日本語情報のスクリプトを最初で読み込ませ，
日本語→英語，の切り替えの時には，追加で英語情報のスクリプトを読み込む
英語→日本語，の切り替えの時にはhrefでリロードをすることで
言語の切り替えに対処しました．
英語→日本語の際には，すでに置いてあるブロックも日本語になるのに対し，
日本語→英語の際には，置いてあるブロックは日本語のままになってしまうということはありますが，
ページをリロードしてもMusicのブロックが消えることがなくならなくなり，ブロックの言語切り替えができるとして，主要問題は解決したとみて，
この回答をベストアンサーとさせていただきます．
後学にも参照できそうなほどの，詳細で丁寧なご回答，ありがとうございました．
あなたの回答
tips
プレビュー
