はてなブックマーク

はじめに 先日開催されたTSKaigi 2024にて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサー

VSCodeで一部のファイルだけをバイナリエディタ開く 開発をしていると画像データなどをバイナリとして確認したいときがたまにあります。 そういった場合に自分はVSCodeの拡張機能であるHex Editorを利用しています。 Hex Editorとは Hex EditorはMicrosoftが開発しているVSCodeの拡張機能です。 主に画像などのバイナリファイルを扱うためのエディタを追加することができます。 ファイルの開き方 コマンドパレットから開く場合 画像データを通常の方法で開く タブがアクティブな状態でコマンドパレットを開く > Hex Editor: Open Active File in Hex Editorを入力 コンテキストメニューから開く場合 画像データを通常の方法で開く タブがアクティブな状態でタブのコンテキストメニューを開く 「エディターを再度開くアプリケーションの選

HTMLのコメントにはaddEventListenerやremoveEventListenerなどのイベント関連の処理が実装されています。 DOMの構造に詳しい方であれば、このような仕様になっている理由が分かる方も多いかと思われます。 今回はHTMLのコメントの仕様を通じてDOMについての理解を深めるための記事を書きます。 前提条件 この記事は下記の内容を前提として記載しています。 JavaScriptの基礎的な構文を理解している 基本的なHTML要素を把握している オブジェクト指向プログラミングについての基礎的な理解がある 最後の「オブジェクト指向プログラミングについての基礎的な理解がある」については推奨ですが必須ではありません。 確認手順 まずは本当にコメントにイベントリスナーが実装されているかを確認します。 確認のためnew Comment()でHTMLのコメントを作成し、typeo

この記事について JavaScriptではthrow文という文を使うことで例外を投げることができます。 このthrow文ですが、私はレビューなどで例外を投げないでくださいというコメントをするのですがその理由とどのようにコードを変更すればよいのか、ということを書いておこうと思いました。 前提条件 この記事の内容は下記の条件を前提として書き進めていきます。 TypeScriptを採用していること フロントエンド開発の場合 Node.jsを利用したサーバーサイドのコードやCLIツールの開発、各種ライブラリの開発については本記事の対象に含まれないことをご了承下さい。 結論 先に結論から書いておくとTypeScriptを利用している場合例外はカスタムエラーを返却するか、Result型を利用するのがよいと思っています。 次の章からサンプルコードを用いながらthrow文を使った実例と、代替え案について記

フロントエンド開発におけるLitという選択肢 フロントエンドを構築するためのフレームワークはReact/Vueなどが多く採用されており、次点でSvelte/Angular/Solidなどが有名でしょうか。 そんな中でもLitというフレームワークに触れる機会があり、なかなかおもしろかったので備忘録もかねてLitについての簡単な解説を記載します。 Litとは 一言で表すならば、WebComponentsを簡単に活用するためのライブラリです。 WebComponentsを利用することで、モダンブラウザに最適化した開発であればReactやVueなどのフレームワークを使用しなくてもコンポーネントベースの開発が行えます。 しかしながら標準のWebComponentsは記述量が多く仕様も少し複雑なため、Litを活用することでスムーズにWebComponentsでの開発を始められます。 特徴 Litの最大

はじめに 前提として本記事は特定のフォントを貶める意図はなく役割として使い分けることを推奨する記事です。 フォントにあるのは役割であり、優劣ではないということを念頭にご一読いただけると幸いです。 注意事項 メイリオという特殊なフォント まず具体的な問題点を挙げる前にメイリオというフォントについて軽く紹介させていただきます。 といってもWeb開発者にとっては馴染み深いフォントでありご存じの方が大半だと思います。 Windows Vistaより搭載されたこのフォントは未だに根強い人気があります。 記事にもあるように、このフォントは和文と英文の調和を重視して作られ英文のベースラインという考え方を取り込んでいます。 そこでメイリオでは和文を縦方向に95％に圧縮した形にして下部にスペースを開けた。こうすることで和文・欧文が混じったときに、それぞれのベースラインを合わせつつ、文字が上下に踊って見えると

ダークモード対応について 私はダークモード大好きなんですが世の中のダークモード対応の需要って実際どの程度あるのかよく分かっていません。 ただ、需要には関係なくやり方は知っておきたいので備忘録も兼ねて調べた内容をまとめておこうと思います。 前提知識 この記事は下記の知識がある前提で進めます。 ダークモードがそもそも何なのか理解している 基礎的なHTML/CSS/Javascriptに関する知識 ダークモード対応の手法 ダークモードの対応と言っても正式化された仕組みがあるわけではないのでサイトによって対応はまちまち 一応やり方としてはある程度の共通認識はありそうだが、この記事では私が個人的に良いと思ったやり方を中心に取り上げていきます。 ダークモードの対応として多いのがCSS変数を利用して色を定義し、bodyやhtmlタグのクラス名を変化させて色の定義を切り替える方法だと思う。 イメージとして

画像フォーマットの選び方について もともと映像系のフォーマットに興味がありいろいろと調べていたが画像データに関しても最近は進化が進んでいるということでモダンな開発環境での選定基準をある程度まとめてみた。 かならずしもこのフローにそう必要はないと思うが基準があるといろいろとやりやすいので参考にしていただければと思います。 画像フォーマット選定フロー 選定フローの判断材料は下記の要素を元にして考えています。 データ容量 画質 管理のしやすさ まずはSVGから検討 SVGが利用できる場合は極力SVGを利用します。 SVGは他の画像フォーマットとは違い画像をコードとして書き出すため軽量かつ拡大に強い画像として利用できます。 バイナリデータではないためGitなどのバージョン管理システム上での利用も可能で管理上も非常に優秀です。 しかしながら、非常に細かい描写は苦手なためレイヤにビットマップ形式のファ