選択したカラー・テーマに基づいて、デザインやイラストに最適な色を組み合わたカラーパレットを生成する無料のオンラインツールを紹介します。 操作は快適👍で、超高速🔥！ 気になったカラーパレットはすぐに無料でダウンロードでき、さまざまなプロジェクトで使用できます。
超高速！ デザインやイラストに最適な色を組み合わたカラーパレット🎨を生成する無料ツール -Colour Palette Generator
選択したカラー・テーマに基づいて、デザインやイラストに最適な色を組み合わたカラーパレットを生成する無料のオンラインツールを紹介します。 操作は快適👍で、超高速🔥！ 気になったカラーパレットはすぐに無料でダウンロードでき、さまざまなプロジェクトで使用できます。
Generate your ideal color paletteColorMagic is a color palette generator with AI. Generate colors from keyword for image of color you enter.
UIデザイン用に、AIで色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツール -AI Color Combination Generator
AIによる便利ツールが増えてきましたね！ WebサイトやスマホアプリのUIデザイン用に、入力されたプロンプトを元に色彩理論に基づいたカラーパレットを生成してくれる無料オンラインツールを紹介します。 AI Color Co...記事の続きを読む
イラスト特化画像生成AI「NovelAI」に入力するプロンプト・呪文を日本語の選択肢から簡単に作成できるウェブアプリ「Magic Generator」の使い方まとめ
近年、文章(プロンプト)を入力するだけで画像を生成してくれるAIに大きな注目が集まっており、有志の開発によって誰でも簡単に画像生成AIを利用できる状況が整いつつあります。しかし、プロンプトは基本的に英語で入力する必要があるため、英語が苦手な人にとっては扱いにくく感じます。そんな中、高品質なアニメ画像を出力できる画像生成AI「NovelAI」向けに、生成したい画像の特徴を選択するだけでプロンプトを作成してくれる日本語ウェブアプリ「Magic Generator」が公開されました。 Magic Generator https://magic-generator.herokuapp.com/ ◆画像の特徴を選択してプロンプトを生成 Magic Generatorでは、日本語で記されている「イラストの特徴」を選択することで、英語のプロンプトを作成できます。まずは、「おすすめプリセット」に含まれる「
Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション
Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション おもにNext.js、Prisma、GraphQL Code Generatorを用いたWebアプリケーションの構築手法について解説した書籍となります。 上記技術に加えて、以下の技術も採用しています。 ・Tailwind CSS ・NextAuth.js ・Apollo GraphQL ・Prettier ・ESLint ・Vitest ・React Testing Library ・GitHub Actions モダンなWebアプリケーションの開発手法について興味がある方にオススメです。 1章 Next.jsのセットアップ 2章 Prismaのセットアップ 3章 GraphQL Code Generatorのセットアップ 4章 テストコードの追加 5章 本番環境へ
OpenAPI Generator と TypeScript で型安全にフロントエンド開発をしている話 - SmartHR Tech Blog
こんにちは、SmartHR でフロントエンド開発を担当している @Tokky0425 です。 この記事では、私のプロダクトでの OpenAPI Generator を使ったフロントエンド開発の取り組みを紹介していきます。 目次 OpenAPI とは 「ラクラク分析レポート」の DX 上の課題 OpenAPI Generator とは 実際に generate してみる 生成ファイルを使ってみる 型情報を出力してみる 組み込み・運用の工夫 chokidar で監視する lint-staged に組み込む メリット・デメリット メリット デメリット まとめ OpenAPI とは OpenAPI とは、「REST API のドキュメントの記述形式を定めた仕様」のことを指しています。 簡単な例ですが、下記のような YAML ファイルがあるとします。 schema.yml paths: "/some
画像生成AIの登場によって、大規模なデータセンターや巨大なワークステーションがなくても自宅で簡単に画像を生成できるようになりましたが、ある程度高いスペックのPCでなければAIモデルを動かすことができません。「AI Human Generator」はブラウザから人間の全身画像を簡単に生成できるサービスで、無料で利用することができます。 AI Human Generator – Generate and Modify People Online https://generated.photos/human-generator/ AI Human Generatorを体験するには、「Create Human」をクリック。 画面はこんな感じで、左に設定項目が、右に生成された画像が表示されています。「Face」では、あらかじめ用意した顔を読み込ませて画像に反映できるとのことで、「Upload」をクリ
CSS Gradient Generator
A front-end web development newsletter that sparks joyMy main focus right now is teaching front-end developers how to do cool stuff. My personal newsletter is sent once every few weeks, and includes bonus subscriber-only content. No spam, no nonsense. Unsubscribe at any time.
OpenAPI Generator で API Client と型を自動生成した話 - BASEプロダクトチームブログ
フロントエンドエンジニアの @rry です。 自分は BASE の Sales Promotion というチームで主に新規機能開発を行っています。このチームでは主にオーナーさんの使う管理画面に新しく機能追加をしています。 そこで、管理画面で使っている API Client と型を、OpenAPI Generator を使って自動生成するようにしてみたのでそのお話を書きたいと思います。 そもそも OpenAPI とは？ https://www.openapis.org/ OpenAPI とは、RESTful Web サービスを記述、生成、使用、および視覚化するための仕様です。 ※ 以前は OpenAPI ではなく仕様自体も Swagger と呼ばれていましたが、現在は仕様自体については OpneAPI と呼ばれており、Swagger というのは OpenAPI を使ったツール群のことをさすよ
AI BURGER GENERATOR
バーガーに挟んでみたい食材や料理を入力して[START]ボタンを押そう ※ 食べ物以外は生成されません※ 判定をAIで行っているため、うまく行かない場合がございます※ 文字数は最大20文字までです※ 絵文字などの特殊文字は使えません
画像生成AI「DALL·E 3」でプロフィール用画像を作成できる「Free Profile Picture Generator」
OpenAIの画像生成AI「DALL·E 3」を用いて、自分の写真をもとに、アバターとして使えるプロフィール用画像を生成してくれる「Free Profile Picture Generator」が登場しました。 Free Profile Picture Generator using DALL-E 3 https://www.headshotpro.com/tools/free-pfp-generator サイトにアクセスすると、どんな画像が作れるのかというサンプルがずらっと並んでいます。 画像を作るには「Upload one photo」のボタンをクリック。 ダイアログが開くのでベースとして使いたい画像を選び、画像のスタイルを「Flat illustration」「3D rendered」「Comic book」「Anime」「Chibi Cartoon」の5つから選びます。今回は「Fl
TypeScript の型生成における OpenAPI Generator のハマりどころ - READYFOR Tech Blog
こんにちは。READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ 嬉しいことに、READYFOR のプロダクト開発組織は急拡大中で、正社員の人数は 2019年7月時点では8名でしたが2021年4月現在は29名になりました 🎉 その反面、組織が大きくなってくると「我々はどこに向かってるんだっけ？」「あの人、最近はどんなことに取り組んでいるんだろう？」といった「見えないこと」が増えてきます🤔 この「見えないこと」を減らすために、READYFOR では毎月「プロダクト開発本部会」を開催しています。 プロダクト開発本部会では、必要な全体周知（組織やプロダクトの方針等）や月替わりプレゼンテーションを行っています。 本記事はこのプロダクト開発本部会の月替わりプレゼンテーションで発表した内容になります。 はじめに 以前 READYFOR で初主催とな
GraphQL Code Generator で TypeScript の型を自動生成する - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。 レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ という記事を書きましたが、この中で詳しく説明しなかった GraphQL のスキーマやクエリから TypeScript の型定義を自動生成する仕組みについて紹介します。 なお、今回紹介したコードは以下で試せます。 https://github.com/hokaccha/graphql-codegen-example-for-techlife GraphQL Code Generator を使った型生成 GraphQL のスキーマから TypeScript の型を生成するためのライブラリはいくつかあります。 Apollo GraphQL Code Generator などが有名どころです。今回はシンプルさや拡張性を考えて G
Craiyon, AI Image Generator
Frequently asked questions What is Craiyon? How do you keep it free? Can you make images of higher quality? Do you have any tips to create better images? What are negative words? How do you predict a next prompt? What to do when there is too much traffic? Are you related to DALL·E mini? What if images do not appear? How does the AI model work? What about limitations and biases? Can I use the image
CSS GridとFlexboxの便利なツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Layout Generator
Webサイトでよく使用されるレイアウト、「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツールを紹介します。 実装はCSS Gridで、今後Flexboxにも対応予定2022年にCSS Flexboxにも対応しました。レイアウトを実装するために使用してもよし、CSSの勉強にもよしの便利ツールです。
CSS section divider descriptionWith this CSS Section Separator Generator, you can choose between 6 different dividers. Each of them can be customized by using the controls in the preview field. The tool includes a skewed divider, a semi-circle divider, a wave divider, a spikes divider, a triangle divider and a curved divider. Most of these dividers are pure CSS and using the ::before and ::after p
GitHub - microsoft/kiota: OpenAPI based HTTP Client code generator
Kiota is a command line tool for generating an API client to call any OpenAPI described API you are interested in. The goal is to eliminate the need to take a dependency on a different API SDK for every API that you need to call. Kiota API clients provide a strongly typed experience with all the features you expect from a high quality API SDK, but without having to learn a new library for every HT
OpenAPI GeneratorでPython Web API構築 | フューチャー技術ブログ
この記事はPython Advent Calendar 2022 カレンダー2の3日目です。昨日はtttakehさんのじゃんけん画像を分類してみたでした。 はじめにこんにちは。TIG DXユニットの村上です！ さて、私の所属しているプロジェクトではバックエンドシステムに主にGo言語を用いており、Go言語によるWebAPIを構築しています。 例えばLambdaとGoを使ったサーバーレスWebAPI開発実践入門など、Future Tech Blogには多くのノウハウが投稿されていますので是非ご覧になっていただければと思います。 今回はGo言語ではなくPythonでWebAPIを構築しました。その際にOpenAPI Generatorが便利だったのでご共有します。 OpenAPI GeneratorOpenAPI GeneratorはAPIリクエストやレスポンスの内容を定義し、それを元にプログラ
竹生成シミュレーションゲーム『bamboo generator』無料公開。各種パラメーターの数値を入力し、自動で生えてくる竹の変化に富んだ姿や成長を味わう - AUTOMATON
ホーム ニュース 竹生成シミュレーションゲーム『bamboo generator』無料公開。各種パラメーターの数値を入力し、自動で生えてくる竹の変化に富んだ姿や成長を味わう 全記事ニュース
CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.
CSS Layout Generator
A CSS Grid generator & CSS Flexbox generator. A tool for generating UI layout component code.
グラスモーフィズムをCSSで実装するコードを簡単に生成できるジェネレーター -Glass Morphism Generator
カードやパネルにぴったりな透明度のある背景のぼかしを使った磨りガラスのエフェクト、グラスモーフィズムを実装するコードを生成できるジェネレーターを紹介します。 Glass Morphism Generator Glass Morphism Generator -GitHub このエフェクトは去年の暮れくらいから、Glassmorphismと呼ばれはじめたエフェクトで、古くはiOS7やWindows Vistaでも使用されています。最近では、macOS Big Surでも見かけますね。 参考: Glassmorphism in user interfaces Glass Morphism Generatorでは、磨りガラスの透明度やぼかし具合を確認しながら、コードを生成できます。
GitHub - drawdb-io/drawdb: Free, simple, and intuitive online database design tool and SQL generator.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
From simple sketches to realtime AI art generation. Have full control of the image generation AI by expressing visuals in real-time.
はじめに こんにちは！ WEARバックエンドブロックの高久です。 WEARではOpenAPI（Swagger）を使って、アプリやWebのクライアントが利用するAPIを定義しています。そして先日、開発効率化のためにOpenAPI GeneratorでOpenAPIからAPIクライアントコードを自動生成、活用できるように整備をしました。その中でOpenAPI Generatorに適したOpenAPIの書き方のポイントがいくつかあったので、内容を紹介していきます。 想定読者 OpenAPIを現在利用している、またはこれから利用する予定の方 OpenAPI Generatorを利用したコード自動生成を検討している方 背景 当初WEARではAPIクライアントコードはOpenAPIでのAPI定義を基に各クライアントが手動で実装していました。しかし手動で実装すると初期の実装コストや変更時の追従コストがか
GitHub - hatoo/oha: Ohayou(おはよう), HTTP load generator, inspired by rakyll/hey with tui animation.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
便利なのが登場！ フロントエンドの開発に役立つ最新ツールがひとまとめに利用できる -HTML＆CSS Code Generator
HTMLやCSSをはじめとする、フロントエンドの開発に役立つ最新ツールがひとまとめに利用できるHTML & CSS code generatorを紹介します。 いろいろなツールをどこだっけなと探すときもあると思うので、ブックマークしておくと便利です。 HTML & CSS code generator HTML & CSS code generatorは、フロントエンドのデベロッパー向けに最新ツールがオールインワンで利用できるサイトです。ツールはすべて無料で利用でき、登録など面倒なことは一切不要です。
Turn your ideas into emojis in seconds. Generate your favorite Slack emojis with just one click.
GraphQL Code Generator(graphql-codegen) おすすめ設定 for TypeScript
GraphQL Code Generator v3 以降で標準となった Client preset では設定が大きく異なります。 この記事は Client preset を使わない前提の内容になっているため、注意が必要です。 Client preset 用の設定は別記事で紹介します。 全体 生成物をフォーマッタにかける graphql-codegen には Lifecycle Hooks という仕組みがあり、いくつかの用意された hook ポイントで任意のコマンドを実行できる。 これを使って生成されたコードを Prettier 等のフォーマッタに通しておくのがおすすめ。 基本 DO NOT EDIT とはいえ、コードジャンプしてきて生成された型を読みたいケースはよくある。 そういうときのために、人間が見やすいように改行しておいてもらうといい。 typescript plugin, type
他言語からTypeScriptに変換する記事を観測したので、JSONSchemaを経由してTypeScriptのコードに吐き出すライブラリを作りました。本記事のコアロジックの部分を抽出した形です。 OpenAPI TypeScript Code Generatorとの違いとして、ルートの名前空間を廃止しているので、割と自由に書ける様になってます。 https://www.npmjs.com/package/@himenon/jsonschema2ts
Modern Services with clients that support TLS 1.3 and don't need backward compatibility Intermediate General-purpose servers with a variety of clients, recommended for almost all systems
ボタンやカードなど、ニューモーフィズムのUIデザインで見かけるさまざまな要素を実装するCSSを簡単に生成できる無料オンラインツールを紹介します。 矩形や丸などの形、カラーや角丸やブラーなども簡単にカスタマイズできます。
<svg viewBox="0 0 564 242" version="1.1" xmlns="http://www.w3.org/2000/svg" width="564" height="242"> <g stroke-width="2" stroke="none" fill="none" fill-rule="evenodd"> <path d="M284.896413 1.77679122c.882345.50911399 1.614955 1.2417713 2.124036 2.124173l21.099094 36.57152808-23.135682 15.8357502c4.105694 3.2404436 6.948421 5.8686448 8.528184 7.8846038 1.579762 2.0159589 3.442094 5.5716267 5.58699
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Create translucent versions of your colors Alphredo generates translucent (alpha) colors looking the same as their opaque counterparts when placed against the same background.
Rated the best text to speech (TTS) software online. Create premium AI voices for free and generate text-to-speech voiceovers in minutes with our character AI voice generator. Use free text to speech AI to convert text to mp3 in 29 languages with 100+ voices.
From Inspiration to Creation: Ignite Your Design Journey with Color Designer Welcome to the most comprehensive color tools platform. Unleash your creativity using color wheel, devise harmonious palettes with the color scheme builder, and create depth with the gradient options. It's a designer's playground. Enjoy exploring!
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活 | GiFT（ギフト）株式会社
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活2020.02.28 OpenAPIをドキュメントだけでなく、Schema firstな開発に利用しようということで、TypeScript + OpenAPI Generatorでフロントエンドの開発をしました。 Vue, Nuxtで使う際の例と共にその内容を紹介します。 目次OpenAPIでドキュメントを書くメリットなどOpenAPI GeneratorでClient情報を吐き出すVue, Nuxtで利用するAPIの変更に追従しやすく、型もあるし幸せOpenAPIでドキュメントを書くメリットなど弊社では以下のブログでも書いているように、API仕様のドキュメント化にOpenAPIを活用しています。 committee×OpenAPI×RailsでスキーマファーストなAPI開発O
typescript-generatorを利用して、HTML に埋め込んだ JSON データをフロントエンドで型安全に扱う - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！kintone フロントエンドリアーキテクチャチーム (フロリア) の西川 @nissy_dev です。 最近のフロントエンド開発で導入されることの多い TypeScript ですが、開発期間の長いプロジェクトに導入する際にはバックエンドとの結合部分の型定義をどう扱うかが問題になる場合があると思います。 今回の記事では、フロリアで取り組み始めた、HTML に埋め込んだ JSON データをフロントエンドで型安全に扱う施策について紹介します。 フロリアのプロジェクトの詳細については、 @koba04 が書いた次の記事をご覧ください。 blog.cybozu.io 目次 フロリアでのバックエンドからのデータ取得 HTML に JSON データを埋め込む方法の問題点 Java のクラスから TypeScript の型定義を生成できる typescript-generator types
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ColorMagic | AI Color Palette Generator
Magic Generator
画像生成AIがブラウザから無料で人間の全身写真をさくっと作ってくれる「AI Human Generator」レビュー
CSS Section Separator Generator
Neumorphism/Soft UI CSS shadow generator
Akuma - Realtime AI Anime Art Generator
OpenAPI Generatorに適したOpenAPIの書き方 - ZOZO TECH BLOG
AI Emoji Generator
OpenAPI SchemaからTypeScript Code Generatorを作ったので紹介します
Mozilla SSL Configuration Generator
ニューモーフィズムのUIで見かけるさまざまなCSSを簡単に生成できる無料ツール -Neumorphic Generator
SVG Artista - SVG Drawing Animation Generator
GitHub - docuowl/docuowl: 🦉 A documentation generator
Alphredo — Alpha colors generator
AI Voice Generator & Text to Speech
Color Designer - Simple Color Palette Generator