このポストは、私が最近作成したシンプルで楽しい検索エンジンアグリゲーターツールについてです.私がどのようにそれを作って、コードのいくつかを議論するかについて話します.

背景🐲

誰かが私に便利で楽しい検索ツールを構築するよう求めた.
ちょうど見たところだWish Dragon Netflixで
中国の龍の画像は、名前とデザインに影響を与えた.
私はチャンスをJavaScriptの不慣れな領域を学ぶために-オープニングタブを使用します.
VueはJSのイベントとデータを扱うための自然な選択のようでした.それが代わりに反応で造られるならば、それは類似しているようです.

Webアプリ🐉

私は数時間で一緒にそれを置くと私はあなたが使用できるオンラインツールとして検索ドラゴンを発表してうれしいです.

プレビュー

検索を行う

「開く」タブを参照してください.

ウェブサイト

https://michaelcurrin.github.io/search-dragon/

何をするか🏮

それは、GoogleやYahoo、ビング、Duckduckgo、およびYandexを含む人気のある検索エンジンからの集計を検索します.何らかの理由で、1つのツールを使用してバイアスされることなく、それぞれからの結果を比較したり、検索のバランスを気にする場合.
アプリをコピーして複数のウィンドウで検索を貼り付ける保存するためにいくつかの自動化を提供します.あなたの検索クエリを一度入力することができますし、タブを各検索エンジンのために開かれます.
次に、新しい検索クエリを実行し、既存のタブが再利用されます.

何が建てられたのですか。⛩

私は私のウェブサイトのほとんどをホストするgithubとgithubページを使用します.
このプロジェクトはJavaScriptとVue フレームワーク.しかし、ノードやビルドステップを使用しない.マイミーVue Frontend Quickstart テンプレートと情報がどのように動作するかについて.

どうやって動くの？🔍

アプリのコアは3部です:

ユーザのクエリをキャプチャinput 要素テキストボックス.

ユーザーのクエリに基づいて、各検索エンジンの検索URLを作成します.

ユーザーが送信すると、JavaScriptを使用してタブ内の各URLを開きます.

ビルドのURL

これは、Webアプリケーション内のクエリのURLを構築するのは簡単だった.
インmain.js , ベースURLを設定し、URLエンコードされたクエリを追加します.このような

const bingUrl = `${BING_BASE_URL}?q=${q}`;
// https://www.bing.com/search?q=my+search+query

スペースのプラス記号の使用に注意してください.の符号化%20 も動作しますが、プラス記号は読みやすく、いくつかのウェブサイトが好意的です.
つの検索エンジン使用q クエリパラメータとして.その中の一つがtext .

タブを開く

JavaScriptの使い方Window.open ブラウザ機能は、ユーザーの複数のタブを開きます.JSはWindowsの周りです、しかし、幸いにも、彼らは新しいウインドウとしての代わりに同じブラウザーウインドウでタブとして開きます.
与えられたウィンドウ名でURLを開いて、同じタブで異なるURLを開く例です.

window.open("https://dev.to", "devTo");

window.open("https://dev.to/michaelcurrin", "devTo");

提出イベント

訪問者が検索ボタンをクリックすると、ユーザーの複数のタブを開く機能が実行されます.
Enterキーを押すと、検索も実行されます.
vueでは、このようなイベントリスナーを設定します.

@keyup.enter="myFunction"

私はHTMLとVueで「フォーム」アプローチを使用することができました、しかし、特に1つの入力だけがあるので、私が使用したより単純なアプローチは細くなりました.

レポ🔥

Githubのレポです

ミケールカリン / 検索ドラゴン

メタ検索エンジン🔍 🐲

検索ドラゴン🔍 🐲

The meta search engine

プレビュー

Webアプリケーション

すべての検索エンジンを検索するときに、新しいタブのビューが開きました.

Webアプリを使う

クエリを一度に入力し、一度に複数の検索エンジンを検索します.タブの制御を失うことはありませんので、各サイトのタブを再利用する.

サイトの指示に従ってください.

ドキュメント

許可

発売中MIT そば@MichaelCurrin .
View on GitHub
コードベースは単純です.

index.html - 静的コンテンツ.

main.js - ユーザーの相互作用と構成データに基づいて動的コンテンツ.

styles.css - スタイリング.

なしpackage.json or node_modules ! 私はCDNから直接私のJSのインポートを行うことができるように現代のESモジュールアプローチを使用しました.

import { createApp } from "https://unpkg.com/[email protected]/dist/vue.esm-browser.prod.js";

私はすべてのコンテンツを入れなかったmain.js . JSが無効になっているか、検索エンジンが私のサイトを這うなら、それはほとんど空白であるかもしれません.したがって、静的なHTMLであることができる内容は静的HTMLとして残されます-これは、ユーザーの荷積み経験とSEOランキングを改善します.

クレジット📷

写真でKumiko SHIMIZU on Unsplash