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

2018/03/26 41 users フロントエンド開発環境 web

もう 4年くらい前になりますが Web デザイナーさん向けみたいな感じで、所謂 「黒い画面」 にあまり普段から慣れていない方向けの Grunt 導入記事を書いた んですけども、内容的にはもう古いし、Grunt いいよって紹介しておいてなんですが、私自身、記事を書いてから少し経ったところで Gulp に開発環境を移行してしまったため、放置した感じになってしまいました。 そこで、今さら感はありますが、... 続きを読む

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

2018/03/01 30 users CDN imgix コンテンツ・デリバリ ネットワーク 時間

リアルタイム画像処理機能が充実していて、画像ファイルの配信向けに特化した CDN （Content Delivery Network / コンテンツ・デリバリ・ネットワーク） として 「imgix」 というサービスがあります。存在自体は結構前から知っていたんですが、一度試してみようと思っていたものの長いこと手つかずでいました。 今回ちょっと時間ができたので、試しにこの Blog で導入してみてどん... 続きを読む

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

2017/04/17 122 users VPS マストドン nullkal Mastodon 自腹

Mastodon （マストドン） が先週の頭、4月10日くらいから日本でも急激に話題になって、 @nullkal 氏が自腹で mstdn.jp インスタンスを立ててくれた辺りからはもう一部でお祭り騒ぎになっていました。 で、いい機会だし、ちょっとお勉強を兼ねて自分専用の Mastodon インスタンスを立ててみようと週末に思い立ち、土曜日の空いた時間でやってみたら 2～3時間で比較的簡単に立てられ... 続きを読む

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

2017/03/26 72 users シマンテック verisign blink Symantec

週末に某 2ch まとめサイトで取り上げられて話題になっていましたが、Google Chrome において、シマンテック - Symantec （旧ベリサイン - Verisign） 発行の SSL 証明書がブロックされるかもという話。 まとめサイトで書かれていたような 「問答無用でブロック」 というのは煽りタイトルなのであまり真に受けるのはやめた方がよいとして、Blink 開発プロジェクトの G... 続きを読む

Pushnate を使用して Web サイトにプッシュ通知 （Web Push notifications） を楽々導入する | WWW WATCH

2016/01/26 54 users Service Worker リリース 現状 正式版 ブラウザ

Push API （Service Worker） を利用したプッシュ通知は、まだ正式版としてリリースされている対応ブラウザが Google Chrome （v.42 以降 / PC or Android） しかないため、現状では一般的ではありませんが、予定では本日正式版がリリースの Firefox 44 も Service Worker に対応したため、少しずつですが利用機会が増えそうな感じにな... 続きを読む

1990 年代後半から CSS を触っている私が当時の記憶を振り返る、CSS 昔話 | WWW WATCH

2015/12/10 36 users 辿りつつ 昔話 パク Advent Calendar CSS

この記事は CSS 昔話 Advent Calendar 2015、10日目の記事です。 面白そうなんで参加してみましたが、CSS ハックとかバグの話は他の方々が、色々面白い記事を書いてくださると思いますので、ここは少し外して、とりとめもない感じになってしまうのは覚悟の上で、空気を読まずに本気で昔の話をしてみようと思います。 私が CSS を触り始めた頃の記憶を辿りつつ。そう、あれはもう 20 年... 続きを読む

jQuery 3.0 および jQuery Compat 3.0 のアルファ版が公開される | WWW WATCH

2015/07/15 33 users アルファ版 jQuery Compat 3.0 hide

米国時間の 13日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。 現行版の jQuery 2.x 系の後継が 「jQuery 3.0」、1.x 系の後継が 「jQuery Compat 3.0」 と名称変更されてのリリースになります。大きいところだと .show()、.hide() メ... 続きを読む

5分でわかる正しい Web サイト常時 SSL 化のための基礎知識 | WWW WATCH

2015/06/18 979 users SSL 基礎知識 サイト常時 https 正しい Web

5分でわかる正しい Web サイト常時 SSL 化のための基礎知識Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの S... 続きを読む

当 Blog を SSL 対応させたので手順や修正が必要になった点などをまとめ | WWW WATCH

2015/06/18 79 users SSL 手順 修正 ドメ まとめ

なぜか先週末の夜中に急に思い立って、この Blog のドメイン用に SSL 証明書を購入し、急遽 SSL 対応 （HTTPS でアクセスできるように） してみたわけですが、その手順やら、SSL 化したことでちょっと手直ししないといけなくなって大変だった点などをまとめて見ようと思います。 ちなみに、まだリダイレクトや HSTS （HTTP Strict Transport Security） はドメ... 続きを読む

ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験 | WWW WATCH

2015/05/15 261 users 一瞬 実験 瞬時 ページ内リンク 親切心

タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript... 続きを読む

Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた | WWW WATCH

2015/03/02 333 users モバイルフレンドリー Official シグナル web

先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 （米国時間） から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。 Finding more mobile-friendly search results ： Official... 続きを読む

SVG のフォールバックは結局 Modernizr に落ち着いた件 | WWW WATCH

2015/02/26 51 users フォールバック jQuery Modernizr SVG 環境

タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替える... 続きを読む

常時 SSL 化による Web サイト表示速度向上の可能性について | WWW WATCH

2015/01/28 41 users 常時 SSL 最低限 web メリット

先週、Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめる記事を書きました。内容とは別に 「5分とはいったい......」 と 5分間という時間に対する禅問答的提起をした形にも、一部ではなりましたが （大げさ）。 5分でわかる正しい Web サイト常時 SSL 化のための基礎知識 さて、この中で、常時 SSL 化のメリット... 続きを読む

5分でわかる正しい Web サイト常時 SSL 化のための基礎知識 | WWW WATCH

2015/01/22 717 users SSL 基礎知識 サイト常時 https 正しい Web

HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にクライアントから相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみ... 続きを読む

パスワードを使い回されても大丈夫なパスワード登録フォームを考えてみる | WWW WATCH

2014/12/22 45 users 世間 流出 アドバイス 不正アクセス 使い回し

まじめに、じゃなくてこういうのってどうなんだろねっていうレベルの話。 今年は特にパスワード情報の流出と、それを使ったリスト型攻撃による不正アクセスや個人情報の流出といった話題が数多く世間を騒がせましたが、ここで問題になるのが、多くの人がやってしまいがちな、「パスワードの使い回し」。 パスワードの使い回しは危ないよっていうお話 Google、5分でできる強固なパスワード設定方法をアドバイス 確かに、... 続きを読む

TinyPNG が JPEG ファイルの最適化にも対応、TinyJPG もローンチ | WWW WATCH

2014/11/25 24 users TinyPNG ローンチ PNG JPEG 圧縮

PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツール 「TinyPNG」 が JPEG ファイルの最適化にも対応しました。 これにあわせて、「TinyJPG」 も立ち上がりましたが、TinyPNG も TinyJPG も、どちらも PNG / JPEG ファイルの最適化を同時に行えるようになっていますので、サイト名が異なるだけで機能的には同じです。 上が元々ある TinyPNG で... 続きを読む

Firefox 36 が unicode-range デスクリプタをサポート、文字コード範囲を指定してフォントを適用可能に | WWW WATCH

2014/11/17 32 users font-face フォント 特定 適応範囲 テキスト

現在、Firefox Nightly としてリリースされている、Firefox 36 で、unicode-range デスクリプタがサポートされました。unicode-range は @font-face デスクリプタで、読み込んだフォントの適応範囲を指定します。 例えば、ある要素内のテキストのうち、特定の文字のみ、あるいは特定の文字コード範囲に含まれる文字のみを、別のフォントで置き換えたい場合な... 続きを読む

GIF に変わると噂の XNG という新しいアニメーション画像フォーマットを調べてみた | WWW WATCH

2014/10/27 33 users GNOME 興味本位 GIGAZINE マジレス gif

ネタにマジレスな感じもしないでもないですが、GNOME （X Window System 上で動作するデスクトップ環境） の開発者である Jasper St. Pierre 氏が、GIF に変わるという新しいアニメーションフォーマットを開発したとのことで話題になっていました。 彼自身の Blog でも書いているほか、日本語では GIGAZINE さんが取り上げていましたが、興味本位からちょっと中身... 続きを読む

bit.ly が Google セーフブラウジングで不正なサイトとしてブロックされてる件 | WWW WATCH

2014/10/25 27 users セーフブラウジング bit.ly Chr Google 警告

さっき気がついたんですけども、短縮 URL サービス bitly が提供しているドメイン 「bit.ly」 が Google セーフブラウジングでブロックされてしまっているよいで、短縮 URL を使用して投稿したツイートなどのリンクが Firefox や Chrome で開けなくなってました。 biy.ly/hoge っていう URL に Firefox でアクセスすると下記のような警告。 Chr... 続きを読む

Web サイトのパフォーマンスレポートを自動で作成してくれる Google Pagespeed Insights for WordPress | WWW WATCH

2014/10/16 30 users PageSpeed Insights web プラグイン

PageSpeed Insights を使用した Web ページのパフォーマンスレポートを WordPress の管理画面上で作成して見ることができるプラグイン、「Google Pagespeed Insights for WordPress」 を使ってみたので紹介。 Google Pagespeed Insights for WordPress ： WordPress Plugins プラグイン... 続きを読む

Google 検索結果内の検索ボックスを有効にするための Microdata マークアップ | WWW WATCH

2014/09/09 42 users Google Site 検索ボックス 検索結果内 ほか

Google ウェブマスター向け公式ブログで、Google の検索結果内に表示される検索ボックス （Sitelinks search box） について刷新され、見せ方が変わったほか、この 「Sitelinks search box」 を表示するために必要なマークアップについて紹介されていました。 検索結果内の検索ボックスが新しくなりました ： Google ウェブマスター向け公式ブログ Site... 続きを読む

Twitpic がサービス終了とのことなのでアップロードした画像をすべて救出してみた | WWW WATCH

2014/09/05 16 users Twitter Twitpic 自前 添付 Twitter 社

Twitter が自前で画像のアップロード機能を持つ前から、ツイートに画像を投稿 （添付） するサービスとして長く運営されてきた Twitpic が Twitter 社との商標問題でサービスを終了すると急遽発表して話題になっています。 その辺の詳しい話は下記の公式 Blog やニュース記事を見てもらえればよいと思いますが、私も Twitter が正式に画像のアップロードに対応した後は使っていなかっ... 続きを読む

Twitter 「ダッシュボード」 が全ユーザーに開放、ツイートの解析が可能に | WWW WATCH

2014/08/28 12 users Twitter ダッシュボード 解析 開放 認証アカウント

Twitter には以前から、自分が投稿したツイートへの反応や閲覧数などを見ることができる 「ダッシュボード （Twitter アナリティクス / Tweet Activity Analytics）」 というのが提供されていましたが、これまでは認証アカウントや Twitter で広告を出しているアカウント向けにのみ正式には提供されている状態でした。 先ほど、Twitter の公式 Blog で、こ... 続きを読む

Microsoft が IE のサポート ライフサイクル変更を発表、IE8 は 2016年1月にサポート終了 | WWW WATCH

2014/08/08 23 users Microsoft IEBlog テクニカルサポート IE8

IEBlog にて、Internet Explorer のサポート ライフサイクル変更に関するアナウンスがありました。マイナビニュースなどでも取り上げられています。 新しいサポート ライフサイクルが適用されることで、2016年の 1月 12日の時点でサポート対象となっている各 OS 上で利用できる最新の IE のみがセキュリティ更新プログラムの適用とテクニカルサポートの提供を受けることができるよう... 続きを読む

position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH

2014/08/06 433 users CSS バシャログ いまどき block要素 上下左右中央

人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例え... 続きを読む