A列に名称、B列にURLが記載されています。
リストをもとにこのようなHTMLを作成します。

<li><a href="http://www.forest.impress.co.jp/article/2008/04/22/pladata.html">tekico</a></li>

2行目のリストを例として作成します。
まず、C2に下記を入力します。

<li><a href="

次に、D2に下記を入力します。

">

次に、E2に下記を入力します。

</a></li>

A列からE列の文字列を連結します。
Excelでは、文字列の連結を「＆」で行います。
F2に下記を入力します。

=C2&B2&D2&A2&E2

以上で作成は完了です。
他の行にも値や式をコピーしてHTMLを量産します。

キーワード、ディスクリプション、ページタイトルなどExcelで管理することが多いドキュメントからHTMLを作成することもできるので是非活用してください。
並び順を変更したいときは、並び順の為の列を作成してそちらに並び順を入力、ソートしてからHTMLを作成すると非常に便利です。

■Firefoxアドオン

・DeliciousBookmark
Delicious ブックマーク

・Google Toolbar for Firefox
Firefox 用 Google ツールバー

・View Source Chart
HTMLソースコードの構造を色分けして表示する

・Semantic Checker
HTMLの要素や Microformats をオーバーレイ表示してくれる 

・SenSEO
SEO内部要因をチェックする

・MeasureIt
Webページのどんなものでも、縦と横のサイズを自由に測定できる

・YSlow
Webページパフォーマンス計測ツール

・Screengrab
Webページをキャプチャする

・pdfit
Webページをキャプチャする

・ColorZilla
WEB上の色情報を取得できる

・All-in-One Sidebar
サイドバーに様々な機能を表示できる。

・Tab Mix Plus
タブ機能を拡張

・Firefox Sync
ブックマーク、履歴、パスワード、さらには開いているタブまで、複数のパソコンで Firefox のデータを同期できる

・Fox Splitter
ブラウザウィンドウの内容領域を自由に分割できるようにする

・All-in-One Gestures
マウスジェスチャー機能

・FireGestures
マウスジェスチャー機能

・CopyAllUrls
開いているタブなどの一括リンク生成

・FireMobileSimulator
携帯端末ブラウザをシミュレート

・Wappalyzer
利用されているWebアプリケーションを解析して一目瞭然にしてくれる

■GoogleChromeアドオン

・Yet Another GoogleBookmarksEntension
Googleブックマーク管理用の拡張

・My Shortcuts
Google関連のサービスのボタンをまとめて追加する拡張

・webページショット - Webpage Screenshot
Webページをキャプチャする

・lightshot（Chrome拡張）
Webページをキャプチャする

・AutoPager Chrome
検索結果などの分割されたページをスクロールだけで表示できる

・CSSTester（Chrome拡張）
サイトのCSSをテスト

・Chrome用TooManyTabs
たくさんのタブを開いたときに、タブの管理、ブラウジングの改善と整理をします。

・HatenaBookmark
はてなブックマーク

・CreateLink
任意の形式でタイトル、URLをコピーする「Create Link」

・Firebug
Chrome版Firebug

※申し訳ありません！ソフトのダウンロード先は検索してください。
※動作環境を確認し、自己責任で使用してください。
※Chrome、Firefoxのアドオンの共有もありましたが、後日別の記事にまとめます。

----------

■Web全般

○HTML作成関連

・ダミーテキスト生成
tekico

・IEプレビュー
Expression Web SuperPreview
MultipleIE
IETester

・HTMLエディタ
ez-HTML

・リンクチェック
Xenu

・HTML量産
bptran

○ファイル転送

・ファイル転送クライアント
FileZilla
winSCP
NextFTP

○通信ソフト

・ターミナルエミュレーター
Tera Term

○Web用ユーティリティ

・ローカルホスト設置
httpd

・Webサイトデータの取得
GETHTMLW
PageDown
WeBoX

・チェックツール
Website Explorer

■文書作成

○テキストエディタ

・テキストエディタ
Crescent Eve
UnEditor
サクラエディタ
NoEditor
EmEditor
TeraPad
秀丸
vim

・メモソフト
紙copi Lite

○秀丸エディタ

・秀丸マクロ
半閣下（全角・半角変換）
きちんとCSS強調定義
ColorfulDiff（ファイルの差分を色分け）
ZenCoding

○デスクトップ・パブリッシング

・PDF作成
CubePDF
PrimoPDF

○印刷用ユーティリティ

・大量印刷
AllPrint

■ユーティリティ

○その他

・各アプリケーションの使用時間を記録するソフト
ManicTime

・暗号化ソフト
FENCE-Pro

・エクスプローラーのテキスト取得
NNScanText

○テキストファイル用

・ファイル・フォルダー比較/マージツール
WinMerge
ちゃうちゃう！
rekisa
Araxis Merge

・文字コード変換
KanjiTranslator

○デスクトップ設定

・タスクバー配置変更
Taskbar Shuffle

・ウィンドウサイズ設定
Sizer

・ものさしツール
JRuler

○アーカイブユーティリティ

・圧縮解凍ソフト
Lhaplus
+Lhaca

○クリップボード

・クリップボード関連
ペースター
Clipy
ToMoClip
Charu3

○システム起動・終了

・スタートアップ・プロセス・サービスの設定変更
スタートアップチェッカー

○ディスク用ユーティリティ

・HDD内の不要ファイルを掃除
CCleaner

・デフラグソフト
すっきり!! デフラグ
Auslogics Disk Defrag

○テキストファイル用

・文字列検索
JGREP

・文字列検索置換
GrepReplace
repl_ace

○デスクトップ設定

・デスクトップ整理＋エクスプローラー拡張
ぴたすちお

○ファイル管理

・バージョン管理
TortoiseSVN
TeamSite

・フォルダ作成
フォルダ作成くん

・フォルダ振り分け
ClassiNy
MoveFiles

・大量データコピー
FastCopy

・ファイル管理（納品ファイル作成）
CopyExt（拡張コピー）
Fire File Copy

・ファイル名抽出（リスト作成）
WinTree
ファイルリスト作成機
DirList
LS
パッとフォルダ構成取得

・検索削除後の空フォルダ削除
DelFolder

・ファイル名変更
Flexible Renamer
Namery
お忍びリネーム

○プログラムランチャー

・プログラムランチャー
Stealth Launcher
bluewind
Claunch

○付箋
rapture
タイマー付箋

■画像＆サウンド

・カラーピックアップ
カラーコントラストアナライザー

・キャプチャ
WinShot
FastStone Capture

・メディアプレイヤー
GOMPLAYER
VideoLAN

・閲覧中のFlashファイルを保存
FlashSaving

・画像閲覧
IrfanView

■ハードウェア

・メモリーのお掃除&監視ソフト
メモリクリーナー

----------

ぜひお試しください！

あけましておめでとうございます。
本年もよろしくお願い致します。

2011年になり、
あらためて2010年を振り返ると、
さまざまな方々との出会いがあり、
非常に充実した1年でした。

交流会(tebanomi)を数回主催し、
非常に多くのマークアップエンジニア・ディレクター・デザイナーの方々と交流をさせていただきました。
1度だけですが、弊社会議室での勉強会(tebaben)を開催することができました。

また、インターネットアカデミー様主催の
「Dreamweaverテンプレート機能活用セミナー」
に出演させていただき講師をさせていただきました。

2011年はこれまで以上に情報発信、交流等行っていきたいと考えております。
ブログの更新もがんばります！

お知らせです！

Dreamweaverのイベント「CSS Nite ビギナーズ： Dreamweaver編」に出演します。

内容（予定）

• Dreamweaverをはじめる前の環境設定
• ワークフロー
• 効率的なマークアップ
• ソースコードの整形
• CSSレイアウト
• CSSの設計、デバッグ
• jQueryとプラグインの実装
• HTML5/CSS3への対応

出演者

杉山 由起子さん＋近藤 将範さん（ワンパク）
藤田 洋正（クリエイティブホープ）
山本和泉さん＋藤川麻夕子さん（#fc0）
鷹野雅弘さん（スイッチ）

日時

2010年5月29日（土）11:00～

会場

ベルサール新宿にて開催予定です。

現在、mixiで参加表明を受付中です。
お待ちしております！
詳しくは下記のバナーから。

お知らせです！

採用活動を開始しました。
マークアップエンジニア急募です！

採用・求人情報は、下記のページでご覧ください。
ご応募も下記のページ経由でお願いします。

find-job採用・求人情報

一緒に働きましょう！
よろしくお願いします。

内容は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つのプロパティを設定しました。

• barShape: ["flat"],
  →グラフの形状
• xScaleFontSize: ["9px"],
  →x軸の目盛文字のフォントサイズ
• legend: ["false"],
  →凡例の表示・非表示
• gGradation: ["false"]
  →グラフ背景のグラデーション効果の有無

このライブラリを使用すれば、
更新のたびにグラフの画像を作成する手間を省くことができますね。

今、マークアップ野郎！！の右エリアの一番下に表示しています。 

使用するプラグインは、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のテンプレートタグリファレンスページにもにも説明が記載されていますので、ご覧ください。

テンプレートタグリファレンスページ

ただし、スタティックで生成した場合、
都度再構築を行わないと、最新のフィードを反映することができないのでご注意ください。

Movable Type プラグインディレクトリ

エムロジック株式会社様プラグイン紹介ページ

詳細は上記のページをご覧ください。
投稿後は下記のようになります。

マークアップ野郎！！のtwitterページ

5時間近くに渡り、さまざまなCMSの紹介を聞いた中で、
特に気になった製品をご紹介します。

■a-blog cms

こちらの製品は、セミナーに参加するまで知らなかったです。
ブロック要素単位で投稿フォームを増やしていく形式です。
静的ページからのCMS化が容易で、
Dreamweaverとの連携も良さそうです。
準備が出来次第試用してみます。

■SOY CMS

こちらの製品は、以前から知っていました。
独自タグは不要です。
テンプレートとなるHTML内のタグに「block:id」「cms:id」と呼ばれるものを追加していく形式です。
こちらも導入が比較的簡単そうです。

■Power CMS for MT

唯一MT関連の製品。
こちらの製品も、以前から知っていました。
制作者であれば「この機能欲しかった！」と思える製品です。
是非導入してみたいです。

余談

セミナーの中でプレゼント抽選会がありました。
見事プレゼント当選！
株式会社日本情報化農業研究所様から、野菜のプレゼントをいただきました。
自宅でカレーを作ったり、炒めたりして美味しくいただきました。
ごちそうさまでした！美味しかったです。

まずは、サンプルページをご覧ください。

サンプルページ

どうでしょうか？
テキストにシャドウがついた状態で表示されましたか？
サンプル2のテキストにtext-shadowを設定しました。

このプロパティは、対応していないブラウザがあるんです。
使いどころに困るかもしれませんね・・・。

各ブラウザごとの表示は下記の通りとなります。
上から、
Firefox/3.0.10
safari3.2.3
Google Chrome2.0.172.31
opera9.64
と、なっています。

それでは、実装方法です。

■HTMLソース

<h2 class="type1">これはプロパティを使用したテキスト サンプル1</h2>
<h2 class="type2">これはプロパティを使用したテキスト サンプル2</h2>

■CSSソース

.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」というフリーソフトを使用しています。
使用方法については、他の情報サイトをご覧ください。

vectorのCopyExt紹介ページ

WindowsVista～NTで動作するようです。

メモと作成した差分ファイルを見比べるために使用するフリーソフト

次に、3.のメモと作成した差分ファイルを見比べるために使用するフリーソフトですが、
「WinTree」というフリーソフトを使用しています。
フォルダの一覧をツリー形式で表示ができるソフトです。

vectorのWinTree紹介ページ

WindowsXP～NTで動作するようです。