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の参照コードはこちらです。
これは、最初に CDNから jQueryのロードを試みます。その後、正常にロードできていなければ、ローカル（shared/js/フォルダ内）の jQueryをロードするという2段階になっています。参考にしてくださいませ。<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> - ●
Firefox OS・・・ まだ全然これからなんですね。 - ごめんなさい、言葉が足りませんでした。これは Firefox OSのせいではありません。私たちがデモで使ったサイトが、WebKitのことのみを考えて作ったサイトであったため、Mozillaで崩れてしまったものでした。
スマートフォン専用サイトの場合、WebKitでしか確認していない Webサイトも多いため、表示が崩れることもあるかと思います。今後、確認をして調整をしていかなければならないかも知れません。 - ● Firefox OSをこれからフォローすべきでしょうか？
- もちろん、フォローすることが「理想」ではありますが、対応するためには予算や手間がかかりますので、現実的にはこれからシェアなどを見ていきながら、クライアントとの判断になっていくかなと考えています。
- ただ、シミュレーターは無料ですぐに利用できますので、まずは触ってみて、どんな風に崩れるのか、どんなクセがあるのかなどは見ておくのは良いと思います。
- ● Dreamweaverでのコーディングはもう古い？
- そ んなことはありません。私たちも今も Dreamweaverは活用していて、ベースのHTMLコーディングなどでは Dreamweaverを利用します。ただ、SCSSを利用したり、jQueryを利用しようとしたときは、別の Sublime Textや Codaの方が優れているかなと思います。
ツールは「どれか1つ」に決める必要はないと思っています。それぞれのツールの良い所を使い分けて、一番最適な作業フローを作れるようにすると良いでしょう。 - ● どのように情報収集をしていますか？
- 基本的には、Facebookで友人がつぶやくのを見たり、Gunosyや Ziteなどのニュースアプリを活用しています。気になったニュースやアプリは、必ず試して評価をし、使えそうなものを随時ワークフローに組み入れて試しています。
気になったニュースは、今 Twitterで流していますので、よろしければフォローしてください。
https://twitter.com/seltzer
レスポンシブWebデザイン実践編 こもり まさあき from indd-jp on Vimeo.
ベストセッション2019
2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。
