CSSで色変更もできるSVGアイコンを使うための3ステップ
こんにちは。みみほくろです。 Webデザインでアイコンをつけたいとき、何を使いますか？ 画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。 SVGとは SVGはWebに適したベクターファイル形式の画像フォーマットの一つで、拡大縮小してもPNG画像やGIF画像のように解像度を損なうことがないという大きなメリットを持ちます。 また、図形をテキストで情報を保持しているため、ファイルサイズが小さく、テキストとしてSEO的にも効果があることもメリットの一つです。 ただ、写真のような複雑な画像には適していないので、アイコンのようなシンプルな画像に使うことが主な使用用途になります。 SVGの中身を見ると、簡単な図形であっても一見複雑なためにかなり取っつきにくく感じると思います。が、基本的に内容を大きく変えることはないので、画像自体の
Amazon Corretto の Shenandoah GC のジェネレーショナルモード プレビューリリースのお知らせ | Amazon Web Services
Amazon Web Services ブログ Amazon Corretto の Shenandoah GC のジェネレーショナルモード プレビューリリースのお知らせ （この記事は、2021/11/30 に公開された “ Announcing preview release for the generational mode to the Shenandoah GC ” を翻訳したものです。） Amazon Corretto チームは、 Shenandoah GC のジェネレーショナルモードを発表できることを嬉しく思います。これは、従来のシングルジェネレーションの Shenandoah にジェネレーショナルモードを追加するという GC への重要な貢献を、 Red Hat と協力して行った結果です。 Java の主な利点の 1 つは、 Java 仮想マシン ( JVM ) がメモリ管理を自
2回目のTechBlog投稿になります。桐山です。 外は寒くなってきたのに、部屋の日当たりが良すぎて部屋が暑いのが最近の悩みです。 iOS 14の目玉機能と言っても過言ではないWidget機能をFammでもリリースしたので、リリースまでの話とそれからの話をしてみようと思います。 リリースしたもの 思い出クイズ Small Medium Large いつの写真？ アップロードされている写真の中からランダムに1枚を表示 タップすると写真をフルスクリーンで表示 写真の切り替えはiOSのタイミングに依存 実際どれくらい使われているの？ Widgetをホーム画面に設置したユーザーの割合は、WidgetをリリースしてからのアクティブUUで計算すると約4.5%となっています。 また、圧倒的にSmallサイズの設置が多いです。 なぜ「いつの写真？」なのか Widget機能に興味があるメンバーで、 無料ユー
note・グッドパッチ・STUDIO・オープンエイトの開発事例に学ぶSPA/PWA活用と最新トレンド - TECH PLAY Magazine
トレンドの移り変わりが激しいフロントエンドのトレンドや、気になるスタートアップの開発事例が知りたい！ということで、今回はnote、グッドパッチ、STUDIO、オープンエイト4社のフロントエンドエンジニアに、アーキテクチャ、技術スタック、フレームワーク、技術的チャレンジなどについて語っていただくイベントを開催。その模様をお伝えする。 ■登壇者プロフィール note株式会社 山形 孝造氏 受託開発会社、フリーランスを経てフロントエンドエンジニアとして2020年3月にnoteへ入社。コーヒーを自宅で焙煎したり、農園に行ったりするくらいに大好き。 株式会社グッドパッチ エンジニア 古家 佳武氏 Androidエンジニアとして2016年にグッドパッチ入社。自社サービスのアプリ開発を経て、2019年よりStrapのフロントエンドを中心に担当中。 STUDIO株式会社 CPO / Founder 甲斐
fontforgeでotfからttfに変換する
fontforgeとは #見出しにジャンプ FontForgeは、Windows、Mac OS X、およびGNU + Linux向けの無料の（ライブラリ）GUIを持ったフォントエディタです。 OpenType、TrueType、UFO、CID-keyed、Multiple Master、およびその他の多くのフォーマットでフォントを作成、編集、変換するために使用します。 今回はOpenTypeフォントであるNoto Sans JPをTrueTypeに変換する目的で、WSLのCLIから使用します。 fontforgeのインストール #見出しにジャンプ apt install fontforge だとめちゃめちゃ古い(6年前？)のでソースからコンパイルします fontforgeのビルド #見出しにジャンプ ここの通りです fontforge/INSTALL.md at master · font
こんなものを作りました Qiita、Kibela、はてなブログで書く記事のなかに数式を埋め込みたいという時があります。 例えばQiita記事の中に数式をおりこんで記事をかいたとして、Kiberaでも同じ内容や数式を使って記事を書きたい。 そう思いたった時、それぞれのサービスに合わせたフォーマットで数式を書き直す必要があります。 QiitaにはQiitaの数式の書き方があるし、、KibelaにはKibelaの書き方がある。。。（なんて面倒なの・・・） そういった面倒な作業をなくすための数式変換ツールを作成したので、ぜひ使っていただけたらと思います。 ▽github.ioで公開しています▽（※スマホでは崩れます。） https://hikariyamasaki.github.io/markdown_Formula/ ▽GitHubレポジトリはこちら▽ https://github.com/hi
【JavaScript】簡易テキストファイル書き換えスクリプト - Little Strange Software
→ どうも！LSSです！！ 今回は、使いどころのよく分からないツールを作ってみましたｗ 使い方 例えば… コード あとがき 使い方 テキストファイルの中の特定の文字を、違う文字に変換するツールです。 まず「変換元の文字列」「変換後の文字列」を入力します。 次に、「ファイルを選択」ボタンを押し、お手元の端末内にある対象のテキストファイル（HTMLファイルやSVGファイルやCSVファイルも選択可能です）を選ぶと、即座にそのテキストファイル内に「変換元の文字列」と同じものがあったら全て「変換後の文字列」の内容に書き換えられます！ なお、出力後のファイル名は、元のファイル名の末尾に「_r」が付与された物になります。 例えば… 「変換元の文字列」を「です。」 「変換後の文字列」を「でやんす。」 にして、ですます調で書かれた文章のテキストファイルを読み込むと…なんだか愉快な文章のテキストファイルが出来
マークダウンで簡単にサイト作成 - Docusaurusの使い方 | ウェブ制作 | 雑多制作 - Web/動画/紙媒体などの制作所
はじめに マークダウンファイルからサイトを生成する静的サイトジェネレータのDocusaurusの基本的な使い方をご紹介します。 Docusaurusは、情報量の多いマニュアルサイトの作成する際に重宝するツールです。 Docusaurusとは 概要 Docusaurus（ドキュザラス）は、Facebookが開発しているドキュメントサイト作成ツールで、Facebook社のオープンソースソフトウェアのプロジェクトのためのツールとして開発されました。 そのため、現在もDocusaurusはオープンソースプロジェクトのサイトを構築、維持するためのツールとして開発されています。 Docusaurusは、v1とv2があります。 v2はまだβ版ですが、新たにDocusaurusを使う方はv2の利用が推奨されています。 本記事でもv2の使い方を説明します。 なお、既にv1を利用している方向けには移行ガイドも
画像をレンダリングして違いを見極める GitHub では、一般的な画像形式のいくつか (PNG、JPG、GIF、PSD、SVG など) を表示できます。 単に表示するだけではなく、画像を異なるバージョン間で比較する方法もいくつかあります。 注: GitHub では、PSD ファイル間の相違点の比較はサポートされていません。 Firefox ブラウザーを使用している場合、GitHub では SVG がレンダリングされない可能性があります。 イメージを表示する GitHub では、リポジトリ内のイメージを直接参照および表示できます。 SVG では現在、インラインスクリプトやアニメーションはサポートされていません。 差異を見る 見開き (2-Up)、スワイプ、オニオン スキンの 3 つの異なるモードで画像を視覚的に比較できます。 見開き(2-Up) 見開き (2-Up) は既定のモードであり、一
ダイヤ可視化ツール技術編 - エムスリーテックブログ
エムスリーの山本です。趣味で作っていたダイヤ可視化ツールの技術的な側面の話をします。 作ったもの ダイヤ可視化ツールです。時刻表ではありません。鉄道路線を比較するにあたって、本数の多寡や速達列車の比率とか本数の減り方とかが一発で分かるように可視化するものです。何のために必要かというと、鉄オタがダイヤ知見を深めるのに使います。つまりそういうやつです。 たとえばこれは小田急の昼頃の1時間に運行されている列車なんですが、 基本は20分間隔ダイヤ 主要な駅は10分間隔で有効な列車が来るように調整されている 本線は3-6-6-6で優等列車の比率が高い(長距離利用客が多そう) 千代田線の直通はあまりやる気がなさそう などが分かります。実際、新宿駅の利用者数の次に多い駅は町田駅だったりして、相当に長距離の利用者が多いのが特徴の路線です。 また、鉄オタならみんな架空鉄とか想像するのに使ったりするだろうとお
SVGファイルをカスタムSF Symbolsに変換してくれるMac用ユーティリティ「Custom Symbols」がリリース。
SVGファイルをカスタムSF Symbolsに変換してくれるMac用ユーティリティ「Custom Symbols」がリリースされています。詳細は以下から。 Appleが公開している「SF Symbols」はSan Francisco(SF)フォントから派生したベクターシンボルで、macOS 11 Big Sur/iOS 14のシステムシンボルに利用しているだけでなく、サードパーティ製macOS/iOSアプリの開発者も利用することができますが、開発者がデザインしたSVGファイルのシンボルをカスタムSF Symbolsに変換してくれるユーティリティ「Custom Symbols」が新たにリリースされています iOS & MacOS devs: My first developer tool is live! It's an app for converting any SVG art into
PowerPoint プレゼンテーション
© 2021 TIS Inc. オープンソースカンファレンス2021 Online/Spring Part1. 社外秘の情報のドキュメント管理どうしてますか？ Part2. 運用レコメンドPFについての紹介 IT基盤技術事業部 IT基盤エンジニアリング企画室 小針・小川 全体アジェンダ 1. 社外秘の情報のドキュメント管理どうしてますか？ • 30分程度 2. 運用レコメンドプラットフォームについての紹介 • 10分程度 3. 質疑応答 2 発表者の紹介 • TIS株式会社 • IT基盤技術事業部 • IT基盤エンジニアリング企画室 • 主な業務内容 • 「運用レコメンドプラットフォーム」というサービスの開発・運用 • 今日話す人（自己紹介は後ほど個別に） • 小針 千春（今話している人） • 小川 真人（あとで話す人） 3 社外秘の情報のドキュメント 管理どうしてますか？ オフラインでも
2020.4.25 イラレからSVGで書き出す設定 - パーツ別に書き出す方法 SVG（拡張子svg）は容量が軽く、拡大しても劣化することがないファイル形式です。 Adobe Illustratorのアートボード全体をSVG化したり、個別にパーツ単位でSVGで書き出す方法について書きます。 アートボード全体をSVG形式で書き出す アートボードをSVG形式で書き出すには、メニューバーの「ファイル」 → 「書き出し」 → 「書き出し形式」を選びます。 書き出しのパネルのファイル形式で「SVG（svg）」を選択。 「アートボードごとに作成」にチェックを入れます。 「書き出し」をクリックするとSVGオプションが表示されます。 OKをクリックでSVGファイルが書き出されます。 アウトライン化されていないフォントがある場合 書き出したSVGファイルの文字は、ブラウザのデフォルトフォントで表示されてしま
Apple Siliconにネイティブ対応したChrome 87やFirefox 84は、Rosetta 2で実行していた前バージョンと比較してJavaScriptやWebアプリの実行が最大2倍速く。
Rosetta 2で対応していたブラウザChrome 86, Firefox 83とApple Siliconにネイティブ対応したSafari 14, Chrome 87, Firefox 84をベンチマークで比較してみました。詳細は以下から。 Mozillaは現地時間2020年12月15日、Universal 2 BinaryでApple Siliconにネイティブ対応したWebブラウザ「Firefox 83」をリリースしましたが、そのリリースノートに「Firefox 83は(前バージョンと比較して)、2.5倍速く起動し、Webアプリのレスポンスも2倍になっている」という記述があったので、Browserbench.orgのベンチマークを利用して比較してみました。 Native support for macOS devices built with Apple Silicon CPUs
'; collapsItems['collapsArch-2024-2:2'] = ' 米国国債の利回り変化と国債価格の値動きを調べてみた'; collapsItems['collapsArch-2023-12:2'] = ' DeepLによるHTML翻訳でタグが正しく取り扱われるか？'; collapsItems['collapsArch-2023-11:2'] = ' 骨抜き加速？ 電子取引データ保存制度'; collapsItems['collapsArch-2023-10:2'] = ' Wordでマニュアルを執筆してWebマニュアルを作る 10月24日16時より電子取引データ保存についてのウェビナーを開催します。'; collapsItems['collapsArch-2023-9:2'] = ' 日本に残っている「紙と電子の間」のベルリンの壁を壊せ [XSL-FO試行錯誤]索引
はじめに Vercelからエッジで動的にOG画像を生成できる@vercel/ogが発表されました。 早速触ってみたいと思います。 @vercel/ogとは Vercel Edge Functionsを使用して動的にOG画像を生成してくれます。 OG画像はHTMLとCSS（というかJSX）を使用して定義することができるので、特にReactエンジニアは非常に簡単にOG画像を定義できます。すごい。 コアエンジンにはSatoriというHTMLとCSSをSVGに変換するライブラリが使われています。 環境 @vercel/og: 0.0.15 Vercel Edge Functions next: ^12.2.3 触ってみた 実装は非常に簡単でAPI Routesにruntime: 'experimental-edge'のエンドポイントを作成するだけでOKです。 import { ImageRespo
フォントのトラブルシューティング
Photoshop ユーザーガイド Photoshop の概要 夢をカタチに Photoshop の新機能 初めての写真編集 ドキュメントの作成 Photoshop | よくある質問 Photoshop の必要システム構成 Photoshop とは Photoshop とその他の Adobe 製品およびサービス Photoshop で Illustrator アートワークを作業する InDesign での Photoshop ファイルの操作 Photoshop 用 Substance 3D マテリアル Photoshop の Capture アプリ内拡張機能の使用 Photoshop iPad 版（中国本土ではご利用いただけません） Photoshop iPad 版 | よくある質問 ワークスペースについて システム要件 | Photoshop iPad 版 ドキュメントの作成、表示、書き
v5で変更された内容
v5.3.0 以前のアルファ版v5.3.0から移行する場合は、このセクションに加えて、その変更点を確認してください。 Helpers カラーリンクに再び！!importantが追加され、新しく追加されたリンクユーティリティとの相性が良くなりました。 Utilities 新しい.d-inline-griddisplayユーティリティが追加されました。 v5.3.0-alpha2 v5.3.0のアルファ版から移行される方は、以下の変更点をご確認ください。 CSS variables 重複したり、使用されていないルートCSS変数を削除しました。 Color modes ダークモードの色は、特定の色合いや色合い(例えば、$blue-300)ではなく、Sassのテーマの色(例えば、$primary)から派生するようになりました。したがって、基本テーマの色をカスタマイズする時、より自動化されたダークモ
フロントエンドエンジニアの嶌田です。 アイコンは、UIデザインにおいて欠かせないパーツです。弊社が提供する不動産情報サイトであるLIFULL HOME'Sでも、多数のアイコンが使われています。 ウェブページにアイコンを埋め込む手段は無数にあります。あなたはいくつ言えますか？ それぞれのメリットとデメリットについて説明できるでしょうか？ この記事では、LIFULL HOME'Sのフロントエンドで選ばれているアイコン表示方法およびその理由を説明します。その後、アイコンの管理や実装にまつわる不便な点をサービス横断的に解消するために作られた社内ツールと配信システムである、LIFULL Icon CDNを紹介したいと思います。 私たちのアイコン実装方法 無数にあるアイコン実装方法のうち、私たちが選んだ実装方法は極めてシンプルです。 <img src="assets/icon-star.svg" wi
こんにちは。エンジニアのJackieです。 最近Webでよく見られるSVGのアニメーションが簡単に作れるライブラリー「Vivus.js」を紹介したいと思います。 Vivus.jsは簡単にSVG要素をアニメーション化できる軽量のJavaScriptライブラリーです。SVG画像のパスを、一つひとつの線が描いているようなアニメーションが作れるので、手書きな筆記体や複雑なラインアート・線画アニメーションには適していて、かなり手間を減らしてタイトなスケジュールがあった場合には役立ちます。 では手順を確認しましょう。 SVGを用意する。 アニメーションさせたいSVGを用意しましょう。SVG自体はいくつかの条件があります： 要素がStroke属性があることです。Fill属性は使わないです。 例：fill: "none"; stroke: "#FFF";隠れているパス要素、見えない要素をSVGに入っていな
本記事はnote.comにて公開された記事の転載です。内容が開発者向けということもあり、Zennのほうにも投稿してみます。 Figmaはデザイナー向けのUIデザインツールのように思われがちですが、Figmaを使ったプレゼンテーションスライドの作成や、デジタルホワイトボードツールのFigJamを活用したアイデア出しやプランニングなど幅広い用途があります。そして2月1日から正式版となったDev Mode（開発モード）は、デザインデータやその仕様を元にプロダクトを構築するための機能が備わっています。 Dev Modeは主にはコードを書く開発者にとって便利な機能があります。コード生成や、デザインの差分比較、アノテーションによるデザイン仕様の把握、Dev Mode用のプラグインや、VS Code拡張機能などが主な機能です。あまりそれらを使いこなせている実感がある人はまだ多くないようですが、焦る必要は
2023年4月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 この画像は、Stable Diffusionの woolitize というモデルを使用して生成しました。最近はAI関連の話題がとても増えていますね。 コーディング Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！ ChromeやEdgeでCSSのネスト（入れ子）が利用できるようになりました。 SassがなくてもSassのような開発ができるようになるのは良いですね。 CSS Nesting | Can I use… Support tables for HTML5, CSS3, etc CSSのネストがついにブラウザで使用できるようになった！ 基礎知識、便利な使い方を詳しく解説 ユーザー操作
アルプでのScala 3移行
class: center, middle # アルプでの<br/>Scala 3 移行 <https://alp.connpass.com/event/239935/> Scalaを使ったSaaSプロダクト開発の<br/>裏側お見せします！ 2022/3/4 --- class: middle <img src="image/xuwei.gif" alt="icon" style="zoom: 0.3" /> - twitter [@xuwei_k](https://twitter.com/xuwei_k) - github [@xuwei-k](https://github.com/xuwei-k) - blog <https://xuwei-k.hatenablog.com> --- class: middle ## 近況 - 相変わらず某社でScala書く仕事してます - もう3年
STUDIOとは 「コードを書かずに、Webサイト制作を完結」 できるという国産デザインツール。 「デザインの後のコーディング作業や、サーバーのセットアップは必要ありません。」 「STUDIOでデザインした画面は、瞬時にコードに変換されそのまま公開が可能です。」 という素晴らしさ！！ そして弊社no plan inc.の案件でもよく使うようになりとても便利に使わせてもらっていました。(no plan株式会社の技術スペック） 今回は おかむー個人のポートフォリオサイトをSTUDIOに変更することにしました。 STUDIOを使う前 そういえばSTUDIOを使う前は、HTMLを生成してホスティングしていました。 フロント という、よく見る構成ｗ そろそろ別の技術使いたいなーとも思っていましたが、 ポートフォリオサイトに多くの時間をかけるのももったいないないなぁとも STUDIOを使う前で大変だっ
@spring_raining が @potato4d に GW 中に開発した LIFF プラグインの概要と、開発してみて感じたことを聞いてみました。 LINE Front-End Framework https://developers.line.biz/ja/docs/liff/overview/ LINE App 内で Super App として Web アプリケーションを動かすための仕組み LIFF は 2 つの仕組みが連携して動作している LINE App 本体に含まれる LIFF の表示基盤 JavaScript ベースの LIFF SDK LIFF Plugin 4 月に出たばかりの新機能 4/18 の LIFF v2.19.1 から LIFF Plugin システムが LIFF SDK に実装 https://developers.line.biz/ja/news/2022
囲み枠だけじゃもったいない！はてなブログのボックスメニューを作ろう はてなブログの人ってボックスメニュー作らないんですか？ そう言えば見かけないね。このブログにもないし。 はは、このブログはカテゴリー1つしかないから作ってもしょうがないよね。 でも、カテゴリーいっぱいある人にとっては、ボックスメニューっておしゃれで人目につくから、是非作ってみてね。 ちなみに、ぼく達の飼い主の【ポジティぶろぐ】さんのブログでは、このボックスメニューを取り入れているので是非見てみてね。 スマホ版を見るとよりステキですよ。 スポンサーリンク ボックスメニューの必要性 今回作るボックスメニューはこれ！ ボックスメニューの作り方 ボックスメニューの作り方①デザインCSSにCSSを書き込む ボックスメニューの作り方②サイドバーにhtmlを書き込む 画像を取り込む場合（１番上のやり方で作る場合） FontAwesome
[WIP] きのこ本を勝手に電子書籍(epub)化 はじめに いわゆる「きのこ本」とよばれる書籍があります。「プログラマが知るべき97のこと」とかのシリーズものです。 これらの書籍は CC-by-3.0 などでライセンスされているため、著作者名を明記することで、自由に使用することができます（改変もＯＫ。商用もＯＫ） そこで、きのこ本を勝手に電子書籍(epub)化してみました。紙の書籍は持っていますが、電子書籍は持ち運びが便利ですよね。 その際の作業メモとか思ったことなどを残しておきます。主に「プログラマが知るべき97のこと」での作業がメインです、それ以外の書籍についても含まれているかも。 後で追記するかも。 データの入力 書籍の各コラムは自由に使えるのですが、紙の書籍のデータを電子データにしないと電子書籍にできないのでデータの入力が必要です。 といっても、実は「きのこ本」の非公式データは、
![[WIP] きのこ本を勝手に電子書籍(epub)化 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9190f74d58470f2359c001dcc026b00de6f4fca1/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV0lQJTVEJTIwJUUzJTgxJThEJUUzJTgxJUFFJUUzJTgxJTkzJUU2JTlDJUFDJUUzJTgyJTkyJUU1JThCJTlEJUU2JTg5JThCJUUzJTgxJUFCJUU5JTlCJUJCJUU1JUFEJTkwJUU2JTlCJUI4JUU3JUIxJThEJTI4ZXB1YiUyOSVFNSU4QyU5NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZjY4MDcyZmY0ZDg5YTQ3ZjBkYWUyZTBjMDRmZTUzNTA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5b3NoaTM4OTExMSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9Yjk1ZGNiOTE3ZDAzMTU5OGU5OWNmNDE0NDFmMjc0NjQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D486999e2b7f5e84a5811572192685324)
保存版: Web画像フォーマットを「正しく」扱う（4）Webのアニメーション（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Images done right: Web graphics, good to the last byte—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2019/10/07 著者: Polina Gurtovaya、Rita Klubochkina、Andy Barnov サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語タイトルは内容に即したものにしました。画像はすべて元記事からの引用です。記事が長いので4分割し、章立てを浅くしました。記事の表示が重くならないよう、原文と同様に画像にloading="lazy"を指定し
Photoshopで編集したドキュメントから、複数素材データを一括書き出しする方法をメモ。 DTPやWebページ制作時に各素材を書き出す必要があるが、数が多いと手作業で対応するのは、かなりしんどい。（変更・調整があればなおのこと） なお、Photoshopの一括書き出し機能は、用途に応じていくつか機能が用意されているので利用して楽になろう。 「書き出し形式」、「画像アセット」、「レイヤーカンプの書き出し」、「変数、データセット」 ■一括複数ファイル書き出し機能を比較・「書き出し形式」 ・場所：ファイル＞書き出し＞書き出し形式 ・対応画像形式：PNG, JPEG, GIF, SVG ・複数アートボードを一括で書き出す。 ・「画像アセット」 ・場所：ファイル＞生成＞画像アセット ・対応画像形式：PNG, JPEG, GIF, SVG ・アートボード、グループ、レイヤー単位で書き出す。 ※画像形
macでインフォマティクス
Spalnは、哺乳類サイズの真核生物ゲノム配列にタンパク質のクエリ配列をスプライスアライメントし、自己完結的にゲノムマッピングを行うための最も初期の実用的なツールである。しかし、その計算速度は、急速に増加するゲノムおよび転写産物配列データの解析には不十分である。 Spalnの動的計画計算は、(i)多重中間一方向Hirschberg法の導入、(ii)SIMDベースのベクトル化、の2つの方法で高速化された。新バージョンのSpaln3は、最新のSpalnバージョン2より約7倍高速で、遺伝子予測精度は常にMiniprotより高い。 インストール ubuntu22.04でビルドした。 git clone https://github.com/ogotoh/spaln.git cd spaln/src/ ./configure make -j8 make install > ./spaln No in
■2020/12/31追記 「続・Mohoから出力したSVGを制御したい妄想の話」ということで、続きを書きました。 ７記事あるけど。ワロス。 【SVG制御妄想１】SVG解析しないと始まらない https://qiita.com/flying_echidna/items/5a628db0d652d1558208 【SVG制御妄想２】Mohoから出力したSVGのマスクがバグる https://qiita.com/flying_echidna/items/3930caf04626deec7bfb 【SVG制御妄想３】連番データをどげんかせんと https://qiita.com/flying_echidna/items/ded3f3590c3d67fadb86 【SVG制御妄想４】変形させたいよなぁ？ https://qiita.com/flying_echidna/items/188634f3
週刊Railsウォッチ（20200526後編）Rubyでよくやるスレッドバグ、Kubernetesでよくあるミス10、CSS/SVG/Canvasの使い分けほか｜TechRacho by BPS株式会社
2020.05.26 週刊Railsウォッチ（20200526後編）Rubyでよくやるスレッドバグ、Kubernetesでよくあるミス10、CSS/SVG/Canvasの使い分けほか こんにちは、hachi8833です。先ほど以下のツイートを見つけました。 Ruby安定版保守についての講演（ @unakさん）とRubyアソシエーション開発助成の成果報告（@udzuraさん＆@aycabtaさん）を7/17(金)にZoomウェビナーでやります。事前に参加登録が必要なのでよろしくお願いします https://t.co/RyseFGvYES — Shugo Maeda (@shugomaeda) May 26, 2020 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっつ
MP3ファイルをダウンロード 内容紹介 tsukkee さんをゲストに、CSS Grid、Custom Properties、CSS Transitionなどについて語っていただいたエピソードです。 出演者 話したネタ 最近のフロントエンド開発ってどんな感じ？ なぜ、 transpile などの変換が必要なのか？ CSS Grid とは？ 何が良いのか？ もともと昔はどうやってレイアウトしていた？ Table から Float へ 阿部 寛のホームページ Flexbox とは XUL Grid と Flexbox の違いは？ HTML(意味) と CSS(スタイル) の分離って、実際の開発ではどう？ CSSで変数利用って、どう進化してきた？ Sass や SCSS Custom Properties Custom Properties のメリットとは？ Web Component との関連
この記事は Tech KAYAC Advent Calendar 2021 の21日目の記事です。 こんにちは！意匠部のおばらです。 今回は アドベントカレンダー14日目の記事 でご紹介した 「すき焼きの写真にすき焼きの3Dモデルなど任意のファイルをバイナリとして埋め込む方法」 の解説記事です。 【解説編】すき焼きの写真にすき焼きの3Dモデルを埋め込む方法 techblog.kayac.com 任意のファイルを ArrayBuffer として取得する fetch() を使う場合 See the Pen sukiyaki.lib.urlToArrayBuffer.jsm by Tohl SMALLFIELD (@tsmallfield) on CodePen. これだけ！便利な時代になりました。 XMLHttpRequest と overrideMimeType('text/plain; c
DOMMatrixReadOnly と DOMMatrix でできる操作を見ていきましょう。 DOMMatrixReadOnly／DOMMatrix 初期化 コード例は DOMMatrix で記述しますが、 DOMMatrixReadOnly でも同じように使えます。 // 単位行列 new DOMMatrix() // 2D 変形用の 2×3 行列: 6 要素の配列 [a, b, c, d, e, f] new DOMMatrix([1, 2, 3, 4, 5, 6]) // 3D 変形用の 4×4 行列: 16 要素の配列 [m11, m12, ..., m44] new DOMMatrix([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]) // CSS transform で有効な文字列 new DOMMatrix('m
ブラウザの内部にデータを保存する方法として、これまではCookieが使われてきましたがこれは主にサーバとのやり取りで利用する物。そこでJavaScriptから手軽に扱えるデータの保存領域としてHTML5ではWebStorageが登場しました。 今回はこのWebStorageの基本的な利用方法についてまとめます。 WebStorageとは 2種類の保存方法 保存時の制限 容量 名前空間 データ型 ブラウザ毎の制限 WebStorageの利用方法 データを保存する 文字列以外を保存する データを取得する データを削除する 全てのデータを削除する キーの一覧を取得する キーが存在するか確認する WebStorageが利用可能か判定する WebStorageカウンター サンプル ソースコード index.html app.js デベロッパーツールで確認する 参考ページ WebStorageとは 簡
![[HTML5] WebStorageにデータの保存や読み込みを行う - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/b246715e82698450cc35d3e361d22c8dc34b763d/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061405165%2F1701332328)
こんにちは、しょうみゆです。 今回はNuxt.jsとmicroCMSでJamstack構成のWebエンジニア向けポートフォリオを作成していこうと思います。 ポートフォリオはブログよりも考慮すべき点が少なくハードルが低いので、Jamstackに興味があってこれから始めたい方にも優しい内容となっております。 今回完成したものがこちらです。 APIを2つ使用してメインビジュアル、プロフィール、制作物を管理画面から管理できるようにしています。 https://confident-brattain-1276f1.netlify.app/ また、デザインはこのようにモノクロシンプルで作成していますので、慣れてきたらお好きな色やレイアウトに変更してみてください。 では、早速作成していきましょう！ microCMSの準備 サービスの作成 まずはmicroCMSでサービスを作成しましょう。 下記のように作成
おはようございます、なべやすです。 ブログやホームページに写真やイラストなどの画像を使うことは、サイト運営をしている人にとって一般的なことです。 その写真やイラストも、スマホやデジカメで撮ったものや画像サイトのものを、そのままブログやホームページに貼り付けて使えばいいかというと、それはちょっと違います。 加工や編集をしないまま画像を使うと、サイトのページが重くなるといったデメリットが発生することもめずらしくありません。 特に画像をたくさん使うサイトであれば、ページ読み込み速度も大きく低下してしまいますので、画像のサイズ変更や容量圧縮が必要です。 そのような際にオンライン画像編集ツール「I LOVE IMG」を使うと、画像の加工や編集が簡単にできます。 基本無料で利用できて、インストールも不要です。 当記事では、無料で簡単に使うことができるオンライン画像編集ツール「I LOVE IMG」をご
Lottie（公式サイト：https://airbnb.design/lottie/）とは、民泊マッチングサービスAirbnbが開発したアニメーションライブラリです。 Webサイトはもちろん、iOSやAndroidのアプリにも組み込むことができ、従来の方法よりも動作が軽く、簡単に実装することができます。 Lottieでどんなことができるのか、まずは下の作例をご覧ください。 【作例】 マウスオーバーでアイコンが動きます ↓ このように、マウスアクションなどに連動してアニメーションを再生することができます。 この記事では、Lottieの魅力と、実際に作例のメールアイコンを作成し、Webサイトに実装するまで一連の流れをご説明します。 Adobe After Effectの使い方については、詳しく画像付きで解説します。また、HTML・Javascriptは、サンプルコードを記載しています。 ぜひこ
マイクロ波を使ったワイヤレス（無線）の電力伝送で、金沢工業大が世界最高の電力変換効率を達成したと、天野浩・名古屋大教授が代表の研究チームが23日発表した。今後、名大が開発した従来の3倍程度の電力を流せるダイオードを使い、より大きな電力を送る基盤技術の確立をめざす。 天野教授によると、ワイヤレス電力伝送の技術によって、室内の機器やセンサーの電源コードや電池交換が不要になる。屋外でも機器に積むバッテリーを小型化できたり、ドローンに送電して上空からインフラを点検することが簡単になったりするという。 ただ、送る電力が大きくなると、受電側の効率が下がる課題があった。金沢工大の伊東健治教授らは、受電アンテナの形を変えてダイオードを直接接続することで、マイクロ波電力1ワットを送った時に92・8%の電力変換効率を達成した。これまでの電力変換効率は70%程度だったという。受電する装置は、32ミリ×11ミリの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOS 14 Widgetをリリースした話 #iOS14 - Tech Blog
Markdown表記での数式の変換ツール作ったのでぜひ使ってもらいたい - Qiita
非コード ファイルの操作 - GitHub Docs
イラレからSVG形式で書き出す設定とパーツ別に書き出す方法
W3C「日本語組版の処理要件」の最新版が8月11日に公開されました
エッジで動的にOG画像を生成できる@vercel/ogを触ってみた
UIアイコンの管理と実装をラクチンにする社内ツールとCDN - LIFULL Creators Blog
Vivus.jsで絵描き風のSVGアニメーションをする
Dev Mode活用の前に開発者が知っておきたいFigmaのこと10個+α
今!!流行りのSTUDIOでポートフォリオサイトをNoCodeで作り直してみた - Qiita
ep.121 『つくって学ぶ LIFF プラグインとエコシステム』 | UIT INSIDE
囲み枠だけじゃもったいない！はてなブログのボックスメニューを作ろう - るいのブログ
[WIP] きのこ本を勝手に電子書籍(epub)化 - Qiita
【Photoshop】複数素材データを一括書き出しする方法｜yugaki
Mohoから出力したSVGを制御したい妄想の話 - Qiita
72. 2022年のフロントエンド開発、特にCSS事情 w/ tsukkee | fukabori.fm
【解説編】すき焼きの写真にすき焼きの3Dモデルを埋め込む方法 - KAYAC engineers' blog
DOMMatrix: 2D / 3D 変形（アフィン変換）の行列を扱う DOM API - 株式会社カブク
[HTML5] WebStorageにデータの保存や読み込みを行う - ねこの足跡R
Nuxt×microCMS×Netlifyでポートフォリオを作ってみよう
【初心者でも安心】無料オンライン画像編集ツールI LOVE IMGの使い方 - なべやすブログ
Airbnbが開発したアニメーションライブラリ「Lottie(ロッティー)」の使い方と魅力を解説！
ワイヤレス電力伝送、実用化へ技術開発 天野教授が発表：朝日新聞デジタル