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. [ページ公開]でブログエントリーにアップ。
    アップ完了後、そのエントリーが表示される。

    テキストだけのエントリーなら、まったく簡単でお手軽です。

Contribute CS3でBloggerに投稿してみた” への7件のフィードバック

  1. 良エントリの予感。

    画像部分にPicasaとかPicasa Web Albums Uploader使ってる人(オレ)向けにも
    研究して、追記して〜。

  2. >nishiaki殿
    >画像部分にPicasaとかPicasa Web Albums Uploader使ってる
    俺もそう。できたらかなり便利。
    クライアントにも勧められる。
    わかった、研究してみる。

    イメージ挿入で「Web共有」とかURLで指定ってのがあったんだけど、Bloggerでどうやって有効にするのかわからんかった。

    あとBloggerでアップした写真って、Picasaに自動でアルバム化されるじゃない?
    あれから貼付けってできんのかな?
    Picasaを基本「非公開」に設定してると、Piacasaの画像のURLをそのまま貼付けたら見れないし。

    URLが違うから何かしら認証通ってると思うけど。
    それともBlogger上でアップした画像のコピーがPicasaにもアップされてるだけかな?

    以下、テストのメモ。

    ▼[A].Bloggerで画像アップして自動挿入されるイメージパス
    http://1.bp.blogspot.com/_nCfKMPEyjE0/SMLElIm8WnI/AAAAAAAAClg/PcykNUgHvak/s320/DSCN1274.JPG

    ▼[B].Picasa上にアップされてるイメージのブラウザでアルバム閲覧時の表示パス
    http://lh3.ggpht.com/garyuten/SMLElIm8WnI/AAAAAAAAClg/wv9oc5BCtOg/DSCN1274.JPG

    ▼[C].Picasa「画像を埋め込み]でのイメージパス(抜粋) サイズ:中 400px
    http://lh3.ggpht.com/garyuten/SMLElIm8WnI/AAAAAAAAClg/wv9oc5BCtOg/s400/DSCN1274.JPG

  3. 上記のテストでは、
    [A]、[C]は普通に見れる。
    [B]はPicasaにログインしてないと見れない。

    となれば[C]の手かな。
    Picasa上の貼付けURLを引っ張ってくる方法。
    URLはセキュリティのためか、ランダムだし。
    一枚一枚開いてコピペは面倒いから良い方法ないか探してみるか。

  4. ○アルバムの表示 : 概要 – Picasa と Picasa ウェブ アルバム ヘルプ
    http://picasa.google.com/support/bin/answer.py?answer=61627&topic=9340&hl=ja

    # Blogger から写真を削除すると、同じ写真が Picasa ウェブ アルバムからも削除されます。同様に、Picasa ウェブ アルバム内の Blogger アルバムから写真を削除すると、その写真はブログから削除されます。
    # 現在、Picasa ウェブ アルバムのサイトから直接 Blogger アルバムに写真をアップロードすることはできません。

    うーん、ブラウザ上、またMac上ではPicasaにアップしてる写真をBloggerへ自動投稿するのは無理か。
    Windows、Linux版の、アプリとしてのPicasa 2.7なら、[Bloggerへ投稿]ができるらしい。
    でもこれだけのためにWindows立ち上げるのもな〜

  5. おお!調べてる!
    オレは、Picasa Web Albums Uploader からアップロードしてPicasaの画像を埋め込みからimgタグだけ引っこ抜いて使ってる。
    これが最速とは全然思ってないけども、そこまで大変でもないとも思ってます。

  6. なるほど、よくまとめてもらいました。ありがとう!Dreamweaverの場合、接続するだけで時間がかかりそうですが、Contributeのほうは改善されていますか。

  7. >nishiaki殿
    >Picasaの画像を埋め込みからimgタグだけ
    それが一番確実かもですね〜。

    >photoshop-T殿
    初めまして。

    >Dreamweaverの場合、接続するだけで時間がかかりそうですが、Contributeのほうは改善されていますか。
    ちょっと意図がわからなかったのですが、Dreamweaverで通常のサーバーと接続する事でしょうか?
    それともDreamweaverでBloggerに接続する場合でしょうか??
    (そんな事ができるのかな??)

    それはともかくContributeでのブログ接続は、最初の関係ファイル生成後のページ公開・編集は普通のFTP通信と変わりないぐらいですね。
    そこまで遅いと感じた事は無いですね。

    サーバーとの通信環境にもよるでしょうけども、そこそこ動くサーバーであれば、問題無い速度だと思いますよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*