ChatGPTとBardを同じプロンプトで同時に使用し、結果を比較できるChrome拡張・「Bard GPT」Bard GPTはOpenAIのChatGPTとGoogleのBardを同じプロンプトで同時に使用し、結果を比較できるChrome拡張です。ノーコードAIアプリ開発サービスのFramerを使って作ったみたいです。 以前ご紹介したchathubと同じタイプのもので、同様にAPI不要で各サービスにログインすれば利用可能、Chrome拡張として提供されています。
任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」 - かちびと.net
CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。 解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。 大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality
CSSだけで作られた500以上ものカスタマイズ可能なミニマルアイコン・「css.gg」 - かちびと.net
css.ggはCSSだけで出来た500以上のミニマルなアイコンを使えるCSSライブラリです スケーラブルでカスタマイズ性のある設計で非常に使いやすい印象です。個人的にはアイコンフォントよりも軽量で好みな感じ 勿論、利用シーンによって利便性は異なるでしょうからケースバイケースではあるんですが、選択肢の一つして検討したいレベルの出来栄えでした 使用例 使用例です。使い方も簡単で、CSSライブラリを読み込んで、指定されたclassを含んだDOMを用意するだけです CDNもCSSからJSON、XMLまで、jsdelivrとunpkgの両サイトで用意されていますがここではCSSを使う例をあげています <link href='https://cdn.jsdelivr.net/npm/css.gg/icons-compressed/icons.css' rel='stylesheet'> Font Aw
コントラストをベースに作れるOSSのカラージェネレーター・「Leonardo」 - かちびと.net
Leonardoは子トラストベースのカラージェネレーターです。設定したキーカラーを元にコントラストを調整する事でカラースキームを生成する、というもの コントラストで調整する事で当方のブログのようにアクセシビリティへの配慮を怠ったスタイルにならずに設計できそうです UIも分かりやすく、設定も即プレビューに反映されるので使いやすい印象でした。OSSとしても公開されているのでより使いやすいように再設計する事も可能です。ライセンスはApache-2.0です Leonardo
アニメーションする背景をCSSで簡単に作れる・「Animated CSS Background Generator」 - かちびと.net
Animated CSS Background Generatorはボケやレクタングルなどシンプルなオブジェクトがアニメーションする背景をCSSで簡単に作れるWebアプリです オブジェクトの数、サイズ、スピードやカラーを設定するだけで作成可能で、コードも発行してくれるのでWeb制作の知識が無い方でもコピペで使う事が出来ます こんな背景が作れます。JS不要なのは良いんですが、オブジェクトを増やし過ぎるとHTMLやCSSのソースが比例して増えるのでJSで作った方が良いケースもあるかもしれませんね とはいえCSS製を1から作るのは非常に面倒なので覚えておいて損はないかなぁと思います Animated CSS Background Generator
SVGやPNGで出来た5000以上のタータンチェックなパターン素材を配布する・「Tartanify.com」 - かちびと.net
Tartanify.comはSVGやPNGで出来た5000以上ものタータンチェックのパターン素材を配布するプロジェクトサイトです。右側にインデックスがあり、そこから各タータンのページに移動できます こちらで扱っているタータンチェックは本場のスコットランドで実際に登記簿に登録されているものを再現された本物のタータンチェックとなっています（基本的にはこのスコットランド・タータン登記所に登録されていない場合はタータンを名乗れません） 各タータンには登記簿に登録されているページにリンクされています。ライセンスに関してですが、この中には著作権の切れたものも存在してはいますが、念のためスコットランド・タータン登記所へのリンクを推奨しているそうです Tartanify.com
書いたテキストをmp3音声ファイルにしてダウンロードできる・「Verby」 - かちびと.net
Verbyは書いたテキストを音声ファイルに変換してダウンロードできるWebアプリです。タイトルそのままの機能で、テキストを書いて音声化し、内容を確認、問題なければファイル名を決めてDL出来る、というものになります。 DLにはユーザー登録が必要ですが、作成して視聴するだけなら不要です。 音声化⇒DL出来るサービスは以前からあります。先発サービスですとSound of Textがありますね。こちらとの違いは、Verbyは音声を女性と男性で選択できる、SSMLエディタが使える点でしょうか。代わりに選べる言語が少ない、作成制限がある等のデメリットもあります。 SSMLエディタ 上記サンプル例です。こちらもSSMLエディタを使用しています。SSMLはSpeech Synthesis Markup Languageの略で、特定のタグを使う事で任意のテキストを強調させたり早くしゃべらせたり、遅くしゃべら
軽量でカスタマイズ性重視の、カスタムプロパティを使ったモダンなCSSフレームワーク・「HiQ」
HiQは軽量でカスタマイズしやすいCSSフレームワークです。PostCSSで構築されており、カスタムプロパティを導入したモダン設計で管理もしやすい印象です。 カスタムプロパティをふんだんに使っており、直感的な変数名で設計されているので学習コストもかからずすぐに使いこなせそうです。勿論、既存のWebサイトへ追加した場合でも既存の変数とコンフリクトを起こさない様に接頭語も付与されています。 更に、カスタマイズしやすいようにテーマビルダーも用意されています。 テーマビルダー こちらもカスタムプロパティベースのビルダーとなっているので利用する前にどの変数がどういうコンポーネントを扱っているかもわかるようになっています。 カスタムプロパティに使い慣れている方なら使いやすそうな印象でした。少しEdgeでバグがあるみたいですがほとんど影響はないそうです。 FlexboxやCSSグリッドが普及した現在、肥
Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」 - かちびと.net
使ってみる 使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には楽に作れます。 プロパティがよくわからなくても大丈夫、選択肢を選べば即反映されますので実装したいとイメージしているレイアウトになる選択肢を選ぶだけです。勉強にもなるし、分かっている方でも楽じゃないかなぁと思います。 本アプリはOSSとしてソースコードが公開されています。ライセンスはMITとの事です。ただ、贅沢言えばもう少しググラビリティに配慮した名前にして欲しいです・・ FlexOn Github
Vue.jsベースのECサイト向けUIコンポーネントライブラリ・「Storefront UI」
Storefront UIはECサイトの為に開発されたVue.jsベースのUIコンポーネントライブラリです。デザイナーや開発者向けに設計されており、カスタマイズのしやすさも考慮されているそうで、デスクトップやモバイル、PWAに対応できるようになっているそうです。 アトミックデザインが適応されており、必要な時に必要な要素を組み合わせて設計する流れを想定しています。 ECサイト向けのUIコンポーネントが沢山 ECサイト用に構築されたのだから当たり前かもしれませんけど、ECサイトでよく使われるUIコンポーネントが沢山用意されており、これだけでも珍しい気がします。 例えばS、M、Lなどのサイズの選択や色の選択、購入数を増やすためのカウンター、レーティング、アラートやプライス表示に割引表示の工夫なども見られ、細かく配慮されている印象です。 Vue.jsを使ったECサイトの構築を考えられている方は一見
Font Awesomeから派生したオープンソースのアイコンプロジェクト・「Fork Awesome」 - かちびと.net
Fork AwesomeはFont Awesomeから派生したオープンソースのアイコンプロジェクトです。Font Awesomeのバージョン5あたりから、その方向性に疑問を感じ始めた製作者がFont Awesomeの4.7をフォークし、別路線を進む事を決めたそうで、現在は同じく疑問を感じたユーザーのコミュニティによって管理されているそうです。 使い方はもちろん、Font Awesomeと何ら変わりません。Font Awesome5ではウェイトが選択できるようになり、種類の数も一気に増えましたが、Fork Awesomeでは4.7からマイナーアップデートを続けている、という印象です。 また、Font Awesomeでは2016年10月22日より、新しいアイコンを提案するプルリクエストを凍結しましたが、Fork Awesomeではプルリクエストを歓迎しているそうです。
カラーを指定すると、その色に対してアクセシビリティ的に問題ないカラーを提案してくれる・「Accessible Color Generator」 - かちびと.net
Accessible Color Generatorは任意のカラーを指定すると、その色に対してアクセシビリティ的に問題ないカラーを提案してくれるWebアプリです。提案してくれるのは白いテキストを使う場合に指定したカラーに最も近いカラーでアクセシビリティレベルがAA或いはAAAをクリアしてくれるカラー、同じ条件でグレーのテキストを使う場合はグレーに近いテキストで条件をクリアできるカラーを提案、同系色で条件をクリアできるカラーの3種を提案してくれます。
軽量でレスポンシブ対応の、classを使わないCSSフレームワーク・「Water.css」
Water.cssは軽量でレスポンシブWebデザイン対応のCSSフレームワークです。classを使っていない為、セマンティックなHTMLのWebサイト制作に向いています。これといった装飾も無く、シンプルで見やすくする事に重点を置いた設計という印象でした。開発者自身、内容のシンプルなWebサイトの作成の機会が多い為、スタイルリングに時間を掛けたくないけどデフォルトスタイルは好きじゃないという理由で作成したそうです。classを使っていないので、読み込めば即反映されます。セマンティックHTMLに沿ってデザインされているのでトリッキーなWebサイトへの導入は難しいかもしれませんがそうでないなら非常に手軽に導入する事が出来ますね。ライセンスはMIT。 Water.css
jQueryライクな構文でDOM操作を行うために開発された超軽量ライブラリ・「femtoJS」 - かちびと.net
femtoJSはjQueryライクな構文でDOM操作を行うために開発された超軽量JavaScript(ES6)ライブラリです。たった20行、圧縮すると0.4kb程度のライブラリで、以下のように概ねjQueryと同じ書き方で使う事が出来ます。 $("div").css("background-color:green;").html("Hello World").addClass("new"); 同じく$を使うのでjQueryと併用するとコンフリクトを起こす事になります。DOM操作だけでjQueryを使っている場合はこのような代替ライブラリが軽くてパフォーマンスも向上しそうですね。使えるメソッドは16種ほどしかありませんが十分需要はありそうです。ライセンスはMIT。 femtoJS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソフトなCSS Shadowを作れるシンプルなWebアプリ・「Neumorphism.io」 - かちびと.net
CSS GridとGradientsを使ってランダムにパターンを作成、コードをコピーできる・「CSS Grid-ient」 - かちびと.net
SVGによる波状のラインをランダムで作成できるジェネレーター・「Get Waves」 - かちびと.net
VSCodeやAtom、Sublimeなど、様々なテキストエディタのカラーテーマを作成、公開しているプロジェクト・「RAINGLOW」
プログラミングの知識不要でWebアプリとしても開発できるオープンソースのゲームボーイ用ゲーム開発アプリ・「GB Studio」
プレーンテキストでデータを入力すると自動でチャートを生成してくれるWebアプリ・「FastCharts」
