あのぞんブログ

anozon JavaScript とアニメ好き Web エンジニア。Twitter

Google検索で英語のページのみヒットさせる方法

2020-07-29

日本語設定で Google 検索を使ってると「日本語のページのみ表示する」というオプションがでてくることがあります。 でも逆に英語のページのみヒットさせたいときもあるので手順を紹介します。(意味合いが違う日本語記事ばかりヒットするときがある) 方法 Private Window…

GitHub Profile README に Shields.io Badge並べた

2020-07-28

elzup (elzup) shields.io を使って技術系アイコンを量産した - Qiita を参考に Badge を作りました。 Shields.io の logo 機能 Shields.io: Quality metadata badges for open…

Firebase Project の複製や ID 変更

2020-07-26

やること ソースコードの ID 変更 Firestore のデータ移行 やること プロジェクトの複製には、 移行先プロジェクト作成 ソースコードの ID 変更 移行元を Blaze Plan にする(なってない場合) Firestore…

Markdown でコードブロックの中にバックスラッシュ3つを書く

2020-07-06

Markdown の複数行コードブロックは普通以下のように書きます。 その中にを書くときは を使います。 ※この記事はマークダウンで書いているので更に で囲っています。(コード elzup/anozonbiyori@a7d62e…

Firebase Functions の console.log をまとめる

2020-07-02

Firebase Functions が Node 8 サポートを終了しログの仕様が少し変わりました。 で Object を渡すと 1 行ずつにログが分割されてしまうようになりました。 Console.log calls result in multiple log…

テストで TimeZone を固定する

2020-07-01

日時の文字列をテストに使っているとき GitHub Actions でつまずいたのでメモ。 javascript の Date は自動でローカルのタイムゾーンで文字列化されます。 環境変数 TZ を指定して実行する 他の解決策 その他 環境変数 TZ…

surround.vim 入門【vim中級者向け】

2020-06-16

why demos cs “change surround” ds “delete surround” ys “you surround” virtual select → S 公式リポジトリ https://github.com/tpope/vim-surround why…

Docker 止めずに立ち上げるだけする【tty】

2020-06-09

docker-compose.yml java 実行環境を立ち上げる例。 立ち上げた環境にシェルでアクセスする例。 Docker コマンドの場合 tty: オプション

1つ上のディレクトリ名をとるShellコマンド

2020-05-27

1 つ上のディレクトリ path をとる 現在のディレクトリ path をとる 2 ディレクトリをとる 補足 おまけ: alias 化 1 つ上のディレクトリ path をとる 現在のディレクトリ path をとる…

localhost.{appname}:3000 で開発してブラウザキャッシュを活用する案

2020-05-26

複数のアプリを同じ で開発すると切り替えるたびにキャッシュが競合するので で変える案です。 /etc/hosts フロントエンド開発起動スクリプト例 /etc/hosts フロントエンド開発起動スクリプト例 CRA (Create React App) や Next.js…

React で canvas から画像生成する最小コード

2020-05-25

この記事では React (と TypeScript で) canvas から画像生成する方法を紹介します。 文字描画や色変更をサンプルに説明していきます。 React で Canvas を使うベースのコード 文字色や背景色を変えるサンプル React で Canvas…

Desktopのファイルを一掃する

2020-05-12

や ディレクトリはよく散らかるので、「散らかってきたな〜」と思ったとにバックアップに移動するコマンドをまとめます。 コマンド のファイルを 日付つきディレクトリ(例 )に移動します。

.git/config からリモートリポジトリを変える

2020-05-03

リモートリポジトリ先を変更(やリネーム)した際に .git/config から変える癖がついてしまったので整理もかねて。 git コマンドで URL を変える メリット 無効な設定をしてしまうリスクが少ない 1 コマンドで済む .git/config から メリット remote…

docker-compose.yml に環境変数を渡す

2020-05-01

.env ファイルを使う docker-compose.yml .env ファイルを使う サンプルコード: elzup-sandbox/docker-scratch docker-compose.yml services.shell.environment…

GitHub Pages から別のサイトに移行するときのリダイレクト設定

2020-04-30

概要 gh-pages ブランチをクリーンにする jekyll でリダイレクトする 概要 GitHub Pages から別のホスティングへ移行したとき、 ドメインが変わる場合にすべき設定について。 運用していたページ へのアクセスを 新しい URL…

rel=noopenerをつけないサイトへの攻撃デモ

2020-04-29

この記事では rel=noopener”をつけないとどんなことができるのかをデモで示します。 noopener の攻撃デモ 攻撃サイト側のコード noopener の攻撃デモ リンク: https://tools.anozon.me/noopener noopener…

Excelやスプレッドシートで方眼紙を作る方法

2020-04-29

この記事では Excel やスプレッドシートでの方眼紙の作り方 について紹介します。 Google SpreadSheet で作る Excel の場合 Google SpreadSheet で作る cmd + A: 全選択。 A 列をダブルクリック(A 列解除+A…

Firebase Hosting の URL で .html を省略する設定

2020-04-26

cleanUrls を使う ホスティング動作を構成する  |  Firebase の hostings.cleanUrls を true にすることで実現できます。 拡張子なしの URL で にアクセスできます。 →

useSecounds という時計用 hooks を作った

2020-03-08

という react-hooks ライブラリ を作りました。 elzup/use-seconds: Seconds interval time for React hooks DEMO - CodeSandbox useSecounds の特徴 setInterval…

gitリポジトリごとにデフォルトのコミットメッセージを設定する

2020-03-07

git は でデフォルトのコミットメッセージの設定できます。 例えばこのブログのリポジトリは、記事を書いたとき 📝 をコミットメッセージの先頭に入れています。 毎回入力するのは面倒なので を使って省略してみます。 手順…

manifest.json から VSCode でプロジェクトごとに色をつける

2020-03-05

プロジェクトごとに VSCode の色を変える方法を見つけて最近利用しています。 しかし毎回設定するのは面倒くさいので manifest.json からテーマカラーを読み出して 設定する cli を作りました。 vscode-workcolor-setup や の theme…

javascript で Habitica API を使って日課の記録を取得する

2020-03-01

この記事では Habitica API で日課の記録を取得する方法について紹介します。 Habitica は日課管理ツールです。 Habitica - Gamify Your Life token を取得する node.js で API…

【JavaScriptクワイン】プログラムと同じ文字列を出力するプログラム書いた

2020-02-26

JavaScript で ソースコード自身を出力するソースコード書いてみました。Qunie…

【JavaScript】時刻指定で setTimeout するスニペット

2020-02-25

ダッシュボードなど開きっぱなしにする Web 画面で特定の時間にイベントを発火させる方法をまとめました。 特定の時刻に実行する 日付が変わったときに 特定の時刻に実行する 日付が変わったときに

vim でディレクトリ内のファイルを一括リネームする

2020-02-19

vimfiler の rename 機能が便利で、複数ファイルを自由自在にリネームできます。 Shougo/vimfiler.vim: Powerful file explorer implemented by Vim script やってみる 動画 関連: renamer…

PID を使わずにアプリケーションを kill する方法

2020-02-11

で PID を確認する方法は面倒です。また、 や コマンドは間違ったプロセスを強制終了してしまうリスクがあります。 この記事ではオススメのアプリケーションを kill する方法をいくつか紹介します。 fkill CLI Alfred Kill Process fkill CLI…

Next.js with TypeScript で最小限の _app.tsx, _document.tsx

2020-02-08

この記事では Next.js with TypeScript で最小限の _app.tsx, _document.tsx について紹介します。 Gist: Next.js with typescript minimum pages/_document.tsx, pages…

Mac の launchctl 毎朝で読むページを自動で開かせる

2020-02-08

毎朝チェックしたいページがあるのですが、毎日開くのは面倒です。 この記事では毎朝読むページを自動で開かせる方法について紹介します。 スクリプトを準備する plist ファイルを準備する launchctl で登録する スクリプトを準備する コード: add morning…

children を持つ Component を normal function で書くときの型定義

2020-02-07

この記事では children を持つ Component を function で書くときの型定義する方法を説明します。 書き方 を使うことで書けます。 Sample PropsWithChildren - CodeSandbox それぞれの書き方 関連 Tips Props…

【ボツネタ】GitHub Actions の URL 1 つからバッジを生成するツール作った

2020-02-03

この記事では GitHub Actions の URL 1 つからバッジを生成するツールを作ったので紹介します。 するつもりだったのですが、気づいたら公式で発行するするボタンができてました。 github-actions-qawolf-badge.png…

Mac OS でIPアドレスを出力する方法いろいろ

2020-01-31

この記事ではプライベート IP アドレスだけ出力する方法をまとめました。 目次 ローカル IP ifconfig を使う internal-ip-cli (npm module) を使う Public IP internal-ip-cli (npm module…

GatsbyJS のコードブロックに言語バッジをつける方法

2020-01-22

この記事では GatsbyJS のコードブロックに言語バッジをつける方法について紹介します。 前提として を使っています。 やり方を考えてるとき www.gatsbyjs.org/docs のコードブロックにも言語表示があったのと、このサイト自体も GatsbyJS…

【zsh】cdr の掃除をする

2020-01-21

この記事では cdr から不要なディレクトリを削除する方法を紹介します。 cdr は zsh に入っているコマンドで、過去に開いたディレクトリへ移動できるコマンドです。 普段は をラップした anyframe…

zstyle で現在の値を取得する

2020-01-21

この記事では zstyle で現在の値を取得する について紹介します。 zstyle コマンドのマニュアル zsh: 22 Zsh Modules 方法 1. -g オプションを使う。 方法…

【Clasp】GoogleAppScript のコードをローカルで開発する

2020-01-21

この記事では Clasp を使って GoogleAppScript のコードを手元で管理する方法を紹介します。 Clasp Command Line Interface using clasp | Google Developers 手順…

5層 ReactComponent と TypeScript でカウンター書いてみる

2020-01-21

経年劣化に耐える ReactComponent の書き方 - Qiita が良さそうだったので TypeScript で書く場合を試してみた。 コード CodeSandbox 気になる部分 StyledComponent で既存 Component を Wrap…

【PLOP CLI】新しいファイルをテンプレートから生成するCLI

2020-01-12

この記事では PLOP について紹介します。 GatsbyJS で書いている当ブログの記事作成を例に話します。 Consistency Made Simple : PLOP 手順 1. インストール npm で global…

GatsbyJS を Typescript に移行した際の Type 付け

2020-01-09

GatsbyJS で書いているこのブログを Typescript 移行しました。 主に以下の記事を参考に移行しました。なので今回は Type づけに焦点を当てて書きます。 Gatsby.js を完全 TypeScript 化する - Qiita GraphQL Data…

Firebase Function 内から Cloud Messaging で通知を投げる最小コード

2020-01-08

Firebase Function から Cloud Messaging (FCM HTTP v1 API) を使って通知を送る方法のメモです。 の初期化設定する アプリサーバーからの送信リクエストを作成する  |  Firebase…

GatsbyJSでコードブロックを作成する

2020-01-05

この記事では GatsbyJS で作っているブログのコードブロックをカスタマイズします。 現状 Plain Text なので Syntax Hilight と style 調整をします。 手順 1. prismjs のプラグインを追加 gatsby-remark-prismjs…

GatsbyJSで記事のURLをカスタマイズする

2020-01-04

この記事では GatsbyJS で作るブログの slug(URL のパス部分) のカスタマイズ方法を紹介します。 gatsby-source-filesystem を使用している前提で説明します(gatsby-starter-blog に入っています)。 手順. /gatsby…

はやくもブログを Hexo から Gatsby に切り替えた

2019-03-06

移行した理由 React 使えそうなので Gatsby に移行しました。 Before After さっぱりしてしまいましたがカスタマイズ前なので OK。 いじっていきたい部分 Gatsby は GraphQL…

akispace.fm をはじめました

2019-03-04

podcast 始めました エンジニア 2 人でアウトプットしながら雑談したいと思いはじめました。 yattecast を fork Podcast には audrio と RSS が必要なになります。 yattecast というリポジトリが podcast 向けの Jekyll…

Hexo と gh-pages でブログを作った

2019-02-09

Hello world!. 新しくブログを立てました。 今までの使っていたブログと理由 最初はブログを作るということで WordPress を VPS サーバーに設置していました。 でも自分で管理するのがだるくなって、しばらく”はてなブログ”や Qiita, Medium…

© 2020 あのぞんびより All Rights Reserved