かすみん日記

暇なときに何か喋ります

ブラウザのスクロールバーをカスタマイズ【CSS】

CSS Web

CSSでスクロールバーの色とかを変えたりできる。何でもはできないけど。

See the Pen Untitled by nakasu (@nakasu) on CodePen.

webkit系

SafariやChromeは以下のようにしてカスタマイズ可能。

bodyのスクロールバーをカスタマイズしている。

body::-webkit-scrollbar {
  width: 30px; /* 右のスクロールバーの幅 */
  height: 40px; /* 下のスクロールバーの幅 */
}

/* スクロールバーの背景 */
body::-webkit-scrollbar-track-piece {
  background-color: blue;
}

/* スクロールバーのつまみ */
body::-webkit-scrollbar-thumb {
/*   透明度やグラデーションも設定できる */
  background-color: gold;
  
/*   ボーダーは余白のために使うとよい */
  border: 8px solid transparent;
  border-radius: 30px;
  background-clip: content-box;
}

/* 縦横のスクロールバーの間の角 */
body::-webkit-scrollbar-corner {
  background-color: red;
}

Firefox

Firefoxは以下のようにしてカスタマイズ。

html {
/*   スクロールバーのつまみの色・背景色 */
/*   透明度は指定可能だが、グラデーションは不可 */
  scrollbar-color: rgba(255, 0, 0, .5) gold;

/*   スクロールバーの太さ */
  scrollbar-width: thin;
}

参考

https://codepen.io/Neos21/pen/wvWMdJv

stackoverflow.com

【まとめ】ブラウザごとに適用するCSSを切り替える方法【CSSハック】

CSS hack Web

各ブラウザのみで有効なCSSと記述するためのCSSハック方法のまとめ。

OS別の対応にはJavaScriptライブラリ使えばよさげ。

はじめに

以下のサイトで赤く表示されている方法が、現在開いているブラウザで有効な方法らしい：

browserstrangeness.github.io

以下に、ググって出てきた記事を20件ぐらいブラウズして方法をまとめたが、実際に効くのかはテストしていない。

いろいろな方法が出てくるし、情報が古かったりいろいろあるので、用いる際は各自テストしてほしい。

それで効かない方法があったらコメントで知らせてくれると、後で読む人が救われるかも知れない。

私の環境

テストしてないと言ったが、MacOSにおいてSafari、Google Chrome、Firefoxの対応方法が実際に機能するかは確認した。

Win機は持っていないのでIEやEdgeに関しては不明。

また、テストした際のバージョンは以下の通り：

あとmacのSimulatorアプリで、iPhone 13（iOS 15.0）のSafariでの表示も一応確認した。

特に断りがなければSafari対応というのはiOSのSafariも含まれていると思って良い。

各ブラウザで有効な方法

無効らしい方法も一応記載した。ググって右往左往している人がいるかも知れないので、はっきり否定するため。

最初でも述べたがWindowsの環境では効くか確認していない。

IEやEgdeの情報は特に注意。

IE

IE10とIE11の両方で効く：

_:-ms-input-placeholder, :root .css-hack {
  color: gray;
}

以下のものは、WindowsでハイコントラストモードがnoneのときにはIE10で効くが、active, white-on-black, black-on-whiteのいずれかの場合には効かないので非推奨：

/* IE10でのみ効く場合もあるが、非推奨 */
@media all and (-ms-high-contrast: none) {
  body {
    background-color: gray;
  }
}

以下はIE11でのみ有効：

_:-ms-lang(x)::-ms-backdrop, body {
  background-color: gray;
}

その他バージョンのIEについては下記記事を参照：

spyweb.media

Edge

まず用語解説。

EdgeHTMLというのは旧バージョンのEdge（v12-18）のことで、現在ではChromiumベースのEdgeが新しいバージョンとなっている。

koneta.nifty.com

forest.watch.impress.co.jp

EdgeHTMLでのみ有効：

@supports (-ms-ime-align: auto) {
  body {
    background-color: pink;
  }
}

/* OR */

/* 多分？ */
_:-ms-lang(x)::backdrop, body {
  background-color: pink;
}

Chromiumでのみ有効：

_:lang(x)::-ms-, body {
  background-color: pink;
}

全てのバージョンのEdgeで有効：

@supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
  body {
    background-color: pink;
  } 
}

以下の記事によると2021年6月時点では全てのEdgeに有効な方法はないと言及しているが...

netamame.com

Google Chrome

Google Chromeでのみ有効：

_:lang(x)::-internal-media-controls-overlay-cast-button, body {
  background-color: green;
}

Firefox

Firefoxでのみ有効：

_:lang(x)::-moz-placeholder, body {
  background-color: red;
}

/* OR */

@-moz-document url-prefix() {
  body {
    background-color: red;
  }
}

Safari

Safariでのみ有効。iOSのSafariにも効く。

_:lang(x)+_:-webkit-full-screen-document, body {
  background-color: blue;
}

/* OR */

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  _::-webkit-full-page-media, _:future, body {
    background-color: blue;
  }
}

以下の方法もSafariのみで有効だが、iOSのChromeでも有効になるらしい：

/* Safari or iOS Chrome */
_::-webkit-full-page-media, _:future, :root body {
  background-color: blue;
}

以下の方法はSafariのバージョンが11以上（現在はv14が最新）では効かないので非推奨：

/* 非推奨 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  ::i-block-chrome, body {
    background-color: blue;
  }
}

Google Chrome、Safari、Opera

これらのブラウザはwebkitを利用しているので、以下のような共通の指定方法がある。

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body {
    background-color: purple;
  }
}

以下の方法は効かないので注意：

/* 無効 */
_::content, _:future, body:not(*:root) {
  background-color: purple;
}

Google Chrome、Opera、Firefox

Google Chrome、Opera、Firefoxで有効。

Safari以外のwebkit系ブラウザでのみ有効と書いてあったが、実際確認してみるとForefoxでも有効であったので注意。

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  body {
    background-color: gold;
  }
}

OSごと

css_browser_selector.jsを使えば良いらしい。 以下のサイトのDOWNLOADというセクションからDLできる：

DLしたらhtmlファイルのheadタグ内とかで以下のように記述する：

<script src="css_browser_selector.js" type="text/javascript"></script>

すると、OSやデバイス判定ができる以下のようなCSSセレクタが使えるようになる：

.win {
  /* Windows（全バージョン） */
}

.mac {
  /* Mac OS */
}

.linux {
  /* Linux（x11とlinux）*/
}

.iphone {
  /* iPhone */
}

.ipad {
  /* iPad */
}

.android {
  /* Android */
}

.mobile {
  /* 全てのモバイルデバイス */
}

他にもいろいろ用意されている。

注意

上で書いたブラウザごとのCSS適用の方法をテストするには、実際のブラウザで試してみないと効くかわからない。

すなわち、Safariの開発タブのユーザエージェントを切り替えても本来あるべき動作にはならない。

Edgeの開発ツールでも同様のことができるらしいが、こちらでユーザエージェントを切り替えてもEdgeに有効なものしか適用されないとのこと。

でもIEの開発者ツールでIEのバージョン切り替えでは、IE10以前のブラウザ表示確認は有効らしい。

終わりに

最近のネットを最もよく象徴している『ググってもカス』という言葉があるが、やはり実際そうだと思う。

CMSで簡単にブログが書けて、自分専用のメモ代わりにしている人も多いが（私のことだが）、ググってヒットした人からすれば雑な記事は迷惑でしかないので、公開するならソースを明記したり、テストした環境の詳細（バージョン）とか日付とかはっきり明記してほしいものだ（どの口が言っている）。

あとクソブログに限ってコメント機能がないという世紀末。デマを一方的に垂れ流すのは最近流行りのSNS誹謗中傷より酷い。

蛇足のお気持ち表明もしたのでこれで終わります。

この記事の内容も全部引用（転載）ではあるが、一応テストしたということによる少しの信憑性の増加が付加価値ということにしておこう。

まああとは最初にも書いた通り、効かなかったり挙動がおかしい不明瞭な場合はコメントで議論してくれれば（他力本願）幸いです。

参考

現在開いているブラウザで有効か確認できる：

browserstrangeness.github.io

ググって出てきた日本語のまとめ記事。古いものが多い。

blanche-toile.com

dot-blog.jp

techmemo.biz

gray-code.com

下記記事は2021年更新なので新しい。

netamame.com

IEのCSSハックについて：

jeffreyfrancesco.org

Edgeのバージョンについて：

koneta.nifty.com

forest.watch.impress.co.jp

iPhone, MacBook, AirPodsの内蔵マイクの位置

Mac iOS

絵無くてごめん。めんどくさいので。

あと世代によって違うんだろうけどそこまでは調べられなかった。

ググった感じ大体のモデルは以下の通りなんだろうなと思う。

iPhoneの内蔵マイク

3ヶ所ある。

  1. ライトニングの穴の両隣。これがメインマイク。
  2. 前面カメラの横。iPhone 7以降はスピーカーも兼ねているはず。
  3. 背面カメラのところの小さい黒い穴。

メインマイク以外のマイクは主にノイズキャンセリングに使われているらしい。

MacBook

左のスピーカーの下部（手前側）にあるらしい。

なのでクラムシェルだと使えなさそう。

AirPods

スピーカー以外の黒い網の部分がマイク。

複数あるのはノイキャンのため。

Proも同じく。

内側の黒いだけの部分は着脱検知。

【VSCode】コードの自動整形（Formatter）

vscode

vscodeでコードの自動整形を行うには、formatterの拡張機能をインストールして、ちょちょいと設定を書くだけでいい。

拡張機能のインストール

formatterによって対応している言語に限りがあるので、言語名 formatterでググって、整形したいコードの言語に対応したformatterを探す。

例えば、html, css, jsとかであればPrettierというformatterがある。

これはvscodeの拡張機能用にもリリースされているので、vscodeの拡張機能検索欄にprettierと入力して一番上に出てくる「Prettier - Code formatter」をインストールする。

あるいはcmd + Pを押して出てくる窓にext install esbenp.prettier-vscodeと入力してretuenを押すことでもインストールできる。

以下でも引き続きPrettierを例に話を続けるが、他のformatterを使う場合でも勝手は同じ。

設定ファイル

vscodeでcmd + ,を押して（表示される設定UIの右上にあるアイコンをクリックして）設定ファイルsettings.jsonを表示する。

そこの一番外側の{ }の中に（既に何か書いてあれば最終行の行末にカンマ,を置いてからその後に）下記のコードを追加する。

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,

1行目でさっきインストールしたPrettierをデフォルトのformatterとして使用するように設定している。

2〜4行目では自動整形するタイミングを指定している：

  • editor.formatOnPaste: コードをペースト（cmd + V）したタイミングで自動整形
  • editor.formatOnSave: ファイルを保存（cmd + S）したタイミングで自動整形
  • editor.formatOnType: いまいちわからん

上の3つがfalseでも、option + shift + Fを押せばそのタイミングで整形してくれる。

また、cmd + shift + Pで表示される窓で検索すれば出てくるFormat Documentをクリックしてもいい。

コードの言語ごとに異なる設定

上のサンプルの設定ではグローバルにformatterを設定している。

例えば、htmlだけPrettierで整形するには次のように書けばいい。

  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

また、cssのみ整形をしないようにするには次のように書く。

  "[css]": {
    "editor.defaultFormatter": null
  }

cssのみ整形は手動でのみ行い、自動ではしてほしくないときは以下のようにすればよい。

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[css]": {
     "editor.formatOnPaste": false,
     "editor.formatOnSave": false,
     "editor.formatOnType": false
  }

あとは応用で。

言語別formatter

html, css, javascript, markdown, yml

上記の通りPrettierを使えばよし。

jsonやscssとかにも対応している。

※markdownの整形はgmなので無効にしておいた方がいい。

  "[markdown]": {
    "editor.defaultFormatter": null
  },

"prettier.disableLanguages"はもう使えなくなったらしい（あるいは非推奨か）。

Liquid

JekyllとかでLiquidの記述を含むhtmlとかのコードを整形したい場合は、sissel.shopify-liquidというformatterを使えばよい。

拡張機能「Liquid」をインストールすると使える。

  "[html]": {
    "editor.defaultFormatter": "sissel.shopify-liquid"
  },

なんかバグだと思うけど、効かないときがある。

いろいろ試してみた結果、settings.jsonに変更を加えた後、開いたままにしてたhtmlファイルとかで整形しようとしてもうまくいかないっぽい。 cmd + shift + Lのキーバインドの方では整形できるけど、cmd + Sなどのトリガーでは反応しない。

整形するhtmlファイルとかを一旦開き直すと（別タブのファイルに切り替えて戻すなど？）、また効くようになる。 意味がわからないけど。

Prettierだとliquidタグのところをうまく整形してくれないので、整形したいならこれを使うしかないがどうにも頼りない。

↓バージョン

# vscode
バージョン: 1.61.1
コミット: c13f1abb110fc756f9b3a6f16670df9cd9d4cf63
日付: 2021-10-14T01:23:30.274Z
Electron: 13.5.1
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 20.6.0

# Liquid（拡張機能）
v2.3.0
Released on
2019/1/5 5:53:45
Last updated
2020/3/28 14:57:05
Identifier
sissel.shopify-liquid

liquidもう開発止まってるやん...

erb

erbとかはBeautifyを使うといいらしい。

詳しくは以下の記事を参照（古いかも知れないけど）：

geniusium.hatenablog.com

ruby, php

rubyとかphpは標準のPrettierでは対応していない。

代わりに拡張機能「Prettier+」をインストールし、プラグインをインストールすればそれらの言語にも対応できるらしい。

詳しくは以下の記事を参照（古いかも知れないけど）：

geniusium.hatenablog.com

【dアニメストア】制作年・シーズン別タグ一覧が見づらいので整理した

Anime Web hack

dアニメストア公式HPのタグ一覧ページがクソ使いづらいので、制作年タグのURLだけここに抽出しておきます。

anime.dmkt-sp.jp

↑見出しidが設定されてないので、毎回アホみたいにスクロールしないといけない。

年の順番もバラバラだし。

とういことで整理↓　シーズン別もまとめておいた。

スマホでリンク踏めば多分自動でdアニメアプリに遷移するかと思います。

配信時期別ラインナップ

多分dアニメストアができて以降リアタイ配信されたアニメの時期別まとめ。タグによる分類ではない。

※メモ：最新の「2021年秋」のリンクはアーカイブURLができ次第書き換える。

2021年秋 2021年夏 2021年春 2021年冬
2020年秋 2020年夏 2020年春 2020年冬
2019年秋 2019年夏 2019年春 2019年冬
2018年秋 2018年夏 2018年春 2018年冬
2017年秋 2017年夏 2017年春 2017年冬
2016年秋 2016年夏 2016年春 2016年冬
2015年秋 2015年夏 2015年春 2015年冬
2014年秋 2014年夏 2014年春 2014年冬
2013年秋 2013年夏 2013年春 2013年冬
2012年秋 2012年夏

制作年別ランキング

制作年タグによるアニメの分類。

2021年
2020年 2019年 2018年 2017年 2016年
2015年 2014年 2013年 2012年 2011年
2010年 2009年 2008年 2007年 2006年
2005年 2004年 2003年 2002年 2001年
2000年 1999年 1998年 1997年 1996年
1995年 1994年 1993年 1992年 1991年
1990年 1989年 1988年 1987年 1986年
1985年 1984年 1983年 1982年 1981年
1980年 1979年 1978年 1977年 1976年
1975年 1974年 1973年 1972年 1971年
1970年 1969年 1968年 1967年 1966年
1965年 1964年 1963年 1962年 1961年
1960年 1959年 1958年 1945年

放送時期別ランキング

放送時期タグによるアニメの分類。

dアニメストアのサービス開始以前に放送されたアニメも分類されている。

2021年秋 2021年春 2021年夏 2021年冬
2020年秋 2020年春 2020年夏 2020年冬
2019年秋 2019年春 2019年夏 2019年冬
2018年秋 2018年春 2018年夏 2018年冬
2017年秋 2017年春 2017年夏 2017年冬
2016年秋 2016年春 2016年夏 2016年冬
2015年秋 2015年春 2015年夏 2015年冬
2014年秋 2014年春 2014年夏 2014年冬
2013年秋 2013年春 2013年夏 2013年冬
2012年秋 2012年春 2012年夏 2012年冬
2011年秋 2011年春 2011年夏 2011年冬
2010年秋 2010年春 2010年夏 2010年冬
2009年秋 2009年春 2009年夏 2009年冬
2008年秋 2008年春 2008年夏 2008年冬
2007年秋 2007年春 2007年夏 2007年冬
2006年秋 2006年春 2006年夏 2006年冬
2005年秋 2005年春 2005年夏 2005年冬
2004年秋 2004年春 2004年夏 2004年冬
2003年秋 2003年春 2003年夏 2003年冬
2002年秋 2002年春 2002年夏 2002年冬
2001年秋 2001年春 2001年夏 2001年冬
2000年秋 2000年春 2000年夏 2000年冬
1999年秋 1999年春 1999年夏 1999年冬
1998年秋 1998年春 1998年夏
1997年秋 1997年春 1997年夏 1997年冬
1996年秋 1996年春 1996年夏 1996年冬
1995年秋 1995年春 1995年夏 1995年冬
1994年秋 1994年春 1994年夏 1994年冬
1993年秋 1993年春 1993年夏 1993年冬
1992年秋 1992年春 1992年夏 1992年冬
1991年秋 1991年春 1991年夏 1991年冬
1990年秋 1990年春 1990年夏 1990年冬
1989年秋 1989年春 1989年夏 1989年冬
1988年春 1988年冬
1987年秋 1987年春 1987年冬
1986年秋 1986年夏 1986年冬
1985年秋 1985年春 1985年冬
1984年秋 1984年春 1984年夏 1984年冬
1983年秋 1983年春 1983年夏 1983年冬
1982年秋 1982年春 1982年夏 1982年冬
1981年秋 1981年春 1981年夏 1981年冬
1980年秋 1980年夏 1980年冬
1979年秋 1979年春 1979年夏 1979年冬
1978年秋 1978年春 1978年夏 1978年冬
1977年秋 1977年冬 1976年秋
1976年夏 1976年冬 1975年秋
1975年春 1975年夏 1975年冬
1974年秋 1974年春 1974年冬
1973年秋 1973年冬
1972年秋 1972年春 1972年冬
1971年秋 1971年春
1970年春 1970年冬
1969年秋 1969年春
1968年秋 1968年春
1967年春 1967年冬
1966年秋
1965年秋 1965年夏 1965年冬
1963年冬

直近一年間の時期別

直近一年間の時期別には専用のURLが用意されているので、最近のアニメを時期別で見たいなら以下のURLだけ覚えとけばよい。

引用元

anime.dmkt-sp.jp

Jekyll + Netlify CMSでブログ構築

Netlify CMS Web Jekyll

静的サイトジェネレータJekyllとホスティングサービスGitHub Pagesを利用して、サークルのホームページを公開している。

でも引き継ぎのことを考えると、非エンジニアにGitやらJekyllやらを使えというのはさすがに酷な気がして、やっぱりWord Pressみたいな管理画面（CMS）を用意したいということで、今回はNetlify CMSというものを試してみた。

目次

前提

GitHubとJekyllに関する基本的な知識はあるものとする。

Jekyllで作ったサイトをGitHub Pagesで公開できるレベルであれば十分。

準備

まず、GitHubとNetlifyのアカウントを作成しておく：

Jekyllのインストール

Rubyの環境を構築済みであれば、下記コマンドでインストールできる；

gem install jekyll

なんのこっちゃわからん人は公式docを参照。

例えばmy-siteという名前でサイトを作る；

jekyll new my-site

ディレクトリ移動しておく；

cd my-site

Gitリポジトリの作成

GitHubに飛んで、適当な名前でリポジトリを作成する。

以下の作業はデスクトップアプリを使ってやっても良い。 というかむしろそっちでやった方が良い（理由は後述）。

下記コマンドを順に打って、GitHubにプッシュする；

## 初期化
git init

## ステージング
git add .

## コミット
git commit -m "First commit"

## リモートリポジトリを登録
git remote add origin https://github.com/[user name]/[repo name].git

## チェックアウト
git branch -M main

## プッシュ
git push -u origin main

pushするとユーザー名とパスワードを聞かれるが、正しく入力してもうまくいかないハズ。

ここを参考に、トークンというものを作成して、パスワードの代わりにトークンを入力してください。

デスクトップアプリを使っていればこの苦労はないハズ。

デプロイ

Netlifyにアクセス。

ログインが済んでいればhttps://app.netlify.com/teams/[user name]/overviewというURLに飛ばされるはず。

「New site from Git」というボタンをクリックする。

「GitHub」のボタンをクリックして、アカウント認証する。

そうしたらリポジトリ一覧が表示されるので、さっき作ったリポジトリを選択する。

jekyllのサイトであることが自動で判定されるので、そのまま「Deploy site」をクリック。

デプロイが始まるのでしばらく待つ（3分ぐらい？）。

「Site deploy in progress」となっているところがサイトのURLになったらデプロイ完了。

そのURLからサイトにアクセスできる。

f:id:geniusium:20211007185243p:plain

管理画面を導入（Netlify CMS）

今までの作業ではただJekyllで作ったサイトをNetlifyでデプロイしただけ。

これから管理画面（CMS）を導入する。

さっき作ったmy-site/の中に、ファイルadmin/index.htmlを作成し、以下の内容をコピペする；

<!-- admin/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the identity widget -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>

もうひとつファイルadmin/config.ymlを作成して、下記内容をコピペする；

# config.yml

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)
media_folder: 'assets/uploads'
collections:
  - name: 'blog'
    label: 'Blog'
    folder: '_posts/'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    fields:
      - { label: 'Layout', name: 'layout', widget: 'hidden', default: 'post' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

変更をリモートに反映；

git add .
git commit -m "Create CMS"
git push -u origin

GitHubへプッシュが完了すると、自動でNetlifyの方でビルドが開始される。

デプロイを待っている間に、管理画面を使うための設定を行う。

Netlifyのページから「Site settings」タブの「Identity」を開いて「Enable Identity」をクリック。

このままでは誰でも自由にサインアップしてサイトの編集ができるようになってしまうので、サインアップできるユーザを招待限定にする。

「Site settings」タブの「Identity」を開いて、少しスクロールすると「Registration」の節が見えてくるので、そこにある「Registration preferences」の「Edit settings」をクリック。

f:id:geniusium:20211007172203p:plain

「Registration」を「Invite only」に変更して「Save」ボタンをクリック。

f:id:geniusium:20211007172433p:plain

また、そのまま下へスクロールして「Services」の「Git Gateway」というところの「Enable Git Gateway」ボタンをクリック。

これで管理画面にアクセスできるようになった。

まだログインできるユーザを登録していないので、自分をセルフで招待する。

「Identity」タブを開いて「Invite users」ボタンをクリック。

表示されたポップアップの枠内にメールアドレスを入力して「Send」ボタンをクリック。

そのアドレスに招待メールが届くので、「Accept the invite」のリンクをクリック。

するとデプロイされたサイトが表示されるが、URLが間違っているので次のように修正する。

ブラウザでURLを見てみるとサイトのURL/#invite_token=...みたいな感じなっていると思うので、間にadminを挿入してサイトのURL/admin#invite_token=...のようになるようにURLを修正して開き直す。

あとはパスワードを入力して、サインアップを完了する。

f:id:geniusium:20211007173529p:plain

そうすれば、管理画面が表示されるはず。

f:id:geniusium:20211007174319p:plain

次からは、サイトのURL/adminを開くことで管理画面にアクセスできる。

記事の作成

管理画面の「Blog」というところで、「New Blog」をクリックすれば新しい記事を作成できる。

「TITLE」には記事のタイトルを、「BODY」には記事の本文を入力し、「Publish」＞「Publish now」で記事を公開できる。

自動でgit pushされ、デプロイも自動で始まる。

※バグ：

もうお気付きかと思うが、「BODY」で日本語入力がぶっ壊れている。

これはNetlify CMSのバグで、issueが出てから1年くらい放置されている。

あとで応急処置の方法を紹介する。

ともかく、デプロイを待ってサイトのURLにアクセスすると、さっき作った新しい記事が反映されているはず。

記事に画像を使いたい場合は、管理画面上部の「Media」をクリックして、「Upload」ボタンをクリックして自分のPCから画像ファイルを選択する。

※注意：画像のファイル名に日本語とかの非アスキー文字が含まれていると、公開するサイト上でうまく画像が表示されないっぽい。適切な名前に変更してからアップロードすること。

アップロードしたファイルを利用するには、画像をクリックして「Copy Path」ボタンを押すと画像ファイルへのパスがクリップボードに保存されるので、それを記事中にペーストしてやればいい。

デフォルトだと/assets/uploads/以下に画像ファイルが配置される。

日本語入力できない問題

どうやらマークダウン（リッチテキスト）入力のときだけおかしくなる模様。

マークダウンではなく普通のテキスト入力に変更すればこのバグは見えなくなるっぽい。

つまり、admin/config.ymlの中でwidget: 'markdown'と書いているところをwidget: 'text'に変更すればよい。

おわりに

一応これでJekyll + Netlify CMSが実現できたが、日本語入力のバグとか管理画面のモバイル非対応とか度し難いことがいくつかあるので、実際にこれを使ってサイト運用するかはまだ未定。

microCMSを推奨する動きが見られるが、こっちはAPIベースなので面倒くさそう。

他にもCMSはいろいろあるみたいなのでもう少し調べるかな（CMS一覧？）。

あとJekyllで管理画面を使いたいだけなのであればJekyll Adminというプラグインがあるのでこれで良い気がする。

ということで最後まで読んだ人はお疲れさまです。

それではまた。

参考

qiita.com

www.netlify.com

www.netlifycms.org

blog.saladbowl.work

youtube-dlの使い方

hack youtube

Youtubeなどの動画をダウンロードするにはyoutube-dlというコマンドライン・プログラムを使うのが簡単。

Youtube以外の動画サイトでも使えるらしい。

インストールから基本的な使い方まで、調べたことをまとめておきます。

以下ではYoutubeで利用することを前提に話をしているところがあります。

目次

youtube-dl

youtube-dlはPythonで書かれたオープンソースのプログラム。

環境

テスト確認などをした私の環境です。

youtube-dlのインストール

Homebrewでインストール；

brew install youtube-dl

バージョン確認；

% youtube-dl --version
2021.06.06

基本的な使い方

動画のURLを指定するだけで、動画をDLできる；

youtube-dl "動画のURL"

DL可能なファイルの中で最高画質・最高音質のものを自動でDLするようになっている。

URLの代わりに動画のIDを指定しても構わない。 動画のIDはURLの?v=からURLの終わりか&が登場する部分までのことを指す。 例えばURLがhttps://www.youtube.com/watch?v=H3KvMgoA1C4であれば、動画のIDはH3KvMgoA1C4。

なお、プレイリスト中の動画（URLに&list=が含まれる）の場合、単にURLを指定するだけではプレイリストの動画を全てDLしてしまう。 ひとつの動画だけをDLしたいなら、動画IDのみを抽出して指定するか、--no-playlistオプションを付ける；

youtube-dl --no-playlist "動画のURL"

DLしたファイルは、デフォルトでは動画タイトル-動画ID.拡張子という名前でカレントディレクトリに保存される。

プレイリストをDL

プレイリストのURLを指定すれば、その中にある動画をまとめてDLすることもできる。 プレイリストのID（URLのlist=以降）を指定しても構わない。

年齢制限のある動画をDL

年齢制限のある動画をDLするには、年齢制限をクリアしたアカウントでログイン認証する必要がある（後述）。

あるいはyoutube-dlのforkであるyt-dlpを代わりに使えばよい。

https://github.com/blackjack4494/yt-dlc/issues/7

yt-dlpはHomebrewでインストールできる；

brew install yt-dlp

使い方（オプションなど）はオリジナルのyoutube-dlと同じ。

しかしこちらでは、年齢制限のある動画でも認証なしでDL可能；

yt-dlp "動画のURL"

非公開プレイリストのDL

他人が非公開にした動画やプレイリストのDLは不可能。

自分が作った非公開プレイリストは、そのアカウントでログイン認証すれば利用可能。

認証方法は後述。

DLするディレクトリ・ファイル名の指定

-oオプションでファイル名を指定してDLできる。

% youtube-dl -o output "URL"
...

% ls
output.mp4

保存ディレクトリも指定することが可能；

youtube-dl -o "~/Downloads/output" "URL"

デフォルトのテンプレートは%(title)s-%(id)s.%(ext)s。

ファイル名だけを取得するには--get-filenameオプションを付ける。

タイトルに含まれる半角スペースや&などの記号を使わないようにするには--restrict-filenamesオプションを付ける。

%をエスケープするには%%と書く。

%(title)sのようなシークエンス？はPythonの形式にしたがっている模様。 どういうタイプが用意されているかは公式のドキュメントを参照。

どのようなファイル名で保存されるかを確認したいときは、--get-filenameオプションを付ければ標準出力に表示される（ファイルはDLされない）。

形式を選択してDL

デフォルトで最高品質のものをDLできるが、画質・形式（拡張子）などを指定してDLすることもできる。

-Fオプションを付けると、DL可能なファイル一覧を表示する（DLはしない）；

youtube-dl -F "URL"

さまざまな画質や拡張子が表示される。

一番左に表示されるformat codeカラムの数字を-fオプションで指定することで、その動画（音声）ファイルをDLできる；

youtube-dl -f "format code" "URL"

デフォルトで-f bestvideo+bestaudio/bestオプションが設定されているので、何も付けなくても最高品質のものがDLされる。

拡張子や画質やそれらの優先順位などいろいろな指定方法があるが、詳しくは公式ドキュメントを参照。

実用的なのは、以下のように最高品質なmp4ファイルを指定するものであろう；

youtube-dl -f "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best" "URL"

どのような形式のファイルがDLされるのかを確認するには、--get-formatオプションを付ける（ファイルはDLされない）。

音声のみDL

音声だけDLしたければ、（利用可能な）音声ファイルの拡張子を指定すればよい；

youtube-dl -f m4a "URL"

形式を問わず、最高品質の音声ファイルがほしいのであれば、次のように指定すればいい；

youtube-dl -f bestaudio "URL"

あるいは、-xオプションで動画から音声を抽出する；

youtube-dl -x "URL"

抽出した音声の形式をエンコードしたいなら--audio-formatオプションで拡張子を指定する；

youtube-dl -x --audio-format mp3 "URL"

-f bestaudioは利用可能な音声ファイルをDLするもので、-xは利用可能な動画・音声ファイルの中で最高品質のものを、音声ファイルであればそのままDLし、動画ファイルであればDLして音声のみ抽出する、という点で若干異なる（結局同じになる場合もある）。

--audio-formatオプションは-xとセットでのみ利用可能。

ということで、音声ファイルのみほしい場合は、-xオプションを使った方がよさげ。

サムネをDL

--write-thumbnailオプションを付けると、動画のサムネもDLする。

サムネだけDLしたい場合は--skip-downloadオプションを付けて動画はDLしないようにすればいい；

youtube-dl --write-thumbnail --skip-download "URL"

サムネのURLを知りたいときは、--get-thumbnailオプションを付けて実行すれば標準出力に出力される；

youtube-dl --get-thumbnail --skip-download "URL"

シミュレーション

実際に動画ファイルをDLすることなく、動画のメタ情報だけをいろいろと取得できる。

例えば、動画のタイトルだけを取得するには-eオプションを使う；

youtube-dl -e "URL"

# OR
youtube-dl --get-title "URL"

プレイリストを指定すれば、プレイリスト内の動画のタイトルをそれぞれ取得する。

他にもいろいろある：

  • -g, --get-url：動画のURLを取得。動画ページのURLではなくて、ファイルが置いてあるURL。
  • -e, --get-title：動画のタイトルを取得。
  • --get-id：動画のIDを取得。URL中のIDと同じ。
  • --get-thumbnail：サムネイルのURLを取得。
  • --get-description：動画の概要を取得。動画の下に書いてあるやつ。
  • --get-duration：動画の長さを取得。2:13みたいな形式で表示。
  • --get-filename：DLしたときの動画のファイル名を表示。
  • --get-format：DLされる動画の形式を取得。

設定ファイルを作成

~/.config/youtube-dl/configファイルにオプションを列挙しておけば、デフォルトのオプション引数として利用できる。

例えば、DLするディレクトリをデフォルトのカレントディレクトリから~/Downloads/に変更するには、~/.config/youtube-dl/configファイルに以下のように設定を書く；

-o "~/Downloads/%(title)s-%(id)s.%(ext)s"

他にもいろいろ書いておきたいなら、改行して列挙しても構わない。

ログイン認証

基本的には以下の方法で認証できるはずだが、どうやら現在の？youtubeでは認証失敗するらしい。

一応標準的な認証方法をまとめておくが、Cookieを利用する方法のところまで読み飛ばして構わない。

引数で直接指定

引数で-u <username> -p <password>とログイン情報を指定すれば、認証した後動画をDLできる。

例えば以下のような感じ；

youtube-dl -u my_account@gmail.com -p my_password "URL"

認証情報ファイルを作成

~/.netrcファイルを用意すれば、毎回ログイン情報を直接書かなくてもよくなる。

~/.netrcファイルはyoutube-dlに限らず、一般に用いられているものらしい。

まだ存在していなければ、~/.netrcファイルを作成する；

touch ~/.netrc

パスワードを書いておくので、他人に見られないように権限を変更；

chmod a-rwx,u+rw ~/.netrc

権限を確認。以下のようになっていればOK；

% ls -al ~ | grep .netrc
-rw-------    1 hoge  staff    200 10  1 05:27 .netrc

~/.netrcファイルに以下のようにしてログイン情報を書いておく；

machine youtube login my_account@gmail.com password my_youtube_password
machine twitch login my_twitch_account_name password my_twitch_password

この情報を利用してログインするには--netrcオプションを付けて実行する；

youtube-dl --netrc "URL"

Cookieを利用して認証

始めにも書いたが、上記の標準的な認証方法ではダメなときがある。

そういうときはCookieを利用して認証すればよい。

まず、Cookieをテキストファイルとして取り出すために、ブラウザの拡張機能をインストールする。

インストールが済んだら、Youtubeのページを開き、ログインを済ませる。

ログインしてYoutubeのページを開いた状態で、拡張機能を実行（アイコンをクリック）して、CookiesをテキストファイルとしてDL。

カレントディレクトリに、DLしたCookieのファイルがcookies.txtという名前であるとする。

--cookiesオプションでCookieを指定することで認証することができる；

youtube-dl --cookies cookies.txt "URL"

毎回引数でファイルを指定するのは面倒なので、設定ファイルに書いておけばいいかもしれない。

ファイルも邪魔なので移動；

mv cookies.txt ~/.config/youtube-dl/

一応他人から見えないように権限を変更；

chmod a-rwx,u+rw ~/.config/youtube-dl/cookies.txt

設定ファイル~/.config/youtube-dl/configにCookieを利用するように設定；

--cookies ~/.config/youtube-dl/config

参考

github.com

github.com

github.com

mac-ra.com

knooto.info