ちょっと暇なので質問に答えてみた

URLによってHTMLのテキストを変更するコードを教えてください。
https://oshiete.goo.ne.jp/qa/10703653.html

あれ!? element.lang を使うべきだったよな


コードの意味(どのようなイベント発生など)を調べて
https://okwave.jp/qa/q9534243.html

かなり省略しすぎたか?まぁそのぶん理解もは早かろうて。
はやばやと自分から解説を放棄した。
駄菓子菓子、可哀想だと思いちょっとだけ解説する。
あれならしない方が良かったのでは?と反省。
丸投げになった。
「どこが悪いのかもわからない」そのまま返したい。


結局それは丸投げと同じになった。

龍頭を3Dプリンタで作る


東北の田舎じゃ葬式に葬列組んでお墓に行くんだよね。その時に使う龍頭を作った。
なかなかの出来栄え!(自画自賛
角が一本なのは壊れにくくするため、モデルとなったのは、ドラゴンボールにでてくるシェンロン!


でもちょっと小さい!
長谷川さんに売りつける予定。
取っ手と棒まで印刷して2万円也で売り出そうか?
印刷時間 PLA 0.2mm でトータル27時間

フォームで開始時間と終了時間の二つのselectボックスを表示させたい

フォームで開始時間と終了時間の二つのselectボックスを表示させたい

久々の回答。レスが付かないとおもってたけど
https://oshiete.goo.ne.jp/qa/10669901.html


3Dプリンタで見台(スマホ台)を作った。しかもシャー専用の赤、滑り止めが3倍ついて滑りにくくなってます。

Fujillin さん欲しい?あげるよ!

3Dプリンタを買う。しかも1台では間に合わず2台購入する! ANYCUBIC I3 MEGA

造形は楽しいが、印刷に時間がかかりすぎる。
眺めて見ては、色々な問題点やら改良案、造形へのデザイン変更やら・・・
アイディアが尽きる事はない。
それはそれで楽しい。


AMAZONから購入したのだが、すでにプリンタを買った金額の3倍以上の金額をアレコレと購入している。
すでに軽く10万円は超えた。
会社で経費として落とすかどうかは、成果物をみんなに評価してもらってから。


大量のフィラメントの購入。
失敗に続くトラブルで初号機を破損、部品を購入。
そしてそれを何度となく繰り返す。
予備の部品を購入しまくっているうちに、マシンに詳しくなった。
修理のための分解も行った。ちなみにネジは余らない。


ABS素材の造形は、初心者には難しすぎる。
印刷しているうちに下層の部分が割れて造形物の高さが増え、印刷ヘッドとの隙間がなくなり詰まる。
えらい騒ぎになる。


ヘッドの詰りはライターで炙ってピンセットで抜き取るか、アセトンにつけて溶かす。
作った方脇から造形物が割れないようにと、マシンを覆うケースを自作した。
割れなくなったのは良いのだが、ステッピングモーターに手を当てたらビックリ!
熱い!
4cm角のヒートシンクを大量に購入して、そこいら中のモーターに貼りまくる。
プリンタの基盤とかも冷却しないと寿命が短くなりそうだ。
なのでABS素材は、使わないことにした。
大量に購入したフィラメントはいずれ消費しよう。


そのうち、写真を撮って記録しておこう。とにかく扱いが面倒だ。


結論。
やっぱりオモチャだ。仕事で生かすためには造形に時間が掛かりすぎる。
とにかく寝る間を惜しんで、徹夜の毎日である。
造形を眺めては、アイディアを生む。
観察する時間は、有意義だ。
もう5kgは、印刷した。スキルも上がった。


死ぬまで勉強なのかよ、楽になりたいぜ。

TEXTAREA 要素内で、オートインデントを行う(過去の焼き直し)

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">

<body>
<h1>textarea 要素の オートインデントを行う</h1>
<p><input id="A"></p>
<textarea id="B" cols="60" rows="10"></textarea>

<script>

//_____autoIndent
{
  const

    NOT_LF = /\r\n|\r/g,
    REG_INDENT_SPACE = /^([\s\u3000]+)/,

    
    //インデント分の空白を挿入
    addEnter = function (e) {
      let start;
      if (! isNaN (start = e.selectionStart)) {
        let
          value = e.value,
          region_byCaret = value.slice (0, start),
          CRLFs = region_byCaret.match (NOT_LF);
    
        if (CRLFs) {
          region_byCaret = region_byCaret.replace (NOT_LF, '\n');
          start -= CRLFs.length;
        }
        
        let
          region = region_byCaret,
          lines = region.split ('\n'),
          n = lines.length - 1,
          spc;
        
        if (0 === lines[n].length) {
          if ((spc = lines[n-1].match (REG_INDENT_SPACE))) {
            let s = spc[1];
            e.value = region_byCaret + s + value.slice (start);
            e.selectionStart = e.selectionEnd = start + s.length;
          }
        }
      }
    };


  //____________________________________
  
  class AutoIndent {
    constructor (target = { }) {
      if (target.nodeName !== 'TEXTAREA')
        throw new Error ('TEXTAREA ではありません');

      this.target = target;
      this.disabled = false;
      
      target.addEventListener ('keyup', this, false);
    }
    
    
    handleEvent ({key}) {
      if (! this.disabled)
        if ('Enter' === key)
          addEnter (this.target);
    }
    
    
    addEnter () {
      if (! this.disabled)
        addEnter (this.target);
    }
  }
  
  this.AutoIndent = AutoIndent;
}

new AutoIndent (document.getElementById('B'));

</script>

Change Event を遅延させて発火させる

Event(input) を利用して、文字の連続入力が終了したら、一定時間後に change イベントを発火させます

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">

<body>
<h1>Input 要素の change イベントを遅延させて発火させる</h1>
<p><input id="A"></p>

<script>

{
  // input イベントを監視して、変更があったら change イベントを発火させる
  
  class delayChangeEvent {
    constructor (target, delayTime = 300, cbFunc = null) {
      if (! target)
        throw new Error ('要素がありません');

      this.target = target;
      this.delay  = delayTime; //遅延時間(ms)
      this.cbFunc = cbFunc; //その時に実行する関数
      this.disabled = false; //この値を true にすると実行されなくなる
      this.timeId   = null; //setTimeout で使用する
      this.value    = target.value;
      
      // input event を監視する
      target.addEventListener ('input', this, false);
    }
    
    
    //イベントハンドラ
    handleEvent (event) {
      if (! this.disabled) {
        switch (event.type) {
        
        //input event を監視する
        case 'input' :
          if (this.timerId)
            clearTimeout (this.timerId);//タイマーを解除
          this.timerId = setTimeout (this.execute.bind (this), this.delay);//タイマー設定
          break;
        }
      }
    }
    

    //change イベントを発火させる
    execute () {
      if (! this.disabled) {
        this.timerId = null;
        if (this.value !== this.target.value) {

          let
            e = this.target,
            event = e.ownerDocument.createEvent ('HTMLEvents');
          
          event.initEvent ('change', true, true);

          //change イベントの前に コールバックを実行する
          if ('function' === typeof this.cbFunc)
            this.cbFunc (this.target);

          e.dispatchEvent (event);
  
        }
      }
    }
  }
  
  this.delayChangeEvent = delayChangeEvent;
}


function hoge (e) {
  //先頭の空白削除と2文字以上続く空白は1文字の空白とする
  e.value = e.value.replace (/^(\s*)|\s+(?=\s)/g, '');
}


let a = document.getElementById('A');
//a.addEventListener ('change', hoge, false);

new delayChangeEvent (a, 400, hoge);


</script>

Kindle paperwhite ブラウザ(体験版)の HTML を画面右をクリックすることでスクロールさせる (javascript で scroll)

右端のクリックは良いのだけれど、左端では微妙に戻れない。研究の余地あり。
というか、スクロールの指定ぐらい実装しろよ! > amazon !!
ページ内のリンクもOK!!
TreeWalker オブジェクトも使えるので、そちらに切り替えようか?
それにしてもこの中途半端な Javascript 頭にくる!
イライラ。

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>Kindle</title>

<style>
body {
  margin: 0 1em;
  font-size: 230%;
  width: 700px;
  line-height:300%;
}
div {
  border:4px black doubel;
}

</style>

<body>

<div id="A">
  <h1>A</h1>
  <ol>
    <li>1abc
    <li>2abc
    <li>3abc
    <li>4<a href="#B">B</a>
    <li>5abc
    <li>6abc
    <li>7abc
    <li>8abc
    <li>9abc
    <li>10abc
    <li>11abc
    <li>12abc
    <li>13abc
    <li>14abc
  </ol>
</div>


<div id="B">
  <h1>B</h1>
  <ol>
    <li>BBBBBBBBBB0<span id="Z">ZZZZZZZZZ</span>
    <li><a href="#C">C</a>
    <li>BBBBBBBBBB1
    <li>BBBBBBBBBB2
    <li>BBBBBBBBBB3
    <li>BBBBBBBBBB4
    <li>BBBBBBBBBB5
    <li>BBBBBBBBBB6
    <li>BBBBBBBBBB7
    <li>BBBBBBBBBB8
  </ol>
</div>


<div id="C">
  <h1>C</h1>
  <table border="1" class="fix">
    <tr>
      <td><a href="#A">A</a>
      <td><a href="#B">B</a>
      <td><a href="#C">C</a>
      <td><a href="#D">D</a>
    <tr>
      <td colspan="8">f
  </table>
</div>


<div id="D">
  <h1>D</h1>
  <a href="#A">A</a>
</div>
<script>

(function () {

  var SCROLL_AREA_WIDTH = 80;
  var MARGIN_BOTTOM     = 20;
  var DOCUMENT_ROOT     = document.body;

  //_______


  function basicFormat (e) {
    switch (e.nodeName) {
    case 'LI' :     return 'list-item';
    case 'TABLE':   return 'table';
    case 'CAPTION': return 'table-caption';
    case 'THEAD':   return 'table-header-group';
    case 'TFOOT':   return 'table-footer-group';
    case 'TBODY':   return 'table-row-group';
    case 'TR':      return 'table-row';
    case 'TD': case 'TH' : return 'table-cell';

    case 'RUBY':    return 'ruby';
    case 'RB':      return 'ruby-base';
    case 'RT':      return 'ruby-text';
    case 'RBC':     return 'ruby-base-container';
    case 'RTC':     return 'ruby-text-container';
    
    case 'SCRIPT' : return 'none';
    
    case 'A' : case 'ABBR' : case 'ACRONYM' : case 'B' : case 'BDO' :
    case 'BIG' : case 'BR' : case 'BUTTON' : case 'CITE' : case 'CODE' :
    case 'DFN' : case 'EM' : case 'I' : case 'IMG' : case 'INPUT' :
    case 'KBD' : case 'LABEL' : case 'MAP' : case 'OBJECT' : case 'Q' :
    case 'SAMP' : case 'SELECT' : case 'SMALL' : case 'SPAN' : case 'STRONG' :
    case 'SUB' : case 'SUP' : case 'TEXTAREA' : case 'TIME' : case 'TT' :
    case 'VAR' : return 'inline';
     
    default :
      return 'block';
    }
  }


  //前方の要素を非表示にする(兄要素の子孫は無視&直系の祖先も無視)
  function hide_previous (e) {
    var n;
    while (e) {
      if (n = e.previousElementSibling) {
        n.style.display = 'none';
        e = n;
      } else {
        e = e.parentNode;
        if (DOCUMENT_ROOT === e)
          break;
      }
    }
  }
  
  
  //後方の要素を非表示にする(弟要素の子孫は無視&直系の祖先も無視)
  function hide_next (e) {
    var n;
    while (e) {
      if (n = e.nextElementSibling) {
        n.style.display = 'none';
        e = n;
      } else {
        e = e.parentNode;
        if (DOCUMENT_ROOT === e)
          break
      }
    }
  }


  //直系の祖先を表示する
  function display_directAncestor (e) {
    while (e) {
      e.style.display = basicFormat (e);
      e = e.parentNode;
      if (DOCUMENT_ROOT === e) break; //body まで遡って見えていなとは?
    }
  }



  //子要素も探る
  function getNextElement (e) {
    var n;
    if (n = e.firstElementChild ) return n;
    do {
      if (DOCUMENT_ROOT === e) break;
      if (n = e.nextElementSibling) return n;
    } while (e = e.parentNode);
    return null;
  }


   //子要素も探る
   function getPrevElement (e) {
    var n, m, p;
    if (n = e.previousElementSibling) {
      while (m = n.lastElementChild) {
        n = m;
      }
      return n;
    }
    p = e.parentNode;
    return DOCUMENT_ROOT === p ? null: p;
  }

 



  

  function getHeight (e) {
    e.style.visibility = 'hidden';
    e.style.display = 'block';
    var rect = e.getBoundingClientRect ();
    var h = rect.top;
    e.style.display = 'none';
    e.style.visibility = 'visible';
    return h;
  }


  
  
  //__________________________________________________
  
  function Scroller () {
    this.root   = document;
    this.height = document.documentElement.clientHeight - MARGIN_BOTTOM;
    this.width  = document.documentElement.clientWidth - SCROLL_AREA_WIDTH
    this.first  = document.body.firstElementChild;//表示されている最初の要素
    this.last   = null;//表示されている最後の要素
    
    document.addEventListener ('click', this, false);
    window.addEventListener ('hashchange', this, false);//location.hashを監視

    this.disp (this.first);
  }
  
  
  function scrollUp () {
    this.disp (this.first, true);
  }
  
  
  function scrollDown () {
    this.disp (this.last);
  }
  
  
  
  
  //要素を基準に下へ向かって高さがエリア内なら表示し、エリア外は非表示
  function disp (e, direction) {
    if ('undefined' === typeof e)
      return;
    if ('undefined' === typeof direction)
      direction = false;
    
    var height = this.height, h, b, r;


    //下から表示
    if (direction) {
      e = getPrevElement (e);
      hide_next (e);
      display_directAncestor (e);
      this.last = b = e;

      while (e) {
        e.style.visibility = 'hidden';
        e.style.display = basicFormat (e);
        r = b.getBoundingClientRect ();
        h = r.top;
        if (height < h) {
          e.style.display = 'none';
          e.style.visibility = 'visible';
          
          hide_previous (e);
          this.first = e;
          return;
        }
        e.style.display = basicFormat (e);
        e.style.visibility = 'visible';
        
        e = getPrevElement (e);

      }
      this.first = document.body.firstElementChild;
    }

    //上の要素から表示
    else {

      hide_previous (e);
      display_directAncestor (e);
      this.first = e;

      while (e) {
        if (getHeight (e) < height) {
          e.style.display = basicFormat (e);
        }
        else {
          this.last = e;
          hide_next (e);
          break;
        }
        e = getNextElement (e)
      }//子要素も含めて探す

    }
  }

    
  //イベント処理
  function handleEvent (event) {
    var x = event.pageX;
    var wd = this.width;
    
    switch (event.type) {

    case 'click' : //クリック処理
      if (x < SCROLL_AREA_WIDTH)
        this.scrollUp ();
      else
        if (x > wd) this.scrollDown ();
      break;

    
    case 'hashchange' ://ページ内リンクなら
      var
        hash = location.hash,
        target;
      
      if (0 === hash.indexOf ('#'))
        if (target = document.querySelector (hash))
          this.disp (target);

      break;
    }
  }

  //__

  Scroller.prototype.disp        = disp;
  Scroller.prototype.scrollUp    = scrollUp;
  Scroller.prototype.scrollDown  = scrollDown;
  Scroller.prototype.handleEvent = handleEvent;
  
  //__
  
  this.Scroller = Scroller;

}) ();

//s. disp ();
/*
var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
  false
);
*/

//var isKindle = /^Mozilla.+Linux.+AppleWebKit.+KHTML.+Safari.+/;
//if (isKindle.test(window.navigator.userAgent));
  new Scroller ();

</script>
</body>
</html>