2021-05-15

Google検索から不要なインデックスを削除したい場合

不要なインデックスの削除方法を２通りメモしておく。

サーチコンソールを導入しているサイトの場合

サーチコンソールにログインして、左メニューの削除 > 新しいリクエストを選択し、URLを入力して送信する。

サーチコンソールを導入していないサイトの場合

以下のURLから、新しいリクエストを選択し、URLを入力して送信する。 https://search.google.com/search-console/remove-outdated-content?utm_source=wmx&utm_medium=deprecation-pane&utm_content=removals

2021-05-12

windowsにおすすめのmicrosoftトラックパッド付きワイヤレスキーボードN9Z-00029買った

ガジェット

前購入した、iClever 折り畳みBlueToothキーボードが壊れたので、windows用のキーボードを新調した。

bnsgt.hatenablog.com

マイクロソフトキーボードワイヤレス/セキリュティ(暗号化機能搭載)/防滴 All-in-One Media Keyboard N9Z-00029

【 13時まで決済完了で当日発送】マイクロソフトキーボードワイヤレス/セキリュティ(暗号化機能搭載)/防滴 All-in-One Media Keyboard N9Z-00029 送料無料即納

価格:5,933円
(2023/6/3 03:37時点)
感想(0件)

折り畳みのは、なんだかんだ小さくて打ちづらいしそんなに持ち運びもしないんで、今回は折り畳みできないやつにしようと思った。そしてwindowsのノートパソコンは主にテレビモニターにつないでamazon primeとか見る用途なんで、リモコン代わりに使えるトラックパッド一体型のがよかったので、これにした。

＜使いたいイメージ＞

ちょっと使ってみた感想

トラックパッドが使いやすい。（クリックもカチカチしすぎず、押した感もありつつで良い感じ。）
キーストロークも程良くあって良い。
microsoft社製というブランドバリューに安心感がある。
防滴なんで飲み物こぼしても安心

他に候補にあがったやつ

Logicool ロジクールワイヤレスタッチキーボード K400pBK

ロジクールワイヤレスタッチキーボード K400pBK windows android chrome 無線キーボード国内正規品 2年間無償保証

価格:5,100円
(2023/6/3 03:37時点)
感想(7件)

黄色の差し色が可愛い。これでもよかったかも

2021-05-10

【Git】Visual Studio Codeで、変更箇所がハイライトされない時の対応

Git

いつの間にかVisual Studio Codeで変更箇所の行のハイライトが出ないようになった。（何きっかけか不明）

他のプロジェクトを開くと、変更箇所の行がハイライトされたので、Visual Studio Codeの設定とかの問題ではなく、プロジェクトの問題っぽい。

GitHub Desktopというクライアントツールを使っているので、その場合の解決した方法をメモしとく。

ターミナルで以下のコマンドでGitのキャッシュクリアする git rm -r --cached .
GitHub Desktopに、ステータス変更のあるファイルが追加されたので、全部「Discard changes」を選択し変更なかったことにする。

この状態で、変更するとハイライトされた。

2021-05-09

.htaccessで、httpsにURLを正規化する

もしhttpで訪れても、httpsにURLをリダイレクトさせたい場合、.htaccessに以下を記述する

RewriteEngine on
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

参考

htaccess.cman.jp

2021-05-04

【mac】clipyが動かなくなったので再インストールした

Mac

いつものように、cmd + shift + vで履歴ペーストしようとしたら、以下のようなダイアログが出て、ペーストできなかった。

f:id:bnsgt:20210504041215p:plain

システム環境 > セキュリティとプライバシー > プライバシー > アクセシビリティ

から、clipyを有効にしようと思ったけど、なぜか選択肢に無く、再インストールすることに。

途中ちょっとうまくいかなかったのでメモ。

以下のDownloadボタンから最新のをダウンロードする。 clipy-app.com
dmgファイルダブルクリックで、ドラッグ&ドロップで、Applicationフォルダに入れる。
“Clipy.app”という名前の項目がすでにこの場所にあります。現在移動中の項目で置き換えますか?　と聞かれるので「置き換える」を選択する。
項目“Clipy.app”が使用中のため、操作を完了できません。と出る。
アクティビティモニタで、clipyを終了させる。
再度、dmgファイルダブルクリックで、ドラッグ&ドロップで、Applicationフォルダに入れて、「置き換える」でインストールする。

これで問題なく使えるようになった。

システム環境 > セキュリティとプライバシー > プライバシー > アクセシビリティに選択肢がなかったのが謎。

現在は選択肢表示されている。

うまくいかなかった時は、clipyだけでなく他のアプリも表示されてなかった。あれはなんやったんやろか。。

2021-05-01

【JavaScript】レイアウトの中で文字サイズを画面幅に応じて可変にする

JavaScript CSS

cssのfont-sizeの指定の仕方で、vwがある。

100vwで今の画面の横幅いっぱいのサイズを指定できて、10文字で横幅いっぱいにしたければ、font-size: 10vwを指定すれば大丈夫。

ただこれだと、「画面幅」に対して計算されるので、divの中のdivとか、「レイアウトの中で」横幅いっぱいにしたい場合にvwを指定するのは計算が大変。

JavaScriptで汎用的に文字サイズを可変にできるようにした。

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* A Modern CSS Reset */
    *,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

    .wrapper {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      background-color: #ccc;
      padding: 20px;
    }
    .two-column {
      display: flex;
    }
    .two-column p {
      width: 50%;
    }

  </style>
</head>
<body>
  <div class="wrapper">
    <p class="js-resize-text">文字サイズが、幅いっぱいで可変に</p>
    <p class="js-resize-text">あああああああああああああああああああああああああ</p>
    <div class="two-column">
      <p class="js-resize-text">文字サイズが、幅いっぱいで可変に</p>
      <p class="js-resize-text">文字サイズが、幅いっぱいで可変になります</p>
    </div>
  </div>

  <script>
    function resize() {
      var resizeText = document.getElementsByClassName('js-resize-text');
      for (let i = 0; i < resizeText.length; i++) {
        var body = document.getElementsByTagName('body')[0];
        var wrapper = resizeText[i].clientWidth / body.clientWidth;
        var fontSizeVw = wrapper / resizeText[i].innerHTML.length;
        // ▼ letter-spacingを0.1emに指定していた場合、1.1をかける
        // var fontSizeVw = wrapper / (resizeText[i].innerHTML.length; * 1.1);
        resizeText[i].style.fontSize = fontSizeVw * 100 + 'vw' ;
      }
    }
    // 初期
    window.onload = function(){
      resize();
    }
    // リサイズした時
    window.onresize = function(){
      resize();
    }
  </script>
</body>
</html>

こんな感じになる

f:id:bnsgt:20210501040632g:plain

JQuery使う場合

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    function resize() {
      var $resizeText = $('.js-resize-text');
      $resizeText.each(function() {
        var wrapper = $(this).width() / $('body').width();
        var fontSizeVw = wrapper / $(this).text().length;
        // ▼ letter-spacingを0.1emに指定していた場合、1.1をかける
        // var fontSizeVw = wrapper / ($(this).text().length * 1.1);
        $(this).css('font-size', fontSizeVw * 100 + 'vw');
      });
    }
    // 初期
    window.onload = function(){
      resize();
    }
    // リサイズした時
    window.onresize = function(){
      resize();
    }
  </script>

2021-04-30

【Vue.js】i18nを使用時に<br>タグで改行させる方法

Vue.js

vueのtemplate内で、＜br＞タグを含む言語を読み込む場合、そのままマスタッシュ記法で読み込まず、v-htmlを使う。

vueファイル

<template>
  <!-- NG：<br>タグがエスケープされてしまう -->
  <p>{{ $t('text') }}</p>
  <!-- OK：改行される -->
  <p v-html="$t('text')"></p>
</template>

言語ファイル

/locales/ja.json

export default {
  text: '改行します<br>改行されました',
}

素肌にサスペンダー

個人的な備忘と日記