[C++] 345 BBS閲覧アプリの製作 その29 動画サイトへのリンク JavaScript

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

投稿文字列から動画URLを検知してリンクをはり、クリックで再生できるようにしました。

現状GUI右下のFl_WebView縦横をフルに使っての再生です。本当は小さくポップアップさせたいのですが、上手くできません。JQueryを使えばできるようになるのでしょうか。

あとマウスアウトで画面消去したいところで、ホバー対象が画面に隠れてしまっていてできません。スレッドをリロードするしかないです。

クリックすると即再生は危険なので、まずマウスオーバーで画像だけポップアップさせたいですね。

2023/8/1追記
その後の検証でJavascriptのshowVideo関数は動作しておらず、Fl_WebViewの動画再生機能で表示されていることが判明しました。つまりhrefリンクするだけで再生できるようになります。

// 動画再生
function showVideo(element,event) {
    // event.preventDefault();

    var videoSrc = element.getAttribute("href");
    var videoElement = document.createElement("video");
    videoElement.src = videoSrc;
    videoElement.classList.add("popup-video");
    document.body.appendChild(videoElement);
    videoElement.style.display = "block";
    // videoElement.play();

    window.addEventListener("resize", resizeVideo); // 機能せず

    var rect = videoElement.getBoundingClientRect();
    var y = rect.top;
    console.log("Popup y = " + y);

    videoElement.style.top = -y + 50;
}

// 動画消去
function eraseVideo() {
    var videoElement = document.querySelector(".popup-video");
    if (videoElement) {
        videoElement.pause();
        videoElement.parentNode.removeChild(videoElement);
    }

    window.removeEventListener("resize", resizeVideo); // 機能せず
}
// datファイルから各行を取り出し投稿内容msg2を抽出してからの処理

// mp4リンク化
size_t posMP = msg2.find("https");
while (posMP != string::npos) {
      string urlMP4;
      size_t posMP2 = msg2.find(".mp4", posMP);
      if (posMP2 != string::npos){
            urlMP4 = msg2.substr(posMP, posMP2 - posMP + 4);
      } else {
            break;
      }

      string aTagMP4 = "<a href=\"" + urlMP4 + "\" rel=\"noopener noreferrer\" onclick=\"showVideo(this,event);\" onmouseout=\"eraseVideo();\" >" + urlMP4 + "</a>";

      cout << "aTagMP4: " << aTagMP4 << endl;

      msg2.erase(posMP, posMP2 - posMP + 4);
      msg2.insert(posMP, aTagMP4);

      posMP = msg2.find("https", posMP + aTagMP4.size());
}        

[C++] 344 C++とObjective-C混在プロジェクトのMakefile

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

GitHubにあるFl_WebViewをより深く理解するため、ライブラリではなくソースファイル(cpp1個、m1個)としてプロジェクトに取り込み、ビルドしてみました。

プロジェクトのソースファイルはcppファイル14個、mファイル1個で構成されています。

Makefileは以下の通りです。ビルドは成功し、アプリは正常に動作しています。

# コンパイラ
COMPILER = clang++
DEBUG = -g

# オプション
CPPFLAGS = -D_LARGEFILE_SOURCE -D_LARGEFILE64_SOURCE -D_THREAD_SAFE -D_REENTRANT -std=c++20
MFLAGS = -D_LARGEFILE_SOURCE -D_LARGEFILE64_SOURCE -D_THREAD_SAFE -D_REENTRANT
LDFLAGS = -lfltk -lpthread -framework Cocoa -framework WebKit -lc++

# includeパス(-I)
INCLUDE = -I./include -I/Volumes/DATA_m1/code/cpp/mylib/include -I/usr/local/include \
-I/opt/homebrew/Cellar/libxml2/2.10.3_2/include

# ライブラリ(-l)
LIBRARY0 = -lcurl -liconv -lxml2

# ライブラリパス(-L)
LIBRARY = -L/usr/local/lib

# ソースファイル
SRCDIR = ./src
SRCS_CPP = $(shell find $(SRCDIR) -type f -name "*.cpp")
SRCS_M = $(shell find $(SRCDIR) -type f -name "*.m")

# オブジェクトファイル
OBJDIR = ./obj
OBJS = $(addprefix $(OBJDIR), $(patsubst ./src/%.cpp,/%.o,$(SRCS_CPP))) \
$(addprefix $(OBJDIR), $(patsubst ./src/%.m,/%.o,$(SRCS_M)))

# 実行ファイル
TARGETDIR = ./bin
TARGET = BBS_Browser

# cppファイルからoファイル作成 $<:依存ファイル
$(OBJDIR)/%.o: $(SRCDIR)/%.cpp
	$(COMPILER) $(CPPFLAGS) $(INCLUDE) $(DEBUG) -o $@ -c $<

# mファイルからoファイル作成
$(OBJDIR)/%.o: $(SRCDIR)/%.m
	$(COMPILER) $(MFLAGS) $(INCLUDE) $(DEBUG) -o $@ -c $<

# アプリファイル作成関連
POSTBUILD  = fltk-config --post

# oファイルから実行ファイルとappファイル作成
$(TARGET):$(OBJS)
	$(COMPILER) -o $(TARGETDIR)/$@ $(OBJS) $(LIBRARY0) $(LDFLAGS) $(LIBRARY) 
	cp $(TARGETDIR)/$(TARGET) $(TARGET)
	$(POSTBUILD) $(TARGET)
	mkdir $(TARGET).app/Contents/Resources
	cp ./images/$(TARGET).icns $(TARGET).app/Contents/Resources
	plutil -insert 'CFBundleIconFile' -string $(TARGET).icns $(TARGET).app/Contents/Info.plist
	rm -f $(TARGET)

# 全ソース強制コンパイル
.PHONY:all
all: clean $(TARGET)

# 全ファイル削除
.PHONY:clean
clean:
# rm -f $(SRCDIR)/.DS_Store
	rm -rf $(OBJS) $(TARGETDIR)/$(TARGET) $(TARGET).app

[C++] 343 GUI上の座標を自動クリック macOSのApplication Services

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

BBS閲覧アプリで右上のスレッドタイトルをクリックして、右下のスレッド欄をホバーしてもJavaScriptが機能せず、Fl_WebView上を1回クリックする必要があります。

このクリックを自動でさせるコードを書きました。macOSのApplication ServicesというAPIを使います。

これはCarbon APIに分類され、Mac OS(今はmacOS、その前はMac OS X、さらに前がMac OS)用のフレームワークをmacOSに移植したものです。

Objective-Cで書かれているために汎用性が低いCocoa APIとは異なり、C言語やC++で書かれているのでライブラリとしてそのまま使えます。

今回はFl_WebViewへの自動クリックに使いましたが、スレッド選択領域に戻る際にクリックが必要になるという副作用が生じたため採用は見送りました。

Carbon APIについては、いずれ切り捨てられてしまう可能性があるものの、それまでは活用する価値はあると思います。

#include <ApplicationServices/ApplicationServices.h>

Fl_Window* win; // 親ウィジェット
Fl_Window* win2; // 子ウィジェット

// 親ウィジェットは絶対座標
int x = win ->x();
int y = win ->y();
cout << "win x座標: " << x << " y座標: " << y << endl;

// 子ウィジェットは相対座標
int x2 = win2 ->x();
int y2 = win2 ->y();
cout << "win2 x座標: " << x_win << " y座標: " << y_win << endl;

// クリックイベントを作成
CGEventRef clickEvent = CGEventCreateMouseEvent(
    NULL, kCGEventLeftMouseDown,
    CGPointMake(x + x2 +5, y + y2 +5),
    kCGMouseButtonLeft
);

// イベントを送信
CGEventPost(kCGHIDEventTap, clickEvent);

// イベントを解放
CFRelease(clickEvent);

[C++] 342 BBS閲覧アプリの製作 その28 スレッドタイトル検索機能実装

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

これは簡単に実装できました。15分位でしょうか。

これで基本的な機能は一通り備わったように思います。ボードによってはまれにスレッドタイトル読込で落ちてしまったりしますが、ぼちぼち直していきます。

ソースファイルが13個になり分かりにくくなってきたので、複数フォルダへの振り分けを検討しています。

高度な検索にかけたり、過去ログも含めて管理するのでしたらMySQLなどデータベースの出番もあるのでしょうが、今の用途であれば都度2次元ベクター化で事足りますね。

#include "cppstd.h" // 自製ライブラリ
#include "MyTable.h"

extern vector<tuple<string, string, string, string>> numTitlePostnumID;
extern Fl_Input* searchInput;
extern MyTable* table;

void threadSearch(Fl_Widget *w, void*){
    vector<tuple<string, string, string, string>> searchResult;
    const char* word = searchInput -> value();

    for (const auto& tuple : numTitlePostnumID) {
        string title = std::get<1>(tuple);
        if (title.find(word) != string::npos) {
            searchResult.push_back(make_tuple(std::get<0>(tuple), std::get<1>(tuple), std::get<2>(tuple), std::get<3>(tuple)));
        }
    }

    int hitNum = searchResult.size();
    numTitlePostnumID = searchResult;

    table->SetSize(hitNum, 5);
}

[C++] 341 BBS閲覧アプリの製作 その27 リンク画像をポップアップ表示 JavaScript

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

画像のURLをマウスオーバーするとぼかし画像がポップアップ表示され、クリックすると加工無しの画像がポップアップ表示されるようにしました。

ここが山場になるかと構えていましたが、思っていたよりもあっさりでした。それでもChatGPTを駆使しながら4時間程度掛かっています。

最も手こずったのはクリックして指定サイズでポップアップさせるところでしょうか。どうしても普通にリンクを踏む形になって大きいサイズでの埋め込み表示になってしまいました。結局、event.preventDefault()でデフォルトのリンク処理をスキップして解決しました。

たまにポップアップの後に影が残ったりしますが、後日対応することにします。

マウスオーバーでぼかし画像表示
クリックで元の画像表示

<html lang="ja">
<HEAD>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="function.js"></script>
<STYLE TYPE="text/css">
    .popup-image {
        position: absolute;
        top: 0;
        left: 300px;
        width: 300px;
        height: auto;
        display: none;
        filter: blur(10px); // ぼかし加工
      }
    .popup-image2 {
        position: absolute;
        top: 0;
        left: 300px;
        width: 500px;
        height: auto;
        display: none;
    }
</STYLE>
</HEAD>
<BODY bgcolor="#ffffff">

<p id ='1'><font size="2" color="#008080">1 : テスト<br></font>
<font size="2" color="#000080">2023/07/22(土) 10:23:46.76 ID:xxx<br></font>
<font size="2" color="#000B00"> テスト <br> <a href="画像のURL" 
rel="noopener noreferrer" onmouseover="showImage(this,event);" onmouseout="hideImage();" 
onclick="showImage2(this,event);">画像のURL</a>
</font></p>

<script>
    // ぼかしあり画像表示
    function showImage(element,event) {
        var imageSrc = element.getAttribute("href");
        var imageElement = document.createElement("img");
        imageElement.src = imageSrc;
        imageElement.classList.add("popup-image");
        document.body.appendChild(imageElement);
        imageElement.style.display = "block";

        var rect = imageElement.getBoundingClientRect();
        var y1 = rect.top;
        console.log("Popup y1 = " + y1);

        var y2 = event.clientY;
        console.log("Popup y2 = " + y2);

        var y = -y1 + y2 -100;
        if (y < -y1){
            y = -y1;
        }
        console.log("Popup y = " + y);

        imageElement.style.top = y;
    }

    // ぼかしなし画像表示
    function showImage2(element,event) {
        event.preventDefault();

        var imageSrc = element.getAttribute("href");
        var imageElement = document.createElement("img");
        imageElement.src = imageSrc;
        imageElement.classList.add("popup-image2");
        document.body.appendChild(imageElement);
        imageElement.style.display = "block";

        var rect = imageElement.getBoundingClientRect();
        var y1 = rect.top;
        console.log("Popup y1 = " + y1);

        var y2 = event.clientY;
        console.log("Popup y2 = " + y2);

        var y = -y1 + y2 -100;
        if (y < -y1){
            y = -y1;
        }
        console.log("Popup y = " + y);

        imageElement.style.top = y;
    }
    
    // 画像消去
    function hideImage() {
        var popupImages = document.getElementsByClassName("popup-image");
        while (popupImages.length > 0) {
            var image = popupImages[0];
            image.parentNode.removeChild(image);
        }

        var popupImages2 = document.getElementsByClassName("popup-image2");
        while (popupImages2.length > 0) {
            var image2 = popupImages2[0];
            image2.parentNode.removeChild(image2);
        }
    }
</script>
  
</BODY></html>

[C++] 340 BBS閲覧アプリの製作 その26 モーダルダイアログ設定 / Fl_Button修正 セル灰色トラブル対策 FLTK

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

スレッドタイトルを選択して右クリックするとdatファイルを削除できますが、一応モーダルダイアログで確認するようにしました。

また右クリック時にセルがランダムに灰色になってしまう問題については、元ソースコードのFl_Button::draw関数に原因があることが判明しましたのでこれを修正しました。

具体的にはFl_Buttonにvalue関数でsetした値が1の場合はselection_color()である灰色になっていました。これをcolor()に変更しています。

作業効率を上げるためなのでしょうが、変数名が単純すぎるのも第三者から見ると読みにくくて仕方ないです。ただでさえC++の表現は記号が多くて抽象的なので、気を付けたいところです。

#include "MyButton.h"

MyButton::MyButton(int x, int y, int width, int height, const char *L)
 : Fl_Button(x, y, width, height, L) 
{
}

void MyButton::draw() {
    if (type() == FL_HIDDEN_BUTTON) return;
    Fl_Color col = value() ? color() : color();
    //   Fl_Color col = value() ? selection_color() : color(); // この行を修正
    draw_box(value() ? (down_box()?down_box():fl_down(box())) : box(), col);
    draw_backdrop();
    if (labeltype() == FL_NORMAL_LABEL && value()) {
        Fl_Color c = labelcolor();
        labelcolor(fl_contrast(c, col));
        draw_label();
        labelcolor(c);
    } else {
        draw_label();
    }
    if (Fl::focus() == this) draw_focus();
}

int MyButton::handle(int event) {
    switch (event) {
        case FL_ENTER :{ // マウスオーバー
            color(fl_rgb_color(160,216,239));
            redraw();
            return 1;
        }
        case FL_LEAVE :{ // マウスが離れる
            color(FL_WHITE);
            redraw();
            return 1;
        }
        case FL_PUSH:{ // マウスボタンを押す
            color(fl_rgb_color(0,255,255));
            redraw();
            return 1;
        }
        case FL_RELEASE :{ // マウスボタンを放す
            do_callback(FL_REASON_RELEASED);
            color(fl_rgb_color(FL_WHITE));
            redraw();
            return 1;
        }
        case FL_MOUSEWHEEL :
        case FL_FOCUS :
        case FL_UNFOCUS :
        case FL_KEYBOARD :
        case FL_SHORTCUT :
        case FL_DRAG :{
            return Fl_Button::handle(event);
        }
        default:{
            return Fl_Button::handle(event);
        }
    }
}

[C++] 339 BBS閲覧アプリの製作 その25 ホバー色設定 / 右クリックでdatファイル削除 FLTK

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

アプリに2つの機能を追加しました。

1.スレッド一覧にホバーした際、色が変わる。左クリックするとさらに色が変わる。マウスボタンを放すと元の色に戻る。

2.スレッドタイトルを右クリックするとdatファイルを削除する。

#include "MyButton.h"

MyButton::MyButton(int x, int y, int width, int height, const char *L) : Fl_Button(x, y, width, height, L) 
{
}

int MyButton::handle(int event) {
    switch (event) {
        case FL_ENTER :{ // マウスオーバー
            color(fl_rgb_color(160,216,239));
            redraw();
            return 1;
        }
        case FL_LEAVE :{ // マウスが離れる
            color(FL_WHITE);
            redraw();
            return 1;
        }
        case FL_PUSH:{ // マウスボタンを押す 
            color(fl_rgb_color(0,255,255));
            redraw();
            break; 
            // return 1にするとセルが灰色になり元に戻らない
            // breakはFl_Buttonを上書き?、return 1は追記?
        }
        case FL_RELEASE :{ // マウスボタンを放す
            do_callback(FL_REASON_RELEASED);
            color(fl_rgb_color(0,255,255));
            redraw();
            return 1;
        }
        default:
            return Fl_Button::handle(event);
    }
}
// 右ボタンクリックの場合はdatファイルを削除
    int buttonType = Fl::event_button();
    cout << "buttonType: " << buttonType << endl;
    
    if (buttonType == 3){ // マウス左ボタン:1,中央:2,右:3
        std::ifstream datFile(filename);

        if (datFile.is_open()) {
             if (std::remove(filename.c_str()) != 0) {
                cout << "datファイルの削除に失敗しました。" << endl;
            } else {
                cout << "datファイルが正常に削除されました。" << endl;
            }
            return;
        }
        return;
    }

[C++] 338 BBS閲覧アプリの製作 その24 GUIに変数が表示されない場合 / DL済レス数表示および自動スクロール JavaScript

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

これまではnew/deleteやmalloc/freeで変数をメモリに格納して解放するまで保持できるようにしていましたが、パブリック変数にするだけで同様の効果が得られることに今さら気が付きました。

変数名が分かってしまうとデータ改変の可能性が高まりますが、自分用のアプリだったら問題ないでしょう。まあ、スコープをむやみに広げるのは良くないですが。

リロード時刻をGUIに表示できず、少々手間取っているうちに他ソースファイルでの使用不使用に係わらずパブリック変数にしてしまえばいいという手抜きに気付いたのでした。

追加機能ですが、DL済レス数を表示できるようにしました。次にDATファイルをダウンロードして表示する際は前回ダウンロードした最後のレスへ自動スクロールします。

<script>
var element = document.getElementById(305);
var rect = element.getBoundingClientRect();
var y = rect.top;
console.log("toOldRes y = " + y);
scrollTo(0, y);
</script>

[C++] 337 BBS閲覧アプリの製作 その23 ポップアップ位置の改善 JavaScript

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

レスアンカーのポップアップの位置をFl_WebViewの先頭やや下に固定していましたが、視線の動きを減らすため、ホバーした位置の近くに変更しました。

正確にはホバー位置を基準に100px上方へずらしています。上にはみ出さないよう調整しています。

ところでアプリのサイズは今のところ2.7MBになります。curlやxml2ライブラリは含みません。かなり軽量でかつ高速です。

単機能Electronアプリ(JavaScript)210MBやJavaアプリを除くと、これまで作ってきたデスクトップアプリでは最大サイズになりました。ちなみにSwiftで作ったメモアプリiOS版、ChatGPTアプリiOS版はそれぞれ4.2MB、2.7MBです。

function showPopup(id, event) {
    var element = document.getElementById(id);
    element.style.visibility = (element.style.visibility == 'visible')? "hidden": "visible";

    var rect = element.getBoundingClientRect();
    var y1 = rect.top;
    console.log("Popup y1 = " + y1);

    var y2 = event.clientY;
    console.log("Popup y2 = " + y2);

    var y = -y1 + y2 -100;
    if (y < -y1){
        y = -y1;
    }
    console.log("Popup y = " + y);

    element.style.top = y;
}
<p id="251" class="tips"><font size="2" color="#008080">251 : 投稿者名
<br></font><font size="2" color="#000080">2023/07/23(日) 19:36:50.61 ID:xxx<br></font>
<font size="2" color="#000B00"> <span onmouseover = "showPopup(230,event);" onmouseout = "showPopup(230,event);" >
<a href="../xxx/230" rel="noopener noreferrer" target="_blank">>>230</a></span>
<br> 本文 </font></p>

[C++] 336 BBS閲覧アプリの製作 その22 Fl_WebViewにコンソール代替機能実装 JavaScript

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

Fl_WebViewはGoogle ChromeのようなWebブラウザに近い機能を持っていますが、さすがに検証機能はありません。

そこでコンソールのような機能を持たせるため、テスト用のポップアップ要素をあらかじめ仕込んでおき、必要時にテスト関数でポップアップに結果を出力させるようにしました。

下図の例では、GUI右下のスクロールボタンをホバーした時にテスト関数が動作し、その結果を右上のポップアップに出力しています。

この機能により、Fl_WebViewは最新のJavaScriptであるES2022に対応していることが分かりました。

普段はChromeの検証機能を使えばいいと思いますが、Fl_WebView固有の性質を調べる場合は今回の機能を使用します。

function test(){
    const msg = "This browser supports ES2022.";
    const msg2 = "This browser don't supports ES2022.";

    var element = document.getElementById("test");
    element.style.visibility = (element.style.visibility == 'visible')? "hidden": "visible";
    var rect = element.getBoundingClientRect();
    var y = rect.top;
    console.log("Popup y = " + y);
    element.style.top = -y + 20;

    try {
        eval('class Foo { #bar = 42; }');
        element.textContent = msg;
    } catch (error) {
        element.textContent = msg2;
    }
}