はじめに 連続する複数の半角スペースは1つにまとめられたり、先頭末尾の半角スペースは省略される これははじめてHTMLに触れた人が戸惑う部分だと思います。 ではその半角スペース分の空白をどのようにして表示すればいいのかと調べれば、 などの特殊文字を紹介する記事が数多くヒットします。 HTMLでの半角スペースは なんだと強引に表現するサイトもありますが、半角スペースと が異なることは調べればすぐわかります。 もう文字コードから違います。 半角スペースと は別物なのに、半角スペースを表示するために を使っていいのでしょうか？ 答えはNoだと思います。 結論 半角スペースを半角スペースとして表示するにはwhite-space: pre;を使います。 preはおそらくpre要素のpreですね。 white-spaceはCSSプロパティです。 つまり

Akuma.ai http://akuma.ai 2024年2月、日本発のクラウド型画像生成サービスAkuma.aiが、リアルタイム画像生成機能「AIキャンバス」を搭載したことが話題になりました。3月1日には生成枚数が延べ1200万枚に達したと発表。リアルタイム画像生成技術「LCM」を組み入れたサービスですが、高度なPC環境が不要で、タブレットなどからでも簡単に使えるため、国内外の幅広い層にウケたという経緯です。 🎉生成画像1200万枚突破🎉 リアルタイム「AIキャンバス」生成枚数が1200万枚を突破しました！ たくさんご利用いただきありがとうございます。 今後とも #AkumaAI の応援よろしくお願いします🦑 プレスリリースはこちら：https://t.co/Yf3tjxjCsS — Akuma.ai (@AkumaAI_JP) March 1, 2024 日本発の画像生成AIサ

PowerShellのインストール PowerShellを今インストールするなら、最新版は.NET 8を使うVer.7.4となる。しかし、.NET 7を使うPowerShell Ver.7.3やその前のVer.7.2の方が、利用されている期間が長く、さまざまなバグが修正されていて“枯れている”といえる。大部分のソースコードは、前バージョンのものを使うため、新しいからといって枯れていないわけではないが、新規に追加・修正した部分があり、その部分の実績は新しいものほど短いものになる。 ただし、“枯れ”具合は、PowerShellをよほど使い込んでいないとわからないだろう。とはいえ、運が悪いとバグに行き当たることもある。どれにするかはご自分のリスクで判断していただきたい。なお、.NETが毎年11月にバージョンアップするため、PowerShellも毎年11月をメドにバージョンアップが行われる。 Po

「サーバーとは何かを理解して、コンテナ1つで実行しよう | PHPerKaigi2024」 というスライドで FrankenPHP の話が出ており、以前から気になっていたので軽く調べてみました。 FrankenPHPとは FrankenPHPとは簡単にいうとPHPを実行可能なWebサーバーです。公式サイトには次のように説明されています。 The Modern PHP App Server, written in Go しかしこの説明だと少し大雑把で、実際にはFrankenPHPには大きく3つの側面があると感じました。 PHPを実行可能なWebサーバー FrankenPHPは Caddy というGoで実装されたWebサーバー上でPHPを動かすのためのモジュールとして実行できる PHPを実行可能なCLI FrankenPHPはCLI上からもPHPファイル指定して実行できる（この場合はWeb

[AWS Expert Online for JAWS-UG]AWS SAW を使った�トラブルシューティング�効率化のススメ

ワークマンが8,800円のランドセルを売り出すというニュースが「はてなブックマーク」で話題になっていた1。そのニュースに対する反応を見ていて思い出したのだが、私も無印良品の安いランドセルを使っていた。それについて書く。 今ではもう売っていないようだが、かつて無印良品もランドセルを取り扱っていた。一般にランドセルは数万円するところ、無印のランドセルは当時6,150円だった。私は2005年に入学したのだが、ちょうどその年の新入生に合わせて発売された製品のプレスリリースがインターネットに残っていた。 出典：良品計画プレスリリース 6歳の私はどう思っていたか。ませた子供だったので、これがランドセルの相場に比してかなり安いらしいということは理解していた。でも普通のランドセルよりむしろかっこいいなと思っていて、わりと気に入っていたように思う。 ところで、なぜ親は数あるランドセルのなかでこれを選んだのだ

Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが

本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとは​JavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセット​スーパーセットとは、元の言語との

弊社、お客さんがBさんであったりCさんであったりするのだが、Cさん（一般消費者）の方のメールに「えええ？」となることがある。ちょっと増えているような気がする。だいたい、メールフォームからの問い合わせ、注文→二、三往復のやりとり、みたいなんだが、メールフォームよりあとの中身に困ることがある。 とはいえ、おれもきちんとビジネスマナーを学んだがこともないので、次のサイトを参考に見ていく。 3分でマスター！ビジネスメールの書き方・送り方の基本｜マイナビキャリレーション 1. 件名は用件がひと目でわかるように書く まずこれなんよ。なんかみんな件名がいい加減なんよ。「山田です」とか名乗られても「誰だよ？」ってなるし。あと、普通の会社の普通の会社員からの件名でも件名「お伺い」とかでくる。返信のときにこっちが内容に沿ったものに直すんだけど、どうにかならんか。LINEみたいなやりとりに慣れすぎているのか。X

IETFに『Secure shell over HTTP/3 connections』という提案仕様が提出されています。 これは、HTTP/3コネクション上でSSHを実行するプロトコルを定義しています。なお、"SSH3"という名称を仕様中で使用していますが、あくまで提案段階ですので今後変わる可能性もあります。 SSH3ではHTTP/3を使うことにより以下の特徴を持ちます QUICのメリットが享受できる（例えばIPアドレスが変わってもコネクションを維持できる） HTTPの認証方式をサポートする（Basic認証、OAuth 2.0、Signature HTTP Authentication Scheme） SSH通信の秘匿 (第三者からするとただのHTTP通信にみえる) エンドポイントの秘匿 (Signature HTTP Authentication Schemeを使うことで、そこでサービス

構造化ログのプラクティスをあちこちで調べていたら、logfmtを推奨する記事を見つけたので調べてみました。 先に結論を言うと、JSON linesを使っておくのが良さそうです。 logfmt について logfmtとはスペース区切りで key=value を並べたフォーマットです。文字列にはクォートとエスケープによってスペースや改行を含められます。 at=info method=GET path=/ host=mutelight.org fwd="124.133.52.161" dyno=web.2 connect=4ms service=8ms status=200 bytes=1653 (logfmt から引用) あちこちで logfmt のリファレンスとして紹介されているのはこの記事です。 https://brandur.org/logfmt 発明されたのはどこか分かりませんが、流行

昨日うるう日にしか発生しないバグに遭遇した。Javascriptを書く人には有名な話だとは思うので大して面白くはないかもしれないが一応メモ。 詳しくは書けないがバグが発生した関数の仕様としてはざっくりと下記のような感じ。 対象の年月日が基準日の1年前から1年後の間に含まれる場合はtrueを返しそうでない場合はfalseを返す 引数として2020-12-24というフォーマットの文字列が渡される(判定対象の日) 引数として2021-01-01というフォーマットの文字列が渡される(+-1年の基準日) Javascriptで書く (例) 対象の日: 2024/10/10 基準日: 2024/01/28 この時、trueになる範囲は2023/01/28 ~ 2025/01/28。なので2024/10/10はtrue。2023/01/28も2025/01/28もtrueになる。閉区間。 とあるコードの

飲食店で女性客にはさみを突きつけて脅したとして、兵庫県警葺合署は１日、暴力行為法違反の疑いで神戸市中央区の会社員の男（５２）を現行犯逮捕した。 逮捕容疑は１日午後１１時ごろ、客として訪れた同区割塚通７の居酒屋で、カウンターで食事をしていた女性客（４２）に対し、店の洗い場にあったキッチンばさみを突きつけて「殺したろか」などと脅した疑い。 男は「ありえません。していませんし覚えてもいません」と、容疑を否認しているという。 葺合署によると、２人に面識はなく、男が店内でこけるほど酔っていたのを心配した女性客が「帰ったらどないですか」と声をかけると激高した。 女性客は柔道の有段者で、男に関節技をかけて取り押さえたという。

絵師、みたいな感じでさ、良さげじゃん そうしよう、いまから

はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、新規機能実装などに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか なぜ移行

生成AI（人工知能）などを悪用した「ディープフェイク」が大きな脅威になっている。その1つが「顔交換」。自分の顔を他人の顔にすげ替えた動画や画像を生成する。無料あるいは安価なツールやサービスが出回り、誰でも簡単に試せる状況になっている。 顔交換の悪用方法の1つが、生体認証の回避である。顔交換で他人になりすまし、顔認証をパスして不正にログインする。セキュリティー企業の英iProov（アイプルーブ）によると、顔交換を悪用したサイバー攻撃が2023年後半に急増。2023年前半と後半を比べると、報告件数が8倍以上になったという。 顔交換を実現するには、なりすましたい相手の顔情報を盗む必要がある。そのために開発されたと思われるマルウエアを、シンガポールのセキュリティー企業Group-IB（グループIB）が2024年2月15日（現地時間、以下同）に報告した。 Androidスマホ版（Android版）と

ウェビナー『CTOとVPoEが語る、採用とオンボーディング で失敗しないためのベストプラクティス』での発表資料です。 オンボーディングにおいて 注意すべき力学について共有しつつ、 チームとして工夫していることをご紹介しています。新入社員=中途入社の社員さんを"主に"想定しています。 【運営しているサービス情報】 - ITエンジニアの方向け - https://lapras.com - エンジニア採用したい企業の方向け - https://scout.lapras.com

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove

[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <