Hyperappでhtml要素の真偽属性を操作する

※この記事は『金麦 RICH MALT』を飲みながら書かれた。

hyperappのviewはh関数で作る。これは公式サイトのサンプルだ。

const view = (state, actions) =>
  h("div", {}, [
    h("h1", {}, state.count),
    h("button", { onclick: () => actions.down(1) }, "-"),
    h("button", { onclick: () => actions.up(1) }, "+")
  ])

h関数は3つの引数をとる。1つ目はタグ名、2つ目は属性を列挙したハッシュ、3つ目は子要素だ。ここで属性はハッシュなので、キーとバリューのペアが必要だ。しかし全ての属性がキーとバリューのセットで用いられるわけではない。たとえばreadonlyは値をセットする必要がなく、存在することによって機能する。

ここでHTML5の真偽属性の仕様を確認する。

checkedおよびdisabledとなるチェックボックスの例を示す。checkedおよびdisabled属性は真偽属性である。

<label><input type=checkbox checked name=cheese disabled> Cheese</label>

これは次に書かれるものと等価であるべきである:

<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>

スタイルを混在させることもできる。以下は依然として等価である:

<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

どういうことかというと、以下の3つはどれでもいい(参考)。

  • disabled
  • disabled=disabled
  • disabled=””

つまり真偽属性を変化させたいときは以下のように書きわけることができる。

h("input", {readonly=""}, "")
h("input", {not-readonly=""}, "")

これをhyperappの枠組みで考えるとこうなる。

const state = {
  readonly: "readonly"
}

const actions = {
  writable: () => state => ({ readonly: "not-readonly" })
}

const view = state => h("input", { [state.readonly]: "" }, "")

viewのh関数の第2引数のハッシュで、ブラケット記法を用いてキーの方を変更する。バリューはなんでもいい。

Mastodonに自動ハッシュタグ機能をつけた

アニメ実況時は同じハッシュタグで継続的にツイートする。よってハッシュタグを保持し自動的に付加し続けてくれる機能は便利だ。作った。

やたらとトゥートの反映が遅いのはサーバーがイマイチだからかな…

この機能追加はReact+Reduxの処理階層を知っていれば全然難しくない。まずハッシュタグ入力欄と、そこへの入力を処理するaction, reducer, stateを作る(全部compose-formのコピー)。さらにCtrl+Enterによるトゥートを処理するhandleKeyDownにShift+Enterによって発火する別ルートのトゥート投稿処理を追加する。これもトゥートボタンによって発火する処理をほとんどコピー。そのルートの最後にあるのがこれ。

const status = getState().getIn(['compose', 'text'], '') + ' ' + getState().getIn(['compose', 'preservedHashtag']);

これだけが実質的に意味のあるコードだ。興味のある方はコミットログをどうぞ。

1年前のドワンゴインターンではJavaScriptが全然わからず(わからなかったのはJavaScriptだけではないが)チームメンバーに教えてもらっていたが、今では自力で触れるようになった。

Mastodonでハッシュタグ補完すると1文字目が勝手に確定する問題

Mastodon(v2.5.0rc1)でトゥート入力時にペーストでハッシュタグを入力すると、ハッシュタグ補完機能でハッシュタグの候補が表示される。それをEnterやクリックで確定して投稿すると、次のトゥートを入力するときに日本語入力を有効にしていても1文字目が勝手に確定される。

1文字目が勝手に確定されるという現象は割とよくあるやつで、slackでもTwitter公式でも発生した事例はある。しかし今回はハッシュタグ補完時のみという条件があるので、もしかしたらハッシュタグ補完が発生したときにはトゥート投稿時の投稿欄の情報リセット忘れがあるのかもしれない。現在ソースコードを確認中だ。

なおfriends.nicoでも同様の現象が起きることを確認済み。OSはUbuntu18.04で日本語入力はmozcだ。書いてて思ったが変換の方で何か悪さをしている可能性は十分ある。あるいはデスクトップ環境かも知れないし、ブラウザかも知れない。なかなか手強そうだ。

スプラップアンドビルド

※この記事は『極搾り ピーチ』を飲んで書かれた。

マストドンにelasticsearchをつけようと思ったらなんか壊れてしまったので作り直した。

なんか壊れてしまったというのは、マウント関連だ。リバースプロキシであるnginx-proxyは設定ファイルを外部から読み込むために、ホストの設定ファイル(./my_custom_proxy_settings.conf)をマウントしている。この状態で更にvolumes_fromでmastodon-nginxからnginx-proxyをマウントするとなんだかよくわからないがマウント関連っぽいエラーが出る。read onlyとかなんとか書いてあった。

この2重マウントは僕もわけがわからずやっているが、そんなことだからエラーが出るのは当然だ。面倒なので一回全部消してマストドンを立て直した。前回のデプロイから1週間ちょっとしか経っていないが、github上のデプロイガイドが書き換わっていて驚いた。mastodonの進化はまことに速い。

新しいdocker-compose.ymlはこうだ。今回は自分で改造することも視野に入れ、自前でビルドすることにした。なおmastodonのバージョンはv2.5.0rc1だ。

version: '3'
services:

  mstdn-nginx:
    image: nginx:1.11.10-alpine
    expose:
      - "9090"
    restart: always
    tty: false
    env_file: .env.production
    links:
      - web
      - streaming
    volumes:
      - ./setting/nginx/conf.d:/etc/nginx/conf.d:ro
      - ./setting/nginx/conf:/etc/nginx/conf/:ro
      - /var/www/certs:/etc/nginx/certs:ro
    networks:
      - common_link
      - back-mastodon
  db:
    restart: always
    image: postgres:9.6-alpine
    networks:
      - back-mastodon
### Uncomment to enable DB persistance
    volumes:
      - ./postgres:/var/lib/postgresql/data

  redis:
    restart: always
    image: redis:4.0-alpine
    networks:
      - back-mastodon
### Uncomment to enable REDIS persistance
    volumes:
      - ./redis:/data

  es:
    restart: always
    image: docker.elastic.co/elasticsearch/elasticsearch-oss:6.1.3
    environment:
      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
    networks:
      - back-mastodon
### Uncomment to enable ES persistance
    volumes:
      - ./elasticsearch:/usr/share/elasticsearch/data

  web:
    build: .
    image: tootsuite/mastodon
    restart: always
    env_file: .env.production
    command: bash -c "rm -f /mastodon/tmp/pids/server.pid; bundle exec rails s -p 3000 -b '0.0.0.0'"
    networks:
      - back-mastodon
    ports:
      - "127.0.0.1:3000:3000"
    depends_on:
      - db
      - redis
#      - es
    volumes:
      - ./public/assets:/mastodon/public/assets
      - ./public/packs:/mastodon/public/packs
      - ./public/system:/mastodon/public/system

  streaming:
    build: .
    image: tootsuite/mastodon
    restart: always
    env_file: .env.production
    command: yarn start
    networks:
      - back-mastodon
    ports:
      - "127.0.0.1:4000:4000"
    depends_on:
      - db
      - redis

  sidekiq:
    build: .
    image: tootsuite/mastodon
    restart: always
    env_file: .env.production
    command: bundle exec sidekiq -q default -q mailers -q pull -q push
    depends_on:
      - db
      - redis
    networks:
      - back-mastodon
    volumes:
      - ./public/packs:/mastodon/public/packs
      - ./public/system:/mastodon/public/system
## Uncomment to enable federation with tor instances along with adding the following ENV variables
## http_proxy=http://privoxy:8118
## ALLOW_ACCESS_TO_HIDDEN_SERVICE=true
#  tor:
#    build: https://github.com/usbsnowcrash/docker-tor.git
#    networks:
#      - common_link
#      - back-mastodon
#
#  privoxy:
#    build: https://github.com/usbsnowcrash/docker-privoxy.git
#    command: /opt/sbin/privoxy --no-daemon --user privoxy.privoxy /opt/config
#    volumes:
#      - ./priv-config:/opt/config
#    networks:
#      - common_link
#      - back-mastodon

networks:
  common_link:
    external: true
  back-mastodon:
    external: true

注目してほしいのはmstdn-nginxのvolumesでホストマシンの/var/www/certsをマウントしていることだ。nginx-proxyでもホストマシンの同じディレクトリをマウントしている。2重マウントを解消し同じディレクトリをマウントするようにした。

elasticsearchはデフォルトで日本語対応してません。日本語対応プラグインを入れるのはちょっとしんどそうなのでまた今度やります。

ぶっ壊してまたイチから作ってというのを繰り返せるのは楽しい。無限にやりたい。

Ubuntu18.04はlibinput

※この記事は『本搾り オレンジ』を飲みながら書かれた。

昨日の記事の続きだ。新しいデバイス名を指定することで変換行列を指定することには成功した。しかし奇妙な現象が発生した。Kritaで絵を描くとき、細い線が引けないのだ。よく調べてみると、筆圧が5%を超えるまでクリック判定が発生していなかった。これをつぶさに調べる過程でデバイス名が変わっていた理由も判明した。

なぜUbuntu18.04にアップグレードするとデバイス名が変化していたのか。なぜ筆圧とクリックの挙動が変わってしまったのか。それはlibinputのせいだ。libinputはデバイス入力ドライバで、xinputの奥で動いているものらしい。16.04では液晶タブレットはevdevドライバで動いていた。18.04ではlibinputドライバが導入され、液晶タブレットの管理もlibinputに引き継がれたようだ。

考えるのが面倒だったのでlibinputを消したら解決した。

sudo apt purge xserver-xorg-input-libinput

libinputを消したらマウスの加速プロファイルが変わってしまって違和感があった。GNOME Tweaksから設定をFlatに戻したら直った。

今日のUI心理学

やろうと思ったんですが、ゲシュタルトの法則を一つずつ紹介していくだけだとクソつまんないのでもうちょっと面白いところまで読み進むのを待っててください。

Ubuntu18.04へのアップグレードに伴うデバイス名の変化

Ubuntu16.04で液晶タブレット(UGEE HK1560)をデュアルディスプレイで使うとき、ペンタブレットの入力を片方のディスプレイのみにマッピングするためにはxinputの”Coordinate Transformation Matrix”プロパティを使う。

私の場合は左のディスプレイ(液晶タブレット)が1920×1080で右のディスプレイが2560×1440だ。つまり液晶タブレットの入力はそのままだと2つのディスプレイをつなげた4480×1440の長方形にマッピングされる。これを左のモニターのみにマッピングするためには、x座標0~4480を0~1920に、y座標0~1440を0~1080に写像するような変換行列を用いる(3行3列の1はたぶん筆圧は無変換っていう意味だったと思う)。

さて、これを実行するコマンドは
xinput set-prop "UC-Logic TABLET MONITOR Pen" --type=float "Coordinate Transformation Matrix" 0.428571 0 0 0 0.75 0 0 0 1
だっ。Ubuntu16.04では。

Ubuntu18.04にしてからこのままのコマンドでは以下のようなエラーを吐くようになった。

X Error of failed request:  BadMatch (invalid parameter attributes)
  Major opcode of failed request:  131 (XInputExtension)
  Minor opcode of failed request:  57 ()
  Serial number of failed request:  19
  Current serial number in output stream:  2

なんだこれは?ググっても全然わからない。そもそもLinuxでペンタブレットを使おうという変態の絶対数が少ない。

xinputでデバイス名を確認したらこうなっていた

⎡ Virtual core pointer                    	id=2	[master pointer  (3)]
⎜   ↳ Virtual core XTEST pointer              	id=4	[slave  pointer  (2)]
⎜   ↳ UC-Logic TABLET MONITOR Mouse           	id=10	[slave  pointer  (2)]
⎜   ↳ E-Signal COUGAR Minos X3                	id=11	[slave  pointer  (2)]
⎜   ↳ E-Signal COUGAR Minos X3                	id=12	[slave  pointer  (2)]
⎜   ↳ LingYao ShangHai Thumb Keyboard         	id=16	[slave  pointer  (2)]
⎜   ↳ UC-Logic TABLET MONITOR Pen Pen (0)     	id=18	[slave  pointer  (2)]
⎣ Virtual core keyboard                   	id=3	[master keyboard (2)]
    ↳ Virtual core XTEST keyboard             	id=5	[slave  keyboard (3)]
    ↳ Power Button                            	id=6	[slave  keyboard (3)]
    ↳ Power Button                            	id=7	[slave  keyboard (3)]
    ↳ Sleep Button                            	id=8	[slave  keyboard (3)]
    ↳ UC-Logic TABLET MONITOR Pen             	id=9	[slave  keyboard (3)]
    ↳ Mistel MD600                            	id=13	[slave  keyboard (3)]
    ↳ Mistel MD600                            	id=14	[slave  keyboard (3)]
    ↳ LingYao ShangHai Thumb Keyboard         	id=15	[slave  keyboard (3)]
    ↳ E-Signal COUGAR Minos X3                	id=17	[slave  keyboard (3)]

理屈はわからないが、なぜかこれまで使っていたデバイス名”UC-Logic TABLET MONITOR Pen”はキーボード扱いになっていた。その代わりに”UC-Logic TABLET MONITOR Pen Pen (0)”という怪しげなデバイスが出現している。先ほどのコマンドのデバイス名をこちらに入れ替えたところ、成功した。

LinuxでHK1560は普通に使える。筆圧も取れる。ワコムの同サイズ製品は18万円するのに対してHK1560は現在4万円だ(こちらはFHDであちらは4Kだが)。ガラスの厚みによる視差は液タブの宿命として当然あるが、それはワコムだろうとゼロにはできない以上程度の問題でしかない。発色が悪いと言われている(おそらく1677万色ではない)が、僕はそもそもきちんとキャリブレーションされたモニターを一つも所有していないのでこれを問うのは無意味だ。ペン先の沈み込みもよく不安がられる要素だが、ワコムの飛び出したり引っ込んだり不安定なペン先よりは弾力のあるこちらのペンの方が描きやすく、筆圧も自然につけられる。ワコムはドライバが不安定だと言われるが、こちらはLinuxで幅広く使われているxinputで作業中のトラブルは一度もない。

描画ソフトにはKritaを使っている。非常に大きな特徴として消しゴムツールが存在しない(全てのブラシツールに消しゴムモードがあり、オンオフして使う)ことが挙げられるが、慣れればどうということはない。

実はメインマシンをUbuntuに変えるときにこの辺りの用途がきちんとこなせるか不安だったのだが、マッピングを解決するだけですぐに使えたことで僕の中でのUbuntuへの信頼が高まった。

今日のUI心理学

2.2 類同

見た目が似ているものはグループとして見える。当たり前だね。小学生がやるみたいにメニューの項目で1つずつ色を変えたりしてはいけないということだ。

ぐぎぎぎぎぎ

使い慣れたものの感覚を捨てて新しいものに慣れようとしているときの僕が発する音。

2017年春からVirtualboxでUbuntuを使っており、2018年1月からはメインPCもUbuntuにした。ずっとUnityデスクトップを使ってきた。2018年春にUbuntu18.04がリリースされ、7月末には16.04からのアップグレード機能が提供された。

16.04は2021年までサポートされるが、僕は新しいものが好きだし、飛び移るときの高低差が小さいうちにどんどん新しいものに移っていくことが時代に取り残されないために大切なことだと思うので18.04にアップグレードした。

OSの機能としては特に変化は感じない。性能やセキュリティが若干向上しているらしい。大きく変化したのはデスクトップ環境だ。UnityからGNOME3に変わった。タイトルバーやらトップバーが無意味に空間を占拠していることに憤りは感じているが、空間の効率的な利用は絶対的な善なのでGNOMEにもやがてLIMが導入されるだろう。

GNOMEには多彩な拡張機能があるが、ちゃんと動かないものや組み合わせると動かないものなどがあり、気持ちが悪い。「拡張機能で自由自在」というのはよくない。ユーザーが好き勝手に拡張機能を作るということは、それらの間で爆発的に増えていく組み合わせのパターンを管理する人間がいないということだ。バニラが一番不愉快なエラーに遭遇しにくいし、だからこそバニラの使い心地こそが重視されるべきだ。

これはChrome拡張でOperaのスピードダイヤルを再現したものだ。見ればわかるが、右端に隙間がある。設定上は「4列」にしてあるにもかかわらずなぜか3列+空き列になる。実はさっきまでこの現象は直っていたのだが、GNOMEのbuggyな拡張を全部消したら戻ってしまった。ままならない。この左右非対称性にはいつまで経っても慣れない。気持ちが悪い。

今日は実験プログラムの最終調整(いつまで最終調整してるんだ)をした。同期が学部生向けの授業で使う実験プログラムをつくるらしいのだが、どうやらいつ誰が作ったかもわからない、ソースコードも残されていないプログラムを作り直す案件らしい。悲しい話だ。メンテナンスする人間がいなくなり、する方法も失われたプログラムの末路は死しかない。

明日は内定者懇親会ということで、内定先の金で銀座のうまい飯が食える。どうせなら映画もなにか見に行きたいところだ。

Mastodonを立てる(Docker + nginx-proxy + letsencrypt-nginx-proxy-companion)2018年8月版

1.nginx-proxy + letsencrypt-nginx-proxy-companion

すでに同じサーバー上で他のアプリを動かしていたので、nginx-proxyを使った。ついでにletsencrypt-nginx-proxy-companionも使い、https化も自動化した。まずこの2つでdocker-compose.ymlを書いておく。

nginx-proxyはデフォルトであるサイズ(1MB?)以上のファイルのアップロードを受け付けない。これを超えるサイズの動画の投稿などを可能にしたいので自前のカスタム設定用のファイルを作り、マウントしている。

dockerネットワークを作る

dockerのコンテナ間の通信はdocker networkで行う。

  • common_linkはmastodonを動かすnginxサーバーとnginx-proxyの通信を行う
  • back-mastodonはmastodonを構成する各コンテナ間での通信を行う
$ docker network create --driver bridge common_link
$ docker network create --driver bridge back-mastodon

なおdocker networkの管理に有用なコマンドを書いておく

# ネットワークの一覧を表示する
$ docker network ls
# ネットワークの詳細を表示する
$ docker network inspect <network名>
# 使用されていないネットワークを削除する
$ docker network prune

動作確認(必要なら)

mastodon以外にすでにdockerで動かしているアプリがある場合、ネットワークの設定を修正する。私はwordpressを動かしていたのでその例を示す。変更点は2つ。

  1. nginx-proxyと通信するコンテナには環境変数としてVIRTUAL_HOST, LETSENCRYPT_HOST, LETSENCRYPT_EMAILを与える。
    • VIRTUAL_HOSTにはサブドメイン名(ここでは違うが)を設定する。のちのちmastodonにはanimedon.chao.tokyoというサブドメイン名を設定するので、chao.tokyoとanimedon.chao.tokyoのどちらにアクセスされたかによって違うコンテナを呼び出せるようになる。なおサブドメイン名はお名前ドットコムで設定した。
    • LETSENCRYPT_HOSTとLETSENCRYPT_EMAILはletsencrypt-nginx-proxy-companionのための環境変数。前者にはVIRTUAL_HOSTと同じ値を、後者にはletsencryptの通知メールを受け取るメールアドレスを設定する。
  2. 先ほど設定したネットワークを使用する
    • トップレベルにnetworksを作り、先ほど作ったcommon_linkというネットワークを利用することを明示する
    • 各コンテナでcommon_linkを利用することを明示する
version: "2"
services:
  wordpress:
    image: wordpress:latest
    container_name: "wp-main"
    volumes:
      - .:/var/www/html
      - ./log:/tmp/log
    depends_on:
      - db
    environment:
      WORDPRESS_DB_HOST: "db:3306"
      VIRTUAL_HOST: chao.tokyo
      LETSENCRYPT_HOST: chao.tokyo
      LETSENCRYPT_EMAIL: 見せられないよ
    env_file: .env
    networks:
      - common_link

  db:
    image: mysql:5.7
    container_name: "wp-db"
    volumes:
      - "./db-data:/var/lib/mysql"
    env_file: .env
    networks:
      - common_link
networks:
  common_link:
    external: true

nginx-proxyのdocker-composeとアプリのdocker-composeを任意の順序で起動すると、アプリがアクセス可能になるはずだ。この段階でアプリ(例:chao.tokyo)にアクセスできない場合はどこかでエラーが出ているので頑張ってなんとかする。letsencrypt-nginx-proxy-companionは起動に時間がかかるし、初回起動時は特に長い。証明書の取得、あるいはその必要がないことの確認が済むと3600秒のスリープに入るというようなメッセージが出るので、それまではエラーが出ても焦らないで。

2.Mastodonの設定

ではMastodonをデプロイしていく。まず適当な作業ディレクトリにcloneする。

git clone https://github.com/tootsuite/mastodon.git

docker-compose.ymlの編集

公式のインストラクションによると

If you’re not making any local code changes or customizations on your instance, you can use a prebuilt Docker image to avoid the time and resource consumption of a build

もしローカルでコードを変更しないのであれば、ビルド済みのDockerイメージを利用することで時間と資源を節約することができます。

とのことなので、そうすることにした。この場合docker-compose.ymlに若干の変更が必要になる。他にもいろいろな変更が必要になるがとりあえず載せる。

version: '2'
services:
  nginx:
    image: nginx:1.11.10-alpine
    container_name: mstdn-nginx
    expose:
      - "9090"
    restart: always
    tty: false
    env_file: .env.production
    links:
      - web
      - streaming
    volumes:
      - ./setting/nginx/conf.d:/etc/nginx/conf.d:ro
      - ./setting/nginx/conf:/etc/nginx/conf/:ro
    volumes_from:
      - container:nginx-proxy_nginx-proxy_1
    networks:
      - common_link
      - back-mastodon
  db:
    restart: always
    image: postgres:9.6-alpine
    networks:
      - back-mastodon
### Uncomment to enable DB persistance
    volumes:
      - ./postgres:/var/lib/postgresql/data

  redis:
    restart: always
    image: redis:4.0-alpine
    networks:
      - back-mastodon
### Uncomment to enable REDIS persistance
    volumes:
      - ./redis:/data

#  es:
#    restart: always
#    image: docker.elastic.co/elasticsearch/elasticsearch-oss:6.1.3
#    environment:
#      - "ES_JAVA_OPTS=-Xms512m -Xmx512m"
#    networks:
#      - back-mastodon
#### Uncomment to enable ES persistance
##    volumes:
##      - ./elasticsearch:/usr/share/elasticsearch/data

  web:
#    build: .
    image: tootsuite/mastodon:v2.4.3
    restart: always
    env_file: .env.production
    command: bash -c "rm -f /mastodon/tmp/pids/server.pid; bundle exec rails s -p 3000 -b '0.0.0.0'"
    networks:
      - back-mastodon
    ports:
      - "127.0.0.1:3000:3000"
    depends_on:
      - db
      - redis
#      - es
    volumes:
      - ./public/system:/mastodon/public/system
      - ./public/assets:/mastodon/public/assets
      - ./public/packs:/mastodon/public/packs

  streaming:
#    build: .
    image: tootsuite/mastodon:v2.4.3
    restart: always
    env_file: .env.production
    command: yarn start
    networks:
      - back-mastodon
    ports:
      - "127.0.0.1:4000:4000"
    depends_on:
      - db
      - redis

  sidekiq:
#    build: .
    image: tootsuite/mastodon:v2.4.3
    restart: always
    env_file: .env.production
    command: bundle exec sidekiq -q default -q mailers -q pull -q push
    depends_on:
      - db
      - redis
    networks:
      - back-mastodon
    volumes:
      - ./public/system:/mastodon/public/system
      - ./public/packs:/mastodon/public/packs
## Uncomment to enable federation with tor instances along with adding the following ENV variables
## http_proxy=http://privoxy:8118
## ALLOW_ACCESS_TO_HIDDEN_SERVICE=true
#  tor:
#    build: https://github.com/usbsnowcrash/docker-tor.git
#    networks:
#      - external_network
#      - back-mastodon
#
#  privoxy:
#    build: https://github.com/usbsnowcrash/docker-privoxy.git
#    command: /opt/sbin/privoxy --no-daemon --user privoxy.privoxy /opt/config
#    volumes:
#      - ./priv-config:/opt/config
#    networks:
#      - external_network
#      - back-mastodon

networks:
  common_link:
    external: true
  back-mastodon:
    external: true

変更点を1つずつ説明する。

nginxコンテナの追加

mastodon専用のサーバーのコンテナ。nginx-proxyと各コンテナを中継する。volumesでコンテナの外から設定ファイルを編集できるようにしている。volumes_fromに関する解説はここを参照のこと。networksでcommon_linkと先ほど使用したmastodonの内部用ネットワークの両方に接続する。

なおvolumes_fromはdocker-compose version 3では使えない。解決策を調べたがよくわからなかったのでversionを2にした。

dbコンテナ, redisコンテナ

データベースの永続化のためにvolumesをコメントアウトした。先ほど使用したmastodon内部用ネットワークを利用するためにネットワーク名を変えた。

webコンテナ

ローカルで変更を加えないことにしたのでbuildをコメントアウト。imageでバージョンを指定。サーバー外部との通信はnginxコンテナが一括して担うのでnetworksはback-mastodonのみでよい。

volumesコンテナにアセットが保存されるディレクトリを追加。ここはエラーメッセージを頼りに手探りでやったことなのでよく理解できていないのだが、ビルドをしない場合はこうしないと動かないっぽい(参考)?。

streamingコンテナ

buildをコメントアウト。networksをback-mastodonに。

sidekiqコンテナ

これも手探りでやったのでよくわからないが、volumesに/public/packsを追加した。もしかしたら要らないかも。

networks

先ほど作ったcommon_linkとback-mastodonを利用することを明示する。

mastodon用nginxの設定ファイルの編集

mastodon/settings/nginx/conf.d/default.confを編集する。参考をコピペしてドメイン名等を埋めていけばいいが、add_header Content-Security-Policyの行はそのままだと画像アップロードができないので、意味がわかる人なら画像アップロードを許可するようにここを編集する。僕はわからなかったので丸ごと消した。

.env.productionの編集

まずcp .env.production.sample .env.productionし、このファイルを編集していく。

# 冒頭に追加
VIRTUAL_HOST=animedon.chao.tokyo
VIRTUAL_PORT=9090
VIRTUAL_PROTO=https
LETSENCRYPT_HOST=animedon.chao.tokyo
LETSENCRYPT_EMAIL=見せられないよ
LETSENCRYPT_TEST=false

# 探して編集
LOCAL_DOMAIN=animedon.chao.tokyo

# それぞれdocker-compose run --rm web rake secretを実行し出力された文字列を入れる
SECRET_KEY_BASE=
OTP_SECRET=

# 探して編集
SMTP_SERVER=smtp.gmail.com
SMTP_PORT=587
SMTP_LOGIN=見せられないよ
SMTP_PASSWORD=見せられないよ
SMTP_FROM_ADDRESS=見せられないよ
SMTP_DOMAIN=gmail.com
SMTP_OPENSSL_VERIFY_MODE=none

冒頭はnginx-proxyとmastodon用nginxが通信するための環境変数。

メールはgmailを利用するのでこうなった。なおgmail側で事前に設定してmastodon用のアプリパスワードを発行するのが望ましい。

起動

docker-compose build
chown -R 991:991 public
docker-compose run --rm web bundle exec rake mastodon:setup

chownは以外なタイミングでトラブった記憶があるので(忘れた)、それっぽいエラーが出たら思い出したかのようにもう一度実行しよう。

最後のコマンドで対話型のセットアップが始まる。内容はここにある。

  1. ドメイン名→animedon.chao.tokyo
  2. シングルユーザー?→No
  3. Docker?→Yes
  4. DB設定→Enter連打
  5. Redis設定→Enter連打
  6. クラウドストレージ→No
  7. メール設定→NoとEnter連打。さっき設定したのでたぶん上書きはされてない。
  8. DBマイグレーション→永続化してあるので既にやってあるならスキップしないとエラーになる
  9. アセットのプリコンパイル→同上。ただしこれはやり直してもよい。とても時間がかかる。
  10. 管理者アカウント作成→しましょう
docker-compose up -d

起動します。

終わりに

参考にしたサイトはどれも素晴らしかったが、mastodonの進化が非常に早いのでそのままでは動かないところがいくつもあった。基本的な構築の流れは参考サイトを見てもらったほうがよくて、私のこの記事はどこにどういうエラーが起こりうるのか、それをどう考えて対処したのかというような記録として残しておきたいと思う。

参考

学会2日目

ポスターセッションでは面白い研究が多く、やっている人たちも楽しんでいるのが伝わってきた。研究は楽しい!研究は楽しい!楽しい!楽しい!

Mastodonは立った→animedon.chao.tokyo

僕もあなたも逮捕されない範囲内で好きに使ってください。

立てたけどそんなに使わなそう。2018年8月20日現在のMastodonの立て方にはとても詳しくなったので、この情報の価値が高いうちにまとめておきたい。立ったあともCSPとか画像・動画のサイズ上限とかメールとか適切に設定しないと上手く動かないのでなかなか難しいぞ。立てる順番が違うと壊れるというDockerにあるまじき事件まで起きたからな。

次はフロントエンドの改造に着手したい。自動ハッシュタグ挿入機能と公開範囲設定保持機能。

学会初日

※この記事は『氷結 アルフォンソマンゴー』を飲みながら書かれた。

今日は学会初日だった。話を聞いて写真を撮った。明日はポスター。昼食をどうしようか。会場の大学は綺麗だ。アニメの聖地の近くだったので見てきた。

自宅PCのUbuntuを18.04にアップデートしたらペンタブレットのマッピングが壊れてしまった。
xinput set-prop "デバイス名" --type=float "Coordinate Transformation Matrix" 1 0 0 0 1 0 0 0 1
これが通らない。
X Error of failed request: BadMatch (invalid parameter attributes)
Major opcode of failed request: 131 (XInputExtension)
Minor opcode of failed request: 57 ()
Serial number of failed request: 19
Current serial number in output stream: 20

だそうだ。

エラーメッセージでググってもデバイス特定の解決法が記述されているばかりで参考にならない。xinput listxinput list-props "デバイス名"でちゃんとデバイスが認識されていること、座標変換のオプションが存在することは確認済み。