EC studio デザインブログ http://designblog.ecstudio.jp EC studio 企画デザインブログ Mon, 08 Mar 2010 08:39:08 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 ブラウザ上でWebページをリアルタイム編集できる簡単な方法 http://designblog.ecstudio.jp/tool/page_editor.html http://designblog.ecstudio.jp/tool/page_editor.html#comments Thu, 04 Mar 2010 10:58:19 +0000 端山 佳枝 http://designblog.ecstudio.jp/?p=1423 「テキスト修正してサーバーにアップしたけど、今度は改行がおかしい・・・
　また作り直して、アップしなおさないと・・・」
「このテーブル、項目が増えてもレイアウトが崩れないかなぁ・・・
　検証面倒くさいなぁ・・・」
「打ち合わせ中に、この画像を削除したパターンが見たいっていわれけど・・・
　今HTMLファイルもFTP情報もないしなぁ・・・」

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

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

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

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

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

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

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

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

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

テキスト表示
JAVASCRIPT:
  1. javascript:document.body.contentEditable%20=%20'true';%20document.designMode='on';%20void%200

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

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

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

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


関連した記事： ]]> http://designblog.ecstudio.jp/tool/page_editor.html/feed 0 Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法 http://designblog.ecstudio.jp/htmlcss/my-zen-coding.html http://designblog.ecstudio.jp/htmlcss/my-zen-coding.html#comments Tue, 02 Mar 2010 15:00:04 +0000 谷 拓樹 http://designblog.ecstudio.jp/?p=1445 Zen-CodingでHTML/CSSコーディング作業の効率があがった人が増えてきたのではないかと思いますが、そこでさらにカスタマイズすることで効率化アップする方法を紹介します。

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行目から

テキスト表示
JavaScript:
  1. 'css': {// 21行目
  2.         'snippets': {
  3.             "@i": "@import url(|);",
  4. // ~省略~~~~~~~~~~~~~~~~~~~~~~~~~~
  5.             "pgba:l": "page-break-after:left;",
  6.             "pgba:r": "page-break-after:right;",
  7.             "orp": "orphans:|;",
  8.             "wid": "widows:|;"// 492行目
  9.         }// 493行目

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

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

テキスト表示
CSS:
  1. .clearfix {
  2.      zoom: 1;/*for IE 5.5-7*/
  3. }
  4. .clearfix:after {/*for modern browser*/
  5.      content: “.”;
  6.      display: block;   
  7.      height: 0px;
  8.      clear: both;
  9.      line-height: 0;
  10.      visibility: hidden;
  11. }

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

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

テキスト表示
JavaScript:
  1. "wid": "widows:|;",// ←の","を忘れないようにする
  2.             'clearfix': '.clearfix {\n' +
  3.                     '   zoom: 1;/*for IE 5.5-7*/\n' +
  4.                     '}\n' +
  5.                     '.clearfix:after {/*for modern browser*/\n' +
  6.                     '   content: “.”;\n' +
  7.                     '   display: block;\n' +
  8.                     '   height: 0px;\n' +
  9.                     '   clear: both;\n' +
  10.                     '   line-height: 0;\n' +
  11.                     '   visibility: hidden;\n' +
  12.                     '} '// 末行に","は不要

このような手順です。あとは 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

テキスト表示
JavaScript:
  1. var my_zen_settings = {
  2.     'css': {
  3.         'snippets': {
  4.             'clearfix': '.clearfix {\n' +
  5.                     '   zoom: 1;/*for IE 5.5-7*/\n' +
  6.                     '}\n' +
  7.                     '.clearfix:after {/*for modern browser*/\n' +
  8.                     '   content: ".";\n' +
  9.                     '   display: block;\n' +
  10.                     '   height: 0px;\n' +
  11.                     '   clear: both;\n' +
  12.                     '   line-height: 0;\n' +
  13.                     '   visibility: hidden;\n' +
  14.                     '} ',
  15.             'opacity': 'filter: alpha(opacity=50);\n' +
  16.                     '-moz-opacity:0.5;\n' +
  17.                     'opacity:0.5;'
  18.         }
  19.     },
  20.     'html': {
  21.         'snippets': {
  22.             'lib:jq14': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>',
  23.             'lib:jq13': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>',
  24.             'lib:swf': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js"></script>',
  25.             'lib:cf': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.js"></script>',
  26.             'lib:swf': '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js"></script>',
  27.             'lib:html5': '<!--[if IE]>\n\t<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>\n<![endif]-->',
  28.             'mf:hc': '<div class="vcard">\n' +
  29.                 '   <a class="url" href="http://www.example.com/" title="family-namelast-name">\n' +
  30.                 '      <img style="float:left; margin-right:4px" src="photo" alt="family-namelast-name photo" class="photo" />\n' +
  31.                 '      <span class="fn n">\n' +
  32.                 '         <span class="family-name">family-name</span>\n' +
  33.                 '         <span class="given-name">last-name</span>\n' +
  34.                 '      </span>\n' +
  35.                 '   </a>\n' +
  36.                 '   <a class="email" href="mailto:email" title="send to family-namelast-name">email</a>\n' +
  37.                 '   <div class="adr">\n' +
  38.                 '      <span class="postal-code">123-4567</span>\n' +
  39.                 '      <span class="region">region</span>\n' +
  40.                 '      <span class="locality">locality</span>\n' +
  41.                 '      <span class="street-address">street-address</span>\n' +
  42.                 '   </div>\n' +
  43.                 '   <div class="tel">tel</div>\n' +
  44.                 '</div>',
  45.             'mf:hr': '<div class="hreview">\n' +
  46.                 '   <span class="item">\n' +
  47.                 '      <span class="fn">Name</span>\n' +
  48.                 '   </span>\n' +
  49.                 '   <span class="rating">3.5</span>\n' +
  50.                 '   <span class="reviewer">Smith</span>\n' +
  51.                 '   <span class="dtreviewed">2009-01-06</span>\n' +
  52.                 '   <span class="summary">"Delicious."</span>\n' +
  53.                 '</div>'
  54.         }
  55.     }
  56. };

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

まとめ

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


関連した記事： ]]> http://designblog.ecstudio.jp/htmlcss/my-zen-coding.html/feed 0 Fireworksを使いこなそう！ワンクリックでパスをアウトライン化 http://designblog.ecstudio.jp/tutorial/fireworks-outline.html http://designblog.ecstudio.jp/tutorial/fireworks-outline.html#comments Fri, 26 Feb 2010 13:31:10 +0000 端山 佳枝 http://designblog.ecstudio.jp/?p=1379 Fireworksの「パス」ウィンドウには、作業効率をアップさせる機能がたくさん！
でも、正直たくさんありすぎて機能がいまいちわかりにくい！！

そこで自分のマニュアルもかねて、デザインブログで
少しずつ使い切れてない機能を紹介していきたいと思います。

今回は、「ワンクリックでパスをアウトライン化」と
その応用として「オシャレな文字づくり（テキストの縁取り）」の方法を紹介します。

08

ワンクリックでパスをアウトライン化

オブジェクトをポイント無しの状態で選択。
01

そして「パス」ウィンドウの「ストロークを塗りに変換」をクリック。
02

たったこれだけ！
アウトラインをとる前に、パスの線をお好みの太さにしておきましょう。

【応用】オシャレな文字づくり（テキストの縁取り）

テキストを打ち込みます。
03

ツールバー「テキスト」→「パスに変換」を選択。
04

そのあと、線と塗りを逆転させ塗りを透明にします。
05

線の太さをお好みに調整して、「パス」→「ストロークを塗りに変換」を選択。
07

するとテキストの縁がとれます。
あとは縁にグラデーションや装飾をつければ完成！
08

まだまだ「パス」ウィンドウには、作業効率をあげる機能がたくさん！
今後も引き続きご紹介していきます。


関連した記事： ]]> http://designblog.ecstudio.jp/tutorial/fireworks-outline.html/feed 0 Zen-Codingのショートカットをまとめてみました http://designblog.ecstudio.jp/htmlcss/zen-coding-shortcut-key.html http://designblog.ecstudio.jp/htmlcss/zen-coding-shortcut-key.html#comments Mon, 22 Feb 2010 13:22:15 +0000 谷 拓樹 http://designblog.ecstudio.jp/?p=1354 前回の記事ではZen-Codingの導入方法について解説しました。

今回はZen-Codingの機能とそれを実行するためのショートカットの解説をします。
※2010/02/22現在の最新バージョン「Zen Coding for Aptana v0.6.0.1」を対象にしています。

なおAptana（Eclipse）の場合だとAptanaの方の機能に多くのショートカットが割り当てられているので、利用する環境によってはショートカットを変更する必要があります。Zen-Codingのデフォルトのショートカットが機能しない場合は、記事最後にまとめる変更方法を参考にしてください。

Expand Abbreviation（省略コードの展開）

Win：Ctrl+E
mac：Command+E

Zen-Codingの主な機能のひとつです。

テキスト表示
HTML:
  1. div#content>ul#global.nav>li*3>a

こちらのサンプルの場合、末尾のaの後ろにフォーカスして、ショートカットを実行してください。
すると、

テキスト表示
HTML:
  1. <div id="content">
  2.     <ul id="global" class="nav">
  3.         <li><a href=""></a></li>
  4.         <li><a href=""></a></li>
  5.         <li><a href=""></a></li>
  6.     </ul>
  7. </div>

こうなります。
省略コードはCSSセレクタの書き方がわかっていると、すぐに書けるようになると思います。
#がid、
.がclass、
>が子供の要素というような感じです。
またサンプルのように*はその後ろに数字をつけることで、その数だけ行が展開されます。

このサンプル以外にも色々な書き方はありますが、今回は以上で。

Wrap with Abbreviation（省略コードで包括）

Win：Ctrl+Shift+A
mac：Command+Shift+A

要素を省略コードでマークアップします。

例えば下記のようにマークアップされていないリストのような要素があった場合、

テキスト表示
HTML:
  2.     りんご
  3.     みかん
  4.     ばなな
  5. </div>

divの中にフォーカスして実行。
するとダイアログが出ますので、そこに省略コードを記述。
例えば下記のように書きます。

テキスト表示
HTML:
  1. li*>a

すると、

テキスト表示
HTML:
  2.     <li><a href="">りんご</a></li>
  3.     <li><a href="">みかん</a></li>
  4.     <li><a href="">ばなな</a></li>
  5. </div>

こうなります。素晴らしいですね。

Balance Tag Inward/Outward（要素の内側・外側を選択）

Balance Tag Inward

Win：Ctrl+Shift+D
mac：Command+Shift+D

Balance Tag Outward

Win：Ctrl+D
mac：Command+D

実行するとフォーカスした箇所の要素から、
Inwardは内側の要素を、
Outwardは外側の要素を選択します。

編集中の要素の開始タグと終了タグを認識するのに便利です。

[2010/02/23 追記]
ソースコードにもよるかもしれないですが、きれいに要素を認識してくれない場合があるようです。
もしかしたら仕様が少し違うかもしれないので、こちらの機能について詳しい方がいらっしゃったらコメントなどいただけたら嬉しいです。

Go to Next/Previous Edit Point（編集箇所への移動）

Next Edit Point

Win：Alt+Ctrl+]
mac：Option+Control+]

Previous Edit Point

Win：Alt+Ctrl+[
mac：Option+Control+[

実行すると空の属性や空の要素、空行を移動することができます。

Update <img> Size（画像サイズの取得）

Win：Ctrl+I
mac：Command+I

imgのsrc属性で指定したファイルのサイズを取得します。

テキスト表示
HTML:
  1. <img src="sample.jpg" alt=""/>

これが、

テキスト表示
HTML:
  1. <img src="sample.jpg" alt="" width="185" height="300" />

このように実行すればサイズが取得されます。
img要素内にフォーカスして実行すればいいのですが、画像パスが正しくないと取得されません。
パスは相対パス、絶対パスの両方に対応しています。

Merge Lines（複数の要素を1行にする）

Win：Ctrl+L
mac：Control+L

テキスト表示
HTML:
  2.     <li class="list1"></li>
  3.     <li class="list2"></li>
  4.     <li class="list3"></li>
  5. </ul>

こういう複数行に展開された要素があった場合に、まとめたい要素を選択状態にして実行すると、

テキスト表示
HTML:
  2.     <li class="list1"></li><li class="list2"></li><li class="list3"></li>
  3. </ul>

このようになります。

Remove Tag（タグの削除）

Win：Ctrl+Shift+I
mac：Command+Shift+I

これは要素の内容をそのままに、タグだけを削除します。
対象のタグにフォーカスして実行すれば削除されます。

テキスト表示
HTML:
  1. <div id="title"><span><a href="" class="next"></a></span></div>

こちらの例の場合、spanにフォーカスして実行すると、

テキスト表示
HTML:
  1. <div id="title"><a href="" class="next"></a></div>

このようになります。

Split/Join Tag（タグの結合・分解）

Win：Ctrl+U
mac：Command+U

テキスト表示
HTML:
  1. <div class="Split"></div>

このような記述の場合に実行すると

テキスト表示
HTML:
  1. <div class="Split" />

このようになります。
逆に後者で実行すると、前者のように分解されます。

個人的にはちょっと利用頻度は少ないかなと思います。

Toggle Comment（コメントアウトの実行・解除）

Win：Ctrl+Shift+/
mac：Command+Shift+/

フォーカスしている要素をコメントアウトします。

以上がZen-CodingのWikiで解説されている主な機能となります。
http://code.google.com/p/zen-coding/wiki/Actions

紹介したショートカットで機能しない場合は？

冒頭に書いたよう、Aptana（Eclipse）の場合にはすでに色々キーが設定されてしまっていることが多いので、設定画面から変更するようにしましょう。
設定変更は2つあります。

  • Aptana側を変更する
  • Zen-Coding側を変更する
Aptana側を変更する場合

「ウインドウ」＞「設定」＞「一般」＞「キー」

ここですべてのショートカットキーが設定されているので、紹介したキーに該当したコマンドをアンバインドしてください。
設定後は再起動しましょう。

Zen-Coding側を変更する

普段から使っているキーをZen-Codingのために変えたくないという人は、それぞれのJavascript上の記述を編集することで、ショートカットを変更できます。

例えば Expand Abbreviation の場合であれば、scriptsフォルダにあるExpand Abbreviation.jsの冒頭5行目あたりを編集すればOKです。

テキスト表示
JavaScript:
  1. * Key: M1+E

これがデフォルトの記述なのですが、このM1というのはAptana（Eclipse）で定義されているキーです。
Windowsの場合はCtrl、Macの場合はCommandに該当します。
ここで定義できるショートカットキーなどは下記のページを参考にしてください。

Eclipse Monkey scripting with Ruby - Aptana

まとめ

これらを完全に使いこなすまでには慣れが必要ですが、HTML/CSSを扱える人であればすぐに慣れるでしょう。
Aptanaを中心に紹介していますが、キーは違えど他のアプリケーションでも活用できるのでぜひ試してみてください。


関連した記事： ]]> http://designblog.ecstudio.jp/htmlcss/zen-coding-shortcut-key.html/feed 0 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html#comments Mon, 22 Feb 2010 03:37:55 +0000 谷 拓樹 http://designblog.ecstudio.jp/?p=1324 新規 > プロジェクト） 作成した「zen-coding」プロジェクトに「scripts」というフォルダを作ります。 そしてその中に先程ダウンロードしたファイル一式を格納します。 ※Windowsの場合、「__MACOSX」というフォルダも存在するかもしれないですが、それは不要です。 するとこんな感じになりますね。 これだけで完了です。簡単ですね。 ここまでできたら、一度Aptana（Eclipse）を再起動しましょう。 少しだけ使い方をレクチャー ここまでの手順を終えたら、AptanaでHTMLファイルを作成し、下記のような書き方を試してみてください。 一例ですが、 テキスト表示 HTML: div#content>ul#global.nav>li*3>a こちらのような一行の末尾で、「Ctrl+E」を押してみてください。 （Macの場合は「Command+E」だと思います） すると、 テキスト表示 HTML: <div id="content">     <ul id="global" class="nav">         <li><a href=""></a></li>         <li><a href=""></a></li>         <li><a href=""></a></li>     </ul> </div> 上記のようなコードが展開されましたか？ Zen-Codingではこのように、省略して書いたコードを構造的なHTMLに変換してくれます。 [2010/02/22 追記] 環境によって、Ctrl+Eでは実行できません。その場合の対処は次の記事にて紹介しています。 このような技が他にも色々あるのですが、そちらは記事最後に詳しい記事リンクをまとめますので今回は導入編として修正すべき箇所ひとつ追加説明しておきます。 日本語向けにスクリプトの一部を修正をする デフォルトではHTMLが英語圏向けの内容になっています。 テキスト表示 HTML: <!DOCTYPE html [...]]]> 最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？
Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。
独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。

Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。
※音が出ますのでご注意ください。

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo

一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。

Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studioでの設定の仕方を説明します。
※弊社の場合は Eclipseのプラグインとしてインストールしていますが、それでも問題はありません。

[追記：2010/02/24]
AptanaプラグインをつかっていないEclipseでも導入できるようです。（otchyさんありがとうございます。）
http://www.otchy.net/20100224/zen-coding-for-general-eclipse/

※導入後の使い方などは次の記事を参照ください。
Zen-Codingのショートカットをまとめてみました
Zen-Codingでさらにコーディングを1.5倍くらい速くするためのカスタマイズ方法

Zen-Codingのダウンロード

Downloads - zen-coding - Project Hosting on Google Code
http://code.google.com/p/zen-coding/downloads/list

色々なテキストエディタ、オーサリングツール向けに提供されていますが、今回はfor Aptanaを選択。
（2010/02/19現在の最新は Zen Coding for Aptana v0.6.0.1）

ファイルを展開すると、中には様々なjsファイルがあると思います。
これがZen-Codingの中身です。

AptanaにZen-Codingのプロジェクトを作る

Aptana（またはEclipse）で新規のプロジェクトを作ります。
プロジェクト名は何でも良いですが、今回は「zen-coding」とします。

（ファイル > 新規 > プロジェクト）

作成した「zen-coding」プロジェクトに「scripts」というフォルダを作ります。

そしてその中に先程ダウンロードしたファイル一式を格納します。
※Windowsの場合、「__MACOSX」というフォルダも存在するかもしれないですが、それは不要です。

するとこんな感じになりますね。

これだけで完了です。簡単ですね。
ここまでできたら、一度Aptana（Eclipse）を再起動しましょう。

少しだけ使い方をレクチャー

ここまでの手順を終えたら、AptanaでHTMLファイルを作成し、下記のような書き方を試してみてください。

一例ですが、

テキスト表示
HTML:
  1. div#content>ul#global.nav>li*3>a

こちらのような一行の末尾で、「Ctrl+E」を押してみてください。
（Macの場合は「Command+E」だと思います）

すると、

テキスト表示
HTML:
  1. <div id="content">
  2.     <ul id="global" class="nav">
  3.         <li><a href=""></a></li>
  4.         <li><a href=""></a></li>
  5.         <li><a href=""></a></li>
  6.     </ul>
  7. </div>

上記のようなコードが展開されましたか？
Zen-Codingではこのように、省略して書いたコードを構造的なHTMLに変換してくれます。

[2010/02/22 追記]
環境によって、Ctrl+Eでは実行できません。その場合の対処は次の記事にて紹介しています。

このような技が他にも色々あるのですが、そちらは記事最後に詳しい記事リンクをまとめますので今回は導入編として修正すべき箇所ひとつ追加説明しておきます。

日本語向けにスクリプトの一部を修正をする

デフォルトではHTMLが英語圏向けの内容になっています。

テキスト表示
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5.     <title></title>
  6. </head>
  7. ～省略～
  8. </html>

xml:lang="en"とcharset=UTF-8"のところですね。
こちらを修正するには、先程「scripts」フォルダにあるzen-setting.jsというファイルを開き、その中の11行目あたりにある記述を書き換えてください。

テキスト表示
JavaScript:
  1. 'variables': {
  2.     'lang': 'en',
  3.     'locale': 'en-US',
  4.     'charset': 'UTF-8',
  5.     'profile': 'xhtml',

↓

テキスト表示
JavaScript:
  1. 'variables': {
  2.     'lang': 'ja',
  3.     'locale': 'ja',
  4.     'charset': 'UTF-8',
  5.     'profile': 'xhtml',

書き換えた後は再起動すれば反映されます。
今回はecからjaへの修正例ですが、必要があればcharsetも変更してください。

まとめ

以上がAptanaに導入するための手順と設定です。
今回の記事タイトルに偽りなく、マスターすると本当にコーディングのスピードがあがります。

実際に導入して使ってみよう！という方のためにマニュアルや参考リンクをまとめておきます。

基本記法

Zen Actions
http://code.google.com/p/zen-coding/wiki/Actions
こちらについては次の記事で解説しています。
Zen-Codingのショートカットをまとめてみました

Zen HTML Elements
http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn

Zen HTML Selectors
http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

Zen CSS properties
http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

Wordpressプラグイン

WordPressにZen Codingを導入するプラグイン「WP Zen-Coding」 - Rewish
http://rewish.org/wp/zen_coding
Wordpressの投稿画面でZen-Codingが使えるようになります。

MovableTypeプラグイン

MT Zen-Coding - Movable Type プラグイン
http://www.tinybeans.net/blog/download/mt-plugin/mt-zen-coding.html
MovableTypeの記事投稿画面やテンプレート編集画面などでZen-Codingが使えるようになります。

その他

gaspanik weblog
http://blog.gaspanik.com/
こもりさんについては、不定期でライブコーディングを
Ustreamでおこなわれています。
実際に見てみると感動ですよ！

基本記法について、H20スペースのたにぐちさんも分かりやすくまとめられています。
Zen-Condingの基本文法をおさらい
http://h2o-space.com/blog/2002


関連した記事： ]]> http://designblog.ecstudio.jp/htmlcss/zen-coding-aptana.html/feed 6 2010年の海外のウェブデザイントレンド http://designblog.ecstudio.jp/htmlcss/2010-webdesign-trend.html http://designblog.ecstudio.jp/htmlcss/2010-webdesign-trend.html#comments Thu, 18 Feb 2010 10:19:57 +0000 谷 拓樹 http://designblog.ecstudio.jp/?p=1310 WebDesignerWallより、2010年のデザイントレンド予測の記事がありましたので、その中身を見ていきたいとおもいます。

「2010年のウェブデザインはより面白く、実験的なものが増える」とのこと。
CSS3やHTML5への注目が集まり、新しいビジュアル・機能を持ったウェブデザインを試しているサイトが増えてきています。
ビジュアルの傾向でいいますと、手書きスケッチ、大きな背景のサイトというのは減少傾向にあり、一方でセリフ書体のフォントを使ったデザインや、テクスチャーを使ったサイトが人気のようです。

またCSS3（と、実装してくれているブラウザ）のおかげで、角丸やRGBAプロパティを使った半透明表現、ドロップシャドウ効果などもたくさん簡単に使えるようになってきています。
そして特に海外では顕著ですが、スマートフォン向けのデザインを提供するサイトも増えてきています。

実際にそれらのトレンドに当てはまるサイトを紹介していきます。（一部）

セリフ書体フォントのデザイン

2000年～はVersanaやArialなど、サンセリフ書体のフォントデザインが多かったのですが、2010年からはセリフ書体が注目を浴びるでしょう。

The New York Times - Breaking News, World News & Multimedia
http://www.nytimes.com/

陳 Jon Tan
http://jontangerine.com/

Sushi & Robots, by Jina Bolton
http://sushiandrobots.com/

大きなヘッダー

大きなヘッダーを取り入れたサイトはここ数年増えてきていますが、さらに人気が出そうです。

N.Design Studio | Design Blog & Portfolio
http://www.ndesign-studio.com/

Carsonified presents The Future of Web Apps Conference Miami, Florida 2010
http://carsonified.com/

Web design and CSS training, workshops and DVDs for web designers | For A Beautiful Web
http://www.forabeautifulweb.com/

Webフォントを使用

CSS3のWebFont（@font-face ）を使うことで、閲覧環境のデバイスフォントではなく、サイト側で指定したフォントで文字を表現することができます。
Typekit、Font Squirrelなど無償・有償で提供するサイトも増えています。
ちなみに欧文フォントだけでなく、日本語フォントでもオープンソースで利用できるものが増えてきています。
自由に使えるオープンソースの日本語フォント - SourceForge.JP Magazine

Elliot Jay Stocks.
http://elliotjaystocks.com/

tap tap tap
http://www.taptaptap.com/

微妙なテクスチャの背景

大きな背景画像を使ったサイトは減少傾向にあり、それに変わって増えてきているのはあまり派手ではない、地味で微妙なテクスチャを背景画像に取り入れるサイトが増えました。模様は小さいノイズのようなものや、少しグランジっぽいもの（かすれたもの）が多いです。

iSaidWhat?!
http://www.tapparatus.com/isaidwhat/

Sibling Rivalry | A Speck Brothers Wine.
http://www.siblingrivalrywine.ca/

Analog
http://analog.coop/

ミニマル、グリッドなデザイン

ミニマル、というのが日本語的に表現が難しいですが、「小さな」デザインのサイトのことです。
この「小さい」というのは単純にサイト幅が狭いというだけでなく、色や過度な装飾は抑えたシンプルなデザインも含めるようです。
このミニマルと同様に、グリッドが計算されて整列されたデザイン、余白を生かしたデザインが増えています。
ミニマルとグリッドを合わせたデザインも多い傾向にあります。

FRKT
http://www.forrykt.com/

Heartworker
http://www.heartworker.com/

screen capture
http://www.wilsonminer.com/

CSS3を取り入れる

CSSはすべてのブラウザでサポートされていないですが、多くのウェブデザイナーが実験的に自分のサイトやクライアントのサイトに取り入れています。

CSS3 アニメーション

Google ChromeまたはSafari最新版で閲覧してください、右上の円形が動きます。
他のブラウザだと静止した丸というだけで、閲覧に支障はありません。
こうした遊びのような形で取り入れるのは面白いです。
http://neutroncreations.com/blog/

角丸とドロップシャドウ
テキスト表示
CSS:
  1. .roundCorner {
  2.  -moz-border-radius: 10px; /* Firefox用 */
  3.  -webkit-border-radius: 10px; /* Webkit（Chrome,Safari用） */
  4.  border-radius: 10px; /* 半径10pxの角丸 */
  5. }
  6.  
  7. .dropShadow {
  8.  -moz-box-shadow: 0 0 4px #999; /* Firefox用 */
  9.  -webkit-box-shadow: 0 0 4px #999; /* Webkit（Chrome,Safari用） */
  10.  -box-shadow: 0 0 4px #999; /* 横方向のオフセット 縦方向のオフセット ぼかしの半径 影の色 */
  11. }

角丸とドロップシャドウはCSS3の中でも頻用されるプロパティです。
Tap Tapas
http://www.taptapas.com/

CSS-Tricks
http://css-tricks.com/

テキストシャドウ
テキスト表示
CSS:
  1. .textShadow {
  2.  -moz-text-shadow: 0 0 4px #999; /* Firefox用 */
  3.  -webkit-text-shadow: 0 0 4px #999; /* Webkit（Chrome,Safari用） */
  4.  -text-shadow: 0 0 4px #999; /* 横方向のオフセット 縦方向のオフセット ぼかしの半径 影の色 */
  5. }

テキストにドロップシャドウの効果を与えます。
使われ方としてはその言葉のとおりテキストに影を落として立体的に浮かせる効果もありますが
影の角度や色を調整すれば、文字部分がへこんでいるような効果を出すことができます。
グラデーションなどと組み合わせるとよりキレイに見えるようになります。

tweetCC | Publish & license tweets with Creative Commons
http://www.tweetcc.com/

Adii Rockstar | Creator of Rockstar Awesomeness
http://adiirockstar.com/

半透明効果を使う

CSSにより対象の要素の透過度を調整できます。
RGBAプロパティまたはOpacityプロパティを使うとこの効果が表現できますが、OpacityよりもRGBAにより透明表現をするケースが多いです。
理由はOpacityの場合だと、指定した要素だけでなく、包括する子要素にも影響してしまうので、背景色だけを透過したい！という場合はRGBAを使うのが好ましいです。

テキスト表示
CSS:
  1. .alpha {
  2.  background: rgba(255,255,255,0.75); /* 白色,75% */
  3. }

モバイル向けデザイン

2007年にiPhoneが世の中に出てから、多くの人がモバイル向けデザインについての話題を取り上げました。現在ではiPhoneなどのスマートフォンはCSSやJavaScriptをサポートしているので、PC向けのデザインよりも未来のデザインを作ることができます。多くのサイトがこうしたスマートフォン向けのデザインを提供し始めています。
※iPhoneをお持ちの方は実際にiPhoneでアクセスすると良いでしょう。

Social Media News and Web Tips – Mashable – The Social Media Guide
http://mashable.com/

Hello | Erskine Design（モバイル版URL）
http://m.erskinedesign.com/

Nike Lab
http://www.nike.com/nikelab/

まとめ

2010年はCSS3やHTML5といった新技術を取り入れて新しい表現を追求していくWebデザイナーが多くいるようです。
CSS3を活用すれば、それ以前よりもHTMLのコード量も減ったり、効率的にコードもかけます。装飾表現の多くもCSSで済みますから、わざわざPhotoshopなどを立ち上げる必要などもなく、ワークフロー全体でみても効率が上がるのではと思います。
対応していないブラウザがあるから仕事でできない！という人は個人ブログなどででも、こうしたデザイントレンドや技術を取り入れていきましょう。

参照元記事：
Design Trends (Predictions) in 2010
http://www.webdesignerwall.com/trends/design-trends-predictions-in-2010/


関連した記事： ]]> http://designblog.ecstudio.jp/htmlcss/2010-webdesign-trend.html/feed 0 iPhone向けサイト構築 基礎文法最速マスター http://designblog.ecstudio.jp/htmlcss/iphone-master.html http://designblog.ecstudio.jp/htmlcss/iphone-master.html#comments Mon, 08 Feb 2010 00:30:32 +0000 谷 拓樹 http://designblog.ecstudio.jp/?p=1273 弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。

基礎編

対象ブラウザはMobileSafariです

レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くして見るのも良いですし、できれば記事の最後で紹介するシミュレータを使うことをおすすめします。

話題のHTML5で書けます

宣言など簡素化できます

テキスト表示
HTML:
  1. <!doctype html>
  4.     <meta charset="UTF-8">
  5.     <title>タイトル</title>
  6.   </meta></head>
  7.   <body></body>
  8.  </html>

ただしHTML5のすべてが実装されているわけではないので、HTML5の新要素や機能を積極的に使うことはオススメできません。
HTML5"的"に書ける、という感覚で導入するといいでしょう。

CSS3の機能が結構使える

box-shadow,border-radiusや新しいセレクタやCSS gradientなどが使えます。
ただし新しいプロパティなどには「-webkit-」というプレフィックスは必要です。
ちょっとしたボタンならCSSだけでそれらしいものがデザインできます。

テキスト表示
CSS:
  1. .button {
  2. -webkit-border-radius: 10px;
  3. -webkit-box-shadow: rgba(0,0,0,.1) 1px 1px 3px; background: #02488D;
  4. background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
  5.  from(rgba(255, 255, 255, 0.4)),
  6.  to(rgba(255, 255, 255, 0.1)),
  7.  color-stop(.5,rgba(230, 230, 230, 0.3)),
  8.  color-stop(.5,rgba(230, 230, 230, 0.2)));
  9. }

CSSを読み込むときのmedia対応は「screen」で。

テキスト表示
HTML:
  1. <link media="screen" href="iphone.css" rel="stylesheet" type="text/css" />

「viewport」の概念を押さえる

viewportは「表示領域」です。
縦のモードを「portlait」といい、幅は320pxに相当します。
横のモードは「landscape」といい、幅は480pxに相当します。

viewport

しかしMobileSafariはデフォルトで仮想で横幅980pxの解像度でシミュレーションしてサイトを表示します。
なので単純に縦で見た場合を想定して、横幅320pxのサイトをデザインしても思うように表示されません。

default

そのコントロールをするためにはviewportについてのmetaの記述が必要です。
下記はデフォルトの値を記述したものです。

テキスト表示
HTML:
  1. <meta name="viewport" content="width=980,initial-scale=1.0,user-scalable=yes,maximum-scale=3.0" />

widthには表示領域を指定することができます。直接数字をいれるか、device-widthと指定できます。
device-widthにすれば前述の「portlait」の場合は横幅320px、「landscape」の場合は横幅480pxになります。

device-width

initial-scaleは初期表示の倍率です。例えばinitial-scale=2.0とした場合、widthが320pxであれば、2倍にズームされた状態になるので、画面には横幅160pxの内容が表示されることになります。

initial-scale

user-scalableはユーザーによる拡大・縮小の操作を強化するかどうかです。値はyesかnoかいずれかの指定になります。
maximum-scaleは拡大を許可した場合の最大倍率となります。

基本的にはデフォルトに近い値である方がユーザーには親切であると思いますので、iPhone向けにちょうどいいサイト幅で閲覧できるようwidth=device-widthのみ指定すると良いでしょう。

テキスト表示
HTML:
  1. <meta name="viewport" content="width=device-width" />

サイトの幅はリキッドレイアウトを採用する

iPhoneは前述の通り、縦でも横でも閲覧ができ、それぞれのモードで解像度および表示領域が代わります。
そのためサイトの横幅はpx単位などで絶対指定するよりも、%単位など相対指定する方が可変になるので、どちらのモードでも対応出来ます。

クリックではなくタップを意識する

iPhoneではマウスカーソルおよびマウスオーバーなどの機能はありません。指による画面操作が必要となり、クリックも「タップ」という方法になります。
:hoverによるスタイルの調整もできないので、専用のプロパティを使いましょう。

テキスト表示
CSS:
  1. a {
  2. -webkit-tap-highlight-color: rgba(255,255,555,0.5); /*白背景・不透明度50％*/
  3. }

またマウスカーソルのように繊細にリンク領域を指定することは難しいので、marginやpadding、line-heightを調整してリンク領域は大きめに取るようにしましょう。可読性も向上します。下記はline-heightの例です。

テキスト表示
CSS:
  1. .paragraph {
  2.  line-height: 1.8;/* 1.6から1.8推奨 */
  3. }

iPhone からのアクセスを判定してページを振り分ける

PC用向けのページにアクセスされた場合に、iPhone（iPod Touch）向けのページへとリダイレクトさせたい場合には、サーバやプログラムでユーザーエージェントを判別して振り分ける方法があります。

PHPでおこなう場合：

テキスト表示
PHP:
  1. <? php
  2.  $ua = $_SERVER['HTTP_USER_AGENT'];
  3.  if ((strpos($ua, “iPhone”) !== false) || (strpos($ua, "iPod") !== false)){
  4.   //iPhone・iPod Touchの場合の処理
  5.   include('iphone.html');
  6.  }else{
  7.   //それ以外のブラウザの場合の処理
  8.   include('pc.html');
  9.  }
  10. ?>

.htaccessの場合：

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPod [OR]
RewriteCond %{HTTP_USER_AGENT} iPhone [OR]
RewriteCond %{HTTP_USER_AGENT} UP.Browser
RewriteRule ^$ /iphone.html [R]

これらの方法は強制的にiPhone向けのページへとリダイレクトする方法になるので、iPhoneでもPC向けのデザインでサイトをみたいユーザーを考慮したい場合は、別途PC向けのデザインで閲覧できるようにした方が良いでしょう。

応用編

mailto:やtel:を問い合わせ手段に利用する

PCサイトのコーディングで採用することは減ってきたmailto:のプロトコルをアンカーリンクに利用すると、iPhoneのメーラーが起動します。
またtel:と電話番号を組み合わせると、サイトからiPhoneでのコールが可能になります。

テキスト表示
HTML:
  1. <a href="tel:06-1234-5678">お問い合わせ電話番号</a>

tel:の方はクリックをすると確認ダイアログが表示されるので、それほどユーザーに驚きは与えません。サイトに応じて問い合わせ手段として採用してはどうでしょうか。
なおmailto:もPCサイトのときよりもメーラーの起動にはそれほどストレスを感じないと個人的には考えていますが、こちらは確認ダイアログが出ないのでJavascriptなどでそのような処理を加えると好ましいでしょう。

表示領域を固定したい

サイト幅をリキッドにして表示領域は柔軟にすることを推奨しましたが、都合上なるべく固定したいという場合にはHolygrailと呼ばれるテクニックがあります。

テキスト表示
HTML:
  1. <meta name="viewport" content="width=480,user-scalable=no,maximum-scale=0.6667" />

裏技的な方法ですが、480×0.6667=320.016 という計算により、縦横どちらのモードでも表示領域上のサイト幅がそれぞれのモードにフィットした形で表示されます。
なおかつユーザーによる拡大・縮小の操作を禁止することで、それが崩れることはなくなります。

HTMLはPC用のまま、iPhoneには専用CSSを適用したい

CSS3のメディアクエリを利用することで、iPhoneからのアクセスの場合にのみ専用のCSSを適用することができます。

テキスト表示
HTML:
  1. /* iPhone, iPod Touch向け */
  2. <link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
  3. /* PC向け */
  4. <link media="only screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
  5. /* IE向け */
  6. <!--[if IE]>
  7. <link rel="stylesheet" type="text/css" href="pc.css" />
  8. <![endif]-->

mediaにデバイスの解像度を指定することで、iPhoneにおける最大解像度の横幅である480pxよりも、大きいか小さいかの判定でCSSの読み込みを振り分けることができます。ただし、IEの場合はメディアクエリの認識ができないので、IE用にも追記をしています。
なお同様の理由で古いブラウザの場合はIEと同等の判定をしてしまう場合があるので、この方法は万全とはいえませんが
既存のサイトをiPhone向けに少しスタイルを調整したい場合などには採用する価値はあるかもしれません。

高速化・軽量化をする

PCのようにサイトを閲覧することができるiPhoneですが、3G回線やWifiでは重いページの表示がユーザーにストレスを与えます。
下記の記事のテクニックなどを参考に、iPhone向けサイトも軽量化するようにしましょう。

簡単作業でスピードアップ！パフォーマンスアップまとめ

なお上記記事にないテクニックとしては、CSS3を活用してCSSとHTMLを簡素化することと、CSSやJSファイルの圧縮化です。
CSS3については記事の最後でまとめるリンク集などを参考にしてください。

ファイルの圧縮化とは、ソースコードのインデントやコメント、改行などを削除することでファイルサイズの軽減をすることです。
開発環境では可読性を維持するために圧縮化は不要ですが、本番環境ではなるべく圧縮化する方が好ましいといえます。
※ただし圧縮した結果、ソースコードに不具合が生じる可能性もあるので、テストは忘れないようにしましょう。

まとめ

iPhone向けにデザインを提供することには賛否ありますが、実際にiPhoneをお持ちの場合はPC版の対象サイトへとアクセスして必要かどうかを感じてください。
少なくともFlashを大々的に利用しているようなサイトではiPhoneで見る価値が大きく損なわれるので、何かしたの代替コンテンツを提供する価値はあります。
もちろん、アクセス解析などをみてそれらのユーザーが存在するかをチェックするのも重要です。
iPhoneユーザーも着実に増えてきている現状ですので、一度iPhone向けサイトの構築を検討してみてはいかがでしょうか。
開発者的には挑戦するだけで色々発見があって面白いですよ。

その他参考になりそうなリンクを下記にまとめてみたので、参考まで。

iPhone関連総合

Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方
iPhone制作TIPS情報の用意とまとめ - WEBデザイン＆コンサルティング
iPhone 3G用のWebページを作る1 - ［JavaScript］All About

CSS3関連

SafariのCSS3拡張 - iPhone 3G DevWiki
CSS 3 Properties and support in Browsers

Viewport関連

iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise） | Topics | DB - KAYAC Designer's Blog （カヤック デザイナーブログ）
viewportの表示を検証してみました - ProjectDD Blog

UA関連

iPhone・iPod TouchをPHPで判定して分岐 | 凸凹
MovableType (MT4)のブログをJS・CSSのみでiPhoneに対応させる Kawa.netブログ（川崎有亮）/ウェブリブログ

圧縮化関連

CSSの圧縮と"CSS Compressor" - ありんく tech-log

その他

JSライブラリ
iui - Project Hosting on Google Code
jQTouch — jQuery plugin for mobile web development
iPhoneならではのアニメーションなどが簡単につかえるライブラリです。「iPhoneとツイッターで会社は儲かる」特設サイトのiPhone版サイトはjQtouchをベースにつくっています。

wordpressプラグイン
iWPhone WordPress Plugin and Theme
WordpressをiPhoneに最適化したテーマにしてくれます。当ブログでも採用。

ショーケースサイト
http://cssiphone.com/

モックアップ作成キット
iPhone Mockup

サービス
MOBIFY - Make Your Website Mobile
iPhone向けにPC向けサイトを変換してくれます。


関連した記事： ]]> http://designblog.ecstudio.jp/htmlcss/iphone-master.html/feed 5 ターゲットブラウザを選定して効率化！サイト制作時間短縮術 http://designblog.ecstudio.jp/htmlcss/target-browser-cost-down.html http://designblog.ecstudio.jp/htmlcss/target-browser-cost-down.html#comments Fri, 05 Feb 2010 06:15:40 +0000 赤堀　巴絵 http://designblog.ecstudio.jp/?p=1245 ウェブサイトは各ブラウザごとに1pxでもずれないよう！
というコーディングをおこなっているところも多いと思いますが、
これって結構大変作業ですよね。

古いブラウザだけのためにCSSをごにょごにょしたり
スクリプトを使ったり、かなりコストがかかる作業も…。
全部のブラウザで同じ見え方にする作業はとても面倒ですよね。

これに工数をかけるならもっとデザインとか色々な部分に
時間がかけられるのに！ということも実際ありますよね。

そこで、ターゲットブラウザを選定してもっと楽にコーディング
できないかと最近は様々な効率化アップの取り組みを考えています。

今回は弊社でターゲットブラウザを選定して、
実際に効率化をおこなった実例のお話をしたいと思います。

実例サイト「TweetMail」

今回「TweetMail」でターゲットブラウザは、
メインのブラウザがFireFox、Google Chrome、
他にレイアウトが確認できるブラウザとしてInternetExplorer6,7,8、
Safari、Operaでチェックをおこないました。

TweetMailはTwetterを使いこなすWebリテラシーが高い人が使うであろう
という考えから、FireFox、Google Chromeをメインにしています。

また、弊社のアクセス解析データを確認したところ、
FireFoxユーザーが全体で最も多く、
InternetExplorerユーザーが全体の21.90%だったこともあります。

制作コストを削減した箇所

「TweetMail」のトップページの概要を説明している箇所ですが、
この箇所の角丸で制作コスト削減をおこなっています。

tweetmail-index

今まで対応していた方法なら角丸を作成するときに
jqueryを使ったり、画像を多用して<div>を増やして囲んだりと
角丸に対応するのに時間がかかっていました。

しかし、今回CSS3のborder-radiusで角丸を対応することにより
CSSで簡単に実装することができました。

InternetExplorerなどでは角丸を表現することはできませんが、
コンテンツの情報に違いはないので問題なく閲覧者に情報を伝えられます。

他にもCSS2.1の隣接兄弟セレクタなどもサイトに取り入れたりするようにしています。
InternetExplorer6などで表示されないですが、コンテンツの情報に影響はありません。

これからはCSS3など、まだすべてのブラウザに対応していないものでも、
ターゲットブラウザを選定して積極的に使っていき、
制作コストの削減をおこなって、効率化を目指してはいかがでしょうか。

デザインブログの「[CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child」
などもぜひ参照してください。


関連した記事： ]]> http://designblog.ecstudio.jp/htmlcss/target-browser-cost-down.html/feed 0 フォロワー同士で使うTwitterアイコン！無料配布 http://designblog.ecstudio.jp/graphic_design/twitter_freeicon.html http://designblog.ecstudio.jp/graphic_design/twitter_freeicon.html#comments Wed, 03 Feb 2010 13:00:40 +0000 端山 佳枝 http://designblog.ecstudio.jp/?p=1207 全社導入しているTwitterで、なにか面白いことできないかなぁ
と考えたのが、こちらのTwitterアイコン。

crocodile　elephant　bird　koala　giraffe

１つ１つをみると、普通の動物アイコン。

これをフォロワー同士でTwitterアイコンに設定し、
タイムラインがうまくつながると・・・

こんな風に絵がつながるという仕組み。
タイムラインがつながった！

普通のアイコンにあきてしまった方や、
お友達同士の目印にいかがでしょう？

今回は、このオリジナルアイコンを無料配布いたします。
お気軽にお使いいただければ幸いです！

【5個セット：一括ダウンロード（約14 KB）】

giraffe
koala
bird
elephant
crocodile

フォロワーが多くて5つ揃えるのは難しい・・！
という方は2つでつながるこちらをどうぞ。

【2個セット：一括ダウンロード（約11 KB）】

a_elephant　a_bird　a_giraffe
a_crocodile　a_elephant　a_koala


関連した記事： ]]> http://designblog.ecstudio.jp/graphic_design/twitter_freeicon.html/feed 0 簡単作業でスピードアップ！パフォーマンスアップまとめ http://designblog.ecstudio.jp/tutorial/easy-speed-up.html http://designblog.ecstudio.jp/tutorial/easy-speed-up.html#comments Thu, 28 Jan 2010 08:20:01 +0000 赤堀　巴絵 http://designblog.ecstudio.jp/?p=1165 以前にWeb Directions East 「パフォーマンスアップのウェブ技術 WDE-Express」で
パフォーマンスアップについて記事を書きました。

今回はその記事や色々参照した本・セミナーを元に実際に改善をおこなって、
どれだけ高速化したかデータ上で確認し、まとめてみました。

できるだけ手間をかけずに簡単にできる改善方法をおこなってみたので、
しばらくリニューアルの予定はないが、サイトの表示を早くさせたいという方は
ぜひ試してみてください。簡単作業でパフォーマンスアップできます。

CSSのコードを短縮して書こう

え？こんなこと？と思うかもしれないですが、
どんどんコードを書いていくうちに肥大していくものです。
もう一度見直してコードを軽くしていきましょう。

今回コードの見直しのために使用したサイトはclean CSSです。
clean CSSを参考にカラーコードの短縮、
不必要な記述の削除・省略などをおこないました。
ファイルサイズは11.9KBから10.5KBに、約11%削減することができました。

使われていない不要なコードを削除すると、もっと削減することができます。
CSS Redundancy Checker やCSS Usage を使うとさらに探しやすくなります。

全体のpng画像を最適化

punypngでサイト全体のpng画像を最適化しました。
png画像をアップロードするだけで簡単に軽量化できます。

あとはサーバー上書きするだけなので作業もすぐ終わります。
画像ファイル全体で約42%削減できました。

グローバルナビゲーションをスプライト化

CSSの記述が増えてCSSファイルは重くなりましたが、
画像のリクエストが大幅に軽減されたのでパフォーマンスはアップしました。

読み込むファイルサイズが462.7KBから338.7KBに改善、
そしてHTTP Requestも67から57に軽減しました。

CSSの@importを<link>タグに変更

現在@importを<link>タグの読み込みに変えるだけです。
これでさらにパフォーマンスがアップをおこなえました。

さらに、@importのみに使用していたファイルを削除をおこない、
HTTP Requestsが60から47に軽減されました。

全体のパフォーマンスの結果

peformance-graph

実際「Googleウェブマスターツール」の「サイトのパフォーマンス」で確認した結果、
改善をおこなった後、急激に平均読み込み時間が短くなっています。

サイト内のページの平均読み込み時間を見ると4.1秒から2.0秒に改善されました。
数値で確認すると約2.0秒もサイトのパフォーマンスがアップしていました。

Googleはこれからサイトのパフォーマンスも考慮にいれて
検索結果を表示させていこうとする動きもあるので、
一度サイトのパフォーマンスを見直してみてはいかがでしょうか。


関連した記事： ]]> http://designblog.ecstudio.jp/tutorial/easy-speed-up.html/feed 0