Help us understand the problem. What is going on with this article?

【簡単】ブックマークレットを使って、口コミを5秒で調べる!!【お手軽】


職場でブックマークレットの話が出てきたものの

え?え?何それ??便利なの??
説明聞いてもイメージ湧かない....

となり、茫然としたので、触ってみることに。

結論

$\huge{めちゃ便利でした😆}$

ブックマークレットって?

ブックマークレットとは、ブラウザのブックマークにJSのコードを登録しておき、
クリックすることで実行できる技術です。

結構前からあったみたいですね。

具体的にどんなことできんの?って方は、
下の実例集みると、想像が膨らみます

実例集

  • URLをHTML形式でコピー
  • URLをMarkdown形式でコピー
  • 日本語を含むURLをエンコードせずにコピー
  • YouTubeを保存する
  • 次/前のページへ
  • ページの読み込み速度を計測する
  • ページのHTMLチェック
  • Webページで使われているフォントを調べる
  • ページのレスポンシブチェック

などなど、便利なブックマークレットが紹介されていますね。

https://psephopaiktes.github.io/pages/bookmarklets/#bookmarklet-4

jsの知識とアイデア次第で、色々できそうです。

口コミ検索を5秒で実装する

ところで、皆さん口コミ調べる時ってどうしてますか?

私は、基本

Twitter です。

Twitter で 「商品名 デメリット」 「商品名 良い」
などで検索することが多いです。

というわけで、今回は、
Twitterで検索を簡単にすること
を目標に作成していきます。

使い方と実装

ブックマークレットの良いところは、
環境構築なし
”ブックマークに登録する”だけで、プログラムが走ることですね。

実装

下記のリンクのボタンを、
ドラッグアンドドロップでブックマークバーに移動させるだけ!

See the Pen bookmarklet for twitter by naoto190131 (@190131start) on CodePen.

5秒で実装できましたね☺️

使い方

こんな形で、ブックマークに保存しておき、

スクリーンショット 2019-11-12 10.19.09.png

ポップアップに、検索したいワードを打ち込めば...

スクリーンショット 2019-11-12 10.12.55.png

Twitterの検索画面で、口コミを検索することができます!

スクリーンショット 2019-11-12 10.14.18.png

便利っ...!

コード

<button>
    <a href="javascript:!function(undefined){
        var q = prompt('単語を入力し、Enterキーを押してください','');
        var preference = ' 最高 ';
        if(q === '' || q === null){window.alert('キャンセルされました');
        }else{window.open('https://twitter.com/search?q='+q+preference+'&src=typed_query');}
        }();">Twitter メリット</a>
</button>

コードはこんな感じ

href属性にjsを書くだけですね。

ブックマークバーに、ドラッグアンドドロップで移動させて使いたかったので
buttonにしてますが、aタグだけでもいいです。

別タブで開かせたかったので、window.open()使いましたが、
同じタブ内での遷移ならwindow.location.hrefにすると良いと思います。

あとはPreferenceを変更するだけで、
悪い口コミも作成できます。

<button>
    <a href="javascript:!function(undefined){
        var q = prompt('単語を入力し、Enterキーを押してください','');
        var preference = ' 最悪 ';
        if(q === '' || q === null){window.alert('キャンセルされました');
        }else{window.open('https://twitter.com/search?q='+q+preference+'&src=typed_query');}
        }();">Twitter デメリット</a>
</button>

今後の課題

Chromeのコンテンツブロックに引っかかるので、
どなたか、回避方法教えてください...

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away