View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる 2024年6月リリースのChrome 126とEdge 126でJ
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
BlockNote - Javascript Block-Based React rich text editor
The open source Block-Based rich text editorA beautiful text editor that just works. Easily add an editor to your app that users will love. Customize it with your own functionality like custom blocks or AI tooling. Why BlockNote?Whether you want extensive customization or a great out-of-the-box experience, BlockNote has you covered:
Editor.js
Editor.js provides maximum power for developers and products staying focused on the end-user experience
コーポレートサイトでの htmx 実装をデモサイトで試してみよう | htmx | ブログ | a-blog cms developer
2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位 になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ
続々、Publickeyが受けたDDoS攻撃。DDoS対策に効果を発揮した設定紹介編
3月12日火曜日に始まったPublickeyへのDDoS攻撃に対して、これまでサーバの強化、Cloudflareの導入とDDoS対策のための設定を行ってきました。 その結果、3月24日日曜日の夜に始まり3月27日水曜日の朝まで3日間連続で続いたDDoS攻撃のあいだもWebサイトの閲覧と記事更新などを問題なく行える状態となり、DDoS攻撃がWebサイトの運営の大きな障害ではなくなりました。 ちなみにそれ以後DDoS攻撃は止んでいますが、今後はいつDDoS攻撃を受けてもWebサイトの運営に支障がでることはなくなったと考えられます。この記事では結局どのような対策を行ったのか、実際に効果を発揮したDDoS対策を紹介していきます。 これまでの経緯は下記の記事をご参照ください。 Publickeyが受けたDoS攻撃、これまでの経緯と対策まとめ 続、Publickeyが受けたDoS攻撃、これまでの経緯と
エックスサーバーでImageMagickを使う
WordPressで画像リサイズなどの処理を行おうとした時、画像処理エンジンとしてGDまたはImageMagickが使われる。優先度が高いのはImageMagick。 エックスサーバーではPHPからImageMagickを扱うための拡張モジュールImagickがインストールされていないため、デフォルトではGDを用いて処理が行われている。 しかし各種ブログ記事などを読むと、画像リサイズ時の画質はImageMagickの方が良いようだ。写真サイトを運営する者としては、ぜひImageMagickを導入してみたい！ 試行錯誤の末、エックスサーバーにImageMagick（及び、PHP拡張モジュールImagick）をインストールし、WordPressでの画像処理にImageMagickを用いることができるようになったので手順を書いておきます。 準備１：現在使用されている画像処理エンジンの判定 はじめ
Publickeyが受けたDoS攻撃、これまでの経緯と対策まとめ
Publickeyのサーバは3月12日から14日にかけて何度もDoS攻撃を受けてダウンしていました。 その間、読者や広告を掲載いただいているお客様や代理店様にご不便やご心配をおかけし申し訳ありませんでした。 ひとまず現在までの状況と対応について報告したいと思います。 先に現状のみを報告すると、CloudflareのDDoS対策サービスを導入していまのところ平穏な状況を保っているため、このまま様子をみているところです。 DoS攻撃の発生時間帯 DoS攻撃とは、大量のトラフィックをWebサーバなどに浴びせることでサーバを応答不能にしてしまう攻撃のことです。 下図が3月12日から14日にかけてPublickeyのサーバに対して行われたDoS攻撃の主な発生時間帯です。 グラフはPublickeyのページビューの推移を示しており、横向きの矢印が主なDoS攻撃の発生時間帯を示しています。発生時間帯では
【令和最新版】Google Fontsの読み込み最適化の結論 ｜ TAKLOG
当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。 結論いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。 <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" fetchpriority="high" href="{href}" /> <link rel="stylesheet" href="{href}" media="print" onload='
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Webフォントで句読点や（）などの約物を半角にして詰められる「YakuHanJP」の使い方。｜DESIGN REMARKS [デザインリマークス]
Webデザインと印刷物で日本語フォントに関する大きな違いとして、句読点やカッコなど約物(やくもの)の詰めが挙げられます。 印刷物ではイラストレータの文字設定やカーニングなどで綺麗に調整ができますが、 Webデザインでは難しいことでした。 今回は、 句読点やカッコなど約物を半角サイズにして詰めてくれる「Yaku Han JP」というフォントをご紹介します。 基本的な使い方から、私なりに色々な実験もしてみました。 Yaku Han JPの「半角にする」というのは、全角入力の約物文字を半角入力の文字に変換するということではなく、「全角で入力した約物文字が、半角ぐらいのきれいなサイズで表示される」ということです。文字情報としてはあくまでも全角扱いです。 Yaku Han JPと使い方について Yaku Han JPには制作者様の公式サイトがあります。 概要と使い方についてはこのサイトを見るのが最も
![Webフォントで句読点や（）などの約物を半角にして詰められる「YakuHanJP」の使い方。｜DESIGN REMARKS [デザインリマークス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/d39735d6ad116222b6045f353cf70aafa402093f/height=288;version=1;width=512/https%3A%2F%2Fdesign-remarks.com%2Fwp-content%2Fuploads%2F2019%2F10%2Fyakuhan_font_thumb-1200x675.jpg)
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしました | JavaScript | ブログ | 名古屋のCMS構築・Web制作会社 アップルップル
modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。
XSERVERのメールフィルタでメール転送してみよう
メールフィルタというと迷惑メールのフィルタリングなどを連想されるかと思いますが、今回はXSERVERのサーバ側のmailfilterを使って実践的な条件を指定して携帯メールなどへ受信通知をやってみようというネタです。 きっと、仕事の効率アップに繋がるはず！ INDEXメールの転送通知！？mailfilterを使う.mailfilterの場所.fillterで自前のプログラムを読み込むsend_mail.phpプログラムのダウンロード メールの転送通知！？ 多くのレンタルサーバやプロバイダメールで転送が行えます。 ただ、すべてを一括して指定のアドレスに転送はできても、着信通知やいわゆるGUI的な操作でコントロールパネルなどから細かい条件でフィルタリングする機能は見受けられません。 メールクライアントの転送機能を利用する方法もありますが、その場合はパソコンを随時起動させておく必要があります。
UX向上の鍵「タグ絞り込み検索」の実装とその利点 | CMS | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
コンテンツ量の多いメディアサイトや商品情報の多いカタログサイトなどでの目的のコンテンツを探すこと考えるとタイトルにある「タグ絞り込み検索機能」がオススメである。今回は、この機能について深掘りして紹介していきます。 Instagram や X の ハッシュタグ 検索が一般的になったことから「タグ検索」という言葉も SNS を利用している多くの人にも「そのコンテンツに関するキーワード検索」ということが伝わるようになったのではないでしょうか。 そんなタグを一覧で表示する手法として「タグクラウド」というものがあります。 今回紹介する タグ絞り込み検索機能 の出発点となる UI がタグクラウドです。 タグ絞り込み検索機能の出発点、タグクラウドとは？ タグクラウドは、ウェブサイトのコンテンツや記事に関連付けられたタグ（キーワード）を視覚的に表示する手法です。これらのタグは、通常、ウェブページ上で雲のよ
Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。 簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。 非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。 導入の容易さ :
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Darginec05/Yoopta-Editor: Notion-like editor with similar behaviour
Gmailへのメールが届かなくなる？ 2024年6月までにやるべき3つの対応 | Web担当者Forum
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
hCaptcha - Stop bots and human abuse.
The Valley of Code: htmx