SVGとD3.jsの入門まとめ - Qiita
最近勉強し始めたので、備忘録も兼ねてSVGやD3.jsなどの全体的且つ基本的なところを浅く広く触れます。 SVGとは Scalable Vector Graphicsの略。普通のビットマップ画像と比べて、拡大しても荒れたりしません。 その代わりに小さい画像で凄い複雑な構造になっていると、負荷が高くなったりします。 IE9以前だとSVG自体やフィルターなどの機能が使えなかったりするので、どうしても古いブラウザまでサポートしないといけない場合は諦めて普通にビットマップ画像を利用します。 D3.jsとは SVG含めたHTML上でのビジュアライズやインタラクティブな処理・アニメーションが色々できるjsのライブラリ。 シンプルな記述で凝った表現のものが作れます。インタラクティブなグラフ（プロット）を作ったりなどに使われます。 2019年1月現在、githubのリポジトリにおけるスター数が8万を超えて
Elm Europe 2019 にスピーカーとして参加した - Runner in the High
2019/6/27-28にかけて開催されていた Elm Europe 2019 というカンファレンスにスピーカーとして参加した Now on: @sy_izumi recounts the journey of the biggest Elm application in Japan. pic.twitter.com/VG0NQG1Yo3— Elm Europe (@elm_europe) 2019年6月27日 このような海外カンファレンスへの参加は、だいぶ昔にサンフランシスコへ行ったとき以来だし、とくにスピーカーとして登壇するというのは人生初だった。英語でトークをやるというのは非常に緊張する体験だったけれど、率直に言ってめちゃくちゃ楽しかった。 詳しいカンファレンスの内容などはおそらく所属している会社のブログの方で書くはずなので、こっちではもう少しパーソナルなことを書こうと思う。 CFP
七章第四回 ノードをまとめて扱う：DocumentFragment — JavaScript初級者から中級者になろう — uhyohyo.net
七章第四回 ノードをまとめて扱う：DocumentFragmentこのページの最終更新日：2018年7月29日 今回解説するのは、DocumentFragmentというものです。これは、題名の通り、複数のノードをまとめて扱うのに必要なものです。 実はこれはノードの一種です。つまり、「テキストノード」とか「要素ノード」とかと同じように、「DocumentFragment」という種類のノードがあるのです。 ノードの一種だから、appendChildなどで子ノードを追加したり、あるいはcloneNodeでDocumentFragment自身をコピーしたりもできます。 このDocumentFragmentはどういった意味を持つノードなのかということですが、典型的な説明としては「小型のdocumentのようなものである」とされます。 つまり、DocumentFragmentは、ひとつの独立した木構造
Nuxt + Sails + TypeScript + Fargateでタスク管理ツールを作ったら快適だった話 - Qiita
・遅い ・ダサい ・わかりにく ・カンバンがない ・ガントチャートがない ・Wiki的なものがない ・なぜか仕事がうまく進まない ・SNSみたいな感じで、社員がもっと楽しくつながれたらおもしろそう ・スキルがレベルアップしてる様子とか、可視化されたらおもしろそう ・勝手に仕事してくれたりしないかな、AIとかで ・使ってたら無意識にPMBOKみたいになるように、レールが敷かれていると便利な気がする ・（ひどいコメントをしそうになったときに）「言葉にトゲがないですか？」とか、ボットがやんわり教えてくれるとか・・ みたいなことを妄想してたらワクワクが止まらなくなり、自分で作ることにしました。 このサービスの開発に採用した技術や、ハマったポイントと解決策を書いていきたいと思います。 何を作ったのか ガントチャート、カンバン、マークダウンでの情報共有ツールが揃ったタスク管理ツールです。詳しくはプロジ
GatsbyJSでポートフォリオをつくった
追記: GatsbyJS@2 以前の古い記事です。最新のチュートリアルはこちら 以前 neet.love というハローワークの対義語みたいなドメインを購入したのですが，こんなクソみたいなドメインに使い道なんてあるわけもなく，あろうことかスクワッティング状態になってしまっていたのでポートフォリオを作ります．求職してなさそうですね． MediumのReactタグで「GatsbyJSでポートフォリオ作ったで」というような記事を拝見したので今回はGatsbyJSを採用します．（どの記事だったかは忘れました） GatsbyJS is 何GatsbyJS（ギャッツビージェイエス）は，React用の 静的サイトジェネレーター です．「静的サイト」というのは与えられるパラメータによって情報が変化したりしない純粋なHTMLページのことですね． 類似プロジェクトとしてGitHub Pagesでよく用いられてい
d3.jsでParticleをSVGのPath上で動かす - Qiita
version d3.jsのversionは4.1.0です。 Code 今回使用した全コード demo demo: "d3jsはこういうこともできるっぽいw 使い道はわからない😇 ・参考 これをversion4の書き方にして、いろいろいじってみました。 Point-Along-Path Interpolation - bl.ocks.org ランダムの座標 SVG全体の大きさを定義 this.margin = {top: 10, right: 10, bottom: 0, left: 0}; this.width = window.innerWidth - this.margin.left - this.margin.right, this.height = window.innerHeight - this.margin.top - this.margin.bottom;
How to export frames from animated SVG | Dzejkob games - indie game developers
How to export frames from animated SVG (or convert animated SVG to GIF, APNG) (2.2020) Note: this method of exporting frames from SVG is for SMIL animations and is obsolete and not working in the actual version of chrome. New CSS animation recommended - see updated article here. I was surprised, that after few hours of searching i couldn't find any simple solution how to export frames from SVG ani
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
MediaRecorder APIをつかってCanvas/WebAudioなゲーム画面を録画する - Qiita
この記事は『ドワンゴ AdventCalendar 2017』5日目の記事です(๑˃̵ᴗ˂̵)و 昨日は @kinoppyd さんの『Gitをバックエンドにしたタスク管理bot』でした。 普段使ってるgitの裏側の世界はとても興味深いですね。 僕は以前から自分用のメモアプリをつくりたいな〜と思っていろいろ考えていたのですが、 データ保存のバックエンドにgitを使うのも面白いかもなぁと思いました！ さて、5日目の今日は**『HTML5なブラウザゲームを録画したい話』**をします。 どういうわけか：ゲームをつくったら録画したい 僕は昔からゲームをつくるのが好きで、個人でいろいろつくったりしています。 ここ数年はHTML5なブラウザゲームをメインでつくっています。 （といっても、その前はFlashゲームだったので、だいぶ前からブラウザなんですけどね） ゲームが完成し、それをインターネットで公開す
岡田を切る技術 - Qiita
これはとある回顧録 何度も諦めかけましたが、数年の歳月を経て遂に岡田を切る技術が一旦の完成へと至りました。その技術を巡る奮闘の歴史と成果について、ここに記録を残していきたいと思います。 画像時代 まずは「切る」という動作が何を指すかを明確にしておきます。 厳密な定義というよりは、切った感を得るために必要そうなふるまいとして定義します。 平面上のある領域が、任意の直線を境界として分割されること 分割された領域は物理法則に準じてふるまうこと 要するに気持ちよく岡田を切ることができれば目標は無事達成です。 物理エンジン 切った感を高めるためにはやはり「物理法則」に準じたふるまいが欲しくなります。つまりブラウザ上で動く物理エンジンが必要です。 世の中にはフルスクラッチで物理エンジンを作れる人間と作れない人間が居ると思われますが、残念ながら私は後者でした。勝ち目の薄い勝負は避け、素直に巨人の方にすが
svg / canvas出力ができるbodymovinの紹介 - KAYAC Engineers' Blog
やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で１番プログラムできないおじさんの町田（@machida-yousuke）と申します。 今回は、「映像業界?フロントエンド業界？が注目しているオープンソースライブラリ bodymovin」について紹介します。 ちなみに私は、元某インターネット広告代理店の映像クリエイター兼フリーランスのモーショングラフィッカーでした。 ※この記事はAfterEffects（以下「AE」と称する）の基本的な操作、用語を理解している前提で進めていきます。 ※bodymovinのバーションは V 4.6.10、AEのバーションはadobe AfterEffects cc 2017で進めていきます。 （V 4.6.10から使用言語によっておきるバグの修正がされています。） ※使用PCはMacです。 bodymovinとは AE
WebAssemblyへのコンパイラ言語を簡単に実装 - Qiita
後入りですみませんが、WebAssemblyアドベントカレンダー未投稿のところ埋めさせて頂きます。 本記事では、WebAssemblyをターゲットとするコンパイラ処理系を実装します。 方針 WebAssemblyへのコンパイル言語処理系を最も簡単に 1実装するための方針は以下のとおり。 言語は「コンパイラがなるべく小さくなる言語として考案」されたBrainf*ckを採用 文法はPEG(Parsing Expression Grammar)で記述し、生成系PEG.jsでパーサを実行時に生成する WebAssemblyコード生成では文字列でWAST形式を生成し、wast2wasm2で変換する(直接WASMを生成しない)。またEmscriptenやbinaryenは使用しない WASTの表現ではflat形式ではなくs-expression形式を使用する ブラウザ上ではなくNode上で実行する。な
Internels Vue.js 算出プロパティはどうやって動いているか
и� N� Ph� ��� `�� 05� ��n �� ��� �L� ��� ��� 0�� �Ě P � �$^ ��� ��� ��0 @G� `�� �5� �r� п� @� �W �ҍ �`� ��� �9 �� P�� >�
Creating an SVG Icon System with React | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. I recently went to Michael Jackson and Ryan Florence’s ReactJS Training. I was really excited to attend, partially because I had so many questions about SVG and React. There are a lot of bits about working with React and SVG, and especially manipulating it, that aren’t quite supported yet. One of t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
(0, eval)('this')とは何なのか - Qiita
JavaScript の async/await の仕様をずっと誤解していた
WebRTCハンズオン MediaRecorder編 - Qiita
真面目なアニメーション (html5j 2013, Web Animations)
Canvas と requestAnimationFrame でアニメーション - Qiita
SVG animation to video