すべてのカテゴリ

Webサイトの制作にあたっては、いろいろなサイトを参考にされると思います。その際に作業効率を上げる為にはブラウザーの用途に合った拡張機能を利用されることをお勧めします。今回は、ホームページ制作を行う上で使える「Google Chrome」の便利な拡張機能をご紹介します。ブラウザーは「Google」及び「Brave」で拡張機能が使用できます。いずれも「chromeウェブストア」から簡単に追加できます。1.「GoFullPage-Full Page Screen Capture」Webサイトのページ全体のスクリーンショットを取得することができます。最近のホームページは、LP型の縦長構成のサイトが多いので重宝します。そのままコピーして「Figma(フィグマ)」などデザインプラットフォームに張り付けてサイト作成、編集にも活用できます。 ▼「ココナラ」ページのスクリーンショットの場合2.ウェブページ全体をスクリーンショット-FireShotサイトのページ全体、表示部分、選択範囲とそれぞれキャプチャーメニューからスクリーンショットを選択でき、さまざまな形式で保存することが出来るツールです。3.「UI Build Assistant」画面上の全ての「HTML要素」に背景色とアウトラインをつけてくれる拡張機能です。▼「ココナラ」のページをサンプルにすると▼ページを表示した状態で「UI Build Assistant」をクリックすると　　　　　　　　　　　　　　　　　⇩上の図のように各要素の幅の取り方、マージンの取り方などが一目瞭然で確認できます。4.「ColorPick Eyedropper」

アリエクスプレス（AliExpress）で使えるクーポンの種類 AliExpressでは、さまざまな種類のクーポンが提供されています。それぞれのクーポンをうまく活用することで、さらにお得にお買い物ができます。 ・店舗クーポン: 各ショップが独自に提供するクーポンで、特定の店舗でのみ使用可能です。例えば、特定の金額以上購入した際に割引が適用されるものが多いです。 ・選択クーポン: 複数のショップで使えるクーポンで、一定の条件を満たすと使用可能になります。キャンペーンやセール期間中に多く見られます。 ・AliExpressクーポン: アリエク自体が提供するクーポンで、サイト全体で使用可能です。新規ユーザー向けのクーポンや大型セール時に配布されます。 AliExpressのクーポンが手に入るタイミング クーポンをうまく活用するためには、入手のタイミングを把握することが重要です。 ・セール期間: 「シングルデー」や「ブラックフライデー」、「サマーセール」などの大型セール期間中に、特に多くのクーポンが配布されます。 ・新規ユーザー特典: 新しくアカウントを作成すると、初回購入時に使用できる特典クーポンが提供されることがあります。 ・イベント参加: アプリ内のゲームやプロモーションイベントに参加すると、クーポンがもらえることがあります。 ・メルマガや通知: AliExpressのメールマガジンやプッシュ通知を受け取る設定にしておくと、定期的にクーポン情報が届きます。 ・価格推移拡張機能:アリプライスの価格推移拡張機能を利用して、クーポンをより簡単に見つける方法もあります。この拡張機能をブラ

作業効率を爆上げする拡張機能1. GoFullPageワンクリックでウェブページ全体のスクリーンショットが撮れる拡張機能です。通常、複数回に分けてスクショを撮る必要があるページでも、これを使えば一発で完了します。資料作成や情報共有の際に非常に便利です。2. Momentum新しいタブを開くたびに、美しい背景画像と心に響く言葉を表示してくれる拡張機能です。ToDoリストや天気予報も表示でき、気分転換やモチベーションアップに役立ちます。3. OneTab増えすぎたタブを一つにまとめてくれる拡張機能です。メモリ消費を抑え、ブラウザの動作を軽くする効果もあります。あとでまとめて見たい情報があるときに重宝します。情報収集と整理に役立つ拡張機能1. Evernote Web Clipper / Google Keepウェブ上の情報を手軽に保存・整理できる拡張機能です。記事全体をクリップしたり、必要な部分だけをメモしたりできます。Evernoteユーザーには「Evernote Web Clipper」が、Googleユーザーには「Google Keep」がおすすめです。2. DeepL翻訳高精度な翻訳機能を持つ拡張機能です。ウェブページ全体を翻訳したり、選択したテキストを素早く翻訳したりできます。海外サイトの情報収集がスムーズになります。3. Instapaperあとで読みたい記事を保存しておける拡張機能です。保存した記事は、広告などを排除したシンプルな画面で読めるため、集中して読書を楽しめます。セキュリティとプライバシーを守る拡張機能1. Adblock Plusウェブサイトに表示される広

結論：ブラウザ拡張機能で、OAuthサイトにログイン・データをPDF保存は実現可能。スクレイピングの技術といえば、Selenium・Puppeteerが定番ですが、ブラウザ拡張機能による可能性をご紹介します。Outh認証が必要なサイトにGoogleアカウントでログインブラウザ拡張機能によるスクレイピングは直接DOMを操作することができ、原始的で強力な手法です。各ブラウザの拡張機能です。今回、OAuth認証の突破とPDF出力の検証をする機会およびその成功により、ビジネス用途において最も強力な選択肢の１つであると主張します。具体的には以下のようなことが可能です:- サイト内のテキストの読み込み・保存- 画像や音楽、ファイルなどの保存- 認証必要サイトへのログイン- APIを通じた機能実行・データベース使用などです。スクレイピングに必要なほとんどの要件を十分に実現可能です。従来手法との比較Selenium・Puppeteerはスクレイピングのプロジェクトではよく選ばれる技術です。これらはかなり強力技術で、スクレイピング需要を確実に満たすといえます。バックグラウンドや並行実行なども可能で、他システムとの連携も得意です。一方で常駐するサーバが必要となり維持運用の複雑さ・維持コストがかかることが大変になってきます。一方で、ウェブブラウザ拡張機能での実現は、ブラウザの内部に内包されるため維持は不要。当然維持コストもかかりません。加えて、スクレイピング対象のサービスそのものに追加される拡張機能ですので、サービスの延長ですぐに覚えることができます。ビジネス用途においては、保守運用の要員がデータを

Keepa:Amazonで買い物するなら必須、KeepaをGoogle Chromeにインストールする理由Amazonの商品ページに価格推移のグラフを表示し、これまでの最安値の価格と時期、今日の商品価格が、買うべきタイミングかの指標になります。価格の変動を簡単にチェック！ Keepaを使えば、Amazonの商品の価格がどう変動しているかを一目で確認できます。これで、最もお得なタイミングで買い物ができます。 使い方はとっても簡単 インストール - Google ChromeにKeepaを追加するだけ！見るだけ - Amazonの商品ページを開くと、価格のグラフが自動で表示されます。 お得情報を逃さない 値下がり通知を設定しておけば、欲しい商品の価格が下がったときにすぐに知らせてくれます。お金を節約するのにとても便利です。 信頼性の高い情報 Keepaは過去の価格データを提供するので、どのタイミングで買うのが最もお得かがわかります。 インストール方法１）Google Chrome（Microsoft EdgeでもOKです）を開く２）Chromeウェブストアで「Keepa」を検索３）「Chromeに追加」ボタンをクリック ４）「拡張機能を追加」をクリック これで完了です！あとはAmazonの商品ページを開くだけで、Keepaの価格情報が自動で表示されます。 あとサクラチェッカー。こっちは速攻削除しています。 粗悪な商品を見極めるみたいですけど信憑性を疑うしアフィリエイトリンクが多く個人的に嫌いです  

みなさんこんにちは。 今回は、seleniumをchrome拡張機能付きで起動する方法について 手順を解説していきたいと思います。この記事がおすすめの人この記事は以下の人に特におすすめです。　・GoogleChromeの拡張機能について調べている人 　・seleniumでWebスクレイピングツールを開発している人 　・Webスクレイピング：中級者～上級者 　・VBAプログラミング：中級者～上級者はじめにChromeユーザーなら拡張機能の一つや二つご利用中かと思います。 ところがWebスクレイピングを実施する際、 seleniumでブラウザを起動すると拡張機能が無い状態で起動します。 GoogleChromeの設定が必要になりますが、 おおよそ10分程度で完了します。手順今回はGoogle翻訳の拡張機能を追加する方法を例として解説します。 まずは、Google翻訳の拡張機能をGoogleChromeに追加してください。 ※Google翻訳の拡張機能を追加する方法については割愛します。全体の大きな流れまずはじめに全体の大きな流れとしては以下のようになります。 　1.GoogleChromeの拡張機能を開く 　2.デベロッパーモードにする 　3.IDを確認する 　4.Google拡張機能のファイル場所を確認する 　5.拡張機能をパッケージ化する 　6.crxファイルが生成される 　7.VBAのコードでcrxファイルを指定する 以下に手順の詳細について解説します。1.GoogleChromeの拡張機能を開く1.GoogleChromeを起動します。 2.右上の三点リーダー　⇒　拡張機能

# 管理画面エディタに行番号ガター + 行レベルアクションを追加 ## Context 管理画面の Markdown エディタ（`MarkdownEditor.tsx`）にツールバーは追加済みだが、行番号表示と行単位の操作（移動・削除・複製・見出し切替）がない。CodeMirror 等のリッチエディタは導入せず、**既存の textarea + カスタムガター**で実装する。 ## 方針: オーバーレイ方式 textarea の左パディングを拡張し、空いた領域にガター div を `position: absolute` で重ねる。 - スクロールバーは 1 本（textarea のみ）。ガターは `overflow: hidden` + `scrollTop` 同期 - **textarea に `wrap="off"` を指定** — 論理行ベースでガター整列。長い行は水平スクロール - モバイル（lg 未満）ではガターを非表示、パディングも通常に戻す - テーマ対応: `var(--muted)` / `var(--ink)` で配色 ## 変更ファイル | # | パス | 変更内容 | |---|------|---------| | 1 | `src/components/admin/LineGutter.tsx` | **新規** ガター（行番号 + 行アクションボタン統合） | | 2 | `src/lib/editor/lineOperations.ts` | **新規** 行操作の純粋関数（move/delete/duplicate/toggleHeadin

デザインやWeb制作をしていると、気になる色を「この色コード何だろう？」と思うことがよくあります。そんなときに便利なのが「カラーピッカー」という拡張機能です。この記事では、カラーピッカーの基本的な使い方や、デザイン作業を効率化する活用方法について紹介します。カラーピッカーとは？カラーピッカーとは、Webサイト上に表示されている色を簡単に取得できるツールです。ブラウザの拡張機能として提供されているものが多く、マウスでクリックするだけで、その部分の色コード（#FFFFFFなど）をコピーできます。特に、Google ChromeやMicrosoft Edgeの拡張機能ストアで入手できる「ColorZilla」や「Eye Dropper」などが人気です。どんなときに役立つ？Webデザインの参考にする時　他のサイトの配色を参考にしたいときに、画像編集ソフトを使わなくても一瞬で色を取得できます。ブランドカラーの統一　自社サイトや資料などで色を統一したい場合、正確なカラーコードを把握しておくことで、ブレのないデザインが可能になります。画像やロゴから色を抽出　ロゴ画像やバナーからメインカラーを抽出して、サイト全体のトーンを合わせるときにも便利です。代表的な拡張機能ColorZilla　ワンクリックで色を取得できる定番ツール。履歴機能もあり、過去に取得した色を一覧で確認できます。Eye Dropper　シンプルで軽量な拡張機能。Web上の色だけでなく、カラーパレットを作成して整理することも可能です。ColorPick Eyedropper　より直感的な操作ができるタイプ。ズーム表示でピンポイント

VueでElectronのアプリを作るElectron のフレームワークを使うと、複数のプラットフォーム（Windows/Mac/Linux）で動作するデスクトップアプリを開発できるのは、既に紹介してきた通りです。 今日は、Electron のフレームワークと Web 開発でよく利用される Vue を組み合わせて利用する例を紹介します。Vue を取り込むとさらに簡単にデスクトップアプリを作る事ができます。Vue を使うと便利な理由Vue を使うと簡単に Electron アプリが作れるのには理由があります。 これは、Vue でよく利用する「VUE CLI」が拡張機能で Electron のアプリ作成に必要な処理をやってくれる機能をサポートしているからです。この拡張機能（プラグイン）は簡単に追加できます。 その前に、最初に Vue のプロジェクトを作成します。VUE UI(vue ui)を利用しても良いですし、コマンドライン（CLI）を利用しても良いので Vue のプロジェクトを作成してください。 コマンドラインの場合は以下のコマンドを実行します。$ vue create [プロジェクト名]　UI でもコマンドラインでも必要な情報を入力してまずは、Vue のプロジェクトを作成します。 これで、Vue のプロジェクトのテンプレートが作成されます。 まずは、このテンプレートのプロジェクトをそのまま Elecron のアプリにしてみます。ここで拡張機能（プラグイン）をインストールします。$ vue add electron-builder　実はこれだけで、Electron アプリの開発

指定したYouTubeチャンネルから公開されているすべての動画リンクを収集する拡張機能を作ってみました。有料会員限定の動画とか、有料期間が切れる直前にURLだけ保存できれば、後から見れますね。欲しい方いましたら、以下からご相談ください。

こんにちは、京獅郎です。 いろんなサイトやブログを閲覧していると 「この色素敵だなぁ」とか 「この色使いたいなぁ」など 思ったりしませんか？ 自力で似た色を探すのは大変だと思います。 だがしかし！ それは簡単に解決するかもしれませんよ！ 今回、拡張機能紹介の第3弾として、 WEB上のカラーコードを簡単に取得できるChrome拡張機能 「ColorPick Eyedropper」をシェアしていきたいと思います。 WEB制作を始める方や、ブログを始める方はもちろん、 やっていない方も 「へぇこんな事もできるんだぁ」と楽しんでいただけたらと思います。 今回の拡張機能は 超簡単に色のコードがゲットできるので オススメです！ もちろん無料！ それでは今日も楽しくシェアしていきましょう！ Let's share！ ※拡張機能とはなんぞや？と言う方は、この京ブログ#14に詳しい解説をしているのでそちらをご覧下さいね。 「ColorPick Eyedropper」追加しよう早速「ColorPick Eyedropper」を使えるように設定していきましょう！まずは、グーグルのブラウザを開き ①のアプリをクリック。 ②のウェブストアを開く。 ③の検索窓に「ColorPick Eyedropper」を入力。 これで、「ColorPick Eyedropper」が出てきます。さぁどんどんいきましょう！ 上記画像①をクリックし、Chromeに追加。 ②:ブラウザ右上の拡張機能のアイコン一覧箇所に 「ColorPick Eyedropper」のアイコンが現れれば設定完了。 これで

こんにちは、京獅郎です！「そもそもブラウザってなに？」に続き、そもそもシリーズ第2弾「そもそも拡張機能ってなに？」を書いていきます！このブログの過去記事でChrome拡張機能のひとつを紹介しましたが、そもそも拡張機能とはなんぞや？をシェアしていこうという魂胆です。シッーーーーーーーー！！さて、いつも通り簡単に楽しくシェアしていきましょう！Let's share！拡張機能ってなに？拡張機能とはブラウザ(※)の機能を増やしたり、強化する専用の追加プログラムのことです。ちょー便利になると覚えておけばOKです！※ブラウザのついては、京ブログの#10で詳しく解説しています。拡張機能によってさまざまな機能を追加できます。・画像を使って検索できる・Web上の画像を簡単に取得できる・Web上のフォントの種類を表示・1クリックでキャッシュを削除・簡単に翻訳できる・Web上に存在する色を取得・SNSの複数アカウントを瞬時に切り替えるなどなどさまざまな種類がありますが、これらはほんのごく一部です。Chromeの拡張機能は数えきれないくらいあります。基本的に無料なので気軽に使えますが、注意点ももちろんあります。注意点は【拡張機能の注意点】の項目で詳しくご説明しますね。なんにしても割とすごい量があるのできっと自分に合った拡張機能がたくさん見つかると思いますよ♪拡張機能の追加方法Chrome拡張機能は「Chromeウェブストア」から追加できます。追加するには、Chromeウェブストアにアクセスし、目的の拡張機能を探してインストールするだけです。「Chromeウェブストア」のアクセス方法がこちら①のアプリを

こんにちは！京獅郎です！今回Chrome拡張機能の第２弾として「Webiloポップアップ英和辞典」をご紹介。この拡張機能は本当に便利で英語がポンコツな僕にとっては、神々しい限りです。それでは一緒にシェアしていきましょう！Let's share！瞬時に意味がわかるわからない英単語が出てくるとみなさんはどうされてますか？昔、僕はスマホの辞書アプリで調べたり、Google等から調べていました。でも、いちいち翻訳アプリやサイトで調べるのも正直言って面倒です。そこで颯爽と現れたのが拡張機能その名も「Webiloポップアップ英和辞典」！！この拡張機能は、英単語にカーソルを重ねるだけでその単語の意味を教えてくれます。実際にやってみようでは、実際にやってみましょう！本当に簡単ですよ♪まずは拡張機能をインストールこれで設定は終わり！あとは英単語にカーソルを重ねるだけ！簡単っ！補足としては表示された英単語の部分を押すことでより詳しい情報も得る事ができます。もうひとつはスピーカーのアイコンを押すことで英単語の発音が再生されます。読み方がわからない場合は重宝しますね！真似して僕も発音してみます！「エク-スペリエ~ンス♪」←京獅郎英語の長文の翻訳もちろん、単語だけでなく英文もいけます。英文を選択し、ウインドウをクリックするだけです。ただ便利は便利なのですが、長文の翻訳に関しては他の拡張機能がまだ使いやすい感じ。機会があればそちらもご紹介しますね。スイッチひとつで機能オフこの機能は常時発動タイプなので翻訳がいらない時もポップアップが出てきて邪魔になる時があります。この場合は、スイッチひとつでオフに出来ます

こんにちは、京獅郎です！いつもこのブログは結構ボリューム多めで、簡単かつ詳しくをコンセプトにある程度長めで書いているんですが、新たに京ブログ・ショートも書いていこうかと思います。コンセプトはサクッと・読みやすく・役立つ情報を！京ブログと共に、ショートもぜひぜひよろしくお願いいたします。今日も一緒にシェアしていきましょう！YouTubeで音楽だけ聴きたい！YouTubeで音楽だけ聴くって方も結構いるんじゃないでしょうか。音楽を探して聴くのにもすごく便利ですよね！でも動画サイトなのでしかたないですが映像が少し邪魔に感じることもあります。そんな時に役立つのがChromeの拡張機能「Music Mode」これ結構ビックリしますよ！・・・多分音声のみ再生可能な「MusicMode」Music Modeをインストールした状態で、YouYube動画にアクセスします。えっ？なんで米津玄師さんのピースサインかって？ヒロアカが好きだからです！！ピースサイン最高！！ピースサ・・・さて検索かけて、表示されるまでは普通と変わりません。(上記画像)では、そこからYouTubeにアクセスしてみます。MusicModeをオフの場合はもちろん通常のYouTubeの画面ですが、MusicModeをオンにいている場合、音声のみを再生するページに自動で繋がります。このページは動画も、動画に付いている広告やリコメンド、コメントも表示されません。まるで最初から音声ファイルだけそこにあったかのような感じですね。すごっ！ただ最初自動再生するので、いきなり爆音でピースサインが鳴り響いたので相当焦りました(笑)使う際は音量を事前