2023年に変わってしまったSlackのUIを元のUIに戻す方法 同僚から教えてもらって大興奮した 元は SlackRevert – Get this Extension for 🦊 Firefox (en-US) の説明欄に書いてあったらしい ① Slack アプリを閉じる ② ターミナルを開いて、次の 2 つのコマンドを個別に実行する code:sh export SLACK_DEVELOPER_MENU=true open /Applications/Slack.app Slack は新しいテーマで開くが、コンソールにアクセスできるようになる ③ command + option + i を押して Slack のコンソールを開く ④ Slack のコンソールで以下を実行 code:sh localStorage.setItem("localConfig_v2", localStor
CSSでif～else文が使えたら、と思ったことはありませんか？ もちろんifとかelseはCSSにはありませんが、CSSだけでif～else文と同じようにスタイルを設定できます。 CSSでif～else文を実現するには...記事の続きを読む
2023年も残り2週間ちょいですね、今年リリース・アップデートされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 ゴシック、明朝、デザインフォント、手書きフォントなど、盛りだくさんです！ これまでの日本語フリーフォント総まとめは、下記をご覧ください。 日本語のフリーフォント総まとめ -商用サイトだけでなく紙や同人誌などの利用も明記 後日、上記に追加します。 まずは、今年個人的に一番気に入ったフォントから。 無料版で使ってみたらいい感じだったので、有料版を購入しました。 かもめ明朝 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 築地二号系で昭和初期に作られたであろう金属活字にインスパイアされて作成されたフォント。ひらがな・カタカナ・約物、漢字は4文字だけ収録されています。 フリーフォントのダウンロードは、サイドバーの「無料ダウンロード」から。 202
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供 Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebアプリケーションのユーザーインターフェイスを自動生成してくれるサービス「v0」のベータ公開を発表しました。 v0を使うと、人間のWebデザイナーに「こんな画面を作って」「ここの色は青にして」「ここのフォントは大きく」などと言葉で指定するの同じような感じで生成AIに指示をして、HTMLやCSSなどのコードを書くことなくWebアプリケーション画面の生成が可能です。 Introducing v0: generate UI from simple text prompts. 5,000 waitlist invites were sent today—with over 25
MetaがTwitter風の新SNS「Threads」アプリをGoogle Playで公開、すぐ取り下げ | テクノエッジ TechnoEdge
アプリ開発者でリバースエンジニアでもあるAlessandro Paluzzi氏がTwitterに共有した一連のスクリーンショットによると、Threadsアプリを起動するとユーザーはInstagramのユーザー名をインポートでき、見た目はほぼTwitterと同様のUIで自身の視点を投稿したり、DMをやりとりしたりできる模様です。 MetaはThreadsのリリース時期を明らかにしていません。今回のストアでの公開は意図したものか、ストア側の不具合のせいか、または単なるうっかりかはわかりませんが、すでに一度アプリストアに登場したことを考えると、そのリリースは間近に迫っていると考えて良さそうな雰囲気です。 Google Playストアに掲載されていた説明文には「Threadsは、コミュニティが集い、関心のあるトピックから次に来るトレンドまで何でも話し合える場です。興味・関心のジャンルが何であれ、お
GitHub Copilotは開発者の生産性をどれだけ上げるのか？ZOZOでの全社導入とその効果 / How Much Does GitHub Copilot Improve Developer Productivity? The Company-wide Implementation and Its Effects at ZOZO
2024/2/16 Developers Summit 2024 登壇資料 https://event.shoeisha.jp/devsumi/20240215 ■ ZOZOエンジニア向け会社説明資料 https://speakerdeck.com/zozodevelopers/company-deck ■ GitHub Universe 2023 https://githubuniverse.com/ ■ Universe 2023: CopilotがGitHubをAIを駆使した開発者プラットフォームへと変貌させる https://github.blog/jp/2023-11-09-universe-2023-copilot-transforms-github-into-the-ai-powered-developer-platform/ ■ GitHub Universe 2023 o
当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。 もう私が知っているCSSをはるかに超えたCSSです。 Expert CSS: The CPU Hack br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのエキスパート: The CPU Hack 5つの観測可能性 The CPU Hackの始まり The CPU Hack 終
開発生産性が上がるって分かったので GitHub Copilot Business を積極活用しています - Money Forward Developers Blog
エンジニアリング戦略室の高井といいます。 みなさん、GitHub Copilot は利用されていますか？ GitHub Copilot は GitHub と OpenAI が共同で開発した生成 AI を活用した開発支援ツールです。コードの自動補完、コード生成、ドキュメントの提案など、多岐にわたる機能を提供し、開発者の生産性を向上させることを目的としています。 マネーフォワードでは、昨年度にトライアルとして Copilot の利用を開始しました。本記事では、Copilot を利用して半年以上経過して、その利用がどのような効果をもたらしたかをレポートします。なお、ここで GitHub Copilot として言及されている Copilot のプランは GitHub Copilot Business です。 Copilot 利用状況・分析対象 なお、分析にはエンジニアリング組織のパフォーマンスを可
Red HatがRHELソースコードの一般公開をやめて顧客限定に、自由ソフトウェアの原則を軸にしてきたLinux関係者たちから猛批判を受ける
企業向けに「Red Hat Enterprise Linux(RHEL)」というLinuxディストリビューションを提供しているRed Hatが、これまで一般公開してきたRHELのソースコードの配布を顧客限定にすると発表しました。この発表に対して、自由ソフトウェアの理念を持つ開発者たちが批判の声を上げています。 Furthering the evolution of CentOS Stream https://www.redhat.com/en/blog/furthering-evolution-centos-stream 自由ソフトウェアとは下記の4つの「自由」を持つソフトウェアのこと。 ・どんな目的に対しても、プログラムを望むままに実行する自由 ・プログラムがどのように動作しているか研究し、必要に応じて改造する自由 ・ほかの人を助けられるよう、コピーを再配布する自由 ・改変した版を他に配
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
Docker Desktopの代替となる「Podman Desktop 1.9」リリース。Macでの安定性や性能が大幅に向上したコンテナエンジン「Podman 5.0」を搭載
Red Hatが主導して開発するDocker互換のコンテナエンジンであるPodmanを搭載した、Docker Desktop代替となるGUIツール「Podman Desktop」の最新版「Podman Desktop 1.9」正式版がリリースされました。 Podman Desktopの主な機能 Podman Desktopは、デスクトップアプリケーションのGUIを通じて、コンテナの一覧、検索、実行、終了などの基本的な操作、コンテナイメージのビルド、コンテナレジストリへのコンテナイメージのプッシュやプルなどのライフタイムを通じた管理、ローカルでのKubernetes環境の実現、CPUやストレージの利用量の参照などを手軽に行えるツールです。 さらにDocker Dekstopの拡張機能を取り込むこともできます。 Podman Desktop 1.9の新機能 Podman Desktop 1.9
楽天が「security.txt」を導入
楽天グループがWebサーバーに「security.txt」と呼ぶテキストファイルを置き、脆弱性▼情報の受付窓口としてVDP（Vulnerability Disclosure Program、脆弱性開示プログラム）を開始したことがSNSで話題になった。2023年10月2日のことだ。同社広報はこれを事実だと認めた。 security.txtは、米Apple（アップル）や米Google（グーグル）、米GitHub（ギットハブ）、米IBMなど、海外IT大手は既に導入している。一方、日本では少ない。security.txtとは何か、国内でなぜ普及しないのか、脆弱性情報の受け付けとの関連性は――。順に見ていこう。 セキュリティーが高まる理由 security.txtとは、当該企業が提供する製品やサービスの脆弱性情報を見つけた人が通知する窓口を示すためのファイルだ。その仕様は、インターネット関連技術の標
ヤフーのユーザー5,400万人から"同意"を得るための技術（HTML/CSS/JavaScript）
こんにちは。SWATチームの今谷と、LY会員サービス統括本部の木所です。 LINEとヤフーの会社合併に伴って、LINEヤフー株式会社が提供するサービスを利用するユーザーに「新プライバシーポリシーへの同意」をいただくためのモジュールを開発しました。本記事では、ヤフーのユーザー5,400万人から”同意”を得るための工夫について、実装上の不具合も交えてご紹介します。 なお、ご紹介する内容は、UIT × Bonfire Front-end Meetup #1 での発表が起点となっています。詳細についてより深く知りたい方は、発表資料 や Podcast をあわせてご参照ください。 会社合併と、新プライバシーポリシーのご案内 LINEとヤフー、それぞれで同意モジュールがあります。Web向けのほか、iOS・Androidアプリ向けにも提供しました。 Webの同意モジュールでは「Modal版」と「Ful
イーロン・マスク氏のもと大きな変化を続けるX(旧Twitter)が、新しい広告フォーマットを展開していることが、ユーザーやメディアの報告により明らかになっています。この新しい広告フォーマットでは、投稿が広告か否かが明示されておらず、いいねやリポストもできない代わりに、ユーザーアイコンや投稿をクリックすると広告サイトへ飛ばされてしまうそうです。 X rolls out new ad format that can't be reported, blocked | Mashable https://mashable.com/article/twitter-x-new-clickbait-ad-format Xが奇妙な新しい広告フォーマットを導入し始めていると、複数のユーザーが指摘しています。この広告フォーマットはX製品の中で最も透明性の低い製品であると海外メディアのMashableは指摘してお
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
GitHubでマルウェアを仕込んだリポジトリを本物に見せかけて拡散させる手口が横行し、10万を超す感染リポジトリが見つかっているとしてサイバーセキュリティ企業が注意を呼びかけている。攻撃は今も続いており、何も知らない開発者がこうしたリポジトリを使えば、マルウェアに感染してパスワードなどの情報が流出する恐れがある。 サプライチェーンのセキュリティ対策を手掛ける米Apiiroによると、GitHubのリポジトリを狙う「リポコンフュージョン（取り違え）攻撃」は2023年11月ごろから激化したという。 攻撃者は、開発者をだまして悪質なコードやファイルをダウンロードさせる目的で、正規のリポジトリのクローンを作成。そこにマルウェアを呼び出すコードを仕込み、同一の名称でGitHubにアップロードする。次に自動化の仕組みを使ってそれぞれを何千回もフォークさせ、Web上のフォーラムなどで宣伝しているという。
Figma for VS Codeを使ってCSS実装する時のおすすめポイント - Goodpatch Tech Blog
Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1： Figmaのトークンの名前と値が確認できる Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：
CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ（自動で最新版にアップデートするブラウザ）となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果（9,190人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
2023/08/26(土)に開催された Frontend Nagoya #11 のセッションで使用したスライド資料です。
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
伊藤園は8月28日、9月に発売する「お～いお茶 カテキン緑茶」のパッケージデザインに画像生成AIを活用したと発表した。同様の取り組みは同社初。「中身だけでなく、外観も時代に合った魅力を伝えられる製品開発に努める」（同社）という。 画像生成AIサービスは、商品パッケージのリサーチやデザインを手掛けるプラグ（東京都千代田区）のものを活用。商品デザインに特化したAIサービスの先行試用版で生成した画像を参考に、デザイナーが一から作り直したという。 AI活用のデザインは500ミリリットル、1リットル、2リットルのペットボトルに加え、パウダータイプの「お～いお茶 カテキン緑茶 スティック」で採用。「茶葉の生命力を現したもので、従来のデザインとは一線を画す鮮やかな色彩と抜群の視認性を最大限に引き出したデザインをあしらった」（伊藤園）としている。 関連記事 AIが生成した絵画が、アニメ「BEASTARS」
ジャニーズ会見問題、会見運営の会社が謝罪「ジャニーズ事務所様は作成や運営スタッフへの共有を含め一切関与しておりません」 - 弁護士ドットコムニュース
弁護士ドットコム 民事・その他 ジャニーズ会見問題、会見運営の会社が謝罪「ジャニーズ事務所様は作成や運営スタッフへの共有を含め一切関与しておりません」
Google Analytics 4 以外でウェブサイトを分析・改善するための無料ツール群とオウンドメディアでの活用法（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytics 4はアクセス解析ツールのスタンダードとして、多くの企業やサイトに導入されています。しかし利用ハードルが高いのもまた事実です。数多くあるレポートや、自由度が高すぎて迷ってしまう探索レポート、独自の用語なども沢山あり、利用に苦労されている方も多いのではないでしょうか。 そこで、GA4以外でウェブサイトのユーザー行動を理解し、サイト改善するためのツールを厳選して紹介します。今回紹介するツールは無料で利用できるものをピックアップしています。無料プランと有料プランの両方があるサービスの場合は、その旨を記載しています。また、無料でも期間限定のサービスは追加していません。 数多く紹介することを目的とせず、全て筆者が利用している（あるいは利用経験があるもの）に絞り込み、その中で良かったと思うツー
最適化はCDNがやればいい
題名に「CDN」と書きましたが、いわゆる「エッジ」のことです。オリジンありきなのであえてCDNと呼びました。とはいえ、オリジン自身がエッジにある可能性もあります。 メタフレームワークを作る Sonikというメタフレームワークを作っています。まだDevステージなんでどんなことができるか可能性を探っている最中です。 このフレームワークの特徴はとにかくエッジファーストです。 SSRしたバンドルの大きさを極力小さくする。 Islandsアーキテクチャを採用する。 DenoのFreshを参考にする。 CloudflareのBindingsを扱いやすくする。 Honoの上に乗せる。 とりあえずStreamingはサポートしない。 で、こういうのを作っていると、フレームワークは最小限にして、Core Web Vitalsのスコアを上げるために身を削る最後の部分はCDNに任せてしまった方がいいってことです
MacでDocker DesktopやWSLのようなコンテナ/仮想マシン環境を実現する「OrbStack 1.0」リリース
MacでDocker DesktopやWSLのようなコンテナ/仮想マシン環境を実現する「OrbStack 1.0」リリース Mac上でDocker Desktopのように手軽にコンテナ環境を構築し、またWindowsのWindows Subsystem for Linux（WSL）のようにmacOS上にLinux仮想マシン環境を構築できるソフトウェア「OrbStack 1.0」がリリースされました。 Introducing OrbStack 1.0: the fast, light, easy way to run Docker containers & Linuxhttps://t.co/wGGy4J16h0 pic.twitter.com/BVdABDyf01 — OrbStack (@OrbStack) September 21, 2023 OrbStackはコンテナエンジンとしてD
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボタン aタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成 コピペしやすい 各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。 アウトラインのボタン（枠線をグラデーションで再現する） サンプルを別ウインドウで開く ソースコー
Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
日本の漫画が世界で人気を集める中、外国語に翻訳された作品を無断で掲載した海賊版サイトの被害が深刻化しています。スマートフォンなどのアプリを配信する公式ストアでも海賊版に誘導する外国語の違法なアプリが複数確認されていて、業界団体は対策が必要だとしています。 出版社などでつくる一般社団法人「ABJ」がことし2月に調べたところ、漫画などの出版物を無断で掲載する海賊版サイトは1207サイトに上り、このうち7割以上を占める913サイトが英語やベトナム語などに翻訳された作品を集めた外国語のサイトだったことがわかりました。 ABJによりますと、日本語の海賊版サイトのアクセス数は出版社などの対策によって一時期の4分の1程度に減少していますが、外国語のサイトは近年、ベトナム語など東南アジア向けを中心に拡大していて、アクセス数は日本語版の少なくとも5倍以上、著作権侵害の被害額も大幅に上回るとみられます。 また
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
決済手段としても用いられるようになっている「QRコード」は、一部が破損・汚損していたり読み取り時に隠れていても大丈夫なように誤り訂正機能が盛り込まれています。これを活用して、QRコードと美麗なイラストを融合させる試みが行われています。 AI 生成可扫码图像 — 新 ControlNet 模型展示 https://mp.weixin.qq.com/s/i4WR5ULH1ZZYl8Watf3EPw AIGC All in One https://aigc.ioclab.com/index.html Redditor creates working anime QR codes using Stable Diffusion | Ars Technica https://arstechnica.com/information-technology/2023/06/redditor-creates-
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
個人向け「Windows Copilot」が12月1日にやってくる 生成AIはPCの使い方をどう変えるのか？
日本マイクロソフトが、生成AIを活用したアシスタントツール「Copilot」の個人向け正式版を12月1日にリリースする。現在のプレビュー版に引き続き、Webブラウザやアプリからアクセスして利用できるだけでなく、Windows 11に一機能として組み込まれる。これまでのPCの使い方に大きな変化を及ぼす、生成AIの新機能に触れる人口が大きく増えそうだ。では、具体的にどのような機能が使えるのか。 GPT-4ベースのCopilot Copilotは、人間と会話するような自然な言葉で物事を調べたり、コンテンツを創作したり、アプリの操作を指示したりできる米Microsoftの独自技術だが、ベースとなっているのは「ChatGPT」で一世を風靡（ふうび）した米OpenAIの大規模言語モデル（LLM）「GPT-4」だ。 2社の協業によって、GPT-4に検索エンジン「Bing」のアルゴリズムを統合したものがC
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
イーロン・マスク氏にX(旧Twitter)のCEOへ抜擢されたリンダ・ヤッカリーノCEOが、Xのデイリーアクティブユーザーが失われつつあることを認めました。マスク氏とヤッカリーノCEOの発言を突き合わせると、マスク氏の買収以降およそ数百万人が減少したことがわかっています。 Twitter / X is losing daily active users. CEO Linda Yaccarino confirmed it. | Mashable https://mashable.com/article/twitter-x-daily-active-users-drop-under-elon-musk マスク氏が2022年11月に投稿した一連のツイートによると、10月下旬、買収前週のTwitterのデイリーアクティブユーザー数は2億5450万人でした。この数はしばらくの間増加し続け、11月下旬
「顔を右に」「口を開く」など画像の動かしたい部分をAIがいい感じに修正してくれるツール「DragGAN」のソースコード＆デモが公開される
AIを使って画像を生成する時、「ちょっとだけ修正を加えたい」と思うことは多いもの。そんな人たちの夢をかなえるツールが「DragGAN」です。DragGANは画像の中で動かしたいポイントを指示するだけでAIが自動で修正してくれるというもので、2023年5月に論文だけが提出されていましたが、2023年6月22日にソースコードが公開され、同時にデモも登場しました。 GitHub - XingangPan/DragGAN: Official Code for DragGAN (SIGGRAPH 2023) https://github.com/XingangPan/DragGAN Drag Your GAN: Interactive Point-based Manipulation on the Generative Image Manifold https://vcai.mpi-inf.mpg.
CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます
CSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。 そんなdisplayプロパティで2つのキーワードを値として設定できる2値構文がサポートされます。すでにSafariとFirefoxにサポートされており、ChromeとEdgeは7月リリース予定の115でサポートされます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Slackの新UIを以前のUIに戻す方法 - 秋山界面帳
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
2023年も新しいフリーフォントがたくさんリリースされました！ 2023年、日本語の新作フリーフォントのまとめ
CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
Chrome、IPアドレスを秘匿する機能を実装へ
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
X(旧Twitter)が新しい「広告とは明示されない」広告フォーマットを導入し混乱広がる
VSCodeをWebサイト開発用ツールに ―HTML／CSS／JavaScriptエディタとして強化しよう！
GitHubに大量の悪質リポジトリ、その数“10万超” 感染するとパスワード流出の恐れ
「推測されやすい」パスワードを入力させないためにフロントエンドエンジニアができること
それでも私が<wbr>でなくinline-blockで改行調整をする、たった1つの理由
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
意外と奥深いCSSのfont-weightの話 - ICS MEDIA
伊藤園、「おーいお茶」のパッケージに画像生成AIを活用
シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
Tailwind CSS を使う時に一緒に入れたいライブラリ
日本の漫画「タダ読み」被害深刻化 外国語の海賊版対策 急務に | NHK
decoding="async" について詳しく調べてみる
画像生成AI「Stable Diffusion」で美麗イラストとQRコードを融合させる試み
Tailwind CSSを本気でカスタマイズする方法
VSCodeをプログラミングエディタとして強化しよう！ 便利な設定や拡張機能を紹介
Xのアクティブユーザーが減少傾向にあるとリンダ・ヤッカリーノCEOが認める