Wikipediaでアイアイの情報量を盛って歌うシステムを作りました（盛る編）

こんにちは。元気です！

童謡「アイアイ」、ご存じですよね。
私も小学生の頃は授業で声が枯れるまで歌っていました。

www.youtube.com

心に残る名曲です。
しかし、この歌で語られるアイアイは謎が多く
南の島（四国？沖縄？）に住むサルである事以外はほとんど分かりません。

そこでwikipediaからより多くの情報を抽出し盛って、
楽しみながらアイアイに対する理解を深めようというのが今回の趣旨です。
（システムに歌わせるのは後編です）

注記：
・本記事のシステムはさめこ@sameko71さんのtwitter投稿に触発されて作りました。
（末尾に参照を記載しています）

Wikipedia先生のアイアイ

本目的を達成するためのプログラムをPython3で作成しましたので
早速ですがまずは使ってみましょう。
以下のようにリモート実行環境paiza.IOでソースと共に公開しています。
実行ボタンを押すと、下半分に実行結果が現れます。

実行結果はHTML形式ですので、以下のようにメニューから「text」→「html」としてみましょう。 f:id:powerOfTech:20180813174300p:plain

このとおり、整形されたアイアイが出力されます。 f:id:powerOfTech:20180813174632p:plain

＞＞出力結果のみのリンクはこちらです。

これで歌いながらアイアイをより深く知る事ができますね！

１２モンキーズ

本プログラムはアイアイ以外にも応用できる設計となっています。
上のpaiza.IOの変数 target に別のおさるさんの名前を入れて再実行してみましょう。
(実行して変更されない場合はこちらから実行してみてください）サンプルとして12例のおさるさんを用意しています。 f:id:powerOfTech:20180813175908p:plain

例えば「フランソワルトン」の実行結果。 f:id:powerOfTech:20180813180514p:plain 凄い情報量ですね！おさるさんについての知見が広がること間違いなしです。

解説編

作詞プログラムの概要

どのように動いているか、概要を示します。 f:id:powerOfTech:20180813173723p:plain 毎回しっかり通信して最新のおさるさんの情報を取得しています！
以降の項目で技術解説をしていきます。

①～②MediaWiki APIの利用

Wikipediaの情報は直接webページから取得することが禁じられているため、
MediaWiki APIで取得します。

詳しい利用方法はこちらのページで解説されています。 MediaWiki APIを使ってWikipediaの情報を取得qiita.com

アイアイの情報は以下のURLで取得します。
https://ja.wikipedia.org/w/api.php?format=xml&action=query&prop=revisions&rvprop=content&rvparse&titles=%E3%82%A2%E3%82%A4%E3%82%A2%E3%82%A4

f:id:powerOfTech:20180809230621p:plain
これで抽出元のデータを得ることができました。

③～④HTMLからの抽出

xmlから記事情報を抽出します。

１． xmlからhtml本文を抜き出す。 wikiから得たxml文（変数res）からhtmlをパーサー「xml.etree.ElementTree」を使って抽出します。

import requests
import xml.etree.ElementTree as ET

# Get information from wiki API
xml = ET.fromstring(res.text)
html_data = ""
for html_body in xml.findall('./query/pages/page/revisions/rev'):
    html_data = html_body.text

xml.findallでxmlのルート要素からhtmlの要素を探索、抽出しています。

２． html本文から情報要素を抜き出す。 htmlパーサーでhtmlからタグを除いた本文情報を取り出します。 htmlパーサーの使い方は以下のページを参考にしました。 paiza.hatenablog.com

wikipediaの構造把握のため、chromeブラウザのデベロッパーモードで見た画像を添付します。 f:id:powerOfTech:20180810001448p:plain 各項目は「<h*>タグ（見出しタグ）の間に内容がある」という構造を利用して抽出しました。

概要文だけは他の項目と構造が違ったのですが「wikipediaの概要文は

タグかつ記事タイトル（この場合は'アイアイ'）から始まっている」という構造を利用して抽出しました。 f:id:powerOfTech:20180810002311p:plain

⑤～⑥統合

以下のように歌詞に[概要]や[分布]などのタグを埋め込んでいます。
このタグに対応したwikipediaの項目の内容で置換しています。

# Set lyric
base_lyric = target + " (" + target + ") " + target + " (" + target + ")"
lyric_list = [
    base_lyric, "おさるさんだよ[概要]",
    base_lyric, "みなみのしまの[分布]",
    base_lyric, "しっぽのながい[形態]",
    base_lyric, "おさるさんだよ[生態]",
    base_lyric, "おさるさんだね[人間との関係]",
    base_lyric, "きのはのおうち",
    base_lyric, "おめめのまるい[分類]",
    base_lyric, "おさるさんだね[img]",
]

そして最後に各項目に適宜htmlを埋め込みました。
画像タグは「要素かつ、②target名が属性に含まれているタグ」のURLを抽出して埋め込んでいます。

まとめ

まとめます。

アイアイの情報量を増やすPython3のプログラムを作成した。
アイアイ以外の多くのおさるさんにも対応している。
paiza.IOはゲストでも共有できるし、多言語対応で
しかも外部のwebAPIとも通信できるのでとても使いやすくて良い

今回の前編では歌詞を作ることができました。
後編はこの歌詞をgoogle homeに歌ってもらいます。

参考資料

発端のtweet
さめこ@sameko71さんのtwitter投稿
アイアイ愛を感じます・・・

チカラの技術

電子工作やプログラミング