免責 このページに記載されている内容は記事執筆時点にて動作を確認した内容です。今後、Instagram APIの仕様変更や、STUDIOのサービス変更により、動かなくなる可能性があります。こちらのページに記載されている内容に関して、個別のお問い合わせやサポートは受け付けておりません。予めご了承ください。 目標 特定のInstagramアカウントの最新の投稿を、指定件数、STUDIOページに表示します。 Instagramからの情報取得には Instagram Graph APIを使用し、STUDIOのAPI連携機能（Beta）を利用してSTUDIOページ内に繋ぎこみます。 制約：動画は表示できません。 用意するもの 根気 自分のInstagram プロアカウント 自分のFacebook アカウント／Facebookページ 表示したいアカウントのユーザー名（要 Instagramプロアカウン
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
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.
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 provides maximum power for developers and products staying focused on the end-user experience
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 のコードを書かずにサーバーとの非同期通信を実現し、ページ
3月12日火曜日に始まったPublickeyへのDDoS攻撃に対して、これまでサーバの強化、Cloudflareの導入とDDoS対策のための設定を行ってきました。 その結果、3月24日日曜日の夜に始まり3月27日水曜日の朝まで3日間連続で続いたDDoS攻撃のあいだもWebサイトの閲覧と記事更新などを問題なく行える状態となり、DDoS攻撃がWebサイトの運営の大きな障害ではなくなりました。 ちなみにそれ以後DDoS攻撃は止んでいますが、今後はいつDDoS攻撃を受けてもWebサイトの運営に支障がでることはなくなったと考えられます。この記事では結局どのような対策を行ったのか、実際に効果を発揮したDDoS対策を紹介していきます。 これまでの経緯は下記の記事をご参照ください。 Publickeyが受けたDoS攻撃、これまでの経緯と対策まとめ 続、Publickeyが受けたDoS攻撃、これまでの経緯と
WordPressで画像リサイズなどの処理を行おうとした時、画像処理エンジンとしてGDまたはImageMagickが使われる。優先度が高いのはImageMagick。 エックスサーバーではPHPからImageMagickを扱うための拡張モジュールImagickがインストールされていないため、デフォルトではGDを用いて処理が行われている。 しかし各種ブログ記事などを読むと、画像リサイズ時の画質はImageMagickの方が良いようだ。写真サイトを運営する者としては、ぜひImageMagickを導入してみたい！ 試行錯誤の末、エックスサーバーにImageMagick（及び、PHP拡張モジュールImagick）をインストールし、WordPressでの画像処理にImageMagickを用いることができるようになったので手順を書いておきます。 準備１：現在使用されている画像処理エンジンの判定 はじめ
Publickeyのサーバは3月12日から14日にかけて何度もDoS攻撃を受けてダウンしていました。 その間、読者や広告を掲載いただいているお客様や代理店様にご不便やご心配をおかけし申し訳ありませんでした。 ひとまず現在までの状況と対応について報告したいと思います。 先に現状のみを報告すると、CloudflareのDDoS対策サービスを導入していまのところ平穏な状況を保っているため、このまま様子をみているところです。 関連記事 最終的にDDoS攻撃に効果を発揮した設定を下記記事で紹介しています。 続々、Publickeyが受けたDDoS攻撃。DDoS対策に効果を発揮した設定紹介編 DoS攻撃の発生時間帯 DoS攻撃とは、大量のトラフィックをWebサーバなどに浴びせることでサーバを応答不能にしてしまう攻撃のことです。 下図が3月12日から14日にかけてPublickeyのサーバに対して行われ
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
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%2Ffanyv88.com%3A443%2Fhttps%2Fdesign-remarks.com%2Fwp-content%2Fuploads%2F2019%2F10%2Fyakuhan_font_thumb-1200x675.jpg)
modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。
メールフィルタというと迷惑メールのフィルタリングなどを連想されるかと思いますが、今回はXSERVERのサーバー側の mailfilter を使って実践的な条件を指定して携帯メールなどへ受信通知をやってみようというネタです。 きっと、仕事の効率アップに繋がるはず！ メールの転送通知！？ 多くのレンタルサーバーやプロバイダメールで転送が行えます。 ただ、すべてを一括して指定のアドレスに転送はできても、着信通知やいわゆる GUI 的な操作でコントロールパネルなどから細かい条件でフィルタリングする機能は見受けられません。 メールクライアントの転送機能を利用する方法もありますが、その場合はパソコンを随時起動させておく必要があります。 また、メールの受信をトリガーにできる IFTTT も悪くありませんが、こちらは若干のタイムラグが発生します。 以前、さくらインターネットのレンタルサーバーで同じような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
