Side Bar

ReadMe (SIE - SVG JavaScript Library, English)

SIEマニュアル

はじめに

この文書では、一般の初心者に向けて、SIEの使い方を説明します。これを読めば、SIEを簡単に扱えるようになります。

  1. 導入手順
    1. ダウンロード
    2. アップロード
    3. 自分の作った絵をアップロード
  2. バグの報告の仕方
    1. どこに報告すべきか
    2. 報告はどんな形式がよいか

導入手順

ここでは、Windowsのユーザに向けて、SIEの導入の仕方をご紹介します。

ダウンロード

このプロジェクトページにある「ダウンロード > リリース一覧」のページを開いてください。以下のような画面が出てきたでしょうか。 release.png 下のほうにある「sie-0xx.zip」をクリックします。 release2.png(画面はリリース一覧のページを拡大したところ) しばらくして、「sie-0xx.zipをダウンロード」というページに切り替わり、自動でファイルのダウンロードが始まります。さて、ファイルのダウンロードが終了すると、ブラウザがダウンロードしたファイルをどうするかたずねてきます。下の画像では、ブラウザにFirefoxを使用しています。ファイルを選んで、以下のように、「開く」を選択しましょう。 downloading.png ブラウザのダイアログが開きますので、そこで、「開く」を選択。

「開く」を選択してファイルを解凍しましたら、フォルダが開かれます。

開いたファイルの中に「sie-mini.js」と「Readme.html」、「zeimusu_sakura_.svg」がありますので、このファイルをサーバにアップロードします。これだけでSIEのインストールは終了です。アップロードの仕方は、次でわかりやすく具体的に説明します。 folder.png

アップロード

では、早速、サーバにアップロードしてみましょう。開いたフォルダの中に「sie-mini.js」と「Readme.html」、「zeimusu_sakura_.svg」というファイルがあることをご確認ください。確認できたら、試しに、これらの3つのファイルをサーバにアップロードしてみることにしましょう。

FTPソフト(FFFTPなど)を起動させて、あらかじめ用意しておいたサーバに接続します(サーバがない人は、ApacheやHTTPDやXAMPPを使って、サーバをあなたのパソコンで作っておくと便利です)。

続けて、先ほどの「sie-mini.js」と[Readme.html」、「zeimusu_sakura_.svg」という三つのファイルを、サーバに転送します。転送というよりも、コピーといった方がいいかもしれません。その後、ブラウザでサーバにアクセスします。 画面のように、ブラウザで、サーバに転送しておいた「Readme.html」を表示させてみましょう。桜の絵が表示されます。成功したでしょうか。

自分の作った絵をアップロード

今度は、あらかじめ自分で作った絵をアップロードしてみることにします。あなたが、もし、SVG画像を作ることができるならば、その絵を「sample.svg」として保存してください。

次にWindows付属のメモ帳を使って、HTML文書を作ります。ここでは、その文書のファイル名を仮に「a.html」としておきます。

a.html

<html>
 <head>
   <title>サンプル</title>
 </head>
 <body>
 </body>
</html>
以上のコードを、メモ帳を使って、書いておきましょう。ただし、このままでは、絵が表示されません。そこで、以下のような記述を追加しておきます。
a.htmlに追加
<html>
 <head>
   <title>サンプル</title>
   <script defer="defer" src="sie-mini.js"></script>
 </head>
 <body>
   <object width="400" height="400" type="image/svg+xml" data="sample.svg"></object>
 </body>
</html>
以上の記述を、メモ帳で書いて、「a.html」として保存して置いてください。

これで準備は終了しました。続いて、サーバにアップロードしてみましょう。今回はFFFTPというソフトを使って、サーバにアップロードしてみます。

まずは、FFFTPを起動しておいてください。すると、接続先を訪ねられますので、自分が用意したサーバを指定しておきます。これで、接続は完了です。

先ほど作って保存しておいた「sample.svg」と「a.html」のフォルダをFFFTPで開いてみてください。この二つのファイルと、「sie-mini.js」を接続先のサーバにコピーさせます。アップロードが完了したでしょうか。

この際、「アスキーモード」ではなくて、「テキストモード」で三つのファイルをサーバに送る必要があります。「テキストモード」、「アスキーモード」の切り替えに関しては、FFFTPの解説をご覧下さい。

以上で、アップロードが終わりました。あとは、a.htmlを好きなブラウザで表示してみてください。自分の作ったSVGが表示されます。

バグの報告の仕方

どこに報告すべきか

もし、あなたがSIEに関して、問題やバグを発見したら、sie-developers@lists.sourceforge.jpにメールを送ってください。バグであることを確認できれば、バグ追跡システムに登録します。

報告はどんな形式がよいか

私たちは経験上、バグが起きている環境を詳しく知ることができれば、バグの原因特定につながることを知っています。そこで、以下のような書式で報告するのが望ましいでしょう。

  1. バグが起きたときに使っていたブラウザとオペレーティングシステム
  2. SIEのバージョン情報(SIE0.11の場合、バージョンは「0.11」)
  3. HTML文書とSVG文書のコピー(URIでもOK)
  4. あなたがSIEに加えた変更