せっかく久々にコードを書いたので（コピペしただけですが）、さわりのところをアップしておく ― 2019年09月27日 01:08
せっかく久々にコードを書いたので（コピペしただけですが）、さわりのところをアップしておく
グーグルの自動翻訳に通して日本語化したコンテンツを、英文だけ隠して日本語だけ見えるようにする仕掛けを作った。
コンテンツは非公開なので、コードのところだけ書いておく。
（クリックで表示・非表示の切り替えができるボックスをcssのみで実装する）
https://blog.niketcha.com/website-css-display-switch-box/
ーーーーーここからーーーーー
<html>
<HEAD>
<meta charset="UTF-8">
<style type="text/css">
<!--
/*ボックス全体*/
.switchbox {
margin: 10px 0;
padding: 0;
}
/*ラベル*/
.switchbox label {
color: #808080;
cursor :pointer;
}
/*チェックボックスを非表示にする*/
.switchbox input {
display: none;
}
/*中身を非表示にしておく*/
.switchbox div {
height: 0;
overflow-y: hidden;
opacity: 0;
}
/*クリックで中身を表示*/
.switchbox input:checked + label + div {
height: auto;
opacity: 1;
}
-->
</style>
</HEAD>
<body>
<div class="switchbox">
<input type="checkbox" id="label1" />
<label for="label1">en.</label>
<div>
ここに、隠したいコンテンツ１を書く<br>
</div>
</div>
ここに、表示したいコンテンツ１を書く<br>
<div class="switchbox">
<input type="checkbox" id="label2" />
<label for="label2">en.</label>
<div>
ここに、隠したいコンテンツ２を書く<br>
</div>
</div>
ここに、表示したいコンテンツ２を書く<br>
</body>
</html>
ーーーーーここまでーーーーー
元は、チェックボックスがあったんだが、必要ないのでラベルクリックするだけにした。
何か、余分なコードが残っているかもしれない。
ラベル名を、ユニークにしておく必要がある。
ラベルは英語表記の表示・非表示だったので「en.」とした。
ここは、何でもいいらしい。
資料にはなかったが、先頭に目次を付けて、ページの途中からトップに戻れる仕掛けも仕込んだ。
（上に戻るボタン ：参考にしたページ）
http://toretama.jp/return-top-button-scroll.html
内容は、コピペしただけなので割愛する。
jQueryというネット上にあるライブラリファイルを、都度ダウンロードするらしいので、ネット環境がないとだめかもしれない。
ローカルにコピーして動作させる方法もあるようだが、そこまでは調べなかった。
（jQuery）
https://ja.wikipedia.org/wiki/JQuery
「jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。」
そう、ＣＳＳとジャバスクリプトを織り込んでみたわけだ。
使えさえすれば、何でもいい。
ガス計画で使用する計算式などは、さすがにジャバスクリプトで書いた。
単なる四則演算だが、「＋」演算子については注意が必要だ。
（値を入力して計算してみよう）
http://js.k-sakabe.com/calc_input.html
「数値などの値を入力するにはフォームを使います。そして計算を開始するボタンを用意し、クリックされたら計算するようにします。」
「その1」を実行すると、文字の連結になる。
で、フォームの値が数になるようにeval関数で変換して計算する。
ちなみに、このページのコードにはバグがあって、そのままコピペしても動かない。
ーーーーーここからーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<SCRIPT language="JavaScript">
function Add1(){
document.fm1.C.value =eval(document.fm1.A.value) + eval(document.fm1.B.value);
}
function reset1() {
document.fm1.reset();
}
</SCRIPT>
</head>
<body>
<FORM name="fm1">
<INPUT size="20" type="text" name="A" value="10">+
<INPUT size="20" type="text" name="B">
<INPUT type="button" value="=" onclick="Add1()">
<INPUT size="20" type="text" name="C">
<INPUT type="button" value="リセット" onclick="reset1()">
</FORM>
</body>
</html>
ーーーーーここまでーーーーー
動くようにしたコードだが、ジャバスクリプトセクションとフォームセクションにおいて、ファンクション名「Add1」やフォームの名前「fm1」をマッチさせておかないとな。
追加で、フォーム「A」にデフォルト値「10」を入れておく。
これはリセットしても残っている。
完全にクリアすることも出来るらしいが、今回は支障ないので試さなかった（上書きで変えられます）。
再読み込みすればそれ以外の数字は消えるけど、リセットボタンも付けた。
実際書いたコードでは、「if」分による条件分岐もしたけど、値を放り込む変数を１つ作るだけで済んだ。
あとは、リファレンスを見ながら、テキトーに書いただけ。
典型的なスパゲティプログラムになったが、スクリプトなんて、所詮、そんなもんだろう（そうなのかあ？）。
人様に使っていただくプログラムではなく、表計算ソフト代わりにフォームに放り込んだ数字を、計算式書いて弄るだけだからな。
何か不都合があれば、自分で書いているだけにすぐ分かる（カッコの数が違うだけで、簡単に動かなくなるし）。
やれやれ・・・。
フォームから取得した値を、ちゃんと変数に入れて管理した方が見通しは良くなるんだが、今回はせいぜい２０個程度だったので、そのまま使った。
トータルでも、１００行に満たない小さなプログラムだ。
何かを揃えたり、見やすくするのは、もう少しデカいのからでいい。
スクリプト系のプログラムは、直ぐに動作が確認でき、書いては直し、動かないと嘆いてはまた書くのが正しい。
動けば嬉しいし、動かなければ動くようになるまで、うんうん唸りながら弄るのも、また楽しい。
プログラミングも楽しいが、ガス計算などの数式を理解することも楽しい。
ははあ、そういうわけだったのかと、自分で式を書きながらようやく納得する。
テキストに書いてある式に必死に数字を代入して、電卓叩いて答え出しても、なかなか理解するところまでは行かない。
計算にエネルギー取られて、肝心の数式の方まで気が回らないのだ（浮沈子だけかあ？）。
エクセルでも何でもいいから、そこに式を書き込んで、自動計算する仕掛けを作ればたちどころに理解できる。
不自然な値が出た時でも、何が原因かが分かる。
今回は、そんな効用も感じることができた。
この他には、ＨＴＭＬの表組の記述（浮沈子、苦手です！）にチャレンジしてみた。
ーーーーーここからーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<body>
<table border="1" cellspacing="0" bordercolor="#333333">
<tr>
<th>ヘッダー１</th>
<th>ヘッダー２</th>
<th>ヘッダー３</th>
<th>ヘッダー４</th>
<th bgcolor="#ffff00">ヘッダー５</th>
<th bgcolor="#ffff00">ヘッダー６</th>
<th bgcolor="#ffff00">ヘッダー７</th>
<th bgcolor="#ffff00">ヘッダー８</th>
</tr>
<tr>
<td>データ１１</td>
<td>データ２１</td>
<td>データ３１</td>
<td>データ４１</td>
<td rowspan="4">データ５</td>
<td rowspan="4">データ６</td>
<td rowspan="4">データ７</td>
<td rowspan="4">データ８</td>
</tr>
<tr>
<td>データ１２</td>
<td>データ２２</td>
<td>データ３２</td>
<td>データ４２</td>
</tr>
<tr>
<td>データ１３</td>
<td>データ２３</td>
<td>データ３３</td>
<td>データ４３</td>
</tr>
<tr>
<td>データ１４</td>
<td>データ２４</td>
<td>データ３４</td>
<td>データ４４</td>
</tr>
</table>
</body>
</html>
ーーーーーここまでーーーーー
項目名やデータは変えたが、表組自体は同じだ。
セルの背景色も付けてみた。
ささやかなチャレンジ・・・。
素人の楽しみとしてのコーディング。
テキストで書くことができ、ブラウザーで動ごかせる。
この程度のコードなら、エディタの支援がなくても何とかなる。
エクリプスのような、統合開発環境がなくてもいい。
そっちの使い方の方が、難しかったりするしな。
（【ゼロからわかる】Eclipseのインストールと初歩的な使い方）
https://eng-entrance.com/java-eclipse-install
「EclipseとはいわゆるIDE（統合開発環境）だ。統合開発環境というと難しく聞こえるが、テキストエディタが進化しすぎたものくらいに考えておけば最初はわかりやすい。」
エクリプスの開発者が卒倒しそうな見解だな。
まあいい。
浮沈子の場合、コードを書くのは手段であって目的ではない。
今回の作業も、用が済めば忘れてしまうだろう。
この記事は、自分の記憶を留めておくためのものだ。
内容は、日々古くなり、やがて朽ち果てていく。
書かれたコードを再利用することもなく、ハードディスクの肥やしになるだけだ。
プログラムは、耐久消費財のようなもので、やがて置き換えられ、更新され、用が済めば捨てられていく。
金属やガラスやプラスチックやゴムならば、素材として再生することができるかもしれないが、苦労して書かれたコードは消え去るのみだ。
膨大な人間の営為が、そうして消えていく。
スマホやパソコンをいじりながら、ささやかな欲望を仮想世界で叶えるために。
２０世紀のコンピューターの世界には、人間の単純作業を機械に置き換えていくという真っ当な正義があった。
解放された人間は、真に人間らしい、探求や創造などの生き生きした活動のために生涯を捧げることができるのだと。
２１世紀初頭の状況は、とても正義に基づくものとは思えないな。
目的と手段が入れ替わり、あるいは混沌として、やはり同じように単純作業に追い込まれている。
ゲームとかな。
で、プログラミングは機械を動かすためというより、機械が人間を動かすために行われているようにも見える。
人間は、プログラムされた機械の言いなりになっていくだけの存在だ（そうなのかあ？）。
機械仕掛けや人間の組織に限らず、浮沈子は、システムは運用の奴隷だと考えている。
ミッションを成功させるためには、必要なシステムを構築するしかないが、それを動かすのは人間だ。
人間の意志の介在なしに動くシステムはない。
人間が作った世界は、未だにそこまで統合されてはいないからな。
ただ一つ、この宇宙だけは人間の存在如何に関わらず、動き続けるシステムだ。
その中に人間を取り込みつつ・・・。
話が発散した。
数兆年後、熱的死を迎えた宇宙の中で、その究極の自律システムもまた終焉を迎えるのだろうか・・・。
＜コードを実行（表示）する方法：追加＞
内容をコピペしてテキストファイルとして保存したのち、ファイルの拡張子をhtmまたはhtmlに変更してブラウザーに読み込ませるか、テキストファイルの拡張子（txt）のまま、右クリックで「プログラムから開く」からブラウザーを選択して開く。
グーグルの自動翻訳に通して日本語化したコンテンツを、英文だけ隠して日本語だけ見えるようにする仕掛けを作った。
コンテンツは非公開なので、コードのところだけ書いておく。
（クリックで表示・非表示の切り替えができるボックスをcssのみで実装する）
https://blog.niketcha.com/website-css-display-switch-box/
ーーーーーここからーーーーー
<html>
<HEAD>
<meta charset="UTF-8">
<style type="text/css">
<!--
/*ボックス全体*/
.switchbox {
margin: 10px 0;
padding: 0;
}
/*ラベル*/
.switchbox label {
color: #808080;
cursor :pointer;
}
/*チェックボックスを非表示にする*/
.switchbox input {
display: none;
}
/*中身を非表示にしておく*/
.switchbox div {
height: 0;
overflow-y: hidden;
opacity: 0;
}
/*クリックで中身を表示*/
.switchbox input:checked + label + div {
height: auto;
opacity: 1;
}
-->
</style>
</HEAD>
<body>
<div class="switchbox">
<input type="checkbox" id="label1" />
<label for="label1">en.</label>
<div>
ここに、隠したいコンテンツ１を書く<br>
</div>
</div>
ここに、表示したいコンテンツ１を書く<br>
<div class="switchbox">
<input type="checkbox" id="label2" />
<label for="label2">en.</label>
<div>
ここに、隠したいコンテンツ２を書く<br>
</div>
</div>
ここに、表示したいコンテンツ２を書く<br>
</body>
</html>
ーーーーーここまでーーーーー
元は、チェックボックスがあったんだが、必要ないのでラベルクリックするだけにした。
何か、余分なコードが残っているかもしれない。
ラベル名を、ユニークにしておく必要がある。
ラベルは英語表記の表示・非表示だったので「en.」とした。
ここは、何でもいいらしい。
資料にはなかったが、先頭に目次を付けて、ページの途中からトップに戻れる仕掛けも仕込んだ。
（上に戻るボタン ：参考にしたページ）
http://toretama.jp/return-top-button-scroll.html
内容は、コピペしただけなので割愛する。
jQueryというネット上にあるライブラリファイルを、都度ダウンロードするらしいので、ネット環境がないとだめかもしれない。
ローカルにコピーして動作させる方法もあるようだが、そこまでは調べなかった。
（jQuery）
https://ja.wikipedia.org/wiki/JQuery
「jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。」
そう、ＣＳＳとジャバスクリプトを織り込んでみたわけだ。
使えさえすれば、何でもいい。
ガス計画で使用する計算式などは、さすがにジャバスクリプトで書いた。
単なる四則演算だが、「＋」演算子については注意が必要だ。
（値を入力して計算してみよう）
http://js.k-sakabe.com/calc_input.html
「数値などの値を入力するにはフォームを使います。そして計算を開始するボタンを用意し、クリックされたら計算するようにします。」
「その1」を実行すると、文字の連結になる。
で、フォームの値が数になるようにeval関数で変換して計算する。
ちなみに、このページのコードにはバグがあって、そのままコピペしても動かない。
ーーーーーここからーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<SCRIPT language="JavaScript">
function Add1(){
document.fm1.C.value =eval(document.fm1.A.value) + eval(document.fm1.B.value);
}
function reset1() {
document.fm1.reset();
}
</SCRIPT>
</head>
<body>
<FORM name="fm1">
<INPUT size="20" type="text" name="A" value="10">+
<INPUT size="20" type="text" name="B">
<INPUT type="button" value="=" onclick="Add1()">
<INPUT size="20" type="text" name="C">
<INPUT type="button" value="リセット" onclick="reset1()">
</FORM>
</body>
</html>
ーーーーーここまでーーーーー
動くようにしたコードだが、ジャバスクリプトセクションとフォームセクションにおいて、ファンクション名「Add1」やフォームの名前「fm1」をマッチさせておかないとな。
追加で、フォーム「A」にデフォルト値「10」を入れておく。
これはリセットしても残っている。
完全にクリアすることも出来るらしいが、今回は支障ないので試さなかった（上書きで変えられます）。
再読み込みすればそれ以外の数字は消えるけど、リセットボタンも付けた。
実際書いたコードでは、「if」分による条件分岐もしたけど、値を放り込む変数を１つ作るだけで済んだ。
あとは、リファレンスを見ながら、テキトーに書いただけ。
典型的なスパゲティプログラムになったが、スクリプトなんて、所詮、そんなもんだろう（そうなのかあ？）。
人様に使っていただくプログラムではなく、表計算ソフト代わりにフォームに放り込んだ数字を、計算式書いて弄るだけだからな。
何か不都合があれば、自分で書いているだけにすぐ分かる（カッコの数が違うだけで、簡単に動かなくなるし）。
やれやれ・・・。
フォームから取得した値を、ちゃんと変数に入れて管理した方が見通しは良くなるんだが、今回はせいぜい２０個程度だったので、そのまま使った。
トータルでも、１００行に満たない小さなプログラムだ。
何かを揃えたり、見やすくするのは、もう少しデカいのからでいい。
スクリプト系のプログラムは、直ぐに動作が確認でき、書いては直し、動かないと嘆いてはまた書くのが正しい。
動けば嬉しいし、動かなければ動くようになるまで、うんうん唸りながら弄るのも、また楽しい。
プログラミングも楽しいが、ガス計算などの数式を理解することも楽しい。
ははあ、そういうわけだったのかと、自分で式を書きながらようやく納得する。
テキストに書いてある式に必死に数字を代入して、電卓叩いて答え出しても、なかなか理解するところまでは行かない。
計算にエネルギー取られて、肝心の数式の方まで気が回らないのだ（浮沈子だけかあ？）。
エクセルでも何でもいいから、そこに式を書き込んで、自動計算する仕掛けを作ればたちどころに理解できる。
不自然な値が出た時でも、何が原因かが分かる。
今回は、そんな効用も感じることができた。
この他には、ＨＴＭＬの表組の記述（浮沈子、苦手です！）にチャレンジしてみた。
ーーーーーここからーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<body>
<table border="1" cellspacing="0" bordercolor="#333333">
<tr>
<th>ヘッダー１</th>
<th>ヘッダー２</th>
<th>ヘッダー３</th>
<th>ヘッダー４</th>
<th bgcolor="#ffff00">ヘッダー５</th>
<th bgcolor="#ffff00">ヘッダー６</th>
<th bgcolor="#ffff00">ヘッダー７</th>
<th bgcolor="#ffff00">ヘッダー８</th>
</tr>
<tr>
<td>データ１１</td>
<td>データ２１</td>
<td>データ３１</td>
<td>データ４１</td>
<td rowspan="4">データ５</td>
<td rowspan="4">データ６</td>
<td rowspan="4">データ７</td>
<td rowspan="4">データ８</td>
</tr>
<tr>
<td>データ１２</td>
<td>データ２２</td>
<td>データ３２</td>
<td>データ４２</td>
</tr>
<tr>
<td>データ１３</td>
<td>データ２３</td>
<td>データ３３</td>
<td>データ４３</td>
</tr>
<tr>
<td>データ１４</td>
<td>データ２４</td>
<td>データ３４</td>
<td>データ４４</td>
</tr>
</table>
</body>
</html>
ーーーーーここまでーーーーー
項目名やデータは変えたが、表組自体は同じだ。
セルの背景色も付けてみた。
ささやかなチャレンジ・・・。
素人の楽しみとしてのコーディング。
テキストで書くことができ、ブラウザーで動ごかせる。
この程度のコードなら、エディタの支援がなくても何とかなる。
エクリプスのような、統合開発環境がなくてもいい。
そっちの使い方の方が、難しかったりするしな。
（【ゼロからわかる】Eclipseのインストールと初歩的な使い方）
https://eng-entrance.com/java-eclipse-install
「EclipseとはいわゆるIDE（統合開発環境）だ。統合開発環境というと難しく聞こえるが、テキストエディタが進化しすぎたものくらいに考えておけば最初はわかりやすい。」
エクリプスの開発者が卒倒しそうな見解だな。
まあいい。
浮沈子の場合、コードを書くのは手段であって目的ではない。
今回の作業も、用が済めば忘れてしまうだろう。
この記事は、自分の記憶を留めておくためのものだ。
内容は、日々古くなり、やがて朽ち果てていく。
書かれたコードを再利用することもなく、ハードディスクの肥やしになるだけだ。
プログラムは、耐久消費財のようなもので、やがて置き換えられ、更新され、用が済めば捨てられていく。
金属やガラスやプラスチックやゴムならば、素材として再生することができるかもしれないが、苦労して書かれたコードは消え去るのみだ。
膨大な人間の営為が、そうして消えていく。
スマホやパソコンをいじりながら、ささやかな欲望を仮想世界で叶えるために。
２０世紀のコンピューターの世界には、人間の単純作業を機械に置き換えていくという真っ当な正義があった。
解放された人間は、真に人間らしい、探求や創造などの生き生きした活動のために生涯を捧げることができるのだと。
２１世紀初頭の状況は、とても正義に基づくものとは思えないな。
目的と手段が入れ替わり、あるいは混沌として、やはり同じように単純作業に追い込まれている。
ゲームとかな。
で、プログラミングは機械を動かすためというより、機械が人間を動かすために行われているようにも見える。
人間は、プログラムされた機械の言いなりになっていくだけの存在だ（そうなのかあ？）。
機械仕掛けや人間の組織に限らず、浮沈子は、システムは運用の奴隷だと考えている。
ミッションを成功させるためには、必要なシステムを構築するしかないが、それを動かすのは人間だ。
人間の意志の介在なしに動くシステムはない。
人間が作った世界は、未だにそこまで統合されてはいないからな。
ただ一つ、この宇宙だけは人間の存在如何に関わらず、動き続けるシステムだ。
その中に人間を取り込みつつ・・・。
話が発散した。
数兆年後、熱的死を迎えた宇宙の中で、その究極の自律システムもまた終焉を迎えるのだろうか・・・。
＜コードを実行（表示）する方法：追加＞
内容をコピペしてテキストファイルとして保存したのち、ファイルの拡張子をhtmまたはhtmlに変更してブラウザーに読み込ませるか、テキストファイルの拡張子（txt）のまま、右クリックで「プログラムから開く」からブラウザーを選択して開く。
コメントをどうぞ
※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。
※なお、送られたコメントはブログの管理者が確認するまで公開されません。
※投稿には管理者が設定した質問に答える必要があります。