※ 2024/1/14更新 この記事は、「プロンプトだけで画像生成していた人」が「運任せではなくAIイラストをコントロールして作れるようになる」という内容です。漫画や同人制作に必要なControlNet技術の基本が身に付きます。SDXL編と合わせて学んでください。 初心者の方は、こちらの動画版へ。より詳しく、分かりやすく解説しています。noteだと無料視聴できます。 ■ ControlNetとは？何ができる？ ■■ ControlNetとはControlNetとは、画像生成AIを、よりコントロール可能にする画期的な機能です。似た顔や特定のポーズ表現などを、ある程度は思い通りにでき、AIイラストを作ることができます。 ■ 何ができる？具体例を紹介✓ イラストを維持したまま、色だけ変える ✓ 落書きから画像を生成する ✓ キャラクターに特定のポーズをとらせる ✓ キャラクターの顔を維持したまま

配布素材は戦闘用キャラクター、敵キャラクター、キャラの表情、武器、サウンドまで！ さらに！ゆるドラシル主要キャラ達の季節限定の素材も配布！（水着、サンタ、振袖など） ゲーム作成に必要な素材を、テイストを合わせてまるっとご提供！ あとはキミが作りたい世界を用意するだけ！ ゆるドラシルはヴァルキリー、戦士、モンスター、マッチョ、おっさん、ロリ、ショタ、馬など個性あふれるキャラクターがいっぱい！北欧神話から日本神話、さらにはエジプト神話までキャラクター素材の数はなんと1,000種類以上！！ 豊富な素材をふんだんに使って、キミだけのRPGの世界を生み出そう！ 巨人の長 スルト 勝戦の戦乙女 ヒルド 緋炎の戦神 セト 刻の先陣 ラスフィア 豊穣の女神 フレイヤ 霧の戦乙女 ミスト 恋する巨人 アングルボザ 絶世の大雅 ツバキ 氷河の魔狼 フェンリル 神々の長 オーディン 知の戦乙女 アルヴィト 愛の

Tech BASE Okinawa 2023 2023/09/23(土) https://codebase.connpass.com/event/285901/ https://techbaseokinawa.com/

こちらの投稿は 12/3 の Go 言語と Next.js の Advent カレンダー用になります。 背景 Next.js のパフォマンスは Go に追いついていないためサーバーをより速くしない deno や bun なども試しましたが数倍違う程度で、Go とは数百倍の違いがある Go で DB アクセス含むリクエストよりも Next.js でページ作るのが遅い場合がある メモリー使用率を減らしたい、など 前提と本記事の範囲 Next.js サーバーといっても全ての機能を対応できるものではないため以下の技術のみになります。 getServerSideProps を Go で処理する （HTMLのBodyのレンダリングはクライアント） HTMLの Head 部分のレンダリングを Go で処理する（SEOのためサーバーサイドで処理） title や meta タグ、各種 script、css

エンジニアからアーキテクトを目指す方や、アーキテクトとして仕事を始めたばかりの方は、アーキテクトの仕事やアーキテクチャ設計のトレンド、さらにどんなスキルが必要なのかをまず理解しておくことが大切です。今回は長年アーキテクトとして活躍されている米久保剛さんの著書『アーキテクトの教科書』（翔泳社）から、アーキテクトの定義や職務、アーキテクチャ設計のトレンド推移、そして米久保さんが考えるアーキテクトとして備えておくべき能力と考え方について解説します。 本記事は『アーキテクトの教科書 価値を生むソフトウェアのアーキテクチャ構築』の「第1章　アーキテクトの仕事」から一部を抜粋したものです。掲載にあたって編集しています。 アーキテクトの定義 複雑な構造物であるソフトウェアにおいて非常に重要なアーキテクチャを適切に設計するには、ソフトウェア開発業務に関わる幅広い知識や経験が必要とされます。そのため、アーキ

読んでよかった book.mynavi.jp 評判通りよかった そっかーなるほどなぁ。面白いなぁ。と思うことがいろいろあった とはいえ、著者の主張全てに同意というわけではなく「著者はそう考えるんだな。自分は違う考えだな」と考えさせられる部分もいくつかあった 苦手な部分もあった 古典学派とロンドン学派に分けて話を展開しているのはあまり好きじゃないなと思いながら読んだ 定理やマトリクスに当てはめて話を展開する部分があって、いくつかは無理やりだったり話をややこしくしていたりするように自分は感じた。そういう部分は苦手だなぁと思いながら読んだ というのが全体の感想。内容はとてもよかったし、苦手な部分もそれはそれで考えさせられたので、読んでよかった。ってことでパラパラめくりながらメモを書いていこう あらためて意識したい2本 「第4章 良い単体テストを構成する4本の柱」の中の2本が、当たり前のことではあ

最近はお客さんとの勉強会でDockerのドキュメントをつまみ食いして読むというのをやっていますが、改めて最新版を読んでみて、いろいろ思考が整理されました。2020年の20.10のマルチステージビルドの導入で大きく変わったのですが、それ以前の資料もweb上には多数あり「マルチステージビルドがよくわからない」という人も見かけるので過去の情報のアンラーニングに使っていただけるように改めて整理していきます。 仕事でPythonコンテナをデプロイする人向けのDockerfile (1): オールマイティ編で触れた内容もありますが改めてそちらに含む内容も含めて書き直しています。 本エントリーの執筆には@tk0miya氏から多大なフィードバックをいただきました。ありがとうございます。 基本的なメンタルモデル現代的な使い方を見ていくために「Dockerを使ってビルドする」というのはどのようなものか考えを整

はじめに こんにちは、令和トラベルでフロントエンドエンジニアをしているyamatsumです。 ここでは複雑なWebアプリケーションを開発・保守する場合に有効なアーキテクチャパターンとして知られているマイクロフロントエンドをNext.jsを用いて実現した時の設計とその課題について紹介したいと思います。 ※ この記事は令和トラベルのTech LT会で共有した内容を記事にしたものです。社外の方にもご参加いただけるTech LT会は connpass にて告知しています。 マイクロフロントエンドとは マイクロフロントエンドは、複雑なウェブアプリケーションを小さな独立したWebアプリやモジュールに分割するアーキテクチャパターンです。各Webアプリは異なるチームによって開発・保守することができ、一般に技術スタックやフレームワークの選択も自由です。 このWebアプリ群を組み合わせることで、以下のような利

CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。

一定の規模以上のWebアプリケーションにおいて、JavaScriptを開発時のままの形で配信することは滅多にありません。webpackやRollupなどのバンドラを使用して、ファイルをまとめた上で配信することが一般的です。 ESModulesが普及しバンドル工程なしでも主要ブラウザがJavaScriptのモジュールを直接解釈できるようにはなりましたが、我々は依然としてバンドラを使用してWebアプリケーションを開発しています。一体なぜでしょうか？ いくつか理由はありますが、その内の1つに importのコストが高い ことがあげられます。 これはv8チームが公開しているベンチマーク測定を見ても明らかです。モジュールの読み込みに時間がかかると当然ページの読み込み速度が遅くなり、ユーザー体験が悪化します。 出典： ES Module loading importのコストを削減するためにエコシステム

findProductはidもしくはnameのどちらか一方を与えた場合に、その値に紐ずくProductを返すクエリです。 findProductはDescription（コメント部分）で使用方法について記していますが、id, name どちらもNullableとして定義されていますので不正な値が入る可能性は存在しています。 これでは「正しくないことを行うことが困難になるよう設計する」というルールに抵触しています。 そのため、findProductはfindProductByIdとfindProductByNameというように二つのクエリに分割するべきだと書かれています。 分割することで引数のidとnameはRequiredにすることができ、想定していない挙動をクライアントがすることがなくなりました。 GraphQLには各クエリやフィールドにドキュメントを設定することができ、それ自体はとても

はじめに 最近、GraphQL APIを作ることが多いです。最初の方に作ったスキーマを見ると、「なんでこんなことに...!」と自分ながら絶望することがよくあります。 今回はGraphQLの設計で「失敗したな〜」と個人的に思ったことをアンチパターンとしてまとめてみました。(随時更新) アンチパターン 大学の履修管理のシステムを考えます。学生(students)と履修科目(courses)のERDが下記です。多対多の関係の交差テーブルstudent_coursesを作ります。 露出した交差テーブル 素朴にGraphQLスキーマを定義すると以下のようになります。 type Student { name: String! studentCourses: [studentCourse] } type Course { title: String! studentCourses: [studentCo

少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。

Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp