質問編集履歴

6

追記に補足

2024/04/14 01:43

投稿

aaaa____
aaaa____

スコア29

title CHANGED
File without changes
body CHANGED
@@ -193,6 +193,6 @@
193
193
  ```
194
194
 
195
195
  ### 追記
196
- `<div class="en"` でブロックのJSファイルを読み込むというのが,Englishを選択した時に読み込むという意図で書いたのですが,想定通りには機能せず,日本語ファイルよりも後ろで読み込んでいるからどちらの言語を押しても英語のブロックが表示されているようです.
196
+ `<div class="en"` でブロックのJSファイルを読み込むというのが,Englishを選択した時に読み込むという意図で書いたのですが,想定通りには機能せず,日本語ファイルよりも後ろで読み込んでいるからどちらの言語を押しても英語のブロックが表示されているようです.(`data-siteview="ja"` のようにしてしているので当然と言えば当然のようではありますが)
197
197
  ここをコメントアウトして日本語用のJSファイルだけを読み込んだら,どちらの言語を押しても日本語のブロックが表示されていたので.
198
198
 

5

追記

2024/04/14 01:27

投稿

aaaa____
aaaa____

スコア29

title CHANGED
File without changes
body CHANGED
@@ -15,6 +15,7 @@
15
15
  現状,ボタンでjp,enを切り替えてもブロックが復元されない問題は解消できたのですが,なぜかjpを押してもブロックの言語が英語のままになってしまいます.
16
16
 
17
17
 
18
+
18
19
  ### 該当のソースコード
19
20
  質問での文字数制限に引っかかってしまうため,詳しくは
20
21
  [リポジトリ](https://github.com/snym-yt/testLanguageSettings)をご参照いただけると幸いです.
@@ -191,3 +192,7 @@
191
192
  }
192
193
  ```
193
194
 
195
+ ### 追記
196
+ `<div class="en"` でブロックのJSファイルを読み込むというのが,Englishを選択した時に読み込むという意図で書いたのですが,想定通りには機能せず,日本語ファイルよりも後ろで読み込んでいるからどちらの言語を押しても英語のブロックが表示されているようです.
197
+ ここをコメントアウトして日本語用のJSファイルだけを読み込んだら,どちらの言語を押しても日本語のブロックが表示されていたので.
198
+

4

説明の追加

2024/04/12 02:33

投稿

aaaa____
aaaa____

スコア29

title CHANGED
File without changes
body CHANGED
@@ -158,7 +158,8 @@
158
158
  ```
159
159
 
160
160
  ### 試したこと
161
- 以下のようにして,先に日本語で読み込んでおいて見ようとしましたが,ブロックをおいてもスクリプトが生成されなくなってしまいだめでした
161
+ ~~以下のようにして,先に日本語で読み込んでおいて見ようとしましたが,ブロックをおいてもスクリプトが生成されなくなってしまいだめでした~~
162
+ 手法変更のため,関係ない記述です.
162
163
  ```JavaScript
163
164
  var KEY = 'BlocklyStorage';
164
165
  var workspace;

3

質問の更新,情報の追加

2024/04/12 02:32

投稿

aaaa____
aaaa____

スコア29

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,7 @@
1
1
  ### 実現したいこと
2
-
3
- - ページを開いた時に言語選択(日本語 or 英語)のポップアップを表示.
2
+ - ページ内のボタンなどで言語切り替え
4
3
  - 選択された言語に従ったJSファイルが読み込まれる
5
- - ポップアップのボタンによる言語選択を行う前は日本語のファイルたちを読み込んでおく
4
+ - デフォルトでは日本語のファイルたちを読み込んでおく
6
5
  - 英語を選択されたら,読み込んでいた日本語ファイルたちの読み込みをやめて英語の方だけを読み込む
7
6
  - リロードをしたとき,ブロックが適切に復元される
8
7
 
@@ -10,185 +9,24 @@
10
9
 
11
10
  Blocklyというツールを用いてビジュアルプログラミングを作成しています.
12
11
  https://developers.google.com/blockly?hl=ja
13
- ユーザの使う言語によって扱うブロックを変更させたいので,適切にポップアップによる言語切り替えを可能にしたいです.
12
+ ユーザの使う言語によって扱うブロックを変更させたいので,~~適切にポップアップ~~ ボタンなどによる言語切り替えを可能にしたいです.
14
- 現状では,ポップアップによる言語の切り替え自体はできているのですが,ポップアップのボタンを押すまで読み込みが行われない仕様のため,リロードを行うとブロックが正しく復元されません.
13
+ ~~現状では,ポップアップによる言語の切り替え自体はできているのですが,ポップアップのボタンを押すまで読み込みが行われない仕様のため,リロードを行うとブロックが正しく復元されません.~~
15
- [POP UPが出てる画面](https://drive.google.com/file/d/1DcenXvCwHIXIDQaRyxnoDdci3S37BN2s/view?usp=sharing)
16
14
 
15
+ 現状,ボタンでjp,enを切り替えてもブロックが復元されない問題は解消できたのですが,なぜかjpを押してもブロックの言語が英語のままになってしまいます.
17
16
 
17
+
18
18
  ### 該当のソースコード
19
+ 質問での文字数制限に引っかかってしまうため,詳しくは
19
- [リポジトリ](https://github.com/snym-yt/testLanguageSettings)
20
+ [リポジトリ](https://github.com/snym-yt/testLanguageSettings)をご参照いただけると幸いです.
21
+ `index.html`
22
+ `script.js`
23
+ が該当するファイルとなります.
20
24
 
21
- ```javaScript
25
+ ```html:index.html
22
- // ================================== on Load ===================================
23
-
24
- window.onload = onLoad;
25
-
26
- function onLoad(){
27
- setLanguage('ja');
28
- console.log("onLoad");
29
- }
30
-
31
- var KEY = 'BlocklyStorage';
32
-
33
- var workspace = Blockly.inject('blocklyDiv', {
34
- toolbox: document.getElementById('toolbox'),
35
- trashcan: true
36
- });
37
-
38
- window.setTimeout(function () {
39
- console.log("setTimeout");
40
- if ('localStorage' in window && window.localStorage[KEY]) {
41
- restoreBlocks();
42
- } else {
43
- // Blockly.Xml.domToWorkspace(document.querySelector('#startBlocks'), workspace);
44
- var startBlocksText = document.getElementById('startBlocks').outerHTML;
45
- var xml = Blockly.Xml.textToDom(startBlocksText);
46
- Blockly.Xml.domToWorkspace(xml, workspace);
47
- myUpdateFunction();
48
- }
49
- }, 0);
50
-
51
- function myUpdateFunction(event) {
52
- Blockly.JavaScript.INDENT = ` `
53
- var code = Blockly.JavaScript.workspaceToCode(workspace);
54
- code = codeTranslate(code);
55
- document.getElementById('code').innerHTML = '<pre class="prettyprint lang-js" style="margin: 0px"><span style="font-size:1.1em">' + code + '</span></pre>';
56
- backupBlocks();
57
- }
58
- workspace.addChangeListener(myUpdateFunction);
59
-
60
-
61
- // ======================== related to WebAudioAPI ==============================
62
-
63
- window.AudioContext = window.AudioContext || window.webkitAudioContext;
64
- let oscillator;
65
- let isPlaying = false;
66
- let waveform = "sine";
67
-
68
- function setWaveform() {
69
- const radioButtons = document.getElementsByName('wave');
70
-
71
- // ラジオボタンが変更されたときのイベントリスナーを追加
72
- radioButtons.forEach(radioButton => {
73
- radioButton.addEventListener('change', function() {
74
- waveform = this.value;
75
- console.log(waveform);
76
- });
77
- });
78
- }
79
-
80
- async function playMusic(){
81
- // 省略
82
-
83
- }
84
-
85
- function stopMusic() {
86
- if (!isPlaying) return;
87
- oscillator?.stop();
88
- isPlaying = false;
89
- oscillator = null;
90
- }
91
-
92
- function parseMelodyText(melodyText) {
93
- const lines = melodyText.split('\n');
94
- const notes = [];
95
-
96
- for (const line of lines) {
97
- const match = line.match(/play\((\d+), (\d+(\.\d*)?)\)/);
98
- if (match) {
99
- const note = parseInt(match[1]);
100
- const duration = parseFloat(match[2]);
101
- notes.push({ note, duration });
102
- }
103
- }
104
-
105
- return notes;
106
- }
107
-
108
- const note2freq = [];
109
- function initNote2Freq(){
110
- let freq = 440 * Math.pow(2, (0 - 69) / 12);
111
- for (let i = 0; i < 140; i++) {
112
- note2freq.push(freq);
113
- freq *= 2.0;
114
- }
115
- // console.log(note2freq);
116
- }
117
-
118
- // ====================== related to language settings ==========================
119
-
120
- function closePopup() {
121
- console.log('Closing popup');
122
- initNote2Freq();
123
- setWaveform();
124
- const body = document.querySelector('body');
125
- if (body) {
126
- body.classList.remove('open_popup');
127
- }
128
- }
129
-
130
- function setLanguage(lang) {
131
- // 言語別のスクリプトのリストを定義
132
- const scripts = {
133
- ja: [
134
- "CodeBlocks/Japanese/blocks/js/play_block.js",
135
- "CodeBlocks/Japanese/generators/play.js",
136
- "CodeBlocks/Japanese/blocks/js/play_block2.js",
137
- "CodeBlocks/Japanese/generators/play2.js",
138
- "CodeBlocks/Japanese/blocks/js/gauss_block.js",
139
- "CodeBlocks/Japanese/generators/gauss.js",
140
- "CodeBlocks/Japanese/blocks/js/gauss_block2.js",
141
- "CodeBlocks/Japanese/generators/gauss2.js",
142
- "CodeBlocks/Japanese/blocks/js/weibul_block.js",
143
- "CodeBlocks/Japanese/generators/weibul.js",
144
- "CodeBlocks/Japanese/blocks/js/weibul_block2.js",
145
- "CodeBlocks/Japanese/generators/weibul2.js",
146
- "CodeBlocks/Japanese/blocks/js/randwalk_block1.js",
147
- "CodeBlocks/Japanese/generators/randwalk1.js",
148
- "CodeBlocks/Japanese/blocks/js/randwalk_block.js",
149
- "CodeBlocks/Japanese/generators/randwalk.js"
150
- ],
151
- en: [
152
- "CodeBlocks/English/blocks/js/play_block.js",
153
- "CodeBlocks/English/generators/play.js",
154
- "CodeBlocks/English/blocks/js/play_block2.js",
155
- "CodeBlocks/English/generators/play2.js",
156
- "CodeBlocks/English/blocks/js/gauss_block.js",
157
- "CodeBlocks/English/generators/gauss.js",
158
- "CodeBlocks/English/blocks/js/gauss_block2.js",
159
- "CodeBlocks/English/generators/gauss2.js",
160
- "CodeBlocks/English/blocks/js/weibul_block.js",
161
- "CodeBlocks/English/generators/weibul.js",
162
- "CodeBlocks/English/blocks/js/weibul_block2.js",
163
- "CodeBlocks/English/generators/weibul2.js",
164
- "CodeBlocks/English/blocks/js/randwalk_block1.js",
165
- "CodeBlocks/English/generators/randwalk1.js",
166
- "CodeBlocks/English/blocks/js/randwalk_block.js",
167
- "CodeBlocks/English/generators/randwalk.js"
168
- ]
169
- };
170
-
171
- // すでに読み込まれているスクリプトを一旦削除
172
- const existingScripts = document.querySelectorAll('script');
173
- existingScripts.forEach(script => script.remove());
174
-
175
- // 言語別にスクリプトを読み込む
176
- const scriptList = scripts[lang];
177
- if (scriptList) {
178
- scriptList.forEach(script => {
179
- const scriptElement = document.createElement('script');
180
- scriptElement.src = script;
181
- document.body.appendChild(scriptElement);
182
- });
183
- }
184
- }
185
- ```
186
-
187
-
188
- ```HTML
189
26
  <!DOCTYPE html>
190
27
  <html lang="ja">
191
28
 
29
+
192
30
  <head>
193
31
  <title>PMusic</title>
194
32
  <script src="https://cdn.jsdelivr.net/npm/blockly@1.0.0/blockly_compressed.min.js"></script>
@@ -198,24 +36,49 @@
198
36
  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
199
37
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
200
38
  <script src="node_modules/@blockly/field-slider/dist/index.js"></script>
39
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
40
+
41
+ <div class="jp">
42
+ <script src="CodeBlocks/Japanese/blocks/js/play_block.js"></script>
43
+ <script src="CodeBlocks/Japanese/generators/play.js"></script>
44
+ <script src="CodeBlocks/Japanese/blocks/js/play_block2.js"></script>
45
+ <script src="CodeBlocks/Japanese/generators/play2.js"></script>
46
+ <script src="CodeBlocks/Japanese/blocks/js/gauss_block.js"></script>
47
+ <script src="CodeBlocks/Japanese/generators/gauss.js"></script>
48
+ <script src="CodeBlocks/Japanese/blocks/js/gauss_block2.js"></script>
49
+ <script src="CodeBlocks/Japanese/generators/gauss2.js"></script>
50
+ <script src="CodeBlocks/Japanese/blocks/js/weibul_block.js"></script>
51
+ <script src="CodeBlocks/Japanese/generators/weibul.js"></script>
52
+ <script src="CodeBlocks/Japanese/blocks/js/weibul_block2.js"></script>
53
+ <script src="CodeBlocks/Japanese/generators/weibul2.js"></script>
54
+ <script src="CodeBlocks/Japanese/blocks/js/randwalk_block1.js"></script>
55
+ <script src="CodeBlocks/Japanese/generators/randwalk1.js"></script>
56
+ <script src="CodeBlocks/Japanese/blocks/js/randwalk_block.js"></script>
57
+ <script src="CodeBlocks/Japanese/generators/randwalk.js"></script>
58
+ </div>
59
+
60
+ <div class="en">
61
+ <script src="CodeBlocks/English/blocks/js/play_block.js"></script>
62
+ <script src="CodeBlocks/English/generators/play.js"></script>
63
+ <script src="CodeBlocks/English/blocks/js/play_block2.js"></script>
64
+ <script src="CodeBlocks/English/generators/play2.js"></script>
65
+ <script src="CodeBlocks/English/blocks/js/gauss_block.js"></script>
66
+ <script src="CodeBlocks/English/generators/gauss.js"></script>
67
+ <script src="CodeBlocks/English/blocks/js/gauss_block2.js"></script>
68
+ <script src="CodeBlocks/English/generators/gauss2.js"></script>
69
+ <script src="CodeBlocks/English/blocks/js/weibul_block.js"></script>
70
+ <script src="CodeBlocks/English/generators/weibul.js"></script>
71
+ <script src="CodeBlocks/English/blocks/js/weibul_block2.js"></script>
72
+ <script src="CodeBlocks/English/generators/weibul2.js"></script>
73
+ <script src="CodeBlocks/English/blocks/js/randwalk_block1.js"></script>
74
+ <script src="CodeBlocks/English/generators/randwalk1.js"></script>
75
+ <script src="CodeBlocks/English/blocks/js/randwalk_block.js"></script>
76
+ <script src="CodeBlocks/English/generators/randwalk.js"></script>
77
+ </div>
201
78
  </head>
202
79
 
203
80
  <body>
204
81
 
205
- <!-- 言語選択ポップアップ -->
206
- <div class="bg_onetime_popup" id="languagePopup">
207
- <div class="onetime_popup">
208
- <div class="onetime_popup_title">
209
- <span class="onetime_popup_title_close" id="popupCloseButton"></span>
210
- <span>言語選択 (Choose Language)</span>
211
- </div>
212
- <div class="onetime_popup_content">
213
- <button class="languageButton" onclick="setLanguage('ja'); closePopup();">日本語</button>
214
- <button class="languageButton" onclick="setLanguage('en'); closePopup();">English</button>
215
- </div>
216
- </div>
217
- </div>
218
-
219
82
  <script>
220
83
  window.addEventListener('load', function () {
221
84
  const body = document.querySelector('body');
@@ -230,36 +93,68 @@
230
93
  </script>
231
94
 
232
95
  <div id="content" style="display:flex;">
96
+ <div>
97
+ <!-- 2タブ構成 -->
98
+ <div class="tab-wrap">
99
+ <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">block result</label>
100
+ <div class="tab-content">
233
- <!-- ブロック配置欄 -->
101
+ <!-- コード反映欄 -->
234
- <div id="blocklyDiv" style="height: 650px; width: 1150px; padding: 5px"></div>
102
+ <div id="code" style="width: 700px; padding: 5px; border: 2px solid black;"><pre/></div>
235
- </div>
103
+ </div>
104
+ <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">write script</label>
105
+ <div class="tab-content">
106
+ <!-- スクリプト記述欄 -->
107
+ <div id="codeEditor" class="tabcontent">
108
+ <textarea id="codeInput" style="width: 100%;"></textarea>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="jp">
114
+ <button class="btn_code" id="Save" onclick="saveBlocks();">保存</button> <button class="btn_code" id="Load" onclick="loadBlocks();">呼出し</button>
115
+ </div>
116
+ <div class="en">
117
+ <button class="btn_code" id="SaveEN" onclick="saveBlocks();">Save</button> <button class="btn_code" id="LoadEN" onclick="loadBlocks();">Load</button>
118
+ </div>
119
+ <div class="p-main">
120
+ <div class="p-main__para">
121
+ <p class="jp">日本語</p>
122
+ <p class="en">English</p>
123
+ <p>
124
+ <div class="l-lang">
125
+ <a data-siteview="jp" class="l-lang__jp" href="./index.html">jp</a>
126
+ <a data-siteview="en" class="l-lang__en" href="./index.html">en</a>
127
+ </div>
128
+ </p>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ ```
133
+ ```JavaScript:script.js
134
+ $(function(){
135
+ // クッキーをセットする
136
+ function setSiteviewCookie() {
137
+ $('.l-lang a').bind('click', function() { //言語切り替えボタンを押下したときに発火
138
+ $.cookie('siteview', $(this).data('siteview'), { path: '/' }); //siteviewという名前でcookieに値をセット
139
+ });
140
+ }
141
+ setSiteviewCookie();
236
142
 
237
- <!-- ------------------------------------------------------------------------------------------------------------------------------ -->
238
-
239
- <xml id="toolbox" style="display: none">
240
- <category name="Music" colour="0">
241
- <block type="play1"></block>
143
+ // 日本語 or 英語を選んだ場合の処理
242
- <block type="play"></block>
144
+ if($.cookie('siteview') == 'en') {
145
+ //英語が選択されている場合(coockieの値にenが設定されている時)
146
+ $('.en').css('display', 'block'); //英語を表示
147
+ $('.jp').css('display', 'none'); //日本語を非表示
148
+ $('.l-lang .l-lang__en').addClass('is-active'); //言語切り替えボタンにクラスを振る処理
243
- <block type="gauss1"></block>
149
+ $('.l-lang .l-lang__jp').removeClass('is-active');
244
- <block type="gauss"></block>
150
+ } else {
245
- <block type="weibul1"></block>
246
- <block type="weibul"></block>
247
- <block type="randwalk1"></block>
248
- <block type="randwalk"></block>
249
- </category>
151
+ //日本語が選択されている場合
250
- </xml>
251
-
252
- <xml id="startBlocks" style="display: none">
253
- <block type="controls_repeat_ext" x="20" y="20"></block>
152
+ $('.jp').css('display', 'block'); //日本語を表示
254
- </xml>
255
-
256
- <!-- ------------------------------------------------------------------------------------------------------------------------------ -->
153
+ $('.en').css('display', 'none'); //英語を非表示
257
- <script src="script.js"></script>
154
+ $('.l-lang .l-lang__jp').addClass('is-active');
258
-
259
- </body>
260
-
261
- </html>
155
+ $('.l-lang .l-lang__en').removeClass('is-active');
262
-
156
+ }
157
+ })
263
158
  ```
264
159
 
265
160
  ### 試したこと

2

add repository

2024/04/11 02:07

投稿

aaaa____
aaaa____

スコア29

title CHANGED
File without changes
body CHANGED
@@ -16,6 +16,7 @@
16
16
 
17
17
 
18
18
  ### 該当のソースコード
19
+ [リポジトリ](https://github.com/snym-yt/testLanguageSettings)
19
20
 
20
21
  ```javaScript
21
22
  // ================================== on Load ===================================

1

画像をリンクで追加

2024/04/09 12:13

投稿

aaaa____
aaaa____

スコア29

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,10 @@
1
1
  ### 実現したいこと
2
2
 
3
- - [ ] ページを開いた時に言語選択(日本語 or 英語)のポップアップを表示.
3
+ - ページを開いた時に言語選択(日本語 or 英語)のポップアップを表示.
4
- - [ ] 選択された言語に従ったJSファイルが読み込まれる
4
+ - 選択された言語に従ったJSファイルが読み込まれる
5
- - [ ] ポップアップのボタンによる言語選択を行う前は日本語のファイルたちを読み込んでおく
5
+ - ポップアップのボタンによる言語選択を行う前は日本語のファイルたちを読み込んでおく
6
- - [ ] 英語を選択されたら,読み込んでいた日本語ファイルたちの読み込みをやめて英語の方だけを読み込む
6
+ - 英語を選択されたら,読み込んでいた日本語ファイルたちの読み込みをやめて英語の方だけを読み込む
7
- - [ ] リロードをしたとき,ブロックが適切に復元される
7
+ - リロードをしたとき,ブロックが適切に復元される
8
8
 
9
9
  ### 前提
10
10
 
@@ -12,6 +12,7 @@
12
12
  https://developers.google.com/blockly?hl=ja
13
13
  ユーザの使う言語によって扱うブロックを変更させたいので,適切にポップアップによる言語切り替えを可能にしたいです.
14
14
  現状では,ポップアップによる言語の切り替え自体はできているのですが,ポップアップのボタンを押すまで読み込みが行われない仕様のため,リロードを行うとブロックが正しく復元されません.
15
+ [POP UPが出てる画面](https://drive.google.com/file/d/1DcenXvCwHIXIDQaRyxnoDdci3S37BN2s/view?usp=sharing)
15
16
 
16
17
 
17
18
  ### 該当のソースコード