PC生活

2026年7月11日土曜日

DIY＞オープンリールテープレコーダーNational　ＲＱ-401を修理(破壊?)する

ヤフオクで落札したRQ-401を修理する

症状は、リバース再生でうまく巻き取られない、巻き戻しが弱い・巻き取れないというもの。
せっかくヘッドが2つあるのに、リバース再生がうまくいかないのは納得いかないので、修理を試みる。少し汚れているが、全体的に動きは問題ないようだ。

上から見た所

ふたを開けた所

正面横。電源スイッチがなく、電池が入ってないと100Vの方に切り替わる仕組みらしい。

修理を始める。
原因は内部のベルトだと思われるので、中身を取り出しにかかる。まず、ヘッドがある部分のネジを外す。

レバーのネジを外す

後ろの蝶番部分のネジを外す

裏蓋の蝶番の反対側を引っ張りつつ、持ち上げてはずす。
本体がむき出しになるので、赤い矢印の部分のネジ(赤い色をしている)を外すと本体が外れる。
その前に、スピーカーへの配線(白と青の撚ってあるの)が折りたたまっているのでのばしておく。そうしないと本体を持ち上げた時、スピーカーの端子が引っ張られて、ちぎれてしまう。

電池ボックスへのケーブルは、電池ボックス側のコネクタが外れるのではずしておく。

まず、この部分のベルトだが、少し伸びてはいるが弾力があり粘ついてもいないので、このままいく。実は、2mmの角ゴムベルトを付けてみたが少しきつくて、却って動きが悪くなったのでこのままにしておいた。ここは、少し緩いくらいのベルトでないといけないとどこかのサイトに書いてあった。

Ⓐ:リバース再生で使用するベルト。リバース再生時はⒸが左上に押しやられ、Ⓓのプーリーを押してⒶのベルトを張り、左の巻取り部分に回転を伝える。
Ⓑ:通常再生で使用するベルト
Ⓑは型はついてしまっているが、柔らかいのでこのまま使用する。Ⓐのベルトは伸びて力が伝わらないので、これを今回交換する事にした。

カセツトデッキで使われる細いゴムベルトをはめてみた。動くことは動くが、巻取りは弱い。

バンコード丸ベルト(ポリウレタンベルト)2mmで作ってみた。ガスレンジで軽く炙りくっつける。はみ出し部分は爪切りで切っておく。

太すぎて、まったく回らない。プーリーの溝にはまりすぎている感じか、あるいは少し短いのが原因か。

今度は、1.5mmで製作。一番よく回った。巻き戻しが少し突っかかるが、今までの中で一番いいので、これで行く事にする。

線を切ってしまったスピーカーの修理と、ついでにスピーカーケーブルを延長しておく。ラグ板がフニャフニャしているので、少し引っ張ったらコイルに繋がっているコードが切れてしまった。

ネジ止めの金属板でおさえてあるので、まず外してみる。

スピーカーコイルにつながっているコードを半田付けし、新しいスピーカーケーブルをラグ板につなげる。後は、ホットボンドでケーブルをスピーカーの枠に固定しておく。

新旧のスピーカーコードを半田付け後、ホットボンドで絶縁しておく。

ケースの電池ボックス部分の清掃を行う。

再び、ケースに本体をはめ込む。この時、レベルメーターが少し動いて、枠にうまくはまらないので、位置を手で補正しながら全体をはめ込む。全体をねじ止めしてから、スピーカーケーブルが回転部に行かない様、うまくまとめる。電池ボックスへの配線をつなげて裏蓋をはめ込み、蝶番側のネジを止める。。

2026年4月1日水曜日

HTML＞折れ線グラフ雛形

折れ線グラフ雛形

tableタグで折れ線グラフを実現するもの。
グラフを増やす時は、tableタグ部分コピペする。
グラフの設定は、主にCSS変数を変える事である程度可能。
後は、ソースコードを直接変更する。
jsは、svgのx軸の表示位置を調整・設定、及び、svgとhtmlの座標を合致させるもの。

<style>
  /* グラフtable */
  .ogt-tb {border-collapse: collapse; font-size: small;}
  /* 縦軸ラベル */
  .ogt-tb .ogt-tr {padding: 1px; text-align: center; vertical-align: middle; writing-mode: vertical-rl; }
  /* 縦軸目盛 */
  .ogt-tb .ogt-tm {
    height: var(--ogt-hei);
    border-right: 1px solid black;
    text-align: right;
    vertical-align: top; /* 上端合わせにして目盛の間隔を調整 */
    padding-right: 5px;
  }
  /* グラフ描画エリア */
  .ogt-tb .graph-area {
    position: relative;
    width: calc( var(--ogt-mas) * var(--ogt-komoku) + var(--ogt-ofs) );
    height: var(--ogt-hei);
    background-color: var(--ogt-bco);
    background-image: linear-gradient(gray 1px, transparent 1px);
    background-size: 100% var(--ogt-mem); /* 縦軸補助線 */
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    padding: 0;
  }
  .ogt-tb .graph-area::after {
    background-image: linear-gradient(to right, gray 1px, transparent 1px);
    background-repeat: repeat-x;
    background-size: var(--ogt-mas) 100%; /* 横軸補助線 */
    content: "";
    height: 100%;
    left: var(--ogt-ofs);
    position: absolute;
    top: 0;
    width: 100%;
  }  
  /* SVGの設定 */
  .ogt-tb svg {width:100%; height:100%; display:block;}
  /* 折れ線のスタイル */
  .ogt-tb .line {fill: none; stroke-width: 2;}
  /* 点（プロット）のスタイル */
  .ogt-tb .dot {}
  /* 横軸ラベル */
  .ogt-tb .ogt-yr{text-align: center; padding-top: 5px;}
  /* 横軸目盛り */
  .ogt-tb .ogt-ym{width: calc(var(--ogt-mas) * var(--ogt-komoku) + var(--ogt-ofs));position:relative;height:3em; top:0px;}
  /*横軸ラベル文字のspan*/
  .ogt-tb .ogt-ka{
    position: absolute;
    transform: translateX(-50%); /* 文字の真ん中を基準点にする*/
    text-align: center;
    white-space: nowrap;
    left:calc( var(--ogt-mas) * var(--data-kan) + var(--ogt-ofs) );
  }
  /*文字の上に線を出す*/
  .ogt-tb .ogt-ka::after {
    content: "";
    position: absolute;
    top: -8px;/* 文字の何px上に線を出すか */
    left: 50%;/* 文字の中央から */
    width: 1px;/* 線の太さ */
    height: 10px;/* 線の長さ */
    background: black;/* 線の色gray */
  }
  /*縦書き-spanに加える*/
  .ogt-tb .ogt-ymt{text-align: center; vertical-align: middle; writing-mode: vertical-rl;}
</style>

<table class="ogt-tb" style="--ogt-hei: 300px; --ogt-mem:25%;  --ogt-bco:bisque; --ogt-str:blue; --ogt-kan:6; --ogt-ofs:0px; --ogt-mas:80px; --ogt-komoku:6;" border="0">
  <tbody>
    <tr>
      <!-- 縦軸ラベル -->
      <td class="ogt-tr">縦軸コメント</td>
      <!-- 縦軸目盛 -->
      <td class="ogt-tm">
        <div style="height: var(--ogt-mem);">100</div>
        <div style="height: var(--ogt-mem);">75</div>
        <div style="height: var(--ogt-mem);">50</div>
        <div style="height: var(--ogt-mem);">25</div>
        <div>0</div>
      </td>
      <!-- グラフ本体 (SVG) -->
      <td class="graph-area">
        <svg viewBox="0 0 500 300" preserveAspectRatio="none">
          <!-- 
            points属性の解説: x,y_ の順で指定
            x: 左からの距離 (0〜500)--ogt-mas * --ogt-komoku + --ogt-ofs 毎にjsでとるので記入は適当
            y: 上からの距離 (0〜300) ※0が100%、300が0%に相当
          -->
          <polyline class="line" style="stroke: var(--ogt-str);" points=" 
            0,250 
            1,200 
            2,220 
            3,100 
            4,120 
            5,50
            "/>
          <!--<line x1="20" y1="10" x2="600" y2="280" style="stroke:blue ;stroke-width:1;stroke-dasharray="2 2" />-->
          <!-- 各ポイントに丸を表示する場合 F12→座標が表示されるので手入力 いらなければ削除 -->
          <circle class="dot" cx="0" cy="250" r="4" style="fill: var(--ogt-str);" /><text x="4" y="240">20</text>
          <circle class="dot" cx="1" cy="200" r="4" style="fill: var(--ogt-str);" />
          <circle class="dot" cx="2" cy="220" r="4" style="fill: var(--ogt-str);" />
          <circle class="dot" cx="3" cy="100" r="4" style="fill: var(--ogt-str);" />
          <circle class="dot" cx="4" cy="120" r="4" style="fill: var(--ogt-str);" />
          <circle class="dot" cx="5" cy="50"  r="4" style="fill: var(--ogt-str);" />
        </svg>
      </td>
    </tr>
    <!-- 横軸目盛 数は--ogt-komokuの数値に合わせる-->
    <tr class="ogt-yr">
      <td></td>
      <td></td>
      <td class="ogt-ym">
          <span class="ogt-ka" style="--data-kan:0;"></span>
          <span class="ogt-ka" style="--data-kan:1;">a</span>
          <span class="ogt-ka" style="--data-kan:2;">b</span>
          <span class="ogt-ka" style="--data-kan:3;">c</span>
          <span class="ogt-ka" style="--data-kan:4;">d</span>
          <span class="ogt-ka" style="--data-kan:5;">e</span>
          <br>横軸コメント
      </td>
    </tr>
  </tbody>
</table>

<script>
const ogttbs = document.querySelectorAll('.ogt-tb');

ogttbs.forEach(ogtTb => {
  const style = getComputedStyle(ogtTb);
// CSS変数から値を取得
  const offset = parseFloat(style.getPropertyValue('--ogt-ofs')) || 0;
  const mas = parseFloat(style.getPropertyValue('--ogt-mas')) || 0;
  const komoku = parseFloat(style.getPropertyValue('--ogt-komoku')) || 0;
  const totalWidth = mas * komoku + offset;
// 1. そのテーブル内の SVG の表示範囲を修正
  const svg = ogtTb.querySelector('svg');
  if (svg) {svg.setAttribute('viewBox', `0 0 ${totalWidth} 300`);}
// 2. そのテーブル内の polyline (折れ線) の座標修正
  const lines = ogtTb.querySelectorAll('.line');
  lines.forEach(line => {
    console.log("****");
    const pointsAttr = line.getAttribute('points').trim();
    if (!pointsAttr) return;
    
    const coords = pointsAttr.split(/[\s,]+/).filter(v => v !== "");
    const newPoints = [];
    
    for (let i = 0; i < coords.length; i += 2) {
      const index = i / 2;
      const x = (index * mas) + offset;
      const y = coords[i + 1];
      newPoints.push(`${x},${y}`);
      console.log("x=",x," y=",y);
    }
    line.setAttribute('points', newPoints.join(' '));
  });
// 3. そのテーブル内の circle (点) の座標修正
  const dots = ogtTb.querySelectorAll('.dot');
  dots.forEach((dot, i) => {
    const j = i % komoku; 
    dot.setAttribute('cx', (j * mas) + offset);
  });
});
</script>

2026年3月21日土曜日

HTML＞CLIP-PASS / SVGのデータを作成する

Layers

ここで操作画像を選択

幅 (W):		400px
高 (H):		400px
背景:
グリッド設定	グリッド表示グリッド吸着
グリッド間隔(%):		10%
グリッド色:	選択中の色: #000000
図形の透明度(%):		60%
ハンドルの大きさ:		12px

クリップパス/SVGのデーターを作成する。(copilotにより作成)
①頂点を増やすには、辺の少し外側をクリックする。
②頂点をダブルクリックすると削除される。
③図形の移動は、siftキー+矢印キーで10%ずつ、矢印キーのみで1%ずつ移動
④siftキー+矢印キーで垂直方向、水平方向に固定移動
⑤undoは、Ctrl + Zで、1回戻れる。
得られるデーターは、%単位ですので、図形の拡大・縮小でも形が崩れません。

クリップパスをsvgに変換
<svg xmlns="http://w3.org" viewBox="0 0 100 100">

<polyline points="0.0,0.0 0.0,30.0 77.0,30.0" fill="none" stroke="black" stroke-width="2" /> </svg>

HTML＞横棒グラフをHTML形式で出力する

発現週間（週）		発現数（例）

	1
	2
	3
	4
	5
	6
	7
	8
	9
	10
	11
	12
	13

---設定パネル---

グラフの幅を入力	：	px
背景の色	：
バーの太さを入力	：	em
バー要素幅を入力	：	em
棒の色	：
最大目盛りの変更	：
縦軸名の変更	：
横軸名の変更	：

軸名	縦軸名説明	棒の長さ	棒の数値
縦軸-1行目		%
縦軸-2行目		%
縦軸-3行目		%
縦軸-4行目		%
縦軸-5行目		%
縦軸-6行目		%
縦軸-7行目		%
縦軸-8行目		%
縦軸-9行目		%
縦軸-10行目		%
縦軸-11行目		%
縦軸-12行目		%
縦軸-13行目		%

横棒グラフのHTMLデーター作成ソフト(copilotにより作成)
①横棒グラフに項目を入力して、HTML形式で得る。
②データをコピーして、ページに貼り付けるだけ。CSSはインラインのみなので、＜table＞部分のみで動作する
③貼り付けた後も、＜table＞,＜tbody＞のCSS変数を変えるだけで簡単に数値を修正できる。
④横軸の目盛りは、貼り付けた後は修正が難しい。
⑤縦軸の項目数など細かい修正は、貼り付けた後自分で行ってください。

2026年3月18日水曜日

HTML＞円グラフを作成してHTML形式でデータを得る

テキスト1

テキスト2

テキスト3

テキスト4

テキスト5

テキスト6

テキスト7

テキスト8

テキスト9

テキスト10

円グラフ作成エデッタ(copilotによる)
①円グラフを作成し、クリップボードにコピーしたデータを、目的のページに貼り付ける。
②ドーナッツの白丸がいらない時は、 radial-gradient(white 30%, transparent 31%),を削除してください。色を変えたい時は、whiteを別の単語にしてください。
③テキスト移動時、1回クリックしてからD＆Dするとやりやすいです。
④円グラフ部分をダブルクリックするとグラフ変更のウインドウがでます。
⑤書き出されたテキストを選択・コピーしてご利用ください。
⑥テキストをダブルクリックするとテキスト修正できます。

HTML＞縦棒グラフを作成してHTML方式でデータを得る

発現例（例）	87	94	41	43	10	4	4	1	0	1	0	0	0
	4	8	12	16	20	24	28	32	36	40	44	48	48↑
	投与期間（週）

▼ グラフ基本設定
高さ(px): | 最大値: | 棒の色:
▼ 軸ラベルの設定
縦軸名: | 横軸名:
▼ データの入力（カンマ区切り）
各棒の数値:
横軸の項目:
※数値の数と項目の数を合わせてください

縦棒グラフ作成エディッタ(copilotでの作成)
①「この表のHTMLをコピーする」をクリックすると、クリップボードにコピーされるので、ページに貼り付けてください。
②＜table＞タグを利用して作成されます。
③背景色の変更などは、貼り付けたデータを直接修正してください。高さなど大幅の修正はできません。
④スタイルシートはインライン記述になってます。＜table＞部分のみで表示できます。

2026年2月9日月曜日

年賀状＞あけましておめでとうございます(令和8年)

登録: 投稿 (Atom)