JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG
2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
テキストをコピペするときにスタイルごとコピーされちゃうのってどんな仕組み？ - Qiita
概要 文章をコピペしてエクセルに張り付けたときに、画面のスタイルもコピーされてしまって困ったことはありますか？ありますよね！ （↓こんな感じ） 私もよくやってしまうのですが、実際にどのような処理が行われているのかよく分かっていませんでした。理解を深めるためにも、自分で実装して謎を解いていきたいと思います。 3つパターンの処理を実装 比較のため、プレーンテキスト・HTMLテキスト・リッチテキストのコピー機能をサンプルプログラムを実装してみました。 （リッチテキストのコピーが、範囲選択してコピペしたときと同じ機能を想定しています。） HTMLファイル 画面表示されるHTMLは下記のような感じです。各コピー処理でid="message"の部分を固定でコピーするようにします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされています。これは、ヘッドレス環境で Chrome ブラウザを実行する方法です。つまり、Chrome なしで Chrome を実行することになります。Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォームのすべての機能をコマンドラインにもたらします。 なぜこれが有用なのでしょうか。 ヘッドレス ブラウザは、可視 UI シェルが必要ない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、その PDF を作成したり、ブラウザが URL をレンダリングする方法を確認したりできます。 ヘッドレスの開始（CLI） ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くことです。Chrome 59 以降がイ
SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog
最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバーとなり、DB やバックエンドシステムのプロキシのような存在になりつつある。 私はサーバーサイドエンジニアとしてキャリアを積んできた。SPA が流行りだした頃、いずれサーバーサイドエンジニアは不要になって自分のキャリアを考え直さなくてはいけない時期がくるのではないかと戦々恐々としていた。 自分も元々、SPA を他サイトとの「差別化技術」と定義していた。ブラウザのタブページのライフサイクルにおいて、初期化プロセスを一回にまとめてシームレスな遷移を実現する技術。たとえ
我が名は神龍……どんなテストもひとつだけ自動化してやろう - Qiita
『我が名は神龍……どんなテストもひとつだけ自動化してやろう』 じゃ、じゃあ！このブラウザテストを自動化してください！ Chromeで https://kids.yahoo.co.jp/ にアクセスして 検索ワードに ねこ と入力して さがすをクリックして 検索結果にネコ - Wikipedia が含まれていることを確認して 検索結果に 買い方 を追加して さがすをクリックして 探しているのは「猫の飼い方」？と表示されることを確認して クリックすると猫の飼い方で再検索されて 検索ボックスを不倫で上書きして さがすをクリックして このページは表示できませんと出ていることを確認 『よかろう……たやすい願いだ』 まずはライブラリのインストールと初期設定をしてやろう…… # [ライブラリのインストール] # CodeceptJSとPuppeteerをインストールします。nodeとnpmが必要ですので
サーバからクライアントに送信する技術 - WebSocketを中心に - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Webでのプッシュ技術 HTTPはクライアント（ブラウザ）からリクエストしてサーバからレスポンスが返る一問一答型のプロトコルなので、基本的にはサーバ側からブラウザに新着情報をリアルタイムで通知（プッシュ）できるようにはできていません。 しかしそれでもプッシュをしたいという場合にどうするかという話が出てきます。やり方には以下のようなものがあります。 ポーリング クライアントからサーバに定期的に新着を問い合わせるようにします。 最も原始的かつ確実なやり方。欠点は、最大でポーリング間隔の分だけ通知が遅延しうることです。 ロングポーリング（“C
Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと | 株式会社ヌーラボ(Nulab inc.)
Typetalkデスクトップアプリ 先日、弊社チャットサービスTypetalkのデスクトップアプリをリリースしました。おそらくTypetalk.appのパッケージを覗いてElectronの痕跡を見つけ出した方もいらっしゃると思いますが、その通りElectronをベースに実装しています。 ElectronはHTML、JavaScript、CSSなどWebの技術を使用してデスクトップアプリを開発できます。GitHub社のAtomエディタをはじめとして、今では非常に多くのアプリがElectronベースで公開されており、実装方法についても既に多くの記事が書かれています。 ただし、正式にアプリを公開する場合には、コードサイニングなどを行うなど、考慮が必要なポイントがいくつかあります。そこで本記事では正式にElectronアプリをWindows/Mac向けにリリースするにあたって必要だった3つのことを
NativeScript
Empower JavaScript with native APIs. Liberate your development by using Android, iOS, visionOS... APIs directly without leaving your love of JavaScript.
switch(true) イディオム考察 - Qiita
本稿では，switch(true) イディオムの是非について論じて行きたいと思います．なお，話をややこしくしないために，本稿では JavaScript における switch(true) イディオムのみについて考察します．（当然ですが，言語によって switch のシンタックスおよびセマンティクスは大きく異なります．例えば ruby の case はいわゆる C-like な switch とは全く異なり，フォールスルーがない点や === 演算子による柔軟性がある点などにおいて同列に語れるものではありません．） 賛否両論の switch(true) switch(true) イディオムに関しては，様々な意見があります．記事の末尾に，各所から集めて来た意見をまとめておきますので参考にしてください．ここで私が述べたいことは，このイディオムに対しては とにかく賛否両論ある ということです． いっ
JavaScriptでLeapMotionアプリを作る方法
こんにちは。クレイの浅海です。 いま話題のLeapMotionとJavascriptを使って、空中でピアノを演奏できるアプリを作りました。 まだLeapMotionを初めて数日なので勘違いしている部分もあるかもしれませんが、JavaScriptでLeapMotion対応アプリをどのように作るのかについて、気づいたことを紹介します。 目次 デモ leap.jsの用意 イベントループ Frameオブジェクト frame.fingers frame.hands frame.gestures circle swipe keyTap screenTap 感想 デモのコード デモ まずは実際に動かしている動画を御覧ください。 空中に手をかざすだけで、ピアノを演奏することができます。 音の再生にはMIDI.jsを使用しています。 ※ 手を3Dで表示している部分は、LeapMotion標準のビジュアライザ
LEAP Motion とブラウザを WebSocket で接続する - latest log
既に LEAP Motion を手に入れている人にはお馴染みかと思いますが、 JavaScript だけで、LEAP Motion を使いブラウザを操作することが可能です。 実際にChrome拡張で実装してみました (ε・◇・)з o O ( 未来キタ
JavaScript Garden
JavaScript Garden はJavaScriptというプログラム言語の一番奇妙な部分についてのドキュメント集です。 このドキュメントはJavaScriptという言語に慣れていないプログラマーがこの言語について深く知ろうとする際に遭遇する、良くある間違い・小さなバグ・パフォーマンスの問題・悪い習慣などを避ける為のアドバイスを与えます。 JavaScript GardenはJavaScriptを教える事を目的にしていません。このガイドの項目を理解する為には、この言語に対する前提知識がある事を推奨します。この言語の基礎部分についてはMozilla Developer Networkのガイド がオススメです。 著者 このガイドは愛すべきStack Overflowの2人のユーザーIvo Wetzel (執筆)とZhang Yi Jiang (デザイン)によって作られました。 貢献者 貢献
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
意外と便利なJSON RPC - TechTalkManiacs
このエントリーはHTML5 Advent Calendar 2012の4日目のエントリーになります。 JSON RPCとは文字通りJSONでRPCするプロトコルで、現行バージョンは2.0です。 リモート環境にある関数をローカルの関数と同様に呼び出せるRPCは呼びだす機能が多かったり、複雑だったりする時に非常に便利です。またRESTと違い対象がHTTPを受け付けるサーバーである必要がないというメリットがあり、これがwebsocketやメッセージングAPI、webworkerといったHTML5 APIと非常に相性がいいのです。 またRPCというとXML RPCが有名ですが、JSON RPCはそれにくらべて以下のような特徴を持ちます プロトコルが軽量・シンプル 名前つきパラメーター(namedparameter) バッチリクエスト では順番に見ていきます プロトコルが軽量 RPCに限らずXMLと
IcedDev
This: <script type="text/javascript" src="node.js"></script> Allows you to do this in a Chrome App: var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/'); This is actually Node.js code running the http listener on Chrome's
Esprima
Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript). Features Full support for ECMAScript 2019 (ECMA-262 10th Edition) Sensible syntax tree format, with optional node location info Experimental support for JSX, a syntax extension for React Heavily tested (~1600 tests with full code coverage) API Esprima can be used to perfo
大規模 JavaScript その設計と実装と現実
ワイヤーフレームとはどういうものか？という概略 ワイヤーフレームだけでは説明しきれないところをどう補うか、が課題 Adobe XD Meeting #05での発表内容です
見た読んだ書いた: JsTestDriver導入
2011年12月25日日曜日 JsTestDriver導入 テスト駆動JavaScriptで紹介されてたJsTestDriverとjstdutilを、ubuntu11.10に導入した時の手順を記録しておきます。 インストール方法以外の手順は基本的にどのOSでも同じなので、WindowsやMac等にも応用できると思います。 1. インストール 1-1. インストール前の準備 JsTestDriverの動作にはJavaがインストールされている必要があります。 また、後で紹介するjstdutilを使用する場合はrubyが必要です。 以下のようにして必要なソフトをインストールします。 $ sudo apt-get install openjdk-7-jre $ sudo apt-get install ruby 1-2. ファイルのダウンロード JsTestDriverのダウンロー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのコードフローを視覚化するTraceGL
GitHub - Fyrd/caniuse: Raw browser/feature support data from caniuse.com
