, , , 2014年4月7日

D3.jsのjsonメソッドなどを使って、ローカルにあるファイルを読み込もうとすると、javascript側でエラーが発生して読み込むことができません。例えば、

d3.json("./dataset.json", function(data){
    //↑同一フォルダ上にあるファイルを読み込みたい!
    console.log(data)
});

と普通に書いても、エラーが発生して読み込めません。そんな時の解決方法をいくつか紹介します。

Pythonを使って簡易サーバを立てる

一番簡単なのはPythonを使って簡易サーバを立てる方法です。まずは、pythonが入っているか確認します。ターミナルを開いて以下のコマンドを打って下さい。

python --version

バージョンが表示されない場合はpythonが入っていません。pythonをインストールするか、次のDropboxを使った方法に行って下さい。

Python 2.#.# と表示されたら、作業中のディレクトリで以下のコマンドを打ちます。

python -m SimpleHTTPServer 8888

Python 3.#.# と表示された場合は以下のコマンドを打ちます。

python -m http.server 8888

ターミナルに「Serving HTTP on 0.0.0.0 port 8888 …」と表示されたらOKです。

これで簡易サーバが立ち上がったので、ブラウザのURLに「localhost:8888/ファイル名.html」と打てば無事に読み込まれます。

サーバを落とす場合はターミナルでCtrl-Cです。

Dropboxの公開リンクを使った方法

「pythonは入ってないけど、Dropboxは使ってるよ!」という人はこちらの方法で。

まずは、使いたいデータをDropboxのPublicフォルダに入れます。そのファイルを右クリックすると「公開リンクをコピー」という項目があるので、これをクリックします。

pic20140407-1

これでURLがコピーされたので、D3のメソッドの引数に渡して上げればOKです。

d3.json("ここにコピーされた公開リンク", function(data){
    console.log(data)
});

XAMPP, MAMPの導入

「pythonは使いたくないし、Dropboxも使ってないよ!」という人は諦めて下さい。…と言いたい所ですが、XAMPPやMAMPを入れるという手があります。

これらは、GUIでローカルサーバを立ち上げることができます。ついでにPHP+MySQLの開発もできるようになるので、試してみたい方はどうぞ。

Windowの人は以下からXAMPPをインストール。

XAMPP

Macの人は以下からMAMPをインストール。

MAMP

インストールするとローカルサーバを立ち上げることができます。場所はXAMPPだとhtdocs、MAMPだと最初に設定できたかな?

よく覚えてないですが、その位置に作業フォルダを移動して「localhost/作業フォルダ」みたいにすれば読み込めます。使い方に関しては解説できないので、別の詳しいサイトを探して下さい。

まとめ

知ってる人には当たり前の知識かもしれませんが、意外とつまづく人が多いのでは?と思って紹介しました。

それでは、良きD3.jsライフをどうぞ。

CATEGORIES