はてなブックマーク

今年11月に新しいFirefoxがリリースされましたね。多くの処理がパラレルで動作するようになりマルチコア環境での動作が高速化しました。 この新しいFirefoxで改善された点にCSS描画速度の高速化も含まれていたので、ページ表示速度を速くするためのCSSの記述方法をまとめてみました。 シンプルに適用できるCSSにする（と速くなるはず） 要素への適用ルールをシンプルにできるCSSにすると描画速度が改善されるはず、です。後述しますが、この適用ルールには疑似要素(:beforeや:afterなど)も含まれます。 新しいFirefoxに搭載されているレンダリングエンジンの一部、Quantum CSS (Stylo) は以下3つの要素を組み合わせて実装されています。 ServoのParallelism（並行処理） FirefoxのRule Tree ChromeとSafariから取り入れた Sty

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近SEOが複雑化してきていますよね。AMP対応までSEOのために必須になってしまって、普通のウェブサイトを作るだけでも一苦労です。 この記事ではRailsで構築したウェブサイトをSEOをする上で使うと便利なgemを紹介します。 metaタグの出力には meta-tags railsでSEOを行う上で鉄板のgemです。headタグ内のmetaタグ出力を大幅に簡略化してくれます。 ソーシャル流入対策で必要な ogp / twitterカードもこのgemで対応します。 サイトマップ生成には sitemap_generator sitemap

本当にかんたんにlibsassを説明 libsassはsassをC/C++で実装したライブラリです。オリジナルのsassはrubyで実装されています。libsassを使うメリットは主に以下の2点です。 sassに比べて高速かつ省メモリで動作する。 特定の言語・実行環境に依存しない。 そしてlibsassはあくまでライブラリです。Node、Ruby、Go、Python等の言語から利用するにはlibsassが提供しているAPI（C言語）とのバイディングが必要です。 sass(Ruby)とlibsassの互換性について libsassはsassの仕様に準拠しています。scssファイルをcssファイルへコンパイルするのに、ほとんどの場合でlibsass/sassのどちらを使っても問題なくコンパイルが出来ると思います。 ただし全くの同一ではなくサポートしている機能に若干の違いがあります。利用している

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

d3.format("01d")(1); // 1 d3.format("02d")(1); // 01 d3.format("03d")(1); // 001 d3.format(".0d")(100); // 100 d3.format(".1d")(100); // 100 d3.format(".2d")(100); // 100 d3.format(".0f")(100); // 100 d3.format(".1f")(100); // 100.0 d3.format(".2f")(100); // 100.00 d3.format(".0%")(1); // 100% d3.format(".1%")(1); // 100.0% d3.format(".2%")(1); // 100.00% dを指定すると小数点の値が表示されないのでその場合はfを使います。 .0、.1と小数

ワンメトリクス（たった一つの指標） 2014年にSEOで有名なmozブログにワンメトリクス（たった一つの指標）についての記事があります。 該当記事URL: https://moz.com/blog/one-metric もう2015年末ですが、この記事が公開された時にjavascriptでさっと実装したのでその紹介です。詳細については2015年にウェブ担で翻訳された記事を見る方が分かり易いです。 jsfiddleでのデモ このワンメトリクス算出の試せるデモをjsfiddleに設置しました。scoresの所をPVやセッションに読み替えると「なるほど」とイメージできるかと思います。 ワンメトリクスを求めるScoring#scoreの使い方 使い方は単純で値の入った配列をクラス生成時に渡すだけです。後はScoring#score(value)でワンメトリクスが帰ってきます。 var scores

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

anemoneが人気だけど物足りない Rubyでクローラーと言えばanemoneですよね。ですがanemoneは2012年で更新がほぼ停止しています。 また大きめのサイトをクロールするとページ数が数万を超えて来ますし、プラスアルファで属性情報を収集する必要が出てくるので素のanemoneだと対応が難しくなります。 仕事で技術方向に特化したSEOをしている事もあってanemoneをクローラーとして使うのには物足りませんでした。具体的に物足りなかった機能を列挙します。 Charsetのサポート、自動判定 中断再開機能 一時停止後のオプション変更 複数サイトに対する平行稼働 許可するサブドメインの指定 除外するサブドメインの指定 UserAgentの切り替え（GoogleBotに成りすますなど） 除外するパラメータやパスの指定 多段リダイレクトの追跡 クロールするページ上限数の指定や切り替え 日

英文高速リーディングでさだまさしの名曲を再生する 記事を読む前に動作するサンプルを準備したので以下URLで挙動をご確認下さい。曲は関白宣言 / 案山子 / 防人の詩 / 秋桜 の4つを準備しました。 この記事はサンプルの実装方法と背景についての説明です。 クリスマス後が本番。1/1は毎年恒例「今夜も生でさだまさし」 今年も残り少なくなってきました。こうやって毎日カウントダウンされてるとクリスマスまで楽しみになります。 そしてクリスマスが過ぎるとファンにとってのメインイベント、毎年恒例「今夜も生でさだまさし」の生放送があります。来年2016年の放送は1月1日0:25～ですので除夜の鐘を聴いて年越しした後はそのままTVの前にかぶりつきましょう。 英文高速リーディングのSpritzと歌詞のインプリンティング 定期的に話題に上がるSpritzは英文を高速に読むために単語を整えて連続して表示するツー

みんな大好きGoogle Analytics 無料で使いやすく高機能で安定していて中小規模のウェブサイトで使われているアクセス解析ツールとしては一強ですね。 そんなGoogle Analyticsは便利なAPIを公開していますが、これを活用している方は意外と少ないと思います。 前にRubyからGoogle Analytics API を扱う"Legato"の使い方をQiitaで書いて、2014年のd3.jsアドバンドカレンダーではRuby+d3.js+Google-analytics APIでユーザーの経路(パス)を描画というテーマで書いたので 最近個人的にチャートライブラリを使う機会が多いので、今回はAPIから取得したデータを使ってどのようなチャートが描けるのかを具体的にチャートライブラリと組み合わせて紹介します。 スパークラインの描画 スパークラインとは横縦軸に何の表記もなく放電してい

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

d3.js Advent Calendar 2014 http://qiita.com/advent-calendar/2014/d3 この記事に影響を受けて、Rails4+d3.js+garb(Google-analytics-API)でユーザー経路(パス)描画を実装してみました。 http://maulik-kamdar.com/2012/12/visualizing-paths-using-google-analytics/ Google Analyticsにあるフローレポートを補完する位置付けのグラフになります。 https://support.google.com/analytics/answer/2519986?hl=ja GoogleAnalyticsにあるユーザーの流れを表すフローレポート（上記URLに含まれる画像をもってきました） 下画像が今回の記事で出力されるグラフの画

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

あんまり使いませんが、updated_atを更新せずcallbackやvalidationを行わないで特定カラムをただただ上書きしたい時に使います。 ここに書いてある通りの内容です。 image = Image.first puts image.updated_at # updated_atが image.update_column(:optimized, true) puts image.updated_at # 更新されていない image.update_attribute(:optimized, true) puts image.updated_at # 更新されている

コマンドラインから簡単に特定フォルダ以下のjpegをjpeg-miniみたいに軽量化できないものかなと思って探していたらstackoverflowにまとめてありました。 その中でAdeptが良さそうなので試してみた手順です。 Adept - the adaptive JPG Compressor https://github.com/technopagan/adept-jpg-compressor 試した環境はCentOS6.5です。 shを取得して実行権限をつけます。 wget --no-check-certificate https://raw.githubusercontent.com/technopagan/adept-jpg-compressor/master/adept.sh chmod +x adept.sh adept.shは色々なモジュールを組み合わせて動作するので、ここ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

rails-bootstrap-formsを使っていてbootstrap-datetimepickerを使ったメモ書きです。 cdn経由でcssとjsを指定するのでコピペで動きます。 Bootstrap datetimepicker Date/time picker widget for Twitter Bootstrap v3 http://eonasdan.github.io/bootstrap-datetimepicker/ Moment.js http://momentjs.com/ cssとjavascriptの読み込み。 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/css/bootstrap-datetimepicker.min.css"