たていす@lemmy.juggler.jp

たていす@lemmy.juggler.jp

概要

やまこさんがMatrixのステッカーパックの自作を成功させていたので、ほぼそのまま試してステッカーパックを作って使ってみます。

条件

GitHubにアカウントがあり、他のリポジトリをフォークして更新できる程度の経験があること。
Matrixサーバにアカウントがあること。(一般ユーザでOK)
Python3.6以上を動かせる環境が手元にあること。

フォークとGitHub Pageの設定

今回利用する maunium/stickerpicker は GitHub Pages でのステッカーパック公開が想定されています。

Githubのサイトで以下の操作を行います。

https://github.com/maunium/stickerpicker をフォークする
フォークしたリポジトリの「Settings => GitHub Pages => Source」にmaster ブランチを指定してSaveボタンを押す。
"Your site is ready to be published at https://tateisu.github.io/stickerpicker/. " のような表示が出ることを確認する。

作業環境

$ cat /etc/issue
Ubuntu 18.04.3 LTS \n \l
$ sudo apt install python3 python3-distutils
$ python3 --version
Python 3.6.9

クローンとpythonの設定

gitリポジトリのURLはフォークしたものに置き換えてください。

$ git clone git@github.com:tateisu/stickerpicker.git stickerpicker
$ cd stickerpicker/
$ virtualenv -p python3 .venv
$ source .venv/bin/activate
$ pip install .

フォルダを作って画像を入れる。ピッカー上ではファイル名順に並ぶらしい。

$ find jugglerJp/ -ls
 12847750      4 drwxr-xr-x   2 tateisu  tateisu      4096 Mar 11 18:13 jugglerJp/
 12847772     44 -rw-r--r--   1 tateisu  tateisu     44580 Mar 11 18:13 jugglerJp/camera.jpg
 12847774     32 -rw-r--r--   1 tateisu  tateisu     28854 Mar 11 18:13 jugglerJp/chestnut.jpg
 12847775      8 -rw-r--r--   1 tateisu  tateisu      4355 Mar 11 18:13 jugglerJp/hohoemi.png
 12847771     40 -rw-r--r--   1 tateisu  tateisu     39748 Mar 11 18:13 jugglerJp/buta.jpg
 12847770      8 -rw-r--r--   1 tateisu  tateisu      6868 Mar 11 18:13 jugglerJp/bonus_item.png
 12847773    300 -rw-r--r--   1 tateisu  tateisu    305326 Mar 11 18:13 jugglerJp/cat.png
 12847768     56 -rw-r--r--   1 tateisu  tateisu     54107 Mar 11 18:13 jugglerJp/announce-san-1.jpg
 12847769     52 -rw-r--r--   1 tateisu  tateisu     49467 Mar 11 18:13 jugglerJp/announce-san-2.jpg

Matrixアカウントのアクセストークンを調べる

Element-Webの設定のヘルプの下の方にあるアクセストークンの文字列をコピーしておきます。 sticker-packスクリプトがMatrixサーバに画像をアップロードする際に必要です。

sticker-pack コマンドの概要

$ sticker-pack --help
usage: sticker-pack [-h] [--config file] [--title title] [--id id]
                    [--add-to-index path]
                    path

positional arguments:
  path                 Path to the sticker pack directory

optional arguments:
  -h, --help           show this help message and exit
  --config file        Path to JSON file with Matrix homeserver and
                       access_token
  --title title        Override the sticker pack displayname
  --id id              Override the sticker pack ID
  --add-to-index path  Sticker picker pack directory (usually 'web/packs/')

パックする

$ sticker-pack --add-to-index web/packs/ --title "juggler.jpステッカー" jugglerJp
Matrix config file not found. Please enter your homeserver and access token.
Homeserver URL: https://matrix.juggler.jp/
Access token: {CENSORED}
Access token validated (user ID: @tateisu-test2:matrix.juggler.jp)
Wrote config to config.json
Processing announce-san-1.jpg... uploaded
(snip…)
Processing subwayTooter.png... uploaded
Wrote pack to jugglerJp/pack.json
Copied pack to web/packs/jugglerJp.json
Added jugglerJp.json to web/packs/index.json

初回はホームサーバURLとアクセストークンを尋ねられます。 config.json に保存されて次回以降は尋ねられません。 ** config.jsonのパーミッションを適切に変更しておきましょう **

この時点でステッカー画像はサーバにアップロードされてます。

リポジトリに上げる

git add web/packs git commit -a -m “add web/packs” git push

push後は以下のURLが見えます。

https://tateisu.github.io/stickerpicker/web/packs/index.json https://tateisu.github.io/stickerpicker/web/packs/jugglerJp.json

ここまでで提供者としてのセットアップは終わりです。

Element-Webにステッカーパックを指定する

Elements-Webでチャット入力欄に /devtools を入力して管理者ツールを開く。

「アカウントのデータを調べる」を選んで m.widgets で絞り込む。

何も出なかった場合

開発者ツール => 「アカウントのデータを送信する」で以下の内容を送信する。

「イベントの形式」に m.widgets
「イベントの内容」に以下のjson

{
    "jugglerJp": {
        "content": {
            "type": "m.stickerpicker",
            "url": "https://tateisu.github.io/stickerpicker/web/?theme=$theme",
            "name": "jugglerJp",
            "data": {}
        },
        "sender": "@tateisu-test2:matrix.juggler.jp",
        "state_key": "jugglerJp",
        "type": "m.widget",
        "id": "jugglerJp"
    }
}

既に既存のウィジェットが存在した場合

そのjsonデータをコピーして↑のjsonとマージしたものを送りましょう。なお、同じ種類のウィジェットは同時に1つしか設定できないようでした。いくつか並べて試してみましたが出てきたのは最初の一つのパックだけ。

動作確認

送信してdevtoolsを閉じたらリロードなしでステッカーが使えてるはずです。

Chromeではサードパーティクッキーの許可が必要です

Chromeで出たエラー。

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at https://tateisu.github.io/stickerpicker/web/src/frequently-used.js:16:43

ブラウザの設定でサードパーティクッキーを許可してからリロードすると解決しました。

カスタムステッカーパックを作って/使ってみる