こんにちは。ニコニコ生放送生放送フロントエンドシステムセクションのmisuken(GitHub/Twitter)です。 今回は10月に公開したsmart-svgとreact-sass-inlinesvgという2つのSVG表示ライブラリに関して、作成に至った経緯、ライブラリの特徴、工夫したポイント、パフォーマンス等の話をしていきたいと思います。 ライブラリを作成した経緯 これまでのSVGの表示方法 ニコニコ生放送ではこれまで、SVGを表示する際にはreact-inlinesvgというライブラリを使用していました。 react-inlinesvgは<img>のようにsrcにURLを渡して表示するタイプのライブラリです。 SVG要素がDOMに展開されるため、CSSからスタイルを適用できます。 react-inlinesvgのREADMEに書いてある使用例。 import React from '

この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ 2024/05/07 追記 最新の登壇スライドバージョンはこちらです。 登壇時の様子がYouTubeに上がっているのでよろしければあわせてご覧ください。 はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかな

ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。 How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs ファビコンは2000年代初頭に生まれたコンセプトで、インターネットに公開するウェブサイトはファビコンを備えているべきだとSitnik氏は主張。しかし、ウェブサイト

2020 年 8 月にツイートした HTML/CSS/JavaScript のツイートまとめです。見出しをクリックするとツイート元に遷移するので、気に入ったらフォロー・ファボ・リツイートお願いします。 1. enterkeyhint属性 スマホキーボードのエンターキ表示を最適化でき、フォームが送信されたときの動作をあらかじめ伝えられます。 <input enterkeyhint="enter"> <input enterkeyhint="go"> <input enterkeyhint="done"> <input enterkeyhint="next"> <input enterkeyhint="previous"> <input enterkeyhint="search"> <input enterkeyhint="send"> 各属性値を指定したときの表示は以下のようになります。 2

今日は週末に勢いでGIFアニメ生成アプリを作ったので開発の流れ＆技術的なポイントを共有します。ソースコードも全て公開しているので、ご自由に流用して遊んでみてください。 作ったもの アプリ： https://fulful.web.app/ ソースコード : https://github.com/yuneco/fulful 珍しく、ちょいバズりました（※当社比） ふるふるふるえるGIFアニメを生成できるWebサービスをリリースしました！あそんでみてね #フルフルネコチャンhttps://t.co/x49XIjEBuN — ゆき (@yuneco) May 10, 2020 この記事で書くこと ちょっとした個人開発アプリを短期間でリリースする流れ＆ポイント 技術解説：SVGフィルタの作り方 技術解説：ブラウザでGIFアニメを生成するアプリの作り方 なお、このアプリはもともとお仕事で↓の記事を書く

テキストに蛍光ペンで引いたようなマーカーを引いたり、下線をつかたり、丸や矩形で囲ったり、さまざまなスタイルでテキストを強調表示できる超軽量（3.63Kb）のJavaScriptライブラリを紹介します。 アニメーションにも対応しており、マーカーをさっと引いたり、丸でくるっと囲んだりも簡単に実装できます。アニメーションはオフにすることもできます。 Rough Notation Rough Notation -GitHub Rough Notationの特徴 Rough Notationのデモ Rough Notationの使い方 Rough Notationの特徴 Rough NotationはRoughJSを使用して、SVGでマーカーを引いたり、下線をつけたり、丸で囲ったり、さまざまなスタイルでテキストを強調表示できます。マーカーや下線や丸はアニメーションにも対応しており、オフにすることもで

LINE のフロントエンドエンジニア の GW の活動を5日連続で紹介する企画 vol.2。@spring_raining が miyoshi が開発した SVG ベースの日本地図マッピングライブラリ開発について話を聞いてみました。 まとめはこちら: GWを利用した自由研究発表会を開催しました - LINE ENGINEERING miyoshi Front-End Dev 1 チーム LINE NEWS のフロントエンド開発 UIT INSIDE ep.3 に出演 https://uit-inside.linecorp.com/episode/3 自由研究とその経緯 COVID-19 のための開発の副産物として、SVG の日本地図に対してマッピングを行うことができる汎用の Vue Component を開発した。 もともと LINE NEWS で COVID-19 関連の情報提供のために

ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？　webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザから即座に起動してすぐにでもベクター画像を描画できる無料のSVGエディタを厳選してご紹介します。 ほとんどのエディタがログイン不要ですぐに利用可能なうえ、オリジナルのアイコンやイラストをSVG形式で保存してWebコンテンツとして活用できます。 イラスト作成やSVGに興味のある方は、ぜひ参考にしてみてください！ ■ primalDraw シンプルなUIでありながら、ベクター画像を描くための基本的な描画ツールは一通り揃っているSVGエディタが「primalDraw」です。 面倒なユーザー登録などは不要で、ブラウザからアクセスすれば即座にエディタが起動してすぐに描画できる手軽さが特徴的です。また、2020年5月時点ではすべての機能を無料で提供しているのも魅力の1つでしょう。 ベジェ曲線などを利用した基本的なペンツールでゼロからイラスト

エムスリーの山本です。趣味で作っていたダイヤ可視化ツールの技術的な側面の話をします。 作ったもの ダイヤ可視化ツールです。時刻表ではありません。鉄道路線を比較するにあたって、本数の多寡や速達列車の比率とか本数の減り方とかが一発で分かるように可視化するものです。何のために必要かというと、鉄オタがダイヤ知見を深めるのに使います。つまりそういうやつです。 たとえばこれは小田急の昼頃の1時間に運行されている列車なんですが、 基本は20分間隔ダイヤ 主要な駅は10分間隔で有効な列車が来るように調整されている 本線は3-6-6-6で優等列車の比率が高い(長距離利用客が多そう) 千代田線の直通はあまりやる気がなさそう などが分かります。実際、新宿駅の利用者数の次に多い駅は町田駅だったりして、相当に長距離の利用者が多いのが特徴の路線です。 また、鉄オタならみんな架空鉄とか想像するのに使ったりするだろうとお

2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと

年末年始の自由研究として、CSSだけでLive2Dを動かすことができないかを試していました。紆余曲折あったものの、なんとか動きそうということが分かったのでひとまず情報共有。 Live2Dとは Live2Dは、2Dのイラストをモーフィング技術を使ってアニメーションさせるソフトウェアです。あのアプリゲームのキャラクターや、あのVTuberを動かすために使われています。 かわいい！！！ モデルデータを表示させる Source: CSSLive2D/src/01_parse at master · spring-raining/CSSLive2D · GitHub まず、Live2D公式サイトにあるサンプルデータのキャラクターを画面に表示させることを目標としてみます。各キャラクターはそれぞれモデルデータ (Haru.moc3)、テクスチャ画像 (*.png)、表情データ (*.exp3.json)

とにかく Material Design Icons を開きます Search... ボックスに face と入力します 一覧からお好みの SVG をクリックします </> ボタンを押し、プルダウンメニューから View SVG を選択します テキストエリアの中身をすべてコピー…するのではなく、 d 属性の中身のみコピーします。 <path fill="#000000" d="..." /> の ... です 下記のようなスタイルシートを記述し、 ... の部分にコピーした内容をペーストして完了です <style> .c-icon--face { background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"

svg2pdf.jsはSVGをPDFに変換するJavaScriptライブラリです。基本的にはjsPDFと併用する事を想定しているみたいです 上の動作サンプルはSVGをPDFとしてダウンロードできるようにしたものです。サンプルのSVGは数日前に記事にしたモックアップ等でダミーテキストを表現する為のSVGを作成出来る・「Wireframer」で生成したものでテストしました 用途としてはビジュアライズされたデータ等をユーザーがダウンロードできるようにしたい時などでしょうか 導入も簡単ですし覚えておいて損はないかなぁと思います。ライセンスはMIT svg2pdf.js

7. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" viewBox="0 0 100 100"> <path d="M0,42.197C0,18.892,18.892,0,42.197 ... "/> <rect x="0" y="20" width="10" height="10"/> <polygon points="81.098,61.017 88.796,76.614 ... "/> <text>Lorem ipsum dolor</text> </svg>

発表内容文字起こし https://kuroeveryday.blogspot.com/2019/07/mastering-box-shadow.html UIT meetup vol.7 集まれ！（タブン）実務では使わないフロントエンド芸発表会 https://uit.connpass.co…

UIT meetup vol.7で登壇してきました。 普段はReactやVue, BFFなどのゴリゴリの内容をやっているmeetupだそうです。 ただ、最近堅い内容が続いたので「○○芸人」を集める箸休め的な回をやりたかったそうです。 ということで、SVG芸人を名乗っている私にも声がかかりました。 （自分で言うのもなんですがSVG芸人ってなんなんだ…？） スライドはこれです。 slides.com 「ワードアートの歴史」から始まって「ベジェ曲線の手書きの仕方」とか横道にそれつつ、 最後はTシャツという謎終着点に行き着くような内容なので、あんまり真面目に見なくていいです。 話下手なので終始しどろもどろになりながらの発表でしたが、 徹夜で仕込んだ「令和のワードアート」やワードアートエディタがそれなりに受けてくれたようです。 「contenteditable」の単語だけで笑いが取れる場は貴重ですね