ドラッグ＆ドロップでWebアプリを作る「Divshot」

ちょっと触ってみただけですが、
サクサク動くし、おもしろいです。
デザインもきれい。

Divshot
http://divshot.com/

ブラウザベースのHTMLエディタとしても
使えそうなところがいいですね。

いまのところベータテスト中で無料です。

レスポンシブのフレームワーク「Foundation」

モバイルファーストでレスポンシブなフレームワーク、
Foundation
http://foundation.zurb.com/
を試してみようかな、と思ってメモ。

マークアップも良さそうな感じなんですが、
jQueryではなくて、
Zepto.js
http://zeptojs.com/
を使っているのが気になったポイント。

先日、某大規模サイトの制作チームに
スマホサイトについてヒアリングさせてもらうという
貴重な機会があったので、
おまけでついて行ったのですが…
サイトの軽量化のため
「jQuery Mobileでも重すぎるので、
それをさらに軽量化したものを作って使ってる」
とのこと。

でもうちの職場は少人数低予算なベンチャーなので、
そんなの開発できないよなぁ…と言っていたのです。

Foundation＋Zepto.js で
軽量なサイトをデザインできたらいいなぁ♪

ちなみに、モダンブラウザのみ対応です。

WordPressに関するスライド

WordPressのお仕事をすることになりそうだけど、
最近さわってないのです…

すごく勉強になりそうなスライドを、
自分が後で読むために貼っておきます！

WordPressを使ったWeb制作効率化のためのTips&Tools from kenji goto

ブログの枠を超える？ためのWordPressカスタマイズ入門 from muracchi

CSS3ジェネレータ＆ブラウザ対応状況

やっぱりこの頃スマホの案件が多いですね。
…と言うより、対応するのが当然になってきてるんですね。

なので、HTML5＋CSS3を使う機会が断然増えました。

ブラウザ上で動くCSS3ジェネレータは色々ありますが、
私はこちらが使いやすくてお気に入り。
CSS3 Generator

対応しているプロパティ：

• Border Radius
• Box Shadow
• Text Shadow
• RGBA
• @Font Face
• Multiple Columns
• Box Resize
• Box Sizing
• Outline
• Transitions
• Transform
• Selectors

※GradientはUltimate CSS Gradient Generatorにリンクされてます


あと便利だったのが、
When can I use...
というサイト。

HTML5, CSS3などに
現在、どのブラウザが対応しているかを
一覧で見ることができます。

対象ブラウザに
iOS Safari、Opera Mini、Android Browserが
含まれているところが貴重です。

Graceful DegradationとPolyfill

新しい言葉を覚えたのでメモ。

• Progressive Enhancement
  プログレッシブ エンハンスメント
  →旧ブラウザメインだけど、モダンブラウザで見るとちょっといい感じになってる。
• Graceful Degradation
  グレイスフル デグラデーション
  →モダンブラウザがメイン。旧ブラウザでも見られないことはない。
• Polyfill
  ポリフィル
  →モダンブラウザがメインだけど、JSライブラリなどを使って旧ブラウザでも同じように見せる。

こんな感じで合ってるかな？

お仕事で商用サイト（しかもEC）作ってると
HTML5やCSS3の使い方は悩みますもんね…

IE8以下もまだ当分捨てられないけど、
リニューアルとかのタイミングで
対応しとかないと後で困りそう。

Polyfillは活用する価値ありそうだけど、
重くなりそうなところが
大規模サイトだと厳しいかなぁ。


参照：
HTML5&CSS3入門 第6回 Graceful DegradationとPolyfill

Firefoxのアドオン「User Agent Switcher」

最近スマートフォン対応のお仕事が増えてきたので、
こちらのアドオンを入れました。
便利！
User Agent Switcher

ユーザエージェントを偽装して、
Firefoxでスマホ用のページを見ることができます。

機種ごとのユーザエージェントは検索するといっぱい出てきますので、
それをコピーしてきて自分で追加することもできます。

FireMobileSimulatorでもいいんですが、
たまに表示が崩れることがあったり、
横幅が固定されちゃうのが不便な時があって、
User Agent Switcherの方が気に入ってます。

SassとCompass

最近ついに仕事でもスマートフォン対応がはじまったりして、
HTML5とCSS3を使うようになりました。
（一応勉強しておいてよかった！）

でも、もっと効率的にやりたいなぁと思って、
ずっと気になってたモノを
ついにインストールしてみました。

CSSを拡張するメタ言語の「Sass」
http://sass-lang.com/
と、Sassをさらに便利に使えるフレームワーク「Compass」
http://compass-style.org/
です。

Macのターミナルを開いて、Rubyアップデートしていろいろ打ち込んで、
なんとかインストールできたみたいです。

一応メモ。

$ sudo gem update --system
$ sudo gem install compass

$ compass create --sass-dir "sass" 

--css-dir "css" --javascripts-dir "js" --images-dir "img"

がんばって使ってみたいと思います！

あとは、やっぱり黒い画面はちょっと苦手なので
Compass.appがすごく気になるなぁ…
http://compass.handlino.com/