Categories

最新コメント

様々なブラウザ等でのテスト

wakairo @wakairo

ブラウザの開発者ツールで、スマホを含めた様々なデバイスでの表示を再現できますが、標準搭載フォントの違いによる影響などは、ブラウザの開発者ツールでは再現できないのではないかと考えています。
そこで、現実のデバイスでの表示や挙動がより正確に再現できる方法を探しているのですが、何が良いのでしょう？

今のところは以下のような特徴からLambdaTestを利用しているのですが、もっと良いサービスがあったりするのでしょうか？

  • 「Real-time cross browser testing on Real Device Cloud」と書いてあるので、LambdaTestのサービスの裏側では実機が動いているらしい。つまり、表示や挙動が正確である可能性が高い。
  • 毎月60分までは無料で使える

ちなみに、維持管理の手間やコストが少なく、さらに、怪しそうなデバイスとブラウザの組み合わせをすぐにパッと試せた方が良いので、実機を多数用意するとか、必要に応じて実機をレンタルするというのは候補にならない気がします。

0
Post
Raw
https://www.techtips.page/ja/comments/22

すぐに合成が可能

wakairo @wakairo
最終更新

GitHubのReadmeで紹介されている以下のリンク先で、すぐにこのライブラリを利用してQRコードと画像の合成が出来て便利です。

https://kciter.so/qart.js/

インストールしたりコードを書いたりしなくても利用でき、すぐに試せるのは嬉しいです。

0
Post
Raw
https://www.techtips.page/ja/comments/21

フォント自体ではサポートしている文字がGoogle Fontsでは使えない問題

wakairo @wakairo
最終更新

IBM Plex Monoのみを指定したときにGoogle Fontsが教えてくれるCSSの内容は以下の通りで、Box-drawingのU+2500からのコードポイントはやはり含まれていないように見えます。
Googleは何を基準にunicode-rangeに入れたり外したりしているのでしょう？フォントファイルを分割することで、フォントファイルの容量が肥大化する問題は回避しているのですから、そのフォントがサポートしているunicode-rangeは全てカバーしても良いように素人目には思えますが。Box-drawingなどのunicode-rangeを外しているのには何の理由があるのでしょうか？

/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v15/-F63fjptAgt5VM-kVkqdyU8n1iIq129k.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v15/-F63fjptAgt5VM-kVkqdyU8n1isq129k.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v15/-F63fjptAgt5VM-kVkqdyU8n1iAq129k.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v15/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v15/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
0
Post
Raw
https://www.techtips.page/ja/comments/19

フォント自体ではサポートしている文字がGoogle Fontsでは使えない問題

wakairo @wakairo
最終更新

具体的にはIBM Plex MonoというフォントでBox-drawingの記号を表示したかったのですが、出来ませんでした。
Google Fontsで示されるやり方に従うと、IBM Plex Monoで表示される文字もあるのですが、Box-drawingの記号は別のフォントになってしまいました。

結局、Google Fontsを使うのはあきらめて、IBM plexの公式リポジトリからフォントをダウンロードしてセルフホスティングすることで、Box-drawingも含めてIBM Plex Monoで表示させています。

Google Fontsでも上手くやるとどうにかなったりするのでしょうか？

0
Post
Raw
https://www.techtips.page/ja/comments/18

同じ写真に、する、しない

wakairo @wakairo
最終更新

サイズ指定が同じだと、たいてい同じ画像になるようだ。
サイズ指定が違う場合だと、元となる画像は、同じになったり違ったりするようだ。

左から、100*100、100*100、100*101、100*102、100*103、100*104、100*105、100*105、100*150

0
Post
Raw
https://www.techtips.page/ja/comments/17

Markdownの利用例

TechTips TechTips運営 @TechTips

Markdownエスケープの例です。

- \\   backslash
- \`   backtick
- \*   asterisk
- \_   underscore
- \{\}  curly braces
- \[\]  square brackets
- \(\)  parentheses
- \#   hash mark
- \+   plus sign
- \-   minus sign (hyphen)
- \.   dot
- \!   exclamation mark

以上の記述をすると以下のように表示されます。

  • \ backslash
  • ` backtick
  • * asterisk
  • _ underscore
  • {} curly braces
  • [] square brackets
  • () parentheses
  • # hash mark
  • + plus sign
  • - minus sign (hyphen)
  • . dot
  • ! exclamation mark
0
Post
Raw
https://www.techtips.page/ja/comments/15

Markdownの利用例

TechTips TechTips運営 @TechTips
最終更新

Markdownの画像表示の例です。

![Alt text 1](https://placecats.com/100/100)

![Alt text 2][id]

[id]: https://placecats.com/200/100

以上の記述をすると以下のように表示されます。

Alt text 1

Alt text 2

0
Post
Raw
https://www.techtips.page/ja/comments/14

Markdownの利用例

TechTips TechTips運営 @TechTips

Markdownのブロック引用の例です。

Block quote

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> 
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

以上の記述をすると以下のように表示されます。

Block quote

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

0
Post
Raw
https://www.techtips.page/ja/comments/13