Google Twitter Instagramを纏めて検索する方法
背景
検索をする際に、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>
コード概要
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を作成しているだけの単純なコードです。
サンプルサイト(GitHub)
Author And Source
この問題について(Google Twitter Instagramを纏めて検索する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/KOJI-YAMAMOTO/items/d79b26c56413e237dee4著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .