adbird(広告鳥) 備忘録

ffmpegで複数の動画をワンライナーで結合

ffmpegのバージョンが上がって、以前書いた方法だとできなくなっていたので、新しく修正。

任意のフォルダ内に結合したい動画(001.mp4、002.mp4というように必ず連番で)を入れて、そのフォルダ内で端末を開いて、以下を実行。

for f in *.mp4; do echo "file '$f'" >> mylist.txt; done && ffmpeg -f concat -i mylist.txt -c copy output.mp4 && rm mylist.txt

  • インデックスファイルを作る。
  • 動画結合。
  • インデックスファイルを削除。

のコマンドをつなげただけ。

参照 wiki:Concatenate

複数の動画を再エンコードせずに結合する方法をググると、インデックスファイルを作ってから…という情報が出てくるのだけど、いちいちインデックスファイルは作りたくないので、調べてみたら、以下の方法でできた。

$ ffmpeg -i "concat:imput001.mp4|input002.mp4|input003.mp4" -c copy output.mp4

参照 How to concatenate two .aac files with the ffmpeg?

スカパー!オンデマンドの再生画面をユーザースタイルシートでシンプルに

今年ももうすぐアメリカのフォーミュラカーレースのトップカテゴリーであるインディカー・シリーズが開催される。
佐藤琢磨のほかにも日本でも走っていたローゼンクヴィストがフル参戦するし、インディ500には今年もアロンソが参戦するし、楽しみ。

僕はスカパー!オンデマンドの インディカー・シリーズ PPV(ペイ・パー・ビュー) 全話パック(税抜 9,980円) を購入して視聴する。
レースのライブ中継が見られるし(日本時間の深夜・早朝にあることが多いので、ライブで見ることはあまりないけど)、ライブ中継後も翌年2月末まではオンデマンドでいつでもレースを見られるので、インディカー・シリーズに興味がある人はぜひ。

ただ、スカパー!オンデマンドで不満なのは、再生時の画面表示がごちゃごちゃしていたり、ボタンの配置場所などのレイアウトが僕好みでないことだ。
再生中にマウスを動かすと、以下のように再生ボタンなどのアイコンが出てくるのと同時に、番組情報なども表示されて画面の半分近くが隠れてしまう…。

f:id:adbird:20190306132117p:plain
スカパー!オンデマンド再生時デフォルト

そこでユーザースタイルシートを適用させて、自分好みのシンプルな画面表示にしてみた。

環境は以下の通り。

たぶんWindowsFirefoxでもできると思う。

※追記:Vivaldiブラウザでも同様のことが可能。

chromeフォルダを作成

なぜFirefoxなのにchromeフォルダなのかは知らない…。場所は以下の通り。

/home/(ユーザー名)/.mozilla/firefox/xxxxx.default/chrome

「xxxxx.default」のところは、環境によってそれぞれ違っていると思うが、それに類するフォルダがすでに存在しているはず。
その中にchromeフォルダを作成する。

userContent.css ファイルを作成

chromeフォルダ内に、以下の内容の userContent.css ファイルを作成する。

@-moz-document domain(vod.skyperfectv.co.jp) {
    /*番組情報 非表示*/
    .metadata-info-row{
    display:none !important;
    }
    /*シークバー周囲余白*/
    .progress-controls-row{
    padding: 0.5em 0 1em 0 !important;
    }
    /*再生ボタン周り調整*/
    .button-controls-row{
    width:0 !important;
    margin:0.5em 0 0.5em 0 !important;
    left:43%;
    }
    .spod-miniplayer .bottom-controls, .spod-player .bottom-controls{
    padding-top:0 !important;
    }
    .button-controls-row a img.ch-img{
    display:none !important;
    }
    .player-control-spacer-element{
    display:none !important;
    }
    .zapping-arrow.left{margin-top:-3.5em !important;}
    .zapping-arrow.right{margin-top:-3.5em !important;}
}

なお、上記ソース内の!importantは、サイト側設定のスタイルよりもここで設定したスタイルの方を優先させるために必要。

Firefoxを起動していたら、一度終了させて、再起動する。

結果

こんな感じに!マウスを動かして再生ボタン等のアイコンが出てきても画面の大半が見えている!

f:id:adbird:20190306134023p:plain
スカパー!オンデマンド再生時ユーザースタイルシート適用

デフォルトに戻したいときは、userContent.css ファイルを削除すればいいし、他にもいじりたい人はFirefoxでページを表示中に右クリック>「要素を調査」でどこにどんなスタイルが適用されているかを確認して、userContent.css ファイルで調整すればいい。

LaTeXで作成したPDFの本文(行)とノンブルの表裏の重なりの確認方法

LaTeX(LuaLaTeX) で A5・縦書き・2段組の小説本・エッセイ本を作る のような LaTeX で縦書きの文書を組んだとき、版面をいじることになる。

そうやって版面をいじって製本(両面印刷)した際に、本文(行)とノンブルが用紙の表裏で、きっちりと重なるようにしなくては裏写りしてしまって美しくない。

以下、完成したデータ「原稿.pdf」があるとして、そのデータの本文(行)とノンブルが表裏できっちりと重なっているかを確認する方法。

1 画像編集ソフトGIMPで「原稿.pdf」の確認したいページを開く。解像度は適当に300ピクセルぐらいに。

2  「レイヤーとして開く」で再び、「原稿.pdf」を選択して開き(解像度は1.と同じにする。おそらく、自動で1.の設定が引き継がれているはず。)、上記のページの上に、ウラ面にあたるページをレイヤーとして重ねる

3 「鏡像反転」で重ねたレイヤー(2.で重ねたページ)を反転させる。

4  「不透明度」を50ぐらいにすると、最初に開いたページが見えてくるので、重なっていることを確認。

WindowsでLinuxのシェルスクリプト(.sh)を実行

過去の記事からもわかるように、僕はmarkdownからhtmlやpdf等に変換する際に、pandocだけでなく、sedも組み合わせてシェルスクリプトやバッチファイルを作る。

Windows環境の場合、これまではsed for Windowsをインストールして、バッチファイルにsedコマンドを並べて処理していた。しかし、 gnuwin32のsedコマンド使用時に半角記号や文字コードで気をつけること - Qiitaでも紹介されているように、同じsedのはずなのに、一部の記号について、Linuxシェルスクリプトに書いたsedでは問題なく置換してくれるものが、Windowsのバッチファイルに書いたsedではエスケープをつけないと置換してくれない(またはエスケープ方法が分からない)というような状況になっていた。

もういいかげん面倒くさくなってきたので、LinuxでつくったシェルスクリプトをそのままWindowsでも実行したい!!ということで、 CygwinWindowsに導入して、WindowsでもLinuxシェルスクリプトを実行できるようにした。

ちなみにストレージ容量が小さいポータブックでできるように、近年話題のWindows Subsystem for Linux(WSL)は導入しなかった。

目次

Cygwin のインストール

インストールの仕方は、 さよならコマンドプロンプト!UNIXコマンドをWindowsで実行すべくCygwinを導入 あたりを参考に。

インストールの際、chere を追加しておけば、後の作業がはかどる。

公式サイト:Cygwin Installation

PATHを通して、コマンドプロントでもLinuxコマンドが使えるようにする

PATHを通しておけば、WindowsPowerShellコマンドプロンプトからでも、Cygwinに含まれるコマンドが使えるのでいろいろ便利。

コントロールパネルの「環境変数を編集」で、インストールされたcygwinのbinフォルダ(例「C:\cygwin64\bin」)を追加すればOK。

今いる場所でCygwin Terminal を開く

Ubuntuで僕がよく使う、ファイルマネージャーで今、開いているディレクトリ(フォルダ)内で右クリックして「端末で開く」ってやつのCygwinバージョン。

Cygwin Bashをエクスプローラー右クリックで任意のディレクトリをカレントにして起動する方法 - Engineer's Notebookに書いてある通り。

1.Cygwinのインストール時にchereをインストールしていなかったら、もう一度セットアップexeをクリックしなおして、chereをインストール。

2.Cygwin Terminal のアイコン上で右クリックして「管理者として実行」。

3.Cygwin Terminalが開いたら、以下を実行。

$ chere -ian -e "Cygwin Terminal で開く" -t mintty

これで、右クリックメニューの中に「Cygwin Terminal で開く」が入っている。

Cygwin Terminal (mintty)の行間設定

Cygwin Terminal (mintty)の行間が狭いので広げたい。

.minttyrc というファイルが設定ファイルなので、その中に

RowSpacing=5

などのように設定する。


jlreq のインストール方法(手動)

※追記。やはり、tlmgrでのアップデートが一番、無難だと思う…。

TeX Live のアップデート


LaTeXの縦書き界隈で今一番アツい jlreq をインストールする(たぶんこれで合ってるはず…)。なお、環境はUbuntu18.04。

すでにTeX Live 2018には標準で入っているのだけど、 jlreq は開発が続いていて、更新も頻繁なのでローカルで更新を追加したい(tlmgrTeX Live のアップデートをしても jlreq が更新されるのかもしれないけど、システム全体をアップデートして不具合が起こったときが面倒そうなので…)。

jlreq からzipファイルをダウンロードする。

zipファイルを展開すると、「jlreq-master」ディレクトリができるので、その中のREADME-ja.md を読む。

## インストール
`make`で必要なJFMを生成してください.その後,

* *.tfm -> $TEXMF/fonts/tfm/public/jlreq
* *.vf -> $TEXMF/fonts/vf/public/jlreq
* jfm-jlreq.lua, jfm-jlreqv.lua -> $TEXMF/tex/luatex/jlreq
* jlreq.cls, jlreq-helpers.sty  -> $TEXMF/tex/latex/jlreq

と配置します.`make install`とすると,$TEXMF=$TEXMFHOMEとしてこのコピーを行います.

うむ、初心者にとってはすでにハードルが高い…。

色々調べる。

JFM は 和文フォントメトリック(Japanese Font Metric ?)のこと。

TEXMFHOME は C:/Users/ユーザ名/texmf (Linuxなら /home/ユーザ名/texmf )の場所のこと。

ようは、$ make install とすると Ubuntuなら「ホーム(/home/ユーザ名)」ディレクトリ内に「texmf」というディレクトリを作ってくれて、そこにインストールしてくれるということか。

開いている「jlreq-master」ディレクトリの中で右クリック > 端末で開く (Windowsならエクスプローラーのアドレス欄に cmd と打ち込む。参照:エクスプローラーからのコマンドプロンプト起動)で端末を開いて、

$ make install

を実行。たしかに「ホーム(/home/ユーザ名)」ディレクトリ内に「texmf」というディレクトリができて、もろもろ展開されている。

ホーム上だからsudoはつける必要ないかもしれないけど、wiki一覧表の作成と更新 (mktexlsr) について)にあるとおり、sudoをつけて以下を実行。

$ sudo mktexlsr

「LaTeXシステムはユーザのTEXMFHOMEから優先して検索します」(TEXMFHOMEの利用)とのことらしいので、これで追加したほうの jlreq が使われるはず。たぶん…w。

jlreqが更新されたら、上記をまた行う。

フォルダ(ディレクトリ)の所有者を変更

他のPC(Linux)で使っていた内蔵ハードディスクを、別のPC(Linux)に移設した場合など、データの所有者が前のPCの所有者になっていたり、rootになっていたりして削除等データがいじれないときは、以下のコマンドでフォルダ(ディレクトリ)とそのフォルダ内の権限を新しいPCの所有者とする。

$ chown -hR [新しい所有者名] [対象フォルダ(ディレクトリ)]

twicliのCSS(ユーザースタイルシート)

追記:公式Twitter風を作りました。


最終更新(2020年2月1日)

愛用しているツイッター・クライエント twicli の見た目を自分好みに変える。

これは下記の「ブラック(背景:黒、文字:白)のCSS」を適用させたもの。

f:id:adbird:20190111115721p:plain
twicli

これは下記の「ホワイト(背景:白、文字:黒)のCSS」を適用させたもの。

f:id:adbird:20190111120241p:plain
twicli white

FirefoxのSide Viewなどで表示

OperaVivaldiブラウザではウェブパネルで、FirefoxならSide View アドオンを使って、twicliをサイドに表示させることができる。

f:id:adbird:20190111115749p:plain
Firefox Side View twicli

設定方法

  1. 「+」タブ > 「設定」 > 「ユーザースタイルシート」 に、
    以下のブラック(背景:黒、文字:白)のCSSか、ホワイト(背景:白、文字:黒)のCSSのどちらかを貼り付けて
    (※ 間違えて「プラグイン」や「抽出条件」の欄に貼り付けないようにすること!)、
    「保存」ボタンを押し、ポップアップで出てきた「OK」ボタンを押す。
  2. 同じ「+」タブ中の「サムネイル」で、「サムネイルの位置」を「下」にして、「適用」ボタンを押す。

細かいは調整はご自由に。例えば、ツイート本文のフォントサイズが大きいと感じたら、CSSの上から3行目の font-size: 1rem; の数値を小さくする。

ブラック(背景:黒、文字:白)のCSS

/*ツイート本文(ステータス)*/
#tw .status,#tw2 .status,#re .status{
    font-size: 1rem;
    color:white;
    background-color:black;
    margin:7px 5px 5px 41px;
    display:block;
    padding-right:0.5em;
}
/*ツイートの枠の影*/
.tw-parent > div > div {
    margin: 2px 5px 3px 5px;
    border-radius: 6px;
    box-shadow: 0px 0px 20px 2px grey;
}

/*行間*/
#tw,#tw2,#re{ line-height:1.5;}

/*ツイート中のリンク*/
.status a.link {
    text-decoration: none;
    border: none;
    background-color: transparent;
    color: yellow;
    font-size: 9pt;
}

/* 引用ツイート */
.quoted {
    border: solid 1px #333333;
    margin: 0 0 0 20px;
    background-color:black;
}
/*引用リツイート内の投稿者*/
.quoted .uid{
    display:inline-block;
    margin-top:0;
    margin-right:3px;
}
/*引用リツイート内の本文*/
#tw .quoted .status,#tw2 .quoted .status,#re .quoted .status{
    margin:7px 5px 5px 5px;
    display:block;
    padding-left:0;
    padding-right:0.5em;
}

/*投稿欄*/
#fst {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 94%;
    height: 30px;
    font-size: 1rem;
    overflow: hidden;
}

/* アイコン */
.uicon {
    float: left;
    width: 32px;
    height: 32px;
    margin:4px 4px 0 4px;
    border-radius: 4px;
}

/*投稿者名ほかリンク文字*/
a{
    font-size: 13pt;
    color:#FF8856;
    text-decoration: none;
}
/*投稿者*/
.uid{
    display:inline-block;
    margin-top:8px;
    margin-right:3px;
}

/*画像*/
.thumbnail-image {
    border: none;
    max-width: 100px;
    min-width: 100px;
    border-radius: 6px;
}
.thumbnail-link {
    border: none;
    display: block;
    float: none;
    margin-left:41px;
}

/*投稿時間*/
.utils{
    display:block;
    text-align:right;
}
.prop{ font-size: 9pt;}

/*fav(星印の位置)*/
.fav {
    float: right;
    cursor: pointer;
    margin:5px 6px 0 0;
}

/* リツイート情報・fav情報 */
.rtinfo, .favinfo {
    display: inline-block;
    color: #999;
    font-size: 9pt;
    line-height: 1;
    padding-left:36px;
}

/*投稿欄周辺の背景色*/
#control {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 53px;
    border-bottom: 1px solid black;
    z-index: 3;
    background-color: black;
}

/*メニューのタブ*/
#menu2 a{
    font-size: 13pt;
    background-color:black;
    color:white;
    border:solid 1px grey;
    box-shadow: 0 0 5px grey inset;
}
/*新着タブの色*/
#menu a.new {
    background-color: grey;
}
/*メニュー全体の背景*/
#menu {
    background-color:black;
}

/*メインタイムラインほかの背景色*/
#tw,#tw2c.tw-parent,#re,#tw2h,tw2.tw,#control,#option{
    background-color:black;
    color:white;
}

/* 自分宛の投稿の背景色 */
.tome { background-color:black; }

/* 自分の投稿の背景色 */
.fromme {background-color: black;}

/* 選択された投稿の背景 */
.selected,#tw .selected .status,#tw2 .selected .status,#re .selected .status{
    background-color: #333333;
}
#tw .selected .quoted,#tw2 .selected .quoted,#re .selected .quoted {
    border: solid 1px grey;
    margin: 0 0 0 20px;
    background-color:#333333;
}

/*「リツイート直後のツイートを探す」*/
#rep {
    display: none;
    background-color: black;
    position: absolute;
    width: 90%;
    left: 4%;
    top: 200px;
    border: 4px solid #666;
    z-index: 2;
    padding: 2px;
    font-size: smaller;
    overflow: hidden;
    color:white;
}

/* NGワードを有効にする */
a#pickup-NG{display:none;}

ホワイト(背景:白、文字:黒)のCSS

/*ツイート本文(ステータス)*/
#tw .status,#tw2 .status,#re .status{
    font-size: 1rem;
    color: black;
    background-color:white;
    margin:7px 5px 5px 41px;
    display:block;
    padding-right:0.5em;
}
/*ツイートの枠の影*/
.tw-parent > div > div {
    margin: 2px 5px 3px 5px;
    border-radius: 6px;
    box-shadow: 0px 0px 20px 2px grey;
}

/*行間*/
#tw,#tw2,#re{ line-height:1.5;}

/*ツイート中のリンク*/
.status a.link {
    text-decoration: none;
    border: none;
    background-color: transparent;
    color: ;
    font-size: 9pt;
}

/* 引用ツイート */
.quoted {
    border: solid 1px silver;
    margin: 0 0 0 20px;
    background-color:white;
}
/*引用リツイート内の投稿者*/
.quoted .uid{
    display:inline-block;
    margin-top:0;
    margin-right:3px;
}
/*引用リツイート内の本文*/
#tw .quoted .status,#tw2 .quoted .status,#re .quoted .status{
    margin:7px 5px 5px 5px;
    display:block;
    padding-left:0;
    padding-right:0.5em;
}

/*投稿欄*/
#fst {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 94%;
    height: 30px;
    font-size: 1rem;
    overflow: hidden;
}

/* アイコン */
.uicon {
    float: left;
    width: 32px;
    height: 32px;
    margin:4px 4px 0 4px;
    border-radius: 4px;
}

/*投稿者名ほかリンク文字*/
a{
    font-size: 13pt;
    color:blue;
    text-decoration: none;
}
/*投稿者*/
.uid{
    display:inline-block;
    margin-top:8px;
    margin-right:3px;
}

/*画像*/
.thumbnail-image {
    border: none;
    max-width: 100px;
    min-width: 100px;
    border-radius: 6px;
}
.thumbnail-link {
    border: none;
    display: block;
    float: none;
    margin-left:41px;
}

/*投稿時間*/
.utils{
    display:block;
    text-align:right;
}
.prop{ font-size: 9pt;}

/*fav(星印の位置)*/
.fav {
    float: right;
    cursor: pointer;
    margin:5px 6px 0 0;
}

/* リツイート情報・fav情報 */
.rtinfo, .favinfo {
    display: inline-block;
    color: #999;
    font-size: 9pt;
    line-height: 1;
    padding-left:36px;
}

/*投稿欄周辺の背景色*/
#control {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 53px;
    border-bottom: 1px solid black;
    z-index: 3;
    background-color: white;
}

/*メニューのタブ*/
#menu2 a{
    font-size: 13pt;
    background-color:white;
    color: black;
    border:solid 1px grey;
    box-shadow: 0 0 5px grey inset;
}
/*新着タブの色*/
#menu a.new {
    background-color: grey;
}
/*メニュー全体の背景*/
#menu {
    background-color: white;
}

/*メインタイムラインほかの背景色*/
#tw,#tw2c.tw-parent,#re{
    background-color:white;
}

/* 自分宛の投稿の背景色 */
.tome { background-color:white; }

/* 自分の投稿の背景色 */
.fromme {background-color: white;}

/* 選択された投稿の背景 */
.selected,#tw .selected .status,#tw2 .selected .status,#re .selected .status{
    background-color: #CCCCCC;
}
#tw .selected .quoted,#tw2 .selected .quoted,#re .selected .quoted {
    border: solid 1px grey;
    margin: 0 0 0 20px;
    background-color:#CCCCCC;
}

/*「リツイート直後のツイートを探す」*/
#rep {
    display: none;
    background-color: white;
    position: absolute;
    width: 90%;
    left: 4%;
    top: 200px;
    border: 4px solid #666;
    z-index: 2;
    padding: 2px;
    font-size: smaller;
    overflow: hidden;
    color: black;
}

/* NGワードを有効にする */
a#pickup-NG{display:none;}