タイトルで結論が出てますが、一応解説します。 前提 ・Live severを起動してもファイル画面が表示される。 ・Setting.jsonの記述は完璧 config.json "liveServer.settings.port": 5000, "liveServer.settings.CustomBrowser": "chrome", "liveServer.settings.ChromeDebuggingAttachment": false, "liveServer.settings.fullReload": true, "liveServer.settings.donotShowInfoMsg": true, 原因 HAML は、Brackets がアクセスできないサーバーサイドの状態を参照できるテンプレート言語なので、サーバーサイドの HAML ページをリアルタイムで Live Preview 更新しながら編集するのは複雑です。 あと自分が英語のイシューを避けてたことも原因でした。 日本語でぱっと見記事がなさそうな時は英文のソースも積極的に見ていきたいと思います。

まずは以下画像の赤枠部分を見ていただきたいのですが、２つのセレクトボックスを連動させて、左のセレクトボックス（画像では「食材群」）で値を選ぶと、右のセレクトボックス（同「食材」）の選択肢が動的に変更されるような方法を調べました。 例えば、食材群で「野菜類」を選ぶと、食材の選択肢には野菜の仲間が表示されます。 また、食材群で「魚介類」を選ぶと、食材の選択肢には魚介の仲間が表示されます。 この機能は以下のコードで実現できます。 select_change.js // 食材群選択 $(function(){ var $children_default = $('.children'); var original = $children_default.html(); $('.parent').change(function() { var $children = $("#children"); var val1 = $(this).val(); $children.html(original).find('option').each(function() { var val2 = $(this).data('val'); if (val1 != val2) { $(this).remove(); } }); if ($(this).val() === '') { $children.attr('disabled', 'disabled'); } else { $children.removeAttr('disabled'); } }); }); food_register.html <form method="post"> 食材群： <select class="parent" id="parent" name="parent" required> <option value="" selected="selected" disabled> 食材群を選択して下さい <option value="vegetables">野菜</option> <option value="seafood">魚介類</option> </select> 食材： <select class="children" id="children" name="children" disabled> <option value="0" selected="selected" disabled> 食材群を選択して下さい </option> <option value="1" data-val="vegetables">キャベツ</option> <option value="2" data-val="vegetables">白菜</option> <option value="3" data-val="vegetables">レタス</option> <option value="4" data-val="seafood">アジ</option> <option value="5" data-val="seafood">タイ</option> <option value="6" data-val="seafood">マグロ</option> </select> </form> ちなみに、画像は食品ごとの食材(栄養価)を登録するアプリケーションの一部で、カレーライスの1人分の食材は以下のような分量となります。

HTML、CSSの知識 さらに得た知識です。 HTMLとCSSを同時で学んでいるので 行ったり来たりしています。 1.divタグ(html) ディビジョンのことで領域（エリア）を示すためのタグ タグ自身には意味がない class属性（組：グループ分け）をつけることが多い class属性はグローバル属性 2.marginプロパティ(css) margin 上　右　下　左　で指定する margin 10 auto;　で要素を中央に配置することができる 左右をautoにすると中央に寄るのはCSSの仕様 paddingは内側の余白を指定できる 3.font-sizeプロパティ(css) em→倍率を表す　ex)1.2em→元の大きさから1.2倍 4.labelタグ(html) <div class="control"> <label for="mymail">メールアドレス</label> <input id ="mymail" type="email" name="mymail"> </div> for属性でinputタグと紐づける 5.spanタグ(html) divと同じように意味はない 改行したくない、1つの要素の中に納めたいときはspan 逆に改行して使いたいときはdiv htmlとCSSが繋がって色々できるの面白いな。 指定した通りに見た目が変わっていくと嬉しい。 以上

どうも7noteです。CSSで作れる波線は2種類だけ CSSで波線を再現する方法！ それは以下の2種類しかありません！ ・text-decolation: wavy; ・波パーツ画像のループ表示 グラデーションを駆使して作っているものも見ましたが、実用性はあまりないかと。 また、SVGを使う事で波の背景を作る方法はあるようです。 1行で書くなら「text-decolation: wavy;」 style.css p { text-decoration: #f00 wavy underline; /* 色,波線,線を引く場所を指定 */ } テキストに波線を書く方法です。色や線を引く場所は変えれますが波線の曲がり具合や大きさは変更できません。 ・自由度を求めるなら「波パーツ画像のループ表示」 このような波のパーツ画像を用意し、繰り返し表示することで波線を再現します。 index.html <p><span class="wave">波下線を引く</span></p> style.css .wave { padding-bottom: 5px; background: url(parts.png) repeat-x bottom left / auto 5px; } 結果 インライン要素、もしくはインラインブロック要素に指定しましょう。 まとめ 現状CSSだけでは上記の方法でしか波線を再現することはできません。 それっぽいものは作れるかもしれませんが実運用を考えると上記の2つの方法のどちらかを選ぶしかないと思います。 ただwavyもあまり美しい感じではないので、実質背景画像を使った方法1択ではないかなと思います。 SVGを使った方法が知りたい方はこちらから。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

CSSの基礎知識 開始5分で得た知識です。 1.インラインスタイル <h1 style="font-size: : 50px;">入会申し込み</h1> pxは光の粒＝解像度の単位。数字が大きければ大きいほど文字を大きく表示できる style属性はすべてのタグに使える＝グローバル属性と言われる font-sizeはプロパティと呼ばれる タグの中に属性を書いていくことを、インラインスタイルシートと言う。 2.内部参照 <style> p { font-size: 14px; } </style> headタグの中に書く pはセレクターと言い、セレクターに対してスタイルシートを指定する スタイルシートとhtmlを分離して書くことができる 3.外部参照 <link rel="stylesheet" href="style.css"> 　rel（リル）＝リレーションのこと　href（エイチレフ）＝シートの名前 headタグの中に書く style.css p { font-size: 14px; } 基本的には外部参照がすっきりして良いが、 一部だけ変えたい、このページだけ変えたい　といった場合は インラインや内部参照を使うことも。 ただし、優先順位がある 外部＞内部＞インライン ので、設定するときは注意が必要な模様。 以上

HTMLの基本 忘れそうな知識の置き場です〜 めちゃくちゃ基本 プログラミングの勉強を開始して15分で得た知識です。 （厳密に言うとまだプログラミングでもない） 1.inputタグ 綴じタグなし name属性必須（自由に命名） type属性は必須ではない（デフォルトでtextになる） value属性は初期値を表示できる 2.buttonタグ inputタグでも作れるが古い記法なので、buttonの方が良い 3.決まり文句 <!DOCTYPE html> 　→これはhtmlだ！という宣言 <html>　→html書くよ〜 <head>　→色々と設定していくよ〜 <meta charset="UTF-8"> 　 →charset＝文字コード　日本語コードの１つであるUTF−8で設定 　　近年ではUTF-8しか使われない、他のコードになると文字化けする <meta name="viewport" content="width=device-width"> 　 →スマホ幅viewportを端末幅に合わせるwidth=device-width設定 　　昔はここで幅を設定していたが、今はメディアクエリで設定するので 　　ここの記述はこの形で決まり文句化している <title>入会申し込み</title> 　　→自由にタイトルつけよう（WEBでタグに表示されるよ） </head>　→設定終わり！ <body>　→htmlの中身書いてこ〜！ 　 </body>　→中身ここまで！ </html>　→html書き終わりました！ ふぅ。ひとまずhtmlはこんなもんか。 せっかち関西人ですので、すでにやきもきしていますが、 丑年だけに1歩ずつ着実にいきたいと思います。 以上

HTMLの基本 忘れそうな知識の置き場です〜 めちゃくちゃ基本 プログラミングの勉強を開始して15分で得た知識です。 （厳密に言うとまだプログラミングでもない） 1.inputタグ 綴じタグなし name属性必須（自由に命名） type属性は必須ではない（デフォルトでtextになる） value属性は初期値を表示できる 2.buttonタグ inputタグでも作れるが古い記法なので、buttonの方が良い 3.決まり文句 <!DOCTYPE html> 　→これはhtmlだ！という宣言 <html>　→html書くよ〜 <head>　→色々と設定していくよ〜 <meta charset="UTF-8"> 　 →charset＝文字コード　日本語コードの１つであるUTF−8で設定 　　近年ではUTF-8しか使われない、他のコードになると文字化けする <meta name="viewport" content="width=device-width"> 　 →スマホ幅viewportを端末幅に合わせるwidth=device-width設定 　　昔はここで幅を設定していたが、今はメディアクエリで設定するので 　　ここの記述はこの形で決まり文句化している <title>入会申し込み</title> 　　→自由にタイトルつけよう（WEBでタブに表示されるよ） </head>　→設定終わり！ <body>　→htmlの中身書いてこ〜！ 　 </body>　→中身ここまで！ </html>　→html書き終わりました！ ふぅ。ひとまずhtmlはこんなもんか。 せっかち関西人ですので、すでにやきもきしていますが、 丑年だけに1歩ずつ着実にいきたいと思います。 以上

GAS （Google App Script） とスプレッドシートで、サーバーレスかつ無料でイベントの出欠管理ツールを作成してみました。 開発の背景 ネット上から人を募集してゲームのオフライン大会などを開催する場合、ネット上で出欠を取る必要があります。出欠の管理等にはGoogleフォームとGoogleスプレッドシートがよく利用されています。↓イメージ 実際には、参加者が「自分の申請が上手くいっているか」、「他の参加者は誰か」を確認できるようにスプレッドシートを公開していることが多いです。 この場合、以下のような問題があります。 スプレッドシートがスマホからだと見づらい。（利用者はほとんどスマホ） 許可権の設定によってはデータ改竄される危険性がある。 個人情報などは公開できないため収集できない。 特に、個人情報については、主催者が住所等を把握しておかないといけない昨今の状況(コロナ)では、なんとかしたいところ。 そこでGAS製のWebアプリ スプレッドシートをDBっぽく使って、確認用の画面を作ってあげれば、解決です！ スプレッドシートがスマホからだと見づらい。（利用者はほとんどスマホ） ⇨スマホでも見やすい確認画面！ 許可権の設定によってはデータ改竄される危険性がある。 ⇨スプレッドシート本体は見えない！ 個人情報などは載せられないため収集できない。 ⇨確認用画面に、個人情報を表示しなければよい！ 【完成品】 フォーム： https://docs.google.com/forms/d/e/1FAIpQLSdAkDbwsfnGFlMFV49h5_JLjIIuRWjDRyi6XYwcwIwBnGCnzw/viewform 確認用画面: https://script.google.com/macros/s/AKfycbxc-pkYyXhzn1QooZvSRSX0VMbwoQwpbxEewleBeAYNG8RFRuCyGHxm3Imup2MDv7Rb/exec ※プラウザによっては表示されないことがあります。 構築 これからシステムを作っていきます。フォームを作ったあと、アプリを作成します。 フォームの作成 まずは以下サイトを参考にフォームを作成します。 今回はテストとして以下のフォームを作りました。 名前 twitterのID 注意事項への同意 意気込み 運営に伝えておきたいこと 今回は、「運営に伝えておきたいこと」を個人情報という扱いで作成します。以下のようになりました。（試しに申請いただいても構いません） スプレッドシートの設定 実際に申請してみるとこんな感じになるかと思います。 Webアプリっぽくする上で以下2点を追加したいです。 申請番号 状態（申請中とか承認済み） 列の順番を入れ替えて、緑の列を追加しました。申請が来た時点で自動で埋めて欲しいですが、DBじゃないので、AUTO_INCREMENTみたいな機能やデフォルト値を設定する機能は、自分で実装する必要があります。 スクリプトの実装 ①スプレッドシートの上部の[ツール]から[スクリプトエディタ]を選択します。 ②スクリプトを設定する。 こんな画面になると思います。 コードは以下です。 function myFunction() { var spreadsheet = SpreadsheetApp.openById('スプレッドシートのID'); var sheet = spreadsheet.getSheets()[0]; var number = sheet.getRange(sheet.getLastRow(),1);//シートの最終列を申請番号の行を取得 var status = sheet.getRange(sheet.getLastRow(),6);//シートの最終列と申請状態の行を取得 if(number.isBlank() == true){ number.setValue("=ROW()-1");//申請番号の設定 status.setValue("申請中");//申請状態の設定 } } ※'スプレッドシートのID'はURLの以下の部分のことです。 https://docs.google.com/spreadsheets/d/[ここの部分]/edit ③フォームに入力があった場合にスクリプトが動くように、トリガーを設定します。 画面右側からトリガーを選択します。 ④画面右下の[トリガーの追加]をクリックし、画像の画面で、イベントの種類を[フォーム送信時]に変更し保存します。 ※こんな画面出ます。詳細を表示して、下のリンクをクリック。その後、アクセス権のリクエストの画面が出てくるので[許可]をしてください これで、自動でデフォルト値が入力されます。以下、参考にしたページ。 Webアプリの構築 次にWebアプリ部分を作成します。 ※画像は2021/05/01時点の画面です。 以下を参考にしています。 まず、「Webアプリケーションの公開手順」の項をやってみた方が理解しやすいかもしれません。 ①googleドライブの画面から、[+新規]⇨[その他]⇨[Google App Script]を選択する。 こんな画面になると思います。 ②ファイルの部分の＋マークから以下のhtmlファイルを追加する。 index.html css.html 追加画面はこんな感じ。 これらのhtmlファイルが、画面部分になります。 ③それぞれのファイルにコードを入力する。 コード.gs function myFunction() { //デフォルトで入ってたけど消してもいいかも } function getSheet(name){ // スプレッドシートIDからスプレッドシートの取得 var ssId = 'スプレッドシートのID'; var ss = SpreadsheetApp.openById(ssId); // 指定されたシート名からシートを取得して返す var sheet = ss.getSheetByName(name); return sheet; } function getData() { // シート名を指定してデータを取得 var values = getSheet('フォームの回答1').getDataRange().getValues(); return values; } function doGet() { //index.htmlを指定する。 const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); return htmlOutput; } index.html cssは、bootstrapを利用しています。 <!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link href="/docs/4.5/assets/css/docs.min.css" rel="stylesheet"> <!-- cssは直接読み込めないので、htmlファイルを埋め込む形で --> <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?> <title>Hello, world!</title> </head> <body style="padding-top:50px"> <header> <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light"> <a class="navbar-brand bd-title" href="#">オフ会参加者管理</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link bd-lead" href="#">ホーム <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link bd-lead" href="申請フォームのURL">申請フォーム</a> </li> </ul> </div> </nav> <div class="jumbotron"> <h1 class="bd-lead">ざこやまオフ</h1> <p class="lead bd-lead">作成者：@zakoyama_com</p> </div> </header> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <? // スプレッドシートからデータを取得 var data = getData(); data.length; // テーブルを作成 for(var i=1;i<data.length;i++){ if(data[i][0]!=''){ output.append('<h1 class="bd-title">No.'+ data[i][0] + ' ' + data[i][1] + '</h1>'); output.append('<h2 class="bd-lead">twitter:' + data[i][2] + '</h2>'); output.append('<div class="alert alert-info" role="alert">'); output.append(' <h5 class="bd-lead">申請状態：'+ '<span class="badge badge-pill badge-primary bd-lead">' + data[i][5] + '</span>'+ '</h5>'); output.append(' <h5 class="bd-lead">コメント</h5>'); output.append(' <p class="bd-lead">' + data[i][3] +'</p>'); output.append('</div>'); } } ?> </div> </main> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html> css.html スマホでの視認性が悪いので、文字を大きくするために追加のcssを書きました。 <style> .bd-title{ font-size:3rem; } .bd-lead{ font-size:1.7rem; } </style> ④左タブの[設定]から [Chrome V8 ランタイムを有効にする]のチェックを外す。 ⑤右上の[デプロイ]から[新しいデプロイ]を選択する。 ⑥[デプロイ]をクリックする。（また、アクセス権のリクエストの画面が出てきます） URLが出てくると思います。 ※ブラウザによっては表示されないことがあります。 ⑦こんな画面が出てきて、申請者情報が出てきてたら成功です。 まとめ・あとがき cssの部分など、汚い部分がありますが、ひとまず形にはなったと思っています。うまくいかない、誤り等あれば教えてださい。また、GASのアプリケーションは、リクエストの数に制限があるそうです。大規模なものはきちんとサーバ立てるのが無難ですね。 2021年4月で社会人2年目になったので記念の投稿です。優しい目で見てください。 twitter:@zakoyama_com

はじめに gulpを使用してたときに、 急に「Not enough space」というエラー画面になりました。 ググってみたものの、なかなか原因が特定できる記事を発見できず、、、 解決までに少し時間がかかってしまったため、記事に残しておきます。 解決法 どうやら何らかの動作が原因で文字コードがGBKになっていることが原因のようで、 その文字コードをUTF-8に変更することで解決しました。 （GBKは、中国語の簡体字用の文字コード） ※ Sublime Textでは画面左下に、文字コードの記載があります。 文字コードの変更について 文字コードの変更は以下の手順で行えます。 画面上部のツールバー > File > Set File Encoding to > UTF-8

Javascript、HTML/CSSで数当てゲームを作りました。 ルール ・1から50までの数字を入力し、5回以内に正解の数を当てるゲームです。 プログラミングコード <!-- 数当てゲーム--> <!-- 新規作成 2021/04/30 --> <!-- author 乃木坂好きのITエンジニア --> <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>数当てゲーム</title> <style> h1 { color:plum; font-size:100px; } h2 { color:#4f7911; font-size:50px; } body { background-color:whitesmoke; } </style> </head> <body id = "test"> <header> <div class="container"> <h1>数当てゲーム</h1> <h2>数を当ててみよう</h2> </div><!-- /.container --> </header> <main> <div class="container"> <section> </section> </div><!-- /.container --> </main> <footer> <div class="container"> </div><!-- /.container --> </footer> <script> 'use strict'; let message; let count = 1; let flag = 0; //乱数を発生させる。0~49まで数字がランダムに表示されるので1を足す。 const number = Math.floor(Math.random() * 50) + 1; //数当てゲームは5回挑戦できるようにする。 while (count <=5){ const answer = parseInt(window.prompt('数当てゲーム。1〜50の数字を入力してね。5回まで挑戦できます')); window.alert(count + "回目です。") //正解、数が小さい、数が大きい、1から50以外の数字が入った時の条件式 if(answer === number) { message = 'あたり！'; window.prompt(count + "回目で正解しました。おめでとうございます!"); document.querySelector("h1").innerHTML = "<h1>数当てゲーム、正解です!</h1>"; document.querySelector("h2").innerHTML = "<h2>おめでとうございます！</h2>"; flag = 1; break; } else if((answer < number) && (answer >= 1)) { message = '残念でした！もっと大きい'; } else if((answer > number) && (answer <=50)) { message = '残念でした！もっと小さい'; } else { message = '1〜50の数字を入力してね。'; } //入力した数字に応じてメッセージを出力する。 window.alert(message); // count = count + 1; } //5回挑戦して不正解だったら正解をアラートで表示する if (flag === 0){ window.alert("正解は" + number + "です"); } </script> </body> </html> 本来ならCSSとスクリプトファイルは別のほうが良いのですが、今回はまとめて1ファイルで作成いたしました。

はじめに Charts.cssというHTMLのClass指定だけで、チャートやグラフを表示できるフレームワークがあるということを知りましたので、どんなものか試してみました。 Charts.css 公式サイト https://chartscss.org/ https://github.com/ChartsCSS/charts.css CDNの指定 ・CSSの設定として下記を指定 sample.html <link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css"> CDNを指定し、テーブルタグにclassを加えていきます。charts-css の次に、チャートの種類、そしてオプション等です。 sample.html <table class="charts-css bar hide-data show-primary-axis show-data-axes"> ... </table> 種類は以下のようなものがありますが、まだUnderver Developmentとなっているものもあります。 色やラベル、3D効果、アニメーションなどがあります。 サンプルでは、下記のような各国のメダル数を表示できるものがでていました。 ソースコード：https://chartscss.org/components/tooltips/ Mixed Charts 簡単なMixed Chartsを作成してみました。 グラフの中に数字をいれることはできましたが、目盛りをいれることができなそうでした。やはり簡単にテーブルデータをグラフ・チャート化できるのが売りだと思うので、細かいことはできないことがありそうです。（目盛りは最低でもあるべきとは思いますが） 折れ線グラフは、始点と終点をいれる形なので、中央に設定することはできなそうでした。 sampleMixed.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS CHART</title> <link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css"> <style> #my-chart { position: relative; height: 550px; width: 100%; max-width: 800px; margin: 0 auto; } #my-chart > table { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } #my-column { --color: lightblue; } #my-line { --color: darkgreen; } </style> </head> <body> <div id="my-chart"> <table class="charts-css column show-heading show-labels data-spacing-20 show-primary-axis" id="my-column"> <caption>グラフタイトルの設定</caption> <tbody> <tr><th scope="row"> 2020/7 </th><td style="--size: calc( 30000 / 150000 );">\30,000</td></tr> <tr><th scope="row"> 2020/8 </th><td style="--size: calc( 60000 / 150000 );">\60,000</td></tr> <tr><th scope="row"> 2020/9 </th><td style="--size: calc( 90000 / 150000 );">\90,000</td></tr> <tr><th scope="row"> 2020/10 </th><td style="--size: calc( 120000 / 150000 );">\120,000</td></tr> </tbody> </table> <table class="charts-css line" id="my-line"> <tbody> <tr><th scope="row"> 2020/7 </th><td style="--start: 0.2; --size: 0.8;"></td></tr> <tr><th scope="row"> 2020/8 </th><td style="--start: 0.8; --size: 0.6;"></td></tr> <tr><th scope="row"> 2020/9 </th><td style="--start: 0.6; --size: 0.7;"></td></tr> <tr><th scope="row"> 2020/10 </th><td style="--start: 0.7; --size: 0.9;"></td></tr> </tbody> </table> </div> </body> </html> まとめ HTMLのtableにClassを加えるだけで、グラフやチャートが実装できます。 すでにHTMLにTableデータがあり、その下あたりにちょっとグラフを入れたいなと思ったときに便利ではないでしょうか。 テーブルデータを外部から読み込み、月日などによりデータが変わっていく場合などはちょっとやりにくいですし、細かい設定を実施する際には、Chart.jsのほうが使い勝手がよさそうです。 参考URL

再配布不可能・私的利用可能 やり方 PCブラウザ版に限る まずは無料版adguardなど入手 次に以下の3行をユーザールールにコピペする twitter.com##div:matches-attr("/aria-label|role|data-testid|class/"="/タイムライン:.*|listbox|listitem|userCell|article|option|link|region/") > div > div:contains(/AAA|BBB|CCC/im) twitter.com#@#div:matches-attr("/aria-label|role|data-testid|class/"="/テキストをツイート|検索クエリ/") twitter.com##div[data-testid="card.layoutLarge.detail"]:remove() 大まかな解説 使い方 嫌な言葉をdiv:contains(/AAA|BBB|CCC/)に入れる それを含むツイートやユーザーは全て非表示になる(そのユーザーのページではユーザーの情報だけ見えてしまうが…) 正規表現でやっているので公式クライアントより正確に安全に条件を絞れるミュート機能のような使い方も出来る 検索はフラグ/im（アルファベットの大文字と小文字の区別がない，^$が先頭末尾に加え行頭行末もマッチする）を使っているので各自でオンオフしてくれ 仕組み :matched-attr()と特定のパラメータを用いて検査の対象のdivを決め打ちし，:contains()と各種のワードで検査して引っかかったdivを不可視化している > div >はどうやらdivの階層構造の深さを表すらしい…が，今のところ1個だけの状態が最もパフォーマンスが良い 1ライナーで複数のdivを選定しているのでリストも1つで済む，フィルタリングがより快適になった 本来なら:remove()して少しでもブラウザを軽くしたかったのだが，非常によくTwitterがバグるので断念した 注意 "/タイムライン:.*|listbox|listitem|userCell|article|option|link|region/"の部分に"tweet"を加えると，対象語を検索窓やツイート欄に入力したときにバグる，その上に加えても良いことが何もないので非推奨 また2行目は現状においては不要であるが，Twitterが仕様を変えてきた際に上のバグをなるべく回避するためのおまじないの役目があるので，なるべくは書き加えてほしい 3行目は消さないこと，Twitter Card（リンク貼るときにサムネと説明文が見えるやつ）の説明文のせいで挙動が不安定になる…あと見た目が少しスリムになるかも 真面目な解説 関数について ネット上の記事だとdiv[xxx="yyy"]やdiv:has-text(/xxx|yyy/)のような解説が多いですが，前者は拡張性と管理性が低い・後者は使用する関数が古い問題があります，AdGuardのユーザールールのフィルタ向けのリファレンス（最新版）に沿って設計することをお勧めします ただし:has()セレクタに限ってはCSS 4.0で実装されると策定されただけなので，現状では基本的にどのブラウザでも未実装です，これだけは使えないので注意しておきましょう divの中身について "/aria-label|role|data-testid|class/" 主要なhtmlタグはだいたいこの4つだけ ちなみにTwitterはreactでやってるらしい タイムライン:.*系 ユーザー発のアクティビティに関するもの，正規表現で1個にまとめた aria-label=で与えられる タイムライン: ホームタイムライン homeに流れるタイムライン タイムライン: トレンド 今どうしてる？のやつ タイムライン: 最近でてきたトピックのサジェスト こいつ絶対あとで名前が変わるだろ タイムライン: 話題を検索 検索のトップページ タイムライン: Carousel 横並びになっているサジェスト タイムライン: タイムラインを検索 検索した結果 タイムライン: 会話 各ツイートのスレッド タイムライン: 通知 通知 タイムライン: メッセージ DM タイムライン: リツイートされました 通知をクリックした画面 タイムライン: いいねしました 通知をクリックした画面 タイムライン: リツイートしたユーザー ツイートから見れるやつ タイムライン: いいねしたユーザー ツイートから見れるやつ listboxとlistitem role=で与えられる 検索窓のサジェスト欄と履歴欄がコレに該当する，トレンド名とアカウント名を両方とも潰すには2つとも必要らしい userCell data-testidで与えられる 色んな所に並んで表示される時にユーザーを非表示にする article role=で与えられる 全てのツイートはコレに入っているので，念の為にこれも非表示にする option role=で与えられる サジェストとか設定ボタンの1個の枠は大抵がこれ link role=で与えられる Twitterが用意してくるリンクは大抵はこの中にある region role=で与えられる でっかい組み分けの外の箱は大抵これになっている card.layoutLarge.detail data-testidで与えられる 注意書きにある通り，Twitter Cardの説明する部分を:remove()で消し去った，逆に:remove()しないとダメなパーツだった スマホ対応について 現状うまく動作していない ちょっとよくわからない，ユーザールールの動作条件がPCとは違うらしい… 解決したらまた書きたい 最後に また何かあったら改善したいのでその時は改善されたバージョンを追って頂きたい あとTwitterは無●