記事をバックアップする - Blogger in Draft

ブログのバックアップとかインポート/エクスポートする方法があればと思い、探索していたところ、下記のサイトに行き着きました。

どうやら簡単に解釈するとBloggerのお試し機能が使用できるらしい。 と言うことで早速こちらに移動。
見た目もちょっと変わって新鮮。
blogger_indraft_myreport bloggerindraft_addgadget
自分のブログを弄って遊んでる人、既存の機能に飽きてきた人にはお薦め。
blogger_indraft_postedit
Star Ratingsはこちらでは既に使用可能。
bloggerindraft_postsettingstar starratinfs_sample
コメント欄の表示方法の選択枝が三つに。
blogger_indraft_commentshowplace


さて本題へ~
draft.blogger.comから入り、[設定] - [基本]から『ブログをインポート/エクスポート』機能を使用することが出来ます。

blogger_indraft_inandex
この機能を利用し記事をエクスポートすることでバックアップをローカルに保存しておくことが出来ます。
XML形式で記事が保存されるのですが、アップロードした画像までバックアップされるワケではないのでご注意を。
アップロードした画像をバックアップしたいのであればupした画像は全てPicasa Web Albumに保存されているので別途ローカルに保存するなりの対処が必要です。

BloggerでHighslide JSを使用する方法

Bloggerのブログで Highsilide JS を使用する方法を紹介。
説明を分かりやすくするため、出来るだけシンプルに実装する方法を選びます。

※必要なファイルをアップロードする場所はGoogle Page Creator(Google Pages)とすることを前提に説明します。そうでない場合は適宜変更願います。

1) Highslideをダウンロード

以下のサイトからダウンロードして下さい。
今回使用するファイルは『highslide.js』と『example-no-outline.html』です。
ダウンロードされたzipファイルの中にこの二つがあるはずです。

http://vikjavev.no/highslide/


2) クレジットの表示を消す

そのまま使用すると配布しているサイトへのリンクが画像の左上に表示されてしまいすが、表示しないように設定で変更できます。
showCredits : true, // you can set this to false if you want
highslide.jsファイル内の上記『true』を『false』に変更します。


3) 不要な参照を削除

必要なファイルをアップロードする場所にGoogle Page Creator(Google Pages)を使用することを前提にすると必要のない参照が出てきます。
var src = hs.graphicsDir + (hs.outlinesDir || "outlines/") + this.outlineType +".png";
highslide.jsファイル内の上記『+ (hs.outlinesDir || "outlines/")』は必要ないので削除します。


4) 必要なCSSコードを抜き出す

必要なCSSコードだけを抜き出してGoogle Page Creator(Google Pages)にアップロードし、それをBloggerのテンプレートから読み込む方法を取ります。比較的シンプルな『example-no-outline.html』から必要な部分だけを抜き出します。


CSS Sample

@charset "UTF-8";

.highslide {
    cursor: url(http://(Your Page Address).googlepages.com/zoomin.cur), pointer;
    outline: none;
}

/* 拡大したときにこれでサムネイルを隠す*/
.highslide-active-anchor img {
    visibility: hidden;
}

.highslide-wrapper {
    background: white;
}

.highslide-caption {
    display: none;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    padding: 0 1em;
    line-height: 1.5em;
    background-color: silver;
    font-size: 10pt;
}

.highslide-loading {
    display: block;
    color: black;
    font-size: 12px;
    font-style: italic;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url('http://(Your Page Address).googlepages.com/loader.white.gif');
    background-repeat: no-repeat;
    background-position: 3px 1px;
}

a.highslide-full-expand {
    background: url('http://(Your Page Address).googlepages.com/fullexpand.gif') no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

/* These must always be last */
.highslide-display-block {
    display: block;
}

.highslide-display-none {
    display: none;
}
必要と思われるコードを抜き出したらファイルに適当な名前(highslide.cssなど)を付けて下さい。

5) 必要なファイルをアップロードする

最低限必要と思われるファイルは以下の通りです。
  • highslide.js … 必須
  • highslide.css … 4で抜き出したCSS
  • drop-shadow.png … 拡大表示したときの画像の影
  • fullexpand.gif … 大きな画像を表示するとき必要
  • loader.white.gif … 画像のロード中に表示する
  • zoomin.cur … ズームインカーソル
  • zoomout.cur … ズームアウトカーソル

これらを参照可能な場所(Google Page Creatorなど)にアップロードして下さい。


6) Bloggerのテンプレートからファイルを読み込む

Headerタグ内に以下の文字列を追加します。
<link charset='UTF-8' href='http://(Your Page Address).googlepages.com/highslide.css' rel='stylesheet' type='text/css'/>
<script src='http://(Your Page Address).googlepages.com/highslide.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://(Your Page Address).googlepages.com/';
//]]>
</script>

hs.graphicsDir = 'http://(Your Page Address).googlepages.com/';
これは highslide で使用する画像がある場所を設定しています。
jsファイル内でこのプロパティを直接書き換えても結構です。

7) 画像との関連付け

画像のアンカーに以下の文字列を追加します。
  • class="highslide"
  • onclick="return hs.expand(this)"

<a href="full-image.jpg" class="highslide" onclick="return hs.expand(this)">  <img src="thumb.jpg"/></a>

画像の下に文字を表示するにはタグにこのクラスを追加します。
  • class="highslide-caption"

例)
<div class="highslide-caption">Show Text</div>


8) Bloggerにアップロードした画像のURLを修正する

通常Bloggerに画像をアップロードすると画像の参照先が以下のようになるかと思われます。
<a href="xxx/xxx/s1600-h/xxx/img.jpg">
s1600-h』があるとJavaScriptを使用して画像を表示することが出来ないのでこの文字列を削除します。この赤い部分を削除するということは元画像を参照することになるため、使用には注意する必要があるかもしれません。以上です。


Sample

hb_banner
Banner - humming bird

Google Talkをすばやく起動する4つの方法

手軽なコミュニケーションツールとしてのGoogle Talkをもっと身近に置いて活用するための方法を紹介。

ブックマークに追加する

下記URLのブックマークを追加すれば、すぐにGoogle Talkを起動できるようになります。

http://talkgadget.google.com/talkgadget/client

手順)
このテキストリンクをクリックすればGoogle Talkが表示されるので、そのページをブックマークすればOK。
これでブックマークから簡単にGoogle Talkが起動できます。


サイドバーに表示させる

Firefox3では、ブックマークの管理から、『詳細を表示』ボタンを押すと、『このブックマークはサイドバーに表示』チェックボックスが表示されます。



これにチェックを入れると上記でブックマークに追加したGoogle Talkがサイドバーに表示されるようになります。




ポップアップ表示させる

ブックマークレットを使用し、Google Talkをポップアップ表示させます。
手順) 適当にブックマークを一つ追加し、『ブックマークの管理』から該当のブックマークのURL欄に下記のコードに入れ替えます。



javascript:(function(){open('http://talkgadget.google.com/talkgadget/popout?hl=ja','_blank','width=300,height=445,toolbar=0,status=0,menubar=0,location=1,resizable=1,scrollbars=0')})();javascript:urchinTracker('/talk/outgoing/gadget')
※ Firefox3でしか試していません。


iGoogleにガジェットを追加する

iGoogleを使用してる方なら下記のサイトからガジェットを追加することも出来ます。

http://www.google.co.jp/ig/directory?q=google+talk&hl=ja&type=gadgets&url=www.google.com/ig/modules/googletalk.xml

閲覧しているウェブページのテキストリンクを生成するブックマークレット

閲覧しているウェブページのテキストリンクを生成するブックマークレット(Bookmarklet)。

ブックマークレットを簡単に説明すると、Firefoxで言うところの『ブックマーク』のアドレス欄にJavaScriptを書き込み、該当のブックマークをクリックするとアドレス欄に書かれたJavascriptが実行される、というもの。

『はてな』には『はてなブックマークレット』なるものがある。便利そうで何よりだ。

今回はアンカーテキストを生成するブックマークレットを作成する。
「作成」と言っても、とても簡単なのでJavascriptを知らなくてもできちゃいます(多分...)。

アンカーテキストを生成するブックマークレット

javascript:(function(){function%20o(s){prompt('',s)}o('<a%20href="'+location.href+'"%20title="'+document.title+'">'+document.title+'</a>');})();


Usage

まず適当に一つブックマークを追加し、ブックマークの管理から追加したブックマークのURL欄に上記の Javascriptを貼り付けるだけだ。



あとはこのブックマークに分かりやすい名前を付けて完了

使い方を流れで説明すると、
  1. テキストリンクが欲しいページを開く
  2. ブックマーク(レット)をクリックし、ダイアログを表示する。
  3. [Ctrl] + [C]を押してクリップボードにコピー。
  4. [Enter]を押してダイアログを閉じる。
  5. 投稿のHTML編集画面で貼り付けたい場所にカーソルがあることを確認して[Ctrl] + [V]で貼り付け。

こんな流れでサクサクっと。



注意:
Firefox では UTF-8でOKだが、IEではUTF-8は受け付けないらしい。

Google Sitesの仕様

主な仕様についてのまとめ

  • 複数サイトを作成可能です。上限は不明ですが、恐らく容量が許す限り可能と思われます。(7つまでは作成出来ることを確認しました)
  • JavaScriptは使用できません。HTMLの編集でJavaScriptを入れると下記ダイアログが表示され、削除されてしまいます。

add_script_diarog

  • ifameタグを使用できない仕様(前記ダイアログが表示される)のため、地図をそのまま埋め込むことが出来ません。ガジェットとして埋め込む方法がありますが、筆者が試したところ上手く行きませんでした。
  • headerやbodyタグ、その他外観の元となる部分には触れられないため、カラム幅を調整するなどの大きな変更を行うことは出来ません。
  • 日本語サポートについては、上記のダイアログに見るように徐々にではありますが日本語化されているようです。
  • 1ドメインにつき10GBのストレージ。
  • 添付ファイルのサイズ上限は10MB。
  • 既存サイトの移管を考えている方も居られるかと思われますが、既存のWebページをアップロードすることは出来ません。(参照 Can I upload existing Web pages? )

  • アクセスコントロールが可能。管理者、共同編集者、閲覧者を指定することで閲覧者を限定することが出来ます。

確認した不具合

  • 地図の挿入する点でも触れましたが、地図以外にもRSSフィードを表示するガジェットなど正常に機能しない場合があるようです。
  • アップロードされたファイルのあるWebページを編集するとファイルのバージョンがアップしてしまう。

その他参考元

Sony Style(ソニースタイル)
デル株式会社

Recent Posts