Contribute CS3でBloggerに投稿してみた

結論として、画像のアップを事前にやってればそれなりに使える。

Contribute CS3はWebデザイナーならほぼ導入してるだろう、Adobe CS3 Web Standard / Adobe CS3 Web Premiumにデフォルトで付属するソフトです。
（使った事が無い人・使う必要も無い人も多いと思います）

このエントリーの下に設定の流れもまとめてます。

なんでこんな事をやったかというと、以下の通り。

• Bloggerのブラウザからの編集フォームが嫌い
• 編集してて勝手に改行が無効になったりする(<br />が消される)
• 複雑なタグの編集が面倒い
• @sugmaにBloggerにも対応した便利なエディタがある事を教えてもらったけど、シェアと聞いて。

○実際にやってみて良かった点

• 画像の修正をその場でやれる。
• ある程度でかいサイズの画像は挿入時に自動でリサイズしてくれた
  
  • リサイズのサイズ、Bloggerはデフォルトでw300pxだった。
    （Contributeの環境設定では変更できる箇所が無かった。Blogger上でかな？）
  • 複数の画像ファイルを選択して、まとめてドラッグ＆ドロップしても、全部まとめてリサイズ処理。
    大量の写真載せるレポには便利！
    
• ブラウザでプレビューすると、ローカルに一時ファイル作ってくれる。
  （一時ファイルは、ページ公開時か下書き保存時に自動削除してくれる）

○悪かった点

• Contributeは、ページ公開時に一緒に貼付けたローカルの画像をアップロードしてくれるのだが、Bloggerにはまだ対応していないorz
  
  • 正直言って、これができないとBlogger編集にContributeは使えない。
    Contributeの最大のメリットの「イメージ編集」の恩恵が一気に薄くなる
  • 先に必要な画像をアップしておいて、それらの画像を絶対パスで貼付ける方法ぐらいしか思いつかない。今回はそれで対応。
  • MTやWordpressのような、公開領域に自由にファイルをアップ・生成できるBlogでは全く問題ない（はず）
• MACのテキスト入力時に使えるタブ選択が使えない。
  Dreamweaverと同じ。これは早くなんとかして欲しい。
• 何か重い。
• 「この領域では、処理を実行できません。」と不明なエラーが出る。リンクすら張れない状態になる。
  • ソフトを再起動すると直った
  • 多分、Dreamweaverのテンプレートから作成したファイルをコードビューでいじってると、領域をどうこう行ってくるアレと同じ現象だと思われ。

○今後、Contribute CS3 + Bloggerの僕なりの使い方

1. Contribute CS3でざっくり組む。ローカルの画像も全部リサイズして入れる。
2. 「ブラウザでプレビュー」で表示された画像(リサイズ済)をどっかに保存。
3. 2の画像を、Bloggerでアップ
   
4. Bloggerのプレビューで表示された画像のURLをコピーして、Contributeの方の画像のパスを変更
   • Firefoxだと画像の上で右クリックで「画像のURLをコピー」
   • Contribute上で画像をダブルクリックすればパス変更が楽
5. 全部、画像のパスをローカルからBloggerのパスに変更したら「ページ公開」
   
   ページ公開ができずに上にメッセージが出たら、まだローカルのパスがある。

こう書いてもかなり面倒い。

もうちょい頑張ってくれたかなり使えるのですが。
Picasaに自動アップ＆自動パス書き換えとか。

頑張って下さいよ、Adobeさん。
Contribute CS3も機能面を本気で考えてください。

Contribute CS3でBloggerの設定と投稿までの流れ

FWW(福岡で働くWebの人々)で実際に「WBC summer Adobe祭り 懇親会の様子」のエントリーをContribute CS3で書いた流れです。

1. Contribute CS3を起動
   [ブログ接続]を選択
   
2. 接続先を[ブログ]とし、Bloggerを選択
   
3. ブログサイトの接続情報を入力。
   ここではBloggerのアカウントのログイン情報。
   (普通はGoogleのアカウント)
   
   Bloggerに接続成功した時のメッセージに、複数のBloggerを利用してるとその個数が表示
   
4. 利用したBloggerのブログを選択
   
   テンプレート（CSSや画像等、関連データ）をBlogのテンプレートから自動的に作成します。
   
5. 接続が完了すると、そのブログが表示
   
6. [新規]からページ作成。
   [空白のブログエントリ]を選択。その時にはプレビューも表示されます（便利）
   
7. 編集画面が開き、ブログの記事表示部分が編集可能になります。
   通常のDreamweaverでテンプレートから新規作成した時の編集可能領域と全く同じです。
   
8. そのまま通常通り編集。
9. ちょっと便利な点。
   リンクを張る際、外部リンク・内部リンクもリンク先がWebサイトであれば、プレビューが表示されます。
   
   また[参照]はContribute内のブラウザを通じてリンク先を選択できます。
   リンクを辿っていきリンクしたいページを表示させればいいので、
   一般によくやる、別ブラウザで表示してURLをコピーする、といった手間が無くなるので、不慣れな人にはとても親切です。
10. [ページ公開]でブログエントリーにアップ。
    アップ完了後、そのエントリーが表示される。
    
    テキストだけのエントリーなら、まったく簡単でお手軽です。