PySimpleGUIとtkinter、それぞれでHTMLのURLリンク(ハイパーリンク)をテキストフィールドに作る方法

目次
PySimpleGUIでHTMLのURLリンク(ハイパーリンク)をテキストフィールドに作る方法
tkinterでHTMLのURLリンク(ハイパーリンク)をテキストフィールドに作る方法
- tkinterで下線を引いたテキストの作成方法
- tkinterでハイパーリンクテキストをクリックした際にサイトにアクセスさせる方法

PySimpleGUIでHTMLのURLリンク(ハイパーリンク)をテキストフィールドに作る方法

PySimpleGUIで作ったテキストフィールドにテキストリンクを付与したいと考えたが、それを実現するのは思いの外かんたんではなさそうだった。

少し調べてみると、まさに私が実現したいことが書かれているstack overflowを見つけたので、そちらのリンクを貼る。

stackoverflow.com

ここに書かれている通りで、テキストに対してイベントを設置してそれをクリックしたらブラウザを起動して対象のURLにアクセスさせる、という手順を踏むのが一番実現的なようだ。

Pythonでブラウザを起動する方法

Pythonでは webbrowserを利用することでかんたんにブラウザを用いて特定のURLにアクセスできる。

シンプルなサンプルコードを下記に載せる。

import webbrowser
url = "https://www.google.com/"
webbrowser.open(url)

このコードを実行すると、実行したPCのデフォルトブラウザが起動してGoogleにアクセスする。

PySimpleGUIの画面上にハイパーリンクを実装したサンプル

では、本題。と言っても上に貼ったstack overflowを参考にしたものではあるが。

import webbrowser
import PySimpleGUI as sg

# フォントをリンクのように下線をつけた状態にする
font = ('Courier New', 16, 'underline')

# URLは'URL <url>' というように予め構造を決めて設定している
layout = [
    [sg.Text("Googleへアクセス", enable_events=True, font=font, key="URL https://www.google.com/")],
    [sg.Text("Appleへアクセス", enable_events=True, font=font, key="URL https://www.apple.com/")]
]

window = sg.Window("Hyper Link Sample", layout, size=(250, 100), finalize=True)

while True:
    event, values = window.read()
    print(event, values)

    if event == sg.WINDOW_CLOSED:
        break
    elif event.startswith("URL "):
        url = event.split(' ')[1]
        print("アクセスするURL: ", url)
        webbrowser.open(url)


window.close()

上のサンプルコードを実行すると、下記のようなGUIアプリが立ち上がる。

f:id:shinshin86:20211227075836p:plain

テキストをクリックすると、デフォルトブラウザが起動してそれぞれのページにアクセスする。

テキストに対してイベントを付与する

上にも書いたがハイパーリンクの実装についてはテキストに対してイベントを付与して、そのテキストをクリックした際に対象のイベントを実行するという仕組みとなる。

URLの取得については split で抽出するという形が取られており、今回の場合、URL <url> という文字列を決め事として実装する必要があるが、そもそもPySimpleGUIでハイパーリンク的なものを設定したい場合というのはアプリの提供側で、例えばGUIアプリのサポートページのリンクを付与したい、というようなユースケースがメインになりそうな気がしているので、これで事足りそうではある。

というわけでPySimpleGUIでハイパーリンクを設定する方法に関する備忘録でした。

tkinterでHTMLのURLリンク(ハイパーリンク)をテキストフィールドに作る方法

ここからは追記の内容となる。

最近tkinterを用いてGUIアプリを作成している。PySimpleGUIに比べるとtkinterのほうが自由度も高めな分、どうしても実装に必要な工数もかかるが、キャッチアップは意外とそこまでかからなかった印象。

そんなtkinterでも同様にハイパーリンクのテキストを作成してみたので、そのやり方をこちらに記載する。

といっても、PySimpleGUIで書いた内容と仕組み的には同じ。

サンプルコードは下記。

import tkinter as tk
from tkinter import font
import webbrowser

root = tk.Tk()
root.geometry("600x400")
root.title("Hyper Link Sample")

link_text_font = font.Font(size=16, underline=True)

google_link_text = tk.Label(root, text="Googleへアクセス", font=link_text_font)
google_link_text.pack()

apple_link_text = tk.Label(root, text="Appleへアクセス", font=link_text_font)
apple_link_text.pack()

google_link_text.bind("<Button-1>", lambda e:webbrowser.open("https://www.google.com/"))
apple_link_text.bind("<Button-1>", lambda e:webbrowser.open("https://www.apple.com/"))

root.mainloop()

こちらを実行すると、下記のようなウィンドウが立ち上がる。

ハイパーリンクテキストをクリックすると、PySimpleGUIと同様にデフォルトブラウザが立ち上がり、それぞれのサイトにアクセスする。

f:id:shinshin86:20220110082530p:plain — tkinterで実装したハイパーリンクテキストのサンプル

tkinterで下線を引いたテキストの作成方法

tkinterでテキストのフォントを設定する際はtkinter.font.Font クラスのインスタンスを作成して利用することで設定可能だった。

公式ドキュメントのリンクはこちら。

tkinter.font — Tkinter font wrapper — Python 3.10.2 documentation

コード的には下記となる。

link_text_font = font.Font(size=16, underline=True)

このインスタンスをLabel作成時に付与すれば指定したfontで設定される。

google_link_text = tk.Label(root, text="Googleへアクセス", font=link_text_font)

tkinterでハイパーリンクテキストをクリックした際にサイトにアクセスさせる方法

このやり方はPySimpleGUIで実践したものと同様の仕組みとなり、webbrowser.open関数を利用する。

作成したLabelに対してbindで左クリックした際のイベントを設定し( <Button-1> は左クリックを表すようだ)、クリックされたタイミングでwebbrowser.open関数を用いて指定したサイトにアクセスするようにしている。

google_link_text.bind("<Button-1>", lambda e:webbrowser.open("https://www.google.com/"))
apple_link_text.bind("<Button-1>", lambda e:webbrowser.open("https://www.apple.com/"))

ハイパーリンクの設定方法については以上となる。

at backyard

Color my life with the chaos of trouble.