「Web制作」カテゴリーアーカイブ

[CKEditor] WYSIWYGで編集中のデータを取得する

CKEditorがかなり便利。かなり使いやすいWYSIWYGエディタで、導入も驚くほどカンタン。インストール方法もまとめておきたいが、詰まった点があったのでメモ。

CKEditorにもネイティブでプレビュー機能があるのだが、当然エディタで編集している範囲しかプレビューされない。エディタが入っている以外のinputタグの内容などもあわせた「編集内容をプレビュー」機能を持たせたければ、エディタから編集中のデータを取り出さなければならないので、その方法です。

// 「editor1」が、CKEditorに置き換えたtextareaを差すので、環境に合わせ変えてください。
data = CKEDITOR.instances.editor1.getData();
alert(data);

CKEditor自体も、formをsubmitする際にエディタ部分のデータを取得してtextareaのvalueに突っ込んでいるみたい。

[Canvas] Canvasタグを勉強しよう。

HTMLだけで、図形が描ける<canvas>タグ。正直、コーポレートサイトやポータルサイト・ショッピングサイトばかりの職場では使うことが当分なさそうなので興味なかったのですが、よく考えてみたらかなり面白いんじゃね?と思い直して勉強してみることにしました。

これまでもFlashやProcessingなどを勉強しようと思いながら始められなかったのですが、canvasの魅力はやっぱりプラグイン無しでブラウザで動くということに尽きる。IE?知らん。

ということでまず、図形を描いてみました。Firefox、Safariで見てください。
IEでは動きません。あしからず。

左上が基準点。そこからポインタを動かして線を引いたり図形を置いたり。こういっちゃ何だが、実にありきたりです。おおまか、CSSと発想が一緒と思えば取っ付きやすいかな。

その他、描線と塗りに色を指定できる、透明度が設定できる、グラデーションが設定できる、と。

アニメーションが出来ると聞いて俄然やる気になったので、次回はそのあたりを調べてみます。

IE8だけに適用できるCSSハックとは?

必要があってだいぶ調べましたが…結論。

そんなものは、無い。

まぁ実際ないことはなかったんですが…一番よく見かけたのが下の方法。

html>/**/body #sample p {
color /*\**/: blue\9;
}

これはとても覚えられないし、感覚の問題になってしまいますが、かなり気持ち悪い。
ヴァリデーションも通らないらしい。

おとなしく、コンディショナルコメントでIEのみに読み込ませるCSSを指定するのが最も分かりやすそうだ。

<!–[if IE]> <link rel=”stylesheet” href=”ie.css” type=”text/css” /> <![endif]–>

IE7まではCSSハックでしのいでいましたが、<head>タグ内は一切変更できませんという奇特なCMSを使っているのでない限り、今後IE対策はこの方法で対応しようと思います。

参考:
IE8だけに適用させるCSSハック
Internet Explorerの条件分岐コメント (コンディショナルコメント)

[Microformats] クラスデザインパターン

前回の記事に引き続き、Microformatsについて勉強中ですが、
クラスデザインパターンというのがあるようです。

参考:
class-design-pattern · Microformats Wiki

一言で言ってしまえば、HTML中において、その部分が何であるかという意味を示すのにclass属性を使おうという考え方です。

基本的な使い方

まず、HTML要素として提供されている意味的な要素があればそれを使う。
一般的なところでは<hx>タグや<ul>/<li>その他諸々。ここは最低限押さえましょう。

で、適切な意味的な要素がない場合。この場合は<span><div>を使います。
「適切」のラインは別の議論が必要になると思いますが。。。

次に、「意味的なclass名」をつけます。代表例として「hCard」の記述例が挙げられています。

<div class="vcard">
<a class="url fn" href="http://tantek.com/">Tantek Çelik</a>,
<span class="org">Technorati</span>
</div>

クラス名「vcard」がMicroformatsの規格を使用していることを表しています。
fnは名前、urlはURL、orgは所属。分かりやすいですし、電子名刺の標準的なフォーマットであるvcardの規格に基づいているので、機械でも理解できるデータと言えます。

このように、インライン要素では<a><span>、ブロック要素では<div>を使うようにします。
ほとんどの場合、CSSをいじらずとも既存のページにも簡単に導入することができるというわけです。

ところで連絡先という意味では<address>属性もありますが、文書の作成者の意味合いが強いので使い方を選びますし、中身の書き方は特に決まっていません。HTML要素とMicroformatsのどちらを使うかという問題ではなく、適切にマークアップされたHTMLを拡張するのがMicroformatsと言えるかもしれません。

次回はいよいよ実践、新着記事のコーディングについて改めて考えてみようと思います!

microformats入門 – 意味的なHTMLとは。

microformatsについて知ったのはだいぶ前のWeb Designing誌の特集だったと思います。その頃はほとんど参考資料がありませんでしたが、現在は日本語にも対応しているmicroformats.orgのWikiが充実してきているようです。

まず、microformatsとはなにか。microformats.orgの説明を引用するとこんな感じ。

Microformatsとは、Webサイトで人やイベント、ブログ記事、レビュー、タグのような共通して公開されているものを記述する際に用いるマークアップパターンです。

http://microformats.org/wiki/Main_Page-ja

分かったような分からないようなという感じですが、そのmicroformatsの拠り所となる概念としてさらに「POSH」というものがあるそうです。

POSHとは、Webページを作成する際に意味的なHTMLを用いることのベストプラクティスを簡潔にあらわしたものです。

http://microformats.org/wiki/posh-ja

この説明だけではまた分かりにくいですが、「意味的なHTML」というところがポイントです。実際のタグで言うと、見出しならなるべく<hx>タグ、段落ならなるべく<p>タグ、一覧性のある項目ならなるべく<ul>/<li>タグなどを使う、ということです。

反対に「表現的なHTML」という言葉もあります。こちらの代表的なタグは太字の<b>や文字サイズを変える<small>などです。また、表組みとして情報を整理しているのではない、レイアウトのためだけの<table>タグも含まれます。

ただし、現在主流のXHTML1.0などに用意されている意味的な属性は、本当に最低限のものです。Webで公開する情報としてよくある「連絡先」や「タグ」、「イベント情報」などを表す属性はありません。で、乱暴に言ってしまえば、無いなら作っちまおうぜというのがmicroformatsなのです!(たぶん)

実際のWebの現場では、そんなこと言われなくても各々ローカルルールを決めてコーディングしていることと思います。大きめのサイトを複数人数でコーディングする場合、画像のファイル名の付け方まで最初に細かく決めてしまうのが普通です。そうしないと、「この人の担当ページが遅れているから、他の人がヘルプに入る」というようなリソース配分がスムーズに出来ないからです。

じゃあ、なぜわざわざ作らなきゃいけないかという理由ですが…
「機械でも読めるようにするため」というのが一番じゃないかと思います。

見出しタグ<hx>やページタイトル<title>では、せいぜいその部分がそのページの内容を表す重要な部分であろうという程度のことしか分かりません。しかし、「連絡先」や「タグ」、「イベント情報」などがマークアップによってページのどの部分に記述されているのかが分かると、サイト内のイベント情報だけをピンポイントで検索することが可能になると考えられます。

他にも、ブラウザがmicroformatsに対応することで、ただ閲覧するだけではない情報の活用の仕方が広がります。ページ内の連絡先をワンクリックでアドレスブックに保存したり、ページ内のイベント情報をワンクリックでカレンダーに保存したり。これは便利ですよね。
詳しくは古い記事ですが下記に分かりやすくまとまっています。

【Web 2.0 Expo】「データ形式Microformatsがブラウザを進化させる」,Mozillaがアピール:ITPro

しかししかし、世の中ユーザーに便利なだけでは動かない。僕がMicroformatsに期待しているのは、HTMLコーディングをより楽にしてくれるのではないかという点です。マークアップとCSSの書き方の組み合わせはいくらでもあります。しかし、標準的な書き方が確立されれば、その部分はどんどん自動化できるようになっていく。
ユーザーにとって便利で、しかも開発が楽になれば、世の中変わるんじゃないか。

と、華々しい想像も広がるところなのですが、まずは「意味的なHTMLを書くことは重要」ということが言いたいのです。より具体的には、単に見出しタグやリストに気をつけるだけじゃなく、「意味的なクラス名」を積極的に付けていこうということです。(続く…)