Corredor

ウェブ、プログラミングの勉強メモ。

指定コマンドを繰り返し実行してくれる watch コマンドを試してみた

REST API で動作ログが確認できるサービスがあり、CLI でログを見られるのだが、何度も同じコマンドを手で叩き直すのは面倒臭い。5秒おきに繰り返しコマンドを実行して結果の差分を確認する仕組みが欲しくて調べてみたところ、watch というコマンドがそれを叶えてくれそうだったので、使ってみた。

MacOS の場合は Homebrew でインストールできる。Linux の場合は apt-get や yum で入れられるかな。

$ brew install watch

使い方は以下のようにする。

# 元々のコマンドがこんな形だったとする : jq を併用している
$ get-status-command | jq '.data.status'

# watch コマンドで5秒ごとに繰り返す
$ watch -c -d -n 5 "get-status-command | jq '.data.logs'"

このように、watch コマンドに実行したいコマンドを渡すだけで、それを指定秒数ごとに繰り返し実行してくれる。さらに、標準出力の内容に差分が出た時はハイライト表示もしてくれるので、ログの行が追加された、とか、何かのステータスを確認するコマンドで「Available」が「Unavailable」に変わった、とか、そういう変化がすぐに確認できる。

というワケで、watch コマンド便利。

Linuxシステム[実践]入門 Software Design plus

Linuxシステム[実践]入門 Software Design plus

  • 作者:沓名亮典
  • 出版社/メーカー: 技術評論社
  • 発売日: 2013/08/20
  • メディア: Kindle版

Oracle DB の「セッション」と「プロセス」って何?

Oracleの基本 ~データベース入門から設計/運用の初歩まで

Oracleの基本 ~データベース入門から設計/運用の初歩まで

Web アプリと Oracle DB を接続する時、JDBC コネクションプール数を設定したりするが、この「プール数」というのは、Oracle DB 側で設定する「セッション数」「プロセス数」よりも小さくしておかないといけない。受け入れ側 (DB 側) のキャパを超える接続をしようとしてしまうからだ。

それはそうなんだろう、と思うが、じゃあこのセッションプロセスというのは何なの?という話。


調べてみたところ、以下のページが一番分かりやすかった。

  • Oracleに接続するとセッションが1つ生成される
  • そのセッションを通じてSQL文を発行するとプロセスが生成される
  • 通常は1セッション=1プロセスだけど、パラレル実行すると1セッション=nプロセスになる

なるほど、1 セッション・n プロセスという関係で考えておくのが良さそうだな。少なくとも、「セッション数よりもプロセス数の方が大きい」状態にはならないのだろう、と。


…と思ったが、セッション数とプロセス数を変更してみたら、面白い動きをした。

まず、現在のセッション数とプロセス数の上限は以下で確認できる。

SELECT * FROM V$RESOURCE_LIMIT WHERE RESOURCE_NAME IN ('processes', 'sessions');

手元の DB で見てみると、

  • プロセス : 200
  • セッション : 334

…となっていた。どうもセッション数の方が大きいのだ。「1 セッション = n プロセス」になりうるのに?


プロセス数とセッション数は以下の SQL で変更できる。反映は DB の再起動が必要になる。

ALTER SYSTEM SET PROCESSES = 400 SCOPE=SPFILE;
ALTER SYSTEM SET SESSIONS  = 450 SCOPE=SPFILE;

すると、プロセス数の上限は指定したとおりだったが、セッション数の上限が勝手に引き上げられていた。

  • プロセス : 400
  • セッション : 622

…うーん、この動きの意味が分からないや。でもなんか自動調整とかされるんならプロセス数だけ気にしておけばいいのかなー。


ちなみに、現在のセッション一覧は以下で確認できる。

SELECT
   machine,
   TO_CHAR(LOGON_TIME, 'YYYY/MM/DD HH24:MI:SS') LOGON_TIME,
   sid,
   serial#,
   USERNAME,
   OSUSER
FROM
   V$SESSION
WHERE
   STATUS = 'INACTIVE'
ORDER BY
   LOGON_TIME;

理屈がまだ分からないので、要勉強…。

Vue.js で console.log を使うとビルド時にコケるので対処する

Vue CLI 3 で作成したアプリケーション中に console.log()console.error() などを書いた状態で npm run build (= vue-cli-service build) をすると、エラーが発生してしまい正しくビルドできなかった。

$ npm run build

> frontend@0.0.0 build /Users/Neo/practice-flask-vue/frontend
> vue-cli-service build


⠙  Building for production...Starting type checking service...
Using 1 worker with 2048MB memory limit
⠼  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                                                                                               16:07:09

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at src/App.vue:73:7:
  71 |     }
  72 |     catch(error) {
> 73 |       console.error(error);
     |       ^
  74 |       this.errorMessage = `${error}`;
  75 |     }
  76 |   }


error: Unexpected console statement (no-console) at src/App.vue:91:7:
  89 |     }
  90 |     catch(error) {
> 91 |       console.error(error);
     |       ^
  92 |       this.errorMessage = `${error}`;
  93 |     }
  94 |   }


2 errors found.

 @ ./src/main.ts 6:0-28 10:13-16
 @ multi ./src/main.ts

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@0.0.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the frontend@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Neo/.npm/_logs/2019-12-05T07_07_09_295Z-debug.log

プロダクション・ビルドしようとすると、no-console エラーに引っかかる、ということのようだ。

大したアプリではないので console を使っているのだが、ビルドできないのは困る。しかし手作業でコードを修正するのも面倒臭い。

そこで調べてみたところ、Babel のプラグインを入れれば解消できることが分かった。

まずは以下をインストールする。このプラグインはトランスパイル時に console のコードを削除してくれるモノ。

$ npm install --save-dev babel-plugin-transform-remove-console

続いて、babel.config.js を開く。Vue CLI で生成した直後だと以下のようになっていると思う。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
};

コレを次のように編集する。

const plugins = [];

// npm run build でビルドする際 console の使用箇所があるとエラーになるので除去する
if(process.env.NODE_ENV === 'production') {
  plugin.push('transform-remove-console');
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: plugins
};

本番ビルドが行われる時は NODE_ENV 環境変数に production という文字列が設定されているので、コレを利用して、プロダクション・ビルドの時だけ console の記述を削除するようにした、というワケ。

コレで一件落着。無事 npm run build も通るようになって良き良き。

Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門

  • 作者:掌田津耶乃
  • 出版社/メーカー: 秀和システム
  • 発売日: 2019/02/05
  • メディア: 単行本

2020年1月版・かすれない游ゴシックを実現する font-family 指定

コレまで幾度となく戦ってきた Windows 游ゴシックだが、Chromium Edge のリリースに合わせて、現時点の最新の主要ブラウザで改めてレンダリングを確認してみた。すると、上手く游ゴシック Medium で描画させる @font-face 指定が導けたので、紹介する。

TL;DR : 先に改良コードを載せる

2020年1月時点の主要最新ブラウザで游ゴシック Medium を表示するためのコードは以下。

  • 1 : "Yu Gothic" の定義を上書きする @font-face を指定する方法
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
body { font-family: YuGothic, "Yu Gothic", sans-serif; }

詳細は後述するが、最近の Chrome などで無視されていた @font-face 指定が、また解釈されるようになっていたのだった。

ただ、今後ブラウザの仕様変更によって、また @font-face 指定が効かなくなることもあるかもしれない。そんな時に、上のやり方だと Regular ウェイトの游ゴシックで表示されてしまう恐れがある。

もしも @font-face 指定が無視されてしまった時に、Regular ウェイトを適用せず、メイリオなどをフォールバックで適用させるようにするなら、以下のコード。

  • 2 : オリジナルの font-family を定義する方法
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
body { font-family: YuGothic, "Original Yu Gothic", Meiryo, sans-serif; }

よく font-weight を 100 から 900 まで書くパターンも見られる。そちらで実装しても、表示結果は上の2つと同じだった。より堅牢に実装したい場合は次のように実装しても良いだろう。

  • 3 : オリジナルの font-family で、font-weight を精緻に定義する方法
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 100; }
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 200; }
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 300; }
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 400; }
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 500; }
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 600; }
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 700; }
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 800; }
@font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 900; }
body { font-family: YuGothic, "Original Yu Gothic", Meiryo, sans-serif; }

游ゴシックフォントの実験場サイトを作った

游ゴシックフォントの実験場サイト「Perfect Yu Gothic」を開いた。GitHub Pages は以下。

neos21.github.io

GitHub リポジトリは以下。

github.com

今回この記事で書く内容は、この実験場サイトで色々と検証した結果となる。

検証に使用した OS・ブラウザのバージョン

検証に使用したブラウザは以下のとおり。

  • Windows10
    • Chrome : v79 … バージョン: 79.0.3945.117(Official Build) (64 ビット)
    • Chromium Edge : v79 … バージョン 79.0.309.65 (公式ビルド) (64 ビット)
    • Firefox : v72 … 72.0.1 (64 ビット)
    • IE : v11 … バージョン: 11.592.18362.0更新バージョン: 11.0.170 (KB4534251)
  • MacOS Mojave
    • Chrome : v79 … バージョン: 79.0.3945.117(Official Build) (64 ビット)
    • Chromium Edge : v79 … バージョン 79.0.309.65 (公式ビルド) (64 ビット)
    • Firefox : v72 … 72.0.1 (64 ビット)
    • Safari : v13 … バージョン13.0.2 (14608.2.40.1.2)

フォント名の「Full Name」と「PostScript 名」

フォント名の表記には「Full Name」と「PostScript 名」という2種類の表記方法がある。

今回はこの「Full Name」と「PostScript 名」を調べ直し、これらを @font-facesrc: local() で指定した場合と,直接 font-family に書いた場合とで、見え方に違いが出るか、各ブラウザで確認してみた。

/* 次のように @font-face で定義してみる */

/* Windows 游ゴシック・Medium ウェイトの Full Name 表記 */
@font-face           { font-family: "Full Name Yu Gothic"; src: local("Yu Gothic Medium"); }
.font-face-full-name { font-family: "Full Name Yu Gothic"; }

/* Windows 游ゴシック・Medium ウェイトの PostScript 表記 */
@font-face             { font-family: "Post Script Yu Gothic"; src: local("YuGothic-Medium"); }
.font-face-post-script { font-family: "Post Script Yu Gothic"; }


/* 次のように font-family で直接指定する */

/* Windows 游ゴシック・Medium ウェイトの Full Name 表記 */
.font-family-full-name   { font-family: "Yu Gothic Medium"; }

/* Windows 游ゴシック・Medium ウェイトの PostScript 表記 */
.font-family-post-script { font-family: "YuGothic-Medium" ; }

実際に検証用に作ったページは以下。左半分のカラムが @font-face 指定で、右半分が font-family 直指定。そのフォントが正しく反映されていると青色、反映されていないと赤色にしている。

neos21.github.io

手元で撮ったスクショは以下。

  • Windows Chrome
    • f:id:neos21:20200117222907p:plain
  • Windows Chromium Edge
    • f:id:neos21:20200117222919p:plain
  • Windows Firefox
    • f:id:neos21:20200117222931p:plain
  • Windows IE
    • f:id:neos21:20200117222941p:plain

Chrome と Chromium Edge は、さすがに同じ Blink エンジンなので、見た目も同じ。Gecko エンジンの Firefox は全体的に Chrome 系より太めに見える。IE だけ無効になっている指定値が結構見られるが、概ね @font-face 指定が上手く効いていることが分かる。

ついでに、MacOS 向けの Full Name と PostScript 名もテストしているので、スクショを貼っておく。

  • MacOS Chrome
    • f:id:neos21:20200117223009p:plain
  • MacOS Chromium Edge
    • f:id:neos21:20200117223025p:plain
  • MacOS Firefox
    • f:id:neos21:20200117222836p:plain
  • MacOS Safari
    • f:id:neos21:20200117222852p:plain

MacOS にはそもそも Light・Regular ウェイトが搭載されていないので、見た目は「×」が多いが問題なし。@font-face で Full Name や PostScript 名を指定すると、ウェイト込みでの指定も綺麗にできそうだ。ただ、結局のところそれは font-family: YuGothic とさえ指定すれば同じことなので、参考までに。

一覧表にするとこんな感じ。

f:id:neos21:20200117223005p:plain

ということで、以前使えなくなっていた @font-face 指定に可能性が出たので、追加で細かい検証をしておいた。

font-weight 指定は 100 ごとにしなくても問題なし

@font-face でフォントを定義する時、font-weight を 100 から 900 まで、9段階で実装しているモノをよく見かける。あれはあれで、精緻で堅牢な実装で、確実さはあるのだが、いささかコード量が多いと感じる。そこで、以前からやっていた簡素な書き方と、レンダリングに違いが出るか確認してみた。

/* 簡素に実装したバージョン */
@font-face  { font-family: "Original Yu Gothic Simplified"; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face  { font-family: "Original Yu Gothic Simplified"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
.simplified { font-family: "Original Yu Gothic Simplified"; }

/* 詳細に実装したバージョン */
@font-face { font-family: "Original Yu Gothic Detailed"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 100; }
@font-face { font-family: "Original Yu Gothic Detailed"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 200; }
@font-face { font-family: "Original Yu Gothic Detailed"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 300; }
@font-face { font-family: "Original Yu Gothic Detailed"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 400; }
@font-face { font-family: "Original Yu Gothic Detailed"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 500; }
@font-face { font-family: "Original Yu Gothic Detailed"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 600; }
@font-face { font-family: "Original Yu Gothic Detailed"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 700; }
@font-face { font-family: "Original Yu Gothic Detailed"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 800; }
@font-face { font-family: "Original Yu Gothic Detailed"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: 900; }
.detailed  { font-family: "Original Yu Gothic Detailed"; }

実際の検証ページは以下。

neos21.github.io

キャプチャは以下。フォントを指定していない「未指定」のところには、9段階のウェイトを持つ「ヒラギノ角ゴシック」(MacOS から Windows に輸入した) をブラウザデフォルトとして指定しているので、比較しやすいかと。

  • Windows Chrome
    • f:id:neos21:20200117222913p:plain
  • Windows Chromium Edge
    • f:id:neos21:20200117222925p:plain
  • Windows Firefox
    • f:id:neos21:20200117222936p:plain
  • Windows IE
    • f:id:neos21:20200117222947p:plain

このとおり、簡素に実装したバージョンと、詳細に実装したバージョンとで、描画のされ方に違いは見られなかった。簡素に実装したバージョンは、font-weight: 600 から Bold フォントが使われた。

同検証ページは font-family: YuGothic を併記しているので、MacOS での描画も同時に確認しておいた。

  • MacOS Chrome
    • f:id:neos21:20200117223016p:plain
  • MacOS Chromium Edge
    • f:id:neos21:20200117223032p:plain
  • MacOS Firefox
    • f:id:neos21:20200117222845p:plain
  • MacOS Safari
    • f:id:neos21:20200117222859p:plain

結論再掲 : @font-face で Full Name と PostScript 名を指定すれば OK

ということで、「TL;DR」で紹介したコードに行き着いたというワケ。

"Yu Gothic" を上書きするパターン、オリジナルのフォント名を作る簡素パターン、詳細に実装するパターンと、3つのバリエーションを掲載したが、どれを選ぶかは完全に好み。個人的には "Yu Gothic" 指定を上書きする1つ目のパターンが気に入っているかな。メイリオはどうしてもモッサリしているので、それだったら Regular ウェイトの游ゴシックが当たってもいいかなーと。

以上が、2020年1月時点で、Web サイト作成者が実施できる対策だ。

クライアントサイドでできる対策を再度まとめる

ユーザスタイルシートで @font-face 指定を追加する

自分のサイト以外の "Yu Gothic", "游ゴシック" 指定についても、Medium を適用して読みやすくしたいと思うだろう。そんな場合は、Stylish などのブラウザ拡張機能を使い、次のようなユーザスタイルシートを導入してやると良い。

@font-face { font-family: "Yu Gothic"        ; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "Yu Gothic"        ; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
@font-face { font-family: "Yu Gothic Medium" ; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "Yu Gothic Medium" ; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
@font-face { font-family: "游ゴシック"       ; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "游ゴシック"       ; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }
@font-face { font-family: "游ゴシック Medium"; src: local("Yu Gothic Medium"), local("YuGothic-Medium");                    }
@font-face { font-family: "游ゴシック Medium"; src: local("Yu Gothic Bold")  , local("YuGothic-Bold")  ; font-weight: bold; }

同様の手法は以前も紹介したが、ある時から Chorme で使えなくなっていた。それが現在の Chrome v79 ではまた利用できるようになっていたので、再掲。

手元で試したところ、IE の「インターネットオプション」から指定できる「ユーザスタイルシート」で上のような記述を入れたら、IE がバグった (どのページもレンダリングできなくなり、CSS ファイルを空にしないとハングが解消できなくなった)。Chromium Edge は対応する拡張機能がまだなさげなので、現状は Stylish がインストールできる Chrome と Firefox だけかな。

ユーザスタイルシートで -webkit-text-stroke-width を指定する

コレも以前から何回かお伝えしている方法だが、-webkit-text-stroke-width というプロパティを指定すると、文字を太く見せられる。上の @font-face 指定と併用すると良いだろう。

* { -webkit-text-stroke-width: .4px !important; }

.4px 部分をお好みに応じて増減する。手元で試している感じだと、Chrome の場合「游ゴシック Medium」が適用されてもまだ薄く見えるので、.5px ぐらいを指定しても良いと思う。Firefox は Medium 指定だけで十分太く見えているので、コレを併用するとしても .2px ぐらいで良いかもしれない。

究極 : レジストリ変更

Regular ウェイト・Light ウェイトを Medium ウェイトのフォントファイルと差し替えてしまう、という最終技。以前から紹介しているとおりで、一番効果はある。

neos21.hatenablog.com

neos21.hatenablog.com

効果がなくなった手法 : MacType はどのブラウザも効かなくなっている模様

どういう仕様変更があったのか知らないが、本稿執筆時点の Windows 10 環境で試したところ、MacType がページのフォントレンダリングを改善してくれるブラウザが1つもなくなっていた。以下は MacType の有効・向こうを切り替えた時のキャプチャ。

  • MacType 無効 (Off)
    • f:id:neos21:20200117222959p:plain
  • MacType 有効 (On)
    • f:id:neos21:20200117222953p:plain

左上 Chrome・左下 Chromium Edge・右上 Firefox・右下 IE。IE はメニューバーなどに MacType が効いてはいるが、ページ中のフォントには影響していない。以前は確かアンチエイリアスがかかったと思うんだけど…?

とりあえず、MacType で何とか出来なくなったなら、ホントに CSS で頑張るしかなくなったワケだ。

以上

なんだか結局、以前やっていた @font-face 指定に戻れることになって、ブラウザに振り回されてる感じ。拙作の Neo's Normalize も対応しておこうかな。

ほんとに、フォント。 フォントを活かしたデザインレイアウトの本

ほんとに、フォント。 フォントを活かしたデザインレイアウトの本

  • 作者:ingectar-e
  • 出版社/メーカー: ソシム
  • 発売日: 2019/02/20
  • メディア: 単行本(ソフトカバー)