export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD
// 👀 https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/global-settings { "$schema": "https://aka.ms/terminal-profiles-schema", "defaultProfile": "{574e775e-4f2a-5b96-ac1e-a2962a402336}", "theme": "dark", "copyOnSelect": false, "copyFormatting": false, // ダブルクリックでパスを丸ごと選択したいため "wordDelimiters": " ", // 👀 https://docs.microsoft.com/ja-jp/windows/terminal/customize-settings/profi
CSSでテキストに下線を引く場合、皆さんはどのプロパティを使いますか？ text-decorationかborder-bottomか、はたまたbackground-imageプロパティか…。いろいろな方法で下線を引けるために、どれを使えばよいのか迷った経験がある方もいるでしょう。 この記事ではテキストの下線を引く方法を場面別に紹介します。 たくさんの下線を引く方法があってどれが良いのかわからない方。シンプルな単語の装飾でも、3点リーダーがある場合でも、アニメーションさせる時でも、どんな時でも下線を引く方法を探している方。装飾に使えるCSSを広くサラッと知りたい方。王道の内容をおさらいしたい方。本記事は、そんな皆さんに向けた内容となっています。 場面別に下線を引く方法まとめ ▲場面別に下線を引く方法まとめ。クリックで拡大してご覧ください。 いきなりですが、場面別に最適だと考えられる下線の引
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する
2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？ 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだと画面サイズが変わったら再計算しないといけ
IntersectionObserverではてなブログ記事内のApple Musicを自動再生する - Log
Twitterに要件定義が転がっていたのでIntersectionObserverを用いて実装しました。 github.com 以下のコードを記事のどこかに貼り付けると、画面右下に自動再生ボタンが表示されます。自動再生ボタンを押すと、画面で見えている「iTunes商品紹介」を自動で再生するようになります。 <span></span><style> #autoplay-btn{color:gainsboro;background-color:#fff;background-size:cover;position:fixed;bottom:5%;right:10%;width:60px;height:60px;border:5px solid currentColor;border-radius:100%;cursor:pointer;z-index:10000}#autoplay-btn.d
Windows Terminal Windowsの新しいTerminalアプリケーション。WindowのTab化や様々な設定が可能。デフォルトでコマンドプロンプト、PowerShell、WSL、Azure Cloud Shellを使用可能。2020/5/19に正式版（V1.0）がリリースされた。 Preview版で実装されていた設定画面が、遂にV1.7安定板でも実装された。このページで説明していた設定ファイル（settings.json）の編集方法は、ページの後半に移動した。 How to install Windows 10 20H1 (build 19041)以降であれば、インストール可能。 Microsoft StoreからWindows Terminalを検索してインストール。とっても簡単。 Settings Windows Terminal画面でCtrl + ,を押す、またはTa
【JavaScript】画面スクロールにあわせてCSS指定内容の変化 - Little Strange Software
どうも！LSSです！！ よく見かける内容ですが、CSSだけでは実装ができない、もしくは難しく、JavaScriptと組み合わせて実現する仕組みを作ってみました。 スクロールに応じた変化 コード コード解説 あとがき スクロールに応じた変化 画面スクロールにあわせてCSS指定が変化します。 コード <div id="gamen">画面スクロールにあわせてCSS指定が変化します。</div> <script> document.addEventListener('scroll',fscr,false); function fscr(){ a=100-(Math.min(Math.max(gamen.getBoundingClientRect().top,200),600)-200)/4; gamen.style.backgroundImage='linear-gradient(90deg,#8
【JavaScript】スクロールメーター 自動スクロール機能つき - Little Strange Software
どうも！LSSです！！ 2021年もまもなく終わる頃、またちょっと変わったものを作ってみました。 画面左下に表示されています コード 一部解説 あとがき 画面左下に表示されています 画面左下に、 ↑こんなものが表示されていると思います。 ページを開いた後、ちょっと画面をスクロールさせると画面左下定位置に出現します。 この黄緑が「現在このページをどこまでスクロールさせているか」を示しており、一番下までスクロールすると完全に黄緑の円になります。 また、自動スクロールスイッチを兼ねていて、クリックする毎に 「自動スクロールOFF」→「低速自動スクロール」→「高速自動スクロール」 が切り替わります。 コード <style> #scrlm{ position:fixed; bottom:50px; left:10px; border-radius:50%; width:50px; height:50
【JavaScript】まるを大きくするゲーム未満のなにか【なんだこれ】 - Little Strange Software
どうも！LSSです！！ ふと思いついた動作があって、JavaScriptで作ってみました。 なにか…ゲームになりそうで、まだなってない、そんな謎の状態ですが公開してみます！ まるを大きくするゲーム未満のなにか 遊びかた（？） このスクリプトのコード あとがき まるを大きくするゲーム未満のなにか 下の〇をクリックしてスタート！ 遊びかた（？） 青い○をクリックすると、○が大きくなった後、小さくなっていき、また大きくなりはじめます。 小さくなる方が多いので、放っておくとどんどん小さくなってしまいます。 大きくなり終えたタイミングでクリックすると、また大きくなり始めるので、タイミングよくクリックするとどんどん大きくなります。 ただし、大きくなりつつある時にクリックしてしまうと、その時点で小さくなり始めるので、余計に小さくなってしまう事になります。 ある程度大きくする事に成功すると、○が赤くなり、
React で簡単に遅延読み込みを実装できるライブラリを作りました - 陽気なサイとエクストリーム！
はじめに どうも、さぃと (@saitoeku3) です。 突然ですが、あなたは自作のライブラリを公開したことがありますか？ 僕は公開したいと思いつつもなかなかできずに年を越してしまいそうだったので、思い切って公開しちゃいました。 ネタは最近よく使っている遅延読み込みと Gatsby.js + Contentful 関連の2つあったのですが、今回は前者の方です。(後者もそのうち公開します) 作ったもの github.com 返り値の ref を任意のエレメントの ref に渡すだけで遅延読み込みをしてくれるカスタムフックを利用できるライブラリです。React での使用を想定しています。 今までにもいくつか遅延読み込みをしてくれるライブラリはあったのですが、コンポーネントベースで利用するものが多くて使いづらかったという問題を解決しています。(強引な押し売り) 特に差別化できると思っているのは
background-imageの読み込み完了を検知する
window.addEventListener('DOMContentLoaded', (event) => { // 実行したい処理 console.log(`DOMContentLoaded: ${new Date().getMilliseconds()}`) let image = new Image(); const src = "https://placehold.jp/e60613/ffffff/150x150.png？text=画像"; image.addEventListener('load', function() { document.getElementById("background-image-test-content").style.backgroundImage = 'url(' + src + ')'; console.log(`image load com
Moving Your JavaScript Development To Bash On Windows — Smashing Magazine
Love your Bash terminal but also love your PC? Maybe you’ve had your eye on some of that new Surface hardware, but can’t make the switch without your terminal. Now you can have Windows and Bash. In this article, we’ll take an in-depth look at how to set up a Windows/Linux development box for JavaScript development. I’m one of those people who can’t live without their Bash terminal. This sole fact
マークダウン（Markdown）という文書の記法がある。シンプルなテキストデータに、簡単な記号を付けることで、HTMLファイルに手軽に変換できるというものだ。プログラマーがよく利用する記法で、ソースコードのホスティングサービス GitHub や、プログラミング情報系ブログサイトなどでよく利用されている。 記法は非常にシンプルで、行頭に「# 」と書くと大見出しに、「## 」と書くと中見出し、「### 」で小見出しといった感じだ。強調は「*」や「_」で囲む。強い強調は「**」や「__」で囲む。 リスト表示したいときは、各行の頭に「* 」や「- 」を書く。タブや半角スペースでインデントすることで、階層構造になったリストを作ることもできる。リンクは「[タイトル](URL)」と書く。 他にも記号はあるが、マークダウンはこうした簡単な記法で、きれいなHTMLファイルに変換できるので生産性が高い。 変換
こんにちは。とあるフロントエンドエンジニアです。 どうやったらコーディングの速度を上げられるんだろうと思ってVSCodeのスニペットを研究する毎日。 普段どんなコードをよく書いているんだろうとGitHubのコードを徹底的に分析して効率化を図ったので、今回はその【Sass編】と題して、私のSassのスニペットをまとめてみました。 同じくコーディングの効率化に悩んでいる人はぜひ参考にしてみてください。 スニペットの設定方法 VSCodeで code > 基本設定 > ユーザースニペット と進みます。 するとスニペットを設定するメニューが出てくるので、scss.jsonを選びます。 開いたjsonファイルにこの記事のコードをコピペするだけで、Sassのショートカットを作成できます。 レッツエンジョイ！スニペットライフ！！ 私の中のスニペットのルール 効率化を徹底してスニペットを登録しているわけで
このチュートリアルでは、Next.jsの Image Generation を利用して、動的にOG画像を作成する手順を紹介します。 記事内で使用している主なソフトウェアのバージョン Next.js（next）: 13.3.0 前提条件 Next.jsの13.3.0以上を利用していること Next.jsの API Routes について理解していること Vercelへのデプロイについて理解していること OG画像を利用するWebサイトを作成していること 概要 Next.jsの Image Generation を利用して、OG画像を生成するAPIを作成します。 ImageResponse はEdge Runtime を利用します。 リクエストのクエリパラメータにタイトルを付け、タイトルをOG画像に反映するようにします。 以下のようなOG画像を作成できます。 「Fictitious Commun
Electron v12で破壊的な変更がいくつか行われました。FLASH関係の廃止、レンダープロセスでremoteが非推奨になるあたりが話題になりますが、IPC通信時に一工夫する必要が生じたのが地味に面倒ですｗ これまではレンダラープロセスからメインプロセスを呼び出す際にはipcRenderer.invoke()を実行するだけでしたが、これがそのままでは使えなくなりました。 const {ipcRenderer} = require('electron') (async () => { const value = await ipcRenderer.invoke('MyAPI') })() 上記を実行すると次のようなエラーとなります。これはrequire()でもimportに限らずエラーメッセージが表示されます。 # requireでのエラーメッセージ Uncaught (in promi
![[Electron] contextBridge経由でIPC通信を行う - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/384764a2c2d90b08291669dc8c22bb734d92f2c1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061390382%2F1700928656)
VSCode と Marp で A4 マニュアルを作成する方法 背景 PowerPoint や Word で資料を作成するのが苦手なので、他に何か良い方法がないものかと探して見つけ出した手段を紹介。 というか、PowerPoint はそもそもスライド作成ソフトなので、それで書類作成するのはナンセンスですよね？ Marp もスライド作成ツール？ ……はて？ Word で作ればいい？ ……ちょっと何言ってるかわからないです。 というか、Word も PowerPoint も画像やデザインまわりの UI が煩雑すぎて正直苦手。 ちなみに、本来のスライド作成においても Marp はかなり優秀なので、そのあたりは各自で調べてみてほしい。 メリット 画像以外、全てテキストだけで作成できる マウス操作で細かい操作が不要、各サイズなどは数字入力で調整できる デメリット デザインの融通が効きづらい けっこう
パララックスWEBサイトとはパララックス効果による視覚的PRを目的としたWEBサイトの事です。 WEBページ上に奥行の概念を持たせ、各要素の奥行きの差により立体的な演出効果を出しています。 cssによるparallax効果ポイント パララックスWEBサイトとは？ あなたは「パララックスサイト」という言葉をご存知ですか？ パララックスサイトとは、parallax（視差）の効果を適用したWEBサイトのことです。 parallaxとはページをスクロールする際、手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するものを指します。 パララックス効果のメリット この手前と奥とでスクロールの速度に違いがでると、通常2次元の世界にあるWEBページが3次元の奥行きを感じる様になります。 視覚差を使ったエフェクトはPRしたい部分を強調でき、ユーザーにインパクトを与える事ができます。 その効
Themes Themes allow you to completely customize your client with CSS. You can either make your own theme, or download the wide variety of themes from our community. Browse Themes Plugins BetterDiscord comes with a builtin plugin loader and plugin API. Plugins can increase the functionality and user experience of the app through JavaScript. Write your own or download plugins made by the community.
Marpでスライド作ってみよう - シナプス技術者ブログ
こんにちは。 システム開発課の丸野です。 皆さんはスライド作るとき、何を使われますか。 Windows使っている方ならPowerPointを利用しているのではないでしょうか。 自作PCとかでない限り、PCにデフォルトでインストールされていますし、操作は直観的で非常に使いやすいです。 しかし、なんでも出来る便利なツールであるがゆえに、簡単なスライドを作るだけだと少しだけ面倒になってしまったり、 高い性能を実現するために移植性が犠牲になってしまっている部分があります。 こだわり始めるとしんどい ピクセル単位の緻密なマウス操作が必要になりがち レイアウトの統一を簡単に実現するには、高度な知識が必要になる テンプレートの編集は難しく、慣れが必要 限られたツールでしか編集できない 違うツールで編集しようとすると、レイアウトが崩れることがある Gitで管理できない 共同編集はMicrosoft365な
Windows Terminal
settings.json // This file was initially generated by Windows Terminal 0.11.1251.0 // It should still be usable in newer versions, but newer versions might have additional // settings, help text, or changes that you will not see unless you clear this file // and let us generate a new one for you. // To view the default settings, hold "alt" while clicking on the "Settings" button. // For documentat
LINEスタンプ無料で作れるらしいので試してみたいなってずっと思ってて、ゴールデンウィークにやっと作れた。 動物とか歯の絵を頑張って描いた 申請 販売のための申請方法は複数あって、それぞれで機能や設定できる項目が違ってややこしかった。 申請場所 LINE Sticker Maker (アプリ) LINE Creators Market (Web) 流れ スタンプ画像の作成 → 詳細情報の登録 詳細情報の登録 → スタンプ画像のアップロード 収益化 するかどうか選べる 選ぶところが見当たらないので、強制的に収益化されそう？ メイン画像やタブ画像 作ったスタンプの中からしか選べない 個別に画像をアップロードできる その他機能 画像編集機能がいろいろついてる それぞれのスタンプにタグを付与できたり、設定項目が豊富 LINE Sticker Maker は以前は LINE Creators Stu
数日前にMicrosoft Storeで公開されたWindows Terminalを インストールしていろいろいじってみたので、2019/06/27時点での設定ファイルの書き方や設定内容について、 自分への備忘録的にまとめておこうと思います。 （2019/06/29 追記） もうちょっと実際に設定するなどして内容をアップデートしました 注意 あんまり情報がないので、Try&Errorだったりソースコードからの推測だったりで書いている情報があります 調べても現時点でよく分かんないこともたくさんあります 誤った情報が盛りだくさんの危険性があります プレビュー版に対する設定ファイルの書き方なので、後日めちゃくちゃ変更される可能性があります そのうちMicrosoftくんが公式のドキュメントをまとめてくれるかもなので（すでにある？）、そっちがあったらそっちを見てください 設定ファイルの開き方 Wi
vanilla-extract is a new framework-agnostic CSS-in-TypeScript library. It’s a lightweight, robust, and intuitive way to write your styles. vanilla-extract isn’t a prescriptive CSS framework, but a flexible piece of developer tooling. CSS tooling has been a relatively stable space over the last few years with PostCSS, Sass, CSS Modules, and styled-components all coming out before 2017 (some long be
satoriでブログのOGP画像を動的に生成する
import fs from "fs/promises"; import path from "path"; import type { AstroIntegration } from "astro"; import fm from "front-matter"; import satori from "satori"; import { Resvg } from "@resvg/resvg-js"; // eslint-disable-next-line @typescript-eslint/naming-convention const __dirname = path.dirname(new URL(import.meta.url).pathname); const getStaticPaths = (): string[] => { const posts = Object.key
こんにちは！高橋 です。 Goole I/O 2017 の KeynoteでKotlinがAndroid開発の公式言語としてサポートされることが発表されてから2年が経ちました。 当時は、JetBrains社の開発した言語というイメージが強く、まだJavaでAndroidの開発をしている所が多かったと思います。 そして2019年、ついにKotlinはAndroid開発において推奨言語になりました。🎉 ちょうどその頃、私はJVM上で動作する他のJava系統の開発言語を採用しているプロジェクトから離れたので、次のプロジェクトで使用する技術選定をしているところでした。 検討した結果、社内ではKotlinを一部使っているプロジェクトがあったと聞いていたことや、保守性の高さや、コンパイルの時間が早いといった理由から採用することにしました。 初めてKotlinを触るので、開発のしやすさは正直半信半疑だ
",``)},e.install=function(e,t=!0){var n;let r=eu(e);return ek(m({},r,{hash:null!=(n=r.hash)?n:t}),()=>ew(!t))},e.keyframes=eO,e.match=function(e,t,n){return[e,H(t,n)]},e.matchColor=function(e,t={},n){return[e,X(t,n)]},e.matchTheme=function(e,t,n,r){return[e,Q(t,n,r)]},e.mo=ey,e.mql=o,e.noop=a,e.normalize=ei,e.observe=em,e.parse=F,e.parseValue=ee,e.setup=ek,e.shortcut=D,e.stringify=ex,e.style=eE,e.
PowerShell では、System.Windows.Forms のアセンブリを利用して、Windows Form を作成できます。 VB や cpp + MFC などで、Windows Form 開発の経験者なら容易と考えます。未経験者なら、別のドキュメントなどを参照してからの方が良いと思います。 これらの情報の取得方法について説明します。 PowerShell 7.15 インストールに共ない見直します。 次の事例を実行してみよう。 # ユーザーフォームを作る - 基礎編 - # アセンブリの読み込み Add-Type -AssemblyName System.Windows.Forms Add-Type -AssemblyName System.Drawing # フォームの作成 $form = New-Object System.Windows.Forms.Form $form.
概要 Kentaro Matsushitaさんが開発されたOGP画像生成ライブラリ「catchy-image」を使用して、Gatsby.js製ブログにOGPを自動生成・設定する実装をしました。お手軽に記事タイトルに応じたOGP生成ができる素晴らしいライブラリです。gatsby-starter-blogをベースに構築したブログを想定し、導入までの作業をメモしておきます。 完成したOGP画像の例 記事のタイトルとサイト名、アイコンが記載されたシンプルなOGP画像が完成しました。 執筆時構成 node v12.15.0 gatsby 2.27.5 catchy-image 0.1.6 最新の情報はcatchy-imageリポジトリのREADMEをご参照ください。 手順 catchy-imageをインストール catchy-image パッケージをインストールします。 npm install --
We’re back with another Windows Terminal release! Windows Terminal has moved to version 1.4 and includes the features described in the 1.4 release blog post. Windows Terminal Preview has moved to version 1.5 and includes the features described below. You can download both versions from the Microsoft Store or from the GitHub releases page. Let’s dive into what’s new! Full hyperlink support We have
I’m in love with SVG. Sure, the code can look dense and difficult at first, but you’ll see the beauty in the results when you get to know it. The bonus is that those results are in code, so it can be hooked up to a CMS. Your designers can rest easy knowing they don’t have to reproduce an effect for every article or product on your site. Today I would like to show you how I came up with this glass
Installation Windows Terminal is available in two different builds: Windows Terminal and Windows Terminal Preview. Both builds are available for download from the Microsoft Store and from the GitHub releases page. Requirements In order to run either Windows Terminal build, your machine must be on Windows 10 1903 or later. Windows Terminal Preview Windows Terminal Preview is the build where new fea
Importing images with Webpacker
An unofficial Rails guide Webpack isn't just for JavaScript. You can bundle images with it too. Webpacker makes it relatively easy to work with images, but it is admittedly confusing at first: Images in JavaScript? In this post, we'll demonstrate how to reference Webpacker images from your JavaScript, CSS, and Rails views. The following examples were created using Rails 6 and Webpacker 4, but may
More Control Over CSS Borders With background-image | CSS-Tricks background-imageを使ったボーダーエフェクト色々 通常のCSSでは実現できないような枠線のエフェクトが色々公開されています 関連エントリ CSSのクリップパスを使った背景をかっこよく切り替えるデモ CSSレイアウトやUIパーツのパターン集「CSS Layout」 ピュアCSSなのにネイティブアプリっぽく動くスイッチUI「MoreToggles.css」
",``)},e.install=function(e,t=!0){var n;let r=eu(e);return ek(m({},r,{hash:null!=(n=r.hash)?n:t}),()=>ew(!t))},e.keyframes=eO,e.match=function(e,t,n){return[e,H(t,n)]},e.matchColor=function(e,t={},n){return[e,X(t,n)]},e.matchTheme=function(e,t,n,r){return[e,Q(t,n,r)]},e.mo=ey,e.mql=o,e.noop=a,e.normalize=ei,e.observe=em,e.parse=F,e.parseValue=ee,e.setup=ek,e.shortcut=D,e.stringify=ex,e.style=eE,e.
{ "tiddlers": { "$:/Acknowledgements": { "title": "$:/Acknowledgements", "text": "TiddlyWiki incorporates code from these fine OpenSource projects:\n\n* [[The Stanford Javascript Crypto Library|http://bitwiseshiftleft.github.io/sjcl/]]\n* [[The Jasmine JavaScript Test Framework|http://pivotal.github.io/jasmine/]]\n* [[Normalize.css by Nicolas Gallagher|http://necolas.github.io/normalize.css/]]\n\n
扱うものが静的サイト中心なこともあって、フレームワークの検討をする際に個人的に気になるのが画像の最適化です。 「静的生成にはAstroがいい」という話をよく見かけるようになったもので、Astroを試し始めたのですが、画像まわりの情報がなかなか見つからない。Showcaseで紹介されているサイトを確認してみても、画像の最適化はかなりゆるめで、レスポンシブイメージになっていないものも結構多い…。 どういうことなんだろうか？ ということで、ちょっと調べてみました。 インテグレーションは@astrojs/imageとAstro ImageTools Astroではインテグレーションをインストールすることで機能を拡張します。画像の最適化に関しては、現状では公式が開発している@astrojs/imageと、サードパーディ製のAstro ImageToolsの二択という感じになっています。 残念ながら共
こんにちは。YOUTRUSTでアプリエンジニアをしている@endoidouです。 twitter.com 最近AmazonでTIME TIMERを購入し、ポモドーロテクニックをしながら作業をしています。 個人的にはタイマーアプリよりも物理タイマーのほうが好みなので中々捗っています。 www.amazon.co.jp さて、YOUTRUSTのモバイルアプリはFlutterで作成されています。 今回は Flutter & Proxyman で通信デバッグする方法をご紹介します。 目次 目次 通信を書き換えられると何がうれしいのか？ Proxymanとは セッティング方法 Flutterでの使用方法 実際に使用する スクリーンショット サンプルコード まとめ エンジニア募集 通信を書き換えられると何がうれしいのか？ クライアント開発をしているとAPIがまだ出来ておらず実装の手が止まってしまうこと
はじめに 追記 2024年版の記事を投稿しました。 重要 : 2021/03/11更新(Speedcontrolの今後のアップデートについての話を追記、更にspeedcontrol-additionsへの脚注を修正) ここ数年でRTAコミュニティ並びに各種ゲームコミュニティで注目を浴びるようになった配信レイアウト開発フレームワークであるNodeCGですが、実用的な配信レイアウトが具体的にどのような流れで開発が行われているかを記した記事は現在までほとんど存在していないように思われます。 そこで今回は私が先日開発を行った、第2回不思議のダンジョンRTAフェスというRTA系イベントの配信レイアウトの開発をどのように進めてきたかを簡潔にですが当記事でお話したいと思います。 まずNodeCGとは何ぞや？と思った方は、以下の記事の参照を推奨します。 ライブ配信レイアウトを作るNode.jsのフレームワ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React で作るゆっくり解説 feat. Remotion
Windows TerminalとPowerShellでクールなターミナル環境をつくってみた
CSSで下線を引く方法まとめ - 様々な装飾方法とアニメーションに適した指定まで - ICS MEDIA
Maximally optimizing image loading for the web
Windows Terminal Tips - Qiita
テキストデータからプレゼン資料を爆速作成する方法 « ハーバー・ビジネス・オンライン
スニペット極めて爆速コーディングを目指す【Sass編】
Next.jsのImage Generationを利用して、動的にOG画像を作成する
[Electron] contextBridge経由でIPC通信を行う - ねこの足跡R
VSCode と Marp で A4 マニュアルを作成する方法
パララックスWEBサイトの作り方（HTMLとCSSのみで実現するparallax効果）
The Discord Enhancement Project
LINEスタンプ作った - 見返すかもしれないメモ
Windows Terminalの現時点での設定可能項目について - 水を見ると釣りがしたくなる
CSS in TypeScript with vanilla-extract | CSS-Tricks
一ヶ月で覚えるサーバサイド Kotlin入門 - Adwaysエンジニアブログ
Startup financial models - 12 templates compared
Windows Form を作成してみよう( System.Windows.Forms )(4/4)
Gatsby.js製ブログで記事毎にOGP画像を自動生成する | kyabe.net
Windows Terminal Preview 1.5 Release
Making a Realistic Glass Effect with SVG | CSS-Tricks
Getting Started with Windows Terminal
background-imageを使ったボーダーエフェクト色々:phpspot開発日誌
Versoly — The website builder that doesn't compromise
NoteSelf — Your selfish notebook
Astroの画像まわりを調べてみた | エビスコム - EBISUCOM
Flutter & Proxymanで通信デバッグをする - YOUTRUST Tech Blog
NodeCGを活用した配信レイアウトができるまで - 不思議RTAフェス2編