あひるの勉強部屋

つらつらつら~と不定期にカキコするブログ

mikutter on dockerでリンクが開けない問題へのワークアラウンド

dockerコンテナでmikutterを動かしてみたところ、認証時につまづいたことがあったので共有します。
なお、今回の問題とワークアラウンドについてはAppImageユーザーにとっても有用です。
今回話す環境は以下のリポジトリgui付きのコンテナを実行した時のものです。
docker mikutter

問題

dockerコンテナで動かすmikutterでURLを開こうとしても開かないです。
dockerのコンテナ内にはブラウザがないためです。
このままだと最初のアカウント追加時に認可できずに詰んでしまいます。

ワークアラウンド

mikutter の 「設定 -> 表示 -> URLを開く方法」に下記設定をします。
次のコマンドを使う を選択して、テキストボックスに echo と入力。

f:id:ahiruZ:20190723200522p:plain
mikutter setting

上記を実行することで、リンクを押したときにmikutterのログにリンクが表示されます。

f:id:ahiruZ:20190723201433p:plain
url shown in log

まとめ

これを設定することでアカウント追加時のリンクで詰まなくなるので困っている方はお試しください。

mikutterインスタンスmaster追従まとめ

気が向いた時くらい書いておこうかと思います。

ハマったこと

  • /web/getting-started を開くと /web/timelines/home へリダイレクトされる
    これは本家のバグだったようで翌日のPRでマージされた修正を取り込むことで直った
    github.com

  • /about が見つからない
    これは Maya さんに教えていただき解決した。
    $ docker-compose run --rm web bundle exec bin/tootctl cache clear https://taruntarun.net/@mayaeh/102165209509726870

感想

ステージングで上記二つの問題が発覚したので、ステージングとしての機能をしっかりと果たしていてよかった。 やっぱりステージング大事。

小説サイトの新着を取得するやつを作ったときの話

たまには Python を使ってみるかというノリで、いつも読んでる Web 小説のページをスクレイピングして最新のものがあれば Slack に通知するやつを作ってみました。 Pythonをほとんど知らず、調べながらやったので、その過程で調べた内容についてのメモを残します。

環境

やったこと

venv

パッケージ管理をプロジェクト毎にしたかったので、よく使われている virtualenv を使おうと思いましたが、 Python 3.3 からは venv として Python の標準機能にもほぼ同様のものが備わったようです。

$ python3 -m venv project_name でサクッと生成しました。
追加パッケージなしでこれができるのはありがたいです。

requests, BeautifulSoup4

定番らしい組み合わせでスクレイピングします。
幸い対象が静的 html だったので、requests で GET して、BeautifulSoup4 で必要な DOM を取り出すだけの超シンプルな実装ですみました。
途中、大きく詰まったところとしては GET したファイルの日本語が文字化けしていたことです。

r = requests.get(TARGET_URL)
r.encoding = r.apparent_encoding

といったように apparent_encoding を指定することで charset から文字コードを検出してくれます。 apparent_encoding のソース

対象の html は以下のような構造でした。

<div class="index_box">
    <dl class="novel_sublist2">
        <dd class="subtitle">
            <a href="url">タイトル1</a>
        </dd>
        <dt class="long_update">
            20xx/xx/xx xx:xx
            <span title="20xx/xx/xx xx:xx 改稿"><u></u></span>
        </dt>
    </dl><dl class="novel_sublist2">
        <dd class="subtitle">
            <a href="url">タイトルN</a>
        </dd>
        <dt class="long_update">
            20xx/xx/xx xx:xx
            <span title="20xx/xx/xx xx:xx 改稿"><u></u></span>
        </dt>
    </dl>
</div>

今回必要だったのはタイトルおよび更新日時なので dl タグ一覧を取り出して、dd, dt タグをそれぞれ処理しました。 必要な情報が取れたところで、あとは最終更新日時を比較して最新が来て入れば Slack に通知を適当に実装して完了です。

VS Code

VS Code でコーディングするにあたり、Python 拡張をインストールしました。 Python拡張をインストールすると pylint が見つからないだの警告を出してきます。 せっかくなので使いたいですが、今回は venv で使いたかったのでワークスペースの設定が必要でした。

{
    "python.pythonPath": "./bin/python",
    "python.linting.pylintPath": "./bin/pylint",
    "python.linting.pylintEnabled": true,
    "python.linting.enabled": true,
}

これでこのワークスペースを開いたときは venv の pylint を参照してくれるようになりました。

つくったもの

こんな感じ

さいごに

このメモ書いてる時に気づいたんですが、a タグのリンクを Slack に投稿した方が絶対に使いやすい

puppetteer のキャッシュ

puppetteer を使って html を PDF に変換する node.js アプリケーションを作っている過程でキャッシュに悩んだのでメモ

やったこと

クライアントから送られてきた html 文字列を以下のように PDF 化するコードを書いていました。

しかし、ポストするhtmlの一部が変わっても出来上がるPDFに変化がありません。
クライアント側や node の express 等を疑っていましたが、いずれもキャッシュの対応などを入れても効果がありませんでした。
そこで puppetteer で何かキャッシュされているのではと疑い、ググったところ以下がヒットしたので試したら当たりでした。
How can I disable cache in puppeteer?

setCacheEnabled フラグを設定して reload すればいいようです。 setCacheEnabled フラグを page.goto() 直前にセットしても特に意味がなく、リロードする必要がありました。

完成系

おまけ

ページ生成時に page.setContent() を使用していない理由としては、 waitUntil が指定できないためです。 ワークアラウンドとして date:text/html, に html 文字列を結合して page.goto() に渡して waitUntil するようにしました。

*ngFor で指定回数繰り返し処理

Angular の *ngFor*ngFor="let n of ['a', 'b']" のように配列のループはできるが、 Vue.js の v-for のように指定回数のループもできるディレクティブが用意されていない。
v-for="n in 4" 相当のことを Angular でやりたかったので、パイプを使って実現してみた。

パイプ

実装

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'range'
})
export class RangePipe implements PipeTransform {

  transform(value: number): Array<number> {
    return Array(value);
  }
}

説明

これは引数に与えられた長さを持つ配列を返すパイプである。
*ngFor="let n of 4 | range" のように使う。
上記の例では、4 | range で長さ4の配列ができ、*ngFor は4回実行されるといった寸法だ。

今回は指定回数ループさせるためだけを考えている。
そのため、例えば

<span v-for="n in 4">{{ n }}</span>

と同等のことするには以下のように index を使う必要がある。

<span *ngFor="let n of 4 | range; index as i">{{ i + 1 }}</span>

多少長いが、標準的な機能で完結しているのでひとまずこれでいいかなと思っている。
もっとスマートな実装方法あれば教えて欲しい!


パイプの生成もAngular CLIのコマンドひとつで簡単だし最高

chromiumで音がでなくなった

今回対応はできたけど、原因がわからなかったので次回調べるためのメモ

環境

  • スピーカー周りの構成
    デスクトップにUSB DACを繋げていて、DACからアンプ、スピーカーといった感じに繋がっている。
+-----+     +----+
| PC  +-----+DAC +---+ アンプ、スピーカー
+-----+     +----+

現象

きっかけ

  • DACのオン・オフを切り替えた
  • 普段はDACのオン・オフ切り替えても今回のような問題は起きていなかった

原因

  • 今回はわからなかった

対応

見返してみると、順序がこれでいいのかというところもあるけど、とりあえず時系列で実行したもの

  1. pulseaudioのプロセス削除

    $ pgrep pulseaudio|xargs kill

  2. pulseaudioのconfig削除

    $ rm -f ~/.config/pulse/*

  3. pulseaudioの停止

    $ pulseaudio -k

  4. pulseaudioの起動

    $ pulseaudio --start

メモ

対応のために仕組みを理解する必要がありそうなので、あとで読むためのリンクを置いておく