Sass製SVG爆速表示ライブラリのご紹介 - dwango on GitHub
こんにちは。ニコニコ生放送生放送フロントエンドシステムセクションの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 '
一意な識別子の生成でUUID/ULID/CUID/Nano IDなど検討してみた - Sweet Escape
最近、一意な識別子について検討することがあったのでその検討メモ。 一意な識別子とは つまり、重複しない、ユニークな識別子（Identifier, 以下id）のこと。ここではRDBのテーブルにおける主キーとして使うことを想定かつ前提としている。したがって、主キーの要件であるユニーク性を持ったidをどうやって生成していくか。 そんなのDBの連番でいいじゃんて話もあるがここではその話はせず、あくまでも一意な識別子をどう生成するかの話に絞る。 選択肢 一番有名だと思われるUUIDを筆頭にいくつかの選択肢がある。 UUID ULID CUID Nano ID 他にもTwitter発のSnowflakeとか今はDeprecatedになってるshortidなどがあるが、キリがないのでここでは上記の4種類だけで簡単に比較した。また、実際にはUUIDはバージョンによってSpecが異なるがここではバージョン4
個人開発したサービスのバックエンドを Python から Rust に書き換えてみた
はじめに 過去の記事『淡路島発着の高速バス検索サービス「GO TO AWAJI」をリリースした話』で Python を用いて個人開発サービスのバックエンドを実装したことを紹介しました。 勉強のためにこのサービスのバックエンドの一部を Rust で書き換えたので、本記事で紹介させて頂きます。 クローラーサービス 今回 Python から Rust に書き換えを行ったのはクローラーと呼んでいるサービスです。 これは GCP の Cloud Run 上で動いており、 Cloud Scheduler から定期的に実行されて以下のことを行っています。 クローラーサービスのシステム構成 各バス会社の新着情報をスクレイピングする 取得した新着情報を DB (SQLite) に保存されている過去の新着情報と比較する 新しい新着情報が存在する場合DBに保存し、SendGrid で筆者宛にメールで通知する な
あなたのプロジェクトを煌やかにするアニメーションライブラリ18選 - Qiita
Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo 以下はRoden( Twitter / GitHub / Webサイト )によるアニメーションライブラリ紹介記事、18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Projectの日本語訳です。 help youの後の文字はPC版Chromeだと見えなかった。スマホ版では見れる。 元記事はリポジトリへのリンクだけというのも幾つかあるので、適当に解説を加えています。 18 amazing 🤩 GitHub repositories that will hel
Mirrativ×Unity as a Library 活用事例と開発テクニック - Mirrativ Tech Blog
こんにちは、Unityエンジニアの菅谷です。今回はUnity as a Libraryの活用事例と開発テクニックとして、以前のLTで紹介した内容をまとめました。Mirrativでの活用事例を通してUnity as a Libraryの強みや課題を共有し、他のプロダクトでの導入の参考になれば幸いです。2021/6〜2021/7にMirrativ×Unity as a Libraryのテーマで行った3本のLTをまとめた内容となっています。 mirrativ.connpass.com meetup.unity3d.jp mirrativ.connpass.com MirrativにおけるUnity Mirrativにはエモモという配信をサポートする3Dアバターが存在します。ユーザーは衣装やアクセサリーなどのアイテムを組み合わせてエモモを着飾ることができます。MirrativはiOSはSwift、
Mock Service Worker で開発用のモックAPIを作る
フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。 そんな時に、Mock Service Worker を使うと便利だったのでまとめます。 Mock Service Worker とは？ Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。 テストでの利用については以前こちらの記事でまとめました。 今回は開発時のモック API としての利用について書きます。 開発用の API というと、JSON Serverが有名ですが、Mock Service Worker では Service Worker を使ってリクエストを返すため、別プロセスでローカルサーバーを立
The best new Vue 3 UI libraries of 2021 - LogRocket Blog
This article is a follow-up to my previous article showcasing a list of nine superb Vue 3 UI frameworks. These frameworks enhance your Vue app’s development experience, maintainability, and final design. Today, I’ll be talking about five more brand new Vue 3 UI frameworks that ship with a panoply of awesome components (e.g., navbars, inputs, and checkboxes) that will help you effortlessly build in
全デバイス・全ブラウザで PDF を読みたい - Kaizen Platform 開発者ブログ
TL;DR PDF を画面に埋め込む方法は、iframe, object, embed, Viewer（3rd party library の利用）がある。 ブラウザネイティブの PDF 表示機能はブラウザ差異が大きいため、PDF を canvas や svg に変換して表示するライブラリやビューアーを利用した方が安定する。 しかし 3rd party library / service の利用はバンドルサイズやランタイムでの変換にコストがかかるため、なるべくブラウザネイティブなやり方で PDF を開きつつ、一部ブラウザ向けに対してのみ 3rd party library/service 経由で表示するように分岐させたい。 どのブラウザならブラウザネイティブの機能が使えるかを調べるために、サポート範囲の全端末・全ブラウザで PDF の描画結果を比較・調査した。 はじめに 業務委託エンジニア
目指すのは“C#大統一理論” Cysharpの多機能OSSで実現する最高の開発体験
CA.unityはサイバーエージェントが運営するUnityをテーマにした勉強会です。サイバーエージェントのサービス開発者と社外の開発者を交えて、Unityに関する知見を共有します。河合宜文氏からは、Cysharp社のOSSについて紹介がありました。 Cysharpのモットーは「C＃の可能性を切り開いていく」 河合宜文氏（以下、河合）：「A quick tour of the Cysharp OSS」というテーマでCysharpの河合が話します。お願いします。 私は河合宜文と言って、Cygamesの子会社であるCysharpという会社で社長をしています。今回イベントを主催したサイバーエージェントの子どもの子どもなので、孫会社です。Cysharpはいろいろとやってはいて、目に見えるところで一番大きなものは、OSSの提供だと思っているんですが、我々は「C＃の可能性を切り開いていく」というのをテー
uGUI記述ライブラリ『Mux』を公開します - pixiv inside
こんにちは。VRoid モバイル/StudioのUIを開発したねこまんまです。 先日VRoid モバイル/Studioで利用しているuGUI記述ライブラリ『Mux』を公開しました🎉 github.com 実は以前、pixiv TECH SALONで少しだけ紹介させていただいたのですが、今回はこのライブラリの魅力をより掘り下げて見たいと思います🔍 uGUI? uGUIとはUnityのアプリケーションで使うことができるUIツールキットです。他にもUnityには、新しく開発されているUI ToolkitやUIWidgets、サードパーティーによるものなど様々なものがあります。uGUIはその中でも成熟しており、Unityに標準的に含まれることからよく利用されています。 uGUIの特徴は、Unityのヒエラルキーに則ってUIが構築されることです。そのため、Unity Editorを用いて編集する
Big Sky :: コメントも扱える高機能な C++ 向け JSON パーサ「jsoncpp」
おなじみC/C++から使えるJSONライブラリを紹介するコーナー。まずは過去のまとめ。 ヘッダファイルだけでC++から使えるJSONパーサ「picojson」が凄い！ 何も見ずにC++でjsonパーサが書けるか試してみた。 C言語から使えるJSONパーサ、JSMNを試してみた。 僕がboost::asioとboost::property_treeを使いHTTPプロキシ環境下で非同期にGoogle Search APIから検索するまでにやった、たった一つの事。 C言語から使えるJSONパーサ、parson が思った以上に良い仕事をしている。 最速と言われる JSON パーサ「rapidjson」が本当に爆速なのか試してみた。 C言語から使えるJSONパーサ、jansson がとても直感的で良い C++ で STL フレンドリに扱えるJSONパーサ「json.hpp」 これまで C++ から扱
UnityでWebSocketを使ってブラウザと通信する - e.blog
概要 WebブラウザからUnityへ（そしてビルドしたアプリにも）データを送信したいことがあったのでWebSocketをUnityで利用する方法およびWebブラウザからデータを送信する方法を試してみたのでそのメモです。 Unity側のWebSocketの利用は以下のライブラリを利用させていただきました。 github.com ちなみにサーバ側はNode.jsとwsモジュールを利用しています。 今回のサンプルはGitHubにアップしてあるので実際の動作を確認した人はこちらを参照ください。 github.com 概要 ライブラリをビルドする 不要なプロジェクトの削除 ソリューションをビルド DLLをプロジェクトに配置 C#でWebSocketを扱う WebSocketサーバに接続する サーバを立てる Webブラウザからデータを送信する WebSocketを利用してバイナリデータを送る カラー情
JSの日付ライブラリは、どれを使えばいいのかまとめ
Moment.jsは、新規開発停止、メンテナンスモードに移行 Moment.jsは、新規機能の開発停止、メンテナンスモード(セキュリティ修正とMoment Timezoneのデータ更新は行う)に移行することが発表されています。これから新規開発するプロジェクトでは、別のライブラリを使うことが推奨されています。 僕の新規開発のプロジェクトでも当初はMoment.jsを使っていましたが、リリース前にこの発表が出たので、別のライブラリに変更することにしました。 Moment.jsのドキュメントページに、推奨ライブラリが4つ掲載されていたので、その中から選ぶことにしました。 Luxon Day.js date-fns js-Joda 簡単に結論が出るケース Day.jsを使うべき人 Moment.jsからの移行 Moment.jsを使い慣れている人 Day.jsはMoment.jsと同じAPI体系を
『UniTask2』を使って快適なUnityライフを！
自己紹介HN: すいま 所属班: プログラム班 回生: 4回生 Twitter: @SuimezZZ はじめにメリークリスマス！！ こんにちは。4回生のすいまです。 まず今回このようなイベントを開いてくれたSBさんに感謝！！ありがとうサンキュー！！ 今年も誰向けなのかわからない記事を書かせていただきますよええ。 去年のアドベントカレンダーでも UniTask について書かせていただきました。 あれから1年。 UniTask も進化し 『UniTask v2』 となりパワーアップしました！！ 旧UniTask からの変更点や追加機能などを解説いたします！ぜひ UniTask を開発に取り入れてみてください！ ※この記事では UniTask2 を UniTask , 従来のUniTask を 旧UniTask と表記します。 去年の記事と被る内容は量が多過ぎちゃうんで省きます。 例えば、前回と
[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け] - Qiita
[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け]TypeScriptFirebasecloudfunctionsFirestoreFirestore型付け係 8/18 更新 Custom Transformer を使用し、documentSchema<T>() の型引数 (T の部分) の AST 解析によって rules の文字列が自動生成できるようになったため、documentSchema() の引数が不要になりました スキーマレスな Firestore では、その気になれば一般ユーザーが予期しない構造のデータをセットできてしまうので、セキュリティルールで書き込み時のスキーマ検証を設定する必要があります。しかし、セキュリティルールはモデル定義に合わせて手動で書かなければならないのでミスが起きやすく、そのために
![[TS] Firestoreを型安全にするライブラリ Fireschema を作った [rules自動生成/データ自動型付け] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8cf3558b4da54b1cd274becd99ebc603664c1d4e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVFMlNUQlMjBGaXJlc3RvcmUlRTMlODIlOTIlRTUlOUUlOEIlRTUlQUUlODklRTUlODUlQTglRTMlODElQUIlRTMlODElOTklRTMlODIlOEIlRTMlODMlQTklRTMlODIlQTQlRTMlODMlOTYlRTMlODMlQTklRTMlODMlQUElMjBGaXJlc2NoZW1hJTIwJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJTlGJTIwJTVCcnVsZXMlRTglODclQUElRTUlOEIlOTUlRTclOTQlOUYlRTYlODglOTAlMkYlRTMlODMlODclRTMlODMlQkMlRTMlODIlQkYlRTglODclQUElRTUlOEIlOTUlRTUlOUUlOEIlRTQlQkIlOTglRTMlODElOTElNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTJkY2FiZmY2YWZkMzYyNDE2NTZkNDkyN2Q4MzU1MjRh%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YXJuYWltbyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjE3YjY3NjI4MzZkMmI2NjI4ODNiZWU2ZGZjZWNkNGE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g6YGL5Za26ICF44Ku44Or44OJ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Ded0c23b82766541c6de120f430940d98)
フロントエンドから始めるアニメーション 最強のライブラリGSAP3を手に入れよう - ICS MEDIA
今日では、ほぼすべてのウェブサイトにアニメーションが使われていると言っても過言ではないでしょう。派手な3Dアニメーションから、UIのマイクロインタラクションまで、その物量や時間のスケールはさまざまです。 アニメーション技術もCSSやSVG、Canvasと多岐に渡り、こんな表現まで！？ と驚くようなものも増えました。 しかし、複雑なアニメーションになるほどコードは煩雑になり人間の手には負えなくなります。イメージはあるのに具現化できない！ そんな悔しい思いを抱えたまま諦めるしかないのでしょうか？ いえ、道具です。道具を使うのです。本記事ではイメージをダイレクトに表現する手段としてのアニメーションライブラリGSAP 3について紹介します。 本記事を読むことで、以下の知識が手に入ります ウェブにおけるアニメーションの重要性 アニメーションライブラリとは？ 強力なアニメーションライブラリGSAP 3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hadashiA/VContainer: The extra fast, minimum code size, GC-free DI (Dependency Injection) library running on Unity Game Engine.
GitHub - google/safevalues
GitHub - google/intermock: Mocking library to create mock objects with fake data for TypeScript interfaces
【Unity】DOTweenの教科書〜スクリプトでアニメーションを操るバイブル〜
