最終更新日:2016-03-03
最近、記事の下に「関連情報・トピックのマップ」というコーナーを設けていますが、その作り方についての覚書です。

!2016-03-03現在は、「Biggerplate」というサイトの方に公開できるようになっています。

まず、作っているのは mac の「iThoughtsX」というマインドマップツールです。

iPad や iPhone 等で使える「iThoughts」とデータの互換性のあるツールです。

iThoughtsX には、さまざまな形式でデータをエクスポートできる機能がありますが、Web 公開するときには「Website」というメニューを使います 1 。

Web 公開用にエクスポートされたデータはこんな感じ。

解凍すると、html ファイルと画像データなどが入っているフォルダの2つが出てきます。

これらのファイルを任意のレンタルサーバにアップします。私自身は「ロリポップ!」にアップしています。夜の遅い時間帯になるとやや表示が重くなりますが、実用上、ほぼ支障はないとの判断で、ここを使っています。アップロードにはエディタ「Coda 2」を使っています。

アップしたものはこんな感じです。

初期状態のままでは iPad 等での表示がいまいちだったので、html ファイルに CSS を追加するなどしてレスポンシブ対応させています。 2
なお、mac 上で作業をする分には問題ありませんが、Web 上へアップする予定のある方は、少々面倒な作業になりますが、ファイル名を英数字のみにしておいたほうが無難かと思います。ロリポップ!のレンタルサーバではだいたいうまくいっていますが、他のレンタルサーバ等や Dropbox だとファイル名に日本語が使われていた場合、リンクが効かなかったりする場合があるようです。私自身は将来的なことも考慮し、すべてのファイル名を日本語から英数字へ修正しました。
- pdf ファイルでエクスポートし、Cloudup 等で Web 公開する方法もありますが、この場合、記事にマップ内のリンクを効かせることができるようになる反面、他のマップへのリンクができなくなるなどのデメリットもあります(記事「iThoughtsX → WordPress.com の情報の受け渡しは pdf ファイルを Cloudup へアップロードし、その URL を貼り付ける方法にしようか | comemo post|2013-12-16」参照)。 ↩
-
記事「
iThoughtsX(または iThoughtsHD)で作成し、Web 公開したマインドマップをレスポンシブ対応させる | comemo post|2014-01-29」参照。 ↩