SVG

SVGでできる簡単なサンプルアニメーションを書きます。今回は、円のアニメーションです。さらに柔軟な表現ができるように、JavaScriptと絡めていきます。SVGとJavaScriptで、表現の幅が広がることを感じられたら幸いです。 円のアニメーションのサンプル コード デモ JavaScriptでSVGの要素を生成する コード デモ 余談 円のアニメーションのサンプル 今までやってきた内容を組み合わせると、様々な図形のアニメーションが作れます。アイデア次第では色々と作れるので、面白いと思います。一例として、以下に円のアニメーションのコードとデモを示します。 コード <svg version=…

概要 Web アプリの開発などで、ページ読み込みなどの画面表示でスピナーを利用したい方も多いのではないでしょうか？ 現在はスピナーを利用したい場合、MUI などのモジュールなどを用いることもできると思いますが、モジュールを使わずに利用したい場合も往々にしてあると思います。 そこで今回は、SVG ファイルでもスピナーアイコンを利用することができる OSS 「SVG Spinners」をご紹介します。 ファイル自体は SVGなので、モジュールなど不要で簡単にスピナーアイコンを利用することができます。 利用手順 以下の GitHub にアクセスし、README.md に掲載されている スピナーを確認…

create-react-app で作成した React のプロジェクトでは SVG ファイルを ReactComponent としてインポートすると inline-svg (<svg></svg>) として出力できるので path に CSS を当てたい場合などに便利です。 今回 Vite で作成した React (TypeScript) のプロジェクトで同じことをしようとしたのですがデフォルトの状態では SVG を ReactComponent として import できませんでした。 vite-plugin-svgr を使う 内部的に svgr という SVG を ReactCompon…

Qiita に書きました。 qiita.com

紹介 制御とか処理とかでブロックダイアグラムを作成したい時に利用できる フリー 登録不要 オープンソース GUI ローカル完結 各種OSに対応 microsoftのvisioみたいなものではあるが，例えば詳細な図面の設計に使えるものではないし，あくまで情報・工業・数学・産業といった分野において，ブロックダイアグラムなどの作成を支援してくれる 環境 ブラウザ JavaScriptを有効にしておくだけでOK app.diagrams.net アプリ インストールはこちらから，OSに対応してダウンロードしてね get.diagrams.net 利点 利用開始までの手順が簡単 利用環境のハードルが低い…

はじめまして！株式会社ハイヤールーの新谷（@s__shintani）です。 先日HireRooに新しくシステムデザイン形式の問題が追加されました。本記事ではシステムデザイン形式の問題で使用するドローイングツールの共同編集機能を実現する技術とその設計について執筆いたします。 図1: システムデザイン形式の問題回答画面。候補者はテキストやコンポーネントを自由に配置できる。 共同編集技術の歴史は古く、ユーザー間における処理の競合を解消するためにOperational Transform（OT）をはじめとする様々なアルゴリズムが考案されてきました。私たちが今回のドローイングツールを設計する際もいくつか…

objectのdata属性で読み込んだsvgの中にあるaタグに対してJSやCSSをあてたい。 qiita.com 別documentになるので、普通にJSやCSSはあたらない。上記Qiitaにあるようにobjectをとってきてその.contentDocumentをとり、そこに対してJSを当てる必要がある。 const objectImage = document.querySelector<HTMLObjectElement>('.p-object')?.contentDocument; const anchors = objectImage?.querySelectorAll('a'); み…

Asanaのダッシュボードに置けるバーンアップチャートには今後の予測を表示する機能がなく、過去の実績だけが表示されている。 Asanaのバーンアプチャートの例一方、よくあるバーンアップチャートはこんな感じで、予測線が引かれていて、タスクがこれだけあって、タスクの完了ペースはこうなってて、このペースが続けばいつ終わりそうです、という予測ができるようになっている。 差し込みの多いプロダクト開発のスケジュールの精度を上げるためにはバーンアップチャートがおすすめです - スタディサプリ Product Team Blog タスク管理にはAsanaを使いながら、いつ終わるかも予測したい。 既存手法 社内…

■前回 実装できなくて横に置いていたモーダル画面の表示。 意外と簡単に実装できることが分かったのが前回。 ■モーダル画面から投稿 現状、テーマ投稿は画面上部に枠があって、そこから投稿する。 返信も対象の発言に枠があって、そこから返信内容を投稿する。 これを、ボタンクリックからのモーダル画面から投稿するように修正していく。 bladeファイルの投稿欄をボタンに置き換える。 ------ <div class="bg-white rounded mt-2 ps-2 pt-1 pe-1 fs-4"> <div class="lead d-flex"> <ins>{{__('Post theme')}…

大変ご無沙汰しています。放浪軍師です。家事育児に追われる生活もだいぶ慣れてきた今日この頃ですが、みなさんは如何お過ごしでしょうか？気が付けば前回の更新から早3か月という、時が経つのは早いものですね。おそろしや… さて、先日 Xamarin.forms の後継である .NET MAUI が正式リリースとなりました。最近は Xamarin どころか C# にも触れていない身ではあるのですが、このブログが始まったのも、そして自分の技術力がない事に気が付いて転職したのも、すべて Xamarin が発端なので愛着というかそういうものがありますので、その後継である .NET MAUI にはやっぱ触れておか…

ネイティブエンジニアの桐山です。 タイトルが少々過激になってしまいましたが、iOS・Android開発とFlutter開発を比較して個人的に思ったことを書いた記事となっております。 Flutterで新規アプリをリリースした前回の記事はこちら👌 techblog.timers-inc.com

目次 目次 .NET MAUI リリース Xamarin.Forms と .NET MAUIの主な違い .NET MAUI のプロジェクト構成 Xamarin.Forms のアーキテクチャーに起因する問題点 Xamarin.Forms のレンダラーアーキテクチャー Xamarin.Forms レンダラーアーキテクチャーの問題点 .NET MAUI の最大の変更点 .NET MAUI で導入されたハンドラーアーキテクチャー .NET MAUI ハンドラーアーキテクチャーのアドバンテージ （参考）Generic Host .NET MAUI のスタートアップコードの例 MAUI 用の Generi…

スナックえんどうの種 ブログを始めて、１年半ほど経ちました。 最初は分からないことだらけでも、続けているうちに解消していけるんだろうと思っていました。 でも今、むしろ、困りごとが増えていってます…。 検索の仕方が下手なのか、解答になるような記事を見つけることができないので、自分が困っていることについて記事にしてみることにしました。 今回は、画像（主に写真）の圧縮についてです。 自分が使っているソフトや方法の紹介と、質問のような内容です。 すみません、まとまりがないです…。

Ocean MarketへのデータNFTの公開方法 Jamie OceanONDA V4マーケットとデータNFTの公開方法の説明 OceanONDA V4では、データNFT、セーファーステーキング、独自のデータマーケットプレイスを運営する際の手数料設定の柔軟性など、素晴らしい新しいアップグレードの数々がもたらされました。ほとんどの方は、Ocean Marketを通じてアップデートに触れることになります。この記事では、マーケットにおける主な変更点をまとめ、データNFTを公開する方法についてステップバイステップで説明します。 Ocean Market V4における多くの変更点は、データNFTの導入…

要件定義 レストランサイトの作成 ページ構成：シングルページ ページ内容 メインビジュアル（3枚の画像をスライド） ナビゲーションメニュー（pcからハンバーガーメニュー） ロゴ（svg） ニューステキストの差し込み（ajaxを使って外部データを読み込む） 動画の埋め込み(mp-4形式) モーダルウィンドウの埋め込み（Lightboxプラグインを使用） SNSの埋め込み（TwitterAPIを使ってタイムラインを埋め込む） GoogleMapの埋め込み GoogleFormの埋め込み 用意する物 メインビジュアル画像ｘ3枚（サイズ：1920x1080）cssでトリミング モーダル用の画像x3枚（…

1. はじめに 昨晩、熊倉さんから以下のダイレクトメッセージを受け取りました。 小林さん突然すみません！こちら原因わからなくて困っているようなのですが、もし理由すぐ分かるようでしたら教えていただけるとめちゃ助かります・・ 個人的には、画像URLでカバー設定してもたまに引っ張ってこれない(.htaccess周りとかの設定？)ケースがあるのでそれに引っ掛かってるのかなーとかありますが、api特有の動きってあったりします・・？ 熊倉さんが受けた質問主は Google Books API のイメージを API 経由で Notion に埋め込みたいが失敗するという話でした。結局、検証の結果、API から…

ImageJでPythonを使ったときにプログラミングを行う際に、非常に役立つサンプル集であり、neubias (network of european bioimage analysts) によって維持されていると思われる、Python - ImageJ/Fiji Cookbook ですが、サンプルへのリンクの翻訳を作っておくと役立つのではと思い、以下に作成しておきます。 Python + ImageJ, Fiji Cookbook Jython インタープリター +-符号付/符号なし値への相互変換 bitwise & operatorを使った符号付/符号なし値の変換 ImageJ2 / S…