FreeMind のファイルを Dropbox を使い Web に公開し、ブログに埋め込む

1. FreeMind のファイルを Flash としてブログに埋め込む

FreeMind で作成したファイルを Web 上に公開したい。

FreeMind で Flash としてエクスポート

FreeMind(Version:0.9.0) には、ファイルをFlash へエクスポートする機能がある。

• メニューより、ファイル > エクスポート > Flashとして...

を選択。

ファイル名を XXXXX として保存すると、

• XXXXX.html
• XXXXX.html_files

が作成される。

 

Dropbox に配置

上記の 2 つを Dropbox の Public フォルダ内に配置。

• XXXXX.html を右クリック > Dropbox > パブリックリンクのコピー

• cf. ウェブサイトで利用する外部ファイルを Dropbox の Public フォルダに置く

 

ブログに iframe タグで埋め込む

ブログに埋め込むためには iframe タグを使う。

幅を目一杯広げ、高さを 300px とするなら、

<iframe src="Dropboxのパブリックリンク" 
    width="100%"
    height="300">
</iframe>

これを HTML を編集するモードにおいて貼り付ける。

 

2. Flash としてエクスポートしないで、マインドマップの本体だけを Dropbox に配置する

上記の方法では、FreeMind のファイルをエクスポートする必要がある。また、マインドマップの本体以外に複数のファイルを Dropbox に配置しなければならない。

マインドマップの本体だけを Dropbox に配置し、ファイルを更新したら、ブログに埋め込んだマインドマップも更新されるようにしたい。

方法

FreeMind をFlash としてエクスポートしたとき、２つのものが生成された。

• XXXXX.html
• XXXXX.html_files

フォルダ XXXXX.html_files には、３つのファイルが含まれている。

• flashobject.js
• map.mm
• visorFreemind.swf

この内、map.mm がマインドマップの本体。後は共通の部品なので、別のマインドマップでも共有することにした。

全体の配置は、以下の通り。

• Dropbox のルート/Public/mindmaps/
  • freemind.html (XXXXX.html を修正したもの)
  • flashobject.js
  • visorFreemind.swf

マインドマップを作成したら、以下の場所に保存する。

• Dropbox のルート/Public/mindmaps/

上記の freemind.html のパブリックリンクをコピー。

マインドマップのファイル名が

• XXXXX.mm

である場合、ブログに埋め込むための iframe タグを以下のように書く。

<iframe src="Dropboxのパブリックリンク?XXXXX.mm" 
    width="100%"
    height="300">
</iframe>

 

関連記事

• FreeMind で作成したファイル を Web で公開 - FreeMindFlashBrowser と Google Page Creator を使って Blogger に表示
• JavaScript で URL からフラグメント以外を取得

AutoHotkey で サイトのタイトルと URL から、 FreeMind の子ノードを作成 (Firefox のみ)

FreeMind を使って調べものをしつつ、まとめていくとき、一番面倒なのはノードに対してリンクをつけること。これを AutoHotkey を使って自動化したい。

前提 : AutoHotkey がインスールされていること。

こちらをダウンロードしてダブルクリックで起動。→ ffLink2fm.ahk 。タスクトレイに アイコン が表示される。

 

使い方

1. FreeMind で、新規に作成したいノードの「親になるノード」をアクティブにしておく。
2. Firefox で対象のサイトを開く。
3. Ctrl + Shift + L を押すことによって、FreeMind に新規ノードが作成される。

※ 上手く動作しないときは、下記の実装において適当に Sleep の値を大きくする。たまにおかしな動作をする。 ^^;

 

実装

^+l::   ; Ctrl + Shift + L

; JavaScript をロケーションバーに入力し、
; サイトのタイトルと URL をアラートに表示
clipboard = javascript:(function(){alert(document.title + "\n" + location.href)})();
Send ^l
Send ^v{ENTER}
Sleep 1000

; 表示されたアラートの内容をコピー
Send ^a^c{ENTER}

; クリップボードの内容を分割
StringSplit, url_ary, clipboard, `n
clipboard = %url_ary1%

SetKeyDelay 300

; アプリケーションの切り替え
Send !{Tab}

; FreeMind がアクティブになるのを待つ
SetTitleMatchMode, 2
WinWaitActive, FreeMind

; 新規子ノードを作成してペースト
Send {Ins}^v

; ノードにリンクを設定
clipboard = %url_ary2%
Send ^k^v{ENTER}

return

 

サイトのタイトルと URL の取得

以下の JavaScript をロケーションバーで実行することによって、アラートにサイトのタイトルと URL を表示。(cf. ブックマークレット) コピーしてクリップボードへ。

javascript:(function(){alert(document.title + "\n" + location.href)})();

 

文字列を分割したものを配列として利用

クリップボードから文字列を取り出し、タイトルと URL を配列に入れようと思ったら、AutoHotkeyを流行らせるページ - 配列 によると、

AutoHotkeyには配列型変数は無く、StringSplitやWinGetなどのコマンドでは、配列の代わりに最後に数字の付いた変数に結果を代入する。

なるほど、文字列を区切ってそれを配列代りに使うと。StringSplit というコマンドのポイントは、出力される配列のようなもの。

ここで「array」を指定した場合、「array0」に要素数が、「array1」「array2」...に各要素が格納される。

(AutoHotkey – StringSplit より)

内容を参照するときも独特。以下では、組み込み変数である clipboard より改行を区切り文字に指定し、 url_ary 変数に分割した内容を入れている。参照するときは、%url_ary添字% と書く。

; クリップボードの内容を分割
StringSplit, url_ary, clipboard, `n
clipboard = %url_ary1%

(cf. StringSplit)

 

Insert キー

{Ins} と書く。(cf. Send/SendRaw/SendInput/SendPlay/SendEvent: Send keys & clicks )

 

その他

今回は使わなかったけれど、クリップボッドの内容を順次メッセージボックスに表示させるには次のようにする。

Loop, parse, clipboard, `n, `r
{
    MsgBox, , , %A_LoopField%
}

(cf. Clipboard, ClipboardAll, and OnClipboardChange, Loop (parse a string) )

追記 (2009.1.17) : 手動でやるならアドオン Make Link を使ってページのタイトルと URL より HTML の リンクとなる文字列を作成。Freemind でリンクを子ノードとして貼り付けたいノードを選択してペーストする。どちらがお手軽なんだろう... ^^;

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

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

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

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

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

• cf. マインドマップ、どのツールを使うか検討 o(･_･= ･_･)o

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

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

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

 

2. FreeMindFlashBrowser を使い、FlashPlayer で表示

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

• cf. FreeMind活用クラブ - Web公開

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

方法

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

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

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

が存在している。

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

 

別の FreeMind のファイルの表示

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

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

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

 

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

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 で記述する。

FreeMind のソースコードを読む準備 - Eclipse で CVS を利用する

最近、FreeMind は必需品となっている。中身がどんな風になっているか、ソースコードを見てみたくなった。

Getting Freemind from SourceForge's CVS via Eclipse を参考にして、Eclipse 上でソースコードを読めるようにした。

使用したツール

Eclipse 3.3.1.1

方法

Eclipse を起動する。

メニューの Window > Open Perspective > Other... を選択する。

Open Perspective ダイアログが表示されるので、 CVS Repository Exploring を選択する。

SourceForge.net: CVS に、CVS にアクセスするための方法が書かれている。

Anonymous CVS Access に、CVS のコマンドが書かれている。これを Eclipse の CVS を管理するところで利用する。

cvs -d:pserver:anonymous@freemind.cvs.sourceforge.net:/cvsroot/freemind login

(上記のページより)

Eclipse に戻り、CVS Repositories において、Add CVS Repository ボタンをクリックする。 Add CVS Repository ダイアログが表示されるので、上記の CVS のコマンドに書かれていたものに対応するフィールドに、以下のように記述する。

• Host : freemind.cvs.sourceforge.net
• Repository path : /cvsroot/freemind
• User : anonymous
• Connection type : pserver

CVS Repositories に freemind が追加された。

上記を開いて、HEAD > freemind において、Check Out を選択すると、freemind というプロジェクトが Eclipse に作成される。 ( Window > Open Perspective > Resource で確認。)