なんて美しい夕陽だ🌇

プログラミング、日常、忘れないように書いていきます

フォントについて調べた

CSS

Webサービスを一から作る機会があり、フォントについてほとんど知識がないことに気がついた。そこで、MDNのドキュメントを参考にしながら、基礎の基礎から学んだのでメモを残していく。

developer.mozilla.org

そもそもフォントとは？

フォントという言葉の意味を調べたことがなかったので調べてみた。

wikipediaによると 「画面に表示したり、書籍など紙面に印刷したりするためにコンピュータ上で利用できるようにした書体データ」とのこと。

ja.wikipedia.org

またwikipediaを読んでいくと、フォントは外形で大まかに分類することができ、たまに耳をする serif や sans-serif というはその一部であることがわかった。

フォントの大まかな種類

フォントは大まかに以下の5つに分類される。ざっと概要は以下の通り。

  1. serif（明朝体）
    セリフ（うろこ）を持つフォント

  2. sans-serif（ゴシック体）
    セリフ（うろこ）を持たないフォント

  3. monospace
    全ての文字が同じ幅を持つフォント

  4. cursive
    手書き文字の模倣を目的としたフォント

  5. fantasy
    装飾的なフォント

font-family - CSS: カスケーディングスタイルシート | MDN を見ると各フォントの雰囲気を知ることができる。

また、上記で出てくるセリフ（うろこ）とは文字の端についている飾りのことを言う。以下の画像がわかりやすかったので引用する。

文字の「うろこ」 | 【印刷の現場から】印刷・プリントのネット通販WAVEのブログ から引用

フォントの設定方法

テキストにフォントを設定するには、CSSの font-family プロパティを使用する。

これにより、選択した要素に適用するブラウザのフォントを指定できる。ユーザーが利用しているブラウザで利用可能なフォントを適用していくが、適用できない場合はブラウザのデフォルトフォントを使用する。

以下、実装例。

p {
  font-family: arial;
}

ウェブセーフフォント

利用しているデバイスやブラウザによって適用できるフォントは異なる。そこで、概ね全てのデバイスで利用できるフォントを ウェブセーフフォント という。

MDNのドキュメントでは、ウェブセーフフォントとしていくつかの例を示している。

developer.mozilla.org

各OSにおけるフォントの普及率は以下のサイトから確認することができ、利用しても安全と見なせるものについて判断を下すことができる。

www.cssfontstack.com

フォントスタック

Webページで使用したいフォントがユーザーのブラウザで利用できることは保証できないため、ブラウザが複数のフォントから選択できるように フォントスタック を指定できる。

以下、実装例。左から優先的にブラウザで利用する。

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

ウェブフォント

CSSでは、ウェブ上で利用できるフォントファイルを指定して、ウェブサイトのアクセスした時に一緒にダウンロードさせることができる。

最後に

今回はフォントについて学んだ。serif など目にすることがあっても理解出来ていなかった部分が多く学びになった。 次はNext.jsでウェブフォントの設定を試していく。

参考

developer.mozilla.org

developer.mozilla.org

Reactフレームワーク「Plasmo」でGitHubのコミット差分のページURLを生成するChrome拡張を作った

React

GitHub Compare URL Generatorのデモ

GitHubでコミット差分のページURLを生成するChrome拡張を作りました。

一度コードレビューして貰ったPRの再レビューで、修正した部分のみをレビュワーに共有したい時に、コミット比較のページを共有することがありました。例えば、このようなリンクです。

https://github.com/octocat/linguist/compare/master...octocat:an-example-comparison-for-docs

リポジトリURLの後に /compare/{変更前}...{変更後} のようなパスを指定することでコミット差分を表示できます。ブランチやコミットハッシュを指定することができます。このフォーマットを覚えることができなかったため、度々 公式ドキュメント を見に行っており、URLをChrome拡張で作ることができたら便利だと思ったのが作ったきっかけです。

目次

利用した技術

  • React
  • Plasmo
  • TailwindCSS

この中でも、初めて挑戦した技術は Plasmo です。Chrome Web Storeへの公開までもフレームワークの中で実現出来ると聞き興味を持っていました。

以下の記事に、Plasmoについてとても丁寧に解説されているので参考になります。

zenn.dev

Plasmoについて

Welcome to Plasmo, the all-in-one platform that makes it easy for browser extension developers to create, test, and publish amazing extensions.

ブラウザ拡張機能を簡単に作成、テスト、公開できるプラットフォームだと紹介されています。React以外にも、Vue.jsやSvelte等もサポートしています。

docs.plasmo.com

Plasmoのセットアップ

Plasmoのセットアップ方法を記載します。パッケージマネージャーとしてはpnpmが強く推奨されていますが、Voltaでバージョンを管理する都合上、yarnで実施しました。（困ったらpnpmに切り替える予定でした。）

まずはPlasmoのプロジェクトを作成します。対話形式で情報の拡張機能の名前などを記入します。

$ yarn create plasmo
yarn create v1.22.19
warning package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-plasmo@0.83.0" with binaries:
      - create-plasmo
🟣 Plasmo v0.83.0
🔴 The Browser Extension Framework
🟡 Extension name: github-compare-url-generator
🟡 Extension description: A basic Plasmo extension.
🟡 Author name: Hideki Okawa <h.okawa0303@gmail.com>

developmentサーバーを立ち上げます。

$ yarn dev

このコマンドは、ファイルの変更を監視し build/chrome-mv3-dev の生成を行います。そうすることで、ブラウザに拡張機能を自動で読み込むことができます。

chrome://extensions/ にアクセスし、デベロッパーモードを有効にします。

「パッケージがされていない拡張機能を読み込む」をクリックし、先ほど作成した build/chrome-mv3-dev を選択することで、Chrome上に作成したChrome拡張機能を表示することができます。初期構築のタイミングで、すでに以下のポップアップが出来上がっています。

書いたコード

ここでは、今回の機能を実現するにあたり利用したメソッドを紹介します。

開いているタブのURLを取得する

タブに開いているリポジトリのURLを取得するために chrome.tabs.query を利用しました。

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  const repositoryURL = parseGitHubRepositoryURL(tabs[0].url)
  setRepositoryURL(repositoryURL)
})

ref: https://developer.chrome.com/docs/extensions/reference/tabs/#method-query

クリップボードにコピーする

生成したURLをクリップボードにコピーするために、navigator.clipboard.writeText を利用しました。

navigator.clipboard.writeText(compareURL)

ref: https://developer.mozilla.org/ja/docs/Web/API/Clipboard/writeText

別タブで開く

生成したURLを別タブで開くために、 chrome.tabs.create を利用しました。

chrome.tabs.create({ url: compareURL })

ref: https://developer.chrome.com/docs/extensions/reference/tabs/#method-create

最後に

思ったよりもサクサクとChrome拡張を作ることができて感動しました。 これから、開発した拡張の機能の公開の申請もしようと思っているので、公開できたら記事を書こうと思います。

はてなブログ、始めます

初めまして、ひきたです。

この度、はてなブログを始めることにしました。

1記事目という事で、「自分のこと」、「はてなブログを始めた理由」を自分の中で整理しつつ、つらつらと書いていこうと思います。

プロフィール

✅名前：ひきた
✅年齢：26歳（3月で27歳）
✅性別：男
✅居住地：東京

仕事

新卒から一貫して、エンジニアとしてWebサービスを作る仕事をしています。 大学生の頃から、「自分の作ったものを皆に使って欲しい」とぼんやりと思っていて、その表現手段としてWebサービスのエンジニアという仕事を選びました。

今は新卒から数えると2社目で、複数の小規模なWebサービスを開発するポジションで働いています。
中には新規事業が含まれていることもあり、「昨日聞いていた話が次の日には変わっている」なんてことがザラにあります。そのような流動的な環境下で、開発したものをどうやって世に出してやろうか、と考えることに非常に面白みを感じています。時には本質的ではない機能を落とすこともあるでしょう、スケジュールを守ることが最重要ではない場合、スケジュール調整することもあるでしょう。自分が使えるリソースをどのように使ったらユーザーに届けられる価値を最大化できるかを考え続けるのです。

そんな感じなので、エンジニアとして技術力だけを求められる環境よりも、ゴールまでの道筋を立てる力や調整力も必要な環境の方が価値を発揮できると思います。

好きな技術

自分のことはバックエンドエンジニアだと思っていますが、今の仕事ではバックエンドとフロントエンド領域を担当していて、1機能を1人で作り切るような進め方をすることが多いです。

バックエンドの技術としては、特にRuby on Railsが気に入っています。ある程度の規模まではレールに乗って高速にサービスを構築できますし、良くも悪くも枯れているので、何かしようと思った時には大抵Gemに頼ることができます。
前職では2年ほどGoを書いていましたが、自力で実装を求められる部分が多かったり、Rubyに比べたら日本語の情報も少ないことから、Rubyを好んで利用しています。
また、最近はGraphQLを好んで利用しています。初期の構築コストや学習コストは多少かかりますが、一度構築してしまえばフロントエンドのコードを修正するだけで済む場面が増えます。特段理由がなければ、バックエンドはGraphQLのAPIサーバーを構築するようにしています。

フロントエンドの技術としては、ReactやNext.jsを利用しています。
一応業務で書いているものの、業務レベルに達していないと思うことが多くまだまだキャッチアップ中です。

インフラに関しては、今は業務でガッツリ関わることは無いですが、前職ではバックエンドとインフラ領域を担当しておりAWS SAAの資格は取得しました。

趣味

アニメ

これが1番長く続いている趣味かもしれません。中学生の頃からアニメを見始めて、社会人になった今でも日常的に見ています。
dアニメストアからどれだけアニメを見たかを確認してみると52ヶ月で4149話見たようです。52ヶ月×30日で1560日。1日2話~3話見ている計算になります。マジ・・・？

テニス

社会人になってから定期的にスクールに通っています。
始めたきっかけは、コロナ禍でなかなか運動する機会がなく、学生時代の体育で楽しかった記憶があったテニスを始めることにしました。
下手なりに、定期的に大会に出場しつつ修行中です。

はてなブログを始めた理由

自分のために文章を書ける場所が欲しかった というのが一番の理由です。

普段からお世話になっているZennやQiitaは、技術情報共有の空間である以上、他人のためにも記事を書きたいと思っていますし求められていると思っています。
たとえば、Zennでは以下のようのコミュニティガイドラインが定義されています。

Zennが情報共有コミュニティあることを認識していない方がいます。Zennはあなたの個人的なメモではなく、常に読み手がいることを忘れないでください

コミュニティガイドライン | Zenn

しかし、自分の理解を深めるためのアウトプットという意味で、もっと気軽に記事を書きたかったんですね。誰かの役に立つかはわからないけど、とりあえず自分のために書きたい。その欲求を満たすのがこのブログです。

何を書いていくか

そんなモチベーションなので、このブログでは 自分のために書く がベースにあります。

基本的には日記のような感覚でいるのですが、以下の内容を書いていく予定です。

  • 技術的な内容
  • 仕事や日常の中で感じたこと
  • その他趣味について

ブログとZennの棲み分け

引き続きZennにも技術記事は執筆していく予定です。（また変わるかもしれませんが）

基本的にはZennは読者を意識して、ブログは自分のために書いていきます。

とはいえ、ブログも完全に自分のためだけに書くわけではなく、いい加減な内容（正確な情報ではない、タイトルが雑・・・）にはならないようにするつもりです。

最後に

ここまで読んで下さった物好きの皆様、ありがとうございます。 ゆるゆると書いていこうと思いますので、何卒よろしくお願いいたします。