Resource - Archives

インタラクティブにアニメーションする背景を作成できるWebアプリ・「Naker.Back」

Naker.Back Naker.Backはインタラクティブにアニメーションする背景を作成できるWebアプリです。 たまに見かけるやつですね。もともと動いてるけどマウスを乗せると動きに応じてパララックスな演出をする、みたいなのと...

任意のWebページの表示や内容を1つのファイルで魚拓ライクに保存するOSSのブラウザ拡張・「SingleFileZ」

SingleFileZ SingleFileZは任意のWebページの表示やコンテンツを1つのファイルだけで保存する魚拓ライクなChromeエクステンションです。当ブログでもテストしましたが日本語でも問題なく、完璧に保存できました。 ...

CSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリ・「Scene.js」

Scene.js Scene.jsはCSSとJavaScriptによるタイムラインベースの高度なアニメーションコンテンツを実装するライブラリです CSSとJSの両方をサポート、SVGサポート、時間の制御、タイムラインベースで複数...
Ads

CSSによるアニメーションエフェクトの動作確認しながらコードをコピーできる・「CSS Animo」

CSS Animo CSS AnimoはCSSによるアニメーションエフェクトの動作確認しながらコードをコピーできるWebサイトです コードはクリックのみでクリップボードにコピーされるので気に入ったエフェクトをコピペするだけで使え...

アスキーアートのラップトップを作って画像などを組み合わせて使えるCSS・「laptop.css」

laptop.css See the Pen RwbEorO by kachibito (@kachibito) on CodePen. laptop.cssはアスキーアートのラップトップを作って画像などを組み合わせて...

オートセーブ機能付きでMarkdownとプレーンテキストの両ペインでメモを取れるシンプルなOSSメモアプリ・「QuickJots」

QuickJots QuickJotsはオート保存機能が付いたシンプルなメモアプリです。Markdownとプレーンテキストの両ペインにそれぞれメモを残せます 左ペインはMarkdown、右ペインはプレーンテキストエリアで、記述と...

AIで生成された、現実に存在しない10万人の顔の画像を無料で配布する・「100,000 AI-Generated Faces」

100,000 AI-Generated Faces 100,000 AI-Generated Facesは現実に存在しない10万人の顔写真をAIで生成し、無料で配布するプロジェクトです。 写真素材(と言っていいか分かり...

シンプルなアンケートをBlockstackを使ったセキュアな環境で作成、管理できる・「SimpleForm」

SimpleForm SimpleFormはシンプルなアンケートを作成、共有して結果を管理できるWebアプリです。フォームは基本的にいくらでも作成できるようになっているみたい。 Blockstackを使っており、セキュア...

React.jsによるアプリケーション開発をサポートするコンポーネントのコレクション・「React Rainbow」

React Rainbow React RainbowはReact.jsによるアプリケーション開発用のコンポーネントのコレクションです レイアウトに関するコンポーネントは勿論、チャートやフォーム、アバター、マップやカレン...

LaTeXのコードを任意のキーワードで探せるLaTeXコード検索ツール・「LaTeX Search」

LaTeX Search LaTeX SearchはLaTeXのコードを任意のキーワードで検索できるLaTeXコード検索ツールです。 キーワードを入れるとそのキーワードを含むコードが即表示されるインスタント検索仕様となっています...

Can I Use?のようにHTMLメールのタグ対応状況を各メールサービスで調査できる・「Can I email…」

Can I email… Can I email…は、Can I Useライクな使い方が出来るHTMLメールタグ対応状況調査ツールです。 HTMLメールで使えるタグは各メールサービスによって制限があったりなかったりして一貫性が無...

指定したWebページ内にあるリンクやボタン等のデフォルト時、ホバー時、フォーカス時のアクセシビリティチェックをしてくれる・「Button Contrast Checker」

Button Contrast Checker Button Contrast Checkerは任意のWebサイトのURLを指定すると、そのページ内にあるリンクやボタンなどのデフォルトの状態、マウスホバー時、フォーカス状態におけるカラ...

プライバシーにフォーカスし、BlockstackとOpenStreetMapで作られたGoogleマップ代替・「Arcane Maps」

Arcane Maps Arcane Mapsはプライバシーの保護に焦点を当てたGoogle代替のマップサービスです。BlockstackとOpenStreetMapが使われており、地図に使った個人情報、場所、検索履歴、お気に入りの場...

CSSデバッグを少し手伝ってくれる小さなスクリプト・「debugCSS.js」

debugCSS.js debugCSS.jsはCSSのデバッグ作業を少しだけ手伝ってくれる小さなスクリプトです。サイズは非圧縮でも1kb、圧縮版は600バイトほどです。 何をしてくれるかは上サンプルの通り、要素にアウトラインを...

ブラウザでイラストを複数描いてGifアニメーションやmp4でダウンロードできるオープンソースのソフトウェア・「ANIMATE IT」

ANIMATE IT ANIMATE ITはブラウザでイラストを複数描いてGIFアニメやmp4の動画ファイルとしてダウンロードできるアニメーションドローツールです オープンソースとしてソースコードも公開されています。mp4には音...

React.jsによるアプリケーション開発の為のモジュール式UIコンポーネントライブラリ・「Chakra UI」

Chakra UI Chakra UIはReact.jsによるアプリケーション開発の為のUIコンポーネントライブラリです。モジュール式で必要なコンポーネントを必要な分だけ追加するタイプとなっています。 WAI-ARIAに準拠した...

Blockstackを使ったGithubやGitLab等の分散型代替アプリ・「GitHuman」

GitHuman GitHumanはBlockstackを使ったGithubやGitLab等の分散型代替ツールです。IPFSとIPLDを使ってgitリポジトリをホストするそうです。 リポジトリリンクは誰とでも可能で、Blocks...

プロジェクトが止まってしまっているSemantic UIからフォークされ、コミュニティによって開発が進められているUIフレームワーク・「Fomantic UI」

Fomantic UI Fomantic UIは、ある程度使用者が多いにもかかわらず、開発がほぼ止まってしまっているSemantic UIからフォークされて開発が進みだしたプロジェクトです。 プロジェクトサイトではコミュニティフ...

正規表現をクロスワード方式で遊びながら学べる・「Regex Cross­word」

Regex Cross­word Regex Cross­wordは正規表現をクロスワード方式で遊びながら学べるWebアプリです。最近目にしないけどゲーミフィケーションってやつでしょうか。 クロスワードといって日本でよく見る、文...

Blockstack上に構築された、手数料が0円のKickstarter代替サービス・「Crowdraise」

Crowdraise CrowdraiseはBlockstack上に構築されたKickstarter代替のクラウドファンディングサービスです。 いわゆるブロックチェーン技術を使ったセキュアなサービスを目指しているとの事。利用...

閲覧中のWebページの任意の要素のHTMLとCSSを選択してコードをjsfiddleのようなエディタで確認できるブラウザ拡張・「SnipCSS」

SnipCSS SnipCSSは閲覧しているWebページの任意の要素を選択すると、その要素に使われているHTMLとCSSを検出してjsfiddleのようなエディタで確認できるChromeエクステンションです。 ブラウザの...

実際に使用した風のUIを確認できるカラーパレットジェネレーター・「Muzli Colors」

Muzli Colors Muzli Colorsは実際に使用した風のUIを確認しながらカラーパレットを作成できるカラースキームジェネレーターです。写真をアップロードしてカラーパレットを自動生成する事も可能です。 以前ご...
Ads