NHKのニュースや番組をつくっている私たちが取材に込めた思いや取材手法などをお話します。一緒に「取材ノート」をつくっていきましょう。サイトはhttps://www.nhk.or.jp/d-navi/note/ 利用規約はhttps://nhk.jp/rules
年末年始の自由研究として、CSSだけでLive2Dを動かすことができないかを試していました。紆余曲折あったものの、なんとか動きそうということが分かったのでひとまず情報共有。 Live2Dとは Live2Dは、2Dのイラストをモーフィング技術を使ってアニメーションさせるソフトウェアです。あのアプリゲームのキャラクターや、あのVTuberを動かすために使われています。 かわいい！！！ モデルデータを表示させる Source: CSSLive2D/src/01_parse at master · spring-raining/CSSLive2D · GitHub まず、Live2D公式サイトにあるサンプルデータのキャラクターを画面に表示させることを目標としてみます。各キャラクターはそれぞれモデルデータ (Haru.moc3)、テクスチャ画像 (*.png)、表情データ (*.exp3.json)
Scaling <svg>s can be a daunting task, since they act very differently than normal images. Instead of thinking of <svg>s as images, let's change our mindset: The <svg> element is a telescope into another world.Much like everything inside of an <iframe> on another webpage, everything inside of an <svg> element is in another world. Our telescope defaults to a normal zoom level: one "unit" is the sam
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
Zdog Round, flat, designer-friendly pseudo-3D engine for canvas & SVG What is Zdog? Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special. Zdog is small. 2,100 lines of code for the entire library. 28KB minified. Zdo
こんにちは、型と複雑GUIが大好きな @f_subal です。 普段は pixivFACTORY というサービスでフロントエンドをやっています。 さて、早速スクショでお見せしていますが、 今年の3月に pixivFACTORY のグッズ編集画面はリニューアルしました。 すでにこちらの記事でも紹介がありましたが、 新しい画面では、画像のみならず文字を使ったデザインができるようになっています。 フォントワークス および MonoType の書体が 100 スタイル分利用可能です。 文字だけでの制作も可能ですので是非ご利用ください。 https://factory.pixiv.net/item_groups/new 今回は、このテキスト入力機能のフロントエンド実装、 特に React と SVG でいかに文字レイヤーを表現するかについてご紹介したいと思います。 SVG にとって文字レイヤーとは何
これはとある回顧録 何度も諦めかけましたが、数年の歳月を経て遂に岡田を切る技術が一旦の完成へと至りました。その技術を巡る奮闘の歴史と成果について、ここに記録を残していきたいと思います。 画像時代 まずは「切る」という動作が何を指すかを明確にしておきます。 厳密な定義というよりは、切った感を得るために必要そうなふるまいとして定義します。 平面上のある領域が、任意の直線を境界として分割されること 分割された領域は物理法則に準じてふるまうこと 要するに気持ちよく岡田を切ることができれば目標は無事達成です。 物理エンジン 切った感を高めるためにはやはり「物理法則」に準じたふるまいが欲しくなります。つまりブラウザ上で動く物理エンジンが必要です。 世の中にはフルスクラッチで物理エンジンを作れる人間と作れない人間が居ると思われますが、残念ながら私は後者でした。勝ち目の薄い勝負は避け、素直に巨人の方にすが
「GUIの雑談を無限にしたいなぁ」と思い、会を開催しました。 twipla.jp 上記のイベントページを立てて、Twitter上で募集をかけたところ、 この内容だけでピンと来てしまったガチ勢が9人も集まりました。 ドローツールやマインドマップ、作曲ツール等を自作するフルスクラッチマンたちです。 予約したルノアールの会議室は過密状態になってしまいました。 （もう少し広い部屋にしておけば…と後悔しました） （ルノアールです） #複雑GUI会 pic.twitter.com/XDGWs3EwZd— みやおか (@miyaoka) May 2, 2019 職人タイプの方が多かったので終始和やかな雰囲気でしたが、 やはり実装に深入りしていくことが多く、あまりの情報密度に 私も話についていくのが大変だったと自白しておきます。 あと、なぜか開催前に「バウンディングボックス大会」が行われる雰囲気が醸成され
Creating Accessible SVGs Scalable Vector Graphics (SVGs) have been around since 1999, but they have seen a real resurgence in use as design interactions have become more complex and CSS/JavaScript have replaced antiquated animation programs such as Adobe Flash. There are plenty of reasons to use SVGs today including: Browser support – Increased native browser support of SVGs means better consisten
この記事のターゲットとなる方 この記事は、「HTMLを書いたことがある方」や「Illustratorを使用したことがある方」向けにSVGの書き方の初歩を解説しています。 記事を読むだけでなく、PCで「CodePen」というオンラインのテキストエディターを開き、SVGを書いていくことでより深く理解できるようにしています。 ぜひ記事を読みながら一緒に書いてみてください。 SVGは他の画像形式と何が違うの？ この記事をご覧の皆様は「SVG」をどのようなものだと思っているでしょうか？ たとえば、JPEGやPNGと同じような「Web用の画像形式の一種」だと思っていらっしゃる方もいるかもしれません。 しかし、SVGはJPEGやPNGと明確に違うところがあります。 SVGファイルの中身はテキストデータであり、HTMLやCSSのようにテキストエディターを使って編集したり、新規制作したりすることができます。
拡大しても美しい！ ベクタ画像ファイルであるSVGを、描画系ツールではなくテキストエディタとブラウザだけで作ってしまおう！という本です。普段描画系ツールをお使いの皆さんにも、SVGの中身やベクタ画像の中身を理解する上できっとお役に立てると思います。 技術書オンリーイベント「技術書典5」では、開場後2時間程度で完売してしまいました。入手できなかった皆さんのためにも、こちらで販売致します。 拡大しても美しい！ ベクタ画像ファイルであるSVGを、描画系ツールではなくテキストエディタとブラウザだけで作ってしまおう！という本です。普段描画系ツールをお使いの皆さんにも、SVGの中身やベクタ画像の中身を理解する上できっとお役に立てると思います。 技術書オンリーイベント「技術書典5」では、開場後2時間程度で完売してしまいました。入手できなかった皆さんのためにも、こちらで販売致します。 目次第1章 環境構築
Learn how you can use the powerful SVG filter primitive <feTurbulence> to create your own textures and distortion effects. feTurbulence is one of the most powerful SVG filter primitives. The specification defines this primitive as follows: This filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. […] The resul
SVG Filter Effects: Duotone Images with <feComponentTransfer> This fourth article in our SVG Filter series will show you how to use feComponentTransfer to create a duotone filter effect. In the previous article in this series I introduced you to the <feComponentTransfer>, and we used it to limit the number of colors in an image to create a poster effect. In this article, we will take a look at how
In this second part of our SVG Filter series you’ll learn all about the feMorphology filter, how it works and how you can use it to create interesting effects. Last week, in the first post of this series on SVG filter effects, we covered the basics of SVG filters—how to create them and how to use them. We also covered a few of the most frequently used filter operations (a.k.a. filter primitives).
SVG patterns offer a more flexible approach to repeating a background image on a web page than CSS tiling. Let’s look at why that is, and how you can use them. What You’ll Learn This tutorial is available in both video and textual form–here’s a breakdown of what you’ll learn: We’ll begin by looking at the more familiar method of CSS tiling. Then we’ll create a couple of SVG patterns, learning the
過大なネットワーク ペイロードの回避 弊社で運営する「持ち家計画」というサイトがあります。 最近リビルドが終わって新しいデザインに生まれ変わりました。 そこでPageSpeed Insightsなどでサイトパフォーマンスの評価も測定するようになったのですが、 なかなかどうして辛い結果になります。 そこで１項目ずつ要因を潰していくわけになるのですが、 まず、モザイクデザインの画像が重い、というのが目に付きました。 たとえはファーストビューのこの部分、 中央を透明にくり抜いたフレームタイプのpng画像、minify後で224KBありました。 マルチデバイス対応ということで、2480x1228もあるんで妥当なサイズではあるんですが。 他にも、同じ様に縦横サイズがでかい、ついでにファイル容量もでかい（最大500KB超のも）というのが数ファイルあったので、このモザイク画像をなんとかしようとなりました
この記事は、DTP Advent Calendar 2018の20日目の記事です。 これは、今から16年前の2002年に休刊になってしまった月刊MACLIFE誌に掲載予定だったIllustrator バージョン10発売時に行ったインタビュー記事です。入稿済みだったにもかかわらず2002年2月号が発刊されずに幻になった原稿です。そのまま日の目を見ずに埋もれさすのも勿体ないので今回掲載します。昔から使ってる方は回顧録みたいな感じかもしれません。分版プレビューってバージョン10から付いたんだーとか3D機能は入ってなかったのかとか分かります。 申し訳ありません！このインタビューですが最終号を確認したら2pで掲載されておりました…。 勘違いで掲載されていなかったのはソフトウェアレビューでした。ただ大幅に削除されているので、このインタビューは完全版として読んでいただければ。 Adobe Illustr
Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects. Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controlling the individual coordinates of the several layers of SVG paths, the
SVG を transform でアニメーションさせる場合、SVG 内の各要素を指定すると、原点が SVG 全体の左上なってしまいます。translate などは問題ないですが、scale や rotate などは思うようにアニメーションさせることができないです。 動かしたい要素をそれぞれ別の SVG に分けて、重ねて、原点を調整することで、対応することはできます。 しかし、それをひとつひとつ設定していくのは骨が折れる作業になります。とてもやってられないですね。だからといって、SVG ではない要素でつくってひとつひとつ配置していくのは涙が出るほど辛いでしょう。こんなことはエンジニアがやることでないです。僕たちは幸せになるために生まれてきたのだから。まだまだ理想にはほど遠いですが、とりあえず少しは楽になる方法を考えてみました。 作業手順 大きな作業手順としては以下の3ステップです。 svg
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く