個人開発動画編集ソフト「Beutl」の紹介
はじめに こんにちは。yutotuyです。 今回は、わたしが個人開発している動画編集ソフト、Beutlを紹介していきます。 また、次回以降の記事からはBeutlの開発中に発生した課題と解決策を載せていきます。 背景 私が動画編集ソフトの開発を始めたのは、中学生の頃にさかのぼります。当時、趣味で動画編集をしていた私は、使っていたAviUtlというソフトのスクリプト言語を通じてプログラミングに興味を持ちました。 コロナ禍で自宅にいる時間が増えたこともあって、「もっと性能が良く、安定した動画編集ソフトがあったらいいな」という単純な思いから、プログラミングの勉強と並行して「BEditor」（Beutlの前身）の開発を開始しました。実は、開発する前はAviUtlの利用を便利にするソフトの開発を行っていましたが、AviUtl本体のパフォーマンスや安定性に根本的な課題を感じ、ゼロから新しいソフトを作るこ
今Reactを使うならピュアなCSSをサポートするUIフレームワークやライブラリを選定するのがマルそうと思った話
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史的変遷 なぜタイトル通りピュアなCSSをサポートする機構が良いと感じたか おすすめのスタイリング機構 ざっと振り返るReactのスタイリング方法の歴史的変遷 私が最終的にピュアCSSを推したいと思った理由をお話する前に、爆速で変わり続けるReactとともに、スタイリングはどう変遷していったのかをざっとまとめたいと思います。 （こういうのって、歴史と組み合わせて理解すると、結構深まりますよねと思っているのは私だけでしょうか…、いえそんなことはないはず😊） 大昔: CSS Modules
生成AIのPoCが終わった後のことを考えていますか？顧客の既存システムへの導入を考えた際のベストなPoCの進め方｜遠藤巧巳 - JapanMarketing合同会社 AIネイティブな会社の作り方
はじめに1週間前に以下の記事を投稿したところ、Xで100以上のリツイート、700以上のいいね、noteでも300以上のいいねがつきました。生成AIは多くの需要があるため、案件を獲得することはできますが初期PoCで赤字になるケースが多いように見受けられました。 良記事 ふわっとしか言語化できてなかったけどPoCの「ターゲットスコープ、引き際、ゴール設定」の３つが沼るのは本当にそう あとクライアントは「コスパのよい買い物をした」をゴールにしがちだけど本当に求められてるのは「よい前への進み方をした」だってことを見失いがち(自戒を込めて) https://t.co/bqS5XrsLfO — Jun Tamaoki / 玉置絢 (@OKtamajun) March 3, 2025 上の記事で伝えているのはPoCで赤字になるケースを避ける方法です。 まとめると以下です。 1. 顧客の期待値調整がより重
生成AI・AIAgentのPoCの泥沼化を避けるには？[受託開発会社向け]｜遠藤巧巳 - JapanMarketing合同会社 AIネイティブな会社の作り方
はじめに私は生成AIの様々な案件を現在行っています。生成AIは経営層ほど危機感を持っているため、顧客の経営層から担当者に自社の業務改善を生成AIで進めるように！と依頼が降りてきます。 しかし、従来のシステム開発と違い生成AIはどこまでできるかが不明瞭です。そのため、PoC(本当に生産性アップするか実験)として始められることが99%です。そのPoCでうまくいけば小規模開発・本格開発しましょうといった流れになります。 私は案件を受ける側なので、今回は生成AIの案件を受ける側が気をつけるポイントを全て実体験ベースで書きます。 前提：PoC = 低予算PoCはお試しです。開発会社からすればドアノック商品とも言えます。そのため受託開発会社からすると顧客に提案できる金額は低くなります。PoCであれば最大でも500万円程度です。 では、生成AI・PoC・低予算の条件が揃った時に何を気をつけるべきかを書い
![生成AI・AIAgentのPoCの泥沼化を避けるには？[受託開発会社向け]｜遠藤巧巳 - JapanMarketing合同会社 AIネイティブな会社の作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/39d8f86675ca2a2346d3e6dee29c99d710037d08/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F177010758%2Frectangle_large_type_2_bb270d29985d2516b4cfaf311c8fbda1.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)
ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。 今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。 以下、敬称略。 相談内容 ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。 今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に
HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM
宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコンポーネントを構築するために重要な技術ですが、従来は JavaScript を使用しなければ Shadow D
Findyのエンジニア爆速成長の事例 2024年夏 - Findy Tech Blog
こんにちは。こんばんは。 開発生産性の可視化・分析をサポートする Findy Team+ 開発のフロントエンド リードをしている @shoota です。 先日、END が 【フルスタックエンジニアへの道！】React と TypeScript の修行をした話 というタイトルで、フルスタックエンジニアを目指すためのフロントエンドの修行の記事を投稿いたしました。 こちらの記事では React / TypeScript において個人学習程度のレベルにあった END が、機能開発を自走可能になるまでの内容が書かれています。 そこで本記事では、END の成長と挑戦をサポートし、実際に指導にあたった私がメンター視点での話をいたします。 育成のはじまり 下準備 ゴール設定 助走をしてもらう 実践 育成の方針と実践 トレードオフ 3 ヶ月の成果と分析 プルリクエストの可視化 メンティーの分析 メンターの分
DevTools の使い方を可能な限りスクショ付きで解説してみる
以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
ウェブサイトのパフォーマンスを測定するときに平均値ではなくパーセンタイル値を採用するべき理由
ウェブサイトやAPIの応答時間を短くすることはユーザー体験につながるだけでなく、Google検索で上位に表示されやすくなるなど多数のメリットをもたらします。そうした「速度」の改善活動を始める際に目標にすべき指標として、応答時間の平均値ではなくパーセンタイル値を採用するべき理由について時系列データベースの「TimescaleDB」の開発者であるデビット・コーンさんがブログにまとめています。 How percentile approximation works (and why it's more useful than averages) https://blog.timescale.com/blog/how-percentile-approximation-works-and-why-its-more-useful-than-averages/ 多数のデータを集めた時に、そのデータの特徴を
TypeScriptのパフォーマンス改善
2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマン…
TypeScript プロジェクトのコンパイル時間を改善してみた話
TypeScript プロジェクトのコンパイルのボトルネックを調査・解消してみた話 はじめに こんにちは。エンジニアの辻󠄀です。 私は社内のとある TypeScript プロジェクトで開発業務を行っていました。 ある日、新たに関数の実装を追加しようとしたその時、tsserver（TypeScript の language server）による補完候補がなかなか表示されないことに気づいたのです。 どうやら、コンパイルの時間が非常に長くなっていたことが原因のようです。 この記事では、tsc のコンパイルにおけるボトルネックを調査する方法と、そこで適用した２つの改善方法について紹介します。 コンパイル時間が低下する原因はプロジェクトの性質によって大きく異なるため、ここで述べる改善方法が任意のプロジェクトに有効だとは言えませんが、少なくとも調査方法については役に立つのではないかと思います。 ボト
AWS、より高速で効率的なサーバーレスアプリのための低レイテンシーランタイムを実験的に導入
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
Apollo Client と SSR の罠 その1 - パフォーマンス改善編 | Wantedly Engineer Blog
Wantedly でバックエンドエンジニアをしている @izumin5210 です。 この記事は GraphQL Advent Calendar 2020 の11日目の記事として書かれました。が、7割くらいは SSR についての議論のこり3割くらいが Apollo Client の話です。 最近、Apollo Client と SSR(Server Side Rendering) を利用した Web アプリケーションのパフォーマンス改善に取り組みました。この記事では「パフォーマンスの問題にどう立ち向かったか」および「そもそも問題を起こさない構造にするために何ができるか・何をすべきでないか」の考察をしていきます。 TL;DRパフォーマンス改善は計測・可視化からライブラリが用意してくれているフック機構を上手に使って計測していこうrenderToStringWithData では、renderT
Prettier's CLI: A Performance Deep Dive · Prettier
Hey, I'm Fabio and I've been contracted by the Prettier team to speed up Prettier's command line interface (CLI). In this post we'll take a look at the optimizations I've discovered, the process that lead to finding them, some exciting numbers comparing the current CLI with the new one, and some guesses about what could be optimized next. Installation The new work-in-progress CLI for Prettier has
How React 18 Improves Application Performance - Vercel
Learn how concurrent features like Transitions, Suspense, and React Server Components improve application performance. React 18 has introduced concurrent features that fundamentally change the way React applications can be rendered. We'll explore how these latest features impact and improve your application's performance. First, let's take a small step back to understand the basics of long tasks a
【完全保存版】GPT を特定の目的に特化させて扱う (Fine-tuning, Prompt, Index, etc.) - Qiita
生成AIカンファレンス 〜徹底解剖「トップランナーから見た日本が挑む生成AIの最前線」〜 日時：5月8日(水) 10:00-18:30 形式：オフライン・オンラインのハイブリッド開催 場所：東京大学伊藤謝恩ホール（オンライン参加の方は配信URLをお送りします） 参加方法：下記イベントページより申込 ChatGPT に代表される今日の AI ブームを牽引しているのは 大規模言語モデル（Large-scale Language Model, LLM） と言っても過言ではないでしょう。LLM とは大量のテキストデータを使ってトレーニングされた自然言語処理のモデルで、代表的なものに、GPT（OpenAI）、Llama（Meta）、PaLM（Google）があります。我々開発者は、事前学習されたこれらのモデルを使って簡単にアプリケーションを作ることができます。 LLM が遂行可能な言語的タスク LL
WasmでJavaScriptを動かす意義 - id:anatooのブログ
ある時Twitterのタイムラインを見ていたら、「JavaScriptをWasm化して動かす意味がわからない」というような意見を見かけました。JavaScriptはブラウザに搭載されているV8のようなJavaScriptエンジンによって高速に動作するので、わざわざWasm化してもパフォーマンスは劣化するのになぜなのか?という話なんですが、これは「Wasm化=パフォーマンスのため」という考えだと意義がわからないのでこの記事ではそれについて解説します。 JavaScriptをWasm化して動かすツールやライブラリとしては、Shopifyが開発しているJavyやquickjs-emscriptenなどがあります。JavaScriptをWasm化して動かすためには、ある特定のJavaScriptエンジンをWasm向けにビルドして動かす必要がありますが、そのような用途ではQuickJSというJava
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fix Consumer Electronics
あなたのパフォーマンスを倍にする Frontend Ops の傭兵はいかがですか
Kuma UI
