Electronで外部からデータを受け取って何かしたい

こんにちは、牧長です。

先日、プロジェクターへ移した写真の上に、iPadでお絵かきした内容をスッと飛ばすと、お絵かきしたイラストが社員の上を飛び跳ねる
っていうようなシステムを作りました

今日もどこかの展示場で遊ばれていると思います

この話を聞いたときに、どう実装したら早く実装できるか、、、

と考えた時に、弊社の信尾がブログでちょこちょこ更新していた「Electron」使ったら楽じゃね？

ってことで、さっそくElectronを使った実装をしてみました

概要

さて、じゃあどうしようというところで
こんな感じにできるんじゃね？
って思いました

Electron側でメインプロセス側でHTTPサーバを待ち受け
POSTでデータを受け取り、レンダラプロセスに渡す

あ、もう出来た

さっそくやってみる

メインプロセスでPOSTを受け取る

Electronのメインプロセスはnodeで書けるので、使い慣れたExpressを使います


var http = express()
http.use(bodyParser.json({limit: '50mb'}));

http.listen(3000, () => {
    //console.log("Node.js is listening")
})
http.post('/api/picture', (req:any, res:any, next:any) => {
    //console.log(req.body.type)
    win.webContents.send('picture-receive', req.body.type, req.body.picture)

    res.json({
        result: true,
    })
});

これでExpressを使ってPOSTを受け取れました

あとは、プロセス間通信の準備です


contextBridge.exposeInMainWorld(
    'electron',
    {
        picture: (callback:(type:number, text:string)=>void) => {
            ipcRenderer.on('picture-receive', (event:any, type:number, picture:string)=>{
                callback(type, picture)
            });
        }
    }
);

最後にレンダラープロセスで、メインプロセスから受け取る準備


const initialize = () => {
    // 画像が送信された来た時のコールバック設定
    window.electron.picture((type:number, picture:string)=>{
        // 何かの処理
    }
}

ここで受け取ったbase64化された画像データをCanvasとかに書き出して

Electronマジ便利

Electron使ったら、マルチプラットフォームのデスクトップアプリケーションがWeb技術を使って作れちゃうの
控えめに言ってすごく便利ですね

C#でフォームアプリを作る機会はちょこちょこあるのですが、これからはElectronでいいかも、、、！

Blogブログ