[C++] 347 BBS閲覧アプリの製作 その31 無効なシーケンス混入による文字コード変換失敗 iconv / CP932

[Mac M2 Pro 12CPU, MacOS Ventura 13.3.1, clang 14.0.3]
(今回からM2 Pro 12コアCPUを使用)

とあるdatファイルをCP932からUTF-8へ変換しようとしたところエラーになりました。

どうやら無効なシーケンスが混ざっているようです。

以下のようにConvertShiftJISToUTF8関数を修正しました。

string ConvertShiftJISToUTF8(const string& input) {
    string output;

    // iconv_t cd = iconv_open("UTF-8", "SHIFT_JISX0213");
    iconv_t cd = iconv_open("UTF-8", "CP932");
    if (cd == (iconv_t)-1) {
        std::cerr << "Error: Failed to open iconv" << std::endl;
        return output;
    }

    size_t inBytes = input.size();
    size_t outBytes = inBytes * 4;
    char* inBuf = const_cast<char*>(input.c_str());
    char* outBuf = new char[outBytes];
    char* outPtr = outBuf;

    while (iconv(cd, &inBuf, &inBytes, &outPtr, &outBytes) == (size_t)-1) {
        if (errno == EILSEQ) {
            std::cerr << "EILSEQ:入力バッファに無効なシーケンスが含まれている" << std::endl;
            inBuf += 1; // 無効なシーケンスの分だけ入力バッファを進める
            inBytes -= 1; // 無効なシーケンスの分だけ入力バッファのサイズを減らす

        } else if (errno == EINVAL) {
            std::cerr << "EINVAL:入力バッファの終端が不完全" << std::endl;
            delete[] outBuf;
            iconv_close(cd);

            return "";
        } else if (errno == E2BIG) {
            std::cerr << "E2BIG:出力バッファが不足している" << std::endl;
            delete[] outBuf;
            iconv_close(cd);

            return "";
        } else {
            std::cerr << "その他のエラー" << std::endl;
            delete[] outBuf;
            iconv_close(cd);

            return "";
        }
    }
    output.assign(outBuf, outPtr - outBuf);

    delete[] outBuf;
    iconv_close(cd);

    return output;
}

ChatGPTに有益なヒントをもらいましたが、例示するコードが実にいい加減で少し振り回されました。追及しても虚偽説明が積み上がっていくばかりで無意味なやりとりになります。ChatGPTはネット情報から引用するだけで、検証する能力は皆無ですね。まあそんなもんです。

datファイルがCP932ではなく他のシフトJISを採用している可能性も考えましたが、今回は当てはまりませんでした。

ちなみにCP932(Windows-31J)と他のシフトJISとの文字集合の関係は以下のオイラー図のようになります。CP932は黄色です。

User:Hissakun~commonswiki, CC 表示-継承 3.0, https://commons.wikimedia.org/w/index.php?curid=82138426による

[C++] 346 BBS閲覧アプリの製作 その30 レス番号へスクロール JavaScript

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

レスアンカー先へクリックでスクロールできるようにしました。

意外と手間取りました。HTML埋め込みのJavaScriptではtopプロパティで絶対Y座標が取得できるのですが、JavaScriptファイルでは相対Y座標でした。

なのでwindow.scrollYで現在位置を把握し、これにアンカー先の相対Y座標を加算する形になります。

// クリックしたレス番号までスクロール
function moveToRes(element){
    var resNum = element.innerText.replace(/>>/g, '');
    console.log("resNum: " + resNum);

    var targetElement = document.getElementById(resNum);
    var rect = targetElement.getBoundingClientRect();
    var yTo = rect.top;
    console.log("yTo = " + yTo);

    var currentY = window.scrollY;
    var scrollToY = currentY + yTo;
    console.log("scrollToY = " + scrollToY);

    scrollTo(0, scrollToY);
}

[JavaScript] 16 変数をファイルにして自動ダウンロード Blobオブジェクト

[M1 Mac, MacOS Ventura 13.3.1]

JavaScript内で生成した変数を他のプログラムで使えるようにするのは、C++ユーザーにとって最初はなかなか難易度が高いです。セキュリティ対策のため、JavaScript(非Node.js)はローカルファイルを作成して保存することができません。

今回はBlobオブジェクトを使ってファイル化しダウンロードするようにしました。

ChromeやEdgeでは自動的にダウンロードされ、Safariでは許可ボタンのクリックを経てダウンロードされます。つまりSafariでは自動化不可です。

ただ、モーダルダイアログにある許可ボタンの座標が分かれば、最近紹介したmacOSのApplication Servicesを使って自動クリックできそうな感じではあります。ややこしそうなので今回はやめておきます。

製作中のBBSブラウザで使用しているFl_WebViewはダウンロード機能を実装していないため、変数をファイル化してもダウンロードはできません。

// クリックしたaタグを含むpタグのIDを取得、ファイル化してダウンロード
function getID(element) {
    let id = element.closest('p').id;
    console.log("id = " + id);
  
    let data = new Blob([id], { type: 'text/plain' });
    let link = document.createElement('a');
    link.href = URL.createObjectURL(data);
    link.download = 'test.txt';
    link.click();
}

[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;
    }