VS Code の拡張機能「Ascii Tree Generator」 インストール ディレクトリ構造など面倒なツリーを#タグを使って簡単に書けるようにしてれる拡張機能。 Githubのドキュメントに詳しい説明がある。 使用方法 # public # dist ## index.d.ts ## index.js # src ## index.ts ↑ のように作成し選択、Ctrl+Shift+Pでコマンドを開き、Pre-Formatted Tree Stringを選択する。 . ├── public ├── dist │ ├── index.d.ts │ └── index.js └── src └── index.ts そうすると上記のように展開される。
ステルスアフェリエイト広告の規制強化 よくわからないけど、ステルスマーケティングは景品表示法違反ということで、令和5年10月1日から規制されることになるらしい。 ということでPR表記がないアフェリエイト広告（多くの場合PR表記なんてない）も規制の対象になるとのこと。 なので、今後ステレスアフェリエイト広告は撲滅するかもしれないけれど、ニュースに疎いのでそんなことは知らなかった。 知らなかったうえで、アフェリエイト広告に嫌気がさしたので、ブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能を作ってみた。 アフェリエイト広告に嫌気がさし、Chrome拡張機能開発 アフェリエイト広告を自身もブログでやっていたことがあるので、何も知らずに騙されることはないが、やっていたので、どれがアフェリエイト広告なのか判断がつく。 分かってしまうが結果、世の中アフェリエイト広告だらけという現実に嫌気がさしてきた。 また見分けがつくとは言え、マウスオーバーしないと判断ができない。 なので地雷原を歩くように最新の注意をはらってきた。 まあ、別にアフェリエイト広告を踏んだところでどうでもいいんだけど、なんとなく気になる。 そういった経緯で前述したようにブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能を作った。 アフェリエイトリンクを赤枠で囲む拡張機能 ブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能 使用すると、 のようにアフェリエイトリンクが赤枠で囲まれ、リンク文字列の前に💰マークが付く。 これで一目でアフェリエイトリンクが判断でき、快適なブラウザ生活を送れるようになった。
package.jsonのひな型を作成する npm init 色々効かれるが基本的にEnterを押しておけば問題ない。 押し続けているとpackage.jsonが作成されている。 sassをインストール npm i -D sass 上記コマンドでsassをインストールする。 今回は下記バージョンがインストールされた。 "sass": "^1.58.0" Gitでソースコードを管理している場合は、.gitignoreファイルを作成しnode_modules/と記入するのが吉。 Scriptを登録する ちなみに今回は /assets/scss/style.scss ↓ /assets/css/style.css のように変換したい。 先ほど作成したpackage.jsonにScriptを登録する。 "scripts": { "watch:sass": "sass --no-source-map --watch assets/scss/:assets/css/" }, 登録後、Scriptを実行する。 $ npm run watch:sass > media-nove@1.0.0 watch:sass > sass --no-source-map --watch assets/scss/:assets/css/ Compiled assets\scss\style.scss to assets\css\style.css. Sass is watching for changes. Press Ctrl-C to stop. 以降、scssを変更するたびに、コンパイルされる。 たぶん、拡張機能のコンパイルと展開のされ方が違うので、実際にページを見て崩れがないかを確認したほうがいい。 拡張機能について 拡張機能は便利だけど、開発環境の共有ができないので、依存しすぎるのは良くないなあ、と思い直した。