2014 年 4 月 23 日

Stylusを使って、iOS retina対応のCSSスプライトを作る

spritesmithでCSSスプライト画像を合成し、CSSも出力することができますが、iOS retina対応にはなりません。
各画像は@2xで合成し、CSSの各座標情報は1/2としたいのですが、そのようなオプションはないようです。

そこで、spritesmithの出力形式にstylusを指定し、このstylusファイルを読み込んで、1/2された各画像のCSSを出力するstylusのfunctionを書くことにしました。

環境

  • node.js v0.10.26
  • grunt-cli v0.1.13
  • grunt v0.4.4
  • grunt-contrib-stylus 0.14.0
  • grunt-spritesmith 1.24.0

続きを読む »

2014 年 4 月 19 日

モバイルサイトのWebページ表示速度向上のテクニック

モバイルのWebサイトはできるだけ表示速度を向上させることが重要です。UI/UXも重要ですが、閲覧者にストレスを与えず閲覧させることは離脱を減らすことにもつながります。一般的に行われているテクニックをまとめてみました。gruntを利用すると、色々なツールが簡単に利用できます。

続きを読む »

2014 年 4 月 15 日

VagrantでモバイルWebアプリ開発環境を作る

実機を使ってモバイルWebアプリを開発するとき、WiFiから開発アプリに接続できるようにしておくと便利です。Vagrantを使えば、LANに接続するゲストOSの構築が簡単にできます。

今回のゲストOSはcentos64とし、社内のアクセスポイントに接続し、DHCPで社内LANのIPアドレスを付与します。DHCPを使うと、ホストOSとのファイル共有にNFSが利用できないので、Vagrant1.5から利用可能となったrsyncを使っています。固定IPも設定できるようですが、今回は割愛します。

続きを読む »

週間アクセスランキング


    Warning: file_get_contents(./gapi/ranking.json): failed to open stream: No such file or directory in /home/kir015506/public_html/notice.co.jp/wp-content/themes/notice/sidebar-blog.php on line 6

    Warning: Invalid argument supplied for foreach() in /home/kir015506/public_html/notice.co.jp/wp-content/themes/notice/sidebar-blog.php on line 8

新着

カテゴリ

過去の記事

follow us in feedly