概要 新しく静的サイトジェネレータでブログ環境を整備した。 細かい使い方には触れないが、構成を書いておく。 静的サイトジェネレータとCI/CD 静的サイトジェネレータ 静的サイトジェネレータというのはSphinx（Python製）とかJekyll（Ruby製、GitHub Pages標準らしい）とかHugo（Go製）みたいなやつで、 MarkdownだとかreStructuredTextだとかのファイル群からHTMLを生成するツール。 Sphinx Jekyll Hugo Miyadaiku MiyadaikuはPython製の静的サイトジェネレータ。 Flaskで使うテンプレートエンジンのJinja2が使えることが特徴みたい。Jinja2はDjangoのテンプレートエンジンに似ている。 テンプレート上でどんな変数が使えるかはMiyadaikuの領域なので、ドキュメント（とサンプルテンプレート、ソースコード）を見ていくしかないかも。 github:miyadaiku/miyadaiku pypi:miyadaiku GitHub Actions GitHub上のリポジトリに対してpushやPull Requestがなされた時に事前に指定した処理を実行することのできるGitHubの機能。 Jenkinsなどに近そう。また、GitLabにも同様の機能があったはず。 GitHubのサーバで動く仮想環境上でDockerのような使い方でテストケースの実行やリリースファイルのビルド、サーバへのデプロイ、 つまりCI（Continuos Integration、テストやビルドの自動化）/CD（Continuous Delivery、デプロイの自動化）を設定できる。 Pull Requestなどへの自動ラベル付けやSlackへの通知なんかも設定することがあるのかな。 この設定はYAMLファイルとしてGitリポジトリ内に保存しますが、秘密鍵/トークンなどの情報を参照するための機能もあるみたい。 バージョン管理システム的な点ではGitは分散型なので文書自体の分散バージョン管理はできるが、 GitHubが落ちたら解消するまで（手元にリポジトリがあっても）GitHub ActionsによるCI/CDができないのが難点な気がする。 GitHub Status 考えていること レンダリング後のHTMLファイルの分離 Markdownを書いている時に見えるところに（レンダリング後の）HTMLファイルを置きたくない。 できれば何も考えずに（Markdownで書いた）メモファイルを置くのに使っていた適当なディレクトリの上でコマンドを実行したら HTTPサーバを介して（オプションで指定したテーマなどで）いい感じにレンダリングしてくれるようなものがいい （HTMLファイル自体にファイルシステムからアクセスできる必要はない）と思っていた。 このHTMLはMarkdownファイル群とレンダリングのオプションだけでいつでも生成可能なので、 レンダリング後のファイル自体が見えなければ、後からこのファイルを何かの間違いで編集してしまって正規性（再レンダリングしても差分がない状態）が崩れてしまうことがない。 それからMarkdownファイルをGitで管理する場合、レンダリング後のファイルの差分には実質的に意味がないので、（見える）commitに含めたくない気持ちがある。 この部分は適切に.gitignoreやCI/CDを設定すれば大抵の静的サイトジェネレータで実現可能だろうと思う。 今回はGitHub Actionsを使って、GitHub上の仮想環境にリポジトリから文書を読み込んでHTMLを自動生成し、文書と履歴を共有しない別ブランチ（gh-pages）に自動でcommitされるように設定する。 GitHub Actionsを動かすには.github/workflows以下にYAMLファイルを配置する。例えばこのような感じ。GitHub Pagesへのデプロイ（gh-pagesブランチの更新）にはgithub:peaceiris/actions-gh-pagesを使っている。 # deploy.yml name: Deploy # Controls when the action will run. Triggers the workflow on push or pull request # events but only for the master branch on: push: branches: [ master ] # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: # This workflow contains a single job called "build" build: # The type of runner that the job will run on runs-on: ubuntu-latest # Steps represent a sequence of tasks that will be executed as part of the job steps: # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - uses: actions/checkout@v2 - name: Setup Python uses: actions/setup-python@v2 with: # Version range or exact version of a Python version to use, using SemVer's version range syntax. python-version: 3.x - name: Install dependencies run: pip3 install -r requirements.txt - name: Run miyadaiku-build run: miyadaiku-build --output public . - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./public name、runのところをコピーして増やせばコマンドを増やすことができる。 ...

VisualBoyAdvance - MをDocker上で動かすDockerfile（とrunコマンドのオプションセット）を作った。 要X Window System、Pulseaudio。Ubuntu Desktop 18.04（with NVIDIA Driver）で動作確認。 https://github.com/aoirint/vbam-docker Dockerfile # for general machine FROM ubuntu:bionic # for nvidia-driver machine # FROM nvidia/opengl:base-ubuntu18.04 ENV VERSION 2.1.4 ENV SHA1HASH bf6e452b53f47e2fbc4e6e41c92f567aa285cdbe WORKDIR /vbam RUN apt update \ && apt -qq -y --no-install-recommends install \ ca-certificates \ tar \ wget \ # -- from builddeps script build-essential \ g++ \ nasm \ cmake \ ccache \ gettext \ zlib1g-dev \ libgl1-mesa-dev \ libavcodec-dev \ libavformat-dev \ libswscale-dev \ libavutil-dev \ libswresample-dev \ libgettextpo-dev \ libpng-dev \ libsdl2-dev \ libsdl2-2.0 \ libglu1-mesa-dev \ libglu1-mesa \ libgles2-mesa-dev \ libsfml-dev \ libsfml-graphics2.4 \ libsfml-network2.4 \ libsfml-window2.4 \ libglew2.0 \ libopenal-dev \ libwxgtk3.0-dev \ libwxgtk3.0 \ libgtk2.0-dev \ libgtk-3-dev \ zip \ # sound driver to play sound on host pulseaudio \ # build && mkdir /vbam-build && cd /vbam-build \ && wget -O vbam.tar.gz https://github.com/visualboyadvance-m/visualboyadvance-m/archive/v${VERSION}.tar.gz \ && echo "${SHA1HASH} vbam.tar.gz" | sha1sum -c - \ && mkdir src \ && tar xf vbam.tar.gz -C src --strip-components 1 \ && mkdir build && cd build \ && cmake ../src \ && make \ # copy to /usr/local/bin/ && mv visualboyadvance-m /usr/local/bin/ \ # remove build environment && rm -r /vbam-build/ ベースイメージは（とりあえず）基本はubuntu:bionicで、NVIDIAのGPUで動いてるマシンでビルドするときはnvidia/openglにする。これをやらないと描画時にlibGL error: No matching fbConfigs or visuals foundを吐く（逆にubuntu:bionicでの動作確認はしていないが.. 設定で描画をOpenGL以外にすればどちらでも動きそう）。 ...

https://jekyllrb.com/ Ruby製の静的ウェブサイト生成ツール（Static Site Generator）。なんかMarkdownとかで書いたサイトをいい感じにHTMLにしてくれるやつ。 Dockerイメージの準備 Ruby, RubyGems, gcc, makeが入っていれば動くらしい。公式Dockerイメージもあるみたいだけど、あえてスルーしてrubyイメージからやってみる。 ふだんRubyは使わないので試行錯誤。 https://hub.docker.com/_/ruby まずはイメージをビルド。 FROM ruby:2 WORKDIR /code RUN gem install jekyll bundler ここでgem installしてもいいのか、という問題がありそうだけどよくわからない..（キャッシュについてはいいとして） sudo docker build . -t myjekyll ひとまずこれでイメージの準備はできた。 sudo docker run --rm -v `pwd`/myblog:/code -e BUNDLE_PATH=vendor/bundle myjekyll jekyll new ./ これで./myblog（/code）に新しいJekyllプロジェクトが生成される（合わせて依存ライブラリがmyblog/vendor/bundleにインストールされる）。 vendorを除いたフォルダ構成はこんな感じ。 myblog/ ├── 404.html ├── about.markdown ├── _config.yml ├── Gemfile ├── Gemfile.lock ├── index.markdown └── _posts └── 2020-05-31-welcome-to-jekyll.markdown もし既存のプロジェクトを使う場合、bundle installでライブラリを取得する（Gemfileに書かれた依存ライブラリがmyblog/vendor/bundleにインストールされる）。 sudo docker run --rm -v `pwd`/myblog:/code -e BUNDLE_PATH=vendor/bundle myjekyll bundle install bundler、bundle execについて　※自分用メモ - Qiita 環境変数 BUNDLE_PATH の怪 - Qiita 最後に開発用サーバを立てる。 ...

Firefox 76 https://diary.palm84.com/entry/20190527/1558967870 Firefox 69以降デフォルトで無効化されたらしいので、about:configからstylesheetsで検索、toolkit.legacyUserProfileCustomizations.stylesheetsをtrueにする。 ブラウザ右上の三本線メニューからHelp、Troubleshooting InformationのProfile Directoryという項目から現在のプロファイルのディレクトリがわかる。 PROFILE_DIR/chromeディレクトリを作成、PROFILE_DIR/chrome/userContent.cssファイルを作成。あとはこのCSSがすべてのWebサイトに適用されるのでCSSを書いていくだけ。Firefoxを再起動すると変更が適用される。 body { background: black !important; } https://developer.mozilla.org/ja/docs/Web/CSS/@document http://puppet.asablo.jp/blog/2008/11/25/3974444 @-moz-documentで特定のドメインのWebサイトにだけスタイルを適用できる（@documentでは動かなかった）。ドキュメントは@documentのものを見ればいいのかな（Firefoxにしかこのクエリは実装されてないらしい、CSS 4で検討中？）。ID/クラスが被ってる場合に使えるか。 @-moz-document domain(twitter.com) { body { background: black !important; } } https://qiita.com/uzumushi/items/f95f9e89fde2a507d7e8

Environment Ubuntu 18.04 PulseAudio スピーカー出力を仮想マイク入力にする pavucontrolを実行し、Input Devicesのタブを開く。Show:をAll Input Devicesに設定すると、Monitor of YOUR_SPEAKERという項目があり、このデバイスからの読み取りはスピーカーへの出力がループバックされたものになっている（YOUR_SPEAKERへの出力＝Monitor of YOUR_SPEAKERからの入力。 しかしここで音声を入力するアプリケーションとして仮にZoomを開いても、Microphoneの選択肢にMonitor of YOUR_SPEAKERは現れない。回避策として、MicrophoneをSame as System（デフォルトの音声入力デバイス）にし、Input DevicesでMonitor of YOUR_SPEAKERのSet as Fallback（緑のチェックマーク、デフォルトの音声入力デバイス）を有効にすることでZoomのマイクとしてスピーカー出力を渡すことができた。 このままでは他の人から送られてきた音声が自分のコンピュータの中でループ（Zoom Output→YOUR_SPEAKER→Monitor of YOUR_SPEAKER→Zoom Input）してしまうんじゃないかと思うが、少なくともZoom上ではそうはならなさそう（PC1のマイク→Zoom→PC2の音声出力→Monitor of PC2 Speaker→Zoom→PC1の音声出力 とはならなかった？）？　これはハウリング防止フィルタが効いてるのかどうなのか.. Zoomの音域系フィルタが効いているのか音楽は若干変になる（もともと声を送るためのチャンネルだし。きれいな音声を送るにはShare Screenを使う必要ありか）。 Zoomの入力デバイスをpavucontrolから直接変えられないのはZoom側でなにか固定してるのか、チャンネル数とかフォーマット対応してないみたいなことなのか.. 前回のデスクトップ映像の出力と組み合わせた場合、映像と音声の同期がとれないと思われるので、お気持ちでなんとかするか、あるいはffmpegで同時に送り出すことまでを保証する、くらいはできるのだろうか.. https://aoirint.hatenablog.com/entry/2020/05/15/185853 挿入音声の再生デバイス分離 Zoomの音声を出力するデバイスと挿入音声を出力するデバイスを分離して、目的の音声だけ送り出せるようにしてみる。つまり、Zoomの音声出力はYOUR_SPEAKERのままにして、挿入音声を仮想音声出力デバイスに出力するようにする。 pacmd load-module module-null-sink sink_name=DummyOutput0 sink_properties=device.description=DummyOutput0 # Or pacmd load-module module-null-sink sink_name=DummyOutput0 pacmd update-sink-proplist DummyOutput0 device.description=DummyOutput0 # --- pacmd unload-module module-null-sink これでデフォルトの音声入力デバイスをDummyOutput0に設定すればZoom上にDummyOutput0への出力が送り出される。あとは挿入音声を流しているアプリケーションからの音声出力をDummyOutput0に送り出せばOK。 この状態でDummyOutput0に出力されている挿入音声をYOUR_SPEAKERで聞くには、Monitor of DummyOutput0をループバックしてYOUR_SPEAKERに出力する。 pacmd load-module module-loopback source=DummyOutput0.monitor pacmd unload-module module-loopback 物理マイクの入力をミックスする ここでZoomの入力デバイスに送り出されるのは自分のコンピュータ上で出力された音声だけになっているので、物理マイクを接続していてもこれに入力された音声をZoomに送り出すことはできていない。物理マイクへの入力もZoom上に送り出せるようにする。 ...

Zoomなどでデスクトップ画面をカメラ映像として共有するのに使える。 参考： https://github.com/CatxFish/obs-virtual-cam/issues/17 Environment Ubuntu 18.04 FFmpeg 3.4.6-0ubuntu0.18.04.1 v4l2loopback #ed2b709 OBS Studio 25.0.8 #14b0565 obs-v4l2sink #1ec3c8a はOBS Studioがクラッシュして使えなかった。 How to https://github.com/obsproject/obs-studio https://github.com/umlaeute/v4l2loopback # sudo apt install v4l2loopback-dkms # これはバージョンの問題で使えないかも git clone https://github.com/umlaeute/v4l2loopback.git cd v4l2loopback make sudo make install sudo depmod -a # 仮想カメラを作成（モジュールをロード） sudo modprobe v4l2loopback devices=1 video_nr=10 card_label="OBS Cam" # 映像転送サーバを立てる（OBS→仮想カメラ） ffmpeg -an -listen 1 -i rtmp://127.0.0.1:1935/live -f v4l2 /dev/video10 # 仮想カメラを削除 sudo modprobe -r v4l2loopback カメラデバイスの一覧を確認するにはsudo apt install v4l-utilsして以下のコマンド。 ...

Node.js（npm+Browserifyなど）でパッケージ管理したり、サーバサイドで事前処理（.vueファイル、vue-cli）して配信ファイルを生成したりしてややこしいけれど、基本的にVue（Vue.js）はブラウザ上で動作するBootstrap++みたいなクライアントサイドフレームワークという理解。 参考 はじめに — Vue.js この「はじめに」をベースにサンプルを並べていく。 何もしないHTML <!DOCTYPE html> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> <h2>Hello Vue!</h2> <p> This is not Vue! CDNから開発用のVue.jsを持ってくるだけ。これをベースにいじっていく（SRIは略）。 テストするときはpython3 -m http.server --bind 127.0.0.1とか、php -S 127.0.0.1:8000とか、静的コンテンツを開ければなんでもよし。 テンプレート的用法 適当に使ってみる <!DOCTYPE html> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> <h2>Hello Vue!</h2> <p id="body"> {{ body_content }} <script> (function() { var app = new Vue({ el: '#body', data: { body_content: 'This is BODY!', }, }); })(); </script> Django/Jinjaのように{{ variable }}の形式で埋め込み位置を指定。Vueオブジェクトを作って初期値を与える。 ...

お試しのためのOAuthアクセストークン（一時）を得るサンプルをクローン。 git clone https://github.com/zoom/zoom-oauth-sample-app.git cd zoom-oauth-sample-app npm install https://github.com/zoom/zoom-oauth-sample-app ngrok（remote.itみたいなやつ）をダウンロード（実行ファイル）。ngrok.ioのサブドメインにポートを転送する。 https://ngrok.com/ ./ngrok http 4000 OAuth AppをZoom上に作成。 https://marketplace.zoom.us/develop/create 設定を書く.envファイルを作成。 touch .env clientID=Zoom OAuth AppのClient ID clientSecret=Zoom OAuth AppのClient Secret redirectURL=ngrokのURL 起動。 npm run start API Document: https://marketplace.zoom.us/docs/api-reference/introduction 上のURLでテスト呼び出しができるので、アクセストークンをとりあえず使いまわして検証。 管理者でない場合は得られる情報が結構限られる（進行中のミーティングの参加者リストは管理者でないととれなさそう）。管理者の場合はOAuthではなくJWTを使ったほうが良さそう。今回の目的は達成できなさそうだったのでこれで終了（トークンとらなくても入出力サンプルはある）。 JWT参考：インタラクション2020のリモート開催で使われたシステム https://github.com/hasevr/i2020zoom

普段TeXを書くときはAtom + latex + pdf-viewなのですが、うまくpdf-viewが動作してくれなくなった（空のタブが開いたりする）ので検証ついでに（関係ないとは思いつつ）TeXのバージョンを上げてみたくなった。aptからインストーラでのインストールに変更。 TeXはインストールに時間がかかっていけない..。dockerイメージ化したいが、毎回dockerコンテナ付けるとめっちゃオーバーヘッドできそう。up -dしてexecで動かせば速いのかな？　一般ユーザでdockerコマンド実行できるようにもしないといけないか。 sudo apt purge texlive-* 東京周辺ならJAIST、山形大学などのミラーサーバに繋がるかと思います。 wget http://mirror.ctan.org/systems/texlive/tlnet/install-tl-unx.tar.gz SHA-512 (2020-04-11) https://ctan.org/tex-archive/systems/texlive/tlnet sha512sum install-tl-unx.tar.gz 6fbca1895f0f08645e2ff97b34b9b07d659af7d25de1edc6e123fc472f3dd05db42edc9e5450fd09fae548f5259f93d7f98f63d29dfe6ff7e069685ba202661b install-tl-unx.tar.gz tar xf install-tl-unx.tar.gz cd install-tl-* sudo ./install-tl Actions: <I> start installation to hard disk <P> save installation profile to 'texlive.profile' and exit <H> help <Q> quit Enter command: I Installing to: /usr/local/texlive/2020 Installing [0001/3978, time/total: ??:??/??:??]: texlive.infra [420k] Installing [0002/3978, time/total: 00:01/02:06:37]: texlive.infra.x86_64-linux [143k] おうちの回線では1h-2hくらい。おやすみなさい.. ...

Basic auth Nginx で Basic 認証 - Qiita auth_basic "Authentication Required"; auth_basic_user_file DIRECTORY/.htpasswd; Reverse proxy Nginxによるリバースプロキシの設定方法 - Qiita proxy_set_header HOST $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; location / { proxy_pass http://localhost:8000; } Static files Nginxの静的ファイル配信でハマった - shoya.io location /static/ { root PARENT_OF_STATIC_DIRECTORY; }