/villagepump/増井俊之 - Scrapbox Reader

generated at 11/22/2024, 2:07:15 PM
増井俊之

連絡は@増井俊之にどうぞ
 masui@sfc.keio.ac.jp, masui@pitecan.com, tmasui@gmail.com, masui@masui.org
 http://masui.org
 http://pitecan.com
 masui
 masui
 @masui
 toshiyukimasui
 toshiyukimasui
 toshiyukimasui
 増井俊之
 Toshiyuki Masui
 080-2388-1513 (オヤお兄さんヤバい恋さ!)
勤務先
〒252-0882 藤沢市遠藤5322
慶應義塾大学環境情報学部
昭和34年 1959 生まれ

わかばちゃんのパソコンを勝手にハックした人
from /wakaba-manga/第2話 学生全員がScrapboxを活用する成蹊大学塩澤ゼミに迫る#5a0be54073f33f00005f850b
無茶な使い方開拓者/nota-techconf/急にリクエストが1.5倍に増えてクソデカJSONと戦った#6047da2397c2910000454e27 

script.js__/api/code/villagepump/リアルタイム版ScrapCalc/script.js

ScrapExecによるコードブロック評価
script.jsimport '/api/code/masui/ScrapExec/script.js'

ScrapCalcによるコード実行
script.jsimport '/api/code/masui/ScrapCalc/script.js'
style.css@import '/api/code/masui/ScrapCalc/style.css';

コードブロックを小さく
style.css.line span.code-block {
  line-height: 1.2em;
  font-size: 88%;
}

style.css_____.navbar .kamon {
  display: none;
}

> Dynamic Macro
script.js_____import '/api/code/customize/Scrapbox_Dynamic_Macro/script.js'

script.js_____ scrapbox.PopupMenu.addButton({
   title: '日本語⇒英語',
   onClick: text => window.open(`https://translate.google.com/#ja/en/${text}`)
 })
 scrapbox.PopupMenu.addButton({
   title: '英語⇒日本語',
   onClick: text => window.open(`https://translate.google.com/#en/ja/${text}`)
 })

リストのサイズバーを消す
last modified / last visited などのメニューも消える
style.css.quick-launch .right-box {
    display: none;
}
.quick-launch .private-badge {
    display: none;
}

style.css/*
.unread {
  width: 12px !important;
  border-width: 0px 3px 0px 0px !important;
  border-color: #007 !important;
  background-color: #999 !important;
}
*/
/*
.unread {
  width: 0px !important;     
  border-right-width: 3px !important;
  border-left-width: 10px !important; テロメアの太さ最大値
  border-right-color: #000 !important;
  border-left-color: #8f9899 !important;
}
.unread:hover {
  width: auto !important;
  border-right: 0 !important;
}
*/
.unread {
    border-color: #333 !important;
}

body {
  /* 
  //background-image: URL('https://gyazo.com/b99d7af3981a0d5fe97ece3cf05940c6.png');
  //background-image: URL('https://gyazo.com/ed4fcd41ff75af5a1ff6307dc9b08e18.png');
  //background-image: URL('http://type.jp/et/log/wp-content/uploads/2015/02/nota-top.jpg');
  //background-image: URL('http://blog.calil.jp/wp-content/uploads/2011/06/0Z6G0487-1-1.jpg');
  //background-image: URL('https://gyazo.com/fc0ed49dd0ac334151dc66febb60b078.png');
  */
}
div.page {
   opacity: 0.93;
}
li.page-list-item {
    opacity: 0.93;
}
/*
.cursor {
  animation: blink 1s infinite;
  width: 4px;
}
@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 0; }
  51% { opacity: 1; }
  100% { opacity: 1;}
}
*/
/*
.grid li.two-two.page-list-item {
    width: 216px !important;
    height: 316px !important;
  }
  .grid li.two-two.page-list-item a .title {
      font-size: 20px !important;
  }
  .grid li.page-list-item {
    width: 100px !important;
    height: 150px !important;
  }
  .grid li.page-list-item a .title {
      font-size: 12px !important;
  }
  */

script.js_____/*
$('body').attr('data-daiiz-rel-bubble', 'on');  // 関連ページを吹き出し表示する
$('body').attr('data-daiiz-text-bubble', 'on');  // リンク先ページのテキストを表示する

scrapbox.PopupMenu.addButton({
  title: 'Google翻訳',
  onClick: text => window.open(`https://translate.google.com/#ja/en/${text}`)
})
*/

codeblockのフォントを小さくする
style.csssspan.code-block {
  line-height: 20px;
  font-size: 88%;
}

codeblockの頭を静かな色にする
style.css.line span.code-block .code-block-start {
	background-color: #ccc;
}
.line span.code-block .code-block-start a {
	color: #555;
}

＃で始まるタグをラベル風にする
style.css/* ＃で始まるタグをラベル風にする */
a[type="hashTag"]{
	display: inline-block;
   	padding: 2px 8px;
    margin: 0 8px 10px 0;
    background: #fff;
    color: #f27e48;
    font-size: 0.8em;
    border: 1px solid #f27e48;
    border-radius: 3px;
    transition: .3s;
    -webkit-transform: scale(1);
    transform: scale(1);
}
a[type="hashTag"]:hover{
	-webkit-transform: scale(1.1);
 	transform: scale(1.1);
}

script.js$('head > link[rel=icon]').attr('href','/api/pages/icons/Nota/icon'); 

現在位置を取得
script.jsimport '/api/code/Nota/Geolocation%20watchPositionで現在位置を取得するUserScript/script.js'

新規作成ボタンを消す
style.css.new-button { /* 新規ボタンを消す */
   visibility: hidden;
}

Enterキーで新規ページ作成
script.js// 不要になった
// $('body').on('keydown',function(e){
//    if(e.target.tagName != "TEXTAREA" && e.target.tagName != "INPUT"){
//       if(e.key == 'Enter'){
//          var project = location.href.split('/')[3];
//          location.href = `/${project}/new`;
//       }
//    }
// });

//$('.btn.btn-default').on('click',function(){
//   var s = $('.form-control').val();
//   if(s == ''){
//      var project = location.href.split('/')[3];
//      location.href = `/${project}/new`;
//   }
//});
Enterキーで新規ページ作成
script.js$('body').on('keydown',function(e){ // Enterキーで新規ページ作成
   if(e.target.tagName != "TEXTAREA" && e.target.tagName != "INPUT"){
      if(e.key == 'Enter'){
         var project = location.href.split('/')[3];
         location.href = `/${project}/new`;
      }
   }
});
/* $('.btn.btn-default').on('click',function(){ */
$('button').on('click',function(){
   var s = $('.form-control').val();
   if(s == ''){
      var project = location.href.split('/')[3];
      location.href = `/${project}/new`;
   }
});



style.css/* 1. Scrapboxアイコンをバーガーアイコンに置き換え
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
  content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #bbbbbb; }
 */
.brand-icon { display: none !important }
/*
.navbar-brand::before {
  content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #bbbbbb; }
  */
  

音声入力
script.js____import '/api/code/shokai/音声入力Menu/script.js'

style.css.navbar-default { /* 検索フォームの色 */
   background-color: #aaa;
}
form { /* 検索フォームの枠 */
 	border:1px #ddd solid;
}
 
トップのメニューバー(navbar)を固定
style.css/* はりつくメニューバー */
/* @media screen and (min-height: 600px) and (min-width: 768px) { */
@media screen {
  body:not(.presentation) { padding-top: 0px; padding-right: 0 !important } /*******/
  body:not(.presentation) .page-menu { position: fixed; top: 90px }
  
  .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
  .dropdown.open .dropdown-menu {
    position: absolute; left: auto; top: auto; 
    max-height: calc(100vh - 100px); overflow-y: auto }
  .dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
  .page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 }
}

/phoooutty/settings から
style.css___/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */
 /* ※次のnavbar固定と同時に使う必要がある */
 @media screen and (min-width: 768px) {
   .quick-launch .project-home {
     position: fixed; top: 0px; left: calc((100% - 1080px)/2); z-index: 990 }
   /*.page { padding-top: 0 }*/ }
 @media screen and (min-width: 768px) and (max-width: 991px) {
    .quick-launch .project-home { left: 65px } }
 @media screen and (min-width: 992px) and (max-width: 1260px) {
   .quick-launch .project-home { left: 80px } }
 @media screen and (min-width: 1261px) {
    .quick-launch .project-home { left: calc((100% - 1260px)/2 + 80px) } }

プロジェクトタイトルをnavbar(トップのメニュー)に固定
style.css@media screen and (min-width: 767px) {
	.quick-launch .project-home {
	  position: fixed;
	  top: -2px;
	  /* left: calc((100% - 1080px)/2); */
	  z-index: 1000;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.quick-launch .project-home {
		left: 55px
	}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
	.quick-launch .project-home {
		left: 70px;
	}
}
@media screen and (min-width: 1261px) {
	.quick-launch .project-home {
		left: calc((100% - 1280px)/2 + 0px)
	}
}


 [= 数式 = 0]  ⇒ = 数式 = 0 みたいな装飾表示
style.css__ .deco-\= {
   color: #111;
   background-color: #ffddff;
   padding: 0.1em 0.2em 0.1em 0.2em;
 }
 .scrapcalc_result {
    font-style:italic;
    font-weight:bold;
    background-color:yellow;
 }

 strict の制限を回避
https://stackoverflow.com/questions/6020178/can-i-disable-ecmascript-strict-mode-for-specific-functions の方法 を利用
script.js__function scrapcalc_commands(){
   const commands = [];
   let count = 0;
   for(let expr of document.querySelectorAll('.scrapcalc_result')){
      expr.remove();
   }
   for(let expr of document.querySelectorAll('.deco-\\=')){
      let text = expr.innerText;
      if(text.match(/=/)){
          commands.push(decodeURI(text) + ';');
      }
      else {
          let id = `scrapcalc_element_id_${count}`;
          var span = document.createElement('span');
          span.id = id;
          span.classList.add("scrapcalc_result");
          expr.parentNode.appendChild(span)
          expr.classList.add("scrapcalc_exp")
          expr.style.display = 'none';
          commands.push(`document.getElementById("${id}").innerText = ${decodeURI(text)};`);
          count += 1;
      }
   }
   return commands.join("\n");
}

ショートカットキー(Ctrl-C)でScrapCalcを呼び出す
何かクリックされたらもとに戻す
トグルする
script.jsfunction scrapcalc_reset(){
    for(let expr of document.querySelectorAll('.scrapcalc_result')){
        expr.remove();
    }
    for(let expr of document.querySelectorAll('.scrapcalc_exp')){
       expr.style.display = 'inline';
    }
}
document.addEventListener('keypress', e => {
   if (e.key == 'c' && e.ctrlKey){
       if(document.querySelectorAll('.scrapcalc_result').length == 0){
           const scrapcalc_func = Function(`(() => {${scrapcalc_commands()}})();`);
           scrapcalc_func();
       }
       else {
           scrapcalc_reset();
       }
    }
})
/*
document.addEventListener('click', e => {
   scrapcalc_reset();
})
*/


 [= 数式 = 0]  ⇒ = 数式 = 0 みたいな装飾表示
__style.css .deco-\= {
   color: #111;
   background-color: #ffddff;
   padding: 0.1em 0.2em 0.1em 0.2em;
 }
 .scrapcalcresult {
    font-style:italic;
    font-weight:bold;
    background-color:yellow;
 }

 strict の制限を回避
https://stackoverflow.com/questions/6020178/can-i-disable-ecmascript-strict-mode-for-specific-functions の方法 を利用
__script.jsfunction strict(){
   const commands = [];
   let count = 0;
   for(let expr of document.querySelectorAll('.scrapcalcresult')){
      expr.remove();
   }
   for(let expr of document.querySelectorAll('.deco-\\=')){
      let text = expr.innerText;
      if(text.match(/=/)){
          commands.push(decodeURI(text) + ';');
      }
      else {
          let id = `scrapcalc_element_id_${count}`;
          var span = document.createElement('span');
          span.id = id;
          span.classList.add("scrapcalcresult");
          expr.parentNode.appendChild(span)
          expr.classList.add("scrapcalcexp")
          expr.style.display = 'none';
          commands.push(`document.getElementById("${id}").innerText = ${decodeURI(text)};`);
          count += 1;
      }
   }
   return commands.join("\n");
}

 1 ～ 4 で記入
 1. 自分は周りの人たちの中になじんでいると感じますか  q1 = 4
 2. 自分には人との付き合いがないと感じることがありますか  q2 = 1
 3. 自分には頼れる人が誰もいないと感じることがありますか  q3 = 1
 4. 自分はひとりぼっちだと感じることがありますか  q4 = 1
 5. 自分は友人や仲間のグループの一員だと感じることがありますか  q5 = 3
 6. 自分は周りの人たちと共通点が多いと感じることがありますか  q6 = 3
 7. 自分は誰とも親しくしていないと感じることはありますか  q7 = 1
 8. 自分の関心や考えは周りの人たちにはわからないと感じることがありますか  q8 = 1
 9. 自分を社交的で親しみやすいと感じますか  q9 = 3
 10. 自分には親しい人たちがいると感じますか  q10 = 4
 11. 自分は取り残されていると感じることがありますか3  q11 = 1
 12. 他人との関わりは意味がないと感じることがありますか  q12 = 1
 13. 自分のことを本当によく知っている人は誰もいないと感じることはありますか  q13 = 1
 14. 自分は他の人たちから孤立していると感じることはありますか  q14 = 1
 15. 希望すれば自分と気の合う仲間は見つかると感じますか  q15 = 4
 16. 自分を本当に理解している人がいると感じますか  q16 = 4
 17. 自分は内気であると感じますか  q17 = 1
 18. 周りの人たちと一体感がもてないと感じることがありますか  q18 = 1
 19. 話し相手がいると感じますか  q19 = 4
 20. 頼れる人がいると感じますか  q20 = 4
孤独度 = (5-q1)+q2+q3+q4+(5-q5)+(5-q6)+q7+q8+(5-q9)+(5-q10)+q11+q12+q13+q14+(5-q15)+(5-q16)+q17+q18+(5-q19)+(5-q20)

特定のページがリストに表示されないようにする
style.css.page-list-item[data-page-title*="ゆっくりおしゃべりがしたい"],
.page-list-item[data-page-title*="minoh"],
.page-list-item[data-page-title*="自分語りのできる場所"],
.page-list-item[data-page-title*="井戸端コミュニティに本当に"],
.page-list-item[data-page-title*="快適井戸端コミュニケーション"],
.page-list-item[data-page-title*="「焼き直し」の件につい"],
.page-list-item[data-page-title*="コミュニケーションの先駆的な舞台となりうる"],
.page-list-item[data-page-title*="CSPを突破"],
.page-list-item[data-page-title*="EpisoPassのHTML公開の安全性"],
.page-list-item[data-page-title*="Scrapboxはコミュニケーションの"],
.page-list-item[data-page-title*="誰一人取り残さない"],
.page-list-item[data-page-title="Settings"],
.page-list-item[data-page-title="js-fetch-proxy"],
.page-list-item[data-page-title="Lisp"],
.page-list-item[data-page-title="Scheme"],
.page-list-item[data-page-title="PLASMA"],
.page-list-item[data-page-title="Planner"],
.page-list-item[data-page-title="Micro-Planner"],
.page-list-item[data-page-title="アクターモデル"],
.page-list-item[data-page-title="バックトラッキング"],
.page-list-item[data-page-title="2021/10/09"],
.page-list-item[data-page-title="node-bitmap-proxy"],
.page-list-item[data-page-title="ビッグファイブウェブテスト探し"],
.page-list-item[data-page-title="ビッグファイブ"],
.page-list-item[data-page-title="井戸端に書かないことを挙げてく"],
.page-list-item[data-page-title="理想像と診断結果が違う"],
.page-list-item[data-page-title="連言と二重否定の関係について"],
.page-list-item[data-page-title="表記ゆれ"],
.page-list-item[data-page-title="3NOT問題がよくわからないのでまずは理解する"],
.page-list-item[data-page-title="投資に対する悪イメージ"],
.page-list-item[data-page-title="ベンチャーキャピタル"],
.page-list-item[data-page-title="知的生産に対する悪イメージ"],
.page-list-item[data-page-title="「漢字廃止」で韓国に何が起きたか"],
.page-list-item[data-page-title="増井俊之"],
.page-list-item[data-page-title="settings"],
.page-list-item[data-page-title="別名登録記法"],
.page-list-item[data-page-title="井戸端民が選ぶ The Best Scrapbox of 2021（企画）"]
  {display: none !important;}

関連ページを左側に表示
style.css@media (min-width: 768px) {
	/* 要素横並び */
	div.page-wrapper {
		display: flex;
		justify-content: space-around;
	}
	div.drag-and-drop-enter {
		order: 2;
		width: calc(100% - 250px);
	}
	div.related-page-list {
		order: 1;
		flex-basis: 216px;
		padding: 0 8px;
		background-color: var(--related-page-list-bg);
	}
	
	/* 関連リンク一覧形状変更 */
	div.related-page-list{
		font-family: var(--relation-title-font);
	}
	div.related-page-list .grid li.relation-label,
	div.related-page-list li.page-list-item,
	div.related-page-list li.ellipsis {
		/* サイズ変更（共通） */
		width: 200px;
	}
	div.related-page-list .grid li.relation-label {
		/* ラベルサイズ変更 */
		height: var(--relation-label-height);
		margin-bottom: 0;
	}
	div.related-page-list li.page-list-item,
	div.related-page-list li.ellipsis {
		/* カードサイズ変更 */
		height: 50px;
		margin-bottom: 3px;
	}
	div.related-page-list .grid li.relation-label .arrow {
		display: none;
	}
	.related-page-list li.relation-label a {
		/* 関連リンク ラベル */
		display: flex !important;
		padding: 0 !important;
		background-color: inherit;
		border-bottom: 2px solid var(--relation-label-border);
	}
	.related-page-list li.page-list-item a {
		/* 関連リンク カード */
		border-right: 6px solid var(--card-border);
	}
	.related-page-list li.relation-label a,
	.related-page-list li.page-list-item a {
		/* 関連リンク ラベル・カード（共通） */
		border-radius: 0;
	}
	.related-page-list ul.grid:hover li.relation-label a,
	.related-page-list div.links-2-hop ul.grid:hover li.relation-label a,
	.related-page-list li.page-list-item a:hover {
		/* 関連リンク ラベル・カード（共通、ホバー時） */
		transition: 0s;
	}
	.related-page-list div.links-2-hop ul.grid li.relation-label a {
		/* 関連リンク 2 hops link ラベル */
		background-color: var(--relation-label-2-hop-bg);
	}
	.related-page-list div.links-2-hop ul.grid:hover li.relation-label a {
		/* 関連リンク 2 hops link ラベル（ホバー時） */
		background-color: var(--relation-label-2-hop-hover-bg);
	}
	.related-page-list li.relation-label a:hover {
		/* 関連リンク ラベル（ホバー時） */
		filter: brightness(80%);
	}
	.related-page-list li.page-list-item a:hover {
  		/* 関連リンク カード（ホバー時） */
  		/* background-color: var(--card-hover-bg); */
  	}
  	.related-page-list li.ellipsis a {
  		/* 2 hopが大きすぎるときに出る三点ボタン */
  		padding: 0;
  	}
  	.related-page-list li.ellipsis a div.circle {
  		/* 三点ボタンをホバーした時に表示される丸 */
  		height: auto;
  	}
	.related-page-list span.kamon::before {
		/* 鎖マークの大きさ */
		font-size: 14px;
	}
	.related-page-list li.page-list-item .content > .description {
		display: none;
	}
	.related-page-list li.relation-label a span.title,
	.related-page-list ul.grid li.page-list-item a .header {
		/* リンクのタイトル文字がある空間（共通） */
		border-top: 0;
		width: 158px;
		padding: 7px 3px;
		margin-left: 42px;
		text-align: left;
	}
	.related-page-list li.relation-label a span.title {
		/* リンクのタイトル文字がある空間（ラベル） */
		padding: 0 3px;
		line-height: var(--relation-label-height);
	}
	.related-page-list ul.grid li.page-list-item a .header {
		/* リンクのタイトル文字がある空間（カード） */
		padding: 7px 3px;
	}
	.related-page-list li.relation-label a span.title,
	.related-page-list ul.grid li.page-list-item a .header .title {
		/* リンクのタイトル文字（共通） */
		font-family: var(--relation-title-font);
		font-size: 14px;
		font-weight: bold;
	}
	.related-page-list li.relation-label a:hover span.title,
	.related-page-list ul.grid li.page-list-item a:hover .header .title {
		/* リンクのタイトル文字（共通、ホバー時） */
		transition: 0s;
	}
	.related-page-list li.relation-label a:hover span.title {
		/* リンクのタイトル文字（ラベル、ホバー時） */
	}
	.related-page-list ul.grid li.page-list-item a:hover .header .title {
		/* リンクのタイトル文字（カード、ホバー時） */
		color: var(--card-hover-title-color);
	}
	.related-page-list ul.grid li.page-list-item a:hover .hover {
		/* opacity: 0 !important; */
	}
	.related-page-list li.relation-label a span.kamon.icon-lg,
	.related-page-list ul.grid li.page-list-item a .icon {
		/* リンクのアイコン */
	    display: flex;
	    position: absolute;
	    align-items: center;
	    justify-content: center;
	    width: 30px;
		margin: 0;
	    margin-left: 6px;
	    padding: 0;
	}
	.related-page-list li.relation-label a span.kamon.icon-lg {
		/* リンクのアイコン（ラベル） */
   	height: 25px;
	}
	.related-page-list ul.grid li.page-list-item a .icon {
		/* リンクのアイコン（カード） */
	    height: 50px;
	}
	.related-page-list ul.grid li.splitter {
		height: 5px;
	}
}

タイムスタンプフォーマット変更
script.jsscrapbox.TimeStamp.removeAllFormats()
scrapbox.TimeStamp.addFormat("YYYY/M/D")
scrapbox.TimeStamp.addFormat("YYYY/M/D HH:mm:ss")

インデントが同じところに線を引く
/nishio/settings#6202853faff09e000058e62a
style.css .indent-mark {
 	height: 100% !important;
 }
 .indent-mark .pad {
 	height: 100% !important;
 	overflow: unset !important;
 }
 .indent-mark span:nth-child(2n+2) .pad {
 	background: #f6f6f6;
 }
 .indent-mark span:nth-child(2n+1) .pad {
 	background: #eee;
 }

//Premy
 script.js(async () => {
  const {runPremy} = await import("/api/code/hata6502/premy/index.js");
  runPremy();
})();

// Kanvas
 ____script.js import {runKanvas} from "/api/code/hata6502/kanvas/index.js";
 
 runKanvas();

折り畳み
script.jsxxxximport { setup } from "/api/code/villagepump/箇条書きを折り畳むUserScript_(takker)/mod.js";

// 起動
const { cleanup } = setup();

// 終了したいときはcleanupを呼ぶ
// cleanup();

未読だけのページでも右側にテロメア表示
script.jsconst dummyUnread = document.createElement('div')
dummyUnread.classList.add('unread')
const dummy = document.createElement('div')
dummy.classList.add('telomere')
dummy.appendChild(dummyUnread)
document.body.appendChild(dummy)

折り畳み - 見出しをリストするメニュー
/shokai/ページの見出しを作るUserScript
script.jsimport '/api/code/shokai/ページの見出しを作るUserScript/script.js'

閲覧してないページのカードの色を変える (Scrapboxの霧)
style.css.grid li.page-list-item a:not(:visited) {
	background-color: #e0e0e0;
}

#masui
#member