サイトのパフォーマンスアップをしたいけど、
作業をする時間がつくれない、作業するにしても影響範囲が大きくて
なかなか実行できない…ということは非常に多いと思います。

そこで、今回は簡単！すぐできるパフォーマンスアップ！
Webサイトに最適な画像形式の書き出し方法をご紹介します。
以下で書き出した画像はFireworks CS5 を使用して書き出しています。

EC studio では基本的に画像はPNG8で切り出しています。
なぜかというと、ほとんどのPNG8画像のファイルサイズがGIFより軽いことと、
可逆圧縮で透過表示もできるからです。

しかし、状況によってはPNG8以外の形式も使用します。
主に写真はJPEG、半透明の画像はPNG8、PNG32、
アニメーションはGIFに書き出します。

PNGとGIFとJPEGがどの画像で使うのが向いているか比べていきましょう。

256色以内の画像の場合

256色以内の画像はほとんどがPNG8の書き出しが適切ですが、
サイズが小さく色数が少ない画像はGIFのほうが軽い場合があります。
この場合はプレビューで選んで軽いほうを書き出してください。

また、透過画像を使う場合はPNG8（インデックス透明カラー）で
書き出すと透過GIFより軽くなることが多いです。

PNG8（3.36KB）		GIF（3.92KB）
PNG8（3.57KB） （インデックス透明カラー）		GIF（3.94KB） （インデックス透明カラー）

写真やグラデーションなど色数が多い画像の場合

色数が多い画像の場合はJPEGをおすすめします。
PNG24もきれいに表示されますが、ほとんどがJPEGのほうがデータが軽くなります。

JPEG（画質80）（16.4KB）		PNG24（86.1KB）

写真画像ではJPEGとPNG24で比較してみましょう。
どちらの画像も画質をきれいに書き出しすることができているのですが、
サイズを見るとJPEGのほうが軽量化されています。

半透明の画像の場合

半透明を表示させる場合は
256色以下の色数が少ない画像の場合はPNG8（アルファチャンネル）、
色数が多い場合はPNG32で表示させましょう。

ただし、IE6では半透明情報を表現してくれません。
AlphaImageLoaderやjavascriptで対応することで表示することができます。

AlphaImageLoaderの対応について

Internet Explorer で PNG ファイルの背景が透明にならない
http://support.microsoft.com/kb/294714/ja

IEと透過PNG
http://amenti.usamimi.info/ie6png.html

javascriptの対応について

IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/

アニメーション画像

現状アニメーションPNGはすべてのブラウザに対応していないので、
アニメーションを使いたい場合はアニメーションGIFを使いましょう。

参照サイト

最良の画像フォーマットはPNG8、GIFはアニメーション、JPEGは写真に
http://journal.mycom.co.jp/news/2008/11/06/046/

画像を最適な形式で書き出すことで、軽量化することでき、
比較的早くパフォーマンスアップをおこなうことができます。

• 誤字脱字を事前に減らして効率化！
• 簡単作業でスピードアップ！パフォーマンスアップまとめ
• デザインやプログラミング時によくあるスペルミス
• ターゲットブラウザを選定して効率化！サイト制作時間短縮術
• Web Directions East 「パフォーマンスアップのウェブ技術 WDE-Express」

個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。

新要素をJavaScriptで生成する

HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。
そこでdocument.createElement(要素名);により、ブラウザ（ユーザーエージェント）にとって未知な存在の要素を生成し、認識させることができます。

一番簡単な書き方をすればこれだとは思いますが、配列とかを使って上手いことできるとおもいます。それでもなかなかひとつひとつの要素を書いていくのが大変だと思うので、海の向こうの偉い人のソースを拝借することをおすすめします。

HTML5 enabling script

JSファイルをダウンロードして使っても良いですが、googlecodeでホストされているものをサンプルのようにそのまま使うのが良いとおもいます。パフォーマンス（表示速度）的にも良いです。

なおその場合には、HTML5に対応予定のIE9を除いたコンディショナルコメントにするのが良いでしょう。

このあたりについては、ものすごく素晴らしいまとめをされているW3Gさんの記事が参考になります。こちらの「HTML5の新要素を使うには」のセクションをご覧ください。
HTML5についてのおさらい

新要素のdisplayプロパティをスタリングする

IEに限らず、一部のブラウザを除いて新要素に対してdisplayの値がセットされていません。（厳密にはinlineとしてセットされている？）
これはHTML5からブロック、インラインという概念が変わったことが理由なのか、単純に先行実装のために定義されていないだけなのかわからないですが、いずれにせよスタイリングする上で、いくつかの要素にはあらかじめdisplayプロパティをセットしておく必要があります。

これは主な要素としての例ですので、必要に応じてセットすれば良いです。
※もしかしたら先に紹介したHTML5要素を生成するライブラリで、これらの定義されているかもしれません。（あまりここは検証していないので後日検証予定）

新要素を使わない

ネタに聞こえるかもしれませんが、これは一番のコツとも言えるかもしれません。
つまりDOCTYPEをHTML5としての宣言にするだけです。

あわせてcharsetの記述も簡単にしてしまいましょう。
この程度であれば、IEで新要素の問題も起きませんし、不都合も特にありません。

ただ実際にはHTML5になって廃止された要素や属性もあるので、本当は万事OKというわけではありません。

でもそれでもちょっとずつValidatorサービスなどを利用しながら学んでいけば良いことかとおもいます。はじめてHTMLやXHTMLを学び始めたころを思い出してください。
HTML5 Validator(W3C)

divやspanを使う

「HTML5になってdivやspanを使うと負けかなって思ってる」人は負けです。

とか言い過ぎかもしれないんですが、HTML5でもdivとspanは必要です。
まして前述のように新要素を使うのをためらう場合は、divとspanで代用するのが良いでしょう。

ここの例でひとつ注目してもらうとすれば、div class="entry-summary"です。
これはHTML5でいうところのセクションではないので、section要素ではなくdiv要素であっても問題がない箇所です。
ただCSSのためなどに必要である要素であっても問題はありません。もちろん乱用はよくありません。それはHTML5の問題ではありません。

またこの書き方についてはもう一つ大きなメリットがあります。
冒頭で、IEでHTML5を使うためにはJavaScriptで要素を足せばいいということを書きましたが、もしJavaScriptがオフの環境であればそれが無効になります。
その点も考慮すると、上記のような既存の要素でHTML5的な書き方をするのが、実際には良いといえるかもしれません。
このJavaScriptオフの環境をどこまで考慮するかによって、書き方を検討してみてください。

要素セレクタを使わない

HTMLの話をここまでしてきたのですが、CSSの書き方にもコツがあります。
それは新要素を対象とした要素セレクタを使わないことです。

まずHTML側で新要素に対してclassを追加します。

これに対するスタイルは下記です。
前者はNG、後者はOKの例です。

このようにスタイリングする理由は、HTML5の仕様変更により要素が変わってしまう可能性があるため、その場合のメンテナンスの負担を減らすためです。
例えばarticleという要素がなくなり、sectionに代わった場合などにはHTML側だけの修正で済みます。
この理由以外にも（CSS全体の書き方にもよりますが）パフォーマンスの面でも好ましいといえます。
※微々たるものですが。セレクタに関するパフォーマンスの話は下記サイトもご覧ください。
CSSセレクタのパフォーマンスへの影響

まとめ

この記事を参考に、HTML5やってみよう！と思える人が増えると幸いです。
invalidを恐れず、IEを恐れず、クライアント（顧客）を恐れずに挑戦しましょう。

HTML5に関する色々な情報

HTML5 における HTML4 からの変更点
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/

HTML5.jp
http://www.html5.jp/

HTML5についてのおさらい
http://w3g.jp/blog/studies/html5report

HTML5 Validator(W3C)
http://validator.w3.org/

HTML 5 Outliner
http://gsnedders.html5.org/outliner/

HTML5 enabling script
http://remysharp.com/2009/01/07/html5-enabling-script/

HTML5 のリセット・スタイルシート（HTML5 Doctor翻訳）
http://www.html5.jp/html5doctor/html-5-reset-stylesheet.html

今からハジメるHTML5マークアップ
http://www.slideshare.net/swapskills/futomi

HTML5, きちんと。
http://www.slideshare.net/myakura/html5-2480964

How to use HTML5 in your client work right now
http://html5doctor.com/how-to-use-html5-in-your-client-work-right-now/

You can still use div
http://html5doctor.com/you-can-still-use-div/

• iPhone OS 4.0でvideo要素を使うと、ページに動画を埋め込める[追記あり]
• HTML5だけでiPhoneアプリをつくる
• HTML5、きちんと。CSS Nite 4周年記念イベントにいってきました

• iPadからのアクセスを判定する
• デバイスの幅に左右されないリキッドレイアウトにする
• position: fixedの使い方に注意する
• タップを意識したスタイル調整
• ファイルの軽量化・表示速度の向上

先に種明かしをしてしまうと、基本的にはiPhone向けの対策をそのままiPad向けにも適用させるということです。
なので過去のiPhone向け対策を参照してもらうのが良いですが、iPhoneと違うところは色々とありますので、それを検証していきましょう。

iPadからのアクセスを判定する

iPadのユーザーエージェントは公式のドキュメントを参照すると、

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

こちらのようです。バージョンその他は色々と変わると思いますが、iPadという文字列で判定すればiPad用のHTMLを出力することができます。

ユーザーエージェントを利用したPHPでの振り分け方については、iPhone向けの対策記事にも書いてありますが、JavaScriptでの振り分けも可能です。

なおiPhoneのときに紹介したような、メディアクエリを利用したデバイスの解像度によるCSSの振り分けは好ましくありません。
下記は好ましくない例です。

これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。
つまり、「iPadだけ」に適用させるということは実質できないということになります。
この点はご注意ください。

デバイスの幅に左右されないリキッドレイアウトにする

前述のユーザーエージェントの話に次いで、レイアウトの話です。

iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば
横 768px × 縦1024px
となります。
そしてランドスケープ（横向き）であれば
横 1024px × 縦768px になります。

しかしiPadもiPhone同様に、擬似的に横幅980pxでの表示をします。
なので横幅が768pxを超えているサイトであっても横スクロールが発生するとか、カラムが落ちるとかそういうことはありません。
この点ではひとまずホッと安心してもらっても大丈夫そうです。

しかしこれは拡大率（縮小率）を980pxに合わせているだけなので、コンテンツ内の文字情報などはやや小さくなります。

なのでiPadに最適化させるということであれば、この980pxを想定したスタイルの調整をおこなうか、またはそれぞれの向きにおいて厳密にサイズを合わせたいのであれば、JavaScriptのorientationchangeやwindow.orientation といったデバイスの回転や向きでイベントを実行する方法を利用するか、メディアクエリのorientationというプロパティを使って、専用のスタイルを適用させる方法があります。

どれに対しても対応できるシンプルな方法は、サイトとコンテンツをリキッドレイアウトで再設計して、デバイスの幅に左右されないスタイルにすることです。

とはいえせっかく向きによって画面サイズが変わるのですから、できれば向きに合わせてコンテンツを調整できるのが理想かと思います。
例えば単純にコンテンツが横に伸び縮みするだけではなく、それに応じてカラム数を変更するなど、表示する情報量を調整するというのが好ましいですね。

ここでもう一つレイアウトについておまけの話です。

実際にiPadを手に入れてからいろんなアプリを試してみると分かりますが、多くのアプリが画面向きによってダイナミックにレイアウトが変わる仕様になっています。
それはランドスケープの場合はサイドバーが出現し、ポートレートの場合はサイドバーが消えるまたはフッターへと回り込むというような動きです。

この意図は単純にそれぞれの向きで最大横幅が変わるからということだけではなさそうです。
これはiPadそのもの設計コンセプトでも語られていることなのですが、ポートレートの場合にはサイドバーを取っ払うことでコンテンツに集中しやすくなる、逆にランドスケープの場合にはその広くなった横幅を利用して、ナビゲーションやサブコンテンツを見せるためにサイドバーを出現させる、というような意図が考えられます。

結局は情報を向きによってレイアウトやUIを調整するという話なのですが、このあたりは各サイトコンテンツやWebアプリケーションによって検討するといいでしょう。

position: fixedの使い方に注意する

サイトのナビゲーションやフッターをposition: fixedで固定したデザインがあります。最近よく見かけるTwitter Badgeなんかは画面の端にposition: fixedで固定をしています。

このposition: fixedの問題は、iPad（および iPhone）では有効ではないというところです。

先程のTwitter Badgeのような、直接コンテンツに影響がなく、デザイン的にも端っこなど邪魔にならないところにあるものであれば、画面のスクロールに要素がついてこないだけなので良いのですが、フッターとして固定させている場合はそれが固定されません。

こちらの図のように、コンテンツにフッターがかぶってしまうような状態になってしまうということです。

これに対応するには、iPad/iPhoneの場合にはposition: fixedを使わないようにするのが一番簡単な方法です。
しかしサイトやコンテンツによっては固定させることが必要ということであれば、それを可能にするJavaScriptライブラリを使う方法があります。

その一つにiScroll.jsというライブラリがあります。これは要素を固定してスクロールする箇所を制御することができるライブラリです。
詳細な使い方などは今回は配布元をみていただくとして、JavaScriptを使えば可能ということを覚えておいてください。

なお、position: fixedが使えないことについては公式のドキュメントでも書かれており、バグではなく仕様のようです。

タップを意識したスタイル調整

iPhoneの記事でも書きましたが、iPadでもクリックではなく指を使ったタップがリンクなどを開くためのアクションとなります。
このタップを考慮した対策というのは、リンクエリアを大きくすることがポイントになります。

なので行間・余白を大きめにとったり、ボタン画像などもなるべく大きくするようにしましょう。

またマウスではないので、通常の:hoverクラスやmouseoverイベントなどにも対応していませんので注意してください。
この代わりというわけではないですが、タップに対しては touchstart、touchmove といったJavaScriptのイベントはあるので、それらで何かしらのインタラクションを用意できるといいかもしれません。

ファイルの軽量化・表示速度の向上

これはiPadやiPhone向けのサイトに限った話ではないのですが、いずれも3G回線やWIFI回線を利用したインターネット接続になるので、なるべくファイルサイズは押さえるようにした方がいいです。

高速化・軽量化のノウハウについては、簡単作業でスピードアップ！パフォーマンスアップまとめという当ブログの記事で書かれているようなコードの書き方の工夫や画像の最適化などがありますが、CSS3を多いに活用することも重要です。

CSS3の小技などはまた記事にしたいと思いますが、ボタンや背景画像で多用するグラデーション装飾などはCSS3で書くことができますので、きれいなグラデーションのボタンや背景画像などもCSS3のみでやることをおすすめします。

またアニメーションの処理などは極力JavaScriptを使うよりも、CSS3をアニメーションを活用することも有効です。

そのあたりのどちらのアニメーション処理が軽いのかは下記記事が参考になります。
Webkit CSS animations for jQuery

まとめ

大きな施策ではないですが、ほんの少しの工夫や注意をするだけでもiPadでのサイトの使い心地が変わります。
しかしこうしたiPadに最適化することを考える上で一番重要なことは「どれだけのことをおこなうか」です。

iPhoneの場合であれば、明らかにPCで使うよりも画面が狭く、最適化しないと文字も小さくて読みづらい、表示が遅いなどの理由で、iPhoneに最適化するメリットが多いにあると思うのですが、iPadの場合には「PCとまったく同じように見れたら十分」というユーザーの方がもしかしたら多いのかもしれないと感じています。

実際に自分が使うことを考えても、iPadに最適化されることで断然便利になっているのであればいいですが、便利になっているわけでもなく、ただ「それっぽいデザイン・UI」にするというのは好ましくないでしょう。

これは自戒でもありますが、制作者の方々はよく考えて色々な工夫ができるといいですね。
今回紹介したちょっとしたスタイルの調整なんかは是非やってみると良いと思います。

今回こうした解説をしましたが、iPadの使われ方というのはまだまだ想定しきれないところが多く、それを考えるのは難しいですが面白いですね。
いつか実践・応用編もいつか書くかもしれないので、今後も色々と情報を集めていきたいと思います。

参考サイトなど

iPadに関するドキュメント・ガイドライン

iPad Human Interface Guidelines: Introduction

Preparing Your Web Content for iPad

HTML,CSS関連

メディアクエリー

ライブラリ、フレームワーク

iScroll.js

jQuery.iFingerScroll

iPad 向けアプリやサイトのデザイン

Landing Pad

その他

Designing for iPad: Reality Check
iPadの説明するけぇ、よう聞きんさい。

• WordPressをiPhoneに最適化するプラグイン
• iPhone向けサイト構築 基礎文法最速マスター
• iPhone OS 4.0でvideo要素を使うと、ページに動画を埋め込める[追記あり]
• HTML5だけでiPhoneアプリをつくる

iPhone向けに最適化するための対応は慣れるまでは簡単ではないと思う方が多いかもしれませんが、WordPressではプラグインで簡単に対応できます。
今回はよく利用されているであろう3つのプラグインを紹介します。

iWPhone

http://iwphone.contentrobot.com/2007/07/04/iwphone-wordpress-plugin-and-theme/

シンプルなテーマが適用されるプラグインです。
導入方法ですが、プラグインファイルはpluginディレクトリに、テーマファイルはthemeディレクトリにアップロードし、その後にプラグインを有効化するだけです。

特長ですが、とにかく見た目も仕組みもシンプルといったところです。
記事内の画像ファイルなども、記事の幅に合わせてリサイズしてくれるのですが、要素によってはその幅を超えて表示されてしまうようです。
記事内でstyle属性でサイズを指定しているなど、そうした場合には表示に気を付けた方がいいかもしれません。

テーマを元のデザインに合わせて自由にカスタマイズしたい場合は、iWPhoneにテーマの振り分けだけを任せるのが良いと思います。

Ktai Style (携帯対応プラグイン)

http://wppluginsj.sourceforge.jp/ktai_style/

こちらは国産のプラグインで、プラグイン名の通りいわゆるケータイ向けに最適化するプラグインとして有名です。

こちらはiWPhoneのように、テーマをthemeディレクトリに入れる必要はなく、ファイルをまるまるpluginディレクトリにいれてしまえばOKです。あとは管理画面からプラグインの有効化ですね。

こちらはもともとiPhoneのようなスマートフォン向けのプラグインでないからか、デフォルトのテーマというのは用意されていません。
※画面は携帯向けのテーマを適用しています。

そのためこのプラグインを使うためには専用のテーマを自作する必要があります。
テーマを自作する必要があるのであれば、iWPhoneを使う方がiPhoneに特化しているという点ではおおすすめしますし、一般の携帯にも最適化したければこちらのKtai Styleをおすすめします。
キャリア向けにテーマを分けられるので、iPhone向け、docomo向けなどいろんな使い方ができます。

WPtouch

http://www.bravenewcode.com/products/wptouch/

現在デザインブログでも利用しているプラグインです。このプラグインの特長はとにかく高機能でデフォルトのデザインも整っているところです。

導入方法はこちらもKtai Styleと同じタイプで、pluginディレクトリにアップロードして有効化するだけです。

なるべく簡単にiPhone向けに最適化してしまいたいのであればこのプラグインをおすすめします。

またiPhone向けに最適化するだけではなく、通常のPC向けのテーマへの切り替えも可能になっています。
この機能は重要で、iPhoneであってもPC向けの表示で見たいユーザーのために用意してあげる方が好ましいということです。

iPhone,Mobile Safariではそもそも既存のサイトでも閲覧に不便がないよう工夫されていますし、そのままの見た目の方が多少文字が小さいとしても、ひとめで多くの情報が見れて良いという場合もあります。
ユーザーに対し、その選択肢を用意しておくと言うのも忘れないようにしましょう。

注意点

いずれのプラグインも専用のテーマを適用するような形になっているので、それぞれのテーマでもアクセス解析タグなど効果測定タグなどを貼り忘れないように注意しましょう。（実際に経験しています・・・）
ちなみに先日無料化した EC studio の Web Analystも合わせてこの際使ってみてください :p

まとめ

紹介したライブラリではきれいで最適化されたテーマがあるので、そのままでももちろん使えますが、サイト・ブログのデザインにはコンセプトなどもあろうかと思いますので、そのサイトの独自性を出すためにもiPhone向けに最適化された方のテーマをカスタマイズして、デザインなどを変更することをおすすめします。

その際には、使いやすさはもちろん、ページの表示速度向上などの対応も必要になるので、デザインブログの過去記事を色々参考にしてもらえればと思います。

お知らせ

2010年5月29日 (土)に横浜で「WordCamp Yokohama 2010」というイベントが開催されるようです。
WordPressを使われている方は是非参加してみてはいかがでしょうか。
http://yokohama2010.wordcamp.jp/event/

• Wordpress（ワードプレス）での投稿者別顔アイコン表示方法
• Wordpress2.8にも対応！Wordpress（ワードプレス）おすすめプラグインまとめ
• iPhone向けサイト構築 基礎文法最速マスター
• iPhone OS 4.0でvideo要素を使うと、ページに動画を埋め込める[追記あり]
• iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編）

iPhoneのMobile SafariではHTML5が使えるというのは以前に書いた記事でも紹介したことがあるのですが、HTML5の各要素がすべて完全に使えるというわけではありません。
その中の一つであるvideo要素はマークアップ上使うことは可能ですが、いざ動画を見ようとするとQuicktimeが起動するのでvideo要素を使うメリットがほとんどありませんでした。

しかしvideo要素はOS4.0からページに埋め込まれる形で再生できるようになります。

iAdの衝撃

皆さんiAdのデモは観たことがありますか？
iAdとはAppleが発表した新しいモバイル広告プラットフォームです。

iAdのデモ

このインタラクティブな広告はHTML5で作られているそうです。
それを聞いた上でこのデモを見ていると「あれ？なぜ動画がQuicktimeじゃない形で流れているんだろう」ということに気づました。
もしかしたらvideo要素の扱いが違うのかも？ということで、これを検証してみました。

HTML5 video要素のおさらい

HTML5 video要素のおさらいをします。
video 要素 - html5doctor - HTML5.JP

例えばこのような形でシンプルにソースファイルを指定するだけで最低限OKです。
ここに自動再生や自動バッファ、動画の再生・停止などのコントロールバーの表示などをコントロールする属性を追加することができます。
もう一つ、video要素で注意すべきは動画のコーデックおよびファイル形式によって、ブラウザで再生できるものとそうでないものがあることです。
HTML5 のビデオ・コーデック

ただ今回のお話はiPhoneでのお話なので、iPhoneで再生させたい動画があればH.264で大丈夫です。
ファイルの形式いうと、.m4v、.mp4、.movが該当します。

というわけで検証画面

上記の画像を見てもらうと分かるかと思いますが、このように後者のOS4.0ではSafariの中で動画を再生できる形になっています。もちろん音声も流れます。

※一応デモページを置いておきますが、もちろんそれぞれの環境がないと再現されませんのでご注意ください。
http://dl.dropbox.com/u/468280/iphonedev/media/video.html

ちなみに冒頭でも少し書きましたが、OS3.xであってもQuicktimeが起動する形での再生は可能なので、HTMLをそれぞれのバージョン用に書き換えたりといったことは不要です。

そしてiPadではどうなの？

iPadではさすがに解像度も大きいこともあり、普通にobject要素で書いてもSafari上で再生できるようになっています。

まとめ

PC向けのサイトでは動画コンテンツを扱うサイトも多く、うまく使えば製品・サービスの魅力を伝える良いコンテンツになります。
現状でも動画をページ内に置くことは可能ですが、video要素には今回解説したような埋込ができる・できないという話だけではなく、CSS3、Javascript、APIを利用して色々なカスタマイズができます。
残念ながら見送られたFlash for iPhone（iPad）の代替と成り得るかどうかはわかりませんが、すくなくともiAdのNikeの広告のような面白いコンテンツをつくることができるうのは開発者としては楽しみに感じています。

• HTML5だけでiPhoneアプリをつくる
• WordPressをiPhoneに最適化するプラグイン
• iPhone向けサイト構築 基礎文法最速マスター
• iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編）
• HTML5を今すぐ使うためのコツや情報をまとめてみました

Fireworksをもっと効率的に使いたい！
もっと便利につかえる方法はないの？と思ったことありませんか。

そんなときにはコマンドを使ってみるのはいかがでしょうか。
使いこなすと様々な作業を効率化でき、作業コストを削減することができます。

でも、コマンド機能を聞いたことない、知ってるけどあんまり使ったことない
という方もいらっしゃると思います。

そこで、今回はFireworksにデフォルトではいっているコマンドと
他サイト様で公開されているコマンドを紹介していきたいと思います。

コマンドってなんだろう？

コマンドとはFireworksの作業を便利にしてくれるスクリプトです。
細かい動作をひとつずつ登録して自動処理してくれます。

コマンドを使うと手作業で時間がかかっていた作業が効率化できたり、
Fireworksでおこなった作業を保存して自分以外の人と共有できます。

コマンドってどうやって使うの？

コマンドの使い方は「ツール」→「コマンド」から
使いたいコマンドを選択してクリックするだけで使えます。
（デフォルトで何種類かはいっています）

ダウンロードしたファイルを使う場合は
「C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\Commands」（環境によってパスが違うので、確認してください）
の中にファイルをいれて、Fireworksを再起動してください。

Firewors CS4 のデフォルトのコマンド

「ツイストアンドフェード」

オブジェクトをツイストしたりフェードする処理を
おこないます。効果を多用することでおもしろいものが作れます。

「スクリーンショットを撮影」

Fireworksカンバス内の好きな範囲を指定して、
スクリーンショットとして保存することができます。

簡単に他の部分にスクリーンショットを貼り付けるときに使えます。
マスクをかけたりするほどでもないときは簡単に加工できるので便利です。

「テキスト挿入」

ダミーテキストをいれることができます。
デフォルトのダミーテキストは英語です。

ダミーテキストを変更したい場合は「C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\Commands\Text\Lorem ipsum.jsf」
の9行目の「""」で囲まれている文字列を変更したい文字列に変更してください。

公開されているコマンド

Fireworksでくずれた角丸を元通りにするコマンド

角丸矩形を拡大縮小でくずれた角丸を直してくれるコマンドを提供されています。
これは便利！作業効率アップです。

【Fireworks】スライスに一括で連番をつけてくれるコマンド

スライス指定した箇所を連番で書き出すコマンドを紹介されています。
多くの画像を連番で書き出すとき便利です。

Adobe Fireworks のコマンドで Light Effect をトレース。コマンドの雛形にも使えます。

クオリティの高いエフェクトを作成するコマンドを提供されています。
コマンドでこんなこともできるんだということが体感できます。

こんな風に色々便利なことができるので、
まずは1度コマンドを使ってみてはどうでしょう。

そして、Fireworksのコマンド機能を使いこなして、
ぜひ作業効率アップをおこなってみてはいかがでしょうか。

• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• FireworksCS4が重い・固まる現象を改善する方法
• 自動化のすすめ（FireworksCS3バッチ処理編）
• 簡単作業でスピードアップ！パフォーマンスアップまとめ

EC studioの主要なサービスを集計して
2009年度のブラウザアクセスの平均の割合をまとめてみました。

サイトのブラウザ動向を把握してると、デザインやコーディングを
ブラウザごとに違った方法でアプローチすることができます。

今回は2009年度のブラウザ動向を確認し、
今後どのような傾向になっていくのかを予想したいと思います。

1ヶ月約1万セッション以上のサイトを対象にして、
2009年度全体と上半期（2009/01/01～2009/06/30）、
下半期（2009/07/01～2009/12/31）別にまとめてみました。

データは「ウェブマスター向けサイト」、「一般ユーザー向けサイト」
に分けて記載しています。

以下のブラウザは省略して記載しています。
Internet Explorer = IE

また、Internet Explorerのみバージョン別に記載しています。

ウェブマスター向けサイト

参照サイト…HP売上プラス、SEO対策ドットコム、SEO対策キーワード辞典など

一般ユーザー向けサイト

参照サイト…ESET Smart Security、ESET NOD32アンチウイルス、マインドマップラスなど

2009年度ブラウザ動向まとめ

Internet Explorer6, 7が徐々に減少傾向

Internet Explorer6, 7が減少していることがわかります。
Internet Explorer8やFirefoxなど他のブラウザを選択していることがわかります。

Internet Explorer8の割合が増加傾向

Internet Explorer8が上半期と下半期でブラウザの割合が非常に異なっています。
下半期でInternet Explorer8が顕著に増加していることがわかります。
「Windows7」が2009年の10月に発売したことが影響していると思われます。

FirefoxやChromeなどのブラウザが増加傾向

全体的にFirefoxやChromeなどのブラウザが増加しています。
特にウェブマスター向けサイトではFirefoxが全体の約1/4を占めています。

2010年度ブラウザ動向予想

現状ではまだInternet Explorer6は約1/4を占めていますが、
2010年度ではさらに割合が少なくなっていき、
Internet Explorer8やFirefoxなど他のブラウザが占める割合が
増えてくることが予想されます。

弊社の指針としましては、
現在のInternet Explorer6の割合も考慮にいれながら、
見た目がすべて他のブラウザとまったく一緒ではなく、
最低限情報が伝わるような制作方法にシフトしていってます。

新しいブラウザでの対応に向けて
Internet Explorer6のハックを使わないようにしたり、
CSS3を使うように取り組みを進めています。

上記は弊社サイトの場合ですので、
みなさんも自社で運営しているサイトを調べてみてはいかがでしょうか。
そして、制作方針を見直してみてはいかがでしょうか。

ブラウザについての考え方やCSS3については以下の記事を参考にしてください。
ターゲットブラウザを選定して効率化！サイト制作時間短縮術
[CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child

• 簡単作業でスピードアップ！パフォーマンスアップまとめ
• 出た！オンラインかつ無料でブラウザチェックができる「BrowserLab（ブラウザーラボ）」
• 企業のTwitterページのデザインをまとめてみた
• 【コーダー必見】IE Tester(IE5.5 IE6 IE7 IE8 で確認できるツール) を使ってみた – 検証サンプル付き
• Web Directions East 「パフォーマンスアップのウェブ技術 WDE-Express」

こんな現象がおこったことはありませんか？
しかも、一度ぼけるとCtrl+zでも元に戻らないという、やっかいなバグ。

今回は、
「整列つかってもアウトラインがぼけない！」
そんな方法をご紹介します。

アウトラインがぼけてしまうバグは、「中央揃え（センター寄せ）」を使うと
高確率でおこります。
そのため「中央揃え（センター寄せ）」の使い方を工夫するだけで
バグに遭遇しなくなります。

ぼけてしまう整列の方法

整列させたいオブジェクト達をいきなり
「中央揃え（センター寄せ）」すると高確率でぼけてしまいます。

ぼけない整列の方法

整列させたいオブジェクト達を、「下揃え」または「上揃え」に整列させます。
その後、オブジェクトを「中央揃え（センター寄せ）」にします。
するとアウトラインがぼけません！

アウトラインのやり方を少し工夫するだけで
ラインがぼけるのを防止できます。

もし、ぼやけてしまった場合は下記の記事をご参照くださいね。
【参照記事：知ってるようで、実は知らない?！ Fireworksの小技】

FireworksCS5では改善されることを祈りつつ、
改善されるその日まで、是非お試しください。

• 効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化
• FireworksCS4が重い・固まる現象を改善する方法
• 自動化のすすめ（FireworksCS3バッチ処理編）
• 自動化のすすめ（Fireworks CS4 コマンドでより効率化！）

こんなとき、リアルタイムでWebページを編集できたら便利ですよね。

そこで紹介するのが今回の方法です。
ブラウザのアドオンやエクステンションのインストールは一切なし！
ブラウザに左右されない！（Firefox、IE8、Chrome、Opera共通）

そんな便利な方法をご紹介します。

お気に入りに追加してWebページを編集する方法

下記のテキストリンクを「ドラッグ」し、
ブラウザのツールバーに「ドロップ」します。
このページを編集する

ツールバーに入った「このページを編集する」のブックマークをクリック。

すると、開いているページが編集できるようになります。
テキストや画像を選択し、「Delete」や文字を入力してみてください。

なんということでしょう。
編集したとおりに、Webページが変わります。

アドレスバーに入力してWebページを編集する方法

もう一つの方法は、直接ブラウザのアドレスバーに上記の文字列を入力する方法です。

そして、入力後エンターを押してください。

すると、さきほどと同じように編集が可能になります。

機能は、Firefoxのアドオン「PageHacker」と同じです。
【参照記事：画面レビューにめちゃくちゃ便利なFireFoxプラグイン】
でも、「PageHacker」と違ってインストールが不要、
Firefox以外でも使えるので、さらに便利！
是非お試しあれ。

• 効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• FireworksCS4が重い・固まる現象を改善する方法
• 誤字脱字を事前に減らして効率化！
• 自動化のすすめ（フォトショップのバッチ処理編）

Zen-Codingではあらかじめ多くのHTML/CSSのショートコード、スニペットが登録されていますが、Zen-Codingを構成するファイルを少し修正するだけで、オリジナルのコードを登録することができます。
JavaScriptを触ることにはなりますが、JavaScriptを知らなくても大丈夫なぐらい簡単です。

zen_setting.jsに秘密がある

Zen-Codingをダウンロードすると、対応アプリケーションごとのファイルをダウンロードすることができますが、そのダウンロードしたファイルの中にはzen_setting.jsというファイルが存在しています。
実はその中に、省略コードやスニペットがすべて書き込まれています。
※アプリケーションによって、違う名前で存在する場合があります。
Textmateの場合は zen_settings.py になります。

このファイルの中に自分独自の記述を書き込んだり、既存のものを修正すればカスタマイズができます。

コードの種類

書込・修正ができる内容には2種類あります。

snippets・・・
スニペット。長い・複数行記述の場合はこちら。
abbreviations・・・
省略コード。短い・一行記述の場合はこちら。また特殊な書き方をすることで、省略コードの省略コード、みたいな書き方ができます。

上記は結構荒い説明ではありますが、そういった感覚で大丈夫です。
今回は前者のスニペットとして追加する方法を解説します。

よく使うコードをスニペット登録する

あまりHTMLでスニペット化をする例は少ないので、CSSでのスニペットを追加します。

zen_setting.js 21行目から

これがCSSのスニペットが記述されているところです。
スニペットとして定型文登録したい内容を追加しましょう。

例えば、使われる頻度が多いであろう「Clearfix」のコードを登録します。
下記はClearfixのCSSサンプルです。

※コードの参照元：http://kennsu.jp/2008/11/cssclearfix.html

このコードを登録したければ、下記コードをzen_setting.js の492行目と493行目に差し込みます。

このような手順です。あとは CSSファイル内で
clearfixと書いて、Ctrl+Eすれば、コードが展開されます。

あまりJavaScriptなどに触れない人向けに、上記例で補足コメントをつけていますが、各行末の,（半角コンマ）の付け忘れや、最後の行には付けない、という文法にも気を付けるようにしましょう。

Aptanaの人はちょっと待った！

Aptanaの場合、親切にも「my_zen_setting.js」という独自のコードを追加するためのjsファイルが用意されています。
前述までの例は、直接元ファイルのソースを修正することになるので、それよりは別で管理されたファイルに書き込む方が問題は少ないですね。
書き方については、zen_setting.js を修正するのと同じです。

サンプルとして、僕のmy_zen_setting.jsの内容を書いておきます。
ダウンロードもできるようにしておくので、Aptanaを使っている方はそれをいれても良し、Aptana以外の方もzen_setting.jsを修正する参考にしてください。

内容は下記です。

• CSS:clearfix
• CSS:opacity（透過度指定スタイル）
• HTML:jQuery 1.4.2
• HTML:jQuery 1.3.2
• HTML:Swfobject
• HTML:Chrome Frame
• HTML:html5.js
• HTML:Microformats hCard
• HTML:Microformats hReview

my_zen_setting.js

my_zen_setting.js をダウンロードする

まとめ

Zen-Codingをさらに活用するために、是非これらの設定をおこなってみてください。
おすすめのHTML/CSSスニペットや省略コードがあれば取り入れていきたいので、よければブログへのコメントかTwitterまでメッセージをください。

• 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた
• Zen-Codingのショートカットをまとめてみました