document/usage.html

   1 <!xml version="1.0" encoding="utf-8"!>
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4 <title>使い方 - SIE</title>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6 <script defer="defer" type="text/javascript" src="sie.js"></script>
   7 <link rel="stylesheet" type="text/css" href="instyle.css"></link>
   8 <link rel="SHORTCUT ICON" href="sie-logo2.ico" type="image/x-icon"></link>
   9 </head>
  10 <body>
  11 <ol class="menu">
  12  <li><a href="index.html">ホーム</a></li>
  13  <li><a href="goals.html">目標</a></li>
  14  <li><a href="screenshot.html">スクリーンショット</a></li>
  15  <li><a href="demo.html">デモ</a></li>
  16  <li><a href="help.html">ヘルプ</a></li>
  17 </ol>
  18 <p><object data="sie-logo.svg" type="image/svg+xml" width="100%" height="90"></object></p>
  19 <p><a href="index.html">ホーム</a> &gt; <a href="help.html">ヘルプ</a> &gt; 使い方</p>
  20 <h1>使い方 - SIE</h1>
  21 <h2>目次</h2>
  22 <ul>
  23  <li>5分でわかるSIEの使い方</li>
  24  <li>ダウンロードしてみる</li>
  25  <li>サンプルを表示する</li>
  26 </ul>
  27 <h2 class="title">5分でわかるSIEの使い方</h2>
  28 <p>ここでは、初心者に向けて、2Dベクトル画像をブラウザに表示できる「SIE」の利用方法や、役立つヒントについて説明しています。できるだけ、5分で読み終わるよう、ポイントを絞っています。始めは簡単な説明をしていきます。</p>
  29 <h2 class="title">ダウンロードしてみる</h2>
  30 <h3>「SIE」のプロジェクトページから手に入れる</h3>
  31 <p>「SIE」の配布場所は以下にあります。ダウンロード用のページからZIPファイルを解凍して手に入れることができます。</p>
  32 <p><a href="http://sourceforge.jp/projects/sie/downloads/52052/sie-077.zip/">sie-077.zip/</a> (ZIP形式, 423.4 KB)</p>
  33 <p>「sie-0xx.zip」というファイルを解凍すると、以下のようなファイルが現れます。</p>
  34 <ul>
  35  <li>sie.js</li>
  36  <li>Readme.html</li>
  37  <li>zeimus_sakura_.svg</li>
  38 </ul>
  39 <p>今回使うのは、この三つのファイルだけですので、両方とも、あなたのサーバにアップロードしてください。<strong>必ず</strong>、アップロードしてくださいますよう、お願いします。というのは、IEではセキュリティの関係上、ローカルで表示しないからです。</p>
  40 <p>サーバ（この例では、仮にhttp://sie.sourceforge.jp/とする）に上の三つのファイルが保存し終わったら、早速、ブラウザでサンプルを表示してみましょう。</p>
  41 <p>ブラウザを起動させたら、先ほどサーバに保存しておいたReadme.htmlを開きます。すると、サンプルが表示されるはずです。今度は、わかりやすく、さらに詳しく説明していきます。</p>
  42 <h2 class="title">サンプル（zeimusu_sakura_.svg）を表示する</h2>
  43 <h3>準備するもの</h3>
  44 <p>ブラウザは、最新版をご用意ください。おすすめはOperaですが、そのほか、シェアを伸ばしつつあるFirefoxやSafari、また、Internet Explorerでも結構です。</p>
  45 <p>あなたが作ったHTML文書のページと、SVG画像を作って、用意してください。（今回は、Inkscapeで作られたSVG画像の「zeimusu_sakura_.svg」を用います）</p>
  46 <h3>ネットの公開のしかた</h3>
  47 <ol>
  48  <li>HTML文書を、「メモ帳」など、テキスト編集ソフトで開いて、「&lt;script defer="defer" type="text/javascript" src="sie.js"&gt;&lt;/script&gt;」をhead要素の中に追加してください。(defer属性を忘れないようにしてください）
  49 </li>
  50  <li>さらに、body要素の中に、「&lt;object data="zeimusu_sakura_.svg" type="image/svg+xml" width="180" height="200"&gt;&lt;/object&gt;」とコピーして入れます（type属性を忘れないようにしてください）。以下のサンプルのようになります。</li>
  51  <li>編集したHTML文書とSVG画像、それに、「sie.js」をネット上にアップロードすればOKです。</li>
  52 </ol>
  53 <h4>書き方の例（サンプル）</h4>
  54 <pre>&lt;html  xmlns="http://www.w3.org/1999/xhtml"&gt;
  55 &lt;head&gt;
  56 &lt;title&gt;SIE&lt;/title&gt;
  57 <strong>&lt;script defer="defer" type="text/javascript" src="sie.js"&gt;&lt;/script&gt;</strong>
  58 &lt;/head&gt;
  59 &lt;body&gt;
  60 &lt;h1&gt;SIE - プラグインなしでIEにSVGを表示する方法&lt;/h1&gt;
  61
  62 &lt;h2&gt;デモ（zeimusu_sakura_.svg）&lt;/h2&gt;
  63 <strong>&lt;object data="zeimusu_sakura_.svg" type="image/svg+xml" width="180" height="200"&gt;&lt;/object&gt;</strong>
  64     &lt;/body&gt;
  65 &lt;/html&gt;</pre>
  66 <form>
  67 <p>テキスト貼り付け</p>
  68 <textarea rows="10" cols="40">&lt;html  xmlns="http://www.w3.org/1999/xhtml"&gt;
  69 &lt;head&gt;
  70 &lt;title&gt;SIE&lt;/title&gt;
  71 &lt;script defer="defer" type="text/javascript" src="sie.js"&gt;&lt;/script&gt;
  72 &lt;/head&gt;
  73 &lt;body&gt;
  74 &lt;h1&gt;SIE - プラグインなしでIEにSVGを表示する方法&lt;/h1&gt;
  75
  76 &lt;h2&gt;サンプル（zeimusu_sakura_.svg）&lt;/h2&gt;
  77 &lt;object data="zeimusu_sakura_.svg" type="image/svg+xml" width="180" height="200"&gt;&lt;/object&gt;
  78     &lt;/body&gt;
  79 &lt;/html&gt;</textarea>
  80 </form>
  81 <p>以下に、サンプルのSVG画像が表示されたはずです。</p>
  82 <object data="zeimusu_sakura_.svg" type="image/svg+xml" width="180" height="200"></object>
  83 <p>なお、圧縮版のsie-mini.jsも、sie.jsと同じ使い方です。</p>
  84 <p class="center"><a href="help.html">ヘルプに戻る</a></p>
  85 <address>&copy; Copyright 2007 dhrname（Eメールで<a href="mailto:sie-developers@lists.sourceforge.jp">sie-developers@lists.sourceforge.jp</a>）コードの著作権の許諾に関しては、MPLライセンスが適用されます。このページの許諾に関しても、同様のライセンスが適用されるものとします。</address>
  86 <!--/*SIE-SVGtoVML LGPL2.1 & GPL1.1 & Mozilla Public Lisence*/
  87 /* ***** BEGIN LICENSE BLOCK *****
  88  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
  89  *
  90  * The contents of this file are subject to the Mozilla Public License Version
  91  * 1.1 (the "License"); you may not use this file except in compliance with
  92  * the License. You may obtain a copy of the License at
  93  * http://www.mozilla.org/MPL/
  94  *
  95  * Software distributed under the License is distributed on an "AS IS" basis,
  96  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  97  * for the specific language governing rights and limitations under the
  98  * License.
  99  *
 100  * Contributor(s):DHRNAME
 101  *
 102  * Alternatively, the contents of this file may be used under the terms of
 103  * either of the GNU General Public License Version 2 or later (the "GPL"),
 104  * or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
 105  * in which case the provisions of the GPL or the LGPL are applicable instead
 106  * of those above. If you wish to allow use of your version of this file only
 107  * under the terms of either the GPL or the LGPL, and not to allow others to
 108  * use your version of this file under the terms of the MPL, indicate your
 109  * decision by deleting the provisions above and replace them with the notice
 110  * and other provisions required by the GPL or the LGPL. If you do not delete
 111  * the provisions above, a recipient may use your version of this file under
 112  * the terms of any one of the MPL, the GPL or the LGPL.
 113  *
 114  * ***** END LICENSE BLOCK ***** */-->
 115     </body>
 116 </html>