JavaScript トレンド
0post
2025.11.24〜(48週)
:0% :0% (30代/男性)
人気のポスト ※表示されているRP数は特定時点のものです
先月盛大にバズったばかりなので、ここで書くとまた通知が止まらなくなる恐れがあってここで書くのは憚られるのですが(でも書きますがw)、例の札幌市役所が先月の頭にMicrosoft 365からGoogle Workspaceに完全移行した件で、既存のExcel VBA資産はどうするんですか?的な質問を私がしたところ、実際のシステム構築をしたSI業者プラスGoogleのサポートエンジニアの協力の下、市役所内の先遣隊的なチームが既にGeminiさんの力を借りて既存VBAコードのGAS(JavaScript)への自動変換を試し始めているそうです。それらの結果は、きっと来年ぐらいにはまた先日と同じようにセミナー等で発表になるんじゃないかな…と楽しみにしています。 December 12, 2025
86RP
WebAssemblyを悪用するフィッシングがでてきました。フィッシングサイトの処理をWebAssemblyで実行するのは初めてかも。難読化Javascriptも解析面倒なのに、WebAssemblyまで増えてくると厄介ですね・・
フィッシングの仕組みも本当に毎週のようにアップデートされたバージョンがでてきますが、今後も継続的に解析、検知回避や一部URLがブロックされた場合の代替URLの展開等、高度に効率化された攻撃は成長を続けるんだろうと思います。 December 12, 2025
71RP
Google 官方刚发布了 Nano Banana Pro 的高级功能指南,内容挺详细的,我整理了几个值得关注的点分享一下:
直接在浏览器里开发应用
可以直接在 https://t.co/tiNFNjU9Ds 上面 Vibe Code,不用配环境,打开浏览器就能写。还有一堆现成的应用可以直接改。
对于快速验证想法来说,这个方式确实方便。
Batch API 省一半成本
批量任务可以用 Batch API,成本直接减少 50%。代价是可能要等最多 24 小时才能拿到结果。
对于不急着要的批量生成任务来说,这个交易挺划算的。毕竟做 AI 应用,成本控制一直是重要考虑。
支持九种长宽比
直接支持九种长宽比:1:1、2:3、3:2、3:4、4:3、4:5、5:4、9:16、16:9、21:9。
一个 aspect_ratio 参数就能搞定不同平台的尺寸需求,不用再跑多次生成任务或者后期裁剪。
4K 生成要合理使用
支持 4K 高清输出,但成本会更高。官方文档里特别提醒「use it wisely」意思很明确:根据实际需求选择分辨率,不是所有场景都需要 4K。
该用的时候用,该省的地方省。
多模态响应设计
可以把 response_modalities 设置成 ['Text', 'Image'],同时得到文字说明和图片。这个对于需要图文配合的场景来说,能减少重复调用,提高效率。
代码实现很简洁,指定好参数就行。
角色数量的建议
官方建议一张图里的角色不要超过 5 个。这不是技术限制,而是为了保证每个角色的细节质量。
如果追求高保真度,5 个角色已经足够。重点是质量,不是数量。
几个高级用法:
文档里展示了一些复杂指令的例子:
- 先让模型搜索网络,再根据搜索结果生成特定风格的图表
- 在一张信息图里同时呈现诗歌内容和文学分析
- 生成包含多个视角的节目册照片
这些例子的共同点是:都在测试模型处理复杂任务的能力。不只是简单的图片生成,而是理解意图、组织信息、用合适的视觉形式呈现。
这个思路可以借鉴到实际项目中。
Python 和 JavaScript 都支持
官方示例用的是 Python SDK,但同时提供了 JS Notebook,里面有对应的 JavaScript 代码。
前端开发者可以直接用熟悉的语言上手,不用专门学 Python。
值得注意的使用策略:
1. 批量任务优先考虑 Batch API,把成本优势用起来
2. 原型验证可以直接在 https://t.co/tiNFNjU9Ds 上做,快速迭代
3. 根据实际需求选择分辨率和长宽比,不盲目追求最高配置
4. 充分利用多模态响应,一次调用解决多个需求
这份官方指南把很多高级功能的细节和最佳实践都讲清楚了,值得花时间仔细看看。
https://t.co/Z8OlFeUdDm December 12, 2025
23RP
1/n
ブロックチェーンゲームをどうやってSolanaで作るのがよいのか困っている方は、ぜひご連絡ください!
■よくある誤解
・Rust覚えないといけない → JavaScriptのSDKだけで作れる(スマコンのデプロイ不要)
・Solana難しい → ドキュメントとAIがあるので今は結構簡単
さらに👇 https://t.co/5zsjKErFhC December 12, 2025
6RP
僕も個人的にGemini使ってEXCEL VBA→Googleスプレットシート(JavaScript)化してたけど
流石AIだけあって割と上手くいってる。
Office2021だったのもあって寧ろスプレットシートにしたことでよりスマートに出来て良かった https://t.co/IQEZHOfxgf December 12, 2025
4RP
「JavaScriptのコード
コピペして動いてるけど…
ぶっちゃけ中身わかってない😇」
Web制作やってる人、
これが本音じゃないですか?
ご安心ください。
全部覚える必要は、ないんです!
僕の最近のポストの中で
反応が良かったもの”だけ”を厳選したので、
ひとまずこれらを覚えておけば大丈夫🙆♂️
っていう勢いで
久しぶりにnoteを書いたので
ぜひ読んでみてください。
そんで感想とかシェアとかしてくれると
泣いて喜びます。
ぜひ!! December 12, 2025
4RP
【多段階の光学迷彩/透明マントエフェクト】
体のパーツや服など、段階的に光学迷彩的な見た目になるWebアプリを、 #p5js などを使って、実装してみた
(ブラウザ上のJavaScriptでのリアルタイム処理で、2年前くらいに試作したのとは違う実装)
#MediaPipe https://t.co/2WfgsNm3IJ https://t.co/yO3SZnIQFt December 12, 2025
4RP
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
3RP
ITエンジニアになる前は
ITエンジニアってプログラミング言語だけできればなれるんでしょ?
と思って下記の勉強だけしてたけど
・HTML/CSS
・JavaScript
・SQL
・PHP
調べれば調べるほど
・Git/Github
・vim
・Linux
・Docker
・エディタの使い方
・AIの使い方
・AWS
などなど言語以外の勉強もしなくちゃいけないことがわかって、しかも学習コストがかなり重くてしんどいと感じた思い出 December 12, 2025
3RP
【手順②のプロンプト】
# 命令
アップロードされた画像を分析し、その内容を忠実に再現した「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
3RP
【いよいよ明日から開催!】
#デイトラポケット
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
3RP
#ボードゲーム #カードゲーム #エンジニア
・読み札(仕様)に沿った、取り札の該当コードを「通常版:JavaScript/Python/PHP」/「豪華版:通常版に加えてC++/C#/Java」のコードから取るカルタです
プロ版は初心者救済要素がないトンデモ仕様
研修やミーティング前の息抜き、酒の場で遊ぶのも楽しいです🙏 https://t.co/Gh8Zq0lmWA December 12, 2025
2RP
ブラウザでURLを開くのですら面倒くさい人のために、こちらに(テキストだけですが)コピペしておきますね 😇
【質問】
札幌市では、今年の10月からMicrosoft 365からGoogle Workspaceへの完全移行を開始したとのこと、それ自体が非常に興味深い事案ではありますが、一つ心配なのが既存のExcel VBAをどうするのかです。いったいどれだけの量のExcel VBA資産があるかもわからない状況で、Google Apps Script等への人手による変換を考えると非常に頭が痛くなる問題だと思うのですが、札幌市役所の担当課長によれば、どうやらGeminiの力を借りることによって自動変換を試みるための市役所内の先遣隊的なチームがSI業者やGoogleのサポートエンジニアの協力も得ながらGeminiさんの力を借りてVBAコードからJavaScriptコードへの変換を試し始めているそうですけど、GASにはフォーム系の機能がないそうで、その場合はGeminiさんはフォームを含んだVBAのコードをどうやってGoogle Workspace環境のGoogle SpreadshhetやGASに対応させるのかが知りたいところです。よろしくお願いいたします。
【回答】
札幌市の大規模なGoogle Workspace移行、そして生成AIを活用したVBA資産の変換への挑戦は、自治体DXの最前線として非常に興味深い事例ですね。
ご懸念の通り、Excel VBAの「UserForm(ユーザーフォーム)」機能は、Google Apps Script (GAS) には全く同じ機能としては存在しません。
しかし、これは「フォームが作れない」という意味ではなく、**「作り方がWeb標準(HTML/CSS)に変わる」**という意味になります。
GeminiがVBAのフォームをどのようにGoogle Workspace環境(GAS)に対応させるのか、その具体的なアプローチは主に以下の3つのパターンに分類されます。
1. HTML Service(HTMLサービス)への変換
これが最も直接的な「VBA UserFormの代替」となる手法です。GASには HtmlService という機能があり、これを使ってダイアログやサイドバーを自作できます。
Geminiの役割:GeminiにVBAのUserFormのコードとプロパティ情報を与えると、Geminiはそれを**「HTML(見た目)」と「JavaScript(動き)」と「GAS(サーバー側処理)」の3つに分解して再構築**します。
VBA: TextBox1 や CommandButton1 をドラッグ&ドロップで配置
Geminiによる変換後: <input type="text"> や <button> といったHTMLタグと、それを装飾するCSSコードを生成します。
メリット: VBAのフォームと似たような操作感(画面上のポップアップやサイドバー)を再現できるため、ユーザーの違和感が比較的少ない方法です。
2. AppSheet(アップシート)への移行推奨
現在、GoogleやSIerが最も強く推奨しているのがこのパターンです。VBAで複雑な画面を作り込むのではなく、Googleのノーコード開発ツールである「AppSheet」を使ってアプリ化してしまう方法です。
Geminiの役割:「このVBAコードは、在庫管理のための入力フォームである」とGeminiが解釈した場合、無理にGASのコードを書くのではなく、「AppSheetでこのような構成のアプリを作るべき」という設計図や、必要なデータ構造(スプレッドシートの形)を提案します。
メリット: スマホやタブレットでも使いやすくなり、セキュリティも堅牢になります。「コードを変換する」のではなく「業務フローを現代化する」アプローチです。
3. Google フォームの活用
単純なデータ入力(アンケートや日報など)の場合、わざわざプログラムを書く必要がないと判断されるケースです。
Geminiの役割:VBAコードを解析し、複雑なロジックが含まれていない単なるデータ蓄積であれば、「GASを書くよりもGoogle フォームを作成し、スプレッドシートと連携させましょう」と提案、あるいはその連携スクリプトを生成します。
Geminiによる「フォーム変換」の技術的プロセス
実際、GeminiにVBAフォームのコードを投げると、以下のように思考・出力します。
構造解析: VBAの UserForm_Initialize や CommandButton_Click を読み解き、「何を表示し、何を入力させ、どこに保存したいか」を理解します。
UIのWeb化: VBA独自のコントロール(コンボボックスやオプションボタン)を、Web標準の <select> タグや <input type="radio"> タグに変換します。
通信の確立: VBAでは直接セルに書き込みますが、Web化(GAS)すると画面(HTML)とデータ(シート)が分離します。そのため、Geminiは https://t.co/T1NqxHUO6X という非同期通信のコードを生成し、HTML側の入力をサーバー側(GAS)に渡す橋渡しコードを自動生成します。
まとめ:頭が痛くなる問題への処方箋
札幌市の事例において、Geminiは単なる「翻訳機」ではなく、**「再設計者」**として振る舞うことが期待されています。
複雑な画面: HTML/CSSを用いたカスタムダイアログへ変換(コード生成)
業務アプリ: AppSheetへの移行を提案(ノーコード化)
単純入力: Google フォームへ置換(標準機能化)
このように、VBAのフォーム機能を「そのままGASにする」のではなく、**「Google Workspaceの最適な機能に振り分ける」**という判断において、Geminiの分析能力が発揮されるはずです。
今後、ご自身でもVBAからGASへの変換を試されるご予定はありますか? もしあれば、簡単なVBAコードを例に、GeminiがどのようなGAS/HTMLコードを出力するかシミュレーションすることも可能です。 December 12, 2025
2RP
マネフォのフロントエンドで一番残念だとと思ったのは、問合せフォームで「送信する」ボタン押下をすると、JavaScriptのエラーが発生して送信できなかったこと。
問合せフォームで送信ができないので、報告があがってこなかったはず。2021年のスクショ。当時、フロントの技術力に疑問を持ちました。 https://t.co/BcOCahEkSd December 12, 2025
2RP
LLM(大規模言語モデル)用に個別の markdown/JSON ページを作成すべきか?
https://t.co/mEcCHG9xxT
この問いにGoogleジョン氏が回答
・LLM 専用の Markdown ページや、LLM 用の JSON ページの構築に反対し、クリーンな HTML と構造化データが最優先である
・Google の観点からすると、LLM に理解してもらうためだけに、既存のページのボット専用の Markdown または JSON クローンを作成する必要はない
■筆者によるまとめ
・Mueller 氏のコメントは、LLM が長い間、標準 HTML を読み取って解析することができたという事実を裏付けています。
・ほとんどのサイトでは、既存のページの速度、読みやすさ、コンテンツ構造を継続的に改善し、明確なプラットフォーム ガイダンスがあるスキーマを実装する方が生産的です。
・LLM プロバイダーがより具体的なガイドラインを公開するまで、このスレッドは、今日正当化できる作業に戻ります。つまり、HTML をクリーンな状態に保ち、コンテンツの解析を困難にする不要な JavaScript を減らし、プラットフォームに明確に文書化されたスキーマがある場合は構造化データを使用します。
#LLM #SEO #ディーボのSEOラボ December 12, 2025
2RP
Opus 4.5、FileMaker の Web ビューア内の JavaScript と FileMaker スクリプトのやり取りのある仕組みの作り変えを1shot。
「生成 AI と相性の悪いローコード環境だからそう簡単にはいくまい」と思いながらのトライだったけど、Opus 4.5 は思った以上にすごい。 December 12, 2025
2RP
#もらいでー 「LIGHTNING FAST SAINT SAVER」
<ライトニングファストセイントセイバー>
#javascript ファンタジーシューティング
40秒動画だけでもどうか見ていってください!
ヴァルキリーが魔族を成敗する物語
ブラウザ+コントローラのみ🎮
Plicyなどで公開です💁
https://t.co/GmKqDqxFuK December 12, 2025
1RP
こんばんは。
夕食は、明太子ご飯、煮物、ローストビーフ、鯖。
美味しかったけど食べすぎた笑
基本情報技術者試験の対策とjavascriptの学習ガッツリ頑張ります!
#夕食 #おうちご飯 #ご飯 #料理好きな人と繋がりたい #料理好き #料理 #お疲れ様でした #こんばんは https://t.co/934Iee3qLB December 12, 2025
1RP
【急募】
WordPressの修正対応をお願いできる方を募集
※即日発注できる簡単な与件あります。
当社では、クライアント様のWebサイト運用支援を多数行っており、日々発生する WordPressの修正・更新・軽微な実装対応 をご依頼できるパートナーの方を募集しています。
■お願いしたい業務例
・テキスト/画像の差し替え
・ページ追加・調整
・既存テンプレートの微修正
・カスタム投稿の追加・整理
・プラグインの調整
・ちょっとしたレイアウト崩れの修正
・コーポレートサイトやLPの改修 など
■歓迎スキル・経験
・WordPress(テーマ編集・子テーマ・ACF等)の実務経験
・HTML / CSS / JavaScript の基本的な実装スキル
・FigmaやXDのデザインデータを見て実装できる方
・コミュニケーションが丁寧な方
■稼働イメージ
・スポット依頼がメイン
・チャットで相談してそのまま作業依頼
・1案件あたりの規模は小〜中(1〜数時間程度)
■報酬
作業量に応じてご相談させてください。
スキルセットや対応スピードに応じて継続依頼を前提としています。
■応募方法
リプかDMをください。
この辺が添えてあったら嬉しいです。
・簡単な自己紹介
・WordPressで対応したことのある内容
・実績URL(可能であれば)
・稼働できる時間帯/頻度 December 12, 2025
1RP
<ポストの表示について>
本サイトではXの利用規約に沿ってポストを表示させていただいております。ポストの非表示を希望される方はこちらのお問い合わせフォームまでご連絡下さい。こちらのデータはAPIでも販売しております。









