GitHub APIのusersに成功した。

ブツ

インストール＆実行

NAME='Electron.net.request.ok.20220814143228'
git clone https://github.com/ytyaru/$NAME
cd $NAME
npm install
npm start
  1. db/setting.jsonにusersスコープ権限をもったアクセストークンをtokenプロパティの値としてセットする
  2. 再起動する
  3. 端末に以下標準出力が出る（リクエスト成功）
STATUS: 200
HEADERS: ...
BODY: {
  "login": "ytyaru",
  "id": 19922005,
  ...
}

ちなみに前回はブラウザの開発ツールのコンソールで以下のようなエラーが出たが、今回は成功した。

Uncaught (in promise) Error: An object could not be cloned.

プロジェクト作成

独自にプロジェクトを作成したいとき。

NAME=electron-github-api
mkdir $NAME
cd $NAME
npm init -y
npm i electron -D

コード抜粋

main.js

const { app, BrowserWindow, ipcMain, dialog, net } = require('electron')

ipcMain.handle('request', async(event, params, onData=null, onEnd=null)=>{
    console.log('----- request -----')
    console.log(params)
    const request = net.request(params.params)
    if (params.hasOwnProperty('body')) { request.write(params.body) }
    console.log(request)
    request.on('response', (response) => {
        console.debug(`STATUS: ${response.statusCode}`)
        console.debug(`HEADERS: ${JSON.stringify(response.headers)}`)
        response.on('data', (chunk) => {
            console.debug(`BODY: ${chunk}`)
            if (onData) {
                onData(JSON.parse(chunk), response)
            }
        })
        response.on('end', () => {
            console.debug('No more data in response.')
            if (onEnd) {
                onEnd(response)
            }
        })
    })
    // リクエストの送信
    request.end()
})

ElectronのAPI net.request を使ってWebAPIを実行する。

preload.js

const {remote,contextBridge,ipcRenderer} =  require('electron');
contextBridge.exposeInMainWorld('myApi', {
    request:async(params)=>await ipcRenderer.invoke('request', params, onData=null, onEnd=null),
})

IPC通信でElectronとブラウザの文脈を仲介する。

renderer.js

window.addEventListener('DOMContentLoaded', async(event) => {
    console.log('DOMContentLoaded!!');
    const setting = await Setting.load()
    if (setting?.github?.token) {
        document.getElementById('github-token').value = setting.github.token
        await window.myApi.request({
            params: {
                method: 'GET',
                url: 'https://api.github.com/user',
                headers: {
                    'Authorization': `token ${setting.github.token}`,
                },
            },
        },(json, res)=>{
                console.debug(res)
                console.debug(json)
            },(res)=>{
                console.debug(res)
            })
    }
})

色々試した結果、オブジェクトにコールバック関数を含めなければ成功するっぽい。

オブジェクトにコールバック関数があると、前回のように以下エラーが出る。

Uncaught (in promise) Error: An object could not be cloned.

よくわからないが、とにかくそうなる。たぶんIPC通信かElectronの文脈かのどちらかにおいて、オブジェクトの中に関数を入れることはできないのだろう。

なんだかElectronを触るたびに制約が出てきてHTML,CSS,JSで作成できるというお題目が形骸化してゆく感じがする。モヤモヤする。騙された気分。

とりあえず動作したから一旦これで良しとする。

あとはこれでリモートリポジトリを作成するGitHub APIを叩いてみたい。それができたらHTML化したつぶやきページをアップロードできるのではないかと期待している。