使いやすい分割できるブラウザ-Qtsimplebrowser
初めに
複数の画面を分割できるブラウザがあまりないので作ってみました
このコードは Qt(Qt Widgets + QWebEngineView) で作られたマルチブラウザ です。
単なる「ブラウザ」ではなく、
- メイン画面を1つ表示
- サブ画面を最大12個表示
- URL保存
- お気に入り管理
- 画面分割
- ズーム
- 設定保存(JSON)
ができる高機能ブラウザになっています。
画面全体の構成
+--------------------------------------------------+
| << > ! - + % 0 1 2 3 4 5 6 7 8 9 10 11 12 |
+--------------------------------------------------+
| URL入力欄 |
| 行[1] 列[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%
に戻す
0 ボタン
動的生成
btnSub0
処理
clearSubScreens();
機能
すべてのサブ画面を空にする
実際には
about:blank
を表示している。
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();
によってサブ画面サイズに合わせて自動縮小されるのが、このプログラムの一番特徴的な部分です。