てとらα SI @TETRA_IT 小学生たち、Chromeがオフライン状態だと恐竜のゲームが遊べる事を発見して学校のタブレットで休み時間にWi-Fi繋がずに遊んでるらしいww pic.twitter.com/4XYiWk5TSP 2021-06-25 20:30:38
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか? この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
GoogleとAdBlockにはどのような関係があるのか? 2012年当時、AdBlockはGoogleに8億8700万ドル(約1,100億円)の損害を与えました。そして、2015年にはこの損害は66億ドル(約8,700億円)にまで増加し、2020年には350億ドル(約4.6兆円)になったといわれています。現在、インターネットを使う42.7%が何らかの形でAdBlockを使用しているとのことです。 合理的な企業であれば、AdBlockが効果を発揮しないようにするための措置を講じるはずです。しかし、GoogleはAdBlockを規制していません。それどころか、GoogleはAdBlockをサポートしています。なんとGoogleは広告をホワイトリストに登録するために、毎年何千万ドルもAdBlockに支払っています。 なぜ、Googleがこのような行動を取るのでしょうか? 実は、AdBlockは
「はてブル パネル」は、ウェブページに付けられたはてなブックマークのコメントや、ウェブページに対するBluesky上の言及をサイドバーに表示できるChrome拡張機能です。コメント表示機能だけでなくChatGPTなどのAIサービスを用いた要約機能や、ウェブページ中の文字列を爆速でウェブ検索できる機能なども搭載されているそうなので、実際に使ってみました。 はてブル パネル - Chrome ウェブストア https://chromewebstore.google.com/detail/jffjglclhogdgliiibiciikihejddgeb まず、上記のリンクをクリックして配布ページにアクセスし、「Chromeに追加」をクリック。 画面上部に確認画面が表示されたら「拡張機能を追加」をクリック。 以下の通知が表示されたら「はてブル パネル」のインストールは完了です。 使いやすくするため
インターネットで調べ物をしていると、「過去に閲覧したページをもう一度閲覧したいけど、タイトルを忘れて検索できない!」という困った状態が頻繁に発生します。ブラウザ拡張機能「Falcon」を使えば、閲覧したページの本文を自動保存して「記事内のかろうじて覚えているワード」を用いた全文検索が可能になるとのこと。めちゃくちゃ便利そうだったので、実際にインストールして使ってみました。 Falcon - Chrome ウェブストア https://chrome.google.com/webstore/detail/falcon/mmifbbohghecjloeklpbinkjpbplfalb Falcon – 🦊 Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/falcon_extension/ FalconにはCh
はじめに browser-use を使う上で詳しいドキュメントがなかったので、自分で使ってみたことをまとめてみました。 browser-use の基礎的なところは以下にまとめてあります。 ブラウザを起動させず、ヘッドレスモードで実行したい BrowserConfigのheadlessをTrueにすることで、ブラウザを起動させず、ヘッドレスモードで実行することができます。 from browser_use.browser.browser import Browser, BrowserConfig browser = Browser( config=BrowserConfig( headless=True, ) ) async def main(): model = ChatOpenAI(model='gpt-4o') agent = Agent( task='東京の天気をGoogleで調べて
Windows 11ではMicrosoft Edge以外のブラウザを既定のブラウザに設定する操作が非常に面倒になっています。新たに、Microsoft Edgeに「Google Chromeのインストールを中止するように促すポップアップ」を表示する機能が追加されたと報じられました。Microsoft EdgeがGoogle Chromeのダウンロードを阻止するようなポップアップを表示するのかを実際に確かめてみました。 Microsoft says its own Edge browser is more trustworthy than "so 2008" Google Chrome - Neowin https://www.neowin.net/news/microsoft-says-its-own-edge-browser-is-more-trustworthy-than-so-200
いつもはてなブックマークをご利用いただき誠にありがとうございます。はてなブックマーク開発チーム、ディレクターの id:yone-yamaです。 ブラウザ拡張機能に関するアップデートをお知らせいたします。 拡張機能に「コメント簡易閲覧機能」が追加されました Chromeウェブストア Firefoxアドオンページ 具体的な変更点 補足:コメント簡易閲覧機能に関するこれまでの経緯 旧バージョンの拡張機能からの移行について 拡張機能に「コメント簡易閲覧機能」が追加されました Chrome・Firefoxで提供している拡張機能「はてなブックマーク ブックマーク機能」で、コメント簡易閲覧機能の提供を開始しました。 Webページに集まったブックマークコメントを一覧で確認できるコメント簡易閲覧機能は、これまで旧バージョンの拡張機能でのみ提供していた機能です。 今回のアップデートで、「はてなブックマーク ブ
検索結果やSNSに張られたリンクをクリックすると、本来のURLの後ろに何やらパラメーターがいろいろとくっついてくることがあります。これは、どういったリンクをクリックしたのかなどの情報を得るために付与されたもので、なくても機能します。「あって困る」というものでもありませんが、「プライバシーを守るために消せるものなら消したい」という人のために役立つのが拡張機能「ClearURLs」です。 ClearURLs https://docs.clearurls.xyz/latest/ 「ClearURLs」はChrome、Firefox、Edge向けが提供されています。 ClearURLs - Chrome ウェブストア https://chrome.google.com/webstore/detail/clearurls/lckanjgmijmafbedllaakclkaicjfmnk ClearU
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite(効果の組成)って機能がすごいよ!!って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき@ティアF47a (@yuneco) October 11
※ @mizchi さんのアンサー記事「プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法」 もこの後にあわせてどうぞ。 https://zenn.dev/mizchi/articles/3789a101dae388d98159 Python3とPHP7をちょぼちょぼとやっている個人がJavaScript(2016年以降)/node.js/JS系ライブラリ/JS系Webフレームワーク/TypeScript等を攫っている中で一つ思ったことをメモった。JavaScriptやるなら絶対node.jsの実行環境揃えてからがいい、そうしないでJSやるくらいなら汎用性信じてPython3一択に絞った方がいい、と思ったという件です。 具体的には、以下の構成のみでJavaScriptの開発演習をすればいいんじゃないか、という話です。 続きを読む
マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始 マイクロソフトは、Webアプリケーションのテスト自動化フレームワーク「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプライベートプレビューを開始すると発表しました。 テスト自動化フレームワーク「Playwright」 Playwrightは、マイクロソフトが中心となって開発しているオープンソースのWebアプリケーション向けテスト自動化フレームワークです。 実行環境、対象ブラウザ、対応言語が幅広く、テスト実行時にはWebブラウザの動作を自動的に待つ機能を備えるなど、柔軟で精度の高いテスト自動化が実現できる点を特長としています。 具体的には、デスクトップ向けのWebア
米マイクロソフト(MS)は6月15日(現地時間)、1995年から提供するWebブラウザ「Internet Explorer」(インターネットエクスプローラー、IE)のサポートを終了した。同じく同社が提供する「Microsoft Edge」にWebブラウザの機能を集約するとともに、IEを起動しようとするとEdgeが起動。IE自体が完全に使用できなくなる。 MSはEdgeへの移行や、社内システムの関係で移行できない法人などに対し、Edge非対応のページやサービスを利用できる互換機能「Internet Explorer モード」(IEモード)の利用を呼びかけており、サポートを終了する同月16日(日本時間)前後は、IEを利用する各組織が対応に追われた。 そうした中、都内自治体がサポート終了に伴う対応に苦慮する様子を報じたニュースがTwitterで話題となっており、ユーザーからは「流石に草」などの声
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 デスクトップ版のFirefoxブラウザーに20年以上存在していたバグが先月、23歳のプログラミング初心者によって修正されました。 2002年、MacでMozilla browser(Firefoxの当時の名称)を使用していたアダム・プライス氏は、ツールチップの表示の問題に悩まされていました。このバグは、Mozillaツールバーのアイコンにマウスカーソルをポイントして表示されるツールチップ(説明書き)が、Commandキー(WindowsではAltキー)+Tabキーでウィンドウのフォーカスをほかのアプリに移したあとも表示され続けてしまうというもの。 この状態になってしまった場合、ツールチップを消すには再びFir
Google Chromeはブラウザ、特にPCブラウザでは非常に大きなシェアを誇っていますが、「Manifest V3」への移行や負荷の高さなど、ユーザーからは不満の声も上がってます。ニュースサイト・How-To Geekのライターであるファイサル・ラスール氏が、「ChromeからMozilla Firefoxに乗り換えて後悔しなかった理由」をまとめました。 Why I Switched to Firefox and Never Looked Back https://www.howtogeek.com/why-i-switched-to-firefox-and-never-looked-back/ ラスール氏がブラウザを乗り換えることにしたのは、仕事用PCが古くなってしまい、タブを多く開くとファンがうるさく鳴るようになったことがきっかけです。そこで、Firefoxに移行してみたところ、以
日々のニュースや知りたい情報をWebやメール、SNSから入手することが当たり前になった昨今だが、欲しい情報を能動的に収集することも自動化してみたいそう思った。RSSツールやWeb収集ツールは高速でSNSをサポートするものもある。しかしWebサイトに必ずしもRSSフィードを設置しているわけではないので能動的にPythonなどでWebを解析するスクレイピング技術があるがWebごとに解析する仕様では作成するのはなかなか大変だ。 無償のPower Automate Desktopを使ってみる Windows 11の最新版を入手するためにノートPCを入手したが、デフォルトで搭載されていたPower Automate Desktopでは「ブラウザー自動化」もフローに搭載されている。これを試してみよう。なお、スクレイピングやツールによる過度なアクセスはWebサーバーへの負担がかかるため禁止しているサイト
いまどきのWebアプリにおいては、ファイルのダウンロード機能が必要な場面が多々あります。例えば、バックエンドが生成したCSVデータをファイルとしてダウンロードさせる「CSVダウンロード」機能などです。 今回はAPI[1]から得られたデータをファイルとしてダウンロードさせたい場合のフロントエンドの実装方法について考察します。 要件 今回考える要件は、前述のとおり、APIから得られたデータをファイルとしてダウンロードさせることです。具体的には、以下のような要件を考えます。 APIをGETリクエストで呼び出し、そのレスポンスをそのままファイルとしてダウンロードする フロントエンドでの何らかのアクション(ボタンクリックなど)によってダウンロードがトリガーされる 追加の要件次第でやり方は変わりますが、とりあえず以上の前提で考えます。 ベストな方法 とりあえず、筆者が考える一番ベストな方法を紹介します
米Twitter社が、イーロン・マスク氏の保有する「X Corp.」という名前の企業に統合され、企業としてすでに存在していないことが分かった。カリフォルニア北部地区連邦地方裁判所などで開かれている訴訟において、提出された資料から判明した。 X社はイーロン・マスク氏の持株会社「X Holdings」の子会社。ネバダ州で設立され、カリフォルニア州サンフランシスコに事務所を構える非公開企業という。4月4日付の資料で、旧Twitter社の弁護人が「Twitter社はX社に吸収合併され、もはや存在しない」と明かした。 この訴訟は、TwitterやFacebookのアカウントを停止された女性が旧Twitter社やMetaなどを相手に異議を申し立てるために提起したもの。 関連記事 Twitterの「サークル」内の投稿が外のタイムラインに表示されてしまうとの報告 Twitterの「サークル」内で投稿したツ
2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加された「カラー関数」、Safariの100vhを解決する新しいビューポート単位「svh」など、今すぐにでも使用したい機能ばかりです。 Photo by Jr Korpa on Unsplash CSS in 2022 by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 注目の新機能(クロスブラウザでサポート) まだ先の新機能(実験的/シングルブラウザでサポート) 停滞している新機能 Safariは「新し
開かれたインターネットを目指すソフトウェアエンジニアらによって組織された非営利団体・Open Web Advocacy(OWA)が、ユーザーの目が届かない場所でセキュリティやプライバシーを大きなリスクにさらすアプリ内ブラウザについて提言しました。 In-App Browsers: The worst erosion of user choice you haven't heard of - Open Web Advocacy https://open-web-advocacy.org/blog/in-app-browsers-the-worst-erosion-of-user-choice-you-havent-heard-of/ 以下のムービーでは、OWAが危惧しているアプリ内ブラウザの問題点がアニメーションでわかりやすく解説されています。 Open Web Advocacy - In-
jQuery依存を脱した「Bootstrap 5」正式リリース、IEもついにサポート対象外に。右からの横書き「RTL」など新機能 複雑なHTMLやCSSを記述しなくとも、簡単にWebページをデザインできるフレームワーク「Bootstrap」の最新版、「Bootstrap 5」正式版がリリースされました。 One more time, we're gonna celebrate—Bootstrap 5 has officially arrived! New accordion and offcanvas components, no more jQuery, no more IE, RTL support, new utilities and utilities API, new examples, new docs, and so much more! https://t.co/yWnJv
自由入力された文章をデータ化する形態素解析ですが、巨大な辞書が必要になったり次々登場する単語に対応することなどなかなか大変そうなイメージでしたが、機械学習を使った、単語分割するコンパクトな実装「TinySegmenter」を発見。ブラウザやDenoでいい感じに使えるESモジュール版にしてみました。 「頻出単語表示 by TinySegmenter」 文章を入れると、頻出単語順に並び替えて表示する、サンプルアプリ。このアプリでは、3文字以上を単語としています。一日一創ブログをコピペしてみるといい感じに! プログラムで組み込む方法は簡単、ブラウザやDenoで下記コードを入れるだけ。 import { TinySegmenter } from "https://code4fukui.github.io/TinySegmenter/TinySegmenter.js"; const segs = T
私が愛用するオンライン開発ツール インターネット上には、フロントエンド開発者の生活を楽にしてくれる素晴らしいツールが沢山あります。この記事では、私が開発の仕事で頻繁に使っている11のツールについて簡単に説明します。 1. CanIUse Web APIが特定のブラウザで互換性があるのか、モバイルブラウザで使用できるのか、分からないことはありませんか?このオンラインツールを使えば、ブラウザの互換性についてWeb APIを簡単にテストできます。 Can I use―HTML5、CSS3などの対応表。 「Can I use」は、デスクトップとモバイルにおけるフロントエンドWebテクノロジーを支援する、最新のブラウザ対応表を提供します。 caniuse.com Web Share APIのnavigator.share(...)に対応しているブラウザとバージョンを知りたいとします。 結果を見てくだ
AIにフルスタックアプリの生成を指示、Webブラウザ上のNode.js環境でそのまま実行できる「bolt.new」、StackBlitzが公開 WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、Webブラウザ上でAIにフルスタックアプリの生成を指示し、そのままWebブラウザ上のNode.js環境で実行やデバッグなどを行える新サービス「bolt.new」を公開しました。 bolt.newはGitHubでサインオンすることにより誰でも無料で試すことができます。 bolt.newの大きな特徴は3つあります。 1つ目は、AIがフルスタックアプリケーションの生成を、必要なパッケージやライブラリの導入からコードの生成、ビルドまで含めて最初から最後まで実行してくれる点。 2つ目は、AIが生成したフルスタックアプリ
Pocket is saying goodbye Pocketは2025年7月8日にサービスが終了し、PocketのWebサイト・アプリ・APIにアクセスできなくなるとのことです。データは10月8日までエクスポートはできますが、それ以降は完全に削除されます。経緯や有料版の払い戻しなど詳しくは、上記のページをご覧ください。 Pocketデータの保存方法 Pocketで保存したブックマークのデータは、簡単にダウンロードできます。 Pocket: エクスポート Pocketにはエクスポートのページが用意されており、上記ページからデータをエクスポートできます。アカウントに登録しているメールアドレスが正しいことを確認して、「CSVファイルをエクスポート」をクリックするだけです。24時間以内にダウンロード方法がメールに送られてきます。私は、2,3時間後に届きました。 Pocketの代替サービス「Rai
2022/04/28:追記 公開していたzipファイルのリンクを削除しました。 バックエンドのサーバーを停止しました。 伴ってもう星が流れなくなります。 ※この記事にはちょっとだけエッチな内容が含まれます!苦手な方はご注意ください。 こんにちは。あんど(@ampersand_xyz)と申します。 いきなりすみません、タイトルにエッチとか入ってて驚かれた方もいらっしゃることでしょう。どういうことなのか説明させていただきます。 概要説明 画像出典: 吸血鬼すぐ死ぬ 9巻 P134 盆ノ木至 秋田書店 __要するにこれです。__さすがに宙に星を降らせるわけにはいきませんので今回はブラウザ内に星を降らせていきます。 漫画のコマを見ただけでは何を言ってるのかご理解いただくのが難しいかもしれませんが、これ以上説明のしようがありませんのでついてきてください。 実現方法 いかにしてエッチなことを考えている
Intro 4 月末にリリースされる Chrome 136 からは、一部のケースで「閲覧履歴があってもリンクの色が変わらない」状態が発生する。 もしこの挙動に依存して閲覧をしているユーザがいれば、多少不便に感じるかもしれない。 しかし、これは長年問題視されてきた、ユーザのプライバシー保護のための更新だ。 ユーザ側でも、「サイトが壊れたのでは?」と思う人もいるだろうため、前半は技術用語を少なめに解説し、エンジニア向けの解説は後半で行う。 従来の挙動 例えば、Wikipedia では、リンクをクリックして閲覧先を確認すると、閲覧済みのリンクの色が変わる。 これは、ブラウザに保存された閲覧履歴に該当するリンクの色を、訪問済みとして変えるブラウザの機能だ。 多くのリンクがある場合、確認済みかどうかがわかるために、便利に使われることもあるだろう。 (最近では、閲覧済みでもリンクの色を変えないように実
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く