Proof4 の回答履歴

全304件中21～39件表示
  • chart.jsの複数グラフの画像化の方法

    いつもお世話になっております。前々回　https://okwave.jp/qa/q9834370.htmlでグラフを複数個表示する方法 を教えてもらいましたが、今回は、表示された複数個のグラフを同時に.toBase64Image()関数か.toDataURL()メソッドで画像化することが出来ないかと思い投稿いたしました。グラフが１個の場合は私にも var canvas = document.getElementById('myPieChart'); var image = canvas.toDataURL(); とか var image = myBarChart.toBase64Image(); とかで出来るのですが、base64エンコード文字列として複数個の場合１度別のcanvas要素に纏めてから読み込むのかあるいは個々に読み込み再配置するのかこのまま読み込めるかもさっぱり見当がつかない状態です。ご教授のほど宜しくお願いいたします。

  • chart.jsでx軸の表示値をカスタマズする方法

    いつもお世話になっております。今回、chart.jsで水平横棒グラフ使ったピラミッドチャートのx軸の片方の系列の値をカスタマイズする方法につて伺います。下記のコードの方法では左側の男の方の値が－表示になってしまいます。これを＋表示に変更する方法についての相談です。目盛表示のカスタマイズには、ticks の callback にコールバックを定義すれば可能だと思いますが、左右違う系列の場合どうすればいいのか分かりません。もし可能ならばその方法をご教授願います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>棒グラフ</title> </head> <body> <canvas id="myBarChart" width="550" height="480"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <script> var ctx = document.getElementById("myBarChart").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'男',data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880,], backgroundColor: "red" }, { label:'女',data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049], backgroundColor: "green" } ] }, options: { responsive: false, title: { display: true, text: 'Pyramide des ages' }, scales: { xAxes: [{stacked: true,}], yAxes: [{stacked: true }] }, } }); </script> </body> </html>

  • chart.jsでx軸の表示値をカスタマズする方法

    いつもお世話になっております。今回、chart.jsで水平横棒グラフ使ったピラミッドチャートのx軸の片方の系列の値をカスタマイズする方法につて伺います。下記のコードの方法では左側の男の方の値が－表示になってしまいます。これを＋表示に変更する方法についての相談です。目盛表示のカスタマイズには、ticks の callback にコールバックを定義すれば可能だと思いますが、左右違う系列の場合どうすればいいのか分かりません。もし可能ならばその方法をご教授願います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>棒グラフ</title> </head> <body> <canvas id="myBarChart" width="550" height="480"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <script> var ctx = document.getElementById("myBarChart").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'男',data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880,], backgroundColor: "red" }, { label:'女',data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049], backgroundColor: "green" } ] }, options: { responsive: false, title: { display: true, text: 'Pyramide des ages' }, scales: { xAxes: [{stacked: true,}], yAxes: [{stacked: true }] }, } }); </script> </body> </html>

  • chart.jsのグラフを複数個表示する方法

    今回は、chart.jsのグラフを複数表示する方法についてお尋ねします。一応下記のコードで棒グラフ×1、円グラフ×3を上下2個ずつ配置出来るようにまではなったのですが、ただ単に1個のグラフのコードを4回繰り返したようなものですので無駄が多く冗長なコードになっています。これをもっとコンパクトなものに出来ないかと思い投稿した次第です。html,css,javascriptに関しては専門家でないのでつまみ食い程度の知識で間に合わせたお粗末なコードですが、宜しくご教授願います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> 　<title>multiグラフ</title> </head> <body> <div class="row" style="width: 70%;" > <div class="chart1" style="float: left;" > <canvas id="myChart1" width="550" height="450"></canvas></div> <div class="chart2" style="float: right;"> <canvas id="myChart2" width="550" height="450"></canvas></div> <div class="chart3" style="bottom: 0;float: left;"> <canvas id="myChart3" width="550" height="450"></canvas></div> <div class="chart4" style="bottom: 0;float: right;"> <canvas id="myChart4" width="550" height="450"></canvas></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script src="https://unpkg.com/chartjs-plugin-colorschemes"></script> <script> Chart.defaults.global.legend.labels.usePointStyle = false; //以降の凡例スタイルを矩形のまま var ctx = document.getElementById("myChart1"); var myPieChart = new Chart(ctx, { type: 'bar', data: {labels: ['1月','2月','3月','4月','5月','6月','7月'], // Ｘ軸のラベル datasets: [ {label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000]}, {label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000]}, {label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000]}]}, options: { plugins: { colorschemes: {scheme: 'office.Slice6'}}, responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: false, 　text:''}, 　　　　legend: { // 凡例 display: true, // 表示の有無 position: 'top' } // 表示位置 }}); Chart.defaults.global.legend.labels.usePointStyle = true; //以降の凡例スタイルを矩形を円に変える var ctx = document.getElementById("myChart2"); var myPieChart = new Chart(ctx, { type: 'pie', data: {labels: ['1月','2月','3月','4月','5月','6月','7月'], // Ｘ軸のラベル datasets: [{label:'仙台' ,data: [320000, 590000, 400000, 420000, 380000, 250000, 420000]}]}, options: { plugins: { colorschemes: {scheme: 'brewer.DarkTwo7'}}, responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: true, 　 text:'仙台'}, 　　　　legend: { // 凡例 display: true, // 表示の有無 position: 'left',} // 表示位置 }}); var ctx = document.getElementById("myChart3"); var myPieChart = new Chart(ctx, { type: 'pie', data: { labels: ['1月','2月','3月','4月','5月','6月','7月'], // Ｘ軸のラベル datasets: [{label:'札幌' ,data: [520000, 450000, 380000, 280000, 590000, 400000, 530000]}]}, options: { plugins: { colorschemes: {scheme: 'brewer.DarkTwo7'}}, responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: true, text:'札幌'}, legend: { // 凡例 display: true, // 表示の有無 position: 'left'} // 表示位置 }}); </script> </body> </html> 文字数の関係で渋谷のグラフ（myChart4）の部分はカットしました。

  • 縦型 レスポンシブ対応 多階層プルダウンウンリスト

    www.oct.ac.jp こちらの専門学校と同じ体裁のサイトを作りたいです。 左は固定（可変でも可）、右は可変　にしたい。 ＜HTML＞ <div class="content"> <div class="frame-left"> <div class="aaa"> <ul class="nav"> プルダウンリスト </ul> </div> </div> <div class="frame-right"> メイン記事内容 </div> </div><!--.content--> ＜ＣＳＳ＞ ここでつまずきました。 .content{ display: -webkit-flex; display: flex;} .frame-left{ width:20%; } .frame-right{ width:80%; } .aaa { overflow: hidden; width: 750px; height: 300px; margin: 0 auto; padding: 0; box-sizing: border-box; display: flex; } .nav { width: 150px; margin: 0; padding: 0; } .nav li { position: relative; width: 150px; height: 40px; } .nav > li { border-bottom: none; } .nav li:last-child { border-bottom: none; } .nav li:hover > ul > li { border-bottom: none; } .nav li > ul > li:last-child { border-bottom: none; } .nav li a { display: block; width: 150px; height: 40px; color: #fff; font-size: 14px; line-height: 2.8; padding: 0 5px; background: #9fb7d4; border-bottom: 1px solid #eee; box-sizing: border-box; text-decoration: none; transition: 0.5s; } .nav > li:hover > a {/*layer-1*/ color: orange; background: #afc6e2; transition: 0.5s; } .nav > li li:hover > a {/*layer-2*/ color: olive; background: #afc6e2; } .nav li:hover > ul > li { overflow: visible; top: -40px; left: 110px; height: 40px; } .nav li ul li { overflow: hidden; height: 0; left: 110px; list-style: none; transition: 0.2s; } .nav li ul li a { background: #9fb7d4; transition: 0.5s; } .nav li ul:before { position: absolute; content: ""; top: 14px; left: 140px; border: 5px solid transparent; border-left: 5px solid #fff; } 1）これだと2階層目が上から下までの全幅にならない 2）画面を縮小すると、プルダウンメニューがはみ出す width:auto; などにしてみましたが、上手くいきませんでした。 やり方を教えていただきたく、よろしくお願い致します。 ※できればＣＳＳだけでなんとかしたいですが、無理ならJavaScriptや jQueryなどを使って実現したいです。

    • ベストアンサー
    • u2122
    • CSS
    • 回答数1
  • javascriptのfor of文をIE11用に

    前に質問した、「chart.jsの多重円グラフで系列表示について」から得た回答から派生した問題についてです。htmlでのボタン処理を行う方法をfilemakerのwebビューアで使おうとしたところの表示ブラザーがwindows版ではレンダリングエンジンがIE11相当らしいのでfor of構文の部分が引っかかりグラフが表示できませんでした。そこでbabelの使用を教えられ、babelで書き換え処理を施した後ブラウザーで表示させたところ普通に動作しましたが、webビューアに適用したところ表示まではできたのですがボタン動作は無反応です。それなら反復処理を他の方法でもと思いましたが、私のjavascriptの生かじりの知識では太刀打ちできないので、教えてもらった下記コードをIE11にも適用できるようご教授おねがいいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> 　<title>円グラフ</title> </head> <body> <canvas id="myPieChart" width="550" height="480"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <script type="text/javascript" src="Chart.js"></script> <script type="text/javascript" src="chartjs-plugin-colorschemes.js"></script> <div class="button"> <button class="toggleDataset" data-id="0">仙台</button> <button class="toggleDataset" data-id="1">札幌</button> <button class="toggleDataset" data-id="2">渋谷</button> </div> <style> .button { left: 200px; position:relative; } </style> <script> var datasets = [ { label: '仙台', data: [320000, 590000, 400000, 420000, 380000, 250000, 420000], }, { label: '札幌', data: [520000, 450000, 380000, 280000, 590000, 400000, 530000], }, { label: '渋谷', data: [650000, 230000, 480000, 600000, 620000, 700000, 760000], }, ]; var visibility = [1, 1, 1]; // 各データの表示状態フラグ 1: 表示、0: 非表示 var ctx = document.getElementById('myPieChart'); var config = { type: 'pie', data: { labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], datasets: datasets }, options: { responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: true, text: '' }, legend: { // 凡例 display: true, // 表示の有無 position: 'top' // 表示位置 } }, plugins: { colorschemes: { scheme: 'office.Red6' //現状ではデフォルトでしか機能しない } } }; window.myPieChart = new Chart(ctx, config); var buttons = document.getElementsByClassName('toggleDataset'); for(button of buttons){ button.addEventListener('click', function(e){ // クリックされたボタンに応じてデータの表示切り替え var dataId = e.target.getAttribute('data-id'); if(visibility[dataId] == 1){ // 非表示 config.data.datasets = config.data.datasets.filter( data => data != datasets[dataId] ); e.target.style = 'text-decoration: line-through;'; }else{ // 表示 config.data.datasets.push(datasets[dataId]); e.target.style = ''; } // 表示状態フラグとグラフの更新 visibility[dataId] = 1 - visibility[dataId]; window.myPieChart.update(); }); } </script> </body> </html>

  • javascriptのfor of文をIE11用に

    前に質問した、「chart.jsの多重円グラフで系列表示について」から得た回答から派生した問題についてです。htmlでのボタン処理を行う方法をfilemakerのwebビューアで使おうとしたところの表示ブラザーがwindows版ではレンダリングエンジンがIE11相当らしいのでfor of構文の部分が引っかかりグラフが表示できませんでした。そこでbabelの使用を教えられ、babelで書き換え処理を施した後ブラウザーで表示させたところ普通に動作しましたが、webビューアに適用したところ表示まではできたのですがボタン動作は無反応です。それなら反復処理を他の方法でもと思いましたが、私のjavascriptの生かじりの知識では太刀打ちできないので、教えてもらった下記コードをIE11にも適用できるようご教授おねがいいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> 　<title>円グラフ</title> </head> <body> <canvas id="myPieChart" width="550" height="480"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <script type="text/javascript" src="Chart.js"></script> <script type="text/javascript" src="chartjs-plugin-colorschemes.js"></script> <div class="button"> <button class="toggleDataset" data-id="0">仙台</button> <button class="toggleDataset" data-id="1">札幌</button> <button class="toggleDataset" data-id="2">渋谷</button> </div> <style> .button { left: 200px; position:relative; } </style> <script> var datasets = [ { label: '仙台', data: [320000, 590000, 400000, 420000, 380000, 250000, 420000], }, { label: '札幌', data: [520000, 450000, 380000, 280000, 590000, 400000, 530000], }, { label: '渋谷', data: [650000, 230000, 480000, 600000, 620000, 700000, 760000], }, ]; var visibility = [1, 1, 1]; // 各データの表示状態フラグ 1: 表示、0: 非表示 var ctx = document.getElementById('myPieChart'); var config = { type: 'pie', data: { labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], datasets: datasets }, options: { responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: true, text: '' }, legend: { // 凡例 display: true, // 表示の有無 position: 'top' // 表示位置 } }, plugins: { colorschemes: { scheme: 'office.Red6' //現状ではデフォルトでしか機能しない } } }; window.myPieChart = new Chart(ctx, config); var buttons = document.getElementsByClassName('toggleDataset'); for(button of buttons){ button.addEventListener('click', function(e){ // クリックされたボタンに応じてデータの表示切り替え var dataId = e.target.getAttribute('data-id'); if(visibility[dataId] == 1){ // 非表示 config.data.datasets = config.data.datasets.filter( data => data != datasets[dataId] ); e.target.style = 'text-decoration: line-through;'; }else{ // 表示 config.data.datasets.push(datasets[dataId]); e.target.style = ''; } // 表示状態フラグとグラフの更新 visibility[dataId] = 1 - visibility[dataId]; window.myPieChart.update(); }); } </script> </body> </html>

  • chart.jsの多重円グラフで系列表示について

    chart.jsを使いグラフを作る方法を最近学び始めたものです。基本的なものはなんとなく出来たのですが、今回多重円グラフに作るための系列の設定につて行き詰まっています。下記のコードで多重円は出来たのですが、系列を凡例として表示させる方法がわかりません。 <script> var ctx = document.getElementById("myPieChart"); var myPieChart = new Chart(ctx, { type: 'pie', data: { labels: ['1月','2月','3月','4月','5月','6月','7月'], datasets: [ {label:'仙台' ,data: [320000,590000,400000,420000,380000,250000,420000],}, {label:'札幌' ,data: [520000,450000,380000,280000,590000,400000,530000],}, {label:'渋谷' ,data: [650000,230000,480000,600000,620000,700000,760000],}, ] }, options: { title: { display: true, text:'' }, legend: { // 凡例 display: true, // 表示の有無 position: 'top' // 表示位置 } }, plugins: { colorschemes: { scheme: 'office.Red6' } } }); </script> 1月、2月等は凡例として上部に出ているのですが、仙台、札幌等の系列名を同様に出しクリックで円を消したり表示したりするようにしたいのです。系列名だけ表示されていてこれが出来るサンプルがあったのですがコードまでの説明がありませんでした。 多重円の中から任意の円を非表示、表示させるコードをご教授願います。

  • gnuplot

    gnuplotで関数のグラフを描かせ、その線上に印を付けたいです。 例えば、y=sin(x)のサインカーブ上の、x=π／6，π／4，π／２など希望するｘの位置に相当する点に白丸○を打たせたいのです。自分でも調べてみたのですが、良い方法が見つからず困っています。教えてください。 お願いします。

  • gnuplot

    gnuplotで関数のグラフを描かせ、その線上に印を付けたいです。 例えば、y=sin(x)のサインカーブ上の、x=π／6，π／4，π／２など希望するｘの位置に相当する点に白丸○を打たせたいのです。自分でも調べてみたのですが、良い方法が見つからず困っています。教えてください。 お願いします。

  • httpからhttpsへのリダイレクト方法

    すいません、よくわかりませんので教えて下さい。.htaccessに記述してhttpにアクセス来たものをhttpsへリダイレクトしたいです。 今の状況は下記です。 AddHandler application/x-httpd-php53 .php RewriteEngine On # Main RewriteRule for multidomain. RewriteCond %{HTTP_HOST} ^(sanetsu.com) RewriteCond %{REQUEST_URI} !^/(sanetsu.com)/ RewriteRule ^(.*)$ http://www.sanetsu.com/$1 [L] # Main RewriteRule for multidomain. RewriteCond %{HTTP_HOST} ^(www.burikama.com) RewriteCond %{REQUEST_URI} !^/(www.burikama.com)/ RewriteRule ^(.*)$ /%{HTTP_HOST}/$1/ [L] # Main RewriteRule for multidomain. RewriteCond %{HTTP_HOST} ^(burikama.com) RewriteCond %{REQUEST_URI} !^/(burikama.com)/ RewriteRule ^(.*)$ http://www.burikama.com/$1 [L] # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress すいません、上記の記述をどのように変更したらhttpsへリダイレクトさせることができますでしょうか？前任のweb担当の方と連絡が付かないので教えていただけたらありがたいです。 宜しくお願い致します。

    • ベストアンサー
    • zion12345
    • HTML
    • 回答数1
  • Windows10のWSLへのペーストについて

    WindowsのWSLをいつもパワーシェルからbashコマンドで起動しています。その時点でウィンドウがubuntuのターミナルなりますが、ウィンドウズ上でコピーした文字をそのubuntuのターミナルにペーストすることは可能でしょうか。ctrl+Vとかctrl+shift+Vとかではできませんでした。右クリックなども効かないようです。よろしくお願いします。 以前はできたと思ったのですが、現在はできません。WSLではなくて、VMwareだったらできた思いますが、WSLよりも起動が遅くリソースを使ってそうなので敷居が高くなっているのでWSLにしたいのですが。

  • chart.jsの多重円グラフで系列表示について

    chart.jsを使いグラフを作る方法を最近学び始めたものです。基本的なものはなんとなく出来たのですが、今回多重円グラフに作るための系列の設定につて行き詰まっています。下記のコードで多重円は出来たのですが、系列を凡例として表示させる方法がわかりません。 <script> var ctx = document.getElementById("myPieChart"); var myPieChart = new Chart(ctx, { type: 'pie', data: { labels: ['1月','2月','3月','4月','5月','6月','7月'], datasets: [ {label:'仙台' ,data: [320000,590000,400000,420000,380000,250000,420000],}, {label:'札幌' ,data: [520000,450000,380000,280000,590000,400000,530000],}, {label:'渋谷' ,data: [650000,230000,480000,600000,620000,700000,760000],}, ] }, options: { title: { display: true, text:'' }, legend: { // 凡例 display: true, // 表示の有無 position: 'top' // 表示位置 } }, plugins: { colorschemes: { scheme: 'office.Red6' } } }); </script> 1月、2月等は凡例として上部に出ているのですが、仙台、札幌等の系列名を同様に出しクリックで円を消したり表示したりするようにしたいのです。系列名だけ表示されていてこれが出来るサンプルがあったのですがコードまでの説明がありませんでした。 多重円の中から任意の円を非表示、表示させるコードをご教授願います。

  • 画像のようなVをcssで作りたいのですが。。。

    画像のようなVをcssで作りたいのですが可能でしょうか。。 もし可能であれば方法は様々なやり方があるかと思いますので比較的簡単なものからご教示願えますと幸いです。 画像のようなグラデーションまでは求めませんので、どうかよろしくお願いします。 ちなみに画像は参考サイトのものの一部なのですが、検証するとV字のpngでしたので。。 何卒どうか宜しくお願い致します。

  • 【JavaScript】でラベル名を取得したい

    【JavaScriptで】セレクトボックスからラベル名を取得する方法 下に書いたHTMLのセレクトボックスからラベル名を取得するにはどうしたらよいのでしょうか？ HTMLにvalue値をつけずにこのように記述すると、下記のJavaScriptの記述でラベル名が取得できます。 ***************** <select> <option>1月</option> <option>2月</option> <option>3月</option> </select> https://imgur.com/T8W1Umy ***************** ところが下記のようにvalueに値をつけるとvalueの値が出力されラベル名は表示されません。 都道府県名や名前など各々valueの値と、ラベル名が異なることはよくあることと思います。 以下に記述したHTML（valueの値がついたもの）のセレクトボックスからラベル名を取得するにはどのように記述したら良いのでしょうか？ 分かる方いらっしゃいましたら教えて下さい。宜しくお願いします。 （JS） 'use strict'; { document.querySelector('button').addEventListener('click', () => { const li = document.createElement('li'); const month = document.querySelector('select'); li.textContent = month.value; document.querySelector('ul').appendChild(li); }); } ---------------------------------------- （HTML） <select> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> </select> <button>Add!</button> <ul> </ul>

  • Python。Seleniumの動作。

    個人的に仕事などで使えるプログラムツールを作りたいと思い、現在Pythonを勉強しています。 が、スタンパーみたいなソフトや、ログインなどの動作をしてくれるとか、自動でプルダウンをランダムに選択してくれるようなワンボタンのソフト等を作りたくてGUI前提で考えていたのですが、そもそもPythonをGUIにするのは重いからあまりしないと後で知りました。 色々調べたり聞いたりすると、そういう目的ならPythonがいいんじゃないかみたいに言われたりもしたのですが… SeleniumならWEBの自動操作が出来るということで色々弄っていたのですが、確かに操作は少し出来るようになってきましたが、あまりにも動作がアナログ的というか… 表示されていない要素は指定できないとか、WEBページの読み込みが間に合わないと動作がバグるとか。 個人的にはプログラムというのはもっと『このボタンを押せとコードを書いたらボタンを確実に押して進行してくれる』ものだと思っていたのですが。 こういうものなのでしょうか？ それともSeleniumが実際に人が操作する動作をしっかり守ったものなのでしょうか。 これが例えば他の言語でコードを組んだ場合も、同じような動作になってしまうのでしょうか。

  • JavaScript を一文にしたい

    JavaScript で[style]や[classList]と[textContent]を繋げて一文にする方法を教えてください。 超初心者です。 現在、条件分岐を学習した後、条件演算子を学習しています。if～else文を簡略化して以下のように記述できると学びました。 【条件式 ? trueの処理 : falseの処理;】 これを使って(-----)以下のように記述するとブラウザに"Congrats!"と表示されます。 定数constに70を代入すると"You have failed!"とちゃんと出てきます。 ちなみにこれにHTML内に記述しているCSSを効かせたいのですが、 h1.classList.ad('pass').textContent = 'Congrats!': ..........とするとエラーになります。 style属性をつけてセミコロン(;)で区切ってもエラーとなります。 複数行で記述するなら h1.classList.ad('pass'); h1.textContent = 'Congrats'; と記述すればいいのですが、この条件演算子の場合は、セミコロンでつなぐとエラーになります。 こういう場合、複数行でなく一文にして複数の属性をつけるにはどのように記述したらよいのでしょうか？ ブラウザはchromeの最新版を使っています。 初心者です。教えてください。宜しくお願い致します。 -------- (main.js) 'use strict'; const score = 85; const h1 = document.querySelector('h1'); score >= 80? h1.textContent = 'Congrats' : h1.textContent = 'You have failed'; ------------------------------------ （HTML） <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript BASICS</title> <style> .pass{ color:#000; background-color: red; } .fail{ color:blue; background-color: gray; } </style> </head> <body> <h1></h1> <script src="js/main.js"></script> </body> </html>

  • 数式をpc上で記述したい

    当方は社会人で数学とは全く縁のない仕事をしていますが、ずっと苦手な寡黙を克服するためにもう一度勉強をしようと問題集を買いました。 ただ問題が一つありまして、通常の方法ではevernoteを利用するときに数式を記述できないことです。 そのため、数式をevernote、それでは無理であればそれ以外のツールで数式を記入できるものがあれば教えていただけないでしょうか？

  • 複数のボタンで音声とポップアップを同時に出す方法

    　大阪府地図形当てクイズを作成しています。ボタンをクリックすると音声が鳴るところまではうまく行きましたが、同じボタンで同時に「正解」などの表示を出す方法について教えてください。 コードを下に示しますが、<script>の最後に // アラート表示 alert('正解'); } を加えるとポップアップはすべてのボタンで「正解」になってしまいます。 　<a onClick="soundbell(1)" >のところに何か付け加えるとどうかいろいろ試していますが、なかなかうまく行きません。 <script> function soundbell(n) { // 割り当てるID名（引数のnを連結して指定） var id = 'sound-'+n ; // 初回の再生以外だったら音声ファイルの再生ポイントを先頭にしておく if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ) { document.getElementById( id ).currentTime = 0; } // [ID:sound-file]の音声ファイルを再生[play()]する document.getElementById( id ).play() ; } </script> </head> <BODY> <p align="center"> <a onClick="soundbell(1)"><input type="button" value="　能勢町　"></a> <a onClick="soundbell(2)"><input type="button" value="　高槻市　"></a> <a onClick="soundbell(2)"><input type="button" value="　豊能町　"></a> <a onClick="soundbell(2)"><input type="button" value="　島本町　"></a> //----- 略 ----- <a onClick="soundbell(2)"><input type="button" value="　大阪市　"></a> </p> <audio id="sound-1" preload="auto"> <source src="correct-answer.mp3" type="audio/mp3"> </audio> <audio id="sound-2" preload="auto"> <source src="wrong-answer.mp3" type="audio/mp3"> </audio> </BODY> </HTML>

活動履歴