d3.js (v6) でブラウザに地図を描く方法
d3.js とは d3.js はデータビジュアライゼーションJavaScriptライブラリであり、棒,円,折れ線グラフなんてものは序の口で様々なデータ可視化ができる高機能ライブラリ。その実力は 紹介されているギャラリー(サンプル) を見れば一目瞭然。前からこれを使って、GeoDataで地理情報を可視化して遊んでいたのですが、バージョンが上がるごとに若干作法が変わるので定期的にウオッチが必要。今回は現在(2021.5)の最新であるv6をキャッチアップするとともに、最近、コロナ禍で色々な地域データの可視化も盛んなので改めてその方法をまとめておく 参考D3.js – Data-Driven Documents 地図データの準備 d3.js で地図を描く場合、そのデータをGeoJson形式で準備する必要がある。さらに、一般的にはデータサイズが大きくなりがちのGeoJsonを軽量化したtopojso
Blender のラインアートの使い方
目次概要他の輪郭抽出技法との比較ラインアートのパフォーマンスパフォーマンスを上げるには線のみが必要な場合カメラの設定ラインアートの作成ラインアートの設定線幅・不透明度の設定交差線交差線のマスク（3.0）辺マークフリースタイル面マーク（3.0）重複頂点を削除重複する辺を輪郭にクリースOcclusion透過線の加工入り抜きFading（3.0）Vertex Weight Transferチェーン化線のコントロール線幅の固定ズーム時の線幅の問題幅の均一化ライトの不使用任意の場所に線を置く不要な線を除去する色トレス被写界深度フリースタイルベイク画像をグリースペンシルオブジェクトへ変換SVG エクスポート画像をメッシュに変換ラインアートのみレンダリングトラブルシューティング線が出ない線にパースがつくビューポートの線が汚い・一部線が出ない交差線が出ないVertex Weight Transfer が機
はじめに「FontAwesome を JavaScript なしで使用する方法」または、「FontAwesome の一部のアイコンを使用する方法」です。 JavaScript 無効環境で FontAwesome を使用したページを閲覧すると文字化けしたような表示になるのを目にします。そうなるのを防ぐため、 FontAwesome を JavaScript なしで使用します。または、 FontAwesome は、使用しないアイコンも含めてすべてのアイコンを読み込むため、数個のアイコンのみを使用する場合、不必要なコストが掛かります。それを回避するため、必要なアイコンのみを読み込んで使用します。 FontAwesome は、上記の方法を PNG 画像でも実現できます。ですが今回は、後述する理由により SVG を利用して実現します。 ちなみに、 JavaScript 無効環境だと次のように文字化け
画像フォーマットの選び方について【2021年版】
画像フォーマットの選び方について もともと映像系のフォーマットに興味がありいろいろと調べていたが画像データに関しても最近は進化が進んでいるということでモダンな開発環境での選定基準をある程度まとめてみた。 かならずしもこのフローにそう必要はないと思うが基準があるといろいろとやりやすいので参考にしていただければと思います。 画像フォーマット選定フロー 選定フローの判断材料は下記の要素を元にして考えています。 データ容量 画質 管理のしやすさ まずはSVGから検討 SVGが利用できる場合は極力SVGを利用します。 SVGは他の画像フォーマットとは違い画像をコードとして書き出すため軽量かつ拡大に強い画像として利用できます。 バイナリデータではないためGitなどのバージョン管理システム上での利用も可能で管理上も非常に優秀です。 しかしながら、非常に細かい描写は苦手なためレイヤにビットマップ形式のファ
定価 3,520円（本体価格 3,200円） 発売日 2021年9月20日 判型／ページ数 B5変形／464 ISBN 9784802613378 JavaScriptは、Twitterのようなソーシャルアプリケーションから、PhaserやBabylonのようなブラウザベースのゲームフレームワークまで、現代のほとんどのウェブアプリケーションの中核をなしています。JavaScriptは、初心者が手に取って遊ぶには簡単な言語ですが、本格的なアプリケーションを構築するためには柔軟で複雑な言語です。 『Eloquent JavaScript』の第3版は、JavaScriptを深く掘り下げ、美しく効果的なコードを書く方法を紹介しています。また、クラス表記、アロー関数、イテレータ、非同期関数、テンプレート文字列、ブロックスコープなどの新機能を追加しました。また、多くの新しい演習問題が追加されており、ス
モチベーション Web で数式を表示するための仕様として、 MathML というものがある。ただ、 MathML はブラウザーの対応がイマイチなので、もっぱら MathJax や KaTeX などの JavaScript で書かれた代替手段を使うことが多いだろう。しかし、 EPUB の場合は標準的な数式記述方法は MathML なので、 LaTeX 数式を MathML に変換する必要がある。 そこで、「LaTeXで記述された数式をMathMLに変換する」ことを考える。 （尤も、 Kindle は MathML に対応していなかったり、EPUBリーダーで多く採用されていると思われる WebKit 系のレンダリングエンジンでどれほどの見た目になるのかという問題がある。しかし、それらの問題はおいておく。） この記事では LaTeX で書かれた単体の数式を対象とし、 LaTeX 文書をまるごと
コンパクトで低価格のCO2レーザー加工機「beamo」がKickstarterに登場し、わずか10分以内で目標額を達成する人気を集めている。 beamoは、A4サイズのワークエリア（300×210mm）で持ち運びも可能なレーザー加工機。出力30Wの水冷式CO2レーザーを搭載し、小型ながら1000dpiの解像度で刻印できるのが特長だ。 加工できる素材は、切断と刻印に対応するのが木材、革、アクリル、段ボールなどで、刻印のみが布地、ゴム、ガラス、セメントなど。素材によって異なるが、最大で厚さ5mmまで切断できる。 ソフトウェアとして「Beam Studio」が付属し、OSはWindows／macOS／Linux／Chrome OSと互換性がある。ファイル形式はJPG／PNG／SVG／DXFに対応するので、Adobe IllustratorやMicrosoft Powerpointなどほかのグラフ
【2020年】CSS・Javascript・PHP 非エンジニアも押さえておきたいポイントまとめ | 株式会社ウェブ企画パートナーズ
2020年、Flashがついに終了 Adobe Flash Playerが2020年末をもって開発・配布を終了することが決まっています。かつてはWebアプリや、アニメ表現、ブラウザで動作するゲームなど、リッチなWebコンテンツに欠かせなかったFlash。スマートフォンでの動作に向かないとされたことから、徐々にシェアが低下し、開発終了に至りました。 かつてFlashで作られていたものも、今ではHTML5、CSS3をベースに、JavaScriptやPHPなどを駆使して作られるようになり、新しいフレームワークや技術、言語仕様なども日々アップデートされています。今回は、エンジニアでなくとも、Webにかかわる方に知っていただきたい、2020年1月時点のCSS、JavaScript、PHP最新動向をご紹介していきます。 W3Cが方向性を決定 CSSはブラウザごとにそれぞれ実装されているため、ブラウザの
Astro 2.x から 3.0 へアップグレードした際に、レスポンシブイメージは対応していないため、ビルトインされている <Image /> コンポーネントの導入は見合わせることにしました。 しかし、本サイトのブログ記事において、パフォーマンスのボトルネックとなっているのは画像ファイルです。また、別のプロジェクトで Astro を使用するときにも、この課題に向き合わなければなりません。 そのため、この記事では Astro でレスポンシブイメージを実装する方法を考えていきます。 以降、Astro の getImage() 関数でレスポンシブイメージを実装する方法を解説していますが、問題点も見つかりました。特に、ホスティングサービス側でビルドする場合には注意が必要です。 本記事における Astro のバージョンは 3.1.4 を前提としています。 まず、候補として挙がるのは「Astro Im
前回の記事から3ヶ月ほど経ったため、あらためプラグインを棚卸しました（半年だとチェックする数が多いので少し短くした）。前回から2020/3/31までに、Plugin Directoryへマージされたものから、「インストールしたプラグイン」「候補に上がったプラグイン」「今回チェックしたその他のプラグイン」の順でお届けします。 2020.1版 2019.6版 インストールした新しいプラグイン Arrange Artboards Hierarchically https://github.com/oodesign/arrange-artboards-hierarchically スラッシュベースの名前に応じてアートボードを並び替えてくれるプラグイン。A・A/A・A/B・A/A/Aとあれば、A先頭に階層的に並び替えてくれます。 アートボードを自動で整頓してくれるArtboard Managerを使
QuickAnswer
動画 動画からアニメWebP生成 動画からアニメPNG生成 APNG 動画からアニメGIF生成 動画サムネイル生成 動画から静止画切り出し アニメーションWebP作成 アニメーションPNG作成 APNG アニメーションGIF作成 画像 画像フォーマット相互変換 Exif情報表示 画像縮小回転 画像リサイズ一括 リアルタイム版 迷路作成 SVG版 迷路作成 Illustrator版 ジグソーパズル作成 Photoshop PSDビューワー ハッチングパターンSVG作成 水玉模様SVG作成 アイコン ファビコン作成 リアルタイム版2 ファビコン作成 リアルタイム版1 ファビコン作成 マルチアイコン作成 マルチアイコン作成 リアルタイム版 ウインドウズアイコン作成 ウインドウズアイコン作成 リアルタイム版 ファビコン一括生成 ファビコン一括生成 リアルタイム版 半透明マルチアイコン、ファビコン作
自己紹介 むちゃんです。 関西を拠点に活動しているフロントエンドエンジニアです。 HAL大阪の2回生です (2020.10.7現在) イベントなど回っているので是非大阪辺りの方は会いましょう！! なんでエディタにコードを書くと表示されるの? 皆さんはこんな疑問は持ったことはないでしょうか? 知っているようで知らない方が多いいと思ったので今回はこれを題材にして説明していきたいと思います ひとまずこの表をご覧ください。 1...レンダリングとは? WebブラウザはWebサーバーからの情報を受け取ってhtml、css、JavaScript、 画像はjpeg、png、gif、svgの情報を解析してコンテンツを画面に表示します。 このときブラウザがWebサーバーから受け取る情報は、 私たちが見ることができるように情報を成型してブラウザに表示させてます。 それらのデータを元にして表示内容を作るのが「レ
元記事：https://www.octoparse.jp/blog/top-30-data-visualization-tools データの視覚化は、情報やデータを見える化することによって、人々が効果的に洞察を得ることに役立ちます。データ視覚化ツールは、グラフやチャートなどを利用してデータをより分かりやすく読み上げます。多くのデータ視覚化ツールから最適なのはどれですか。本記事では2019年おすすめのデータ可視化ツール30選を紹介します。あなたのニーズに合わせて一番ふさわしいツールを選びましょう。 #ノーコード型ツール ##1.チャートとグラフ ###1) RAWGraphs RAWGraphsは、オープンソースのWebデータ視覚化ツールです。Microsoft ExcelおよびApple Numbersのようなスプレッドシートと、Adobe Illustrator とSketchのようなベ
画像合成機能を実装するにあたって、ユーザーの画像を取り扱いたい、というケースは多々あると思います。 実際今僕が携わっている案件もまさにそうで、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という感じですかね
これまでに自身で翻訳した 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ページを開く
FontAwesome を SVG で使用する【JavaScript なし】
流麗なJavaScript（マリン・ハーバーベーク） | 書籍 | ソシム
LaTeX数式 to MathML を考える | 雑記帳
30W CO2レーザーで1000dpiの刻印——デスクトップ型レーザー加工機「beamo」｜fabcross
Astro でレスポンシブイメージを実装する | grip on minds
新しくリリースされたSketchプラグインを紹介します（2020.04版） | DevelopersIO
分かりそうで分からない、レンダリングについて - Qiita
2021年データ分析・データ可視化ツールおすすめの30選！ - Qiita
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画像、グローバルスタイル、グローバル設定など）