倭国政府の現状

・中国人留学生への入国審査で、国家情報法リスクを一切考慮していない

・文部科学省の国費外国人留学生制度＋自治体奨学金で、中国人留学生に年間約80～100億円の税金を投入している（2024年度実績）

・スパイ防止法は未制定、経済安全保障推進法も留学生分野ではほぼ機能していない

・大学内の中国人留学生団体（CSSA）は大使館・領事館の指導下にあることが複数の公文書で確認されている

このまま放置すれば、先端技術の流出はもちろん、在日中国人留学生を通じた学内監視・言論統制・政治工作がさらに加速する。

すでに東大・京大など主要大学では中国人留学生比率が20％を超え、研究室単位で過半数を占めるケースも出ている。

「平和ボケ」という言葉ではもう済まされない。
これは国家安全保障上の明確な遅れであり、早急な法整備と審査強化が求められる。 December 12, 2025

文字に遊びを入れてみるCSSアニメーション https://t.co/mTnZOlED4H December 12, 2025

CSSプロパティのリファレンス全部読んだ話で登壇しました！
聴きに来てくださった方ありがとうございました〜
#fec_kansai
https://t.co/HUQFy3lLdh December 12, 2025

同じプロンプトなのに、ここまで差が出るの…!?

GPT5.1 / Gemini-Pro / grok-4.1 / Opus-4.5 に「横から見た6連リボルバーが6発撃ち切るHTML/CSS/JSアニメ」というお題で精度チェック。

複数条件の正確な順次アニメーション」、かなり良いテスト。
THX：@diegocabezas01
https://t.co/uUtBYS3Pji December 12, 2025

昨日の夜の思いつき💭
HTML・CSS・jsでスノードーム作り⛄️
CSSでアニメーションさせて粉雪やラメはjsで量産❄️
子どもに見せたら喜んでボタンぽちぽちしてた😂

スノードームの中の画像は画像パス変えると変更できるのでオリジナルに変えられます🫶

https://t.co/UyaAL41GSw https://t.co/PcRaYmLMR2 December 12, 2025

【CSSレベルをちょっと上げたい人へ】

1440pxではキレイなのに、
1000pxくらいになると急に崩れる…
これ、制作あるあるじゃないですか？

そんな微妙な値の調整を救ってくれるのが
みんな大好きclamp関数

「最小値 → 理想値 → 最大値」で
値をコントロールできる超便利なやつです

例）
font-size: clamp(16px, 2cqi, 24px);
（cqi → container幅の2%って意味）

16〜24pxの範囲で、
いい感じに調整してくれるし、

細かくメディアクエリで
レスポンシブ対応する手間も全カット

clampを覚えるだけでめちゃめちゃ柔軟に
レイアウトを組めるようになりますよ！

コンテナクエリーとの組み合わせが鬼強いから
その解説はまた今度😌 December 12, 2025

【Web制作者は知っておこう！って感じのCSS Tips】

Webコーダーのみなさま、
grid使ってますか？？

display: grid;
grid-template-columns: repeat(3, 1fr);

みたいなやつ、
便利でいいですよね。

でも、もっと柔軟に並べたい時が、ある・・！

ってなわけで、
そんなときに大活躍する
「 auto-fit / auto-fill 」
について紹介します😌

✅️auto-fit
→ 入るだけ入れて、空き枠は潰す
→ カードがギュッと詰まるレイアウトになる

✅️auto-fill
→ 枠の数を維持する
→ カードの幅が勝手に広がらず安定する

auto-fit：画像を詰めてほしいギャラリー系
auto-fill：幅を固定したいUI（カレンダーとか）

という感じに使い所によって使い分けていきましょ🙌

使うときのコツも添付にまとめてるから
保存して何度も見返してみて〜！ December 12, 2025

[开源推荐] QA-Use: AI 驱动的下一代自动化测试平台

qa-use 基于 @browser_use 核心库构建，是面向生产环境的自动化 QA 测试解决方案。不再依赖传统的、死板的代码脚本（如 Selenium 或 Playwright 需指定具体的 CSS 选择器），而是利用 LLM 和 智能体 技术，让计算机像真人一样“看懂”网页、“理解”测试意图，并执行测试任务。

核心价值与痛点解决
这个项目之所以重要，是因为它试图解决传统自动化测试领域的最大痛点：脆弱性 (Brittleness)。

· 传统方式：测试脚本往往绑定了具体的页面元素（如 div#submit-btn）。一旦开发人员修改了页面布局或重命名了 ID，测试就会报错，维护成本极高。
· qa-use 的方式：你只需用自然语言描述目标（例如：“登录并在搜索栏输入 iPhone”）。AI 会通过视觉和 DOM 分析，动态寻找搜索框在哪里，即使按钮位置变了，只要逻辑还在，测试就能通过。

主要功能亮点
1. 自然语言定义测试
· 用户可以用纯文本编写测试步骤。
· 示例：打开 google. com，搜索 “OpenAI”，验证结果页是否包含官网链接
· 优势：非技术人员（如产品经理）也能轻松编写测试用例。

2. 智能容错与自适应
· 利用 AI 智能体执行操作。如果遇到弹窗、广告或加载延迟，AI 会像人类一样尝试关闭弹窗或等待，而不是直接抛出错误。
· 具备“视觉理解”能力，能够基于页面截图判断交互逻辑。

3. 完整的测试管理系统
· 不仅仅是一个脚本运行器，它提供了一个完整的 Web 界面（基于 Next.js）。
· 功能包括：
· 测试套件管理：将多个测试组织在一起。
· 定时任务：支持按小时/天自动运行测试。
· 并行执行：同时运行多个测试以节省时间。
· 智能报告：测试失败时发送邮件通知，并提供详细的 Pass/Fail 报告。

4. 基于 BrowserUse 核心
它是 browser-use 生态的一个实现。browser-use 是底层库，负责“控制浏览器”，而 qa-use 是上层的“应用平台”，通过 Docker 即可一键部署。

技术架构简述
· 核心引擎：BrowserUse
· 前端/全栈框架：Next.js (React)
· 语言：TypeScript / Python
· 数据库：PostgreSQL
· 部署：Docker & Docker Compose

适用场景
· 回归测试：在产品快速迭代中，确保核心功能（如注册、下单流程）不崩坏。
· 端到端测试：模拟真实用户从进入网站到完成任务的全过程。
· 低代码/无代码测试：适合没有深厚编程背景的 QA 团队快速建立自动化体系。

开源项目
https://t.co/KbAxoVx4Pv

最后下面的信息卡，受 @JefferyTatsuya 启发把信息卡做了一些调整，文字和快速阅读体验更好一些，晚点再把新的提示词发出来。 December 12, 2025

どなたか！WebデザインやCSSに詳しい方はいらっしゃいませんか？？？
僕とClaude Codeではここが限界なので、改善点とか頂けると嬉しいです🙏

カンファレンスを0から一緒に作るチャンス！
何もスタッフをやらなくていいんです
コミュニティへの貢献やアウトプットは簡単にできますよ〜！
#OutputConf https://t.co/c59G8TDdWZ December 12, 2025

🎀お知らせ

動く！猫天使なチャンネル登録者数カウンターを
BOOTHにて販売開始いたしました🫡🩷
水色、ピンクの２色展開です。

OBSのCSS欄に記入していただくタイプです！
最新版のOBS(32.0.2)で動作確認済みです。

🩷販売開始から２４時間限定でタイムセールを行っております🩷

セミオーダーでオリジナルカラーの作成も受け付けております！ December 12, 2025

HTML 4.01 Strict であれば、その辺で配布されてたフリーのCGIスクリプトが吐き出す画面を Lint Gateway で満点が取れるように改修できる程度のスキルしかなかったので「書ける」とは言えないな…（現行のHTML 5系や CSSやJSなどを組み合わせてなんか色々いい感じにやれるとは言ってない←） https://t.co/AcYZwWGRq5 December 12, 2025

【いよいよ明日から開催！】
#デイトラポケット
BLACK FRIDAYセール🎉

11/28(金)〜12/4(木)の7日間限定で、
デイトラポケットの講座がお得になります！
https://t.co/RjqcnW1vAl

今日はセール対象の講座をご紹介🐯✨

🎥After Effects
▼ イケてるアニメーション制作に挑戦したい方に！
・【脱初心者】After Effects タイトル映像講座｜3つの作例から学ぶ"魅せる"アニメーション演出（🔖10%OFF）
・【はじめてのAfter Effects】5つの作例で手を動かしながら学ぶアニメーション入門講座（🔖10%OFF）

🎨デザイン
▼ 仕事に活かせるデザインスキルが学べる！
・FigmaでレスポンシブWEBデザイン作り方！Figmaの基礎からWEBデザイン実践まで解説！（🔖33%OFF）
・画像制作やパワポ資料、SNSにも使える！デザインとレイアウトの基本。（🔖33%OFF）

💻️Web制作・開発
▼ コーディングの実務レベルを上げたい方に！
・Astro+microCMSでフロントエンド開発入門（🔖30%OFF）
・【一番さいしょに学ぶ】JavaScript超基礎講座（🔖33%OFF）
・最新ChatGPTを活用して Javascript+HTML / CSS のコードを自動生成　高品質WEBページ開発講座（🔖33%OFF）
・jQueryを実装してWEBページにJavascriptの効果をつけよう（🔖33%OFF）
・WEBデザイナーコース　最新HTML5/CSS3をゼロから全て学ぶ（🔖33%OFF）

🛒Shopify
▼ ECサイトを作りたい人 必見！
・『Shopify x JavaScript を学ぶ』 Vol.1 JavaScriptの基礎（🔖5%OFF）
・ShopifyとAIを使ってコーポレートサイトを作ろう！（🔖33%OFF） December 12, 2025

5分で授業用ゲームが完成！？👀 先生の教材作成時間を激減させる方法。

本日、Google AI Studio / Gemini を活用して、学校現場で役立つ教材アプリをつくった。

この実践は、教育コミュニティ 「もくもく会」 で学んだことの復習。

🛠️ 教材作成の具体的な手順（所要時間：約15分）
* AI Studioに指示を出す:
* 作りたいゲーム（例：小5算数 公倍数を見つけるゲーム）のルールと目標を具体的に指示する。
* 「Googleサイトに埋め込みたいので、HTMLファイル形式で出力してください」 と伝える。
* コードの生成と確認:
* GeminiがHTML、CSS、JavaScriptを含むコードを生成。
* プレビューで意図通りに動くか確認し、必要に応じて修正点をAIに指示（例：デザインの調整、問題数の変更など）。
* Googleサイトへの埋め込み:
* 生成されたHTMLコードをコピーする。
* Googleサイトの編集画面で「埋め込み」機能を選び、HTMLコードを貼り付ける。

⚙️ 作成方法とメリット
* 方法: 複雑なビルド機能は使わず、HTMLで動作するシンプルなアプリを構築。
* 最大のメリット: 作成したアプリを Googleサイトに即時埋め込み可能 な点。
* Google Workspace環境下で、教材の整理・共有・配布を効率化できます。
📚 実際に作った教材例
* 小学5年生算数：公倍数を見つけてクリックして当てるゲーム
* 約分するゲーム

このスピード感は、今後の校内研修などで教員同士が共同で教材を作成する上で、大きな可能性を秘めているのでは？
#GoogleAIStudio #Gemini #Googleサイト #教材開発 #もくもく会 #AIでゆとりを取り戻す #EdTech December 12, 2025

【手順②のプロンプト】

# 命令
アップロードされた画像を分析し、その内容を忠実に再現した「SVG生成・ダウンロードツール（HTML/JS）」を作成してください。
以下の【プロセス】と【要件】を厳守し、単一のHTMLファイルを出力してください。

---

## プロセス1：画像分析とJSONデータ構築
画像内のレイアウト、テキスト、図形、色を分析し、JSONデータ構造を作成します。
**特に「アイコン」の扱いに注意してください。**

1. **テキストとレイアウト**: 画像内の文字、改行位置、配置座標、背景色を正確に読み取る。
2. **アイコンの知的置換**:
画像内の図形やアイコンを、単なる四角形（rect）ではなく、以下のルールに従って外部Webアイコン（image）に置換する。
- **有名ブランド/サービスの場合**: `Simple Icons` (CDN) のURLを使用する。色はブランドカラーを維持。
例: Excel -> `https://t.co/uv9yw9zsKa`
- **一般的な概念（書類、検索、メール等）の場合**: `Lucide` または `Material Design` (Iconify経由) のSVG URLを使用する。色はグレーまたは画像に近い色を指定。
例: 書類 -> `https://t.co/Ft9sZ6lzUk`
3. **JSONスキーマ**:
```json
{
"canvas": { "width": 1280, "height": 720, "background": "#FFFFFF" },
"elements": [
{
"id": "unique_id",
"type": "rect" | "text" | "image",
"x": 0, "y": 0, "width": 100, "height": 100,
"fill": "#HEX", "stroke": "none",
"text": "内容\n改行あり", "font_size": 16,
"href": "https://xn--url-kc4b8jma9h3x..." (type: imageの場合必須),
"z_index": 10
}
]
}
プロセス2：Webアプリケーション実装（HTML/JS）
作成したJSONデータを内包し、以下の機能を持つWebアプリコードを書いてください。
必須機能
SVGレンダリング: JSONデータを読み込み、ブラウザ上でSVGとして描画する。
Base64埋め込み（重要）:
ページ読み込み時に、JSON内の href (外部アイコンURL) を fetch で取得する。
取得した画像を Base64形式 (Data URI) に変換し、DOM内の <image href="..."> を書き換える。
これにより、ダウンロードしたSVGがオフラインでも画像を表示できるようにする。
ダウンロード機能:
「SVG保存」ボタン: Base64化された状態のSVGをファイルとしてダウンロードする。
「JSON保存」ボタン: データをJSONとしてダウンロードする。
実装要件
デザイン: Tailwind CSSを使用し、モダンで見やすいUIにする。
フォント指定（重要）:
CSSおよびSVG内のテキスト設定において、フォントファミリーを以下の順序で指定すること。
font-family: 'Meiryo UI', 'Meiryo', sans-serif;
SVGの <text> 要素にも必ずこのスタイルまたは属性を適用し、Windows環境でメイリオで表示されるようにする。
エラーハンドリング: 画像のfetchに失敗した場合でもアプリが止まらないようにする。
構成: HTML, CSS, JavaScriptを1つのファイル（index.html）にまとめること。

出力成果物
抽出したJSONデータは、JavaScriptコード内の const jsonData = ... 変数に直接埋め込んでください。
解説は最小限にし、実行可能な完全なHTMLコードブロックを出力してください。 December 12, 2025

現在ICSS（いま調味料を買うと正月までそれだよ)の査察を受け、さまざまな保留があります。 December 12, 2025

『番-委員会』のアップデート申請完了しました。
作業も一段落ということで、せっかく作った（作ってもらった？）環境アニメの気になるところを直しています。
雲アニメで画像無しの場合の雲を、ChatGPTにCSSで描画してもらったのですが……もうちょっと頑張ってもらいましょうか。 https://t.co/kyqS8hErRM December 12, 2025

■ コーダーは知っておくべきレスポンシブ思想の転換

コンテナクエリって触ってますか？
てか、知ってますか？？

僕も最近までスルーしてたんですが
これ、本気でヤバいです。

画面幅じゃなくて、
「コンポーネント自身の幅」で
レイアウトが変わるから、
デザインの再現性が一気に上がる。

例えば、ブログカード。

・PCでは横並びレイアウト
・スマホ幅では縦並びレイアウト

とかありがちだと思うんだけど、
「PC時、サイドバーにあるときは縦並びレイアウト」
だったりもしますよね・・！

これを画面幅（media query）で判定する場合、
サイドバー用のCSSをまた記述しなくちゃいけない・・

でもコンテナクエリなら、
「カードを包んでる親(コンテナ)の幅」
で判定できるから、

・カードのサイズが600px以上 → 横並び
・カードのサイズが600px以下 → 縦並び

みたいに「カードのサイズ単位」で
レスポンシブ対応ができちゃうのです・・！

ReactやNextみたいに
コンポーネントを組み合わせる開発では、
もはやこっちが主流になりつつあると思う。

まだ触ったことない人も
まじで一回試してみてほしいな😌

ちなみに、コンテナの中でしか使えない
'cqi'っていう単位ががちで有能過ぎるんだけど
それはまたの機会に・・！ December 12, 2025

ITエンジニアになる前は
ITエンジニアってプログラミング言語だけできればなれるんでしょ？
と思って下記の勉強だけしてたけど

・HTML/CSS
・JavaScript
・SQL
・PHP

調べれば調べるほど

・Git/Github
・vim
・Linux
・Docker
・エディタの使い方
・AIの使い方
・AWS

などなど言語以外の勉強もしなくちゃいけないことがわかって、しかも学習コストがかなり重くてしんどいと感じた思い出 December 12, 2025

本日もご来店ありがとうございました。
営業中に突然VRChatが落ちてしまい一時混乱してしまいましたが一応再開することができました。
次回の営業は12/7 00:30~となりますのでご来店お待ちしております。
#VRChat #VRCイベント #VRC #GCSS https://t.co/VDk45s9caI December 12, 2025

個人的に大好きなメッシュグラデーションをなんとかWebGLとか使わずに表現したい...！！

と思い、cssで頑張ってみましたw
色の重なり部分がやっぱり綺麗にならない...

#毎日アニメーション
#TANE_be_animation

https://t.co/Of1GU5aMEp https://t.co/XiZeyoPcpe December 12, 2025