お知らせです！
Dreamweaverのイベント「CSS Nite ビギナーズ： Dreamweaver編」に出演します。
杉山 由起子さん＋近藤 将範さん（ワンパク）
藤田 洋正（クリエイティブホープ）
山本和泉さん＋藤川麻夕子さん（#fc0）
鷹野雅弘さん（スイッチ）
2010年5月29日（土）11:00～
ベルサール新宿にて開催予定です。
現在、mixiで参加表明を受付中です。
お待ちしております！
詳しくは下記のバナーから。
お知らせです！
採用活動を開始しました。
マークアップエンジニア急募です！
採用・求人情報は、下記のページでご覧ください。
ご応募も下記のページ経由でお願いします。
一緒に働きましょう！
よろしくお願いします。
内容はjQueryや表示速度改善、HTML5、CSS3など。
mixiコミュニティにて参加表明を受付中です。（2010年2月15日現在）
詳細は、下記のバナーから公式サイトをご確認ください。
今回は、Google AJAX Feed APIというものを使用して、
再構築なしで、Twitterに投稿した内容を表示する方法をご紹介します。
まずは、サンプルページをご覧ください。
サンプルページのソースは下記のとおりです。
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Feed API サンプル</title>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("読み込みたいフィードのURL");
feed.setNumEntries(3);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
// フィード分ループ
for (var i = 0; i < result.feed.entries.length; i++) {
// 表示情報を取得
var entry = result.feed.entries[i];
var URL = result.feed.entries[i].link;
var div = document.createElement("div");
var a = document.createElement("a");
var text = document.createTextNode(entry.title);
// タグを生成
a.href = URL;
container.appendChild(div);
div.appendChild(a);
a.appendChild(text);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>
サンプルページの流れを簡単にご説明すると、下記のようになります。
1.Google AJAX API キーを設定する
2.読み込むフィードを設定する
3.表示したい情報を取得する
4.タグを生成する
googleのデベロッパーガイドをご覧いただければ、より理解が深まるかと思います。
サンプルとは異なったコーディングも可能なので、是非お試しください。
使用するライブラリはHTML5.JPで配布されているライブラリです。
こちらで配布されているライブラリは、
Internet Explorerでも使用できるよう、
ExplorerCanvas (excanvas.js) が同梱されています。
こちらのページに解説が記載されています。
ライブラリのダウンロードもこちらのページからどうぞ。
サンプルをご覧ください。
数分で棒グラフを作成することができました。
設定は非常に簡単です。
棒グラフの項目名や数値、X軸、Y軸の設定をするだけです。
詳細はこちらでご覧ください。
プロパティを設定するだけで、
グラフの形状を変更したり、文字サイズを変更したりすることができます。
サンプルでは、以下の4つのプロパティを設定しました。
このライブラリを使用すれば、
更新のたびにグラフの画像を作成する手間を省くことができますね。
今、マークアップ野郎！！の右エリアの一番下に表示しています。
使用するプラグインは、Feeds.App Liteという、MovableTypeをインストールした際に、標準でインストールされるプラグインです。
このプラグインは、フィードを読み込んで、サイトのタイトルやURLや記事のタイトルなどを表示することができます。
今回は、TwitterのRSSフィードを読み込んで、ブログ上に表示をしたいと思います。
マークアップ野郎！！をサンプルとして解説します。
以下のソースが、テンプレートタグを埋め込み前と、埋め込み後のソースです。
<ul class="link">
<li><a href="記事へのURL" target="_blank">記事のタイトル</a></li>
</ul><MTFeed uri="ここにフィードのURLを設定する">
<ul class="link">
<MTFeedEntries>
<li><a href="<$MTFeedEntryLink encode_html="1"$>" target="_blank"><$MTFeedEntryTitle$></a></li>
</MTFeedEntries>
</ul>
</MTFeed><MTFeed uri="" >～</MTFeed>▲フィードのURLを設定します。
<MTFeedEntries>～</MTFeedEntries>▲フィードの内容を表示するためのタグ。
lastn=""で表示する件数を設定することができます。
<$MTFeedEntryLink encode_html="1"$>▲フィードから読み込んだ、個別記事へのリンクを表示します。
<$MTFeedEntryTitle$>▲フィードから読み込んだ、個別記事のタイトルを表示します。
MTFeed uri=""
MTFeedTitle
MTFeedLink
MTFeedEntries [offset="" lastn=""]
MTFeedEntryTitle
MTFeedEntryLink
MTFeedInclude uri="" [lastn=""] sixapartのMovableTypeのテンプレートタグリファレンスページにもにも説明が記載されていますので、ご覧ください。
テンプレートタグリファレンスページ
ただし、スタティックで生成した場合、
都度再構築を行わないと、最新のフィードを反映することができないのでご注意ください。
詳細は上記のページをご覧ください。
投稿後は下記のようになります。
5時間近くに渡り、さまざまなCMSの紹介を聞いた中で、
特に気になった製品をご紹介します。
こちらの製品は、セミナーに参加するまで知らなかったです。
ブロック要素単位で投稿フォームを増やしていく形式です。
静的ページからのCMS化が容易で、
Dreamweaverとの連携も良さそうです。
準備が出来次第試用してみます。
こちらの製品は、以前から知っていました。
独自タグは不要です。
テンプレートとなるHTML内のタグに「block:id」「cms:id」と呼ばれるものを追加していく形式です。
こちらも導入が比較的簡単そうです。
唯一MT関連の製品。
こちらの製品も、以前から知っていました。
制作者であれば「この機能欲しかった！」と思える製品です。
是非導入してみたいです。
セミナーの中でプレゼント抽選会がありました。
見事プレゼント当選！
株式会社日本情報化農業研究所様から、野菜のプレゼントをいただきました。
自宅でカレーを作ったり、炒めたりして美味しくいただきました。
ごちそうさまでした！美味しかったです。
まずは、サンプルページをご覧ください。
どうでしょうか？
テキストにシャドウがついた状態で表示されましたか？
サンプル2のテキストにtext-shadowを設定しました。
このプロパティは、対応していないブラウザがあるんです。
使いどころに困るかもしれませんね・・・。
各ブラウザごとの表示は下記の通りとなります。
上から、
Firefox/3.0.10
safari3.2.3
Google Chrome2.0.172.31
opera9.64
と、なっています。
それでは、実装方法です。
<h2 class="type1">これはプロパティを使用したテキスト サンプル1</h2>
<h2 class="type2">これはプロパティを使用したテキスト サンプル2</h2>.type1 {
color: #ffff00;
font-size: 200%;
}
.type2 {
color: #ffff00;
font-size: 200%;
text-shadow: #ffff00 5px 5px 20px;
}text-shadow: #ffff00 5px 5px 20px
ここがシャドウを設定している箇所です。
それぞれの値の意味は下記の通りです。
text-shadow: [シャドウの色] [水平方向への距離（右方向への影の距離）] [垂直方向への距離（下方向への影の距離）] [シャドウの距離];水平方向、垂直方向の距離はマイナスの値だと、それぞれ、左方向、上方向に影が設定されます。
]]>納品までの手順は以下の通り。
1.更新、新規作成したファイルをメモをする。
2.フリーソフトを使って、差分ファイルを作成をする。
3.フリーソフトを使って、メモと、差分ファイルとを見比べて違いがないかをチェックする。
4.問題がなければ納品の手配を進める。
2.の、差分ファイルを作成するためのフリーソフトですが、
「CopyExt」というフリーソフトを使用しています。
使用方法については、他の情報サイトをご覧ください。
WindowsVista～NTで動作するようです。
次に、3.のメモと作成した差分ファイルを見比べるために使用するフリーソフトですが、
「WinTree」というフリーソフトを使用しています。
フォルダの一覧をツリー形式で表示ができるソフトです。
WindowsXP～NTで動作するようです。
]]>（誤）
<option>...（正）
<option>...</option>（誤）
<IMG SRC="/shared/images/photo.gif" ALT="写真" WIDTH="245" HEIGHT="21" />（正）
<img src="/shared/images/photo.gif" alt="写真" width="245" height="21" />（誤）
width=100（正）
width="100"（例）
<br />
<hr />
<input type="text" name="" value="" size="10" />
<img src="/shared/images/photo.gif" alt="写真" width="245" height="21" />（誤）
<option selected>...</option>（正）
<option selected="selected">...</option><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">この他にも、head内にCSSを記述する際の注意点などがありますが、
CSSは出来る限り外部ファイルに記述しましょう。
ちなみに、DreamweaverでHTMLをXHTMLに変換する際は、
メニューの[ファイル]→[変換]を選択して、変換したいタイプを選択して下さい。
XHTMLからHTMLへの変換も同様です。
新しいブラウザが公開されるごとにブラウザチェックのことが頭をよぎります。
今後は、Internet Explorer 8（IE8)、Internet Explorer 7（IE7)、Internet Explorer 6（IE6)、3つのバージョンをチェックしなければ・・・。
今回は、Internet Explorer の異なるバージョンをチェックのためのツールをご紹介します。
既に知っている方も多いと思いますが、「まとめ」ということでご了承ください。
（1）Expression Web SuperPreview for Internet Explorer
http://www.microsoft.com/expression/try-it/superpreview/
http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&displaylang=en
マイクロソフトが提供しているツールです。
重い気がしますが・・・私のPCのスペックのせいですかね。
（2）IETester
http://www.my-debugbar.com/wiki/IETester/HomePage
2009年5月11日にInternet Explorer 8（IE8)の製品版について対応したようです。
（3）スクリーンショット.jp
指定したサイトのスクリーンショットをダウンロードできるサービスです。
有料となります。
BASIC認証にも対応しているようです。
日時:
2009年6月27日土 13:50-18:40（実質4H50M）
会場:
ベルサール西新宿
東京都新宿区西新宿4丁目15番3号 住友不動産西新宿ビル3号館
（〒160-0023）
■JIS X 8341-3 改正原案「高齢者・障害者等配慮設計指針－ 情報通信における機器・ソフトウェア・サービス －第３部：ウェブコンテンツ」の公開レビュー案内ページ
公開レビューの実施期間は、2009年 1月22日（木）～ 2月22日（日）です。
WCAG2.0とUnderstanding（参考文書）の和訳が発表されています。
詳細は案内ページをご覧ください。
]]>