すべてのカテゴリ

みなさんこんにちは。 今回は、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.右上の三点リーダー　⇒　拡張機能

概要表題の通りwebページのhtml要素のXPathをマウスクリック1回でクリップボードにコピーする機能を持つchrome拡張機能を作成しました。XPathは目的のhtml要素を検索・取得したいときに時々使用することがあるかと思います。例えばブラウザからXPathを取得するには、ディベロッパーツールを開いてから要素を探してコピーするので取得したい要素が多い場合は面倒になることがあるかもしれません。また、XPathを取得可能にするような便利なjavascriptの関数はおそらくないと思う(私が知る限りですが)ので自作する必要があります。XPathを構築し取得するにはターゲットの要素タグ名から親要素へ向かって再帰的に探索しながら構築する必要があります。実際のコード実装部分は有料になります。保有機能・ボタンによる機能のON/OFF切り替え・要素にマウスカーソルを合わせるとその要素の色が反転(見やすさのため完全な反転色にせず少しずらしています)、マウスカーソルを外すと元の色へ・右クリックで要素のXPathをクリップボードにコピー(この時右クリックメニューが出ないようにしています。機能をOFFにすると元に戻ります)例例として、以下はココナラの「お知らせ」ベルを右クリックしたときの様子です。要素は分かりやすくするため、マウスホバーすれば色が変わるように設定しています。コピーされたXPathは以下になります。(ブログの禁止ワードに引っかかったので画像です)使用方法・このブログ末尾の項目、コード項目のコードをコピペなどして作成したファイルを同封したフォルダを作って拡張機能を読み込んでください。

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」

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 アプリの開発

こんにちは、京獅郎です。 いろんなサイトやブログを閲覧していると 「この色素敵だなぁ」とか 「この色使いたいなぁ」など 思ったりしませんか？ 自力で似た色を探すのは大変だと思います。 だがしかし！ それは簡単に解決するかもしれませんよ！ 今回、拡張機能紹介の第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をオンにいている場合、音声のみを再生するページに自動で繋がります。このページは動画も、動画に付いている広告やリコメンド、コメントも表示されません。まるで最初から音声ファイルだけそこにあったかのような感じですね。すごっ！ただ最初自動再生するので、いきなり爆音でピースサインが鳴り響いたので相当焦りました(笑)使う際は音量を事前