使いやすい分割できるブラウザ-Qtsimplebrowser
初めに
複数の画面を分割できるブラウザがあまりないので作ってみました
このコードは Qt(Qt Widgets + QWebEngineView) で作られたマルチブラウザ です。
単なる「ブラウザ」ではなく、
- メイン画面を1つ表示
- サブ画面を最大12個表示
- URL保存
- お気に入り管理
- 画面分割
- ズーム
- 設定保存(JSON)
ができる高機能ブラウザになっています。
Qt 公式バイナリの QtWebEngine はライセンス制約のため、H.264 / AAC / MP4 / DRM (Widevine) などのコーデックが無効化されており、Twitter(X)、ニコニコ動画、保護されたストリーミング動画等を再生することができません
画面全体の構成
+--------------------------------------------------+
| < > ! - + % S 0 1 2 3 4 5 6 7 8 9 10 11 12 |
+--------------------------------------------------+
| URL入力欄 |
| 行[1] 列[2] 位置[右] 保存 ☆ ★ |
+--------------------------------------------------+
| |
| メイン画面 |
| |
+--------------------------------------------------+
| サブ画面群 |
+--------------------------------------------------+
画面上に表示する説明なら、こんな感じが分かりやすいと思います。
ボタンの使い方
← ：前のページへ戻る
→ ：次のページへ進む
! ：ページを再読み込み
－ ：表示を縮小
＋ ：表示を拡大
% ：表示倍率を100%に戻す 、もう一度押すと直前の拡大率に戻る
S ：押すとメイン画面とサブ画面の境界の割合を入れ替えます（40%→60%）。
0 ：すべてのサブ画面をクリア （空のときはメイン画面をすべてのサブ画面に表示）
1～12 ：現在のページを指定したサブ画面へ表示
URL入力
URLを入力して Enter キーを押すとページを開きます。
例
https://www.google.com
サブ画面設定
行 ：サブ画面の行数
列 ：サブ画面の列数
例
行=2 列=3
なら 6画面表示
位置
右 ：サブ画面を右側に表示
下 ：サブ画面を下側に表示
保存・お気に入り
保存 ：現在の状態を保存
保存内容
- URL
- サブ画面
- 行・列設定
- 位置
- ズーム率
- ウィンドウサイズ
☆ ：現在のページをお気に入り登録
★ ：お気に入りを開く
使用例
- URLを入力してページを開く
- 「1」を押してサブ画面1へ表示
- 別のページを開く
- 「2」を押してサブ画面2へ表示
- 行・列を変更して複数ページを同時表示
- 「保存」で次回起動時用に保存
これだけ覚えれば基本操作はできます。
詳細な説明
上段ボタンバー
< ボタン
pushButton
ツールチップ
戻る
処理
void MainWindow::on_pushButton_clicked()
{
ui->widget->back();
}
機能
ブラウザの戻る
例
Google
↓
Yahoo
↓
Bing
で Yahoo に戻る。
> ボタン
pushButton_2
処理
ui->widget->forward();
機能
進む
! ボタン
pushButton_3
処理
ui->widget->reload();
機能
ページ再読み込み
ブラウザのF5と同じ。
－ ボタン
起動時に動的生成
btnZoomOut
処理
zoomOutMain();
機能
縮小
例
100%
↓
90%
↓
81%
＋ ボタン
btnZoomIn
処理
zoomInMain();
機能
拡大
例
100%
↓
110%
↓
121%
% ボタン
btnZoomReset
処理
zoomResetMain();
機能
ズームを
100%
に戻す
表示倍率を100%に戻す 、もう一度押すと直前の拡大率に戻る
S ボタン
押すとメイン画面とサブ画面の境界の割合を入れ替えます（40%→60%）。
0 ボタン
動的生成
btnSub0
処理
clearSubScreens();
機能
すべてのサブ画面を空にする
実際には
about:blank
を表示している。
0 ：すべてのサブ画面をクリア （空のときはメイン画面をすべてのサブ画面に表示）
1〜12 ボタン
例えば
btnSub1
btnSub2
…
btnSub12
役割
メイン画面で見ているページを
指定したサブ画面へ送る。
例
メイン画面
https://google.com
表示中
↓
3
ボタン押す
↓
サブ画面3に
https://google.com
表示
処理
sendToSub(i – 1);
例えば
ボタン5
sendToSub(4);
サブ画面5にコピー
URL入力欄
lineEdit
表示
URLを入力してEnter
使用方法
https://www.google.com
入力
↓
Enter
↓
ページ表示
処理
void MainWindow::on_lineEdit_returnPressed()
{
ui->widget->load(QUrl(ui->lineEdit->text()));
}
行
spinRows
設定可能
1～12
意味
サブ画面の行数
例
1
なら
□ □ □
1行
3
なら
□ □
□ □
□ □
3行
列
spinCols
意味
サブ画面の列数
例
2列
□ □
□ □
4列
□ □ □ □
行×列
サブ画面数
例えば
行=3
列=2
なら
3×2=6画面
使えるのは
1～6ボタン
まで。
7以降は無効化される。
コード
btn->setEnabled(used);
位置
comboSubPos
プルダウン
右
+------------+------+
| | |
| メイン |サブ |
| | |
+------------+------+
処理
Qt::Horizontal
下
+------------+
| メイン |
+------------+
| サブ |
+------------+
処理
Qt::Vertical
コード
m_splitter->setOrientation(…)
保存ボタン
btnSave
表示
保存
役割
現在状態をJSON保存
保存される内容
URL
行数
列数
右/下
ウィンドウ位置
ズーム率
サブ画面URL
スプリッタ位置
保存例
{
“url":"https://google.com“,
“subRows":2,
“subCols":3,
“subPosition":"right",
“zoomFactor":1.2
}
☆ ボタン
btnFavSave
お気に入り登録
例
現在
https://youtube.com
表示中
↓
☆押す
↓
名前入力
YouTube
↓
保存
保存形式
{
“name":"YouTube",
“url":"https://youtube.com“
}
★ ボタン
btnFavLoad
お気に入り一覧表示
例
YouTube
Google
Yahoo
GitHub
選択
↓
開く
↓
ページ表示
メイン画面
widget
型
QWebEngineView
役割
普通のブラウザ画面
ここでサイトを見る
例えば
ui->widget->load(QUrl(“https://www.google.com“));
すると
Googleが表示される。
サブ画面領域
subContainer
中には
subView1
subView2
…
subView12
が入る。
生成箇所
createSubViews();
作成コード
QWebEngineView *view =
new QWebEngineView(ui->subContainer);
合計
MaxSubScreens = 12
枚作られる。
サブ画面のズーム
非常に面白い機能です。
右配置
メイン | サブ
で
3行
なら
1.0 / 3
倍率
例えば
メイン
150%
なら
サブ
50%
になる
計算
ratio = 1.0 / rows;
下配置
メイン
-------
サブ
なら
列数で計算
ratio = 1.0 / cols;
スプリッター
中央の境界
m_splitter
ユーザーがドラッグ可能
メイン|サブ
の境界を動かせる。
設定保存
kSplitRatio
次回起動時
同じ割合で復元
JSON設定ファイル
デフォルト
Qtsimplebrowser.json
保存される項目
subRows
行数
subCols
列数
subPosition
右/下
url
メインURL
subUrls
サブ画面URL一覧
zoomFactor
ズーム率
windowGeometry
ウィンドウ位置とサイズ
splitRatio
スプリッター位置
favorites
お気に入り
ショートカットキー一覧
| キー | 機能 |
|---|---|
| Backspace | 戻る |
| Shift+Backspace | 進む |
| Ctrl++ | 拡大 |
| Ctrl+- | 縮小 |
| Ctrl+0 | 100% |
このソフトの特徴
一般的なブラウザとの違いは
① 1つのURLを複数画面にコピーできる
メイン
↓
ボタン1
ボタン2
ボタン3
で3箇所同時表示
② 最大12画面
3×4
まで表示可能
③ 起動時完全復元
- URL
- サブ画面
- ウィンドウ位置
- ズーム率
- 分割比率
すべて再現
コマンドライン指定
Qtsimplebrowser.exe Qtsimplebrowser.json④ お気に入り管理付き
JSONだけで保存できるのでデータベース不要
⑤ メインとサブのズーム自動連動
updateSubZoom();
によってサブ画面サイズに合わせて自動縮小されるのが、このプログラムの一番特徴的な部分です。
バイナリー
準備
ビルと
@echo off
call "C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\VC\Auxiliary\Build\vcvars64.bat"
if errorlevel 1 exit /b 1
set PROJ=%~1
set BUILD=%~2
if not exist "%BUILD%" mkdir "%BUILD%"
cd /d "%BUILD%"
"C:\Qt2\6.6.1\msvc2019_64\bin\qmake.exe" "%PROJ%" -spec win32-msvc CONFIG+=release
if errorlevel 1 exit /b 1
nmake release
exit /b %errorlevel%
最大化
start "" /MAX Qtsimplebrowser.exe