[MV3] Chrome Extension 開発の教訓 - Qiita
これは何 個人開発中に経験した、chrome 拡張機能開発における教訓でございます。 Manifest のバージョンは MV3 です。 V3 特有の話と、よく嵌りやすい点についてまとめました。 icon が表示されないときは 参考：https://developer.chrome.com/docs/extensions/reference/action/#icon 次を確認してみてください。 pngを提供しているか pbg以外の拡張子、例えばsvgとかは無視されます 次の 3 つのサイズ(DIP: デバイスに依存しないピクセル)を提供しているか 128 * 128 インストール中および Chrome ウェブストアで使用されます 48 * 48 拡張機能管理ページ（chrome://extensions）で使用される 48x48 アイコンも提供する必要があります 16 * 16 拡張機能のペ
![[MV3] Chrome Extension 開発の教訓 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0ee57381e6a2fb95976386f598d40e300b99110a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTVYzJTVEJTIwQ2hyb21lJTIwRXh0ZW5zaW9uJTIwJUU5JTk2JThCJUU3JTk5JUJBJUUzJTgxJUFFJUU2JTk1JTk5JUU4JUE4JTkzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xNDllZTI3MTM5OTIzNTE4YjU5MGFlYTdiMmVjOTU5Zg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpY2hpdG9zZSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGZkZGYzYjM0NDIwYTNiZWVjMTBhYTBiZDIzNTIwOWM%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D7aac00ad517d4ad94b97237e7a5095ad)
並行処理、並列処理のあれこれ - Qiita
この資料の背景 社内向け勉強会で並行処理と並列処理というテーマで発表しようとしたら、 OSの役割や仕組みなどを理解しないといけなくなったので、それらも込でまとめた資料になります。 調べてみて、まだまだ分からないところがたくさんあるので、これからも継続的に勉強していきたいです。 (前提) ProcessとThread 歴史的な経緯を理解すると、腹落ちします。 Processしかなかった時代 OS(カーネル)の主要な仕事の一つに、複数の仕事をどう効率的に実行するかをマネジメントするというものがある。 この仕事(実行)の単位を表す概念がProcessで、Threadという概念自体がLinux 2.4以前ではなかった。 仕事をするには、そのためのリソース(CPUリソースや、メモリリソース)が必要です。 なのでこういうリソースも含めた仕事するために必要な塊がProcessです。 ただの概念上の存在な
Extra Reducerを理解してなかった話 - Qiita
Extra ReducerをcreateAsyncActionの付き添いレベルで想定していたが、domainを跨いでactionによるStoreの更新を行える。 ログアウトや、cacheのアップデート(apiのresponseがnestedで他のデータに影響する場合(user.oragnizationとか))の場合は影響範囲をdomain単位で記載できる。 変更による改修コストは確かにあがりそうだけど、importから終える+createAsyncThunkで大量のdispatchを呼ばなくてすむので、コードの集約生が上がりそう。 ちゃんと解説を読むべきだった。。。 createSlice const Logout = createAction('[CORE] LOGOUT') const userSlice = createSlice({ name: "user", reducers:
爆速で起動する Neovim を作る - Qiita
1. ayamir/nvimdots の衝撃 このエントリーを書くきっかけとなったのは以下のレポジトリーを見たことでした。 ayamir/nvimdots: A well configured and structured Neovim. これは Neovim の設定ファイルを公開しているレポジトリーです。特徴的なのはその起動速度。Neovim 界の三種の神器、nvim-telescope/telescope.nvim、nvim-lualine/lualine.nvim、hrsh7th/nvim-cmp を含む、割合新し目で重たいプラグインを使いながら、10 ミリ秒台の起動速度を実現しているのです。 これに触発され、僕自身の設定も大幅に見直すことができ、ayamir/nvimdots とほとんど遜色無い速度を実現することができました。この記事ではその設定に使った様々なテクニックを紹介します
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
【Terraform】terraform importを試す - Qiita
はじめに 以前、業務でterraform importコマンドを利用してAWSの既存インフラストラクチャをimportする機会があったので、知識定着のためにも記事にしてみたいと思います。 terraform importとは？ 既存のインフラストラクチャをTerraformの管理下に置くためのコマンドになります。 AWS上で変更した内容をTerraform上にも反映させる時に使用します。 前提 今回は事前に作成したこちらのTerraformのコードを利用しております。 こちらの記事でご紹介しているコードと同様のものになります。 Terraformのバージョン情報は、以下になります。 % terraform --version Terraform v1.1.8 on darwin_amd64 + provider registry.terraform.io/hashicorp/aws v4.
Terraform Importメモ - Qiita
概要 コード化を楽にしたい コード化するにあたって記述方法がわからない対象がある 前提 AWSの場合 コード化されていないリソースが存在すること 詳細 コード化補助として使う場合 既存の”dev-documents”という名前のS3バケットをインポートしたい場合 プロジェクトディレクトリを作成後、その中に簡易な設定のmain.tfを作成 # --------------------------------------------- # Main Setting # --------------------------------------------- //最低限の設定を記述 provider "aws" { region = "ap-northeast-1" } terraform { required_version = ">= 1.1" required_providers { a
Terraform の State を理解する - Qiita
なんとなく使っている Terraform の State ファイルについて理解を深めてみたのでブログにまとめてみる。 State の目的 リアルワールドへのマッピング Terraform のステートファイルは、実際にデプロイされているインフラストラクチャと、そのマッピングに使われる。最初のTerraformのバージョンは、ステートファイルがなかったそうで、Tagで管理していたが、クラウドプロバイダによっては、そういうのがな無いため、すぐに問題になったとのこと。 terraform.tf provider "azurerm" { version = "=1.39.0" } terraform { backend "azurerm" { resource_group_name = "RemoveTerraform" storage_account_name = "tsushistatetf"
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita
React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をするJavaScriptReactreact-hooks はじめに React（v16.12.0）のReact.memo、useCallback、useMemoの基本的な使い方、使い所に関しての備忘録です。 「React でのパフォーマンス最適化の手段を知りたい」 「なぜReact.memo、useCallback、useMemoを利用するのかわからない」 といった人達向けに書いた記事です。 デモは CodeSandbox 上に置いてあります。編集して動作を確認してみると理解が深まると思います。 本記事で用いている用語 メモ化 計算結果 メモ化 計算結果を保持し、それを再利用する手法のこと。 キャッシュのようなものだとイメージすれば良いと思う。 そのため、以下の言葉の意味は
正規表現 - Qiita
正規表現とは、「いくつかの文字列を一つの形式で表現するための表現方法」のこと。 この表現方法を利用すれば、たくさんの文章の中から容易に見つけたい文字列を検索することができる。 普通の文字列 単純にその文字列にマッチする。 正規表現 マッチする文字列
英語面接で5歳児みたいなことしか言えないからカッとなってWebサービス作った【個人開発】 - Qiita
要約 「英語で意見を言おうとすると5歳児のようになってしまう」という課題を解決するEnglisterというサービスを開発した。 自分で使ってみたところ、10問程度の問題を解くだけでスラスラと英語で意見を言えるようになった。 実装はDeepL APIとNext.jsのAPI routeを使って爆速開発をした。 追加(2021/01/18) 記事を公開してから毎日機能追加をしています。２週間前からどれだけ変わったか是非見ていただきたいです。 背景にあった課題 「英語で意見を言おうとすると5歳児のようになってしまう」 英語にすごい苦手意識があるわけではない。TOEICは840点で、すごく簡単な日常会話なら問題なくできるので、海外旅行で困るということはなかった。しかし、仕事でたまに海外の人とやりとりをするときや外資系企業の英語面接で**「ちょっと難しい質問」**をされると、途端に5歳児になってしま
【fish 版】ターミナル起動時に tmux の既存セッションをアタッチ - Qiita
この記事なに？ @ssh0 さんの [tmux] 端末起動時に自動で新規セッションを作成 or 既存セッションにアタッチ - Qiita という記事で解説されていた zsh の設定を、 fish 版に書き直してみたので紹介します。 軽くググってみても fish + tmux という環境で、ターミナル起動時に tmux の既存セッションをアタッチする記事がなかったので、備忘録を兼ねて書いておくことにしました。 実現したいこと 元記事で実現されていたのと同じ機能を fish で再現します。 ターミナル起動時に tmux のセッションが無ければ新しくセッションを作る ターミナル起動時に tmux のセッションが残っていれば、セッションを選んでアタッチする セッション選択時、esc キーを押すと tmux は起動しない tmux のセッションをアタッチするのは fish がログインシェルで起動され
知ってると便利かもしれないChrome Developer Toolsの小ネタ集 - Qiita
(値を下げる場合は、↓キーと組み合わせてください) 0.1ずつ値を変更した場合の例 直近に選択した要素の参照 Consoleで$0を入力すると、直前に選択した要素への参照を意味します。 例えば、Elementsタブで<p>要素を選択したとしましょう。 この場合、Consoleで$0を使用すると、選択した<p>要素を参照することができます。 なお、$に続く番号(n)を変更することで、「n+1」回前に選択した要素を参照することができます。(0〜4までの値が使用できる) 例 $0: 1回前に選択した要素 $1: 2回前に選択した要素 $2: 3回前に選択した要素 ... DOMのブレークポイントの設定 Developer Toolsでは、DOM要素にもブレークポイントを設定することができます。 手順 1. Elementsタブを開く 2. ブレークポイントを設定する要素で右クリックし、Break
mapstructureを使って複雑な構造のJSONを構造体にマッピングする - Qiita
この記事は、Go4 Advent Calendar 10日目の記事です。 先日、ネットサーフィンをしていたところ、SmartHRさんが公開している郵便番号から住所を引くことが出来るJSONデータのリポジトリを見つけました。 https://github.com/kufu/jpostcode-data このデータをGoで扱いたかったのでencoding/jsonでUnmarshalすることを試みたのですが、 簡単には通らなかったので色々調査を行い、最終的にstructにマッピングすることに成功しました。 jpostcode-dataに格納されているJSONの形式 jpostcode-dataのJSONデータは、下記のような構成になっていました。 郵便番号の先頭3桁をファイル名としたJSONファイルが1ディレクトリ配下に設置されている "001.json", "002.json", ... J
Go で JWT を使うユースケースとその実装例 - Qiita
はじめに JWT{JSON Web Token} は RFC7519 で規定されている、JSON をセキュアにやり取りするための仕様です。特徴は次の通り。 鍵になる文字列（以降 secret ）か公開鍵ペアのどちらかを使って署名することで「セキュアにやり取り」できるようにしている。前者は HMAC アルゴリズム、後者は RSA か ECDSA が使われる。 「セキュアにやり取り」の意味はこの JSON が適切な者によって発行されて、改ざんもされていないことが保証されるということ JSON は署名されるだけで暗号化されるわけではないので、中身は誰でも閲覧可能な点に注意が必要 JWT は eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM
grpc-goのリフレクションについて調べてみた - Qiita
grpc-goのExamplesにあるreflection.Register(s)が何をしているかについて調べたときのメモです。 また、gRPC command line tool(gRPC CLI)をビルドするときにエラーが出たのでその時の対処方法も記載しています。 公式にあるリフレションのチュートリアルがあるので、英語に抵抗がなければそちらを見たほうがいいと思います。 grpc-go/server-reflection-tutorial.md at master · grpc/grpc-go · GitHub まずは、gRPCサーバのソースです。 grpc-go/main.go at master · grpc/grpc-go · GitHub package main import ( "log" "net" "golang.org/x/net/context" "google.go
redux-persistで永続化したストアをmigrationする - Qiita
やりたいこと redux-persistで永続化ストアの構造を変えたときに、古い構造のストアがlocalstorageから読み込まれてしまう。 ライブラリに用意されているcreateMigrateという関数を使えば永続化ストアの移行ができるので、やり方を記載する。 結論 persistConfigにversion, migrateを追加しろ createMigrateに移行後のバージョンのストア定義を渡せ const migrations = { 1: (state: any) => { return { ...state, post: { migrateTest: 'uno', }, }; }, } const persistConfig = { key: 'root', storage, whitelist: ['post'], version: 1, migrate: createM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsを使用して書いたChrome extensionにおけるi18n対応 - Qiita
[Terraform] Error: project: required field is not set の対処法 - Qiita![[Terraform] Error: project: required field is not set の対処法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/20c406c8eb1048c3bb201667dc9afc24a1ab523d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVGVycmFmb3JtJTVEJTIwRXJyb3IlM0ElMjBwcm9qZWN0JTNBJTIwcmVxdWlyZWQlMjBmaWVsZCUyMGlzJTIwbm90JTIwc2V0JTIwJUUzJTgxJUFFJUU1JUFGJUJFJUU1JTg3JUE2JUU2JUIzJTk1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00Zjk3NzRhZTFhZjEyOWFmYmRjYmI5N2RmMjU3ZWVlYQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBHaW4mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTE4Nzc2NmE0YjA3MmFjOTE1ZWYzMjg2MDFkMTdhZjY0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D201fa9d47864c7c1beedaf4c1ef5f84e)
Googleが提唱するTestSizeとJava,MavenによるTestSizeの実現方法について - Qiita
