CLIP STUDIO READERの動作
CLIP STUDIO READERの動作をChrome拡張機能で制御したい
cf. 「みんなで見られるPDFビューア」を作る
若干リバースエンジニアリングっぽいけど..t6o_o6t.icon
イベントの種別
マウスでのイベントとペンタブレットでのイベントは別々だった
マウスは mouse 系
ペンタブレットでのイベントは pointer 系
ペンタブレットのイベント処理は_onMouseMoveにブレークポイント貼っても取れないので注意！！
現在ページの取得
基本的に状態は、「jQuery」オブジェクトのどこかにある
見つけたもの
jQuery.bookmark.getPageNumber()
戻り値の今いるページのindexを返す
0-based
setPageNumber(c,d)が対になっていると思うけど、実行しても画面は変わらなかった
ペンタブレットのクリック処理
_onPointerDown内を見る
pointer object
ポインタでクリックするたびに生成される
どこをクリックしたのかという情報が存在
moveのときにも生成される？
複数クリックを処理するためにこのような構造を取った？
複数のクリックイベントの同時存在を許し、IDで管理する
ページ移動はpointerDownではなくpointerUpで処理している
pointerUpの中にsetTimeoutがあって、そのコールバック時に非同期的にleftPageを呼び出している
直接的にはthreeDivisionTapFunctionがleftPageを呼び出す仕組み
leftPageは左側のページ
左側、右側という分割を spread と表現する
leftPageはnextPageを呼び出す
updateRender_screen？
updateRenderもある
updateRender_canvasもある
_initMenuでメニュー処理を初期化？
_init系はほかにもある
これらのメソッドはv.App_h5vオブジェクトに紐づいている
たどったら、appmainだった
appmainなどが実引数に渡されている関数呼び出しがあるので、そこを探ると他にも分かる
leftPage, rightPage, nextPageらの引数はBoolean
出来た
appmain.App_h5v.jumpPage(ページ数, コマ数, Boolean)
第三引数にはfalseを指定してみた
コード内でfalseを指定されているのを見たから
画面位置の同期はstyleを操作すれば良い？
Content Scriptsでは他のスクリプトのオブジェクトを参照できない
少なくともCLIP STUDIO READERとやり取りする部分はMAINで読み込ませる必要がある
その他の部分はISOLATEDでもOK
データはpostMessage APIで操作可能
code:example.js
const getAppmain = () => {
return appmain?.App_h5v ?? null;
}
const _comangaMain = () => {
const comangaAppmain = getAppmain();
comangaAppmain.comangaOriginalJumpFunc = comangaAppmain.checkPageDataAndJump;
comangaAppmain.checkPageDataAndJump = (C, M, J, H, I, A) => {
console.log("Page Jump called!");
console.group();
console.log(C, M, J, H, I, A);
comangaAppmain.comangaOriginalJumpFunc(C, M, J, H, I, A);
console.log("Page Jump end");
console.groupEnd();
}
}
_comangaMain();
ページの移動が発生した際に、所定の処理を行ってから移動するようにしたい
nextPageも、jumpPageも、checkPageDataAndJumpを共通で呼び出していた
引数
第1引数、第2引数はそれぞれ左右のページindex？
第3引数
nextPageなら1
prevPageなら-1
jumpPageなら999
実装するアプリ
Socket.IOを使用
要件①
互いの今いるページを確認できるようにする
これは、checkPageDataAndJumpのhandlerに、Socket.IOへの通信処理を挟めば良い
要件②
互いの今いるページにjumpできるようにする
要件③（今はまだ作らないと思う）
互いのページを同期できるようにする
あるユーザーがページを移動したら、他のユーザーもそれに追従できるようにする
追従先ユーザーを選択できるようにすると良い？
要件④
互いのマウスカーソル位置を表示する
要件⑤
画面内に線を書き込めるようにする
UI
https://scrapbox.io/files/654519a4b2d5ef001ce5c38c.png
リアルタイム共同編集
同時編集のマウスカーソル位置同期を試作中
Socket.io
サーバーの配置
サーバーは、異なるマシン上のChromeからアクセスできるものでなければならない
単にlocalhostで動かすのでは機能が不足する？
JPHACKS 2023 Hackdayでさくらのクラウドのクラウドクーポンもらったから使おうかな？
Socket.IOのioインスタンスをどこに保持するか？
各Chrome拡張機能内で保存する
ioは、popupとcontent scriptsから間接的に参照される
https://scrapbox.io/files/6545209ddfd56b001bdd1828.png
こういう構造にしよう
各メッセージは、構造化複製アルゴリズムに従う
code:message_type.ts
type BaseMessage = {
type: string
}
type MousePositionPayload = {
position: {
x: number,
y: number
}
}
type BrowserMousePositionMessage = {
type: "browser_mouse_position",
payload: MousePositionPayload
}
type BrowserPageJumpMessage = {
type: "browser_page_jump",
payload: {
left: number,
right: number,
way: -1 | 1 | 999
}
}
type PartialParticipant = {
id: string,
name: string,
color: string
}
type BaseParticipantMessage = BaseMessage & {
from: PartialParticipant
}
type PariticipantMousePositionMessage = BaseParitipantMessage & {
type: "patricipant_mouse_position",
payload: MousePositionPayload
}
type ParitipantPageJumpMessage = // ...
type RoomInfoJoinParticipantMessage = {
type: "roominfo_participant_join",
user: PartialParticipant
}
type RoomInfoLeaveParticipantMessage = // ...