AWSがダイアグラムエディタの開発に便利なライブラリ「Diagram Maker」を公開
Amazon Web Services(AWS)がIoTアプリケーションの開発者向けにダイアグラム作成用オープンソースライブラリ「Diagram Maker」を公開しました。Diagram Makerを利用することで、開発者が外観や使い勝手などを独自に定義しつつ、簡単にダイアグラムエディタ機能をアプリケーションに実装することができるようになります。 Diagram Maker · A library to display an interactive editor for any graph-like data. https://awslabs.github.io/diagram-maker/ GitHub - awslabs/diagram-maker: A library to display an interactive editor for any graph-like data.
JavascriptからTypescriptへ1人で5万行修正し、移行した話 - Qiita
環境 React(CRA) Javascript npm 方針 当たり前の前提として、既に動いている機能は壊さない Javascript -> Typescript へ最短で置き換えて、無事起動するところまでを第一の目標とする any 型を許容する（後の改修や機能追加で型を順次付与していく想定） 作業の概要 コンパイルエラーを解消し、最低限動作するまで ts-migrate を使って全体的に Typescript へ移行する ts-migrate で出力された指摘を手作業で修正し、指摘コメントを削除していく 依存ライブラリに必要な@typesを install していく 型が無くてエラーになっているところに対して any で型を付与していく ※ここまで終わったら この時点で master にマージしても問題はない マージする場合は既存機能が問題なく動作するかしっかり確認する！ 一旦マージし
Hono で Server-Sent Events によるストリーミングを実装する
Server-Sent events（SSE）は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事では Hono を使って OpenAI API を使ったテキスト生成をストリーミングする方法を紹介します。 Server-Sent Events（SSE） は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信になるという特徴があります。また HTTP で通信するため、WebSocket のように独自のプロトコルではないため、運用の負担が少ないというメリットがあります。 SSE が使われる例として、生成 AI によるチャットサービスがあげられます。Chat GPT の
yagisan-reports
日本語帳票に必要な機能が一通り揃っています。Excelベースではないので、印刷ずれの心配もありません。 JIS第四水準漢字（JIS X 0213:2004）異体字（IVS）縦書き禁則処理複雑な表組み可変行明細自動改ページ yagisan-reportsは、Webブラウザ上で動作するJavaScript製の帳票エンジンです。 負荷の大きい帳票出力処理をWebブラウザに任せることで、サーバーの負荷を大幅に軽減できます。スケールアウトやジョブキュー化などの難しい設計も不要となり、導入も簡単です。 もちろんNode.jsでも動作するので、サーバーサイドでの使用も可能です。AWS LambdaやAzure FunctionsなどのFaaS環境でも動作します。 帳票は社会に必要不可欠である一方、非常にニッチな領域です。いくら帳票開発のスキルを高めても、それを生かせる機会は限られています。 だからこそ、
スクリプトの非同期読み込み(async, deferの違い) - わくわくBank
スクリプトの読み込みを非同期にすることで、画面表示を速くすることができます。スクリプトを非同期で読み込む方法には、「async」と「defer」があります。ここでは、その違いについて整理します。
Vite だと require() が使えないよ〜
皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか？私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.js を開発した Evan You 氏によって開発ツールではありますが Vue.js に限らず React や Svelte にも対応しています。 皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか？私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack などと比較して高速に動作するといった特徴があります。Vue.js を開発した Evan You 氏によって開発ツールではありますが Vue.js に限らず React や Svelte にも対応しています。 Vue.js は 3.x しか
MyScript
手書きのための AI テクノロジーMyScript は、開発者、OEM、エンドユーザー向けのデジタルインクソリューションおよび生産性アプリを作成しています。これらはすべて、世界最高水準の手書き認識テクノロジーを原動力としています。 そのしくみについて詳しくは "MyScript のインタラクティブインクテクノロジーによって、わかりやすく使いやすい編集ジェスチャーを使用できるため、eNote のエクスペリエンスがさらに向上します。" Ramesh Mantha 製品担当副社長 @ Rakuten Kobo "MyScript のチームはとても協力的で、弊社が紙面によるメモ作成からのレベルアップを図る上で、とても頼りがいのある存在でした。その MyScript の助けを借りて、Moleskine Smart は紙とデジタルとの距離を今まで以上に近づけることができました。" David Nebb
memlab を使って Web サイトのメモリリークを検出しよう
概要 本記事は、メタ社(旧 FaceBook) が開発した OSS であるメモリリーク検知ツールである [memlab] をさっそく試してみた記録になります。 公式ドキュメント以上の付加価値はあまりありませんが、ざっくりと雰囲気を掴んでもらって使用を検討して頂ければ幸いです。 memlabについて memlab は、 Puppeteer API を用いたシナリオを作成することで、そのシナリオ実行によって発生するメモリリークの検出及びヒープ領域の分析を補助してくれるツールです。 本記事は実際に動かすところに重きを置くので、ツールの背景などの詳細は以下記事を参照ください。 ざっくり言うと、 memlab では以下のことが行なえます。 Puppeteer ベースでの宣言的なシナリオの作成 ヒープ領域とメモリリークの可視化 シナリオ内でのヒープのスナップショットの自動取得 スナップショットの解析と
機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス
スタディスト 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2022年上半期、およそ500コンポーネントを持つ Vue 2 プロダクトである Teachme Biz を、半年間に渡る単独作業を経て、 Vue 3 に移行することに成功しました。 本記事では、私達がどのようにして、機能開発は止めずにバージョンアップや破壊的変更への対応を行えたのかを簡単に振り返ろうと思います。 昨年の TypeScript 移行の次のステップとして、今年は Vue 3 移行を実現することにより、相乗効果でのフロントエンド開発体験の向上を実現しました。 モチベーションTeachme Biz をVue 3 に移行するモチベーションは概ね以下になります。 モダンブラウザに合わせてリアーキテクチャリングされた Vue 3 の恩恵を受けることVue 2 への機能追加・改修が 2.7 で終了してしまった
webカメラとOpenCV.jsとブラウザでリアルタイム顔向き推定を行う
動画から目や鼻の位置を取得して顔がどの方向を向いているかを調べる顔向き推定を、ブラウザ上でリアルタイムに行ってみます。 顔向き推定までの流れは大きく 4 つのステップに分けられます。 web カメラから映像を取得する映像から顔のランドマークの座標を取得するランドマーク座標からカメラの回転・移動ベクトルを計算する回転・移動ベクトルから顔の向いている角度を計算する注意：以下のサンプルコードはエラー処理などを省略しています。また OpenCV.js の変数は手動で削除する必要があります。 const imagePoints = cv.Mat.zeros(rows, 2, cv.CV_64FC1); ... imagePoints.delete(); webカメラからvideo取得MediaDevices.getUserMedia() を使うとブラウザ上で web カメラの映像を扱うことができます
ViteとVue3にTailwind CSSを導入する | miyauci.me
ViteとVue3にTailwind CSSを導入するViteプロジェクトでCSSフレームワークのTailwind CSSを導入する方法を紹介します。ついでに、Tailwind CSS用のStylelintのルールやVSCodeの設定をします。 はじめにVite は No bundle 掲げており、開発時に高速な HMR を提供してくれます。 しかし、CLI を用いたデフォルトテンプレート自体はかなりシンプルになっているため、Vite プロジェクトを始める際、他のモジュールを使うには自分で環境を構築しなければなりません。 今回は Vite を使って、CSS フレームワークである Tailwind CSS の環境構築をします。 なお、こちらの環境をベースに説明するので、適宜参考にしてください。 以下では Vite プロジェクトがある前提で説明します。 環境構築まずは、Tailwind CSS
Vite入門 - HTMLからTypeScript・React・Tailwind CSSまで - ICS MEDIA
Viteヴィート（フランス語で「速い」の意味）はフロントエンドのビルドツールです。 シンプルなウェブページの作成からReactやVue.jsなどのフレームワークを使ったアプリケーションの開発まで、さまざまな環境で利用できる汎用的で強力なツールです。2026年にリリースされたバージョン8では、パフォーマンスや開発体験がさらに向上しています。 ViteはNext.js・Nuxt・Astroのようなフレームワーク（メタフレームワーク）を使わずに静的サイトやReact・Vue.js等のSPAを開発するために使われます。位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。 この記事では、Viteを導入して静的ウェブサイトからTypeScript・React・Tailwind CSS等を組み合わせたアプリケーションまで、快適な開発環境を手に入れる方法
独自の音声圧縮をJavaScriptで作ってみた - Qiita
はじめに 今回はMP3、Vorbis(Ogg)、 AAC等の音声圧縮形式が使用している修正離散コサイン変換を使用して音声データの圧縮、伸長をJavaScriptとWebAudioを使用して実装して見ました。 https://redlily.github.io/training-webaudio-compression Chrome推奨 設計 設計、実装方針 JavaScriptとWebAudioで圧縮、伸長、再生が可能な実装を行う。 音声に関わる実装はOSSのライブラリを一切使わずに自力で実装を行う。 MP3、Vorbis(Ogg)、AACの音声圧縮形式が使用している修正離散コサイン変換を用いた実装を行う。 音質をある程度保ちながら16bitで量子化された無圧縮データと比較して1/8程度まで圧縮を行う。 なるだけ単純な実装で圧縮率を上げる。（エンコーダ、デコーダの実装をあわせて1000行程
日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして
WEB 開発において日本語が抱える問題 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、👇 の様に 記事 という単語の 記 と 事 で改行されていたら読みにくいです。 見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」 という声も無視できません。 いわゆる「文字組み」です。例えば、👇 の様に改行を入れてやります。 しかし、この方法は解決になっていません。なぜなら、WEB ブラウザ の幅はレスポンシブに可変するからです。ちょっと画面幅を狭めるだけで 👇 の様に崩壊します。 これに対応するためには、メディアクエリをくしして画面幅に応じた<br>タグを仕込むか、改行したくない文字列を手書きで<span style="display:inline-block;"></span>で囲む必要がありました。👇 の様に... <span
選択（Selection） と 範囲（Range）
この章ではドキュメントでの選択と、<input> などのフォームフィールドでの選択について説明します。 JavaScript を利用して選択状態を取得したり、全体あるいは一部分の選択/選択解除、ドキュメントから選択した部分を削除、タグへのラップなどを行うことができます。 末尾の “サマリ” セクションにレシピがあり、これで現時点で必要なことはカバーされているかもしれません。ただ、章全体を読むことでより多くのことを知ることができます。 基礎となる Range と Selection オブジェクトの把握は難しくはないので、必要なことをするためのレシピは必要ありません。 範囲(Range)選択の基本的な概念は 範囲(Range) で、基本的には “境界点”(範囲の開始と終了) のペアです。 Range オブジェクトはパラメータなしで作成できます: 次に、range.setStart(node,
Framework7 - Full Featured HTML Framework For Building iOS7 Apps
Subscribe for weekly web, app, and logo design inspiration.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
StackBlitz | Instant Dev Environments | Click. Code. Done.
Pinia | The intuitive store for Vue.js
Storybook: Frontend workshop for UI development
Quasar Framework - Build high-performance VueJS user interfaces in record time
