MENU
  1. ホーム
  2. PySide
  3. PySide超入門【第10回】HTMLリンク付きビューアを作ろう！QTextBrowserの使い方徹底解説

PySide超入門【第10回】HTMLリンク付きビューアを作ろう！QTextBrowserの使い方徹底解説

PySide

＼ 迷ったらまずTechAcademyの無料カウンセリング！ ／

はじめての副業コース

「QTextEditでHTMLは表示できるけど、リンクをクリックしても反応しない…」
そんな悩みをお持ちではありませんか？

QTextBrowser は、QTextEdit をベースに、リンククリックやページナビゲーションなどをサポートした高機能なHTMLビューアです。

この記事では、QTextBrowser の基本構文から、プロパティ・メソッドの徹底解説、よくある使い方までを丁寧に解説します。

目次

QTextBrowserとは？

QTextBrowser は、QTextEdit を拡張した HTML表示に特化したウィジェットです。テキストだけでなくリンクや画像、HTMLの基本的な構造を扱うことができ、さらにリンクのクリック・履歴の管理・ページ遷移といった機能を備えています。

例えば、アプリ内でヘルプページを表示したり、複数のHTMLドキュメントをナビゲートするビューアとして活用したい場合に最適です。

基本コード

from PySide6.QtWidgets import QApplication, QTextBrowser
import sys

app = QApplication(sys.argv)
browser = QTextBrowser()

html = """
<h1>ようこそ</h1>
<p>これは <a href="https://www.python.org">Python公式サイト</a> へのリンクです。</p>
"""
browser.setHtml(html)

# ========================================
# ここにコードを追加します
# ========================================

browser.show()
app.exec()

HTMLファイル

  • ファイル構造
PySide/
├── main.py
└── pages/
├── page1.html
└── page2.html
  • page1.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページ1</title>
</head>
<body>
    <h1>これはページ1です</h1>
    <p>ここは <strong>QTextBrowser</strong> に表示される HTML ページです。</p>
    <p><a href="page2.html">次のページへ進む</a></p>
</body>
</html>
  • page2.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページ2</title>
</head>
<body>
    <h1>これはページ2です</h1>
    <p>QTextBrowserで表示される2つ目のHTMLページです。</p>
    <p><a href="page1.html">← ページ1に戻る</a></p>
</body>
</html>

主なプロパティとメソッド一覧（全解説）

Noプロパティ / メソッド説明例
1setSource() / source()表示するリンク先（URL）を指定browser.setSource(QUrl("page1.html"))
2setOpenExternalLinks()外部リンクをブラウザで開くbrowser.setOpenExternalLinks(True)
3setOpenLinks()リンクの自動オープンを有効化browser.setOpenLinks(True)
4setHtml() / toHtml()HTMLを表示または取得browser.setHtml(html)
5setPlainText() / toPlainText()プレーンテキスト表示browser.setPlainText("text")
6anchorClickedリンククリック時のシグナルbrowser.anchorClicked.connect(func)
7history() / back() / forward()ページ履歴の管理browser.back()
8reload()現在のページを再読み込みbrowser.reload()
9searchPaths() / setSearchPaths()相対パスの検索ディレクトリbrowser.setSearchPaths(["./pages"])

各プロパティ・メソッド 詳細解説

【1】リンク先（URL）を設定・取得

QTextBrowser に HTML ファイル（またはリソース）を読み込んで表示します

相対パスで指定する場合は setSearchPaths() と組み合わせる必要があります

setHtml() のように直接文字列でHTMLを渡すのではなく、外部ファイルにあるページを指定する点がポイントです

  • メソッド：setSource / source
  • ファイル構造：
  • 使い方：
from PySide6.QtCore import QUrl
# ページを探すディレクトリを指定
browser.setSearchPaths(["PySide/pages"])
# 初期表示ページを設定
browser.setSource(QUrl("page1.html"))
print(browser.source().toString())

【2】リンクを外部ブラウザで開く

  • 概要：リンクを外部ブラウザで開くかを設定する
  • メソッド：setOpenExternalLinks
  • 使い方： 
browser.setOpenExternalLinks(True)

【3】内部リンクを自動的に開く

  • 概要：内部リンクを自動的に開くかどうかを設定する
  • メソッド：setOpenLinks
  • 使い方： 
from PySide6.QtCore import QUrl
# ページを探すディレクトリを指定
browser.setSearchPaths(["PySide/pages"])
# 初期表示ページを設定
browser.setSource(QUrl("page1.html"))
# 内部リンクを自動的に開く
browser.setOpenLinks(True)
page1.htmlpage2.html

【4】HTMLコンテンツを直接設定・取得

  • 概要：HTMLコンテンツを直接設定・取得する
  • メソッド：setHtml / toHtml
  • 使い方： 
html = "<p><a href='https://example.com'>リンク</a></p>"
browser.setHtml(html)

【6】クリック時のシグナル

  • 概要：リンクがクリックされたときに発火
  • メソッド：anchorClicked
  • 使い方： 
def on_link_clicked(url): 
    print("リンクがクリックされました:", url.toString())
browser.anchorClicked.connect(on_link_clicked)

# リンクがクリックされました: page2.html
# リンクがクリックされました: page1.html

【7】履歴管理

  • 概要：前のページへ戻る・次へ進む・再読み込み

setOpenLinks(True) を設定しておくことで、HTML内の <a href="..."> をクリックしたときに履歴が記録されます。

backward() や forward() は、その履歴をたどる操作です。

reload() は現在のURLを再度読み込みます。HTMLを更新したときに反映したいときなどに使います。

  • メソッド：back, forward, reload
browser.backward()
browser.forward()
browser.reload()
  • 使い方：
from PySide6.QtWidgets import QApplication, QWidget, QVBoxLayout, QTextBrowser, QPushButton
from PySide6.QtCore import QUrl
import sys

app = QApplication(sys.argv)

window = QWidget()
layout = QVBoxLayout()

browser = QTextBrowser()
browser.setSearchPaths(["PySide/pages"])
browser.setSource(QUrl("page1.html"))
browser.setOpenLinks(True)

# ボタンを追加
back_button = QPushButton("戻る")
forward_button = QPushButton("進む")
reload_button = QPushButton("再読み込み")

back_button.clicked.connect(browser.backward)
forward_button.clicked.connect(browser.forward)
reload_button.clicked.connect(browser.reload)

# レイアウトに追加
layout.addWidget(browser)
layout.addWidget(back_button)
layout.addWidget(forward_button)
layout.addWidget(reload_button)

window.setLayout(layout)
window.show()
app.exec()

よくある質問（FAQ）

QTextEditとどう違うの？

QTextBrowserはリンク・履歴・ページ移動などに対応した上位版です。

クリックしたリンクのURLを取得できますか？

anchorClickedシグナルを使えば取得可能です。

外部リンクをブラウザで開けますか？

setOpenExternalLinks(True) で可能です。

HTMLとCSSのスタイルは使えますか？

基本的なタグ・スタイルは使用可能ですが、JavaScriptは不可です。

表示するHTMLファイルを相対パスで指定できますか？

setSearchPaths() を使えば可能です。

ファイルではなく文字列から表示できますか？

setHtml() で直接文字列のHTMLを渡せます。

リンクをクリックしても反応しないのはなぜ？

setOpenLinks(True) を設定していない場合に無効になります。

まとめ

QTextBrowser は、Python×PySideでリンク付きのHTMLビューアを作成するのに最適なウィジェットです。
QTextEditよりも高機能で、学習資料・ドキュメントビューア・ヘルプシステムなどに活用できます。

次回は、「PySideで表形式のデータを表示！QTableWidgetの基本と活用法」について解説予定です。お楽しみに！]

使える.py
PySide超入門【第11回】表形式のデータを表示！QTableWidgetの徹底解説 | 使える.py 「データを表形式で表示したい」そんなときに活躍するのが QTableWidget です。 このウィジェットを使えば、表のようなレイアウトでテキストや画像、チェックボックスなど…
PySide
GUI python
シェアしてくださると嬉しいです！
  • URLをコピーしました！

コメント

コメントする

目次