いつもはてなブックマークをご利用いただき誠にありがとうございます。はてなブックマーク開発チームのid:yone-yamaです。 最新版のGoogle Chrome(バージョン134以降)にて、はてなブックマークが提供する2つのChrome拡張機能のうち、旧バージョンである「はてなブックマーク」がブラウザ上で強制的にオフになる事象が発生しています。 過去当ブログでお知らせした通り、 本事象が発生している旧バージョンのChrome拡張機能は、新バージョン「はてなブックマーク ブックマーク機能」の提供開始に伴い、2022年2月よりサポートの対象外としています。 Chrome拡張についての過去のお知らせは以下をご参照ください。 "なお、既存のChrome拡張機能はサポート対象外となりますが、当面の間はそちらも引き続きご利用いただけます。" ブックマーク専用の新しいChrome・Firefoxブラウ
Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
有能な秘書か、大ぼら吹きか 「ChatGPT」をスプレッドシートで使えるアドオンを試してみた（1/3 ページ） 話題のAIチャットボット「ChatGPT」だが、普通の人にはまだちょっと身近にはなっていない。またAIとやりとりしても「AIと会話できるのは分かった。すごいけど、だから何？」と感じる人もいる。しかし、ビジネスツールであるスプレッドシートからChatGPTが呼び出せると、景色はちょっと変わる。 新人に「このリストを調べて埋めておいて！」と依頼するような感じで、AIにちょっとした調べ物や、データづくり、問題づくりなどをさせられるようになる。UIは慣れ親しんだスプレッドシートで、依頼の文字を変更すれば自動的に内容が書き換わる。
Visual Studio Code is one of the most widely used code editors in the developer community. One of the reasons for VS Code’s popularity is its many extensions that speed up the development process. In this guide, we’ll explore the 10 VS Code extensions every web developer should know in 2021. These tools are designed to improve the developer experience and make your job easier in various ways. We’l
はじめに こんにちはkenです。エディターはVS Codeを使ってます。 突然ですがみなさん、普段開発をしていて 「VS Code にこんな拡張機能、あったらいいのにな〜」 と思うことありませんか？ 私はあります。しょっちゅうあります。 そこで先日、予定がない休日を利用して拡張機能の開発に挑戦してみることにしました。 最初は拡張機能の開発をどのように進めていけばよいのか全くわからず、そもそも拡張機能でどこまでのことを実現できるのかすらわかりませんでした。ましてや実装についての知識なんて皆無です。 「これは完成まで1日くらい、いや下手すると3日くらいかかるかな」と考えていたのですが、いざやってみるとたった2時間で作れてしまったので今回はその経験についてお話ししたいと思います。 この記事を読んで、 「こんなにお手軽なら自分にも作れそうだ！」 と感じてくれたら幸いです。 本題 作りたかったものと
今空前のブームとなっているのが、人間のような自然な会話が行える人工知能ツール「ChatGPT」だ。さまざまなアプリやサービスがこのChatGPTを組み込み、従来ではできなかったきめ細かな対話型UIが次々と実現しつつある。特にAPIが公開された2023年3月以降は、IT系ニュースでChatGPTの文字を見ない日はないと言っていいほどの盛り上がりだ。 今回はそんなChatGPTを用いた技術に、無料の範囲で触れることができるサービスやアプリ、ブラウザ拡張機能などを集めてみた。実験的に作られた個人運営のサービスも含めて内容は千差万別だが、いずれも無料で試せるので、ChatGPTでどのようなことができるのかを知るにはぴったりだ。「ChatGPTに興味はあったが出遅れてしまった」という人は活用してみてほしい。 AIが日記作成をお手伝い「dAIary」 「dAIary」は、午前と午後の出来事をフォームに
高精度な言語翻訳サービス「DeepL」。 これまではWebサイトや、デスクトップ用のネイティブアプリ経由で使用する方法が主流でしたが、今後はChrome用の公式拡張機能「DeepL翻訳」にも注目した方が良いかもしれません。 現在ベータ版ですが昨年末から便利すぎると話題になっています。 DeepL翻訳拡張機能の使用方法 ChromeでChromeウェブストアの「DeepL翻訳」ページにアクセスし、拡張機能をインストールします。 ▲Webサイトの情報を日本語に翻訳したい場合、Chromeでそのサイトを表示し、翻訳したい部分のテキストを選択します。表示されたDeepLのアイコンをクリックすると、その近くに翻訳結果がポップアップ表示されます(トップ画像)。 また、自分の入力した情報を他の言語に翻訳することもできます。 ▲拡張機能が有効な場合、TwitterやGmailの入力欄にDeepLのアイコン
「iPhoneと同じになるな!」Androidユーザー悲鳴。アプリの自由インストール、2027年に事実上終了へ
Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。
おはようございます。しなもんです。 今回はセキュリティ調査に使える便利なブラウザの拡張機能 (アドオン・エクステンション) をご紹介します。 こうした拡張機能の多くはこの世で唯一無二の機能を持っているわけではありませんが、普段から一番よく使う調査ツールである「Web ブラウザ」に直結するため、手間の節減や各種オンラインサービスへのアクセシビリティ向上に大きな効果を発揮する場合があります。 前提 Mitaka IP Address and Domain information Link Redirect Trace User-Agent Switcher Flagfox IP Domain Country Flag Wappalyser anonymoX Wayback Machine Exif Viewer/EXIF Viewer Pro Simple Translate Mouse Di
いろいろと便利に使えると話題のChatGPTですが、基本OpenAIのウェブサイトから使う仕様なのに機能が少なくて使いやすいとは言えなかったりします。 この記事ではそんなChatGPTの弱点を改善するChrome拡張を紹介します。 Glarity-Summary for Google/YouTube (ChatGPT)Glarity-Summary for Google/YouTube (ChatGPT)は、ChatGPTを用いてさまざまなサイト上で要約をしてくれるChrome拡張です。 右側に検索ワードに対する要約を出してくれるGoogle検索ではこのように右側に要約欄が現れ、検索ワードに対する要約を出力してくれます。 YouTubeでも右側に要約欄が出現、その下には書き起こし欄もYouTubeにも対応しており、動画の要約と音声の書き起こしを行なってくれます。 ｢とりあえずChatGPT
概要 VSCode のリモートコンテナ機能を用いると、開発環境を dockerfile の形でコード管理することができます。これにより、開発者が開発に用いる環境をリポジトリごとに統一できます。 VSCodeのリモートコンテナ機能とは コンテナの中に開発環境を押し込んで、その中にディレクトリをマウントして開発するVSCodeの機能です。 リモートコンテナ機能を用いて開発するメリット リモートコンテナ機能を用いて開発することには以下のようなメリットがあります。 local環境を汚さない 複数のプロジェクトで開発するにつれて、local マシンにはそのための様々なアプリ・設定が導入されていきます。この状態には以下のような欠点があります。 導入されたアプリや設定が膨大になって管理しきれなくなり、何のために導入されたか、変更してよい設定なのかが分からなくなる 異なるプロジェクトで必要な設定・アプリ同
株式会社ゆめみの 23 卒 Advent Calendar 2023の4日目の内容です。 2022年のはじめに自分の開発環境を紹介する記事を投稿したのですが、思いのほか読んでいただいているので2023年度版を作成しました。 今回は拡張機能編です。キーバインドなどは後日公開します。 今年1年間で JetBrains 製品や、neovim を使ってみたりしましたが、紆余曲折あり現在は VSCode に落ち着いたのでいつかその辺りも紹介出来ればと思います。 VSCode 関連記事 下記にキーバインドや設定周りの記事リンクを追加していきます 汎用的な拡張機能 BracketLens 右括弧の左側にスコープの情報が表示されるようになる。 ChangeCase 選択範囲のテキストの case を変更することが出来る CodeSpellChecker スペルチェッカー EditorConfig .edi
はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると
h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。 入れ子で実装？ と思いましたが、全然違いました。h1要素は1つだけ、他の要素はなし、疑似要素もなし、複数行になっても問題なし、CSSのプロパティ1つで実装できます。しかもすべてのブラウザにサポートされています。 下記のようにボーダーや背景をボックスからはみ出して配置できます。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 Web ブラウザではすっかりお馴染みの Google Chrome ですが、開発者ツール（DevTools）だけでなく、拡張機能にも導入すると非常に便利なものがたくさんあります。 その中でも、Web系の開発をするエンジニアなら、是非入れておきたいオススメの Google Chrome 拡張機能について紹介します。 尚、いずれも無料で利用可能です。 IT エンジニア界隈では、既にどれも有名なものばかりですが、これから Web 系の開発をする方は是非お試しください。 本当はもっとたくさんオススメしたい拡張機能がありますが、ひとまず今回
TypeScriptは強力な型システムが魅力です。 しかし、複雑な型定義は理解が難しいです。特にライブラリの型定義などはジェネリクスや交差型などがネストしていることも多く、すぐに把握するのが難しい場合があります。 Visual Studio Code（以下VSCode）でTypeScriptの開発をしている際、型にカーソルをホバーすると型情報が表示されます。 しかし、深いネストや複雑な型の場合、展開される情報が不十分で、定義を追う必要があります。 そんな時に役立つVSCodeの拡張機能がないかな〜と探していたら「Prettify TypeScript」というぴったりの拡張機能を発見しました！この拡張機能を使うと、ホバーした時に型が展開された状態で表示されるため、型情報を把握しやすくなります。 Prettify TypeScriptの概要 Prettify TypeScriptを使用すること
Claude Codeの公式VSCode拡張が手動で追加できるようになったので、AWS CloudFormationテンプレートをClaude Code拡張経由で編集・デプロイまでやってみました。拡張機能のおかげで、右タブにClaude Codeのセッションが確立されたコンソールが作成されます。 Claude Codeの公式VSCode拡張が検索可能になったぞ おのやんです。 2025/5/28より、Claude Codeの公式VSCode拡張がリリースされております。こちらが拡張機能ストアで検索可能な形で公開されました。 Claude Code自体が登場した際は、VSCodeとの統合はベータ版でした。 VSCodeのshellでclaudeを立ち上げる際に、こちらの拡張機能が自動でインストールされる（参考：IDEにClaude Codeを追加する - Anthropic）という特性上、一
Getting Started Introduction A simple tutorial Language Reference Basic syntax Types Variables Constants Expressions Operators Control Structures Functions Classes and Objects Namespaces Enumerations Errors Exceptions Fibers Generators Attributes References Explained Predefined Variables Predefined Exceptions Predefined Interfaces and Classes Predefined Attributes Context options and parameters Su
インターネットで調べ物をしていると、「過去に閲覧したページをもう一度閲覧したいけど、タイトルを忘れて検索できない！」という困った状態が頻繁に発生します。ブラウザ拡張機能「Falcon」を使えば、閲覧したページの本文を自動保存して「記事内のかろうじて覚えているワード」を用いた全文検索が可能になるとのこと。めちゃくちゃ便利そうだったので、実際にインストールして使ってみました。 Falcon - Chrome ウェブストア https://chrome.google.com/webstore/detail/falcon/mmifbbohghecjloeklpbinkjpbplfalb Falcon – 🦊 Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/falcon_extension/ FalconにはCh
学生時代に卒業論文に取り組んだことがある人なら「参考文献が多すぎて収拾がつかなくなってしまった」という経験があるはず。学生や研究職ではない人でも、興味がある事柄についてインターネットで調べることがよくありますが、引用や参照を次々とたどっていくと、何がどの論文に書いてあったのか分からなくなってしまうことがよくあります。そんな時にWindows・Mac・Linux向けオープンソースソフトの「Zotero」を使うと、DOIやPMIDで簡単に論文を検索して管理可能で、論文同士の関連付けや引用リストの作成も簡単とのことなので、実際に使ってみました。 Zotero | Your personal research assistant https://www.zotero.org/ ◆Zotero本体と拡張機能の準備 ZoteroはZotero本体とブラウザ向け拡張機能を併用することで便利に使えます。ま
「はてブル パネル」は、ウェブページに付けられたはてなブックマークのコメントや、ウェブページに対するBluesky上の言及をサイドバーに表示できるChrome拡張機能です。コメント表示機能だけでなくChatGPTなどのAIサービスを用いた要約機能や、ウェブページ中の文字列を爆速でウェブ検索できる機能なども搭載されているそうなので、実際に使ってみました。 はてブル パネル - Chrome ウェブストア https://chromewebstore.google.com/detail/jffjglclhogdgliiibiciikihejddgeb まず、上記のリンクをクリックして配布ページにアクセスし、「Chromeに追加」をクリック。 画面上部に確認画面が表示されたら「拡張機能を追加」をクリック。 以下の通知が表示されたら「はてブル パネル」のインストールは完了です。 使いやすくするため
いつもはてなブックマークをご利用いただき誠にありがとうございます。はてなブックマーク開発チーム、ディレクターの id:yone-yamaです。 ブラウザ拡張機能に関するアップデートをお知らせいたします。 拡張機能に「コメント簡易閲覧機能」が追加されました Chromeウェブストア Firefoxアドオンページ 具体的な変更点 補足：コメント簡易閲覧機能に関するこれまでの経緯 旧バージョンの拡張機能からの移行について 拡張機能に「コメント簡易閲覧機能」が追加されました Chrome・Firefoxで提供している拡張機能「はてなブックマーク ブックマーク機能」で、コメント簡易閲覧機能の提供を開始しました。 Webページに集まったブックマークコメントを一覧で確認できるコメント簡易閲覧機能は、これまで旧バージョンの拡張機能でのみ提供していた機能です。 今回のアップデートで、「はてなブックマーク ブ
検索結果やSNSに張られたリンクをクリックすると、本来のURLの後ろに何やらパラメーターがいろいろとくっついてくることがあります。これは、どういったリンクをクリックしたのかなどの情報を得るために付与されたもので、なくても機能します。「あって困る」というものでもありませんが、「プライバシーを守るために消せるものなら消したい」という人のために役立つのが拡張機能「ClearURLs」です。 ClearURLs https://docs.clearurls.xyz/latest/ 「ClearURLs」はChrome、Firefox、Edge向けが提供されています。 ClearURLs - Chrome ウェブストア https://chrome.google.com/webstore/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk ClearU
Googleは毎年、Webストアを通してその年、もっとも人気があったベストなChrome拡張機能を選出しています。 Spotify Wrappedではありませんが、今年の特筆すべき拡張機能を把握するには便利です（ネットのブラウジングに関する限りはですが）。 2022年は多くの拡張機能にAIが登場しました。まさにこの時代を反映していますね。 Chromeユーザーで、私のように拡張機能が大好きなら、Google自身が選んだ今年のベストな拡張機能はじっくり見る価値があるでしょう。 1. Compose AI：AIを使って文章作成を支援する拡張機能Screenshot: Compose AIまずはAIを使った機能から。 私がAIにライターの仕事を奪われることはないと思いますが、AIツールを使うとどんなふうに文章の質が上がるのか知りたくてたまりません。 テキストボックスに文字を入力する時間があるなら
を一通りまとめてご紹介するという内容になっています。 ControlNetは生成する画像のポーズ指定など幅広い用途に使える技術であり、すでに活用なさっている方も多いと思います。そのような中で、つい先日ControlNetの新しいバージョンがStable Diffusion web UI用の拡張機能に実装されて色々な新機能・改善が盛り込まれたので早速使ってみることにしました。 ここではこのCotrolNet 1.1の新機能や改善点について分かりやすく解説していきますね。
サイトを閲覧中に「このサイトの過去のページが気になるけど、わざわざインターネットアーカイブにアクセスしてウェイバックマシンで検索するのはちょっと面倒」と思ったことがある人は少なくないはず。無料でインストール可能なChromeおよびFirefox向け拡張機能「Vandal」を使うと、ウェイバックマシンが収集したスナップショットを簡単に見ることができます。 Vandal | Navigator for Web Archive https://vegetableman.github.io/vandal/ 上記のURLにアクセスすると、以下のように表示されます。VandalはChrome版とFirefox版が用意されていますが、今回はChromeに導入するため「ADD TO CHROME」をクリックします。 続いて「Chromeに追加」をクリックします。 「拡張機能を追加」をクリックします。 導入
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
2022/04/28：追記 公開していたzipファイルのリンクを削除しました。 バックエンドのサーバーを停止しました。 伴ってもう星が流れなくなります。 ※この記事にはちょっとだけエッチな内容が含まれます！苦手な方はご注意ください。 こんにちは。あんど(@ampersand_xyz)と申します。 いきなりすみません、タイトルにエッチとか入ってて驚かれた方もいらっしゃることでしょう。どういうことなのか説明させていただきます。 概要説明 画像出典： 吸血鬼すぐ死ぬ 9巻 P134 盆ノ木至 秋田書店 __要するにこれです。__さすがに宙に星を降らせるわけにはいきませんので今回はブラウザ内に星を降らせていきます。 漫画のコマを見ただけでは何を言ってるのかご理解いただくのが難しいかもしれませんが、これ以上説明のしようがありませんのでついてきてください。 実現方法 いかにしてエッチなことを考えている
複数のApple製デバイスをまたいでメモを取る際に、私はAppleの「メモ」アプリを愛用しています。 iPhone版の「メモ」アプリも愛用していますが、Mac版ではさらに多くの機能が使えます。たとえば、Markdownを使う、デスクトップから直接メモの内容を検索する、といったことです。それらを可能にするのが、サードパーティアプリの「ProNotes」です。 ProNotesは単体で使うものではなく、「メモ」アプリの機能拡張として働き、パワーユーザー待望の機能を追加してくれるアプリです。 この追加機能が本当に優秀で、これを入れれば、「メモ」アプリが本格的な文書作成ソフトになる、と言えるほどです。 では、その具体的な機能をご紹介しましょう。 検索を容易にする「Spotlight」風ショートカット愛用のMac内のファイルやアプリを検索するには、OS内蔵の検索機能「Spotlight」（あるいは、
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「拡張機能を作って検索結果をカスタマイズしたい…」けっこう前からそう思ってはいたものの、私にはそこまでの技術力がありませんでした。 ところが最近、ふと「AIを使えば簡単にできるのでは?」と思いつきました。 今回は、私が実際にAIを使って「Google検索結果からスポンサード広告 / 特定ドメインをブロックする拡張機能」を作った手順を紹介します。 制作時間はおそらく20分～30分程度。さすがにコードをそのまま記事に貼り付けることはできませんが、やろうと思えば誰でも作れると思うので是非遊んでみてください。 1. 目標の整理 まずは作りたい機
コンテンツブロックが有効であることを検知しました。 このサイトを利用するには、コンテンツブロック機能（広告ブロック機能を持つ拡張機能等）を無効にしてページを再読み込みしてください。 ✕
ドイツ連邦最高裁判所（BGH）の最近の判決により、ブラウザベースの広告ブロッカーが著作権を侵害しているかどうかをめぐる法的争いが再燃し、国内でこれらのツールが禁止される可能性への懸念が高まっています。 この訴訟は、オンラインメディア企業Axel Springerが、人気のブラウザ拡張機能Adblock Plusの開発元であるEyeo社を提訴したことに端を発しています。 Axel Springerは、広告ブロッカーが自社の収益モデルを脅かしており、ウェブサイトのブラウザ内での実行を著作権侵害と位置付けています。 これは、ウェブサイトのHTML/CSSが保護されたコンピュータプログラムであり、広告ブロッカーがメモリ上の実行構造（DOM、CSSOM、レンダリングツリー）に介入することで、不法な複製および改変にあたるという主張に基づいています。 以前、この主張はハンブルクの下級裁判所によって退けら
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? シェルスクリプトにも統合開発環境を Bash のシェルスクリプト (shell script) は Linux はもちろん mac や Windows でも動作します。 シェルスクリプトの文法にはかなりクセがありますが、仕様が安定しているために移植する必要がないという大きなメリットがあります。ただ、一般的なプログラミング言語と異なり、デバッガーが使えないため期待した動作と異なるときに動きが分かりづらいという弱点がありました。 しかし、それはもう過去の話です。 Visual Studio Code の Bash Debug 拡張機能を使え
今週、Chrome（クローム）ブラウザーに関する警告が再び報じられている。グーグルは攻撃が進行中であることを認め、約30 億人のユーザーに緊急アップデートを配信した（「CVE-2025-5419：深刻度 High」への対応）。同社はまた、先週すべてのユーザーに対して設定変更をアナウンスなしにプッシュし、この脅威を緩和したことも明らかにした。 Chrome拡張機能の振りをして、攻撃者の「号令」があるまで潜伏を続けるその一方で、イスラエルのLayerX Securityはまったく性質の異なる静かな脅威を警告している。同社は、ChromeやEdgeのブラウザー拡張機能として動作する、軽量なセキュリティソリューションを開発・提供している。 LayerX Securityによると、「悪意あるスリーパー（潜伏者）エージェント拡張機能のネットワーク」が確認されており、これらは「同一人物または同一グループ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
