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

最終更新日:2016-03-03

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

WordPress のビジュアルエディタを見たまま編集にする | comemo
!

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

2016-03-03 at 15.36.png
樹状図 (枝分かれ、枝ごとにレイアウト変更) mind map

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

Fullscreen
Mac App Store – iThoughtsX

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

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

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

Parallels Desktop

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

Desktop

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

iThoughtsX

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

iThoughtsX-1

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

iThoughtsX-2

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

なお、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」参照。 

投稿者: comemo

WordPress.com での記事の作成方法など

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。