Speculation Rules APIでウェブサイトのページ遷移を速くする - クリック前にプリレンダリングする実装手法 - ICS MEDIA
Speculation Rules APIでウェブサイトのページ遷移を速くする - クリック前にプリレンダリングする実装手法 通常のウェブページでは、リンクをクリックしてから次のページの読み込みが始まります。もしクリックする前にブラウザーが次のページを裏側で準備していたら、クリック直後にページが表示され、待ち時間をほとんど感じません。この「先読み」をブラウザーの機能として実現するのが「Speculation Rulesスペキュレーションルールズ API」です。リンクをたどるたびに感じていた読み込みの間が少なくなり、ページ間の移動がスムーズに感じられるようになります。 たとえばユーザーがリンクにマウスカーソルを乗せたタイミングで、ブラウザーがそのリンク先のページをバックグラウンドで先読みします。リンクをクリックした時点ですでにページの準備が終わっているため、瞬時にページが切り替わります。先読
チームのCLAUDE.mdが勝手に育つ - Hook機能での自動化
チームのCLAUDE.mdが勝手に育つ - Hook機能での自動化 はじめに 前回の記事では、スラッシュコマンドを使ってAIに会話履歴を分析させ、CLAUDE.mdに書くべきルールを提案してもらう仕組みを紹介しました。 スラッシュコマンドを使う方法は、この仕組みのことをよく知っている人が使う分には便利です。でも、チーム全体で確実に運用するとなると課題があります。 コマンドを実行し忘れる 新しく入ったメンバーは存在すら知らない ベテランメンバーはCLAUDE.mdに書く内容を当たり前に思えてしまう 結果として、やっぱりCLAUDE.mdの更新がされずに、新メンバーが困る...ということになりがちです。 解決策：Claude CodeのHookで自動実行 そこで、Claude CodeのHook機能を使って、会話履歴の分析を完全自動化しました。 Hookとは、Claude Codeの特定のイベ
AI搭載GASエディタ『GASSISTANT』とは？｜チャエン | 重要AIニュースを毎日発信⚡️
GASSISTANTは、AI搭載のGAS（Google Apps Script）エディタです。コードの提案やデバッグをAIが自動で行い、コーディングの作業を大幅に楽にします。 いわば「GAS用 Cursor (Github Copilot)」です！ ■サンプルイメージ そもそもGAS（Google Apps Script）とは？Google Apps Script（GAS）は、Googleの各種サービス（スプレッドシート、Gmail、Googleドライブなど）をプログラムで操作できる強力なツールです。例えば、以下のようなシーンで利用できます。 1. Difyのワークフローを定期実行するGASを使って、Difyのワークフローを定期的に自動実行。 起動周りが弱いDifyをよりパワフルにするにはGASが便利です。 2. LINEボットやSlackボットの作成GASを利用して、LINEやSlack
export {}; が使われるTypeScript特有の事情
TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く | stin's Blog
真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く2024/07/14 14:36 nextjsreact このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法一般に、ダークモードの実装方法は3タイプあります。 OSによるモード設定を反映する メディアクエリー@media (prefers-color-scheme: dark)を使うと、OS側でダークモードを指定している時だけ有効になるスタイルを書くことが出来ます。 JavaScriptでも判定が必要な場合はmatchMedia("(prefers-color-scheme: dark)")
Slackで動くChatGPTのチャットボットをGoogle Apps Script（GAS）でサクッと作ってみる
Slackで動くChatGPTのチャットボットを作りたい 本記事では、Slackで下記仕様を実現できるChatGPTのチャットボットをGoogle Apps Script（GAS）でサクッと作成していきます。 botが所属するSlackのチャンネル内でメンションされると、スレッドで返信する botとのダイレクトメッセージの場合は、メンション無しでもスレッドで返信する botが参加しているスレッド内でのメッセージには、メンション無しでも（スレッド内の会話内容を読み取った上で）返信する また、下記項目も自由に設定することができます。何でも明るく回答してくれる社内のアイドル的なbotを作ってみるのも良いかもしれません。 botのアイコン、振る舞い（人格・役割など）の設定 gpt-3.5-turboやgpt-3.5-turbo-16kなどのGPTモデル設定 今回のbotは、非エンジニアの方でも作成
デジタル庁でjQueryが何をしているのか - laiso
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
DevTools上でesbuildするChrome拡張を書いた - 詩と創作・思索のひろば
社内ではドキュメントの共有に Scrapbox が活発に使われており、するといきおい UserCSS や UserScript もさかんである。具体的には、/customize という共有のプロジェクトがあってみんなの自慢の装飾やカスタマイズが共有されている。これを個々人で import して使うんである。 こんな感じ。 自分の場合は /motemen/UserCSS/common に常に適用したいスタイルを書いておいて各プロジェクトから読み込んでいる。このページからさらに、共有プロジェクトや他人の個人プロジェクトページからよさそうな設定を import している次第。 つまりは多段インポート。こういうことを続けていると、だんだんと読み込みの遅さが気になってくる。こういうのはバンドルすればいいのだけど、巷のツールを普通に使うことはできない。インポートしてるリソースに認証がかかっているからだ
【Vue.js】defineProps はなぜ import 文を書かずに使えるのか【マクロ】
<script setup> import { ref, computed } from "vue"; const props = defineProps({ count: Number }); const double = computed(() => props.count * 2); const message = ref("Hello, Vue.js"); </script> <template> <div> <p>{{ message }}</p> <p>{{ props.count }}</p> <p>{{ double }}</p> </div> </template> ・ ・ ・ ・ ・ ・ ・ なんで defineProps は import しなくても使えるの？？？？？ そんなことを思った方はいませんか？今日はその疑問を解決して差し上げます。 🚩 初めに 前回は Vu
Google Apps Script (GAS) で Slack 連携を実装する前に知っておくとよい 5 つのこと - Qiita
Slack 連携、特にちょっとした通知を Google Apps Script (GAS) からやりたいというユースケースは非常によく聞かれます。本格的なアプリケーション動作環境などを用意することなく Google Workspace (旧 G Suite) のアカウントだけでちょっとした自動化をできるので、重宝しますよね。 ちなみに GAS の正式名称は「Google App Script」ではなく「Google Apps Script」です。たまに誤記を見かけます... Slack 連携で知っておくとよい 5 つのこと さて、本題です。 Slack アプリを Google Apps Script (GAS) で実装する場合、特にインタラクティブな機能の利用において知っておくべき制約があります。この記事では、以下の 5 つの留意点について解説します。ログの有効化など Slack アプリ開
</> htmx - high power tools for html
introduction htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~16k min.gz’d), dependency-free, extendable & has reduced code base sizes by 67% when compared with react motivation Why should only <a> & <form> be able to make HTTP requ
npm/yarn/pnpm/bunを同じコマンドで扱える ni のzsh実装を書いた
niという npm/yarn/pnpm/bun を同じコマンドでインストール/アンストールコマンドを実行できるツールがあります。 antfu/ni: 💡 Use the right package manager 仕組み的には、各パッケージのロックファイルやCorepackで決められたpackageManagerフィールドの値から、どのパッケージマネージャを使うかを判断しています。 たとえば、package-lock.jsonがあるプロジェクトなら npm を使ってるので、niコマンドは npm のコマンドを実行します。 また、packageManagerフィールドがyarn@<version>になっている場合は、niコマンドは yarn コマンドを実行します。 なぜこういうツールが必要になるかというと、npm や yarn などのパッケージマネージャは、それぞれのパッケージマネージャの
[JavaScript]大きいEnterと小さいEnterは別物であることに気づいた
タイトルは上記画像にあるような普通にキーボードにあるEnterキーと、 テンキーの右横にある小さいEnterキーのことです。 私の担当しているシステムではEnterキーを押すとフォーカスが移動する仕様があります。 経験上、このような仕様は多数のデータ入力があるシステムにおいて好まれる傾向を感じます。 キーボードから手を離さなくていいからですね。 正直なところフォーカス移動ならTabだろうと思いますが、まあそこは長年の習慣だと思います。 この仕様をJavaScriptで実現していたのですが、なんか違和感を感じて調べたところ JavaScriptにおいてキーボードにある普通のEnterキーとテンキーの右横にある小さいEnterキーは別物であることに気づきました。 <html> <head></head> <body> </body> <script type="text/javascript"
![[JavaScript]大きいEnterと小さいEnterは別物であることに気づいた](https://cdn-ak-scissors.b.st-hatena.com/image/square/dc83587733cecb12507cfc1c94bd0370fa1ecdad/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--NoFtHnTa--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BJavaScript%25255D%2525E5%2525A4%2525A7%2525E3%252581%25258D%2525E3%252581%252584Enter%2525E3%252581%2525A8%2525E5%2525B0%25258F%2525E3%252581%252595%2525E3%252581%252584Enter%2525E3%252581%2525AF%2525E5%252588%2525A5%2525E7%252589%2525A9%2525E3%252581%2525A7%2525E3%252581%252582%2525E3%252582%25258B%2525E3%252581%252593%2525E3%252581%2525A8%2525E3%252581%2525AB%2525E6%2525B0%252597%2525E3%252581%2525A5%2525E3%252581%252584%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ASatoshi%252520Kaneyasu%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Y5MGU0N2Y1ZWMuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT)
セキュリティ関連のHTTPヘッダを一括指定する Baseline ヘッダ - ASnoKaze blog
現在のWebでは、セキュリティ上レスポンスヘッダで色々なものを指定します。Webデベロッパーは個別に指定しなければなりません。 そこで、セキュリティ関連のヘッダを推奨デフォルト値に設定できるようにする「Baseline ヘッダ (Opt-into Better Defaults)」が、GoogleのMike West氏によって提案されています。 まだたたき台であり、これからW3CのWebAppSec WGで議論されている予定になっています。 Baseline ヘッダ 次のようにレスポンスヘッダを指定します。 Baseline: Security=2022これは、次のヘッダを送信するのと同様です。 Content-Security-Policy: script-src 'self'; object-src 'none'; base-uri 'none'; require-trusted-ty
Web の仕様を眺めるシリーズ CSS Anchored Positioning｜Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。最近書いた JavaScript は Google Apps Script です。UI 書きたいけどマネージャーという名の雑用忙しいウオオ。 最上層に浮かせて表示したい UI の配置を制御する仕様 なんとなく Chrome Platform Status から Proposed なステータスのフィーチャーを取り上げて、そのプロポーザルな仕様を眺めてみるシリーズです。本当にシリーズにするかは謎です。 今回は CSS Anchored Positioning を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 Microsoft Edge チームからの提案 MicrosoftEdge/MSEdgeExplainers にあることから Microsoft 社の Edge ない
【OpenAPI】Stoplight Studioを活用して快適＆高速にAPI定義を書く方法｜Offers Tech Blog
概要 Offers を運営している株式会社 overflow の磯崎です。弊社は新規プロダクト開発でスキーマ駆動開発を取り入れており、API 定義とは楽しくお付き合いさせていただいております。その全体像については、以下の記事でまとめておりますので、是非ご一読ください。今回は、ポチポチいじるだけで誰でも簡単に API 定義できる神ツール「Stoplight Studio」を活用した API 定義について紹介していますので、ぜひ参考にしてください。 Stoplight Studio とは？ Stoplight Studio とは、 OpenAPI 定義ファイルの作成と管理ができる GUI エディタです。これだと少々分かりづらいので、簡単に一言で表すと「ポチポチと誰でも簡単に API 定義ができてしまうツール」です。Stoplight Studio は、GUI で直感的な操作ができるため、高速に
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開 Pythonの主要なディストリビューション「Anaconda」などを提供しているAnaconda社は、HTML文書の中にJavaScriptと同じようにPythonのコードを記述し、実行可能にする「PyScript」をオープンソースで公開しました。 Did you hear the news from PyCon!? We are thrilled to introduce PyScript, a framework that allows users to create rich Python applications IN THE BROWSER using a mix of Python with standard HTML! Head to h
Security headers quick reference | Articles | web.dev
Before diving into security headers, learn about known threats on the web and why you'd want to use these security headers. Protect your site from injection vulnerabilities Injection vulnerabilities arise when untrusted data processed by your application can affect its behavior and, commonly, lead to the execution of attacker-controlled scripts. The most common vulnerability caused by injection bu
JavaScriptはJavaのScript版(であろうと努力はした) - きしだのHatena
JavaとJavaScriptを混同する人に、名前がかぶってるだけの別モノという指摘がされることもあります。間違いではない。 技術的にも実務的にもコミュニティ的にもそのとおりではあります。 ただ、そう言い続けられた結果、ほんとに単にLiveScriptの名前にJavaをもってきてJavaScriptにしただけという誤解があるようです。 JavaScriptはJavaのScript版、少なくともそうであろうという努力はされていました。 JavaScriptリリース時のCNETの記事には「JavaScript is based on Java」という記述があります。 Netscape and Sun Unveil JavaScript - CNET 実際には、LiveScriptにJavaから文法やライブラリなどを持ち込んでリリースにこぎつけたというのがあります。 JavaScriptのDat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
