Google-gravity本当に検索できるようにした話

どうもお久しぶりですAtsu1209です。
今回はGooglegrabityというサイトで実際にGoogle検索ができるようにしたいと思います。

Google grabityとは

Google grabityとは検索欄やロゴが重力を帯びて落っこちてくるお遊びサイトです。

サイトURL

今回やりたいこと

もちろんこのサイトはお遊びサイトなので実際には検索できません。
なので、実際に検索できるようにして 重力要素 + 検索ができるとても面白いサイトにしていきます。

注意

たとえお遊びでもコードを書き換えたものを実際に公開してしまうと、
著作権に引っかかってしまう可能性があるので気をつけましょう。
私はローカルで楽しむ前提で作りました。

方法

方法は至って簡単です。
Google検索はURLに仕掛けがあって、
https://www.google.com/search?q=のq=の後ろに検索したいワードを入れるだけなので
inputの情報をJavaScript側で指定して、open.windowを使ってウィンドウを開けば簡単。

実際に作る

全部で2000行以上あるので、エディターで<input>を検索して探す。

index.html

  <form id="form">
  <input id="q" value="" title="Search" autocomplete="off" type="text" maxlength="2048" class="box2d"><br />
  </form>

あった

ここにJavaScriptを追加します。

index.html

<script>
const form = document.getElementById("form");

form.addEventListener("submit", function (event) {
    event.preventDefault(); 
    const val = document.getElementById("q").value;
    window.open("https://www.google.com/search?q=" + encodeURIComponent(val));
});
</script>

動作チェック

保存して開いてみた
するとしっかりボタンとかが落っこちてきたが検索欄にクソコード 大好きと入力してEnter
するとしっかりGoogleの検索結果が表示されました!

おわり