ソースコードを書かない未来

何年か前からこうしたソースコードを生成するサービスが出ていましたが、また新しくSaaSのサービスが出てきたようです。
Creative Cloudと一緒に発表されたMuseなど、段々とブラッシュアップされていってそう遠くない未来にマークアップを記述することは相当少なくなるのかもしれませんね。

Webydo

まだアメリカでのサービスインがされたばかりのようなので日本ではフォントの問題などもあるし、もう少し先の話かもしれません。
しかし、ビデオで見る限りではMuseと似た感じに見えますね。
» Webサイトのデザインを各Webページのコード(HTML, CSS, JS)に変換するWebydoが合衆国デビュー | TechCrunch Japan

Adobe Muse

Adobeはデスクトップアプリケーションで同じようなプロダクトを提供しています。
» コード記述不要のWebサイトデザイン | Adobe

こちらは使い慣れたAdobeのUIに近いし、僕ら制作サイドからは馴染みやすそう。
ともあれすでに発売しているプロダクトだし、いい加減ちょっと触ってみないといけないですね。
大量のページを複製しないといけない大規模なサイトには向かないのかな?という印象がありますが、ワイヤーフレームというかモックアップというかプロトタイプというか、その辺りを作るには良さそうですしね。

どちらにしても

使える、使えないのポイントは

  • エレメントの使い回しのしやすさ
  • エレメントのカスタマイズのしやすさ
  • ソースコードの品質(=運用のしやすさ)
  • システムとの連携

になると思うので、今後はその辺りに重点を置きながら情報を追っていこうと思う。

続きを読む

HTMLによる画像のリサイズ

ペンギン

最近ではレスポンシブデザインが当たり前になってきており、画像のサイズもパーセント指定をする機会も増えて来ました。
実務の上で当たり前のようにそういった指定をしていても、HTMLによる縮小は画質が悪くなるんじゃ?という昔ながらの思い込みもちょっと残ったりしていたので自分を安心させるためにも検証してみました。

■HTMLでの縮小と、Photoshopでの縮小の比較
比較

※クリックでオリジナルサイズの画像が見れます。
個人的にグリッドパターンでよく使う、幅440ピクセル、高さ220ピクセルの画像を起点に、左がHTMLで縮小したもの。右がPhotoshopで縮小、若干のシャープをかけたものです。
さすがにシャープをかけたぶん、Photoshopでリサイズをしたほうがエッジがシャープですが、思ったより大きな差がありません。(あくまで思ったよりですよ?)

わぷー

※クリックでオリジナルサイズの画像が見れます。
キャラクターはちょっとWordpressさんの公式サイトから拝借してます。
こちらも幅440ピクセル、高さ220ピクセルの画像を起点に、左がHTMLで縮小したもの。右がPhotoshopで縮小したものです。こちらはエッジがちょっとたってしまっていたのでシャープは使用してません。
比較してみて、この結果はちょっと意外でした。
印象としてはGifはそれほど縮小に強い印象がなく、もっとジャギーが出るかと思ったのですが、エッジの差異はあるものの十分実用レベルでした。

■総括
そういうわけで総括ですが、容量の部分がクリアになっていればメンテナンスの手間を考えるとリサイズによる対応は十分にありですね。
もっともスマートフォンのような3G回線をターゲットとするなら少し話は変わってきますので注意は必要です。

いや、やってみないとわからないものだねー…。

続きを読む

Check My Links

Check-My-Links

Webを制作していればどうしても出てくるリンク切れチェック。
Webがそもそも情報とハイパーリンクの集合体である以上、リンク切れは致命傷になることもあります。
とは言え、目視でのチェックには限界や見落としがあり、ことリンクに関しては機械的にチェックするのが一番確実だと言えるでしょう。
サイト全体のチェックであればDreamweaverやサイトエクスプローラーがありますが、単一ページをチェックするツールって意外と少なかったりします。

「Check My Links」は単一ページを手軽にチェックできるGooglechromeのエクステンションです。

» chromeウェブストア

使い方もとてもシンプルで、インストール後に現れる左上のボタンをクリックするだけです。

続きを読む

タグの頭揃え

クライアントさんの関係から、頻繁に注釈に※を使うことがありますが、普通にテキストで入れるとインデントもかからず、あんまり美しくないです。
このことは前々から気にはなっていたんだけど、ついつい見逃してきました。
が、今日は時間があったので今後はキチンとしようと、CSSを検証してみました。

» サンプル

こんな感じ。
list-style-typeでの指定の場合はそれほど難しいことはないのですが、前述した※のようにW3C準拠ではないものを扱う場合には、text-indentを使ってやれば上手くいきます。ただし、マージンの取り方がブラウザ毎に微妙にちがうみたいなので、微調整が必要でちょっと面倒。

もっといい方法があれば、教えてもらえると喜びます。

続きを読む

IE6でタグを位置指定するとクリックできない問題

IE6以前のバージョンでは<a>タグに対してpositionで位置指定を行うと、<a>タグにdisplay:blockを与えていてもテキストの部分しかクリックできなくなる問題があります。
これがバグなのか仕様なのか、よくわかりませんが、このためサンプルのように打ち出しエリアの上に<a>タグをpositionで配置し、text-indentで画像置換(テキストを隠しす)するとまったくクリックできなくなります。

» サンプル

HTMLはシンプルだし、どうしてクリックできないんだろう?ってことになりますが、解決方法は全然簡単で、<a>タグの背景に透過GIFをはるだけでOKです。
簡単な問題ゆえに、どつぼにハマるパターンなのでメモ書き程度に残しておきます。

ちなみに<a>タグを<div>でラップして、<div>にpositionを与えても同じ症状がでるので、IEでは<a>を位置指定するには注意が必要なようです。

続きを読む

bodyタグにIDを付ける

コーポレートサイトを制作する場合に「HTMLを極力標準化する。」という点にいつも気をつけてます。
ここで言う標準化は、別にW3Cとかそういうのじゃなく、コンテンツ間のHTMLの差異を極力少なくする。つまり、サイト内でのHTMLの標準化です。

» サンプルソース

サンプルの場合、見ての通りbodyタグのid。つまり、aboutやproductといった名前を変えるだけで、ナビゲージョンのアクティブ化やレイアウトを調整できるようになっています。
(今回のサンプルでは、とりあえずナビゲーションの制御のみを実装)

こうした構成にしたときの最大のメリットは、やはり一括置換が効くことです。
CMSなどのシステム的なバックアップがない場合、テキストエディターなどで一括置換をするわけですが、この場合置換の対象となるソースはできるだけ同一であることが望ましい。
それなのにナビゲーションのアクティブ化のためだけに、クラスを入れてしまったりすると、その時点で一括置換はアウトになってしまう。
(正規化等を使えば、可能なのかもしれませんが…)

そういうことで、bodyにIDを振るのはとっても便利、というお話でした。

※もちろん、もっと大規模なサイトになった場合、CSS自体をコンテンツごとに切り替える、ということになるのでしょうけど。

続きを読む

iepingfix(その2)

以前に紹介したiepngfixだけど、IE6以下のみ対象のタグの中に<a>タグを入れてもリンクしないっぽい。
(タグはあるけど、クリックできない感じ)

例)<h1 class=”iepngfix”><a href=”hoge.html”>hoge</a></h1>

なのでpng背景に使う場合は、 <a>タグをネストさせないほうが吉かも。

例)
<div id=”header”>
<div class=”bgimg iepngfix”></div>
<h1><a href=”hoge.html”>hoge</a></h1>
</div>

空タグが入っちゃうのは、この際はやむを得ないのかなと。
あとはheaderをposition:relativeにして、. bgimgとh1をposition:absoluteにするなどで位置調整。
これでOKかと。

続きを読む

iepingfix

IE6でも透過PNGを表示可能にするiepngfixを使ってみました。
紹介されてたサイトはこちら

結果としては かなりカンタンに使えることが判明。
これだけで透過PNGが使えるのは便利だし、HTML上に直接配置した画像だけでなくCSSで背景に張り込んだ場合にも適用できる点がすごい。

ただ問題は 他のpngfix系のテクニックと同じでJavaScriptをオフにされると、とても素敵な世界が広がってしまうこと。
他にもAJAXが動いてて処理の重いページの場合、動作せずにpingfixが適用されない場合があることの2点。
こればっかりは仕方ないのかもしれないけど、使うには勇気のいる選択になりそう。

自分のサイトとか、趣味で使う分にはかなりアリかと。

続きを読む

clearfix

フロートとか、位置指定すると親ボックスがコンテンツ量に付随しなくなるんで、そんなときにこれ使うと便利です。

.clearfix{
}
.clearfix:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-table;
}
/* Hide from IE-mac*/
*html .clearfix{height:1%;}
.clearfix{display:block}
/* End hide IE-mac*/

続きを読む