Asanaのダッシュボード内のバーンアップチャートに予測線と完了日をプロットするChrome拡張 - hitode909の日記
Asanaのダッシュボードに置けるバーンアップチャートには今後の予測を表示する機能がなく、過去の実績だけが表示されている。 Asanaのバーンアプチャートの例一方、よくあるバーンアップチャートはこんな感じで、予測線が引かれていて、タスクがこれだけあって、タスクの完了ペースはこうなってて、このペースが続けばいつ終わりそうです、という予測ができるようになっている。 差し込みの多いプロダクト開発のスケジュールの精度を上げるためにはバーンアップチャートがおすすめです - スタディサプリ Product Team Blog タスク管理にはAsanaを使いながら、いつ終わるかも予測したい。 既存手法 社内ではいくつかのアプローチが試みられていた。 タスク一覧をCSVをエクスポートして、Google Sheetsにインポートしてバーンアップチャートを構築する 最初に試みられた手法がこれで、更新するたびに
ウェブブラウザ「Firefox 122」の正式版が公開されました。検索時のサジェスト候補に画像と説明が表示されるようになったほか、ウェブ開発関連の検索時にウェブ開発の情報がまとめてあるMDNをサジェストするようになりました。 Firefox 122.0, See All New Features, Updates and Fixes https://www.mozilla.org/en-US/firefox/122.0/releasenotes/ ◆検索候補の画像と説明が表示されるように 検索エンジンから提供されるサジェスト候補に画像と説明が付属していた場合にその画像と説明文が表示されるようになりました。 ◆翻訳機能の改善 Firefoxの翻訳機能はローカルで実行されており、インターネットに文章などのデータが送信されないためプライバシーを守りつつ翻訳を行えるという特徴があります。Firef
ロゴとかアイコンとかシンボルとか、Webサイトの中のいろいろなところで使われていて、それでいて色違いも必要だったりする小っこい画像たち。みるみる増えてしまってもう仕方ないですね…X(。そんな小っこい画像をひとまとめに管理できる、SVGスプライトについてまとめます。 アイコン一式SVG バラバラのアイコンたちをひとまとめにして、取っ散らかった画像フォルダをスッキリ片付けちまいたいXO！ ということで、例えば、ボタンの矢印とかアイコンとか、ロゴとかシンボルとか、Webサイトの至るところに蔓延（はびこ）る小っこいアイコンを、ひとつのSVGファイルに詰め込んで使いたいやつだけ表示させるやつのつくり方をまとめます。 仕組み 「SVGでやることのまとめ。」という記事で紹介したuse要素を使います。 ひとつのSVGファイルに、アイコンぜんぶを詰め込んで、それぞれにid属性を割り振れば、use要素でお目当
【2020/10/09】 QiitaのLGTMをSUSHIにするユーザースタイルシート - Qiita ユーザースタイルシートを用いた改良版を作りました。合わせてご覧ください。 概要 QiitaのいいねがLGTMに変わりましたから、当然の流れとしてSushiにしました。 記事のLGTMボタンの他、トレンドやマイページ、コメントなどに表示されるLGTMもSushiに置換します。 Greasemonkey/Tampermonkeyなどで実行できるユーザースクリプトとして実装しており、Greasy Forkからインストール可能です。 実装 偉大なる先人はユーザースタイルシートで実装していましたが、筆者としてはユーザースクリプトのほうが慣れてるのでそっちで実装することにします。 アイコンの置換 SVG要素の置換 新しいLGTMアイコンはSVG要素で描かれていますから、まずはそれら全てをqueryS
svg要素の基本的な使い方まとめ
4.図形の変形 基本図形だけでもグラフィックを描くことは可能だが，何れも座標が固定化されているので位置の変更やサイズの変更を行うのが面倒である．このような操作を簡略化するためtransform属性が提供されている．これはcss3でのtransform属性とほぼ同様の機能を提供する． transform属性:座標軸の変形 svgにおける図形要素の描画は，通常その要素が属するコンテナ要素（svg要素，symbol要素，marker要素等）のveiwBox属性の値に従って行われる．即ち，viewBoxから定まる座標軸とスケールを元に図形要素の実際の描画位置が計算される．ここで，この座標軸を変形する事を思い浮かべてみよう．同じ図形要素であっても，描画する基準が異なるため，座標軸の変形度合いに応じ描かれる図形が変形することだろう． この座標軸の変換をアフィン変換と呼び，svgではこの変換をtrans
Webサイトで利用する画像フォーマットとして拡大・縮小しても劣化しなく軽量なデータなので、SVGはこれからのWebサイトで多く利用されていくでしょう。そんな中、SVGの利用にあたって少し手こずるのが様々なデバイスで利用するためのレスポンシブ対応です。 SVGをレスポンシブ対応させるにはviewBox属性を利用します。 viewBox属性はレスポンシブ対応する際に利用するviewport（ビューポート）と同じ働きをします。 viewportは画面サイズの表示領域での指定をしていきますがviewBox相対的な表示領域、要するにSVGの領域でコンテンツを描画します。 SVGをwidthやheightで幅と高さを指定してCSSで親要素に%などで幅の可変に対応しようとしても、描画される領域はwidthやheightで指定した数値になりますので幅と高さが足りていないと表示が途切れたりします。これはSV
SVGの描画領域 - Qiita
ビューポート 図形を描画する領域のサイズです。 一番外側のsvgタグのwidth、heightで指定します。 (svgタグにposition:absoluteやposition:fixedが指定されていればpositionが優先されます) ビューポートの単位 長さの単位は em, ex, px, pt, pc, cm, mm, in, %を利用できます。 単位を省略した場合はpxになります。 ビューボックス viewBox属性 SVGの描画領域の定義に使います。 viewBoxで指定できる値は4つです。 viewBox="x, y, width, height"(カンマか、半角スペースで区切る) 値 内容
あるウェブページで次のようなSVG要素が直に埋め込まれていたのを見つけた。 <svg viewBox="0 0 24 24" height="32" width="32" aria-hidden="false" focusable="false" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" aria-label="email" stroke-linecap="round" stroke-linejoin="round"> <path d="..."></path> <polyline points="..."></polyline> </svg> （d属性値やpoints属性値は話の本筋とは無関係なので省略。） この例ではSVG要素に結構な属性が指定されているのだけれども、本当にその属性値は必要な
2021年6月2日CSS SVGファイルをCSSでレスポンシブにする方法を紹介します。 おしゃれなSVGファイルの入手方法や編集方法は、unDrawとFigmaでSVGをCSSでアニメーションさせるための下準備手順を参考にしてみてください。 <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg> SVGでは、上のように、widthとheightを直接指定することで幅と高さを決めることができますが、 これではレスポンシブになりません。 よって、次のようにします。 widthとheightを削除 <svg viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Firefox 122」正式版リリース、ウェブ開発関連の検索時にMDNのページがサジェストされるように
使いまわせるSVG
QiitaのLGTMをSushiにするユーザースクリプト - Qiita
viewBox属性でSVGをレスポンシブ対応させる | Free Style
メモ：SVG要素のその属性は本当に必要なのか - 水底の血
SVGをCSSでレスポンシブにする方法 | devsakaso – プログラミングの独学サイト