まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:twitter

以前にも似たようなものを何度か作ったことがあったのですが、その最新改良作品です。 ツイッターでのつぶやき内容を元に自分の性格を分析して、その内容が時間とともにどのように変化していくか、を視覚化するというものです。

実際に自分の3月21日時点でのツイートを元にためしてみた結果がこちらです。なお現時点でスマホで表示する場合はレイアイトが最適化されていないため画面を横にして御覧ください:
https://personality-transition.mybluemix.net/transition/6f24cd50fa6f528cdd3162aadb716b03

2020032101


画面は最上部にシェア用のアイコンが並んだ下に性格を分析した本人の twitter アイコンと名前が表示され、その下に IBM Watson Personality Insights API を使った分析結果の「性格分析」と「消費行動動向」が表示されます(「消費行動動向は初期状態では省略表示されているので、内容を表示するには三角形部分をクリック(タップ)してください)。

性格分析はビッグ5と呼ばれる5つの性格要素(知的好奇心、誠実性、外向性、協調性、感情起伏)に加え、ニーズ(共感を呼ぶ度合い)&価値(意思決定に影響を及ぼす要素)という7つのカテゴリを更に細分化した結果がレーダーチャートで表示されます:
2020032102


また消費行動動向はその性格から結びつく消費行動の度合いが表示されます(色の濃い方がその要素が高く、薄い方が低い、という意味です):
2020032103


画面最下部にはスライダーが表示されています。初期状態では一番右にセットされていて、これは時間的に一番新しい分析結果が表示されていることを意味します:
2020032104


このスライダーを左に移動していくと少しずつ前の(古い)性格分析結果や消費行動動向が表示されていきます。自分の性格が時間とともにどのように変化していったのか/変わらない要素は何か といった内容がわかるようになる、というものです:
2020032105


このページの画面右上のリンクから皆さんのツイートでも試すことができます。興味ある方はぜひ挑戦してみて、よろしければその結果を SNS でシェアしてみてください:
https://personality-transition.mybluemix.net/transition/6f24cd50fa6f528cdd3162aadb716b03



以下、このサービスを実現する上での技術要素の説明です。なおソースコードは公開していますので興味ある方はこちらも参照ください。なお IBM Cloud を使って動かす想定のコードとなっており、後述の IBM Watson やデータベース機能含めて無料のライトアカウントの範囲内でもデプロイ可能な内容となっています:
https://github.com/dotnsf/personality_transition


このサービスは Node.js で実装していますが、サービスを実現する上で利用しているライブラリは大きく3つです。1つ目は Twitter のログイン認可を実現するための OAuth 、2つ目は認可したユーザーのツイートを取得するための Twitter API 、そして3つ目は取得したツイート内容から性格分析を行う IBM Watson Personality Insights API です。

なお、ここで使っている IBM Watson Personality Insights は IBM Cloud から提供されている IBM Watson API の1つで、テキストの内容を使用単語レベルで分析し、そのテキストを記述した人の性格や、その性格毎の購買傾向を取得する、という便利な API です。日本語を含む5ヶ国語に対応しています。詳しくはこちらも参照ください:
https://www.ibm.com/watson/jp-ja/developercloud/personality-insights.html


おおまかな処理の流れとしては、まず OAuth2 で Twitter にログインしてもらうことで、そのユーザーの権限で Twitter が操作できるよう認可します。そして Twitter API でユーザーのタイムライン内容を取得します。 この時に直近の 200 ツイートを取得します。この 200 件のツイートを投稿時刻の順に 40 件ずつ5つのブロックにわけます。そして各ブロック毎のツイート内容をそれぞれまとめて IBM Watson Personality Insights API を使って性格分析を行います(つまり1回の処理で Twitter のタイムライン取得 API を1回、IBM Watson Personality Insights API を5回実行します)。このようにすることでツイートの内容を時間で区切って直近のものから少しずつ時間を遡りながら5回ぶんの性格分析を行い、その結果を上述のようにスライダーバーで時間ごとに表示/非表示を切り替えることで実現しています。

機能的にはこれだけでもできるのですが、このサービスでは「分析結果をシェア」できるようにしました。シェアするためには(シェアされた人はツイートを取得せずに分析結果を見ることができる必要があるため)分析した結果をデータベースに格納する必要があるため、データベースも併用しています(あくまで分析結果を保存するためのもので、ツイート内容は保存していません)。

また上述のような仕様であるため、仮に Twitter 上で非公開アカウントとしているアカウントに対しても(本人の権限でツイートを取得することになるので)性格分析を行ったり、その結果をシェアすることができます(公開許可されていない人や、そもそも Twitter アカウントを持っていない人でも分析結果を見ることができます)。ただしあくまで分析結果だけがシェアされるのであって、ツイート内容がシェアされるわけではない点はご安心を。


このデモサービスでは Twitter のツイートを元に性格分析を行っていますが、必ずしも分析元はツイートである必要はありません。1人の人が書いた文章であればよいので、メールなり、社内掲示板なりからテキストを取得することができるのであれば理論上は可能です。ただし1回の性格分析におけるテキストの単語数が少ないと充分な精度がでない結果となることも考えられます。ある程度の単語数が含まれるテキストを取得できる必要があります(このサービスでは上述のように 40 ツイートぶんのテキスト内容をひとまとめにして分析しています)。

また IBM Watson Personality Insights API の特徴でもあるのですが、単にテキスト内容とその単語傾向から性格を分析するだけでなく、購買行動への傾向と合わせた実行結果を得ることができます。つまりまだ何も買っていないユーザーに対してでも、その購買傾向を調べた上でレコメンドを出したり、特定興味分野の広告を出したりする、といった使い方にも応用ができるもので、特に今回のデモではその時間変化にも着目できるようにしています。応用の幅が非常に大きな API であると考えていて、その一部が伝わればいいと思っています。

 

2017年のマンホール界(?)は、マンホールサミットマンホールナイトといった、定番となったイベントだけでなく、各種メディアでの紹介やグッズの発売など、例年以上に盛り上がった・・・いや盛り下がった感があります(マンホールだけに)。

そんなマンホールの盛り下がりの様子をウェブマーケティング的に、具体的にはグーグルトレンドツイッターを使って1年間の経緯を調べてみました。なんとなく「グーグルトレンドの使い方」みたいな内容になっています(苦笑)が、まあ専門分野ではないということでご容赦ください:


まずは単純に「マンホール」が検索された回数の推移をグーグルトレンドで調べたみたらこんな感じでした:
2017122401


年末の山は 12/3 の週で、これはまさに「マツコの知らない世界」でマンホールが取り上げられたタイミングと一致しています。テレビメディアの影響の大きさを改めて感じますねー。

で、問題はその時をも上回る 4/30 週のトレンドスパイクです。このタイミングはマンホールサミットやマンホールナイトではないし、韓国ドラマ「マンホール」の放映にもまだ早い時期です。ではこのタイミングで「マンホール」が多く検索された理由は一体・・・

というわけで、この期間を更に詳しく調べてみました。5/3 にスパイクがあるのか・・・
2017122402


そして、この期間の関連キーワードを見ると「マンホール カード」となっていました:
2017122403


マンホールカードの発表や配布のタイミングではなかったはずなのですが、マンホールカードの検索回数が急上昇した日だったようです。「マンホール」と「マンホールカード」の検索トレンドを調べてもほぼ一致しているように見えます・・・:
2017122404


改めて5月3日周辺の「マンホール」または「マンホールカード」が検索された記録をツイッターなどで調べて(※)、、、やっと原因がわかりました! この日、フジテレビの「情報プレゼンター とくダネ!」で市川市のマンホールカードが配布された様子が特集された放送されたいたようです:
「情報プレゼンター とくダネ!」 2017年5月3日(水)放送内容


そしてその結果が上記の検索スパイク、となったようでした。朝の情報番組、恐るべし!


※ちなみに、ツイッターで期間を指定して検索するには、公式ページの検索ボックス内に
since:2017-04-30 until:2017-05-07 マンホールカード
のように指定して検索すると実現できます。ちなみに上記例は 2017-04-30 ~ 2017-05-06 内に「マンホールカード」がツイートされた様子を検索しています。since の日付は指定日を含み、until の日付は指定日を含まないようです。


とりあえず、こんな感じでグーグルトレンドツイッターの検索機能を使って簡単にキーワードの検索トレンドを調べることができます。年の瀬にちょっとしたウェブマーケティングの勉強も兼ねて、皆さんが興味ある物事や、出来事、イベントなどの1年間のトレンドとその背景を調べてみてはいかがでしょう?

このブログでも紹介させていただいたのですが、最近「手書きイラストから『いらすとや』のイラストを検索するアプリ」を作りました:
手書きイラストで「いらすとや」のイラストを検索する




この時の技術を応用して、「ツイッターに手書きイラストを添付してつぶやく」ことができる「イラツイ」というアプリを作って、UI/UX とかまだ全然ダメダメですがとりあえず動くようになったのと、自分が使っていて面白かった(大事)ので公開してみました:
http://iratwi.mybluemix.net/


PC のブラウザからも(マウスやタッチパッドで)使えるつもりですが、一応スマホブラウザからの利用を想定して画面を最適化しています。PC やスマホのウェブブラウザで上記の URL (http://iratwi.mybluemix.net/) にアクセスすると、こんな↓画面になります。画面左上の "t" マークをクリックして、ご自身の Twitter ID でログインしてください:
IMG_0745


↓こんな感じの画面になったら(左上が自分の Twitter アイコンになったら)ログイン成功です。画面は「イラツイ」と「一覧」という2つのタブから構成されています。デフォルトの「イラツイ」でキャンバス(画面中央の白い部分)にマウスや指などでイラストを手書きしてください。線の色や太さはキャンバスの上から選択できます:
IMG_0746


例えば試しにこんな感じのを書いてみました。このイラストをツイートするには画面下部の "Tweet" をクリックします:
IMG_0742


するとツイートメッセージを入力する画面が表示されます。ここに適当にメッセージを入力して、「ツイート」ボタンで投稿します:
IMG_0743



「一覧」タブに切り替えると、自分のツイートした内容が新しい順に表示されます。先程ツイートしたスマホのも無事投稿できたようです(この画面をもう少し有効活用したいなあ、とは思ってます):
IMG_0744


実際のツイッタークライアントからも投稿されていることが確認できます:
2017051401


と、まあこんなシンプルな感じです。小さな集まりの中で画力対決みたいな企画を開く際にも(ハッシュタグを統一しておけば)簡単に集計できるし、意外と使えるかな、、と評価しています。自分自身は「絵心ないエンジニア」ですが、落書きは嫌いじゃないので、意外と楽しんで使えそうです(自信作の「宇宙選択ヤマト」です):
2017051400


今回はツイッタークライアントとして作りましたが、実用面を考慮すると LINE とかのほうが使われる機会多そうかなあ、とか、インスタとはユーザー層が違いそうだなあ、、とか考えてます。 まだ「とりあえず動く」レベルで公開しただけなので、使っていただける皆さんからの要望などあればいただきたいです。


マンホールマップに「スマホからもっと簡単に投稿できるようにしたい」という要望に応える新機能を用意しました。具体的には Twitter から投稿可能にしました。というわけで、以下の機能を使う前提として、スマホに Twitter アプリが導入されている必要があります。


また、この機能を使うには、Twitter で @Manholemap_Bot をフォローしてください( #manhotalk_bot と似ていてややこしいですが間違えないでくださいw)。この機能のために作成した新しいボットのアカウントです:
2017030801


試しに三鷹のこのマンホールを投稿してみることにします。この画像がスマホの中に保存されているものとします:
mitaka


お持ちの各種スマホ(やPC)から、フォローした上記アカウントへのメンションでマンホール画像を送付してください。メンションとはメッセージの頭に @Manholemap_Bot (大文字小文字は区別しないので、全て小文字でもOKです)を付けて、画像を添付して投稿してください:
IMG_0365


基本的にスマホ側での作業はこれだけで投稿できます。以下はPCでの作業を想定しています。少し(最大5分)待つと、投稿した画像がマンホールマップに反映されます:
2017030802


投稿した本人(と同じ Twitter アカウントでログインした状態)がその画像ページにアクセスした場合は編集ボタンが表示され、投稿の編集が可能になります:
2017030803


位置やテキストなど、必要に応じて編集して、最後に「更新」します:
2017030804


残念ながらまだいくつかの制約事項があります:
(1) テキストを同時にツイートできない
(2) 元の画像に位置情報が含まれていても反映されない(Twitter の仕様)

色々調査しながらにはなりますが、今後のアップデートで少しずつ便利にしていくつもりです。


なお、この機能はアプリケーション開発者向けに公開しているマンホールマップ API を使って作成したものです。誰でも使えるものなので、興味をお持ちの方はこちらから仕様書をどうぞ:
http://manholemap.juge.me/dev.jsp



Node-REDnode-red-node-twitter ノードを使って、ツイッターのリアルタイム検索を行い、その結果を表示するウェブアプリケーションを作ってみました。Node-RED 環境に node-red-node-twitter ノードを追加することで以下の作業が可能になります。或いは IBM Bluemix から Node-RED スターターを使って作成した環境であれば、はじめから同ノードが組み込まれているため利用可能です。

まずは Node-RED のキャンバス内に以下のようにノードを配置します:
balloon_nodered


Twitter のノードにはリアルタイム検索を行うキーワードを指定しておきます。以下の例では "iPhone" というキーワードで Twitter 内をストリーム検索するように指定しています:
2017020501


そして WebSocket 出力ノードでは出力先を /ws/tweets に指定しています。ここは任意の文字列でもいいのですが、後述の HTMLテンプレートの内容が "/ws/tweets" の WebSocket を監視するような内容になっているので、これらの内容を一致させる必要があります:
2017020502


また HTTP 入力ノードでは GET の /tweets を指定しています。つまりウェブブラウザで /tweets というページを参照した時にここで定義するページ内容が表示されるようにしています:
2017020503


その際のページ内容をこちらのテンプレートノードで定義しています。以下のように HTML が指定されており、それがそのまま出力されます:
2017020504


このテンプレートノードの中身は、こちらの template ファイルの内容をそのままコピー&ペーストしてお使いください:
https://github.com/dotnsf/balloon_tweets


※なお、上記で紹介したのとまったく同じノード構成をこちらに用意しておきました。自分でノードを構成しなくても(単に動かしたいという目的だけであれば)この JSON ファイルの内容を Node-RED にインポートして使っていただいてもかまいません:
http://dotnsf.blog.jp/balloon_tweets.json


ノード構成の準備ができたら、Node-RED 画面右上のボタンでデプロイします:
2017020505


デプロイが成功するとここで定義したノードが動き出し、指定したキーワード(今回の場合は "iPhone")で Twitter のリアルタイムツイート検索が行われます。該当するツイートは画面右の debug タブ内に次々と表示されていきます:
2017020506


この様子をもう少し見やすくしたのが HTML テンプレートです。Node-RED と同じホストを指定して、http://(Node-RED のホスト)/tweets をウェブブラウザで開くと、検索されたツイートが画面内に次々と吹き出しを伴って表示されていく様子を確認できます:
2017020500


実際にツイートが次々と追加されていく様子はこちらの動画を御覧ください。"iPhone" くらいに頻度の高いワードで検索すると、こんな感じのスピードでツイートされている、というのが分かる動画になっています:




このページのトップヘ