あとはこれをViewに反映するだけです!!, 最後にDOM操作です。Positiveではないと判定されたtweetの文字列を、それに類似した松岡修造語録new_tweetに書き換えてあげます。 ネガティブな文章は人をネガティブに、ポジティブな文章は人をポジティブに変える力を持っています。 ついでに文字も真っ赤に燃やしてみましょう。, 最初の方で解析した通り、Tweetの文字列はlang='ja'属性がついているdivタグの配下にあります。containsを使ってPositiveではないと判断されたtweetをもつ要素を探してtargetに格納します。 松岡修造オフィシャルサイト。テレビ朝日『報道ステーション』で月曜のスポーツの顔として新天地でさらなる挑戦を続ける。他にも、11代目くいしん坊として『くいしん坊!万才』のレポーターをつとめるなど、現在も幅広い分野で活躍中。 What is going on with this article? 比較の結果、最も類似度の高い名言がcontent.jsにレスポンスとしてメッセージングされています。, さて、これでPositiveではないTweetに変わる松岡修造語録をゲットすることができました! APIはかなりシンプルなので、特に迷うことはないかと思います。 => 「アクセストークン取得 | リファレンス | COTOHA API」, 最後にsendResponse(body.access_token)でAPIのレスポンスからaccess_tokenを取得してcontent.jsに投げ返してあげています。, これで他のAPIを使う準備ができたので、次はTweetsのネガポジ判定をしてみましょう!, content.jsではtweetsとaccess_tokenを取得した状態になっており、get_tweet_sentimentが実行されるタイミングではtweetsからひとつずつtweetを取り出してget_tweet_sentimentにaccess_tokenとtweetを引き渡しています。, 今回もAPIはかなりシンプルですので、とくに難しいところはないです。 => APIリファレンス | COTOHA API(感情分析) "positter deletes negative tweets from your time line. 松岡修造、Kiroroの名曲「未来へ」歌う. 松岡修造 より 【修造 ... 君も世界にチャレンジだ! 2020年07月03日 【修造チャレンジ】(36)Don’t be afraid! jQueryで文字列は要素.text()で抽出することができます。要素の特徴(idとかclassとか)さえわかってしまえば造作もありません。, ということでTwitterのTLの構造を理解するためにbodyタグを抽出してみます!, 「ここにTweetの文字列が表示されます!!」っていうところが実際のTweetの文字列なんですが、深すぎる。複雑すぎる!すごくやめたいと思いました笑, ここは泥臭く構造を辿っていくしかないですね...特出すべきは各Tweetの文字列のspanの直前のdivタグにだけlang="ja"属性がついていることでしょうか。これをキーワードにして属性を取り出し、その中のテキストをtext()メソッドを使って取り出してみます。, これで表示されているTweetの文字列を配列で関数の呼び出し元に返してあげるプログラムを組むことができました。, このtweetsをCOTOHA APIで解析するために次はアクセストークンの払い出しを実行します。, ここからはCOTOHA APIと通信を行っていくのですが、CROBが効いてしまうのでcontent.jsからbackground.jsにメッセージを送り、background.js経由でCOTOHA APIを利用するようにします。, content.jsからはcontentScriptQuery: "get_access_token"をキーワードにしてメッセージを送ります。, background.jsでは、chrome.runtime.onMessage.addListenerでメッセージを受け取ります。requestの中に先ほどのcontentScriptQueryといった引数を受け取ることができ、sendResponseにデータを入れることでメッセージをお返しします。, APIはfetchを使って実行しています。 Non è possibile visualizzare una descrizione perché il sito non lo consente. 今回はChrome拡張のアイコンをクリックしたら処理が実行されるようなアプリケーションを検討しているので、以下のようにmanifest.jsonを記述します。, content_scriptsは読み込むjsファイルとそれを読み込むページを定義しています。 使い方は「Fetch を使う - Web API | MDN」などを参考に。 感情分析結果はPositive, Neutral, Negativeの3種類から判定されますが、今回はPositiveなTweetであふれかえすのが目的なのでNeutralとNegativeを松岡修造語録へ変換する対象とします。, そのため、content.jsでも!= "Positive"として、Positiveでなければその次のget_similar_shuzo_quoteに進むようにコーディングしています。, 次に、Positiveではないと判定されたtweetに対して、一番内容の近い松岡修造語録を取得する関数を作っていきます。 sentenceに対象の文章を与えるだけで、その文章の感情分析や感情を強く感じる単語を抽出してくれます。レスポンスとして、result.sentimentでその文章が『Positive』なのか『Negative』なのか『Neutral』なのかを教えてくれます。, content.jsから送っているtweetを検査対象として、sendResponseで感情分析結果をcontent.jsに返しています。 ", // 現在開いているページのTLからTweetsの内容を取得(`get_tweets`), // COTOHA APIのアクセストークンを取得する(`get_access_token`), // 取得したtweetのネガポジ判定をする(`get_tweet_sentiment`), // ポジティブでないtweetと近しい内容の松岡修造語録を取得する(`get_similar_shuzo_quote`), // ポジティブでないtweetの内容を松岡修造語録に変換する(`change_tweet`), "css-1dbjc4n r-18u37iz r-1pi2tsx r-13qz1uu r-417010", "{"n":"新しいツイート","Cmd Enter":"ツイートを送信","m":"ダイレクトメッセージを作成","/":"検索","l":"いいね","r":"返信","t":"リツイート","s":"ツイートを共有","b":"ブックマーク","u":"アカウントをミュート","x":"アカウントをブロック","Enter":"ツイートの詳細を開く","o":"画像を開く","?":"ショートカットのヘルプ","j":"次のツイート","k":"前のツイート","Space":"ページ下へ移動",".":"最新ツイートを読み込む","g h":"ホーム","g e":"話題を検索","g n":"通知","g r":"@ツイート","g p":"プロフィール","g l":"いいね","g i":"リスト","g m":"ダイレクトメッセージ","g s":"設定","g b":"ブックマーク","g u":"プロフィールページを見る...","g d":"表示設定"}", "css-1dbjc4n r-1habvwh r-16y2uox r-1wbh5a2", "css-1dbjc4n r-150rngu r-16y2uox r-1wbh5a2 r-1obr2lp", "css-1dbjc4n r-1oszu61 r-1niwhzg r-18u37iz r-16y2uox r-1wtj0ep r-2llsf r-13qz1uu", "css-1dbjc4n r-14lw9ot r-1tlfku8 r-1ljd8xs r-13l2t4g r-1phboty r-1jgb5lz r-11wrixw r-61z16t r-1ye8kvj r-13qz1uu r-184en5c", "css-1dbjc4n r-1jgb5lz r-1ye8kvj r-13qz1uu", "css-4rbku5 css-901oao r-4iw3lz r-1xk2f4g r-109y4c4 r-1udh08x r-wwvuq4 r-u8s1d r-92ng3h", "padding-top: 0px; padding-bottom: 9800px;", "css-1dbjc4n r-my5ep6 r-qklmqi r-1adg3ll", "css-1dbjc4n r-1loqt21 r-1udh08x r-o7ynqc r-1j63xyz", "css-1dbjc4n r-1iusvr4 r-16y2uox r-5f2r5o r-m611by", "css-1dbjc4n r-1awozwy r-18kxxzh r-5f2r5o", "css-1dbjc4n r-1iusvr4 r-16y2uox r-1777fci r-5f2r5o r-1mi0q7o", "css-901oao r-hkyrab r-gwet1z r-a023e6 r-16dba41 r-ad9z0x r-bcqeeo r-bnwqim r-qvutc0", "css-901oao css-16my406 r-gwet1z r-ad9z0x r-bcqeeo r-qvutc0", "css-1dbjc4n r-18u37iz r-1wtj0ep r-156q2ks r-1mdbhws", "css-1dbjc4n r-aqfbo4 r-zso239 r-1jocfgc", Microsoft Ignite 2020の振り返りも「Azure Rock Star Community Day」, Chrome 拡張機能でタイムライン上のツイートを「ばぶ」らせてみた - Qiita, Manage Events with Background Scripts - Google Chrome, Chrome 拡張機能で background scripts から content scripts にメッセージを送信する - to-me-mo-rrow - 未来の自分に残すメモ -, you can read useful information later efficiently. ネガティブなTweetは松岡修造さんのお言葉から同等の意味のものを拝借することで伝えたいことを崩さずにTLをポジティブな空間にすることができるかもしれません。 今回は5つの文章との比較が全部終わったあとで類似度を比較して一番近い名言を決める、ということがしたかったのですが、javascriptは非同期に処理を勧めてくれるおかげで、他の言語を書いているイメージのまま書くとAPIのレスポンスが返ってくる前に次の処理が進んでしまうなんてことがありました。, これを回避するために、今回はPromiseとPromise.allを使っています。 COTOHA APIの類似度算出APIを利用しますが、これも大変シンプルで2つの文章(s1, s2)を与えるだけでその2つの文章の内容の類似度を教えてくれます。 => APIリファレンス | COTOHA API(類似度算出), 松岡修造さんのポジティブな名言は色々とあるのですが、COTOHA APIの無料枠では1日1000リクエスト/APIまでと決められていることもあり、5つに厳選してみました。, 100回叩くと壊れる壁があったとする。でもみんな何回叩けば壊れるかわからないから、90回まで来ていても途中であきらめてしまう。, みんな!!竹になろうよ。竹ってさあ台風が来てもしなやかじゃない。台風負けないんだよ。雪が来てもね。おもいっきりそれを跳ね除ける!!力強さがあるんだよ。そう、みんな!!!竹になろう!!!バンブー!!!, もっと熱くなれよ!熱い血燃やしてけよ!!人間熱くなったときがホントの自分に出会えるんだ!!, 一番になるっていったよな?日本一なるっつったよな!ぬるま湯なんかつかってんじゃねぇよお前!!, どれも元気が出ますね。 そしてそのtargetに対してtextで文字列を松岡修造語録に変え、cssでテキストカラーを真っ赤に変えてみました。, さて、ここまでできたので、Chrome extensionをchrome://extensions/からインストールして動作確認をしてみます! Positiveと判断されなかったtweetとこの5つの名言をひとつずつ類似度算出APIで比較し、最も類似度の高かった名言を返却する関数を作ります。, content.jsからはPositive判定されなかったtweetをメッセージングします。. これはかなり試行錯誤しました...javascript不慣れなもので非同期処理がかなりつまづいた... 類似度算出APIについては先ほどものべた通りとてもシンプルです。APIを叩く部分をget_similarityに関数化しました。 できればポジティブなツイートに囲まれて幸せなツイッターライフを満喫したいところです。, ネガティブなTweetは松岡修造さんのお言葉から同等の意味のものを拝借することで伝えたいことを崩さずにTLをポジティブな空間にすることができるかもしれません。, ということでCOTOHA APIを使ってポジティブでないTweetを似た意味の松岡修造語録に書き換えちゃうChrome拡張機能を作ってみたいと思います。, COTOHA APIはNTTコミュニケーションズさんが提供する自然言語処理・音声処理APIプラットフォームです。, 今回はその中でも『感情分析API』を使ってポジティブではないツイートを検出し、『類似度算出API』を使って最も近しい松岡修造語録を見つけたいと思います。, Chrome拡張機能の作り方のベースは「Chrome 拡張機能でタイムライン上のツイートを「ばぶ」らせてみた - Qiita」を多大に参考にさせていただきました。, Chrome拡張機能の基本的な設定や情報を記載するmanifest.jsonを作成します。 By following users and tags, you can catch up information on technical fields that you are interested in as a whole, By "stocking" the articles you like, you can search right away. 2020/10/16 07:34 Written by Narinari.com編集部 ツイート. ATPツアーでシングルス1勝(日本人男子初のATPツアーシングルス優勝)、ダブルス1勝を挙げた。 1995年ウィンブルドン選手権男子シングルス で日本人男子として62年振りに グランドスラム ベスト8に進出した人物である。� Help us understand the problem. 他の方のtweetを出すのもあれなので自分のアカウントのプロフィールページでやっていますが、トップページでもどうように動きます。, 各tweetに対して非同期で処理を実行しているのでAPIの処理などが終わったtweetから反映されていくんですね。, あんなにネガティブだった僕のTLをCOTOHA APIと松岡修造さんのおかげでこんなにもポジティブで熱いTLに変えることができました。 類似度のところは毎回 tweets x quotes 回API叩くのも無駄ですね...Doc2Vecとかならうまくいくのかな...(初心者). 今回はTwitterのページに限り、js/jquery.min.jsとjs/content.jsを読み込みます。これらのファイルは後々作成します。, backgroundはバックグラウンドで動くjsを定義しています。今回はjs/background.jsを読み込みます。 細かい使い方は「JavaScriptのPromise - Qiita」を参考にさせていただきました!, Promise.allのおかげで、5つの名言とtweetの類似度比較が全て終わってから類似度の比較を行うことができるようになっています。 松岡修造、Kiroroの名曲「未来へ」歌う. Why not register and get more from Qiita? 突然ですがみなさんのTLはポジティブですか?たまにはネガティブなツイートも流れてきますよね。, 文章の力は偉大です。 persistentをfalseに指定することで特定のイベント時のみ起動するようになります。(これをしないとずっとバックグランドで処理が動いちゃうので非推奨です:Manage Events with Background Scripts - Google Chrome), permissionsは利用できる外部APIの穴あけを定義する箇所です。今回はCOTOHA APIのbase urlを設定しておきます。base urlは, まずはjQueryを使ってささっと開発をしたいので、公式HPからファイルをダウンロードしてjs/jquery.min.jsとして保存します。, backgroundでアイコンクリックを検知して、content_scriptsにそれを通知してあげます。, chrome.browserAction.onClicked.addListenerでChrome拡張のアイコンがクリックされたイベントを検知して、chrome.tabs.sendMessageでcontent_scriptsにtab.idとclickedというメッセージを送信しています。, content_scriptsでこのclickedというメッセージを受け取った場合の処理をコーディングしていきます。, ひとまずそれぞれの処理の詳細はおいておいて、backgroundのメッセージを受け取って、それぞれの処理を実行する外形を作ります。, かなり段階的になってしまっていますが、内容自体は単純です。あとは5つの関数を定義していくだけです。 メッセージのやりとりについては「Chrome 拡張機能で background scripts から content scripts にメッセージを送信する - to-me-mo-rrow - 未来の自分に残すメモ -」の記事も参考にさせていただきました。, get_tweetsはTLからTweetを抜き出してくる機能にします。