すべての記事一覧

すべての Blog 記事を表示しています。（1 / 20 ページ）

Re: AMP stories が発表されたので早速簡単なストーリーを作ってみた件（v1.0 対応版）

2018年に書いた「AMP stories が発表されたので早速簡単なストーリーを作ってみた件」という記事について、その後、AMP stories のバージョンアップ（v0.1 → v1.0）に伴い記述が古くなってしまっている点を補足する記事を書きました。

Chrome 75 に HTML 側の指定のみで動作する画像遅延読み込み（loading="lazy"）が実装される

img 要素や iframe 要素などのリソースを、HTML 側の指定のみで遅延読み込みに対応させる loading 属性を、Chrome 75 が先行実装しましたので簡単に紹介。

WebP フォーマットの画像に対応した Firefox 65 が正式リリース

Firefox 65 が正式リリースされ、Google が開発する静止画フォーマット「WebP （拡張子 .webp）」に対応しました。

gulp 4.0 が正式リリース、v3 からの移行に伴う gulpfile.js ファイルの修正点

gulp 4.0 が正式リリースされましたが、v3 から v4 へのバージョンアップに伴い実施されたいくつかの修正が原因で、v3 環境で使用していた gulpfile.js ファイルがそのままでは正常に動作しなくなりました。v4 移行のために行った gulpfile.js ファイルの修正点をまとめます。

全フィッシングサイトのうち、約半分は SSL で保護されている

2017年以降、フィッシングサイトにおける SSL 証明書使用率が急激に増加しており、すでにフィッシングサイト全体のほぼ半数は、SSL 証明書を取得し、https:// で始まる URL でホストされているという話。

Microsoft Edge が「Chromium」ベースに移行すると発表された件

Microsoft は同社が開発する Web ブラウザ「Microsoft Edge」について、独自レンダリングエンジンである「EdgeHTML」をやめ、Google Chrome などが採用する「Blink」に切り替えるなど、「Chromium」ベースの開発へと移行する計画を発表しました。

Google Chrome 68 が正式リリース、SSL で保護されていないページに警告表示がスタート

Chrome 68 が正式リリースされ、かねてからアナウンスされていた、SSL（TLS）保護されていないページに対して「保護されていません」という警告が表示されるようになりました。

Cookie 使用の同意を得てから Google Analytics のトラッキングを有効にする

Google Analytics （アナリティクス）のトラッキングを、ユーザーの同意有無によって有効にしたり、無効にしたりするための簡単な JavaScript を書いてみましたというお話。

Chrome における HTTPS 通信時の「保護された通信」表記廃止、非 SSL 接続時の警告表示の変更と適用開始時期が発表される

2018年9月4日に正式リリース予定の Chrome 69 からは HTTPS 通信時の「保護された接続」という表記が廃止され、続く 10月16日正式リリース予定の Chorme 70 では、HTTP 通信でのフォーム入力に対してアドレスバーで警告が表示されるようになります。

次期 Android では「DNS over TLS」がサポートされる

Google は、次期 Android OS となるコードネーム「Android P」の Developer Preview （開発者向けプレビュー版）において、DNS サーバとの通信を暗号化する「DNS over TLS」をサポートすると発表しました。

動画（Netflix）視聴目当てで Oculus Go を購入したら正解だった件

スタンドアロンで動作する VR ヘッドセット「Oculus Go」を、主に Netflix の視聴目的で購入してみたらとってもよかったというお話。

GitHub Pages、カスタムドメインでも HTTPS による接続が可能に

静的な Web サイトを簡単に公開可能な GitHub のサービス「GitHub Pages」で、カスタムドメインを使用している Web サイトにおいても、無料で HTTPS 接続が可能になりました。

Google Chrome 66 で音声の自動再生をブロック（ミュート）する機能が有効に

Chrome 66 が正式リリースされ、音声の自動再生をデフォルトでブロックする機能が有効になりました。Web ページ訪問時に自動再生される音声については、一部の Web サイトを除いて基本的にミュートされます。その他、CSS Typed Object Model のサポートなどが行われています。

暗号化されていないパスワードが内部ログに保存されていた問題を Twitter が公表した件で、パスワード変更もいいけど 2段階認証もね

Twitter が社内システムのバグによって、平文のパスワードが内部のログファイルに保存されていたことが判明したと発表した件についての簡単なまとめと、パスワード変更だけでなく、2段階認証を有効にした方がいいよというお話。

Gmail アドレス内の「.」（ピリオド）を無視する仕様がフィッシングに悪用可能だという指摘

Gmail がアカウント名に含まれる「.」（ピリオド）を無視する仕様が、Gmail アドレスを登録する Web サービス側の特定の仕様と組み合わさることによってフィッシングのリスクを増加させるという指摘がされていましたので取り上げてみます。

Safari 11.1 は SSL で保護されていないページにパスワード入力欄があるとアドレスバーで警告する

つい先日リリースされた、iOS 11.3 にもバンドルされた最新版の Safari 11.1 では、SSL で保護されていないページにログインフォームなどパスワード入力欄が存在する場合にアドレスバーで警告する機能が有効になりました。

Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境

フロントエンドの開発を色々と捗らせてくれる gulp について、ここ最近、私が利用しているパッケージの紹介を中心に、主に Web サイトを制作するお仕事をしている方に向けた、なるべくわかりやすい解説としてまとめてみました。

リアルタイム画像処理機能が充実した CDN、「imgix」を試してみたらとても簡単で便利だった件

画像処理に関する機能を豊富にそろえ、画像の配信に特化した CDN である「imgix」を導入してみたらとても便利だったので、導入の手順から実際の利用方法などについて簡単にまとめました。

各ブラウザにおけるトラッキング拒否機能（DNT）の有効化について

Facebook が各 Web サイトに設置された「いいね」ボタンなどを介して、ユーザーに無断でトラッキングを行っているというニュースに関連して、ブラウザ側でトラッキング拒否を要求する仕組み「Do Not Track」について、簡単なまとめ。

AMP stories が発表されたので早速簡単なストーリーを作ってみた件

Accelerated Mobile Pages （AMP）の新しい拡張コンポーネントとして、「AMP stories」が発表されました。このフォーマットは、タップ操作によって軽快に閲覧可能なフルスクリーンのビジュアルコンテンツを提供可能にします。

Google Chrome 65 が Beta リリース、CSS Paint API、display: contents のサポートなど

Google Chrome 65 がベータリリースされ、モダンブラウザでは初めて、CSS Paint API を実装した他、Server Timing API への対応、display: contents のサポートなどが行われています。

Google Chrome 68 は SSL で保護されていない全てのページに対して「安全でない」と警告する

2018年 7月下旬に正式リリース予定の Chrome 68 より、SSL で保護されていない（HTTP 接続で提供される）全ての Web ページに対して、アドレスバーに「安全でない」という警告が表示されるようになるという話。

完全禁煙のカフェを現在地から簡単に調べるサイトを作った件

外出先で完全禁煙のカフェを探す手間を最小限にするため、ブラウザで開くだけで現在地から周辺にある禁煙のカフェやレストランの存在を簡単に調べられるサイトを作ったという話。

Firefox 55 がヘッドレス環境での実行に対応、拡張されたスクリーンショット機能も便利

Firefox 55 が正式リリースされましたが、WebVR への対応、64bit 版 Windows 向けビルドの本格展開によるパフォーマンスの大幅な改善が行われたほか、デフォルトでは無効ながら、スクリーンショット機能が強化されました。

VALU を公開してみました - 手探りで優待も登録してみた件

まるで株式のように個人が VA と呼ばれる疑似株式を発行し、活動資金を調達したり、VA のトレードを行ったりすることが可能な、ビットコインを用いたマイクロトレードサービス「VALU」のアカウントが公開されましたので紹介と同時に雑感を。

Windows 10 で画面の一部をドラッグ & ドロップしてスクリーンショットを撮る方法

Windows 10 （Creators Update 適用済み）では、ショートカットキーとして [Windows キー] + [Shift キー] + [S] を押すことで、画面の一部をドラッグ & ドロップで選択してクリップボードにコピーする機能が標準で利用できます。

Mastodon 1.4.x （Docker）の assets:precompile が失敗するので Bash on Ubuntu on Windows 上で実行して切り抜けた件

Mastodon v1.4 系へのアップデート時に実行した assets:precompile が失敗するため、Docker for Windows と Bash on Ubuntu on Windows で Mastodon のビルド環境を作ってそこで実行してアップデート作業を進めた際の手順をまとめます。

Google Chrome 59 が正式リリース、ヘッドレス環境での実行に対応、開発者ツールへの機能追加など

Chrome 59 が正式リリースされ、ヘッドレス環境での実行に対応した他、デバイスのカメラをコントロール可能な「Image Capture API」の実装、開発者ツールへのフルページスクリーンショット機能やカバレッジ計測ツールの追加などが行われました。

Google Chrome 62 は SSL で保護されていないページの入力フォームに対して「安全でない」と警告する

10月に正式リリース予定の Chrome 62 より、SSL で保護されていないページに入力フォームがある場合、アドレスバーに警告が表示されるようになるとのこと。特にシークレットモードの場合はページ読み込み時点で警告が表示される予定です。

Mastodon インスタンスを運用しているサーバを HTTP/2 対応させた話（CentOS7 + nginx + OpenSSL）

自分専用に立てた Mastodon （マストドン）インスタンスで、HTTP/2 を有効にしたのでその手順をメモ。サーバ環境は CentOS7。nginx 1.13.0 と OpenSSL 1.0.2k を使用してソースからビルド。

Mastodon インスタンスの画像や動画の保存先をクラウドストレージ（Amazon S3）に移行した話

Mastodon インスタンスが取得する画像や動画の保存先を外部サーバに変更して自分のサーバのストレージ消費を抑えた話。Mastodon がデフォルトで対応している Amazon S3 に画像や動画が保存されるように設定した際の手順をまとめます。

さくらの VPS + CentOS7 で俺専用 Mastodon インスタンスを立ててみた話

Mastodon インスタンスを自分専用に運用してみようと思い、手元で余っていたさくらの VPS （さくらインターネット）を利用して CentOS7 + nginx + Docker で立ててみたのでメモ

Edge が CSS カスタムプロパティ（CSS Variables）に対応したので試してみた

Windows 10 Creators Update の提供とあわせて、Microsoft Edge が build 15.15063 へとアップデート。これにより CSS カスタムプロパティに対応したので早速試してみました。どうやら content プロパティを変数から読み込めないようです。

Windows Vista と IE9 のサポート終了（2017年4月11日）まで 10 日を切った件

Windows Vista の延長サポート期間が 2017年 4月 11日で終了することに伴い、Windows Vista 上でのみサポート対象となっていた IE9 についてもサポート対象から外れることで、IE11 が利用可能な唯一の IE バージョンとなります。

normalize.css 6.0.0 がリリース、作者の意見的意味合いが強かったスタイル定義を削除

normalize.css 6.0.0 のリリースで、それまで入っていた、純粋なブラウザ間の差異を吸収する目的からは少し外れた "opinionated" なスタイル定義がすべて削除されました。

Microsoft Edge が build 15.15061 で CSS カスタムプロパティをサポート

Microsoft Edge が CSS カスタムプロパティ（CSS Variables）のサポートを発表しました。現時点では開発者向け実装のみ。build 15.15061 以降で利用することができます。

Google Chrome でシマンテック（旧ベリサイン）発行 SSL 証明書の有効期限が強制的に短縮されたり、EV （拡張認証）が無効になるかもという話

最大手の認証局（CA：Certification Authority）であるシマンテック（旧ベリサイン）が、適切な認証手続きを行わずに SSL 証明書を発行していたとされる問題で、Chrome チームが提案した証明書有効期限の段階的な短縮や EV 証明書の無効化についてまとめます。

Firefox 52 が正式リリース、WebAssembly、CSS Grid Layout の実装、レスポンシブデザインモードの拡充など盛りだくさん

Firefox 52 が正式リリースされ、WebAssembly、および CSS Grid Layout の実装が行われたほか、レスポンシブデザインモードにおける新機能の追加やセキュアでないログインフォームに対する警告表示が強化されました。

Chrome 56 に position: sticky; が戻ってきた

Chrome 56 が CSS position: sticky; に対応しました。画面からスクロールアウトする際に、そのまま画面上部に固定されてスクロールに追随してくるような要素の配置が CSS のみで実現可能です。

Chrome 56 が正式リリース、SSL で保護されていないページにパスワード入力欄があるとアドレスバーで警告する

Chrome 56 が正式にリリースされましたが、このバージョンでは、SSL で保護されていないページにパスワード入力欄がある場合、アドレスバーに警告が表示されるようになりました。

リツイートしにくい最近の Twitter

最近、元ネタをたどりにくい、動画をパクったツイートが多くて、おいそれとリツイートしにくいご時世ですよねという愚痴。

ボタンを押したら商品が届く、「Amazon Dash Button」を早速試してみた

ワンプッシュするだけで、事前に登録してあるお気に入りの商品を簡単に注文できる「ボタン」、「Amazon Dash Button」を試してみましたので簡単なレビューと設定方法などをまとめます。

WordPress のユーザー名を隠してもセキュリティ対策に大きくは影響しない

WordPress のユーザー名が外部からわかってしまうのが問題だという指摘に関して、ユーザー名は秘匿できるならすればよいと思いますが、それ自体はセキュリティ対策として「最重要」ではありませんよと言うお話。

Firefox Developer Edition のレスポンシブデザインモードに新機能、デバイスピクセル比（DPR）のエミュレートが可能に

Firefox Developer Edition のレスポンシブデザインモードに、「Network Throttling （ネットワーク環境のエミュレート）機能」、「DPR （Device Pixel Ratio / デバイスピクセル比）のエミュレート機能」の追加をはじめとした機能強化が行われました。

Apple デザインの 20 年間を 450 枚の写真で記録した写真集「Designed by Apple in California」

Apple Design の過去 20 年の記録を 450 枚の製品写真で表現したハードカバー仕様の豪華写真集「Designed by Apple in California」を購入したので紹介。

過去 2年間のカーシェアリング利用料をまとめてみたので普通自動車の維持費と比べてみる

車を所有するかカーシェアリングなどを利用するかは単に金銭的な比較だけではなくライフスタイルの問題なのでどちらが良い悪いと言うつもりはありませんが、個人的にここ 3年程カーシェアリングを使ってきて、車を所有していた場合と比べてどの程度コスト的なメリットがあったのか参考までにまとめてみます。

Google 透明性レポートに「HTTPS の使用状況」セクションが追加、日本は HTTPS の普及で遅れ気味

Google は、同社が公開している透明性レポートに、新たに「HTTPS の使用状況」セクションを追加したことを発表しました。データを見てみると、日本だけ他国に比べて HTTPS の利用率が低いことがわかります。

閲覧中の URL を AMP （Accelerated Mobile Pages）バリデータに投げるブックマークレット

q-Az さんが公開した「AMP ページに＃development=1 を付けて開くブックマークレット」に感化されて、閲覧中の URL を Web 版の AMP バリデータに送信するブックマークレットを作ったので共有します。私が作ったシンプル版と、q-Az さんのものを改造した版の 2バージョンを掲載。