Responsive Web Designの話を少しずつ目にし始めたので、レスポンシブなのでも作ってみるかということで「quoted」というサイトを立ち上げました。いや、むしろ逆で引用文主体のサイトだからレスポンシブでいいよね、って感じなのですが（笑）。作ったといっても、そのほとんどで自分の力は何一つ使ってません。
ということで、今日はその舞台裏というか、コレがアレでこうなってできているよ、って話をしてみようかと思います。なにかの参考になれば幸いです。
Archive for the ‘articles’ Category
レスポンシブな感じで quoted を立ち上げました
Sunday, October 2nd, 2011「スマートフォンサイト制作の教科書」が発売されます
Friday, September 23rd, 2011早いもので9月も後半戦に突入しましたが、週明けの9月26日にMdNから「iPhone & Android スマートフォンサイト制作の教科書」が発売されます。現時点でスマートフォン制作に必要な知識や技法などを初〜中級者に向けてまとめた一冊です。
今回のこちらの書籍は、谷 拓樹さん、石本光司さん、いちがみトモロヲさんとの共著です。私は前振りみたいなもんで極めて基礎的なことしか書いていませんが、他のお三方はそれぞれの得意とする分野で各章を担当し、内容をまとめてくださっています。
- 序章 スマートフォン向けサイト制作をはじめる前に
- 第1章 スマートフォン制作のための基礎知識
- 第2章 制作・テスト環境のセットアップ
- 第3章 スマートフォンサイトの企画、構造設計
- 第4章 スマートフォン向けのパーツ制作
- 第5章 HTML5による実装
- 第6章 CSS3によるレイアウトと装飾
- 第7章 JavaScriptを使ったインタラクション
- 第8章 フレームワークやオーサリングツールを使ったサイト制作
- 第9章 パフォーマンスの最適化
- 付録 スマートフォン各機種 画面解像度一覧表
本書では最近話題になりつつある制作手法のひとつ「レスポンシブ・ウェブデザイン」については軽く触れる程度になっていますが、欄外にはサイト制作のヒントになるような参考資料の紹介はもちろん、モバイル系の制作に関する最新情報もギリギリまでねばって入れてみました。
これからスマートフォン向けのサイト制作をおこなわなければならない、やばい！勉強しなきゃ！と考えてる皆さんの一助になれば幸いです。
→ iPhone & Android スマートフォンサイト制作の教科書（Amazon）
→ iPhone & Android スマートフォンサイト制作の教科書（impress Direct）
（追記）スマートフォンサイトのパフォーマンス最適化については、いわゆるPC向けの最適化手法の多くも採り入れることができます。本書では石本さんのライフワークでもあるパフォーマンス最適化について誌面の都合上もあってモバイルに特化した内容で書いていただいてます。その他の方法の詳細が知りたい場合は、あわせてこちらのパフォーマンスの章もご覧いただくと良いかと…（こちらを書いてるのは私ですが、重ねて宣伝しておきます 笑）。
→ HTML+CSSコーディング ベストプラクティス（Amazon）
便利な人には便利なChromeの拡張機能 33＋1コ
Friday, September 23rd, 2011皆さんの普段使いのWebブラウザはなんですか？ ここ最近のボクはといえば、GoogleさんのChromeをメインブラウザとして使っています。Chromeも公開されているアプリや拡張機能を追加して、自分なりのブラウジング環境を作れます。そのまま使うか、拡張機能でカスタマイズするかはあなた次第です。
そんなわけで、今日は数多ある拡張機能の中からボクが選んだ入れておくと便利かもしれない拡張機能を33＋1コ集めてみました。前半は多くの人を対象に日常のブラウジング体験を快適にするもの、後半はWebサイトの開発系でちょっと役立つものといった感じでジャンル分けしてお届けします。ま、あくまでもボクが普段使ってるものベースですが…、キャプチャ中の★やユーザー数も参考に。
いくら拡張機能が便利だって言っても、入れすぎたらそれは重くなるだけですからね。適当に取捨選択して入れるなり、使う時だけオンにするなりしましょう。では、33＋1コいってみましょう。
Instagram v2.0 が出ていますよ
Wednesday, September 21st, 2011スクエアなフォーマットで写真をアップする Instagram が、iOS向けのアプリとしてリリースされて一年ぐらいでしょうか。ついにメジャーバージョンアップとなるVer. 2.0がリリースされたようです。アイコンもちょっとふっくらして新しくなりました。
Since the day we launched, one core part of the app has remain largely unchanged: the camera. In the past, we’ve added filters & tilt-shift, but the base technology has never evolved. Today that all changes as we introduce a complete upgrade to Instagram’s camera with a brand new technology layer.Introducing Instagram v2.0
高解像度の写真、撮影中に適用できるライブフィルタ、4つの新しいフィルタなど、バージョン2.0で追加された新機能についての詳しい話はオフィシャルなブログなどをチェケラッチョで。全体的に良い感じです。
＃ボク、最近サボり気味なのは生活の単調ぶりに拍車が…ｗ
Charles Web Debugging Proxy の使い方
Sunday, September 18th, 2011昨日行われた『CSS Nite LP, Disk 17「HTML5による電子書籍」 』にご来場くださった皆様、そして関係者の皆様、ありがとうございました。私のセッションで使ったスライドや補足事項については、主催者からのフォローアップメールでご確認いただくとして、セッション中に紹介した「Charles」についての質問を多くいただいておりますので、取り急ぎその件だけフォローアップさせていただきます。
「Charlesを使えば何ができるか」についての解説は、当日イベントに参加いただいた皆様の特典ということにして、Charlesを使ったアレでソレするための方法を簡単ですがまとめておきます。