Webデザインに関するトピックを日々綴っています。

CSS nite LP27 Smartphone part3 に行ってきました

先週末にCSS nite LP27 Smartphone part3 に行ってきました。
まだ業務でレスポンシブデザインの実装経験のない自分ですがとても分かりやすかったです。
今回セッションの中で様々なツールが紹介されていましたが使った事のないツールや初めて聞くものが多かったのでまとめておきます。

セッション3「スマートフォン向けサイト制作の基本」

●Xcode
スマホサイトや、iphoneアプリをMac上でシュミレート、デバックできるソフト

ダウンロード
https://developer.apple.com/xcode/
【図解】Xcode 4.5の使い方リファレンス超まとめ (1/3)
http://www.atmarkit.co.jp/ait/articles/1212/05/news022.html

4レスポンシブデザイン 「レスポンシブWebデザイン実践編」

●wp_is_mobile()

wordpressでスマホとPCを分岐できる関数
display:noneと違いソース自体表示されないのでいいかも

参考サイト
http://webtrace-cuisine.com/201302/wpismobile/

●Bootstrap
デザインスキルがなくてもかっこいいサイトが作れるCSSフレームワーク(IE7まで対応)

ダウンロードサイト
http://twitter.github.io/bootstrap/
Twitter Bootstrapで作られた、秀逸なデザインのWebサイト集まとめ9つ
http://w3q.jp/t/1648

●foundation

レスポンシブWebデザインにも対応のフレームワーク

ダウンロードサイト
http://foundation.zurb.com/
レスポンシブデザイン・フレームワークの「Foundation」に新版が登場。「モバイルファースト」を強化してZeptoを採用
http://bit.ly/18sipJ7

5スマートデバイス時代のWebサイト構築術LIVE

●backlog

プロジェクト管理ツール

http://www.backlog.jp/

●POP

ペーパープロトタイピング用のiPhoneアプリ(紙面上のワイヤーをそのままiPhoneでページ推移など検証できる!

ダウンロード
http://bit.ly/18skqVN
アプリのプロトタイプが超絶簡単に作れるiPhoneアプリ「POP」
http://blog.glpgs.com/index.php/archives/600

●Clipboard History(Mac用

クリップボードに保存したテキストを過去をさかのぼってペーストできる

ダウンロード
http://bit.ly/18slGIo
クリップボードに簡単にアクセス&管理できるMacの無料ツール『Clipboard History』
http://www.lifehacker.jp/2011/04/110401_clipboard-history.html

●TextExpander(Mac用

よく使うコードや定型文などのスニペット作成に便利

ダウンロード
http://bit.ly/18sm2ia
[動画あり]快適な文字入力には絶対に欠かせないアプリ、TextExpanderで使用中のスニペットをまとめてみた
http://ozpa-h4.com/2012/07/13/my-textexpander-snippet/

●Android Studio

スマホサイトや、AndroidアプリをPC上で開発、シュミレート、デバックできるソフト

ダウンロード
http://developer.android.com/sdk/installing/studio.html#download
[開発環境] Android Studioをインストールしてみる
http://dev.classmethod.jp/smartphone/install-android-studi/

●Firefox OS Simulator

デバックに

ダウンロード
https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/

●Adobe Edge Inspect

スマートフォンなどモバイルデバイス上でWebデザインのプレビュー、検証ができる。(神ツール

ダウンロード
http://html.adobe.com/jp/edge/inspect/
Adobe Edge Inspect:様々なデバイスで手軽にブラウザーテスト
http://adobe.ly/18snC3D