Google Twitter Instagram을 모아서 검색하는 방법

19531 단어 트위터Instagram검색검색google

배경



검색을 할 때 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을 작성하는 단순한 코드입니다.

샘플 사이트(GitHub)



htps : // 코지야마모토기기 b. 기주 b. 이오/세아 rchG치/
wikipedia 가챠 Bot을 만들려고했습니다.
Twitter의 API 심사에 떨어졌다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage