ジャンプTOON Next.js App Router の活用〜得られた恩恵と課題〜 | CyberAgent Developers Blog
目次 はじめに Colocation を意識した設計方針 Parallel Routes と Intercepting Routes を用いた設計パターン サーバー側に処理を寄せたことによる恩恵と課題 Next.js が抱える課題 おわりに 参考文献 はじめに ジャンプTOON のWeb版（以降、ジャンプTOON Web）の開発を担当している浅原昌大（@assa1605）です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON のフロントエンドには、Next.js を採用し開発をしています。 本記事では、Next.js の最新機能や設計パターン、Next.js を採用した恩恵と現在の課題について紹介します。 Colocation を意識した設計方針 Parallel Rou
『グランツーリスモ7』新アプデ後に“車ウキウキバウンド”現象発生中。いきなりロケット射出されたり、空中回転したり荒ぶる車たち - AUTOMATON
ホーム ニュース 『グランツーリスモ7』新アプデ後に“車ウキウキバウンド”現象発生中。いきなりロケット射出されたり、空中回転したり荒ぶる車たち ソニー・インタラクティブエンタテインメント/ポリフォニー・デジタルは7月24日、『グランツーリスモ7』に向けてアップデート1.49を配信開始。車両挙動シミュレーションモデルに大幅なアップデートがおこなわれた。一方でその影響か、特定のカーセッティングをおこなうと車両が派手に宙を舞うといった、怪現象がさまざま報告されている。開発元では修正に向けて現在調査中だそうだ。 本作は、SIE傘下のポリフォニー・デジタルが手がけるレーシングゲーム『グランツーリスモ』シリーズの最新作だ。対応プラットフォームはPS5/PS4。世界中の60以上の自動車ブランド・400車種以上の車のほか、実在・架空含め多数のロケーション・レイアウトのコースを収録している。 本作は2022
Rust と OS の知識 0 からはじめるRustで始める自作組込みOS入門 - 前半（スケジューラの実装まで） - Qiita
きっかけ・読んでいく本 うさねこらーじの Discord サーバーで、いろいろな先輩たちに技術のことを教えてもらっています。 https://discord.gg/RMq7e5qbQj このなかで、著者の garasubo さんにサポートしてもらいながら以下の本の内容を実装しているのですが、 Rust の知識も OS の知識もない私にとっては内容がかなり高度なので、補助のためにこのブログを作成しています。 Rustで始める自作組込みOS入門 https://amzn.asia/d/ebuOUM1 ぜひこの本を読みながらこのブログを参照していただけると嬉しいです。 第 2 章 ベアメタルで Hello World 単語のかみくだいた説明 ベアメタルプログラミング OSのない環境で実行するためのプログラムを書くことです。この環境下では CPU ごとに決まった動作（たとえば、決まったアドレスにあ
アニメーション実装のテクニックのひとつにFLIPと呼ばれるものがあります。FLIPアニメーションは2つの状態をなめらかにつなげるテクニックで、とくに移動や拡大といった動きに有効です。FLIPアニメーションを用いると、次のようなアニメーションを実装できます。 本記事では、ライブラリに依存しないFLIPアニメーションの原理を理解し、実装する方法を紹介します。 FLIPアニメーションとは FLIPとは、First, Last, Invert, Playをまとめた造語です。これらはFLIPアニメーションの手順を説明したものになります。 First：アニメーションを開始するときの状態 Last：アニメーション終了時の状態 Invert：変化量を計算し、Lastの状態に適用してFirstの状態を復元します Play：Invert量を徐々に減らしてLastの状態に近づけていきます FLIPのおもしろい点
こんにちは、みみぞうです。 ナビタイムジャパンで『システムや開発環境、チームの改善』を担当しています。 今回はターミナルで動くGitクライアントツール『GitUI』を紹介します。 本稿は以下のいずれかに当てはまるような方をターゲットにしています。 ターミナルで動くGitクライアントツールを探している方 NeovimからシームレスにGitの操作をしたい方 Windowsで使えるGitクライアントツール探しに困っている方 ℹ️ Neovimは、Vimをベース拡張性を考慮してモダンな技術で作られたプロダクトです。 GitUIとは『GitUI』はターミナル上でもGUIのように快適なGit体験を提供するOSSのツールです。 GitUI provides you with the comfort of a git GUI but right in your terminal extrawurst/gi
日本語におけるtext-wrapプロパティの運用
CSSのtext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance | CSS and UI | Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが（わかち書き）、それが改行位置を決めるためのヒントとなるからである。
『DEATH NOTE』、『学園黙示録 HIGH SCHOOL OF THE DEAD』、『進撃の巨人』シーズン1~3などの大人気作品の監督荒木哲郎は、アニメ業界の大事な人物である。最近はまた、MVの『COLORs』や『SPY×FAMILY』、『僕の心のヤバイやつ』などのオープニングでファンの注目を集めている。 荒木氏の作品の特徴は、劇的な作風と講談的な物語である。その上、荒木氏は明らかに自分の「色」を持って、撮影へのこだわりで有名です。荒木氏は、映画的な撮影や3DCGなど、今やアニメの定番となった数々の手法の先駆者でもあります。今回のインタビューでは、荒木氏の制作の手法や作品について詳しく伺いました。 聞き手: ワツキ・マテオ 協力: セラキ・ディミトリ 日本語編集: ジョバール・アントワーヌ、ワツキ・マテオ 「光と影が巧みに調和することで美しさが引き立ちます」 Q: 荒木さんは最近、オ
はじめまして！データサイエンティストの山内(@jof_5)です。 本記事では、日々、プロンプト開発されている皆様に向けて、プロンプトを効率的に開発する手法の一つである「自動プロンプト最適化」について記載いたします。 1. プロンプトエンジニアリングの必要性と課題 2. 自動プロンプト最適化について 2-0. 最適なプロンプトとは何か？☕ 2-1. 自動プロンプトの概要 2-2. 自動プロンプト最適化のアーキテクチャ ①Task Executor: LLMによるタスクの実行 ②Output Evaluator: 出力の評価 ③ Prompt Improver: 最適なプロンプトの生成 3. 実験結果と考察 3-1. 自動プロンプト最適化の有効性の検証 3-2. 最適化プロンプトの生成過程 3-3. 最適化されたプロンプトの特徴 3-4. プロンプト生成用LLM(Prompt Improver
ドキュメント執筆にもGit、ビルド、テストで再利用性や整合性を実現する「Writerside」、JetBrainsがプレビューリリース
Kotlinなどの開発元として知られるJetBrainsは、テクニカルドキュメントのための一連のツールを統合したドキュメントオーサリングツール「Writerside」のプレビューリリースを発表しました。 ソフトウェア開発においては、テキストで記述されたソースコードをGitでバージョン管理し、ビルドによって複数のソースコードを1つのアプリケーションへとまとめ上げ、コンパイルし、テストをして本番環境へのデプロイによりアプリケーションを公開します。 そしてこのプロセス全体を、さまざまな機能を備えたツールチェンを用いて自動化することで、ソフトウェア開発の効率を高めています。 一方で、例えばアプリケーションのチュートリアル、SDKやAPIのリファレンスドキュメントなどのドキュメントの制作過程においては、複数のファイルをフォルダにまとめ、手作業で目次のページとリンクさせることや、ソースコードのサンプル
「窓ぎわのトットちゃん」八鍬新之介監督インタビュー 「本当に人の心に届くモノにするためには、妥協はできない」 | スタッフ | レポート | WebNewtype
「窓ぎわのトットちゃん」八鍬新之介監督インタビュー 「本当に人の心に届くモノにするためには、妥協はできない」 現在公開中のアニメーション映画「窓ぎわのトットちゃん」。「徹子の部屋」などで現在もタレントとして活躍する黒柳徹子が、みずからの幼少期を綴った大ベストセラーの初のアニメ化となる本作は、原作の核心をしっかりと押さえながらも、アニメーションならではの楽しさと喜びに満ちた快作に仕上がっている。 その監督を務めたのは、TVシリーズ「ドラえもん」のメインスタッフとして活躍し、「映画ドラえもん 新・のび太の日本誕生」など、劇場作品でもらつ腕を振るう八鍬新之介だ。無事公開を迎えたばかりの八鍬監督に、制作中のエピソードなどをうかがった。 ――すでにいろんなところで聞かれているかもしれないんですが、まずはなぜ『窓ぎわのトットちゃん』をアニメ化しようと思われたのか、きっかけをうかがえますか？ 八鍬 20
テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／
CSS Gridの便利な無料ツールが登場！ レイアウトを確認しながら、コードを生成できる -CSS Grid Generator
最近のWebサイトやスマホアプリでよく使用されるお弁当箱のようなBento UIやカード型、ヘッダ・サイドバー・メイン・フッタなどのレイアウトを確認しながら、CSS Gridのコードを生成できる無料オンラインツールを紹介します。 使い方は非常にシンプルで簡単、生成されるコードもシンプルでさまざまなプロジェクトで利用できます。 CSS Grid Generator Bento UIの実装については、Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUIをご覧ください。 CSS Grid Generatorは、CSS Gridで実装するレイアウトのコードを簡単に生成できるオンラインツールです。このジェネレーターを使用すると、列数・行数・ギャップサイズを設定し、自由にレイアウトを構築できます。
［インタビュー］ゲーム業界でがんばっ定年！ サクラ大戦をドット絵から“今の感じ”に転換させたグラフィッカー，吉田 徹氏（58歳）
［インタビュー］ゲーム業界でがんばっ定年！ サクラ大戦をドット絵から“今の感じ”に転換させたグラフィッカー，吉田 徹氏（58歳） 編集部：楽器 カメラマン：永山 亘 セガ ジャパンアジアパブリッシング事業本部 マーケティング本部 Webデザイン部 部長の吉田 徹氏 ゲーム業界では秀作を生んだクリエイターが名を上げ，いつしか会社の顔となり，界隈の代弁者として，業界の印象を形成してきた。 しかし，彼らの総数は業界従事者の1％ほどだろう。その裏には開発のみならず，広報や経理，社内エンジニアにカスタマーサポートなど，名を上げずとも人生を生きる99％側の“名もなき戦士たち”がいる。 言い換えればそれは我々であり，世界の大多数だ。 ゲーム業界自体，未成熟ゆえの輝きがあった昭和・平成時代とは違い，今では就業規則に福利厚生にコンプライアンスにと成熟した。大手を中心とする一部メーカーでは徐々に“定年退職者”
こんにちは、 デザインの仕事でご飯を食べている人です。 皆さんはシャニソン、楽しんでいますか？ 私は楽しんでいます。 ドレスアップルーム最高！！！！！！！ 前回に引き続きシャニソンのデザインについて 語っていこうと思います。 （5月18日 追記） ※前編に書きました通り、筆者は漫画や映像のデザインの仕事をしている為UIデザインは未経験です。また、衣装チケットの内容を全面に押し出すのは法律の都合上難しい可能性が高いと複数のご指摘を頂いております。そちらをご了承の上ご覧ください Pガシャ画面の話今回はこの画面について考察します。 画面内に入れる要素が増えて、前回考察した サポガシャよりもレイアウトの難易度が 上がりました。 デザインの前にこのガシャの目玉であるおまけ衣装を画面に入れていない点が猛烈に気になります。 全員がXの情報を追っているわけではないので 絶対にガシャ画面に入れたほうが良いと
2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 一般的には、デザインシステムとは一貫したデザインや操作性でWebサイトやアプリケーションを提供するためのガイドラインの集まりと理解されます。使われ得る色のパレットや可能なスペー
次世代フレームワークRemixで簡単なフルスタック開発を体験する - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 最近話題のRemixを使って、シンプルなTodoアプリを作成する方法をご紹介します。 Todoアプリの作成を通じて、簡単なフルスタック開発を体験していただければと思います。 はじめに プロジェクトの作成 モデルの定義 Root Routeについて ルーティングについて 一覧画面の作成 新規追加画面の作成 編集画面の作成 削除機能の追加 まとめ プロジェクトの作成 はじめに以下のコマンドを実行して、プロジェクトを作成します。 ※Node.js v18以上、npm v7以上がインストールされていることが前提です。 npx create-remix@latest --template remix-run/indie-stack 今回はindie-stackというテンプレートを使用しています。 この
ゆずソフトの美少女ADV『千恋＊万花』、全世界で40万本売れていた。2016年に発売された美少女ゲームの金字塔 - AUTOMATON
国内の美少女ゲームメーカーゆずソフトは10月24日、『千恋＊万花』の全世界セールスが累計で40万本を突破したことを公式Xアカウントにて発表した。本作は全年齢版がPC（Steam）およびNintendo Switch向けに、18禁版がPC（FANZA/パッケージ）向けに発売中だ。 『千恋＊万花』はゆずソフトが手がけた美少女アドベンチャーゲームだ。舞台となるのは文明開化から取り残された、古き良き時代の街並みと温泉街のある穂織（ほおり）という町。この町にある建実神社には、岩に突き刺さった状態で引き抜けない神刀・叢雨丸があり、穂織の町の観光資源にもなっていた。 本作の主人公は有地将臣。彼は祖父の営む旅館の手伝いのために穂織の町を訪れていたが、叢雨丸を抜いて（折って）しまい、選ばれし者とみなされることに。そして、建実神社の巫女姫である朝武芳乃と結婚を迫られることになる。そんな彼の前に、叢雨丸に宿る少
B作 @Btoretsukuru 見て！この粘るカメラの動き‼️ 注射器の圧を使ってゆっくーーり滑らかにスライド撮影する方法考えた！！ 100均の注射器です！ ミニチュアの撮影で立体感が増しますよ！ #鉄道模型 #Nゲージ #Bトレ #ジオラマ pic.x.com/82btoz0lqt B作 @Btoretsukuru 鉄道模型Nゲージ情景レイアウトの作製、Bトレ車両改造などやってます。鉄ネタ・模型ネタをつぶやきます。国鉄時代の四国非電化路線が好きです。貨物・線路・廃線/未成線も好きです。 btr.xii.jp/a/b/
この記事は 食べログアドベントカレンダー2023 の23日目の記事です🎅🎄 こんにちは。食べログシステム本部 技術部 仕入チームの@shohei-yです。 今回は、新規事業の「食べログ仕入」プロダクト開発において所謂「設計書」を書かない設計に挑戦して開発効率を向上させた話を書きます。 （結局「書くの？書かないの？どっちなんだい！」と感じた人は、ぜひ読み進めてください。） 所属している仕入チームについてはこちらの記事をご覧ください。 目次 なぜ設計書を書かない設計に挑戦したのか 設計書を書かないチーム 設計書を書かないことによる問題 1. チーム協力の課題 2. ソースコードの複雑化 3. チーム変動に関わる問題 設計工程導入のきっかけ 設計書を書かない挑戦の背景 設計書を書かない設計 フロントエンド・バックエンドのインターフェースの明確化 ソースコードのスリム化対策 設計のレビュー方法
16年前に住んでいた学生寮に泊まる
大学生の頃に住んでいた学生寮「ドーミー立川」。 ひょんなことから、特別に一泊させてもらえることになった。 当時の寮仲間たちと一緒に、思い出の部屋へ帰る一日の話。 かなり大きい観葉植物が部屋に2つあり、どちらも枯れている。「旅のラジオ」を毎週更新中。著書に『１歳の君とバナナへ』（小学館）、『0メートルの旅』（ダイヤモンド社）、『10年間飲みかけの午後の紅茶に別れを告げたい』（河出書房新社）。 前の記事：マレーシアの「世界最大級」の盆踊り大会へ行ってきた ＞ 個人サイト note 思い出の寮「ドーミー立川」 18年前。大学にいくため上京して、学生寮に住んだ。いろんな大学の学生や社会人も住んでるような、民間企業の運営する寮だった。東京都立川市にあるその寮の名を、「ドーミー立川」という。 ドーミー、と聞くとホテル「ドーミーイン」を思い浮かべる方が多いかもしれない。事実、この寮はドーミーインに深く関
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ
Rust製ブラウザエンジンの「Servo」、アプリに組み込み可能なクロスプラットフォーム対応WebView化を目指す。Electron代替を目指す「Tauri」への組み込み実現へ Rust製のWebブラウザエンジンとして開発が進められている「Servo」は、Servoをアプリケーションに組み込み可能なクロスプラットフォーム対応WebVeiwとする方向で開発を進め、それをアプリケーションフレームワークのTauriと協力してTauriがサポートする予定であることを発表しました。 TauriはElectronの代替を目指す、Web技術を用いてアプリケーションを開発するためのフレームワークです。 参考：Electron代替を目指すRust製フレームワーク「Tauri」がバージョン1.0に到達、Windows/Mac/Linuxに対応 現在のTauriは、UIのレンダリングエンジンとして、Windo
RAG の精度を向上させる Advanced RAG on AWS の道標 | Amazon Web Services
Amazon Web Services ブログ RAG の精度を向上させる Advanced RAG on AWS の道標 生成 AI の進化と共に、大規模言語モデル (LLM) を活用したアプリケーション開発が急速に広がっています。その中で、検索拡張生成 (Retrieval-Augmented Generation; RAG) は、LLM に対して最新の情報や特定のドメイン知識を組み込むための重要な技術として注目を集めています。 RAG は、その名の通り、外部知識ベースから関連情報を検索し、それを LLM の入力に組み込むことで、より正確で最新の情報に基づいた回答を生成する手法です。この手法には以下のような重要な利点があります。 最新情報の反映: LLM の学習データの制限を超えて、最新の情報を回答に反映させることができる。 ドメイン特化: 特定の分野や組織固有の情報を容易に組み込むこ
終わっちゃいましたね『X-CON』｜しょう
はじめにえっと…この投稿は12/8～10に開催予定のX-CONへ期待することと個人的に妄想を書くつもりで執筆を始めました。が、なんか運営怪しくね？雲行き悪いなと思い結局中途半端に92文字しか書いてないです。 一旦その下書きをそのまま引用しておきます。 約2ヵ月前にこんなつぶやきをしました。 https://note.com/embed/notes/n1cf8b6e10598 CDJも外れて12月のライブ予定も無くなったので初日に行く予定なのですが1ヵ月を切っていろいろ怪しいとことが見え隠れして来た。 1点目は9月末時点で https://natalie.mu/music/news/543661 https://natalie.mu/music/news/543450 以上、11月10日時点の下書き結論から言うとこの92文字で怪しんでいた通り全公演中止となりました。 引用内では埋め込みが出来
QAエンジニアがいない会社に入社してやったこと、まだやれてないこと - TalentX Tech Blog
はじめまして。2023年2月に入社したQAエンジニアの大出です。 前職はフリマアプリを開発する会社で約8年QAエンジニアとして働いていて、TalentXで初めてtoBのサービスのQA業務を行うことになりました。 入社前の状況 やったこと 新規開発の検証 テストプロセス改善 テスト計画の作成 ドキュメントの整理 バグチケットの整理 ドッグフーディング 採用 まだやれてないこと 終わりに TalentXは2015年にMyReferというサービスをリリースして以来、2023年2月に自分が入社するまで社内にソフトウェアテストを専門に行うメンバーは在籍しておらず、開発エンジニアが自分達で全てテストを行っていました。 そういう状況で私が入社してから約1年間でやってきたことを振り返りたいと思います。 TalentXの開発に興味がある人や、ソフトウェアテストを専門に行うメンバーが居ない会社でこれからQAエ
CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる
CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直
MSNまとめ 【週刊現代】 被害女性激白 今田耕司・宮迫博之・山下しげのり・入江慎也たちによる“恐怖のホームパーティ”★37
1 ：夢缶1号φ ★：2008/03/21(金) 20:19:04 ID:???0 ◇被害女性 激白 今田耕司（４２歳）と宮迫博之（３７歳）「恐怖のホームパーティ」（１／４） 「頬をビンタされた」「無理やり下着を…」「気取りやがって」「じゃあ、君ら、帰ってくれるかな」 ─「お笑いブーム」続いている。ゴールデンタイムにテレビをつければ、そこには必ずお笑い芸人の姿。 お茶の間に笑いを提供する彼らだから、仕事を離れたプライベートでも陽気な生活を送っているはず、 と思いきや……。 ▼終電後に「女の子を集めろ」 確かに私も、今田さんや宮迫さんみたいな大物の飲み会に呼ばれて舞い上がっていました。 それに幹事役の芸人さんとは親しかったから、ヘンなことはされないと思いこんでいた。 でも、間違いでした。３人の男たちにもみくちゃにされて、すべてが終わったときには「私って何なの？」って感じた。 本当に惨めでした
margin: auto;は非常に便利なCSSで、使用することも多いと思います。 そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。 All About 'margin: auto' in CSS: Centering and More by Ritika Agrawal 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 「auto」とはどういう意味ですか？ 「利用可能なスペースを占める」とはどういう意味ですか？ ブロックレベル要素でautoを使用する 絶対要素でautoを使用して中央配置 CSS GridとFlexboxでautoを使用して中央配置 Flexboxとa
こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief de
ADHDの特性をハックして生産性を爆上げする方法
ADHDは注意欠如・多動性障害とも呼ばれるように、集中力や落ち着きがないという特性を中心とした発達障害です。ADHDにはデメリットがある一方で、興味を持ったタスクに対して超集中できるなどのメリットも存在しており、うまく特性と付き合うことで生産性を向上させることが可能です。そうしたADHDについてのテクニックについて、44歳でADHDの診断を受けたというエンジニアのラファエル・ルメートルさんが解説しています。 Hacking ADHD - Strategies for the Modern Developer | Ledger https://www.ledger.com/blog/hacking-adhd-strategies-for-the-modern-developer ADHDの症状は7歳ごろまでに明らかになると言われていますが、ルメートルさんのように、大人になってからADHDの診
札幌の牛トロ丼と美味いカツカレー
行く先々で「うちの会社にはいないタイプだよね」と言われるが、本人はそんなこともないと思っている。愛知県出身。むかない安藤。（動画インタビュー） 前の記事：Y染色体がいつかなくなるって本当？研究者に聞きました ＞ 個人サイト むかない安藤 Twitter はじめは見逃しました 最初に「牛とろ丼」を見たのは札幌のレストランだった。 牛とろって何？と思ったけど、この時は一人だったしおなかいっぱいだったので入らずに通り過ぎてしまいました へー札幌には変わった食べ物があるなー、くらいに思い、滞在中にいつか食べればいいやと通り過ぎたのだ。 それからしばらく牛トロ丼のことは忘れていて、サンドイッチを食べたりチャーハンを食べたりセイコーマートに行ったりして楽しく過ごした。 セイコーマートの温かいおにぎりが好きです こうしてすっかり忘れていた牛トロ丼だが、この数日後に思いがけず食べることになる。運命ってほん
“やたら強くなりまくる”無料ブロック崩しゲーム『Brick Devastator』が大人気。すくすく超強化でステージの枠ごと壊せるパワーインフレブロック崩し - AUTOMATON
インディー開発者のmasaK氏が手がけたブロック崩しゲーム『Brick Devastator』が、SNS上でにわかに大きな注目を集めているようだ。本作は、itch.ioにて公開中。 本作は、“やたら強くなりまくる”ブロック崩しだという。今年5月6日に無料で公開され、PCおよびスマホ・タブレットのWebブラウザ上でプレイ可能。 『Brick Devastator』は、『アルカノイド』などに代表される定番ブロック崩しゲームをもとにした作品だ。多数のブロックが配置されたステージにて、画面下にあるバーを左右にスライドさせてボールを上手く弾き返しながら、ブロックにボールを当ててすべて破壊することを目指す。全15ステージ収録され、ボールを弾き返せず失ってしまうとゲームオーバーだ。 本作には、破壊できないブロックの存在を含めさまざまなレイアウトのステージが用意。そしてプレイ中にブロックを破壊した際には、
膨大なアニメの原画や動画を後世に伝えるためにはどうやって保存すべき？「2Dアニメの素材アーカイブについて！」をTRIGGER取締役が語る
アニメの原画や絵コンテ、設定資料集はアニメを作る上で必要な資料ですが、アニメが完成すると使うことはありません。こうしたアニメ制作の素材はこれまで時間が経ったら廃棄されていましたが、さまざまな理由で保存するべきではないかという声も挙がっています。「キルラキル」「プロメア」で知られるアニメ制作会社のTRIGGERもこうした素材をアーカイブする事業に着手しており、その辺りをたっぷり語る「2Dアニメの素材アーカイブについて！」というトークイベントをマチ★アソビ Vol.27で開催していたので、じっくり聞いてきました。 2Dアニメの素材アーカイブについて！ マチ★アソビvol.27 : イベント情報 - アニメハック https://anime.eiga.com/event/162818/ 2000年にアニメ業界に入って23年目になる舛本和也さんは、クリエイターではなくて制作進行からスタートしてアニ
先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents; とは？ 2-1. display:contents;の概要 display:contents;を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。 Mdn Web Docsでは以下のように説明されています。 これら
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。 See the Pen Shin
Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5
スタジオダブの裏話: サンライズの名作アニメを作った人々 - 西村誠芳ロングインタビュー - fullfrontal.moe
スタジオダブの裏話: サンライズの名作アニメを作った人々 – 西村誠芳ロングインタビュー by Matteo Watzky | Feb 16, 2024 | インタビュー | 2 comments 1980年代または1990年代のサンライズのアニメを見たことがあるなら、西村誠芳の作画を見たことがあるか、西村氏の名前を知っている可能性があります。アニメーターと作画監督として、西村は主にサンライズと協力している作画会社、スタジオダブの中心メンバーの一人でした。ダブは、東京ではなく福島県いわき市に設置されるという特殊性を持っていました。 西村氏は、『CITY HUNTER』、『ダーティペア』、『機動警察パトレイバー PATLABOR ON TELEVISION』など、サンライズの最も代表的な作品のいくつかを務めました。または、『機動戦士Vガンダム、『機動武闘伝Gガンダム』、『新機動戦記ガンダムW
PDFを見返すと独習を始めた頃の線形代数のノートはほとんど殴り書きで、単に計算用紙としてノートを使っています。微分積分に入ると少しはましになってきますが、頭に入れたい概念の定義や定理の証明を何度も書き直したりしています。また独習ですから間違った理解を正しいと思い込んだまま証明を書いて、分かったつもりになっている箇所も少なからずありそうです。とまれ上記の表に挙げた各書籍に曲がりなりにも取り組んだことを示す、書証のつもりでノートを晒しました。 余談ですが、使用したノートは、PLUS の品番 NO-204GS (A4 G罫 5mm方眼 40枚) という方眼ノートです。また筆記用具は当初シャープペンシルを使っていましたが、「オイラーの贈物」からは万年筆に替えました。プラチナ#3776センチュリーUEF(超極細字)を使っています。 1.3 私について 本記事の作者であり学び直しをした本人である私は、
これからはXのリンクカードを小さいやつにするのが良さそう
Xでの大きいタイプのリンクカード（summary_large_image）からタイトルが消えたことで、さっそく悪用する人が出てきたようです。 写真を4枚並べた投稿を装いスパムサイトに誘導するポスト、X（旧Twitter）で増殖中 - やじうまWatch summaryならこれまで通りタイトルが表示される 一方で小さいタイプのリンクカード（summary）の表示のされ方は変更されていません。サムネイルは小さな正方形ですが、Webページのタイトルはこれまで通り表示されます。 今後は基本summaryがよさそう 情報のほとんどが画像となってしまったsummary_large_imageは、新規サイトにおいてはよっぽどの理由がない限り選ばない方が良いと思います。画像の中にタイトルを入れたとしても、リンクごとに画像のレイアウトやデザインがバラバラで見る人の負担は大きくなります。悪用が増えれば、ますま
デジタル庁は、ダッシュボード開発において品質向上、および設計の効率化に貢献するため、実践ガイドブックとダッシュボード開発ツールのPowerBIのチャート・コンポーネントライブラリを公開します。 資料のダウンロードから取得してください。 公開の目的デジタル庁は、データと根拠に基づいた政策判断・効果の可視化を日本政府内で推進を先導する役割を担っています。その役割の一端を担い、行政や公共機関、民間企業などに従事する方が、わかりやすいダッシュボードを効率的に開発できるように、実践ガイドブック等を提供しています。データをわかりやすく可視化できるようにすることで、多くの関係者間で正しい共通認識を持ち、意思決定の質を向上させ、より良い行動に繋げられるようになることを目的にしています。 実践ガイドブックは、デジタル庁で実践してきた政策データダッシュボードの作成時の知見に加え、行政職員や民間有識者のダッシュ
はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦しました。 この記事は、そんな私が RSC の理解を深めるために様々な記事から学んだ内容を言語化したものです。 まず初めに、CSR や SSR といったこれまでのレンダリング手法について復習し、これらが抱える問題を確認します。その後、その問題を解決する RSC が何者なのか？を理解します。 CSR の復習 React では CSR 戦略が用いられてきました。 CSR では、クライアントが受け取るのは次のような中身のない空
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptで実現するFLIPアニメーションの原理と基礎 - ICS MEDIA
『GitUI』を使ってターミナルからでも直感的なGit操作を｜NAVITIME_Tech
アニメの色と撮影 - 荒木哲郎ロングインタビュー - fullfrontal.moe
自動プロンプト最適化をやってみた - Algomatic Tech Blog
HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA
シャニソンが抱える問題をデザイナーの視点で考察する①ガシャ画面編【後編】｜noteさん
Tailwind CSSでデザインシステムを構築する［前編］ ～「契約」としてのデザインシステム | gihyo.jp
見て! この粘るカメラの動き→100均グッズひとつでミニチュアの動画がこんな立体感で撮影できる「これは覚えておきたい」
設計書を書かない設計で開発効率を向上させた話 - Tabelog Tech Blog
CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック
プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog
display:contents;って何？どんな時に使うと便利なの？ - Qiita
HTML/CSSでできる、押したくなる最新Webボタンエフェクト集
実践Next.js - App Router への理解を深めるために -
50代になってから始めた数学の学び直しを振り返り、独習ノートを晒します。
ダッシュボードデザインの実践ガイドブックとチャート・コンポーネントライブラリ（ベータ版）｜デジタル庁
React Server Componentsを理解したい