【新サービスのお知らせ】リサーチ＆コンテンツ[詳細はこちら]※料金付き
BtoB WEBページのPR集客とコンバージョンを引き上げる総合サービスメニューです。ターゲット設定、全体企画、調査実施、分析コンテンツ、プレスリリース、ダウンロード用白書制作まで。特設ページで詳しくご案内しています。
日本語ワードクラウド挑戦篇
【GPT_Textminingシリーズ一覧リンク】
- 第１回 入門編・グーグルスプレッド＆API
- 第２回 グーグルスプレッド・サマライズ等
- 第３回 通常の対話型インターフェイスを使った単語抽出など
- 第４回 マイニングツールKH-Coderとの連携について
- 第５回 ワードクラウドを表示するHTMLを作る
- 第６回 エクセルをそのままコードインタープリターで加工する
【はじめに】
これまで、ChatGPTを使ったアンケート調査のテキストマイニングについて4回の投稿を行ってきました。テキストマイニングという言葉を使っていますが、今まで一般的に研究されてきた”形態素解析を前提にした数理分析”とは違うものであり、新たな可能性を持った文章分析手法であると、ChatGPT自身は答えています。
既存業務の代替手法ではなく、独自の価値と魅力を持ったジャンルとして、今後は磨いていきたいと思っています。
今回は、そんなターニングポイントの息抜きのような話になります。
メインは、ChatGPTにHTMLコードを書いてもらうことになります。ChatGPTに関する様々なリポートには、PythonやJavaのプログラムをAiが作ってくれる話を見かけます。これは確かにすごいことなのですが、プログラミングをしない人にとっては少し縁遠く感じるかもしれません。
そこで、今回は作ったファイルをブラウザに読み込めば結果が見えるHTMLを、ChatGPT書いてもらい、生成系Aiのちょっとすごい部分を体験してもらいたいと思い書いています。お題は”ワードクラウド”を表示するHTML”です。アンケートの自由文回答から、タイトル絵のようなワードクラウド表示までを、レポートします。
いつものとおり、動画を参照していただくと私のどたばたがわかると思います。
【動画】
最初は、第2回の投稿の復習のよう作業です。例題となる”アンケートの自由文回答”をGPTに食べてもらい、サマリーを作ってもらいます。今回から、例文もコピペできるようにしましたので、実際にGPTを使いながら読んでいただいてもよいでしょう。
プロンプト１：分析用テキストのアップロードとサマリー作成
＜文章＞
色々なお店があったりするけど治安が若干悪いから
交通の便と飲食店やオフィスと住居が同居している
いい街だから
静かで素敵なお店がたくさんあるから
山手線の駅なので、どこへ行くにも便利。その割に街がゆったりしている。
色々な物が揃っているから
最高の環境ですが、物価は高めなので。
治安が良く便利だが、物価が高いので。
雰囲気は悪くないが、何しろ物価が高い。特にガーデンプレイス付近の高台ゾーン。スーパーが無くて、あるのは美容室ばかり。この辺の老人たちはどこへ買い物に行っているのやら？
物価は高い。子供用品の買い物が不便
便利、子供の数が少な目だから子供に優しい
立地は良い、渋谷、原宿、六本木にも近い。けど、生活するには、物価が高い
利便性の良さ。
色々なものが揃っていて便利だから
便利だから
電車が便利。コンビニ多くて便利。
環境がよい
人も多くて雑踏としているけど、自分のペースと行動パターンに慣れてくれば、便利で住みやすいです。
スーパーやドラッグストア、本屋など少ない
・ギャヤリーや美術館、劇場やシアターなどが多く最新アートに身近に触れられる・職住近接としてとても便利で快適・地域住民同士のコミュニティー形成が濃密・地域住民がみんなやさしい・シビックプライドを持って地域住民自らまちづくりをしている・地域企業がまちづくりや地域イベントに積極的に参画している・歩道が広い・官（※渋谷区）民の連携が取れている・公衆電話やポストが多い・最新の地域情報を随時発信し続けている（※恵比寿新聞など）・地域独自、恵比寿ならではでのイベントが多い
自分が気にいっているから。でも、すべての人におすすめとはいきませんね。
楽しいけれど物価が高い。日常生活を普通に送るには物販店がほとんどないなど不便。
世の中のイメージと実際に住んで感じるギャップ
交通の便が良く、住宅街と繁華街のバランスが良い。ただし空気があまり綺麗ではない。
お店が多いから
飲食店が沢山あるから
新しいお店ができる割合が多いから
便利で暮らしやすい。恵比寿での生活に満足している人が多い。
交通の便がよすぎる。乗り換えなしでどこへでも行ける。
街並み、便利さ、近所付き合いも含め素晴らしい街。もしお得で品揃え豊富なスーパーがあれば10点豊富な
気持ちのいい街ですが、家賃が高い
秩序ある街だから
便利だから
企業優先の開発まちづくりに不安がある
住んでいましたが、渋谷駅にも六本木方面にもアクセスが良かったところ。街のサイズ感。ガーデンプレイスがシンボルとして、良い。
恵比寿横丁前を中心に輩が多すぎて極めて不快
駅の近くはやはり騒々しいが、少し離れると閑静であり便利だから場所によると思う。
昔から恵比寿暮らし憧れていた、ついに実現できてとても幸せ。
最近は治安面での不安が結構大きいかもしれません。
街は暮らしやすいので薦めたいが、家賃等の生活コストが高いので万人に薦められるものではない。
ガーデンプレイス中心に代官山や広尾にもアクセスしやすく緑多くて気持ち良い。ただ相応に生活コストが高いので満点とはいかないかもしれません。
暮らしやすい街ですが、家賃が高くなるのがネック
地域コミュニティをつなごうという姿勢を持っている人が多い
交通、買物、飲食に便利
昔から住んでいて愛着があるから
交通の便利さ
大人には快適な職住環境。子育て施設が少ないがアクセスが良く近隣地域で習い事などは可能。
便利でおしゃれなお店がある一方でゴミのポイ捨てや住民同士のつながりが弱い。
清潔で便利で治安の良い安全な街だから
薦めすぎると人が増えるのでほどほどに
商業施設や社会インフラも充実していて基本的には住みやすいと思います。個人的には外国人との共生という意味では広尾や麻布に少し劣後しているかなと思う点が減点ポイントです。
JRと日比谷線が使えて便利。美味しいお店が多い
交通の利便性がよくどこへも行きやすい
一通りのものは揃っているが、経済的な各種相場は高め。それとここ数年街そのものや出入りする人間に乱れが増えてきた。
とても住みやすいが家賃が高い
安全でのんびり過ごせる街
公園など外で遊ぶ場所が少ない、交通量が多いなど、ノビノビと子どもが過ごせる街ではないと思います。
とても住みやすい町だと思うが、家賃が高いので、誰にでもはおすすめできない。
どこへ行くにも便利だが、安いスーパーはない
交通の便は良いので、その面では勧める。手頃なスーパーが駅近くに少ないこと、飲食店が増えて治安が悪くなったことや騒音問題でマイナスです。
交通の便が良い。ビッグターミナルではない気軽さ。意外に下町。物価は高いけど自転車圏内で安い買い物もできる。
無事にサマリーは出来上がりましたか？結果にこだわらず次のプロンプトを試してみてください。
ここでは、先程の例文を元に、ワードクラウド用の”単語の出現頻度表”を作成してもらいます。
プロンプト２：単語の抽出と出現頻度の表示
おそらくここまでは、ある程度順調にテーブルを作ってくれると思います。（ChatGPTは、過去にできた作業をやってくれないことがあります。再現性を担保できないのが、生成系Aiの欠点であり、恐らく特長なのだとも思います。
ここから一気にワードクラウド用のlkHTML作成を依頼します。”https://d3js.org/d3.v5.min.js””https://cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js”のふたつは、過去に何十回か私が失敗して来た結果、比較的安定してよいコードが得られ「注文」です。このふたつのjsを指定することをおすすめします。
プロンプト３：ワードクラウド用HTMLコードの作成
HTMLコード：出来上がったHTMLコード
<!DOCTYPE html> <html> <head> <title>Word Cloud</title> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://cdn.rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script> </head> <body> <div id="wordcloud"></div>
<script>
var words = [
{ text: “街”, size: 11 },
{ text: “便利”, size: 10 },
{ text: “高い”, size: 8 },
{ text: “交通”, size: 7 },
{ text: “物価”, size: 6 },
{ text: “住みやすい”, size: 6 },
{ text: “治安”, size: 4 },
{ text: “店”, size: 4 },
{ text: “駅”, size: 4 },
{ text: “コミュニティー”, size: 4 },
// 他の単語とサイズのデータを追加する
];
var width = 1200;
var height = 900;
var svg = d3.select(“#wordcloud”)
.append(“svg”)
.attr(“width”, width)
.attr(“height”, height)
.append(“g”)
.attr(“transform”, “translate(” + (width / 2) + “,” + (height / 2) + “)”);
var layout = d3.layout.cloud()
.size([width, height])
.words(words)
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font(“Impact”)
.fontSize(function(d) { return d.size * 20; })
.on(“end”, draw);
layout.start();
function draw(words) {
svg.selectAll(“text”)
.data(words)
.enter().append(“text”)
.style(“font-size”, function(d) { return d.size + “px”; })
.style(“font-family”, “Impact”)
.style(“fill”, function() { return randomColor(); })
.attr(“text-anchor”, “middle”)
.attr(“transform”, function(d) {
return “translate(” + [d.x, d.y] + “)rotate(” + d.rotate + “)”;
})
.text(function(d) { return d.text; });
}
function randomColor() {
var letters = “0123456789ABCDEF”;
var color = “#”;
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
</body>
</html>
どうでしょう？無事にワードクラウドが表示されましたか？ うまく表示されない場合は文字コードを再確認してください。
それでもうまく行かない場合は、GPTに「まったく表示されないのですが？」とプロンプトしてください。すぐに別案が表示されます。
多少なりとも文字が表示されたときは、「文字が小さい」「色がカラフルじゃない」「横書きに統一してくれ」といった改良のためのプロンプトを送ってみてください。
私はこの方法で、動画タイトルのようなきれいなワードクラウドを作成しました。
シリーズ記事リンク：[第1回][第2回][第3回][第4回][第5回][第6回]
外部ブログ記事になりました。【リンク】
G-Pointサービスを提供している、ジー・プラン株式会社のビジネスブログに関連記事を投稿しました。●対話画面を使ったテキストマイニング
・サマリー作成
・単語出現率
・ワードクラウド
※以上のプロンプト見本（テスト用アンケート自由文付き）
※抱きあがったワードクラウドのHTML見本●グーグルスプレッド・アドオン＝GPT for Sheets and Docsを使った感情分析
・APIの取得方法（詳細）
・GPT for Sheets and Docsのセットアップ（詳細）
・感情分析（センチメント分析）
・発言分類…択一型と複数型（詳細）●ChatGPTを使った顧客体験調査の設計
・設問案の作成
丁寧な解説や見本データが掲載されていますので、ぜひご一読ください。
よしざわ
