ChatGPTを使ってカラーパレットを生成、何故その色を選んだかの解説や、プレビューやアクセシビリティなどを確認も出来る・「HueHive」
スクロールに応じて3Dモデルを回転させる
Result 表題の通りで、3Dモデル（サンプルでは.glbファイル）を、スクロールに同期させて回転させる、というもの。 3Dモデルを動かすにあたり、ARでお馴染みのmodel-vieweを使用する以外はバニラなコードとなっています。 javascriptconst trackAnimationProgress = (animation, cb, precision = 5) => { let progress = 0; const updateValue = () => { if (animation && animation.currentTime) { let newProgress = animation.effect.getComputedTiming().progress * 1; if (animation.playState === "finished") newProgr
スクロールと動画を同期させるJavaScriptライブラリ・「ScrollyVideo.js」
ScrollyVideo.jsはスクロールと動画を同期させるJavaScriptライブラリです。スクロールすると動画が再生する、ではなくて、スクロールに応じて動画が進む感じです。 このライブラリは、特別なビデオエンコーディング形式を使用せずに、スクロールに応じた動画再生のUX作成を提供する、というものになります。 使い方もすごく簡単です。以下のように任意の要素を用意します。 <div id="scrolly-video"></div>あとは、ライブラリを読み込んで上記要素を指定し、使いたい動画ファイルを設定するだけです。 <script src="https://cdn.jsdelivr.net/npm/scrolly-video@latest/dist/scrolly-video.js"></script> <script type="text/javascript"> new Scro
任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」
CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。 大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality
CSSだけで開閉するツリー
Result 以前「CSSでフォルダツリーを作る」を書きましたが今回は開閉するタイプです。 お察しの通りですがdetailsタグで実装されています。 css.tree { --spacing: 1.5rem; --radius: 10px; } .tree li { display: block; position: relative; padding-left: calc(2 * var(--spacing) - var(--radius) - 2px); } .tree ul { margin-left: calc(var(--radius) - var(--spacing)); padding-left: 0; } .tree ul li { border-left: 2px solid #ddd; } .tree ul li:last-child { border-color: t
チームで利用可能の、モダンなUIで見やすく使いやすいオープンソースのプロトタイピングツール・「Penpot」
Penpotはチームで使えるモダンなUIで見やすく使いやすいオープンソースのプロトタイピングツールです。ブラウザベース且つウェブ標準のSVGを採用し、クロスプラットフォームでの動作に配慮されています。 モダンで見やすく使いやすいUIとなっており、直感的な操作でプロトタイプの作成が可能となっています。 インタラクションの作成も可能なので動作をチームに提案したりクライアントに確認して貰う事も出来ます。 更に、任意の場所にコメントを配置するなどフィードバックしやすい環境にもなっており、チームでの作業を円滑化する事が可能です。 Penpotは現在ベータ版であり、MPL-2.0ライセンスの元、OSSとしてソースコードも公開されていますが、完成度はかなり高い印象でした。 ブラウザベースなのでWeb上で動作サンプルを触る事も可能なので是非チェックしてみてください。今後の成長にも期待しています。 Penp
Gutenberg指向のWebサイトを作成するためのモダンなWordPressテーマ開発スターターキット・「Theme Redone」
Theme RedoneはGutenberg指向のWebサイトを作成するためのモダンなWordPressテーマ開発スターターキットです。フレームワークに近いかもしれません。 テンプレートエンジンとしてLatteが採用されており、MVC指向のコードのために必要なすべてが揃えられてるそうで、独自のGutenbergブロック作成ソリューションとCLIが用意されています。 個人的にGutenbergは使い慣れれば便利なんですがとにかく顧客に不評で受け入れられないケースが多いので未だにClassic Editorを導入せざるを得ない現状です。本スターターキットで少し改善できると良いですね。 Theme RedoneGithub
非推奨のmarqueeタグのような動作をモダンなCSSで再現
Result ジオシティーズ時代のWebサイトの象徴のような存在だったmarqueeタグは現在は非推奨ですが、そもそも使い方の問題という印象ではあります。 そこでモダンなCSSでレスポンシブにも対応した上で再現しよう、というブログ記事が気になったので備忘録。 上記デモではmarqueeの再現ではありますが、マウスホバーで停止する事も可能です。 css.marquee { --gap: 1rem; display: flex; overflow: hidden; user-select: none; gap: var(--gap); } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%; gap: var(--gap); } @keyframes
URLの差し替えでも代替可能なプライバシーフレンドリーなオープンソースのGoogleフォント代替・「Fonts」
FontsはプライバシーフレンドリーなオープンソースのGoogleフォント代替です。互換性があり、以下のようにするだけで置き換える事が出来るそうです。 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">👆これを以下のように <link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin> <link href="https:/
webpにも対応の、自動で背景を透過処理するAI搭載の背景削除ツール・「Erase.bg」
Erase.bgはwebpにも対応の、自動で背景を透過処理する背景削除ツールです。過去に何度かご紹介したツールとほぼ同等のものになります。 背景削除は自動で行われる為、何を対象に残すかは制御できませんが、精度はかなり高い方だと思いました。また、Webpにも対応しているのは少し珍しい気がします。 利用に関しては完全無料、ユーザー登録は一切不要、サイズは5,000 x 5,000pxまで、枚数制限は記載ありませんでした。有償プラン等のビジネスモデルはまだ不明ですがその辺はAPIを検討しているみたいです。 Erase.bg
タッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリ・「Atropos」
Atroposはタッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリです。 PCではマウスホバーで、タッチデバイスではドラッグで動かす事が出来ます。非依存で軽量なので手軽に導入する事が出来ます。 <link rel="stylesheet" href="atropos.css" /> <script src="atropos.min.js"></script> <script> const myAtropos = Atropos({ el: '.foo', }); </script>HTMLで必要なコンテナを作り画像を挿入します。 <div class="atropos my-atropos"> <!-- scale container (required) --> <div class="atropos-scale"> <!-- rotate containe
GUIも備わったモーショングラフィックスの為のアニメーションJavaScriptライブラリ・「Theatre.js」
Theatre.jsはモーショングラフィックスの為のアニメーションJavaScriptライブラリです。GUIのエディターも備わってるそうです。 実際にビジュアルで動きを見ながら直感的な操作でアニメーションを作成する事が可能、というもので高度なアニメーションも作れるので意味やニュアンスを的確に伝える事が出来ます。 Three.jsと併用する事で3Dにも対応可能です。人と人とのコミュニケーションもノンバーバルコミュニケーション(非言語)のほうが重要性が高いと言われています。 Webに関してはより細かな意図を伝えるために、複雑なアニメーションを使うのも有効な手段の一つだと思います。ライセンスはApache-2.0です。 Theatre.js
画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプト・「tobii」
tobiiは画像でもiframでも対応できるシンプルで使いやすく汎用的な非依存のlightboxスクリプトです。 任意のHTML要素や画像だけでなく、YoutubeやVimeoなどの動画や任意のWebページなども可能で、グループ化も出来ます。グループ化した際はスワイプにも対応しています。 以下動作サンプルを作りました。 一応貼りますけど、動かないみたい？なのでお手数ですがCodepenで直接ご確認下さい。 設定も非常にシンプルです。 <script src="tobii.min.js"></script>スクリプトを読み込んで const tobii = new Tobii()初期化。あとはマークアップでセッティングします。 <a href="https://www.youtube.com/embed/Yds5jgqmYpE?autoplay=1" data-type="iframe" c
TrelloやAsanaなどの代替となるオープンソースのカンバンツール・「Focalboard」
FocalboardはTrelloやAsanaなどの代替となるオープンソースのカンバンツールです。Goで書かれています。 Slack代替のオープンソースソフトウェアであるMattermostを提供するMattermost社が開発、公開しています。 ボードを作成してタスクを追加、カードを編集したりD&Dで動かしたり、といったように基本的には他のカンバンツールと同様の仕様のようです。カードの編集もTrello同様にMarkdown記法がサポートされています。他言語化もされており、日本語ファイルも確認出来ました。カンバンツールを触ったことがある方なら操作に迷う事はあまりなさそうです。UIもすっきりしていて見やすいですね。 ライセンスに関してですが、OSSではあるんですが、ちょっとよく読む必要がありそうでした。こちらでご確認下さい。 Focalboard
プライバシーと安全性に配慮したオープンソースのアクセス解析ツール・「Offen」
Offenはプライバシーと安全性に配慮したオープンソースのアクセス解析ツールです。Go製で軽量、他言語対応しており、GDPRガイドラインに準拠しています。 データ収集はオプトイン方式で同意した場合のみデータ収集が行われます。IP、User-Agent等は収集されず、収集されたデータも暗号化される、完全オープンソースとしてソースコードを全て公開するなどユーザーのプライバシーやサービスとしての安全性を重視した仕様となっています。 GAを使い続けていると同意者のみのデータに意味を見出せない方も多いとは思いますが、Offenの考えはそれ以上にビッグテックによる個人情報の扱いに思うところがあって開発に至った様です。Aboutに開発者の想いが綴られているのでご興味のある方はご覧になってみてください。 以前ご紹介したPlausibleやumami同様、GA代替として良い選択肢の一つとなりそうですね。ライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザで編集と表示が出来るオープンソースのシンプルなマインドマップツール・「Remind」
任意のWebサイトで画像が最適化されているかを調べるCloudflare製のチェックツール・「Image Optimization Test」
アニメーションするグラデーションメッシュを作成、コードを発行してくれるジェネレーター・「whatamesh」
任意の画像で様々な種類のCSS製フィルターを確認、気に入ったフィルターをクリックするとCSSコードをコピーできるWebアプリ・「FilterSS」
任意の画像にCSSとSVGによるフィルターをプレビューを見ながら作成できる・「CSS Filters Generator」
