iThoughtsX で作成したマップを Web 公開する方法についての考察

最終更新日：2016-03-03

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

!

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

樹状図 (枝分かれ、枝ごとにレイアウト変更) mind map

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

Mac App Store – iThoughtsX

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

iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 iThoughts (mindmap)

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

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

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

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

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

初期状態のままでは iPad 等での表示がいまいちだったので、html ファイルに CSS を追加するなどしてレスポンシブ対応させています。 ²

なお、mac 上で作業をする分には問題ありませんが、Web 上へアップする予定のある方は、少々面倒な作業になりますが、ファイル名を英数字のみにしておいたほうが無難かと思います。ロリポップ！のレンタルサーバではだいたいうまくいっていますが、他のレンタルサーバ等や Dropbox だとファイル名に日本語が使われていた場合、リンクが効かなかったりする場合があるようです。私自身は将来的なことも考慮し、すべてのファイル名を日本語から英数字へ修正しました。

---

1. pdf ファイルでエクスポートし、Cloudup 等で Web 公開する方法もありますが、この場合、記事にマップ内のリンクを効かせることができるようになる反面、他のマップへのリンクができなくなるなどのデメリットもあります（記事「iThoughtsX → WordPress.com の情報の受け渡しは pdf ファイルを Cloudup へアップロードし、その URL を貼り付ける方法にしようか | comemo post｜2013-12-16」参照）。 ↩
2. 記事「iThoughtsX（または iThoughtsHD）で作成し、Web 公開したマインドマップをレスポンシブ対応させる | comemo post｜2014-01-29」参照。 ↩