Categories

最新コメント

すぐに合成が可能

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

Markdownの利用例

TechTips TechTips運営 @TechTips

Markdownのコードブロックの例です。

Code block 1

```
This is a code block.
```

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

Code block 1

This is a code block.

「```」の後ろに言語名を記述することで、その言語に応じたハイライトを行うことが出来ます。

Code block 2

```ruby
class Foo
  def hello
    puts 'hello'
  end
end
```

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

Code block 2

class Foo
  def hello
    puts 'hello'
  end
end

なお、TechTipsでは現在コードブロックのハイライトにrougeを利用しています。
このrougeで利用できる言語等の種類の一覧は以下をご覧下さい。
https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers

「```」で囲うのではなく、スペース4つでインデントを行ってもコードブロックになります。

Code block 3

    <div class="footer">
        2004 Foo Corporation
    </div>

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

Code block 3

<div class="footer">
    2004 Foo Corporation
</div>
1
Post
Raw
https://www.techtips.page/ja/comments/12