はじめに

初めまして！いっとんです。
プログラミングの勉強を兼ねて、投稿を始めてみました！
プログラミングの勉強を始めて1・2年のペーペーですがよろしくお願いします！

さて、今回は最近参加したハッカソンでAPIを触る機会があったので、APIを使って何か作れないかな？と考えた結果、wikipediaを使ったゲームを思いついたので、早速作ってみました。

ゲームの概要

ゲームのルールはこんな感じです。

2つのワードを受け取る（例：日本と織田信長）
↓
一方をスタート、もう一方をゴールにする（※日本をスタート、織田信長をゴールとする）
↓
wikipediaの記事にはワードにそのワードのページに飛ぶことができるリンクが貼ってあるので、そのリンクをクリックしてゴールのワードのページを目指す（※「日本→歴史→戦国時代→織田信長」みたいな感じ）
↓
ゴールのページに到着すればクリア（※将来的に点数を付けたりしたいが、そこら辺のルール設定は未定）

開発環境

Djangoを使っていきます！
理由は最近使ってるからです！！（いつかUnityとか使って開発したいなあ）

作業開始

今回、pythonのインストールや基本的なdjangoの開発準備は割愛させていただきます。
プロジェクト名：wikiword
アプリ名：main

1.wikipediaから情報を取得

難しいのかなと思ったら結構簡単でした。

まずターミナルでwikipediaapiをインストールします。

pip install wikipediaapi

views.pyでインポートします

views.py

import wikipediaapi

これで準備完了。

続いて、検索ワードを指定して文章を出力します。

views.py

import wikipediaapi

# 取得する言語を日本語に設定
wiki_wiki = wikipediaapi.Wikipedia('ja')

# 検索ワードを指定してページを取得
page = wiki_wiki.page("検索ワード")

# ページの内容を出力
print(page.text)

これで"検索ワード"の所に自由なワードを入れれば、そのワードの記事が出力されます。

はい、終わり。
めちゃくちゃ簡単でした。

2.wikipediaみたいな見た目にする

しかし、このままでは章の名前とか段落とかがぐちゃぐちゃになっちゃいます。
調べた結果、どうやらこいつ↓を追加するとWikipediaのページをHTML形式で取得できるっぽいです。

変数=wikipediaapi.ExtractFormat.HTML

助手のChatGPT君と一緒に作った結果、最終的に以下のようなコードになりました。

views.py

# main
def main(request):
    import wikipediaapi
    # wikipediaapiのデータの形式を設定
    wiki_wiki = wikipediaapi.Wikipedia(
    # 日本語
    language='ja',
    # HTML形式
    extract_format=wikipediaapi.ExtractFormat.HTML,
    # ユーザーエージェントってやつ。詳しくは後程
    user_agent='CoolBot/0.0 (https://example.org/coolbot/; coolbot@example.org)'
    )

    # 検索ワード
    # 今回は仮として「みかん」と置いています。
    page_py = wiki_wiki.page("みかん")    

    # 検索ワードを発見した時
    if page_py.exists():
        #「みかん」のページのタイトルを入れる
        page_title = page_py.title
        #「みかん」のページの文章を入れる
        page_text = page_py.text

    # 検索ワードが見つからなかった場合
    else:
        page_text = 'ページが見つかりませんでした。'

    return render(request, 'main/main.html', {
        'page_text': page_text, 
        'page_title': page_title,
        })

main.html

    <div class="main-text" id="main-text">
        <h1>{{ page_title }}</h1>
        <p>{{ page_title|safe }}</p>
        <!--safeを追記することで<h1>とかのhtmlタグを適用させることができる-->
    </div>

これで、本物のwikipediのページみたいにすることができました。

mainのユーザーエージェント(user_agent)は僕もあまり分かっていないのですが、ChatGPT君によると「HTTPリクエストを送信するクライアント（通常はWebブラウザやプログラム）が自身を識別するためにサーバーに送信する情報の一部」だそうです。

今回のような検索したワードの情報を出力するだけのコードを書いている時は必要なかったのですが、この先の工程で突然求められるようになったので、念のため記載しておきます。

上のページに載ってあったコードをベタ張りしています。
詳しい方、教えていただけるとありがたいです・・・。

おわりに

というわけで、今回はwikipediaの情報を入手するところまで紹介しました。
次回は、受け取った記事には、wikipediaみたいにワードにそのワードのページに遷移するリンクが貼られていないので、この部分をなんとかする回にしたいと思います。

ちなみに、ゲーム自体は遊べる程度には完成しているので、興味がある方は是非Githubから遊んでみてください。(まだCSSとかは全くないです）

コードや記事の改善点や質問があればぜひ！！

Github:https://github.com/ITTON2001/WikiWord