前回の続き

 

完成形を想像する

 

ひとまず、詳細な仕組みとかアニメーションは置いておいて、ざっくりと完成形の画面のイメージを書き出してみる。

Officeのパワーポイントで簡単に図にしてみた。

考えている機能やアニメーションとしては、

  • ツイート内容(ユーザー名、ID、テキスト)の表示
  • 特定のキーワードから収集したツイートの数の表示
  • ツイートを取得すると、円が中央の向かって吸い込まれる
  • 集まっていく円の色を、ツイートを表示する枠の色は、ユーザーがプロフィールで指定している色
  • 収集したツイートの数が大きくなるにつれて、中央の円も大きくなっていく。
  • RT(リツイート)は、全体のツイートに含むが、枠の中に表示はしない。

といった感じだろうか。

設計しているうちにどんどん追加されたり、削除されたりするかもしれないけど、ひとまず今はここまで。

 

どのような処理を行うのか

Node.js

  1. Twitパッケージを利用して、Streaming APIから特定のキーワードを含むツイートと周辺のデータとを取得する。
  2. fsパッケージを利用して、取得したデータをJSONファイルに出力する。

 

openFrameworks

1.JSONファイルから次のデータを読み取る。

処理に必要なデータは以下の通り。

【ツイート内容の表示】

  • ユーザーID
  • ユーザー名
  • テキスト(本文)
  • ユーザーカラー

【ツイート数のカウント】

  • ツイートの固有ID

【RTかどうかの判別】

  • RTしたツイートに関するデータ

(例)元のツイートのユーザー情報とか

 

2.ツイート数をカウントする。

毎フレームごとにツイートの固有IDを調べ、前のツイートと同一でないとき、カウントを1増やす。

また、新しいツイートを取得したことを知らせる。(たぶん、bool型の変数を使うことになる)

 

3.取得したツイートがRTであるかどうかを判別する。

JSONファイル中のデータにRTされたツイートの情報が含まれている場合と、そうでない場合で判別する。(詳しくは、詳細な設計のところで扱う)

つまり・・・

データの中にRT元のデータがある → RTであると判定

データの中にRT元のデータがない → RTではないユーザーオリジナルのツイート

というふうに判定する。ここもたぶんbool型の変数。

 

4.取得したツイートのデータを記録する。

10個まで記録し、10個以上になったら古いものから更新していく。

(専用のクラスを用意するか、専用の型を作ってしまうか。どちらにしろ配列化できるので迷い中。)

 

5.記録したツイートのデータを元に画面に描画する。

アニメーションするときに必要っぽい処理は、

  • 新しいツイートの取得を知らせるもの
  • 収集したツイート数

くらいだろう。

アニメーションの具体的な処理は、後で考えることにする。データを適切に処理できないとアニメーション作る度にバグとかあってハゲるので、そこの設計を考えてから。

 

実はすでにハゲてしまいそうな事案がある。

面倒くさい問題

JSONファイルから取得するデータの形式

ほとんどが文字列。IDとかはたまに数値だったりするが、openFrameworks(C++)上でエラーが発生する。(たぶん、保持できるデータの大きさ的な問題)

というわけで、openFrameworks上で扱うデータは、ほとんどがstring型になる。

 

16進数(HTMLコード)でさえ文字列になってる

最初から16進数にしておけよ・・・と10回くらいは口に出した。

ユーザーカラーの数値が16進数に由来する文字列になっているので、「16進数もどきの文字列」から「R・G・Bのそれぞれの数値」に変換する。

 

C++において、16進数は10進数の56を

【10進数】56 → 【16進数】0x38

というように、先頭に「0x」をつけないといけないらしい。

しかし、取得したデータは、先頭に「0x」がないし、そもそも数値ではなく文字列の扱いになっているので、別に変換する処理をしなければならない。

 

例えばピンク(255,0,255)を表すカラーコードは、JSONから持ってくるデータの形式だと、「”FF00FF”」となっている。だから、それぞれの桁ごとに分解して、RGB値に変換しなくてはならない。

やればいいことがすでにわかってるので、そこまで難しい問題ではないかも。

 

改行の問題

これはもう絶望的と言っていい。

Twitterの画面上だとさほど気にならなかった改行だが、そのまま何も工夫しないでopenFrameworksで表示するとこうなる。

【いつも見ているTwitterの画面】

改行しなくても、枠の大きさに合わせて、見やすいようになっている。

【openFrameworks上で見ると】

oF側は改行なんて知ったこっちゃない以前に、元データにも改行のコードがないので、このようにはみ出る。

なので、ツイートの行数に柔軟に対応して枠を描画しないといけないし、改行がないツイートに、「”\n”」を挿入していい感じにしないといけない。

これは、こだわりすぎると文章解析(形態素解析?)のレベルにまでいくので、考え中。

 

文字コードの変換

JSONから読み取られる文字コードはUTF8である。

しかし、Windows版のopenFrameworksではShift-JISを使わないと文字化けする。

(ため息)

 

というわけで、次回は変数とかの具体的な話。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Fill out this field
Fill out this field
有効なメールアドレスを入力してください。

メニュー