2008年6月11日水曜日

FreeMind で作成したファイル を Web で公開 - FreeMindFlashBrowser と Google Page Creator を使って Blogger に表示

追記(2012.4.17): 現在は、FreeMind のファイルを Dropbox を使い Web に公開し、ブログに埋め込んでいる。

1. FreeMind で作成したファイルをブログで公開したい

調べものに使ったり、考えをまとめたり、アイディアを練ったりするときに、FreeMind をよく使う。

Web 上で マインドマップを作成するサイトはいくつかある。

マインドマップを作成するサイトには、ブログに埋め込むための embed code を生成してくれる。FreeMind で作成したファイルをインポートする機能を持つものある。

ただし、ローカルで作成した FreeMind のファイルを完全に再現してくれるサービスがなかった。できれば、FreeMind で作成した形のまま、ブログに表示したい。

例えば、こんな風に ...

 

2. FreeMindFlashBrowser を使い、FlashPlayer で表示

FreeMindFlashBrowswer を使うと、FreeMind で作成したファイルを Web で公開することができる。

Flash Plyayer を使いマインド・マップを表示するので、マウスでの操作感が良い。

方法

FreeMindFlashBrowswer にアクセスし、mindmaps に関する項目の、 FreeMindFlashBrowswer の中の Download より、必要なファイルをダウンロードする。

ダウンロードしたものを解凍すると、中には

  1. FreeMind で作成されたファイル
  2. mindmaps.html
  3. その他いつくかのファイル

が存在している。

mindmaps.html をダブルクリックして開くと、同梱されていた FreeMind のファイルがブラウザに表示される。

080611-18

 

別の FreeMind のファイルの表示

同フォルダに、自分で作成した FreeMind のファイルを置いた。

このファイルを表示させるには、先ほど mindmaps.html を開いたときのアドレスの最後に、? を付け、その後に、FreeMind で作成したファイル名を追加すればよい。

?FreeMind で作成したファイル名

 

3. Google Page Creator を利用して Web に公開する

080611-17

Blogger にソースコードを貼り付けた場合、色付けするための JavaScript ファイルを Google Creator に置いてある。今回も Google Page Creator を利用した。

方法
  1. Google Page Creator にアクセスし、 Uploaded stuff に、先ほど解凍した FreeMindFlashBrowser のファイル群をアップロード。
  2. FreeMind で作成した表示したいファイルもここにアップロードする。ファイル名がバッティングしないように、アップロードするファイル名には気をつけること。
  3. mindmaps.html にアクセスすると、 freeMindFlashBrower.mm の内容が表示される。先ほどと同じように、このアドレスの末尾に ? を付けて、自分で作成した FreeMind のファイル名追加する。

追記 (2008.12.17) : いつの間にか FreeMind が表示されなくなっていた。その代わりに

「Flash plugin or Javascript are turned off. Activate both and reload to view the mindmap」

というメッセージが表示される。

再度、最新の FreeMindFlashBrowser ダウンロードし、以前にアップロードしたファイルを削除してから、アップロードし直したら、表示されるようになった。

 

4. Blogger で表示する方法

ブログに表示するには、iframe タグを使う。

例えば、FreeMind で作成したファイル名が 「080611_FreeMindWeb.mm」 の場合、

<iframe width="100%" height="280px" src="http://jutememo.googlepages.com/mindmaps.html?080611_FreeMindWeb.mm"></iframe>

と HTML で記述する。