画像合成機能を実装するにあたって、ユーザーの画像を取り扱いたい、というケースは多々あると思います。 実際今僕が携わっている案件もまさにそうで、inputのtype='file'で受けてそれを canvas 上に描画して、最終的に画像合成…という流れです。 ただこれには問題があって、iOS11 以降でデフォルトとなっている HEIF 形式（.heic、.heif）は、そのまま WEB 上で取り扱うことが出来ません。普通に出来ると思ってましたが、完全に甘ちゃんでした。大甘です。 今回はなんとか HEIF を WEB で取り扱えるようにしていきます。 結論だけ先に述べると、JavaScript 実装があるにはあるんですが、ちょっと今回のプロジェクトにいれるのはどうなんだ…という結果になりました。ただ問題になるのは PC からのアップロード時のみなので、特に制約のないプロジェクトであれば、普通に導
テキストで書いた情報をもとにダイアグラムを作成するツールがいくつかあります。有名どころだとGraphviz、Mermaid.jsや、PlantUMLがあります。このうち、GitHubでも対応して、テキストで書いても絵が見えるので今後が利用が大きく伸びそうなのがMermaid.jsです。 Mermaid.jsをReactで表示しようとしたものの、Reactラッパーとしてnpmに公開されているものがどれも古くてメンテナンスされていなそうという問題がありました。この手のアダプター系のライブラリはどうしてもメンテナンスがされなくて放置されるのが早くなりがちです。脆弱性が残り続けたりします。また、もう1つ、Reactのバージョンポリシーが変わって、0.1, 0.2, 0.3…0.14だったのが、突然15, 16, 17, 18となったのも問題を加速しています。メンテされないライブラリがReactのバ
使い方 基本 satori() に SVG に変換したい要素とオプションを渡すだけです。 SVG に変換したい要素は JSX 記法を使うことができるので、 React アプリケーションであれば導入しやすいのではないかと思います。 import fs from "fs"; import satori from "satori"; (async () => { // フォントを読み込む // ファイルから読み込む例 ( Node.js のみ ) const fontData = fs.readFileSync("/path/to/Roboto-Regular.ttf"); // URL から読み込みたいときは `fetch` 等を使う const fontData = await fetch("https://example.com/Roboto-Regular.ttf").then((res
技術書典8で「お絵描きソフトをつくる本」という本を発行することにしました。そこで、流行りのCSS組版をやってみたのでログを残しておこうと思います。 CSS組版って 組版は製本をするための工程の1つで、原稿を作成した後に、文章、図などをレイアウトしていく作業です。InDesignなどのDTPソフトウェアを使ってソフトウェア上でレイアウトをしてくことがほとんどです。また、TeXなどのソフトウェアも組版ソフトウェアの1つです。 最近では、原稿をHTMLで作成し、そのレイアウトをCSSで指定する、CSS組版と言われる手法も出てきました。vivliostyleなどのOSSを使うと、簡単にCSS組版を利用することが出来ます。 CSS組版どうやるの？ まずは、やってみた人達のドキュメントを真似するのが手っ取り早いです。 https://vivliostyle.org/ja/samples/ https:
QuickAnswer
動画 動画からアニメWebP生成 動画からアニメPNG生成 APNG 動画からアニメGIF生成 動画サムネイル生成 動画から静止画切り出し アニメーションWebP作成 アニメーションPNG作成 APNG アニメーションGIF作成 アニメーションGIF作成(PWA版) 画像 画像フォーマット相互変換 Exif情報表示 画像縮小回転 画像リサイズ一括 リアルタイム版 迷路作成 SVG版 迷路作成 Illustrator版 ジグソーパズル作成 Photoshop PSDビューワー ハッチングパターンSVG作成 水玉模様SVG作成 アイコン ファビコン作成 リアルタイム版2 ファビコン作成 リアルタイム版1 ファビコン作成 マルチアイコン作成 マルチアイコン作成 リアルタイム版 ウインドウズアイコン作成 ウインドウズアイコン作成 リアルタイム版 ファビコン一括生成 ファビコン一括生成 リアルタイム
Adobe、macOS 11 Big SurとIntel/M1プロセッサを搭載したMacで発生しているPhotoshop/Lightroomの既知の不具合を公開。
AdobeがmacOS 11 Big SurとIntel/M1プロセッサを搭載したMacで発生しているPhotoshop/Lightroomの既知の不具合を公開しています。詳細は以下から。 Appleは日本時間2020年11月13日、デザインを刷新しApple Silicon Macをサポートした「macOS 11 Big Sur」を正式にリリースしましたが、それに合わせてAdobeもmacOS 11 Big SurへアップグレードしたMacで発生している既知の不具合の情報を公開しています。 Hi there – We're still testing & optimizing apps to make them fully compatible with Big Sur. We recommend that you run your apps only in operating syst
Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編) | Casual Developers Note
create-react-appを使わないでReactの開発環境を構築する方法を紹介します。 はじめに 近年のJavaScriptフレームワークはCLIを使ってワン・コマンドで設定できるようになっています。Reactではそのためのコマンドとしてcreate-react-appが提供されています。creat-react-appは簡単にReactを設定できる反面、設定が隠蔽されてしまい、細かい設定をするためにはejectする羽目になります。しかし、ejectをしてしまえば最後、create-react-appがアップデートされてもアップデートできなくなってしまいます。では、プロダクションなどで設定を細かく設定して管理したい場合はどうすればよいでしょうか？そういう人は自分でゼロから設定しましょう。 ということで、今回はcreate-react-appを使わないで、Reactの開発環境を構築してい
]> ▼帰ってきたUser-Agentについてのたわごと▼ [unknown above.net robot] adidxbot admantx-* adscanner (seocompany.store) Adsbot Adsbot (seostar.co) adscanner (seoscanners.net) AguseScan AlexaMediaPlayer [unknown alibaba.com .cn scanner] [Alkonavt checker] AlphaBot Amazonbot Applebot [Apple Messages preview] archive.org_bot [archive.ph archiver] AspiegelBot [aws fake Chrome scanner] BaiduSpider [fake] Barkrowler be
イラレでWebデザインってほんとにできるの？
イラレでWebデザインってほんとにできるの？ 連載 くれまとさくらのWebデザイナーは今日も行く はじめに みなさまこんにちは！ Photoshoph派のさくらです。最近はマルチデバイス対応の案件も増えてきて、ピクセルベースではないIllustratorでのWebデザイン制作にも興味があるのですが、なかなか一歩踏み出せません。……という愚痴をくれまさんにこぼしたところ、なんと、基礎をレクチャーいただけることに！ Illustratorを触ったことはあるけれど、Web用としては使ったことがない、という皆さんも一緒にくれま先生に教わりましょう！ デザインツールは何使う? Illustratorにもトライしてみよう！ 黒野：商用サイトをデザインする人が使うデファクトスタンダード的なアプリケーションって、Photoshop、Illustrator、Fireworks、Sketchという感じですかね
相対論の理解とその周辺
相対性理論を（少しだけ違った角度から眺めて）理解するための基本事項を，数式を省略せずにまとめてみました。また，周辺知識として，学部1年生から2年生向けの担当授業（電磁気学，理工系の数学 B および C，コンピュータ演習）の講義ノートを Web ページとして公開しています。 ■ ローレンツ変換によらない特殊相対論の統一的理解時間の進み方を変えるのは，特殊相対論的効果だけではない。「スカイツリー展望台と地上の時間の進み方の違い」のように，重力ポテンシャルの違いによる一般相対論的効果や，GPS衛星に搭載された時計の問題のように，運動による特殊相対論的効果と重力による一般相対論的効果がともにあらわれる場合もある。 一方で，ローレンツ変換が使えるのは，重力が関与しない特殊相対論の場合のみである。であれば，GPS 衛星の時計の問題のような，運動及び重力による効果の統一的理解のためには，まず特殊相対論に
これまでに自身で翻訳した or 投稿したDatabricks記事をまとめています。随時更新していきます。 Apache Spark徹底入門 2024/4/12に翔泳社よりApache Spark徹底入門を出版しました！ Apache Spark徹底入門を出版しました！ 以下では書籍で触れているサンプルをウォークスルーしています。 Sparkでテキストの行数を数える SparkでM&M'Sを数える Sparkデータフレームのスキーマ定義、エクスプレッションの活用 SparkのUDF、Spark SQL Sparkのデータソース Sparkのテーブル Sparkのユーザー定義関数、高階関数 SparkデータフレームとSpark SQLの一般的なリレーショナルオペレーター Sparkのベクトライズドユーザー定義関数 Sparkにおけるデータキャッシュ SparkによるAirbnbデータセットのク
WordPress 5.8の新機能（フルサイト編集、WebP画像、グローバルスタイル、グローバル設定など） WordPress 5.8 は記念すべきリリースとなるでしょう。信じられないほどの数の機能、改善、バグ修正に加えて、WP 5.8 は、「フルサイト編集」という広範なプロジェクトの最初の機能も提供することで、ウェブサイトを構築する新しい方法を導入します。 フルサイト編集以外にも、WordPress 5.8 は本CMSのいくつかの画面での数多くの変更と機能強化をもたらします。 Gutenbergプラグインを今まで使用しなかったWordPressユーザーは、Gutenbergの9つのリリースのすべての機能や改善点を一気に勉強することになります（各リリースの詳細については、Gutenberg 9.9、10.0、10.1、10.2、10.3、10.4、10.5、10.6、10.7を参照してくだ
BuildVu - PDF から HTML に変換
Webブラウザで動作 BuildVuでPDFなどを変換するとき、プラグインや追加のソフトをインストールする必要はありません｡Webブラウザで変換作業ができます。変換後のHTML5 / SVGファイルは、PC/スマホ/タブレットの標準ブラウザで表示できます。BuildVu提供のビューアを使えば、拡大、検索、目次、サムネイル表示、リンクなど、PDFビューアなみの機能と操作感で閲覧できます テキスト化により検索エンジンと相性が抜群 BuildVuは、PDF内の本文はもとより図や表内の文字データをテキストのままにHTML5やSVG変換するリアルテキストを実現しました。したがって、文章のコピー・ペーストが容易になり、検索エンジンへの効率的な対応ができます 正に高品質､元のPDFと見分けがつきません BuildVuは、他社にはない高品質の変換を実現します｡変換前後の表示を見比べても、違いを見分けること
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HEIF形式の画像をpngやjpegにしてブラウザで扱う | nabeen.be
Mermaid.jsをReact上でレンダリングする | フューチャー技術ブログ
HTML/CSS を SVG に変換する Vercel 製のパッケージ「satori」を試してみる
CSS組版を目指して --原稿からPDF作成まで-- - Qiita
Some Gripes on User-Agent, Again
Databricks記事のまとめページ(その1) - Qiita
WordPress 5.8の新機能（フルサイト編集、WebP画像、グローバルスタイル、グローバル設定など）