CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ（5）『スマートデバイス時代のWebサイト構築術 LIVE』たにぐち まことさん、田代 豊さん | CSS Nite公式サイト

2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のフォローアップとして、たにぐち まことさん、田代 豊さん（anygraphica）の『スマートデバイス時代のWebサイト構築術 LIVE』セッションのスライドなどを公開します。

• スライド

セッション 5「スマートデバイス時代のWebサイト構築術 LIVE」を担当させていただいた、anygraphica 田代とたにぐちです。

私たちからは、スマホサイト制作に活用できるツール類を、実際の作業フローに合わせてご紹介しました。説明が早口になってしまって申し訳ありませんでしたが、各ツールを使ってみていただき、便利なものは活用していただければ幸いです。

紹介したツール類です。

• Backlog
• Cacoo
• POP
• POPの動作デモ
• Bootstrap
• G600 MMO Gaming mouse
• Steer Mouse
• sliceGroup_Set.jsx
• Sublime Text 2
• CodeKit
• TextExpander
• Alfred
• SourceTree
• jQuery
• Coda
• Xcode
• Android Studio
• Winows Phone SDK
• Firefox OS Simulator
• Adobe Edge Inspector
• http://www.logicool.co.jp/ja-jp/product/illuminated-keyboard-for-mac-ipad-iphone

動作デモのムービー
http://www.youtube.com

また、アンケートの感想欄でいただいたご質問に回答いたします。

● jQueryは CDNではなく、ローカルに落とすことが推奨されているが、どう思われますか？

これは、私のセッションでそのように感じられたと言うことでしょうか？　それでしたら、分かりにくかったかも知れず申し訳ありません。CDNは積極的に使っていただいて良いと思います。私がデモ中で挿入した jQueryの参照コードはこちらです。<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script>window.jQuery || document.write(" title="<script src="shared/js/jquery-1.7.1.min.js"><\/script>">Easy Switch Keyboard</script>これは、最初に CDNから jQueryのロードを試みます。その後、正常にロードできていなければ、ローカル（shared/js/フォルダ内）の jQueryをロードするという2段階になっています。参考にしてくださいませ。

● Firefox OS・・・　まだ全然これからなんですね。

ごめんなさい、言葉が足りませんでした。これは Firefox OSのせいではありません。私たちがデモで使ったサイトが、WebKitのことのみを考えて作ったサイトであったため、Mozillaで崩れてしまったものでした。
スマートフォン専用サイトの場合、WebKitでしか確認していない Webサイトも多いため、表示が崩れることもあるかと思います。今後、確認をして調整をしていかなければならないかも知れません。

● Firefox OSをこれからフォローすべきでしょうか？

もちろん、フォローすることが「理想」ではありますが、対応するためには予算や手間がかかりますので、現実的にはこれからシェアなどを見ていきながら、クライアントとの判断になっていくかなと考えています。

ただ、シミュレーターは無料ですぐに利用できますので、まずは触ってみて、どんな風に崩れるのか、どんなクセがあるのかなどは見ておくのは良いと思います。

● Dreamweaverでのコーディングはもう古い？

そ んなことはありません。私たちも今も Dreamweaverは活用していて、ベースのHTMLコーディングなどでは Dreamweaverを利用します。ただ、SCSSを利用したり、jQueryを利用しようとしたときは、別の Sublime Textや Codaの方が優れているかなと思います。
ツールは「どれか1つ」に決める必要はないと思っています。それぞれのツールの良い所を使い分けて、一番最適な作業フローを作れるようにすると良いでしょう。

● どのように情報収集をしていますか？

基本的には、Facebookで友人がつぶやくのを見たり、Gunosyや Ziteなどのニュースアプリを活用しています。気になったニュースやアプリは、必ず試して評価をし、使えそうなものを随時ワークフローに組み入れて試しています。

• Gunosy
  
• Zite
  

気になったニュースは、今 Twitterで流していますので、よろしければフォローしてください。
https://twitter.com/seltzer

レスポンシブWebデザイン実践編 こもり まさあき from indd-jp on Vimeo.