すぐるホームページ > きしも.com > インターネット,コンピュータ > スライド学習ページ作成ツール

スライド学習ページ作成ツール

 次のような,スライド学習ページを作成できるツールです。

      

 このサンプルでは3ページしかありませんが,ページを進ませるボタンや前に戻るボタンなどをクリックしてみて,正常に動作することを確認してください。

 次のボタンをクリックすると,ツールが起動されます。

 このツールの使い方を簡単に解説していきます。
 スライド学習ページの中に,もし,画像も表示したい場合は,画像を前もって作成しておきます。
 サンプルとして,次の3個の画像を用意しました。
1.gif2.gif3.gif
 画像の幅(width),高さ(height)も,あらかじめ調べておいてください。
 このツールの起動直後は,次のような画面になっています。

 青みがかった部分が黒板,そのすぐ下の灰色の部分が操作盤です。
 操作盤の真ん中にある "1/1"という数字は,「全1ページ中1ページ目」を表します。
 操作盤のすぐ下にあるテキストエリアに,1ページ目として黒板に表示したい文を入力していきます。

 3つの角の大きさが30°,60°,90°の直角三角形は,<img src='1.gif' width='96' height='142' align=right>

 更新ボタンをクリックすると,黒板に文が表示されます。

 画像は枠だけが表示されている状態です。
 また,操作盤のところのページ表示は,"1/2"となっています。
 「全2ページ中1ページ目」という意味です。
 これは,1ページ目は作成されたので,新しく2ページ目を作成する準備が整ったことを表しています。
 操作盤の中のボタンをクリックすると,黒板は2ページ目になり,文の入力を促されます。

 2ページ目として黒板に表示したい文を入力します。

 もっとも短い辺ともっとも長い辺の長さの比が1:2になります。<img src='2.gif' width='96' height='169' align=right>

 更新ボタンをクリックして黒板に文を表示させます。ページ表示は,"2/3"となっています。

 再びボタンをクリックし,3ページ目の文を入力します。

 右の図のように,1辺の長さが2である正三角形をまん中で折れば,この直角三角形ができるからです。<img src='3.gif' width='158' height='179' align=right>
 更新ボタンをクリックして黒板に文を表示させます。ページ表示は,"3/4"となっています。

 これで,スライド学習ページの入力は終了です。"HTML作成"ボタンをクリックすると,その下にテキストエリアが出現し,HTMLがハイライト表示されています。

 ハイライト表示されている部分をコピーし,メモ帳などでファイルを作成します。拡張子は ".js" にします。
 HTMLファイルに挿入するときは,たとえばファイル名を"id_1.js"にした場合は,<script type="text/javascript" src="id_1.js"></script> とします。
 注意:このプログラムはhtml4ベースのプログラムのため,HTMLファイルを作成するときはヘッダ部分に
   <meta http-equiv="x-ua-compatible" content="IE=6" >
   <meta http-equiv="x-ua-compatible" content="IE=EmulateIE6" >
   の2行を挿入してください。
 作成したファイルと同じフォルダに,前もって作成しておいた画像ファイルも入れます。(サンプルの場合は,"1.gif", "2.gif", "3.gif")
 また,ボタンなどの画像ファイルは,次の "button.lzh" を右クリックするなどしてダウンロードし,lhacaなどで解凍してできた画像ファイルを,やはり同じフォルダに入れてください。

button.lzh

 もし解凍ソフトがない場合は,次の8つの画像をすべて右クリックすれば,ダウンロードできます。


きしも.com