WWW WATCHVercel AI SDK を使用して、Claude 3 と、ChatGPT ライクにチャットする Web UI を作る
Firefox 38 が正式リリース、レスポンシブ・イメージ、ruby 要素のサポートなど
Firefox 38 が正式リリースされ、自動更新も提供開始されました。picture 要素がデフォルトで有効になり、srcset 属性が使えるようになったことで、レスポンシブ・イメージの利用が可能になりました。またルビへの対応が行われています。 Firefox の最新版、Firefox 38 が正式リリースされ、自動更新も提供開始されました。Android 版も同時公開。自動更新が少し遅れて、38.0.1 として届いたので、リリース直後に少し問題があったみたいですね。 picture 要素がデフォルトで有効になり、srcset 属性が使えるようになったことで、所謂レスポンシブ・イメージ （Responsive images） の利用が可能になりました。また、ruby 要素、CSS Ruby への対応が行われ、ルビの使用が可能になっています。 Firefox 38.0 リリースノート An
事前予告されていた OpenSSL のアップデートが公開されたので OpenSSL 1.0.2a を入れた件
OpenSSL に関して、3月 19日に重大なアップデートをリリースするよと事前に予告されていた件で、予告通り 19日 （米国時間） に多数の修正が適用されたバージョンのリリースが行われましたので、自分のサーバ環境にも適用しました。 今回のリリースに関連して公開されている各バージョンと、セキュリティアドバイザリーは下記です。 OpenSSL OpenSSL Security Advisory [19 Mar 2015] アドバイザリーを確認する限り、細かい脆弱性に関する修正は行われているものの、思っていた程は重大な感じではなく、まずはひと安心でした （もちろん、修正版の適用はなるべく迅速に行うべきです）。 なお、「Severity: High （重要度 高）」 に分類されている FREAK に関連した修正 （CVE-2015-0204） に関しても、後述しますが重要度の再分類があったために
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた Google がモバイル検索の順位決定時に 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表したことに関連して、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断しているのか、という点について調べてみました。 先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 （米国時間） から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。 Finding more mobile-friendly search results ： Official Google Webmaster
SVG のフォールバックは結局 Modernizr に落ち着いた件
タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替えるっていう手で落ち着きましたというお話。 SVG を使うにあたって、どの程度古いブラウザまで対応するかっていうのはありますが、今回対象にしている SVG は、ページ内で通常の画像 （普通の JPEG とか PNG） と同じように使われるものを想定していますので、いくら古いブラウザはサポート対象外とは言っても、文書内で大切な意味を持つ画像が表示されないのはまずいだろと。 あわせて対象となる SVG 内
IFTTT から Blog の更新を自動で画像付きツイートするためにフィードを少し直した件
この Blog が更新された時、IFTTT から自動的に自分の Twitter アカウントに 「画像付きツイート」 を投稿するための IFTTT レシピと、投稿に意図した画像を使ってもらうためにフィード側で行った修正についてまとめました。 この Blog を更新した際、IFTTT から自動的に自分の Twitter アカウントに投稿するっては昔からやっていたんですが、ちょっとそのツイートを画像投稿と合わせた、所謂 「画像付きツイート」 にしようと思って、やってみた件について書いてみたいと思います。 画像付きツイートってのは、Twitter に画像をアップロードして、それへのリンクもついたツイートのことですね。なので記事へのリンクとあわせて、ツイート内に URL が 2つ入ることになります。 具体的には下記みたいなやつ。 Blog更新 -> SVG のフォールバックは結局 Modernizr
Web サイトの制作ガイドラインをクリエイティブ・コモンズ・ライセンスで公開しました
自分の会社ので作って使っていた Web サイト制作のガイドラインをクリエイティブ・コモンズ・ライセンスで公開しました。ライセンスの範囲内で自由に使っていただけます。 会社の方の Web サイトではすでに告知したんですけども、自分の会社で作って使っていた Web サイト制作のガイドラインを公開しました。 この制作ガイドライン自体は新しく会社を立ち上げた当初に整備し始めて、そのまま使っていたんですが、自社特有のルールを整理したり、書き方を少し汎用的に調整した上で、公開することにしました。クリエイティブ・コモンズ・ライセンスで公開していますので、ライセンスの範囲内であれば自由に使っていただけます。 弊社の制作ガイドラインをクリエイティブ・コモンズ・ライセンスで公開します ： バーンワークス株式会社 制作ガイドライン ： バーンワークス株式会社 更新の履歴は GitHub で見られます。制作ガイド
LINE のビジネス向けアカウント 「LINE@」 が誰でも無料で使えるようになったので試してみた - アカウント開設から基本設定まで
LINE、実は私今まで使ったことなかったんですけれども、今日、その LINE のビジネス向け公開型アカウント 「LINE@」 が誰にでも無料で使えるようになり、LINE@ のアカウント管理や運用のための専用アプリもリリースされたということで、ちょっと試してみました。 LINE@ 公式サイト 【LINE】公開型アカウント「LINE@」をグローバルでオープン化 法人・個人問わず、月額無料でLINEを対外的なコミュニケーションやビジネスに利用可能 LINE@ 自体は以前から主に店舗など、実店舗を持ってローカルビジネスを展開している人たち向けに月額費用 5,000 円ちょいの有料サービスとして提供されていました。ですので、以前からビジネスに活用されている企業さんなどは多かったと思いますが、それが今回、店舗の有無などの制約がなくなり、誰でも無料で使えるようになったというお話ですね。 通常の LINE
ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」
SVGO は SVG ファイルから不要なデータを取り除いたりして最適化してくれる便利なソフトウェアですが、これをブラウザの画面から使えるようにしたのが、「SVGOMG」 です。 SVGOMG SVGOMG ： GitHub 例えば JPEGmini の Web 版とか TinyPNG のような画像最適化ツールがありますが、これの SVG ファイル向けですね。ブラウザから簡単に操作できますし、最適化オプションの適用も画面上で SVG ファイルの変化を確認しながら行えますのでわかりやすいと思います。 SVGO には下記のようなオプションが用意されていますが、 cleanup attributes from newlines, trailing and repeating spaces → 属性値内の重複する空白や改行を削除 remove doctype declaration → DOCTYP
常時 SSL 化による Web サイト表示速度向上の可能性について
常時 SSL 化が Web サイトのパフォーマンスに与える影響ついて、SPDY や HTTP/2 が利用可能になっている現在の状況から、その有効性や実際のパフォーマンス測定の結果についてまとめてみました。 先週、Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめる記事を書きました。内容とは別に 「5分とはいったい......」 と 5分間という時間に対する禅問答的提起をした形にも、一部ではなりましたが （大げさ）。 5分でわかる正しい Web サイト常時 SSL 化のための基礎知識 さて、この中で、常時 SSL 化のメリットやデメリットについても簡単に書いたのですが、デメリットの中で、Web サイトのパフォーマンスについて、「SSL 化でパフォーマンスが悪化する可能性」 と、一方で 「HTTP/2 や SPDY が
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL
Web アクセシビリティを身近に感じてもらうためのごく簡単なお話
この記事は、Web Accessibility Advent Calendar 2014、1日目の記事です。去年は WAI-ARIA の導入方法について、ごく初歩的な記事を書いたんですが、今年は初っぱな、1日目の記事と言うことで、ごくごく簡単な記事でハードルを下げにいってみようかと思います （余計なお世話）。 さて、「Web Accessibility （ウェブアクセシビリティ）」というと、高齢者や障害者向けなど、限られた一部 ※1 の人達に向けて、特別な対策を取ることだと思っている方もいると思いますし、これは Web サイト制作を仕事にしている人の中にも同じような考えの人、いるんじゃないでしょうか。 確かに、WCAG （Web Content Accessibility Guidelines） だの、JIS X 8341-3 だの...... あるいは、WAI-ARIA だの、支援技術が
TinyPNG が JPEG ファイルの最適化にも対応、TinyJPG もローンチ
PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツール 「TinyPNG」 が JPEG ファイルの最適化にも対応しました。 これにあわせて、「TinyJPG」 も立ち上がりましたが、TinyPNG も TinyJPG も、どちらも PNG / JPEG ファイルの最適化を同時に行えるようになっていますので、サイト名が異なるだけで機能的には同じです。 上が元々ある TinyPNG で、下が TinyJPG のスクリーンショット。 使い方は同じで、パンダさんの横の ドラッグ & ドロップ エリアに、最適化したい画像をドラッグ & ドロップすればいいだけ （もしくはこの部分をクリックしてファイルを選択）。同時に 20 ファイルまで最適化できます。 今までの TinyPNG は PNG ファイル専用で、JPEG ファイルをアップロードすると当然ながらエラーになりましたが、今は JP
Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に
現在、Firefox Nightly としてリリースされている、Firefox 36 で、unicode-range デスクリプタがサポートされました。unicode-range は @font-face デスクリプタで、読み込んだフォントの適応範囲を指定します。 例えば、ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換えたい場合などに、unicode-range でその文字や文字コード範囲を指定することができます。 4.5 Character range: the unicode-range descriptor - CSS Fonts Module Level 3 Editor's Draft 27 October 2014 unicode-range デスクリプタの使い方 こういう指定が妥当というか実用的かは別として、
主要ブラウザにおける SSL 3.0 無効化タイミングのまとめ
SSL 3.0 の脆弱性 （POODLE） の件で、10月に下記の記事を書いたんですが、その中でも触れた、各主要ブラウザにおける SSL 3.0 無効化タイミングだけ、わかりやすいように抜き出してこちらにまとめておこうと思います。メモ代わり。 SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ Internet Explorer SSL 3.0 が無効になる時期： 正式な時期は不明だが、数ヶ月以内 米国時間の 2015年 4月 14日以降、デフォルトで無効に。 「マイクロソフト セキュリティ アドバイザリ 3009008」 内では、下記の通り、（10月 15日から起算して） 数ヶ月以内に IE の既存設定 （および同社のオンラインサービス） で SSL 3.0 が無効になる旨がアナウンスされています。 マイクロソフト
Web サイトのパフォーマンスレポートを自動で作成してくれる Google Pagespeed Insights for WordPress
PageSpeed Insights を使用した Web ページのパフォーマンスレポートを WordPress の管理画面上で作成して見ることができるプラグイン、「Google Pagespeed Insights for WordPress」 を使ってみたので紹介。 Google Pagespeed Insights for WordPress ： WordPress Plugins プラグインのインストール プラグインのインストールは管理画面から 「Google Pagespeed」 などと検索すれば出てくると思いますので、そこから行います。 Pagespeed Insights API キーの取得 ただ、このプラグインを使用するには Google Pagespeed Insights の API キーが必要ですので、そちらを先に取得しておきましょう。 APIs Console に G
Google+ ウィジェットの JavaScript コードに async / defer 属性がついた件
Google+ プラットフォームで配布されている、「+1 ボタン」 や、「バッジ」 などの JavaScript コードすべてに、async / defer 属性が付与されるようになりました。 Google+ プラットフォームで配布されている、「+1 ボタン」 や、「バッジ」 などを Web サイトに設置する際に使用される JavaScript のソースコードがありますが、これらソースコードに、script 要素の async / defer 属性が付与されるようになりました。 Googleの Ilya Grigorik 氏が自身の Google+ に投稿しているほか、実際のソースコードにもすでに反映されています。 All Google+ widgets have been updated to use the script[async + defer] pattern!... ： Ily
Google 検索結果内の検索ボックスを有効にするための Microdata マークアップ
Google の検索結果内に表示される検索ボックス （Sitelinks search box） を有効にするための schema.org 語彙による Microdata を使用したマークアップについて解説してみます。 Google ウェブマスター向け公式ブログで、Google の検索結果内に表示される検索ボックス （Sitelinks search box） について刷新され、見せ方が変わったほか、この 「Sitelinks search box」 を表示するために必要なマークアップについて紹介されていました。 検索結果内の検索ボックスが新しくなりました ： Google ウェブマスター向け公式ブログ Sitelinks Search Box ： Google Developers Sitelinks search box は、検索結果で表示されるサイトリンクの下部に表示されるもので、以
Firefox の srcset 属性実装は sizes 属性を省略すると正常に動作しないらしい
1つ前の記事で picture 要素 や srcset 属性に関して書いた課程で知ったんですが、Firefox （テストしたのは Firefox Nightly 34.0a1） の srcset 属性実装に関して、sizes 属性を省略したときに正しく動作しない問題があるようです。Bugzilla@Mozilla に報告されていました。 1052417 - Default `sizes` attribute value for `srcset` should be 100vw ： Bugzilla@Mozilla srcset 属性の実装状況 srcset 属性は、近々正式リリースされる、Firefox 32 で試験的に実装されていますが、今回テストしたのは Firefox Nightly （34.0a1） です。まだ試験的な実装のため、dom.image.srcset.enabled お
W3C Markup Validation Service が HTML5 picture 要素 や srcset 属性に対応
Simon Pieters 氏 （Opera Software） のツイート経由ですが、Validator.nu および、W3C Markup Validation Service が、picture 要素と srcset / sizes 属性に対応したそうです。 正確には Validator.nu が対応したので、HTML5 文書の検証に Validator.nu エンジンを使用している W3C Markup Validation Service も対応したという形になりますが。 The W3C Markup Validation Service Validator.nu http://t.co/KS8HB5UZ9M and http://t.co/tW11dzNehp now validate @respimg <picture>/srcset/sizes thanks to @sid
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
