これはソツケンですか？

NBUゆるゆるかれんだー Advent Calendar 2021 https://adventar.org/calendars/6491

12日目の記事

イントロダクション

まずはこちらの動画をご覧ください。

00:00:42 Tweet Wordcloud の部分だけで結構です。

概要

グラフィックスファイルの保存形式SVGは中身がXMLで定義された文書ファイルなのでテキストエディタで作成・編集が出来ます。

イントロに掲載した動画の42秒からのテキストアニメーションはテキストエディタ Visual Studio Socde 　で手作業で作りました。

SVGはadobe illustratorなどの画像編集ソフトで扱うとが出来ます。ベクター形式の静止画像を記録できるだけでなく、アニメーションの記録もできます。

参照：　2020年までの担当科目「プログラミング入門　第13回　Webページを作成してアニメーションロゴとGoogleMapとYoutubeを載せる」

PVは動画編集ソフトfilmoraで編集しています。filmoraはSVGアニメーションを扱うことができないため、SVGアニメーションをPNGアニメーションに変換しました。

WordCloudの生成とファイル形式の変換はPythonを使いました。

作業結果

SVGのコード（XML）はGoogle Site（このWebのサービス）にも埋め込めるようです。

以下のアニメーションはWebブラウザがレンダリングして動かしています。フォントや画像の画角はブラウザに依存します。

※下の画像はアニメーションしていないかもしれません。ページを読み込むとすぐに再生が開始するためです。ページを再読み込みしてみて下さい。

※ 動画ではないので文字をマウスで選択できます。

PNGアニメの動画ファイルはGoogle Siteに載せられませんでした。でもSVGなら埋め込めるようです。

ついでにタイトルロゴもSVGなので載せてみます。

こちらはInkscapeで作成しました。テキストをベクトル化してあの花っぽくいじってあります。

※ベクトルデータなので文字単位の選択はできません。

作業工程

まずWordCloudの分析対象として自分の全Tweetを使うことにしました。

Twitterから一度に取得できるTweetには上限があるようなので、Twilogを使うことにします。私は2009からTwitterを利用しているのですが開始当時からTwilogにTweetを保存してあります。

TwilogからダウンロードしたファイルはこんなXMLファイルです。

Twitter始めた頃のも見れて楽しいｗ

行数は７５万行も有りますが、１Tweetに5行記録しているのでTweet数は15万回という事です。

このXMLをPythonで処理してWordCloudの「静止画」SVGを作ります。

ここで生成したSVGを手作業で編集して「アニメーション」SVGにしています。

WordCloudの生成

Pythonのコードを載せておきます。

コード解説

　参考にした記事や制作過程はこちらをどうぞ　https://twilog.org/_kobashi/date-211027

1～29行　ネットの記事を真似てTweetを整形、ハッシュタグやURLや絵文字などを除去

31～64行　tweetを単語にばらす。janomeという形態素解析エンジンを利用

51行目　wordcloudに使う単語を　名詞　に絞る。動詞　形容詞　は使わない。

ここまでの処理結果をCSVファイル（words.csv）に書き出す。（以前に処理済みのCSVファイルが有れば再利用する。これはWordCloudの生成を何度かリトライして調整することが予想されたので時間短縮のため）

67～85行　wordsリストに保存されたTweetの単語を出現頻度を求めて多い順に並べ替える。コメントアウトしてあるが、これは処理結果を pwords.csvに記録してあるので、一度実行した後でコメントアウトした。以下の行ではpwords.csvを読み込んで処理するのでこれでＯＫ

初期のpwords.csv

101～295行目

初期の単語の出現頻度では、常用文字が多くてピントがボケて面白いWordCloudにならない。

そこで不採用ワードを登録して、ゼミ募集ＰＶに出てくる単語を抑制した。

ここを観察すると私がよくTweetする単語が見て取れて面白い。

WordCloudを繰り返し生成しながら不採用ワードをちまちま登録していく作業を続けた。

かなりの時間を消費した。

埒が明かないので、不採用ワードの登録を打ち切って、逆に押し込みたい押しワードを登録することにした。

初期の出現頻度リストを観察して、めぼしい単語を拾い出す。

拾い出した単語のpwords.csv

88～94行目

　WordCloudに出現させたい単語を水増し登録して出現頻度をブーストアップ。
130回ほど水増しするとWordCloudに元々登場していた単語に届いた。登場させない単語を押しのけられる回数に目途をつけて調整。

残り308行目まで　WordCloudの静止画PNGを生成

311～314行　SVGファイルを生成

アニメーションの作成

上記のpythonコードで生成したSVGにはアニメーションが付いていない。

そこでVS Codeで animate要素やtransform属性を追加して、アニメーションを付けた。

　参照：SVG アニメーション（SMIL を使ったアニメーション）

SMILは、XMLによって作られたマルチメディア記述用の言語

まとめ

adobe After Effects 使わなくてもテキストエディタでキネティックタイポグラフィ作れて楽しい。

付録

キネティックタイポグラフィを映画のタイトルに最初に使ったのは

ヒチコックの「北北西に進路を取れ」らしいですね。（Wikipedia調べ）

カッコいいOpeningだなぁ。