Cookie 使用の同意を得てから Google Analytics のトラッキングを有効にする
Cookie 使用の同意を得てから Google Analytics のトラッキングを有効にする Google Analytics （アナリティクス） のトラッキングを、ユーザーの同意有無によって有効にしたり、無効にしたりするための簡単な JavaScript を書いてみましたというお話。 少し前に会社の Web サイトでたまに更新しているコラムで、GDPR （General Data Protection Regulation）」、日本語で言うところの 「EU 一般データ保護規則」 に関連して、Google Analytics に新たに加わった 「データ保持」 の設定についての記事を書きました。 Google Analytics に新たに導入された「データ保持」の設定に関する誤解と対策 - バーンワークス株式会社 私、および私の会社は GDPR 等、法務関連が専門分野ではないため、具体的
GitHub Pages、カスタムドメインでも HTTPS による接続が可能に
GitHub Pages、カスタムドメインでも HTTPS による接続が可能に 静的な Web サイトを簡単に公開可能な GitHub のサービス 「GitHub Pages」 で、カスタムドメインを使用している Web サイトにおいても、無料で HTTPS 接続が可能になりました。 静的な Web サイトを簡単に公開可能な GitHub のサービス 「GitHub Pages」 では、ユーザーが取得した独自ドメイン （カスタムドメイン） を使用することも可能ですが、今まで HTTPS による接続には対応していませんでした （厳密には、SSL 証明書の設定項目がなかったため、https:// でアクセスしても証明書エラーが帰ってきてしまっていました）。 今回、カスタムドメインを使用している Web サイトでも、Let's Encrypt を使用した HTTPS 接続が可能になりました （ち
Chrome における HTTPS 通信時の 「保護された通信」 表記廃止、非 SSL 接続時の警告表示の変更と適用開始時期が発表される
Chrome における HTTPS 通信時の 「保護された通信」 表記廃止、非 SSL 接続時の警告表示の変更と適用開始時期が発表される 2018年9月4日に正式リリース予定の Chrome 69 からは HTTPS 通信時の 「保護された接続」 という表記が廃止され、続く 10月16日正式リリース予定の Chorme 70 では、HTTP 通信でのフォーム入力に対してアドレスバーで警告が表示されるようになります。 タイトルの付け方が難しい...... さて、去年 2017年 10月 17日に正式版がリリースされた Chrome 62 以降では、SSL（TLS） で保護されていない Web ページで 「パスワード」 を入力しようとした際に 「安全ではないですよ」 と警告する機能が有効になっています。 Google は以前から、SSL で保護されていない接続 （HTTP 接続） に対しては全
Gmail アドレス内の 「.」（ピリオド） を無視する仕様がフィッシングに悪用可能だという指摘
Gmail アドレス内の 「.」（ピリオド） を無視する仕様がフィッシングに悪用可能だという指摘 Gmail がアカウント名に含まれる 「.」（ピリオド） を無視する仕様が、Gmail アドレスを登録する Web サービス側の特定の仕様と組み合わさることによってフィッシングのリスクを増加させるという指摘がされていましたので取り上げてみます。 以前、下記の参考記事でも書いたのですが、個人向けの Gmail には、所有しているアカウント名に 「+」 で任意の文字列をつなげることで利用できる 疑似エイリアス （便宜的にこう呼びます） 機能や、アカウント名に含まれる 「.」（ピリオド） を無視するという仕様を使って、同様に疑似エイリアス的な使い方ができる点に触れました （記事としては、それは本来のエイリアスとは異なるから注意しようという内容ですが）。 参考 Gmail のエイリアスは個人情報漏洩対
各ブラウザにおけるトラッキング拒否機能 （DNT） の有効化について
Facebook が各 Web サイトに設置された「いいね」ボタンなどを介して、ユーザーに無断でトラッキングを行っているというニュースに関連して、ブラウザ側でトラッキング拒否を要求する仕組み 「Do Not Track」 について、簡単なまとめ。 週末にニュースを流し読みしてましたら下記の記事が目に入りました。簡単に言えば、Facebook の 「いいね！」 ボタンなどを設置したサイトを閲覧すると、仮にそのボタン自体をクリックしたり、操作しなくても自動的に端末情報などが Facebook に送られ、Facebook 側で持っているユーザー情報と紐ひもづけされて広告などに反映されますよという話。 いいね！設置サイト、閲覧だけで個人情報送信 - 読売新聞 一応、Facebook 側でも広告関連の設定画面 （要ログイン） でオプトアウトできたりするのですが、普通の人にはわかりにくいですし、そもそ
リアルタイム画像処理機能が充実した CDN、「imgix」 を試してみたらとても簡単で便利だった件
画像処理に関する機能を豊富にそろえ、画像の配信に特化した CDN である 「imgix」 を導入してみたらとても便利だったので、導入の手順から実際の利用方法などについて簡単にまとめました。 リアルタイム画像処理機能が充実していて、画像ファイルの配信向けに特化した CDN （Content Delivery Network / コンテンツ・デリバリ・ネットワーク） として 「imgix」 というサービスがあります。存在自体は結構前から知っていたんですが、一度試してみようと思っていたものの長いこと手つかずでいました。 今回ちょっと時間ができたので、試しにこの Blog で導入してみてどんな感じか探ってみたんですが、導入も簡単で、かなり便利だったので導入方法を含めて紹介してみようと思います。 imgix - Real-time image processing and image CDN img
完全禁煙のカフェを現在地から簡単に調べるサイトを作った件
外出先で完全禁煙のカフェを探す手間を最小限にするため、ブラウザで開くだけで現在地から周辺にある禁煙のカフェやレストランの存在を簡単に調べられるサイトを作ったという話。 仕事でお客さんのところに往訪したりすると、たまに次の予定との間に中途半端に時間が空いてしまうこととかあります。そういう時ってちょっとカフェでも入って休憩しようかなってなるんですけども、 いちいち地図アプリ開いて「カフェ」とか検索するのダルい 検索して出てきたカフェが完全に禁煙のお店か調べるのが面倒くさい （私、タバコ吸わないので） という 2点が以前から気になっていまして。 それなら Web ページ開くだけで周辺にある完全禁煙のカフェを探せるサイトを自分用に作っておけばいいじゃんということで、週末にささっと作ってみたのですが、自分以外にも役に立つ人もいるかなということで公開してみます。 実際に作ったサイト ということで作った
Mastodon インスタンスを運用しているサーバを HTTP/2 対応させた話 （CentOS7 + nginx + OpenSSL）
Mastodon インスタンスを運用しているサーバを HTTP/2 対応させた話 （CentOS7 + nginx + OpenSSL） 自分専用に立てた Mastodon （マストドン） インスタンスで、HTTP/2 を有効にしたのでその手順をメモ。サーバ環境は CentOS7。nginx 1.13.0 と OpenSSL 1.0.2k を使用してソースからビルド。 Mastodon （マストドン） インスタンスを自分専用に立ててから、この記事を書いている時点で 15日ほど経ちました。個人専用 （お一人様） インスタンスの始め方について、詳しい話は下記のエントリーで書いています。 さくらの VPS + CentOS7 で 俺専用 Mastodon インスタンスを立ててみた話 Mastodon インスタンスの画像や動画の保存先をクラウドストレージ （Amazon S3） に移行した話 その
さくらの VPS + CentOS7 で 俺専用 Mastodon インスタンスを立ててみた話
Mastodon （マストドン） が先週の頭、4月10日くらいから日本でも急激に話題になって、@nullkal 氏が自腹で mstdn.jp インスタンスを立ててくれた辺りからはもう一部でお祭り騒ぎになっていました。 で、いい機会だし、ちょっとお勉強を兼ねて自分専用の Mastodon インスタンス （所謂、おひとり様インスタンスですね） を立ててみようと週末に思い立ち、土曜日の空いた時間でやってみたら 2～3時間で比較的簡単に立てられましたので、備忘録がてらエントリーにしてみようと思います。 tootsuite/mastodon: A GNU Social-compatible microblogging server mastodon.burnworks.com 使用した環境としては下記のような基本構成に、適時必要なものをいくつか入れた感じ。サーバは元々テストサーバとして使っていたやつ
Firefox Developer Edition のレスポンシブデザインモードに新機能、デバイスピクセル比 （DPR） のエミュレートが可能に
最近は各ブラウザの機能サポートについて細かく書いていなかったので久々に書きますが、Firefox Developer Edition のレスポンシブデザインモードに、「Network Throttling （ネットワーク環境のエミュレート） 機能」 と、「DPR （Device Pixel Ratio / デバイスピクセル比） のエミュレート機能」 が追加されました。 Firefox Nightly には先行して追加されていましたが、Firefox Developer Edition でも正式に利用可能になったことで、開発時の利便性が向上すると思われます。 大きな機能追加 （現行バージョンのレスポンシブデザインモードとの違い） としては下記の通り。 主要なデバイスの画面サイズが最初からプリセットされるように （プリセットが大幅に増えた） Network Throttling （ネットワーク
WordPress のユーザー名を隠してもセキュリティ対策に大きくは影響しない
WordPress のユーザー名が外部からわかってしまうのが問題だという指摘に関して、ユーザー名は秘匿できるならすればよいと思いますが、それ自体はセキュリティ対策として 「最重要」 ではありませんよと言うお話。 WordPress に登録されているユーザー名が外部からわかってしまうのは問題だという記事が話題になっていたようなので簡単にメモ。 もちろん、隠せるなら隠したらよいと思いますから、下記の記事の内容を否定するつもりはありませんが、ユーザー名が外部にバレるのは問題だという話については、それを言ったら世の中のほとんどのサービスが問題になっちゃうからさという話と、そんなことよりもやるべきことは沢山ありますよというセキュリティ対策の優先順位の話について。 実はWordpress利用ブログのほとんどがユーザー名もろバレな件 - 対処法 ： Tanweb.net ユーザー名はバレる前提が一般的
Let's Encrypt （無料 SSL サーバ証明書） の設定が超簡単になったと聞いて試してみた件
Webセキュリティの小部屋さんで下記の記事が公開されていて、無料の SSL （TSL） サーバ証明書を提供する認証局 「Let's Encrypt」 からの証明書取得がとっても簡単になったということなので、ちょっと試してみましたが、とっても簡単だったのでメモ。 無償SSL/TLS証明書の Let's Encrypt の設定が劇的に簡単になっていた ： Webセキュリティの小部屋 Certbot たった 2コマンドで SSL 証明書の取得が完了 Let's Encrypt は元々簡単な処理でドメイン認証 （Domain Validation / DV） 証明書を取得することができて、私もテストで何度か設定してみたりしていたのですが、ある程度触ったところで、簡単そうだし手が空いたら本番サーバでも設定して使ってみようかな～ なんて思っていたらそのまま手つかずという感じで時間が経っていました。 と
将来 Firefox から 404 Not Found が消える？ Test Pilot に 「No More 404s」 が追加
Mozilla は 「Test Pilot」 と呼ばれる、Firefox の実験段階にある機能を事前に試したり、機能に対するフィードバックを送ることができるプログラムを提供しています。 その 「Test Pilot」 に新たに 「No More 404s」 と呼ばれる機能が追加されました。これは、ユーザーが訪れようとした Web ページが、404 Not Found だった場合、「Internet Archive （インターネット・アーカイブ）」 から該当する Web ページの過去バージョンを探してきて表示する機能です。 「Test Pilot」 は Firefox のアドオン （拡張機能） として導入することができます。アドオンをインストール後、設定から個々の機能の 有効 / 無効 を選択することができる他、「Test Pilot」 自体が不要な場合は、アドオンを無効にすれば機能は停止し
AMP （Accelerated Mobile Pages） バリデータの Web 版が公開される
AMP HTML の文法が妥当かを検証するバリデータに Web 版が新たに追加されました。AMP の URL を入力、またはソースコードを貼り付けることで、その AMP が文法的に妥当かを簡単にチェックすることができます。 AMP （Accelerated Mobile Pages） の文法が妥当かを検証 （バリデーション） する機能としては、#development=1 を付与した上で開発者ツールによる検証を行う機能が当初から AMP フレームワークの標準機能として提供されていましたが （参考記事）、もっと簡単にバリデーションを行うため、Chorme 拡張が今月に入ってリリースされています。 A Chrome extension to help validate your AMP pages ： Accelerated Mobile Pages Project 今回は、この AMP バリ
jQuery 3.0 が正式リリース、通常の Web サイト制作で利用するなら軽量版 「Slim build （スリムビルド）」 が便利
jQuery 3.0 が正式リリース、通常の Web サイト制作で利用するなら軽量版 「Slim build （スリムビルド）」 が便利 jQuery 3.0 の正式版がリリースされました。次バージョンからはバージョン番号を統一して 3.0 にすると発表されてから 1年半後、やっとの正式リリース。Ajax モジュールなどを省いた軽量版 「スリムビルド」 も提供されています。 米国時間の 6月 9日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 の正式版がリリースされました。 jQuery 3.0 Final Released! ： Official jQuery Blog 2014年の 10月に jQuery 公式 Blog に投稿された記事 （参考エントリー） で、次期リリースから現状の jQuery 2.x 系の後継を 「jQuery 3.0」、1.x
CSS で計算（四則計算）が行える calc() 関数を使ってみよう
CSS プロパティに指定する値を計算式で書くことができる仕様、calc() 関数について、具体的なサンプルソースをそえて解説してみたいと思います。 CSS の calc() 関数は、CSS プロパティに指定する値を計算式で書くことができる仕様です。 ちょっと前に Firefox 48 が、この calc() 関数の入れ子表記に対応した件で下記のような記事を書いたのですが、その時参考にリンクを張ろうとした、過去に calc() 関数についての解説を書いた記事がもう6年も前の記事で、さすがに古すぎるということでリンクを張れなかったんですが、いい機会なのでちょっと書き直してみます。 Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に なお、上記記事でも書いたとおり、calc() 関数は現時点で IE （IE11）や Edge を始め
Web コンテンツアクセシビリティの JIS 規格が改訂、JIS X 8341-3:2016 として公示される
Web コンテンツのアクセシビリティに関する JIS 規格、「JIS X 8341-3 （高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ）」 が改訂され、「JIS X 8341-3:2016」 として公示されました。 経済産業省サイトでも 3 月公示の JIS 規格として案内されています。改正の案内については同ページに掲載されている PDF 資料でも確認できます。 日本工業規格（JIS規格）を制定・改正しました（平成28年3月分） ： 経済産業省 ウェブコンテンツの JIS 改正 （PDF形式 / 518KB） 実際の JIS 規格をとりあえず閲覧したいという場合は、下記の日本工業標準調査会サイトで PDF による閲覧ができます。 JIS X 8341-3 ： 日本工業標準調査会 JIS 規格の購入は日本規格協会サイトから。直でリンク
pa11y のレポートを日本語で表示したかったので HTML_CodeSniffer の日本語版作った
pa11y っていうオープンソースのアクセシビリティチェックツールがあります。 これのコマンドラインツールはコマンドラインから簡単にアクセシビリティレポート （もちろん機械的なチェックなのであくまで参考レポートなんですが） を簡単に出力できるってことで、ちょっと仕事の関係で使ってみようと思いましてちょっと前に色々と試していました。 で、結構使えそうだということで本格的に使い始めたんですが、そうなるとやっぱりレポートは日本語で出力されないとってことになります。pa11y はアクセシビリティチェックやレポート出力に HTMLCodeSniffer っていう Squiz 社 （Squiz Pty Ltd） が開発しているアクセシビリティチェック用の JavaScript を使用しているため、これを翻訳した、HTMLCodeSniffer-ja を作成し、公開しました。 HTML_CodeSnif
amp-analytics コンポーネントを使用した AMP HTML への Google Analytics 導入方法
amp-analytics コンポーネントを使用した AMP （Accelerated Mobile Pages） 用 Google Analytics トラッキングコードの設定方法について、サンプルコードと共に簡単にまとめました。 AMP （Accelerated Mobile Pages） のアクセス解析に関しては、コアコンポーネントとして用意されている amp-pixel を使用したトラッキングコードの挿入方法があって、以前、AMP HTML の出力方法についてまとめた記事を書いた際にも触れました （下記参照）。 AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話 -> 広告表示やアクセス解析セクション で、もう一方で拡張コンポーネントとして amp-analytics も用意されていて、そちらを利用する方法もあるので
Pushnate を使用して Web サイトにプッシュ通知 （Web Push notifications） を楽々導入する
Pushnate を使用して Web サイトにプッシュ通知 （Web Push notifications） を楽々導入する Web プッシュ通知に関する基本的な知識と、Web プッシュ通知配信サービス、Pushnate を使用して Web サイトにプッシュ通知を導入する手順についてまとめています。 Push API （Service Worker） を利用したプッシュ通知は、まだ正式版としてリリースされている対応ブラウザが Google Chrome （v.42 以降 / PC or Android） しかないため、現状では一般的ではありませんが、予定では本日正式版がリリースの Firefox 44 も Service Worker に対応したため、少しずつですが利用機会が増えそうな感じになってきました ※。 で、試しにこの Blog でもプッシュ通知を導入して、どんな感じになるのか実験
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
