背景
検索をする際に、googleを検索して、リアルタイムの情報を取得するためにTwitterとInstagramに同じキーワードを入力して検索をするという煩わしさを感じたことはあるかと思います。
1回の検索ワード入力で複数サイトを同時に検索をしてくれるアプリなどを探しましたが見つかりませんでしたので作成しました。
ただし、実際に検索をするのではなく、検索時のリクエストを作成してリンクをするだけです。
これが出来るだけでも個人的には大変助かるかと思います。
画面イメージ
※ スタイルシートはほぼ適応していないです。
コード
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Google twitter instagram 纏めて検索</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-100445243-8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-100445243-8');
</script>
<style type="text/css">
body {
text-align: center;
font-family: "Nico Moji";
}
#title {
color: #FF8C00;
/*非対応のブラウザでの文字色を設定*/
background: -webkit-linear-gradient(0deg, rgb(166, 248, 177), rgb(0, 119, 255), rgb(171, 0, 251), rgb(10, 9, 10));
/*背景色にグラデーションを指定*/
-webkit-background-clip: text;
/*テキストでくり抜く*/
-webkit-text-fill-color: transparent;
/*くり抜いた部分は背景を表示*/
font-size: 3vw;
margin: 5px;
}
#search {
height: 50px;
width: 70vw;
font-size: 30px;
text-align: center;
}
#btn {
font-size: 30px;
width: 60vw;
height: 30px;
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #668ad8;
/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
#btn:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);
/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
/*影を小さく*/
border-bottom: none;
}
#searchresult {
height: 40px;
width: 30vw;
font-size: 30px;
margin-right: auto;
margin-left: auto;
}
#google,
#twitter,
#instagram {
margin-top: 30px;
}
@keyframes fade-in3 {
0% {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@media screen and (min-width: 767px) {
/*PC用*/
}
@media screen and (max-width: 767px) {
/*タブレット用*/
}
@media screen and (max-width: 479px) {}
</style>
</head>
<body onkeypress="searchenter(event.keyCode)">
<script>
function searchenter(keycode) {
var searchword = document.getElementById('search').value;
if (keycode == 13 && searchword != "") {
search();
} else {
}
}
function search(keycode) {
var searchword = document.getElementById('search').value;
if (searchword != "") {
var element = document.getElementById('google');
element.innerHTML = "<a id= \"googlesearch\" href=\"https://www.google.co.jp/search?q=" + searchword + "\" target=\"_blank\">google-" + searchword + "</a><br>";
var element = document.getElementById('twitter');
element.innerHTML = "<a id= \"twittersearch\" href=\"https://twitter.com/search?q=" + searchword + "&src=typed_query\" target=\"_blank\">twitter-" + searchword + "</a><br>";
var element = document.getElementById('instagram');
element.innerHTML = "<a id= \"instagramsearch\" href=\"https://www.instagram.com/explore/tags/" + searchword + "/?hl=ja\" target=\"_blank\">instagram-" + searchword + "</a><br>";
}
}
</script>
<p id="title">Google twitter instagram 纏めて検索</p>
<input type="search" name="search" id="search" placeholder="キーワードを入力"><br>
<p id="btn" onclick="search()">SEARCH</p>
<div id="searchresult">
<div id="google"></div>
<div id="twitter"></div>
<div id="instagram"></div>
</div>
</body>
</html>
コード概要
Javascriptでinputタグに入力された値を取得して検索用のURLを作成しているだけの単純なコードです。