Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境
Web サイト作るお仕事をしている人向け gulp で作るフロントエンド開発環境 フロントエンドの開発を色々と捗らせてくれる gulp について、ここ最近、私が利用しているパッケージの紹介を中心に、主に Web サイトを制作するお仕事をしている方に向けた、なるべくわかりやすい解説としてまとめてみました。 gulp v4 が正式リリースされたため、本記事で紹介していた gulpfile.js ファイルの記述方法を v4 にあわせて修正しました。詳しくは 「gulp 4.0 が正式リリース、v3 からの移行に伴う gulpfile.js ファイルの修正点」 をご覧ください。 もう 4年くらい前になりますが Web デザイナーさん向けみたいな感じで、所謂 「黒い画面」 にあまり普段から慣れていない方向けの Grunt 導入記事を書いたんですけども、内容的にはもう古いし、Grunt いいよって紹介
normalize.css 6.0.0 がリリース、作者の意見的意味合いが強かったスタイル定義を削除
normalize.css 6.0.0 のリリースで、それまで入っていた、純粋なブラウザ間の差異を吸収する目的からは少し外れた "opinionated" なスタイル定義がすべて削除されました。 所謂、リセット CSS （Reset CSS） の一種である 「normalize.css」 は、Web 制作界隈の方々にとっては馴染みのあるスタイル定義集で、お世話になっている方も多いのではないでしょうか。 先日、この 「normalize.css」 の最新版として、「6.0.0」 がリリースされましたが、作者である Jonathan Neal 氏の意見的意味合いが強かったスタイル定義がすべて削除されるなど、比較的大きな修正が入っています。 Normalize.css : Make browsers render all elements more consistently. necolas/n
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 バリ
5分でわかる Blog を Facebook インスタント記事 （Instant Articles） に対応させる方法
運営中の Blog などから Facebook インスタント記事 （Instant Articles） 向けの RSS フィードを配信してインスタント記事に対応させる手順を解説しています。 Facebook インスタント記事 （Instant Articles） は、インターネットメディアなどが、Facebook 内で自分たちの記事を配信することができる仕組み。ユーザーは Facebook アプリ内で記事を受け取り、閲覧してそれをシェアしたりすることができます。 簡単に言ってしまえば、Facebook アプリ自体がニュースリーダーになるような感覚で、ユーザーは Facebook の外に出ることなく、記事を読むことができるのと、記事自体も専用フォーマットによって読み込み速度が速く、快適な閲覧ができるというのが売りになっています。 元々は一部の限られた大手メディア （例として The New
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL
jQuery は次期リリースから 1.x 系、2.x 系共にメジャーバージョン番号を jQuery 3.x で統一へ
jQuery 公式 Blog は、10月 29日付けで投稿された記事「jQuery 3.0: The Next Generations」 で、次期リリースから現状の jQuery 2.x 系の後継を 「jQuery 3.0」、1.x 系の後継を 「jQuery Compat 3.0」 と名称変更し、今までメジャーバージョン番号が異なっていた 2つの jQuery を、jQuery 3.x に統一すると発表しました。 jQuery 3.0: The Next Generations ： Official jQuery Blog 該当の Blog 記事が公開されたときに Twitter でもつぶやいたんですが、簡単に言えば下記のようなメジャーバージョン番号の統一と、名称変更が、次のリリースから行われます。 2.x系 → jQuery 3.0、1.x系 → jQuery Compat 3.0 に
jQuery 3.0 および jQuery Compat 3.0 のアルファ版が公開される
jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。主に .show()、.hide() メソッドに対して行われた仕様変更について触れてみたいと思います。 米国時間の 13日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。 現行版の jQuery 2.x 系の後継が 「jQuery 3.0」、1.x 系の後継が 「jQuery Compat 3.0」 と名称変更されてのリリースになります。大きいところだと .show()、.hide() メソッドの仕様が変わったみたい。 jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released ： Official jQuery Blog jQ
SVG のフォールバックは結局 Modernizr に落ち着いた件
タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替えるっていう手で落ち着きましたというお話。 SVG を使うにあたって、どの程度古いブラウザまで対応するかっていうのはありますが、今回対象にしている SVG は、ページ内で通常の画像 （普通の JPEG とか PNG） と同じように使われるものを想定していますので、いくら古いブラウザはサポート対象外とは言っても、文書内で大切な意味を持つ画像が表示されないのはまずいだろと。 あわせて対象となる SVG 内
ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの
Microsoft の新ブラウザ （Project Spartan） 開発に Adobe の Web Platform チームが参加
IE Blog で公開された記事によると、現在 Technical Preview が公開中で、今年の夏頃にはリリースされると言われている次期 Windows 「Windows 10 （コードネーム ： Threshold）」 に搭載される新ブラウザ 「Project Spartan」 の開発で、Microsoft と Adobe が提携したとのこと。 個人的には結構気になる （ポジティブな意味で） 発表でしたので、ちょこっと触れてみたいと思います。 Partnering with Adobe on new contributions to our web platform ： IEBlog マイクロソフト、新ブラウザ「Spartan」はアドビと共同開発 ： ASCII.jp まず、Project Spartan については同じ IE Blog の下記の記事が詳しいですし、日本語での情報と
ブラウザから 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
Chrome Canary に HTTP 接続を 「安全でない」 と表示するフラグが追加される
Google の Chromium Security チームが、Chromium Projects サイト内で公開した文書、「Marking HTTP As Non-Secure」 内で、ユーザーエージェントは、HTTP 接続に対して 「安全でない」 と明確に表示することを提案した件、以前この Blog でも書きました。 その件が、実際に Google Chrome の Canary ビルド （42.0.2292.0） で実装されたそうです。Google の Ilya Grigorik 氏が Google+ に投稿しています。 New favorite Chrome Canary flag: chrome://flags/#mark-non-secure-as ... non-secure! The way it should have been from the start. Goo
Windows 7 のメインストリームサポートが終了、延長サポート期間へ
※3 実際には各エディションごとにプロダクトサポートライフサイクルは決まっていますので詳しくは Windows 8 に関するページ を確認のこと。 昔から Windows は奇数バージョンが当たりみたいに言われますが （私は全バージョン使ってきていますけどあんまり気にしない方...）、Windows 8.1 のプロダクトサポートライフサイクルを考えると、今後、Windows 7 から乗り換えるなら、次にリリースされる Windows 10 （実際には Windows 9 なので奇数バージョン） を待つのがいいんでしょうね。 Windows 7 のシェアは約 56% NetMarketShare で最新 （2014年 12月） の OS シェアを見てみると、Windows 7 が全体の約 56% を締めて 1位なんですね。次がサポートが切れたはずの Windows XP で約 18%。Win
Google アナリティクス個人認定資格 （GAIQ） が日本語化されていたので受験してみた
Google Analytics の習熟度を認定する資格として Google が公式に提供している 「Google アナリティクス個人認定資格 （Google Analytics Indivisual Qualification / GAIQ）」 は元々、英語での受験が必要で、さらに受験にも費用がかかっていたのですが、つい最近これが日本語化され、さらに受験も無料になった案内が来ていた （来ていたというか、Google Analysis にログインすると通知が出てた） ので、年末年始のお休みでちょっと時間ができたついでに受験してみました。 結果は無事合格できたのですが （下記が認定書）、せっかくですので受験の仕方などについて簡単にまとめておきたいと思います。 Google パートナーへの登録 まず、Google アナリティクス個人認定資格を受験するには、Google パートナーへの登録が必要
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 デスクリプタの使い方 こういう指定が妥当というか実用的かは別として、
bit.ly が Google セーフブラウジングで不正なサイトとしてブロックされてる件
さっき気がついたんですけども、短縮 URL サービス bitly が提供しているドメイン 「bit.ly」 が Google セーフブラウジングでブロックされてしまっているようで、短縮 URL を使用して投稿したツイートなどのリンクが Firefox や Chrome で開けなくなってました （2014年10月25日 16:30 現在）。 追記あり。復旧したようです。現在では通常通りアクセスできます。 biy.ly から始まる短縮 URL に Firefox でアクセスすると下記のような警告。 Chrome の場合は下記。 ということで、biy.ly に関する Google セーフブラウジングのレポートを見てみると、不正なサイトと認識されてしまっているのがわかります。 実際のレポートは下記で見られます。 Google セーフ ブラウジング診断ページ : bit.ly bit.ly 使えない
ビル・ゲイツ氏が 「マイクロソフトは破綻まで18ヶ月」 と発言したとか言われている件について
ビル・ゲイツ氏が 「マイクロソフトは破綻まで 18ヶ月」 と発言したという内容の記事が話題になっていたのですが、その内容がちょっと引っかかるというか、気になったので調べてみました。 つい先日ですが、ビル・ゲイツ氏が 「マイクロソフトは破綻まで 18ヶ月」 と発言したという内容の記事が話題になっていて、その記事では、あたかもビル・ゲイツ氏が最近のマイクロソフトについて危機的な状況だと認識していると思われるような書き方がされてたんですが、ソースについての記述が該当記事内にはなく、またビル・ゲイツ氏ほどの大物が発言した割には他のニュースサイト等で全く取り上げられていなかったので、気になって調べてみました。 ビル・ゲイツ氏が「マイクロソフトは破綻まで18ヶ月」と発言 マイクロソフトの危機とは ： ライブドアニュース 写真は Wikimedia Commons より 結論というか、私が調べられる範囲
HTML5 が勧告案 （Proposed Recommendation） に。DataCue / Drag and drop は仕様から削除
HTML5 が勧告案 （Proposed Recommendation） に。DataCue / Drag and drop は仕様から削除 HTML5 仕様が、2014年 9月 16日をもって勧告案 （Proposed Recommendation） として公開されました。At risk 扱いだった、「DataCue」 および 「Drag and drop」 は削除。「input type="time"」、「ruby 関連要素 （新仕様）」 は仕様に残されました。 2014年 6月 17日付けで一旦、最終草案 （Last Call Working Draft） に差し戻されていた HTML5 仕様ですが、2014年 9月 16日をもって勧告案 （Proposed Recommendation） として公開されました。 At risk 扱いだった、「DataCue」、「input type
HTML5 Image Description Extension （longdesc 属性） が W3C 勧告候補に
画像に対する長文の説明へのリンクを提供する属性、longdesc 属性に関する HTML5 拡張仕様、「HTML5 Image Description Extension」 が、勧告候補として公開されました。 HTML5 拡張仕様として策定が進んでいる、「HTML5 Image Description Extension」 が、勧告候補 （Candidate Recommendation / CR） として公開されました。 HTML5 Image Description Extension は、画像に対する、（alt 属性だけでは難しいレベルの） 長文の説明へのリンクを提供する属性、longdesc 属性の仕様を策定するものです。longdesc 属性自体は HTML 4.01 の時代から存在していたものの、HTML5 の仕様には含まれなかったのですが、アクセシビリティ上の理由から必要性が
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
