chromeにて特定のページに指定したcssを適用する

css

この記事は何
解決法
- 手法1: 既存のchrome拡張を使う
- 手法2: 自分で拡張機能を作成しdeveloperモードにて拡張を読み込む
作成した理由
- 作成例1: courseraの動画配置
- 作成例2: youtubeで関連動画を表示しない

この記事は何

chromeにて特定のページに独自に指定したcssを適用したいので、そのための手順と適用した例を示します。

解決法

手法1: 既存のchrome拡張を使う

いろいろな拡張が存在しますが、stylusを使用します。

インストール後、拡張機能をクリック→ [管理]をクリック。

f:id:misos:20201020200304p:plain — [管理]ボタンの位置.

[新スタイルを作成] > 右側に表示されるエディタに独自cssを指定します。

f:id:misos:20201020200334p:plain — エディタにcssを記述します.

エディタ編集中もリアルタイムでcssがページに適用されるので、想定したcssが適用されているか確認しながら編集できます。 cssを指定しても反映されない場合は「!important」をつけてください。

Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).

引用元：Specificity - CSS: Cascading Style Sheets | MDN

特定のURLでのみ有効になるcssも指定することができます。特定ドメインやパターンマッチしたurlにのみ独自cssを適用する場合は、拡張機能管理画面の「サイトへのアクセス」に拡張機能が有効になるurlを個別に指定してください。

手法2: 自分で拡張機能を作成しdeveloperモードにて拡張を読み込む

以下を参照してください。

Chrome で開いたページに任意のスタイルシートを適用する - Qiita

また、公式のチュートリアル

では {code: 'document.body.style.backgroundColor = "' + color + '";'}); の箇所で背景色を変えるような拡張を作成しています。

作成した理由

なぜ必要になったかを一応書いておくと、courseraにてページをスクロールした際の動画の位置が

f:id:misos:20201020202325p:plain — デフォルトの動画の位置

となっていて、できれば右上に大きく表示して欲しい、ということで自分で指定しました。最終的に、

f:id:misos:20201020202026p:plain — courseraの講義動画の配置箇所

のような表示にできました。

また動画内に字幕表示機能があるのですが、スライドと重なってみにくいことがよくあるので動画外に字幕を表示するように調整しました。

f:id:misos:20201023120442p:plain — 字幕表示の例

作成例1: courseraの動画配置

courseraの動画・ボタン配置・字幕表示位置を上記画像のように修正します。

作成例2: youtubeで関連動画を表示しない

youtubeでやコメント欄の表示を消します、なんかたまにだらだら見てしまうことを避けるために設定してます。

2020-10-17

jupyter bookを用いて本を書いてみる

コード python

この記事は何
Jupyter Bookとは
ページ作成までの流れ

この記事は何

jupyter bookを使用する際のはじめの手順を調べた際のメモ書きです。

自分の勉強のメモ書きや復習を書き残すためにjupyter bookを使ってみようと思いました。

Jupyter Bookとは

※↑のサイト自体がJupyter Bookで作成されています

Sphinxを用いてjupyter notebookを静的サイトとして出力するツール。数式の入力やpdfの出力を行うことができる。

pip install jupyter-book にてインストールする。

ページ作成までの流れ

基本的にはドキュメントを参照しつつ、コマンドを順に実行していけば良い。

サンプルページを作成する

参照ページ：Build your book

jupyter-book create mlstudybook/

としてサンプルのjupyter bookができる、この mlstudybook フォルダ以下にビルドに必要なファイルが出力されるので、それぞれ内容を確認する。

jupyter-book build mlstudybook/

として静的サイトジェネレータ（Sphinx v3.2.1）を用いたHTMLが出力される。出力されたページは mlstudybook/_build/index.html にて確認することができる。

ページを追加する

参照ページ：Table of contents structure

マークダウン・ipynbファイルを追加したのち、_toc.yal に各マークダウン・ipynbファイルがどのチャプターで使用されているのかを指定する。例えば、

- file: intro

- part: はじめの章
  numbered: true
  chapters:
    - file: sec-stat/intro
    - file: sec-stat/data_description
    - file: sec-stat/basic_distribution
    - file: sec-stat/statistical_method
    - file: sec-stat/hypothesis_tests
    - file: sec-stat/linear_model

- part: 次の章
  numbered: true
  chapters:
    - file: sec-table/intro
    - file: sec-table/notebooks

と指定された時、intro.mdがトップページになる。次の「はじめの章」の１ページ目はsec-stat/intro.md、「はじめの章」の二節目は sec-stat/data_description.ipynb が使用される。

カスタムのcss/jsを追加する

参照ページ：Custom Sphinx configuration

_static/フォルダ以下に css/jsファイルを追加すると、各ページのヘッダーに自動的に追加される。例えば _static/main.cssと_static/main.js を追加してビルドを実行するとhtmlの <head>~</head> に

    <link rel="stylesheet" type="text/css" href="_static/main.css" />
    <script src="_static/main.js"></script>

が追記される。

数式の出力・使用できる記法

MyST markdownを使用して記述されたものが認識される。以下のチートシートを見ながら記述すれば良い。

Vscodeでのnotebookの実行

設定にてjupyter notebookの実行を毎回確認するように設定されていると、 jupyter notebookの実行のたびに確認が入る。（Working with Jupyter Notebooks in Visual Studio Code）

jupyter book編集時は一時的にこの設定を「Always Trust」に設定しておくと手間が省ける。

例えば、マークダウン領域に

f:id:misos:20201017184256p:plain

と記述するとビルドしたページでは

f:id:misos:20201017184311p:plain

と表示される。jupyter notebook内部のマークダウン領域でも同様の処理が適用されるが、ビルド前のnotebookには表示されないので注意する。

2020-10-05

「\Microsoft の使い方が間違っています。」への対応

コマンドメモエラー解決

バッチファイルを記述して実行した際、「\Microsoft の使い方が間違っています。」等のエラーをところどころ見たので、このエラーへの対応方法を調べる。

ドキュメントを調べる場合は以下を参照すること。

以下、個人的につまづいた部分のチェックリスト。

チェックリスト

ダブルクオーテーション

空白文字が含まれているコマンドをダブルクオーテーション("command name")で囲う
コマンドの引数をダブルクオーテーションで囲うと、ダブルクオーテーションも引数の一部として扱われるが、それが意図している動作か確認する
環境変数やローカルの変数にダブルクオーテーションが含まれている物があり、それにより意図しないコマンドを実行しようとしていないか確認する

条件分岐

for X in (Y)の ( の手前にはスペースをいれる
ファイル名の有無を確認するときは、同じ名前のフォルダがないかを確認するようにする

空白

変数宣言の前後に半角スペースがあると、半角スペースも変数名の一部として扱われる

2020-10-04

久々にMIDIキーボードを接続したらいろいろ困った

趣味雑談音楽

雑談です。

KORGのmidiキーボードをmacにbluetoothで接続していたのですが、若干ラグがあるように感じたので有線で接続し直しました。これまではmacのUSB端子に空きがない、という理由だけで無線接続立った模様。

前回触ってから２ヶ月くらい放置してたので久々に練習しようとしたら、Macのアップデートの影響からかWine(Winのアプリを動かすソフト)が動かなかった...。一旦ガレージバンドに接続して何か打ち込んでみようと思います。

あと左手が全然思うように動かない、日頃から少しずつ積み重ねるのが大切ですね。練習を続けつつ、作業中にみれる動画も探してみようと思います。下は今しがたたまたま見つけた動画です。

youtu.be

2020-09-15

MacでのCLIPSTUDIOプラグイン開発時のメモ

C++ 趣味覚書

これは何のメモ
関連リンク
- 公式SDK・ドキュメント
- 他の開発例
サンプルプロジェクトのビルドまでの流れ
独自の機能の追加
- C++のテスト環境の構築

情報が少なかったのとプラグインも少なかったので後継の方の役に立てればと思いメモします。ただし、最新の情報はCLIPSTUDIO SDK配布サイト、および同封のドキュメントを参照してください。

これは何のメモ

クリップスタジオ（clipstudio）EXのプラグインを作成するためのSDKをMac OS Catallina にてセットアップするまでの流れを調べます。

サンプルプロジェクトのビルドまでの流れ

環境の確認

macOS Catalina 10.15.6、Xcode11.7を使用します。 CLIP STUDIOはCLIP STUDIO PAIN EX 1.9.11を使用します。 C++のバージョン確認は

$ c++ --version

Apple LLVM version 10.0.1 (clang-1001.0.46.4)
Target: x86_64-apple-darwin18.7.0
Thread model: posix

です。

Xcode起動

ダウンロードしたzipファイル内部のプロジェクトファイルをXcodeにて開きます。 Xcode起動＞「Open...」＞ダウンロードしたzipファイルを展開したものから「FilterPlugin.xcodeproj」を選択します。開いたファイルはおそらく日本語が文字化けした状態になっているので文字コードを変えてファイルを読み込みなおします。「Command+Option+1」でText Settingを開いてText Encodingの指定を「Japanese（Shift-Jis）」に変更して「Reinterpret」をクリックすることでファイルを別の文字コードで読み込みなおします。ただし、自分の環境ではこの指定をしても文字化けが修正されず、VsCode上にてファイルをShift-Jisで読み込みUTF-8で保存し直すことで文字化けを修正しました。

FilterPluginConfig.xcconfigの編集

プラグイン例では libstdc++ が使用されていますが、Xcode10以降では libstdc++ を使用したプロジェクトがビルドできません。

CLANG_CXX_LIBRARY = libc++

と指定してください。

自分の環境では

MACOSX_DEPLOYMENT_TARGET = 10.6

となっている箇所を

MACOSX_DEPLOYMENT_TARGET = 10.15

に変更しました。最終的に FilterPluginConfig.xcconfig の内容は

GCC_VERSION =
SDKROOT = macosx
MACOSX_DEPLOYMENT_TARGET = 10.15
ARCHS = $(ARCHS_STANDARD_64_BIT)
VALID_ARCHS = x86_64
ENABLE_OPENMP_SUPPORT = NO
WRAPPER_EXTENSION = cpm
GCC_C_LANGUAGE_STANDARD = gnu99
CLANG_CXX_LANGUAGE_STANDARD = gnu++98
CLANG_CXX_LIBRARY = libc++

として、この状態でビルドが成功しました。

プラグインをCLIPSTUDIOで使用する

ビルドに成功すると FilterPlugIn/FilterPlugIn/OutputMac/FilterPlugIn/Debug 以下に HSV.cpm が出力されます。このファイルを /Users/{ユーザー名}/Library/CELSYS/ CLIPStudioModule PlugIn/PAINT/以下に配置します。

※配置するフォルダはSDK同封のドキュメントに指定されています

配置後にCLIPSTUDIOを再起動してください。プラグインが無事読み込まれると、以下の画像のように「色調補正＞色相・彩度・明度」プラグインが追加されます。

f:id:misos:20200915201136p:plain