なんで今さら帳票エンジンを新規開発しているのか
yagisan-reports開発チームリーダーのterurouです。 デンキヤギでは yagisan-reports という「Webで使うことを前提とした」商用の帳票エンジンを開発しています（厳密にはyagisan-reportsはエンジン単体の製品ではなくクラウドサービスとして開発していますが、この記事では帳票エンジンとして記載しています）。 yagisan-reportsとは 「Webブラウザ単体で動作すること」にこだわっている帳票エンジン です。 2023年11月現在、アーリーアクセス版を提供しています。既に3社5システムで本番稼働しており、一番長いものでは3年ほど本番稼働を続けています。開発中のシステムも含めると、さらに数社あります。 元々はアーリーアクセス版の公開から早めにパブリックベータに移行する計画だったのですが、ありがたいことに早期から大口の導入相談が複数あり、こちらを優
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
ChromeがHTTPSに優先アクセスする307リダイレクトをHSTS関係なくやるようになった - Code Day's Night
2023年11月1日の時点の情報です。 先にまとめを書きます。興味があれば詳細もどうぞ。 まとめ 10月16日のChrome 118からHTTPS ファーストモードがデフォルトでオンに 条件によってHTTPS Upgradeが働いてhttpのサイトにアクセスするとhttpsに優先的にアクセスさせる挙動（Chromeが内部で擬似的に307リダイレクトを返してhttpsに誘導） HSTSサイトではないhttpサイトでもこの挙動となるケースがある httpsにアクセスできない場合やレスポンスに3秒以上かかる場合はフォールバックでhttpに誘導（Chromeが内部で擬似的に307リダイレクトを返して元のhttpに誘導） 詳細 条件 307で擬似的にリダイレクトする条件は、いくつかあるようです。把握しているものを列挙します。 HSTSサイト（HSTSヘッダ指定、Preloadリストのサイト） HST
MacのChromeで文字入力する際にブラウザが固まる問題 - njo
数年悩まされているが解決できていない問題。解決に向けて雑なメモ。固まるとGUIからの強制終了も効かずひたすら待つしかないのでかなりのストレス。 症状 MacOSのGoogle Chromeで下記のようなサイトで文字入力を行おうとするとレインボーカーソル状態のまま数秒から数十秒固まりブラウザが操作できなくなる コピペ操作でも起こる レインボーカーソルは表示されない場合もある 動き出すとタイプしていたキーが一気に入力されるような感じ 事象が発生すると別ウィンドウのGoogle Chromeも固まる Google Chrome以外のプロセスには影響してなさそう 常に発生するわけでもなく軽い時もある。ただ毎日は発生している 何をすると一時的にでも解消するのかは不明 Mac再起動直後は発生しない気がする Chrome再起動直後は発生しない気がする 発生するサイトと箇所 どのサイトとかは関係ない気もす
デザイナー向けに行なったHTML勉強会の資料を公開します｜sakito
今回はChatwork株式会社のデザイナー向けに行なったHTML勉強会で使用した解説資料をお伝えします。私は3年ほど前からChatwork株式会社の開発のサポートやデザイン基盤活動のアドバイザーとして参画しており、その活動の一環で会を開催しました。 開催の意図と目的開催概要は@emimさんが、UI設計はHTMLの理解からというタイトルでnoteに書いてくれています。企画の意図は下記のとおりです。 企画の意図 根本としては、情報整理（情報設計）の基礎概念にHTMLがとてもマッチしている、と考えているからです。 ところが、業界的にも昨今よく聞く話ではありますが、最近意外にHTMLに触れる機会がなくプロダクト開発の現場に入る人が多いのが現実です。これは、デザイナーだけでなく、なんならフロントエンドの開発者であっても。 個人的には、HTMLはマークアップ言語であること以上に、構造化のフレームワーク
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始
Web標準に新たなステータス「Baseline」が登場。変化し続けるWeb標準のうちWeb開発者が安心して使える機能群を示す。MDNドキュメントなどで表示開始 Web開発者の開発体験を改善することなどを目的としたW3CのWebDX Community Groupは、つねに新たな機能などが登場し変化し続けるWeb標準のうち、Web開発者が安心して使える機能群を示す新たなステータス「Baseline」を発表しました（Googleによる発表、MDNによる発表）。 現在、Web標準はリビングスタンダードとしてつねにアップデートが行われており、ChromeやFirefox、Safariなどの主要なWebブラウザは、Web標準で新たに策定される機能をそれぞれ実装し、最新版に反映させています。 そのため、それぞれのWebブラウザがWeb標準のどの機能をいつ頃実装し、最新版に反映させるのかは時期が異なりま
【Web】知っておきたいWebエンジニアリング各分野の基礎知見80
この記事は？ それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。 Webエンジニアリングの基礎 この記事でカバーしている領域は、以下のような領域です。W
setTimeout を完璧に理解する
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
ファイルダウンロード完全マスター | フューチャー技術ブログ
Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に、微妙に本で紹介した内容では少し足りなかったので、改めて整理のためにブログ記事にしてみました。次回、本が改訂されることがあればこのブログエントリーの内容も入れて加筆したいと思います。 Real World HTTPだとGoを使っていましたが、フロントとサーバーを同時にいじるので、本エントリーではNext.jsをサンプルに使います。Next.jsでプロジェクトを作って（npx create-next-app@latest –ts)、適当なプロジェクト名を入れてアプリケーションの雛形を作っておいてください。 Next.jsでは、1つのスクリプトファイルを作成すると、それがサーバーAPI(/pages/api以下)と、フロントの画面(/pages/以下のapi以外)になります。Next.j
ブラウザ拡張機能でブックマークコメント一覧が表示されるようになりました - はてなブックマーク開発ブログ
いつもはてなブックマークをご利用いただき誠にありがとうございます。はてなブックマーク開発チーム、ディレクターの id:yone-yamaです。 ブラウザ拡張機能に関するアップデートをお知らせいたします。 拡張機能に「コメント簡易閲覧機能」が追加されました Chromeウェブストア Firefoxアドオンページ 具体的な変更点 補足：コメント簡易閲覧機能に関するこれまでの経緯 旧バージョンの拡張機能からの移行について 拡張機能に「コメント簡易閲覧機能」が追加されました Chrome・Firefoxで提供している拡張機能「はてなブックマーク ブックマーク機能」で、コメント簡易閲覧機能の提供を開始しました。 Webページに集まったブックマークコメントを一覧で確認できるコメント簡易閲覧機能は、これまで旧バージョンの拡張機能でのみ提供していた機能です。 今回のアップデートで、「はてなブックマーク ブ
ブックマーク専用の新しいChrome・Firefoxブラウザ拡張機能を公開しました。 - はてなブックマーク開発ブログ
2022/3/16 10:30 追記 拡張機能について追加のお知らせを公開しました。よろしければ当記事とあわせてご覧ください。 bookmark.hatenastaff.com はてなブックマークの新しいChrome拡張、ならびにFirefoxアドオンを公開しました。Webの気になった記事をブラウザから素早くブックマークできる公式の拡張機能です。 下記のリンクよりブラウザにインストールして、ぜひご利用くださいませ。 インストールはこちらから Chromeウェブストア chrome.google.com はてなブックマークの既存のChrome拡張とは異なるバージョンです。別の新たな拡張機能として追加されます。 Firefoxアドオンページ addons.mozilla.org 昨年の8月より旧来のFirefoxアドオンをインストールできない状況が続いたことにより、お待ちいただいた皆様にはご不
そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends
WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP（ウェッピー）とは？ WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34％程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過（アルファチャンネル）や、アニメーションにも対応しています。つまり、JPEGのよ
Webページがブラウザに表示されるまでに何が起こるのか？
## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 上記で「127.0.0.1 localhost」とあるように、[IPアドレス] [ホスト名]というフォーマットで書かれます。 HOSTS.TXTが使われていた当時 ( 1970年代 ) では、わずか数百台のホストしかなかったので、ネット上の全てのホスト情報の記載が可能でした。 しかし、インターネットが普及していくにつれてHOSTS.TXTは肥大化していき、1983年には、ホスト数はおよそ数万台になりました。もはやHOSTS.TXTによる名前解決は不可能となったので、現在のようなDNS
#1 2020年8月にツイートしたHTML/CSS/JavaScriptのTipsまとめ
2020 年 8 月にツイートした HTML/CSS/JavaScript のツイートまとめです。見出しをクリックするとツイート元に遷移するので、気に入ったらフォロー・ファボ・リツイートお願いします。 1. enterkeyhint属性 スマホキーボードのエンターキ表示を最適化でき、フォームが送信されたときの動作をあらかじめ伝えられます。 <input enterkeyhint="enter"> <input enterkeyhint="go"> <input enterkeyhint="done"> <input enterkeyhint="next"> <input enterkeyhint="previous"> <input enterkeyhint="search"> <input enterkeyhint="send"> 各属性値を指定したときの表示は以下のようになります。 2
Chrome85でWebサイトの流入元がとれない問題と対応方法 - paiza times
(English article is here) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 Chrome最新版(Chrome 85)で、徐々にWebサイトへの正確な流入元URL(URLのパス名)が取得できなくなってきています。 例えば、はてなブログからの流入では、どの記事から流入したかがわからず、流入元の調査・分析などのマーケティングへの影響が大きいと思われます。今回はまだWeb上での情報が限られているようなので、ここでは状況と対応方法について紹介したいと思います。 発端 「paiza」には毎日いろいろなサイトからのアクセスがあります。そんななか、先日ある社員から「やけに『paiza開発日誌』（このブログです）のトップページからのアクセスが増えているのだけど、理由って分かりますか？」と質問がありました。その近辺での「paiza開発日誌」のアクセス数は通
これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
ブラウザからTCP, UDPソケットを操作するDirect Sockets API - ASnoKaze blog
2020/01/14: 実際に動くのを確認しました asnokaze.hatenablog.com (2020/09/17 注釈: Raw SocketsからDirect Socketsに名称が変更されました) ブラウザでTCP, DUPソケットを操作可能にする「Direct Sockets API」という仕様がW3CのWICGで議論されている。 また、blink-devでも「Intent to Prototype: Raw Sockets API」とプロトタイプの議論が行われている。 多くの方がセキュリティ上の懸念を抱くと思うが、ドキュメントでも慎重に検討すると書かれている。GithubでIssueを立てることも可能なので、思うことがある方は、まだまだ議論は始まったばかりでもあるので是非フィードバックされると良いと思う。(割と普通に聞いてもらえます) なお、Raw Socketsという名
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dream.Build.Play 2012 Challenge
FutaKuro（ふたクロ）- ふたばちゃんねる閲覧ビューア
