Mastodon （マストドン） が先週の頭、4月10日くらいから日本でも急激に話題になって、@nullkal 氏が自腹で mstdn.jp インスタンスを立ててくれた辺りからはもう一部でお祭り騒ぎになっていました。 で、いい機会だし、ちょっとお勉強を兼ねて自分専用の Mastodon インスタンス （所謂、おひとり様インスタンスですね） を立ててみようと週末に思い立ち、土曜日の空いた時間でやってみたら 2～3時間で比較的簡単に立てられましたので、備忘録がてらエントリーにしてみようと思います。 tootsuite/mastodon: A GNU Social-compatible microblogging server mastodon.burnworks.com 使用した環境としては下記のような基本構成に、適時必要なものをいくつか入れた感じ。サーバは元々テストサーバとして使っていたやつ

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

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 でもプッシュ通知を導入して、どんな感じになるのか実験

スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの

Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた Google がモバイル検索の順位決定時に 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表したことに関連して、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断しているのか、という点について調べてみました。 先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 （米国時間） から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。 Finding more mobile-friendly search results ： Official Google Webmaster

Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL

Google Analytics の習熟度を認定する資格として Google が公式に提供している 「Google アナリティクス個人認定資格 （Google Analytics Indivisual Qualification / GAIQ）」 は元々、英語での受験が必要で、さらに受験にも費用がかかっていたのですが、つい最近これが日本語化され、さらに受験も無料になった案内が来ていた （来ていたというか、Google Analysis にログインすると通知が出てた） ので、年末年始のお休みでちょっと時間ができたついでに受験してみました。 結果は無事合格できたのですが （下記が認定書）、せっかくですので受験の仕方などについて簡単にまとめておきたいと思います。 Google パートナーへの登録 まず、Google アナリティクス個人認定資格を受験するには、Google パートナーへの登録が必要

人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の

jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ

CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様 「CSS Variables」 について、最新仕様に基づいた解説します。 CSS Variables とは、CSS でカスタムプロパティを定義し、変数として使用できるようにするための新しい CSS 仕様です。定義した変数は他のスタイル宣言内で参照することができることで、より効率的な CSS の記述が可能になります。 以前、この Blog でも書きましたが、CSS Variables は Firefox 29 が実装し、機能としては使用できるようになっていましたが、正式リリース版ではデフォルトでは無効だったのと、カスタムプロパティの接頭辞が var- という古い仕様での実装でした。 近日正式版がリリースされる予定の Firefox 31 で最新の仕様 （接頭辞が -- に変更） を基に実装、デフォ

フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて

Pure は Yahoo! が公開した CSS フレームワークですが、試しに使ってみましょうということで、自分で書くスタイルは極力少なくして、簡単に Blog のテンプレートっぽいものを作ってみました。 さすがに 5分はウソです すいません。でも簡単でしたよ。 Pure ： A set of small, responsive CSS modules that you can use in every web project. Pure とは Pure は、簡単に言ってしまえば Twitter が公開している Bootstrap などと同じ、CSS のフレームワークですが、CSS のみに絞ることで、その容量は最大で 5.7KB とかなり軽量。Yahoo! の CDN から読み込めば、gzip された状態で読み込めます。 また、各機能を個別に読み込むことも可能ですので、必要な機能だけを選択す

jQuery 1.10.0、および 2.0.1 が同時にリリースされました。2バージョン同時リリースとしては最初のバージョンになります。 先週ですが、 jQuery 1.10.0、および 2.0.1 が同時にリリースされました。jQuery 1.x 系と、2.x 系は、お互いに機能的には完全に互換性を保ちつつも、2.x 系は IE8 以前のサポートは捨てて、より高速に、安定して動作させることを目指したバージョンとして、一方の 1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョンとなります。 jQuery 1.10.0 and 2.0.1 Released ： Official jQuery Blog この 2バージョンを並行して開発していく形は、jQuery 2.0 が正式リリースされた際に、今後はこういう形でいくよと予告されていたものですが、今回がその最初のリリースと

ちょっと前に 「hgroup 要素が HTML5 の勧告候補 （Candidate Recommendation） から削除されるようです」 って記事を書きましたが、実際に削除されたみたいですね （Editor's Draft では）。 ついでに、すでに HTML 5.1 Nightly にはすでに追加されていた、main 要素が、HTML5 勧告候補の方にも追加されたようです。 HTML5 W3C Candidate Recommendation 17 December 2012 hgroup 要素が HTML5 勧告候補から削除される main 要素とは？ main 要素は元々、Steve Faulkner 氏 （Web アクセシビリティ関連の方） が HTML5 の拡張仕様として提案し、HTML 5.1 に正式に取り入れられた要素で、その名の通り、文書内の、「主要な部分」 をマークア

1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から

スラッシュドットで 「Microsoft、「WebKitはWeb標準を破壊している」と主張」 なんてストーリーが上がってて、なんぞやと思って大本の記事を見に行ったんですけど、そしたらそれが 「Webkit しか対象にしてない Web サイトを IE10 でもきちんと動作させるためにやっといた方がいいことガイド」 っていうお役立ちコンテンツだったってことで、がんばって最後まで読んだ手前、ついでなので翻訳して掲載してみようかなと思います。 Microsoft、「WebKitはWeb標準を破壊している」と主張 ： スラッシュドット・ジャパン ちなみに翻訳元の記事は 「Windows Phone Developer Blog」 で書かれた内容なので、「Windows Phone 8 で動作する IE10」 っていう書き方になっている部分や、すべて Webkit と対比して書かれているなど、モバイル

HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり

ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか