TOSSランド＞TOSSコミュニティ＞サークル・県別ML＞全国ネット研究会

Flash 使い方教室

作成者：TOSSオホーツク・山田正和
作成日：2003年 3月22日(土)
最終更新日：2003年 3月24日(月)

課題２１：ホームページから、リンクさせなさい。個人サイトが無い方は、後回しでも構いません

●ステップ１：白玉だけを転送しなさい。

今回は、いよいよ「転送（アップ）(*1)」を学習します。
自分の作った作品（Flash コンテンツ）をインターネット上に公開し、多くの方に見てもらうのです。
【課題１９】の宿題「オリジナルフリップの作成」は終っているでしょうか？
今回は「オリジナルフリップ」を、自分のサイト（プロバイダ）に「転送」してもらいます。
「転送」の方法は、大雑把に言って３つあります。

Ａ．転送ソフトで「転送」する。

「ＦＴＰソフト」「ＦＴＰツール」「ＦＴＰクライアント」などと呼びます。

一番有名で広く使われているのは、無料ソフトの「ＦＦＦＴＰ」です。

Ｂ．ホームページ作成ソフトで「転送」する。

市販されている「ホームページ作成ソフト」には「転送」機能を持つものが多いです。

「ホームページビルダー」の場合、「ＦＴＰツール」または「ファイル転送」という機能を使います。
「ホームページビルダー７」の場合、画面の上にある「ツール」→「ＦＴＰツールの起動」とクリックします。

Ｃ．インターネットエクスプローラーで「転送」する。

あまり知られていませんが"Internet Explorer"には、「転送」機能があります。
設定さえできれば、ドラッグ＆ドロップだけで「転送」ができるのが大変便利です。

「ホームページ作り方教室」サイトで詳しく解説していますので、興味のある方は見てください。
これから自分のやりやすい方法で「転送」してもらいます。
上記Ａ～Ｃ、どの方法でも構いません。
「転送」するファイルは、ただ１つ。
白玉ファイル（swfファイル）のみを「転送」すればＯＫです。
Flash の場合、「どんなファイルを転送すれば良いのか？」についての答えが３通りあります。
その中で一番簡単なのが「swfファイルだけを転送すること」です。
「Ctrl」＋「Enter」で「書き出し」した白玉ファイルを、そのまま「転送」してしまえば良いのです。
「Flash作品（白玉ファイル）の転送」は、「ホームページ（HTMLファイル）の転送」と全く同じ手順で行います。
既にホームページ（自分の個人サイト）をお持ちの方なら、何も難しいことはないはずです。(*3)
それでは自分の「オリジナルフリップ」を「転送」しなさい。

*1：「転送」を「アップ」と呼ぶこともある理由は、ご存知でしょうか？
　実はホームページ等の「転送」のことを、英語で「アップロード(up load)」と言うのです。(*2)
　つまり「アップロード」を省略して「アップ」というわけなのです。

*2：「ロード(load)」は英語で「入れ物の中に物を入れる」「乗り物に人が乗り込む」「荷台に荷物を積み込む」の意味です。
　つまり「パソコンの中にあるファイルを、違うコンピュータの中の入れる（コピーする）」ので「ロード」と言うのです。
　「自分のパソコン（小さい入れ物）から、プロバイダのコンピュータ（大きな入れ物）へのコピー」が「アップロード（上へのロード）」。
　その逆の「プロバイダのコンピュータ（大きな入れ物）から、自分のパソコン（小さい入れ物）へのコピー」が「ダウンロード（下へのロード）」です。

*3：本講座は「Flash使い方教室」ですから、「転送」の細かい手順については解説しません。
　「転送」は「ホームページ作成」の学習内容です。
　というか、受講生ごとの違い（プロバイダの違い・パスワードやアドレスの違い）が多すぎて書きようがありません。

●ステップ２：ブラウザで見てみなさい。

「転送」した白玉ファイルを、「インターネットエクスプローラー(*1)」で見てみましょう。
「インターネットエクスプローラー」のアドレス欄をクリック。
キーボードを使って、「転送」した白玉ファイルのアドレス（URL）を書き込みなさい。

書き込むアドレス（URL）の例１

自分のホームページ（個人サイト）のアドレス→"http://www.yamadarn.com/swf/"

転送した白玉ファイルのファイル名→"kanji.swf"

書き込むアドレス→"http://www.yamadarn.com/swf/kanji.swf"

書き込むアドレス（URL）の例２

自分のホームページ（個人サイト）のアドレス→"http://www.yamadarn.com/swf/index.html"

転送した白玉ファイルのファイル名→"hitujyun.swf"

書き込むアドレス→"http://www.yamadarn.com/swf/hitujyun.swf"
最後に「Enter」キーを押すと、自分の「オリジナルフリップ」が表示されます。

▲「インターネットエクスプローラー６（左）」と「オペラ７（右）」の画面写真。
キーボードの上の方、「Ｆ１１」キーを指で押しなさい。
画面が「全画面表示（フルスクリーン表示）」になります。

▲「インターネットエクスプローラー６」の通常表示（左）と全画面表示（右）
もう一度「Ｆ１１」キーを押すと、全画面表示（フルスクリーン表示）から元の画面に戻ります。
Flash 作品を授業で使うとき、なるべく大きく表示した方が良いのは言うまでもありません。
プロジェクターや、大型のテレビを使って、多くの子どもたちに見せる場合です。
そんな時に、この「Ｆ１１」キーで「全画面表示」は大変便利です。
覚えておいて損はないでしょう。(*2)
画面右上の「□」をクリックするよりも、すっきりとした画面で大きくなるからです。
ただし、【課題７】での学習した内容と、混同しないように気をつけてください。

自分のパソコンの中の白玉ファイルを全画面表示

「Ctrl」＋「Ｆ」キー。「フラッシュプレイヤー」を全画面表示にする操作です。 (→課題７)

インターネット上の白玉ファイルを全画面表示

「Ｆ１１」キー。「インターネットエクスプローラー」を全画面表示にする操作です。

*1：もちろん"Opera"や"Mozilla"や"Netscape"など、他の「ブラウザ（ホームページ閲覧）」ソフトでも構いません。

*2："Opera"や"Mozilla"や"Netscape"でも、「Ｆ１１」キーが全画面表示です。

●ステップ３：「白玉だけを転送」の欠点を知りなさい。

「白玉（swfファイル）だけを転送する方法」は、最もお手軽で簡単な方法です。
作品自体の完成度が十分なら、このままTOSSランドに登録してしまっても良いぐらいです。
ですが残念なことに、この方法には大小幾つかの欠点があります。
１つ目の大きな欠点は「作品の概要が分かるまで時間がかかる」ということです。
TOSSランドに登録されたサイトは、基本的に以下の手順で利用されます。
TOSSランドで検索　→　そのサイトにアクセス
ですから「白玉だけを転送している」場合、TOSSランドから直接白玉ファイルにアクセスすることになってしまいます。
TOSSランドで検索　→　白玉ファイルにアクセス
多くの方に経験があると思うのですが、凝った作りのFlash作品ほど、表示されるまで時間がかかります。
ファイルサイズ（データ量）が多いため、ダウンロードされるまでに時間がかかるということです。(*1)
ＡＤＳＬの普及により、インターネット回線の速度もずいぶん高速化されてきました。
ですが地方では、まだISDNしか使えない状況だったりします。
勤務校によっては、アナログ回線しか通っていないところもあります。
そんな低速回線（ナローバンド）な環境の方が、白玉ファイルが完全に表示されるまで待ってくれるでしょうか？
３０秒以下ならばともかく、それ以上になるとちょっと辛いです。
表示されるFlash作品が「間違いなく（今の自分の）役に立つ」という確信があれば話は変ってきます。
ですが、時間に追われている方は悠長なことをしていられません。
ダメならダメで、違うサイトを見つけて授業の準備をしなければならないのです。
しかもTOSSランド検索時に表示される「要約文（サマリー）」は、わずか１００字しかありません。
これでは「その作品が役に立つのかどうか？」を判断するのに、表示完了（ダウンロード完了）を待つしか方法がありません。
TOSSランドの理想を、向山先生は以下のように語っています。

「どこよりも早く、どこよりも役に立ち、しかも無料」

「産休明けで仕事と育児と家事に追われて時間がないお母さん先生でも、すぐに授業の準備ができる」
つまり、TOSSランドを理想に近づけるには、「白玉だけを転送する方法」では不十分なのです。
２つ目の大きな欠点は「授業での利用法が分かりにくい」ということです。
凝った作りのFlash作品（授業用の教材教具）の中には、利用法が分かりづらいものがあります。
絵や音など演出面は大変優れているのですが、
「どんな指示・発問・説明を行えば良いのか？」
「どのタイミングで、「次へ」ボタンをクリックすれば良いのか？」
ということについて、分かりづらいものがたくさんあるのです。
主要な指示・発問が Flash上に表示されるものがありますが、不十分なことも多いです。
作品を作った本人ならば、キチンと理解していることでしょう。
ですが普通の利用者は、何度も練習しなければ完全に使いこなすことが不可能です。
つまり、Flash作品（白玉ファイル）とは別に、授業の展開を書いた論文（レポート）が必要になってくるのです。
Flash作品内に、使い方を記述することも不可能ではありません。
ですが、できれば印刷（プリントアウト）して、紙として手にしやすい形式の方が使いやすいでしょう。

*1：ステップ１で「転送」した「オリジナルフリップ」は、練習用の作品です。
　ですからそれほど待ち時間はかからないでしょう。
　ですが将来、より本格的なTOSSランド登録用Flashコンテンツを作るときに、この問題が大事になってきます。

●ステップ４：解説用ページを作ることの意義を知りなさい。

１つ、作品の概要を短時間で相手に伝えること。
TOSSランドのわずか１００字の要約文（サマリー）よりも、もう少し詳しく伝えること。
２つ、作品の利用法（指示発問・クリックタイミング）も、相手に伝えること。
できれば印刷して紙として手にしやすい形式にすること。
この２つの欠点を解決するには、「白玉（swfファイル）だけを転送」に代わる第２の方法が必要です。
それは「解説用のホームページからリンクさせる方法」です。

１．解説用のホームページを作る。

「ホームページビルダー」などを使って、HTML形式のファイルを作ります。

指示発問を書く場合は、普通の「法則化論文形式のページ」になります。

２．白玉ファイルへリンクさせる。

解説用ページ（HTMLファイル）から、白玉（swfファイル）へリンクさせます。

「ホームページビルダー」などを使って、解説用のページにリンク・タグ（<a href="○○.swf">～</a>）」を書き込みます。

３．２つのファイルで、１つのサイトとする。

解説用ページ（HTMLファイル）と白玉（swfファイル）の両方を「転送」します。

４．解説用ページをTOSSランドに登録する。

解説用ページだけを、TOSSランドに登録します。

文章量にもよりますが、HTML形式の方がファイルが小さいので、表示待ち時間が短くなります。
もちろん、１つの授業に２つ以上のFlash作品を使う場合は、解説（HTML）１ページ＋Flash（白玉）２ページ以上ということもありえるでしょう。
この第２の方法で作られたサイトを、幾つか紹介しておきます。参考にしてください。

フラッシュを使った漢字文化の授業

作：門　貴幸氏　TOSSランドナンバー：3120046

法則化論文形式のページ（指示発問が枠囲いで示されたもの）とFlash作品の組み合わさったサイトです。(*1)

→http://www5d.biglobe.ne.jp/~tak-kado/kanjibunka-hatumonsiji.htm(*2)

計算のきまりを見なおそう（東京書籍）Ｐ６２の図

作：平田純也氏　TOSSランド仮登録中

算数の教科書と併用するタイプのFlashサイトです。
その教科書ページの授業用論文（指示発問）があれば、更に使いやすいサイトになります。

→http://www2.odn.ne.jp/~chy66220/5nennp62.html

ローマ字 Flash！

作：小貫義智氏　TOSSランドナンバー：5410554

子ども用解説ページ(HTML)から、保護者／教師用解説ページ(HTML)と、Flash作品（swf）へそれぞれリンクしている丁寧な作りのサイトです。

→http://homepage2.nifty.com/87onuki/roman/index-roman.htm(*2)

フラッシュ版・中学社会科復習三択問題集

作：染谷幸二氏　TOSSランド仮登録中

１つの解説ページから、無数のFlash作品（白玉ファイル）へリンクされています。

→http://www.marimo.or.jp/~someya/furassyu.htm

理科フラッシュサイト

作：松岡義智氏　TOSSランド仮登録中

上記の染谷先生のサイトと同じ作りですが、個々の作品について１文ずつ説明しているのが特徴です。

→http://www3.ocn.ne.jp/~matsu01/rikaflashsitesubpage.html

ピッタンコくんのテトリス型学習ゲーム

作：五十嵐勝義氏　TOSSランドナンバー：1310109

解説用ページに、作品の画面写真を掲載しているタイプです。
Flashではなく、Directorを使った作品なのですが、サイトの作りは参考になります。

→http://tokubetsu-shien.net/kawai/puzzle-kun.htm(*2)

*1：厳密に言えば、次回学習する第３の方法も併用しています。

*2：リンク許可をもらっていないので、アドレス（URL）を書くだけにしておきます。

●ステップ５：解説用ホームページを「転送」しなさい。

では「オリジナルフリップ」の解説用ホームページ(HTMLファイル)を作りなさい。
「ホームページビルダー」を使うなり、「ホームページ使い方教室」の方法を使うなり、好きな方法で構いません。
本講座は「Flash使い方教室」ですから、細かい手順については指示しません。
「解説用ホームページの作成」は、文字通り「ホームページ作成講座」の学習内容です。
一応、文章を書き直して使える、ひな形（テンプレート）を用意しておきます。
必要な方は、ダウンロードして使ってください。
ダウンロードした後、「ホームページビルダー」「メモ帳」「Oedit」などで開いて文章を書きなおすのです。
ひな形は、題名を右クリック→「対象をファイルに保存」でダウンロードできます。

→解説用ホームページのひな形（CSSあり版）

「ホームページ作成講座 in ＭＬ」または「ホームページ作り方教室」の受講経験者用です。

"orange_line.css"へのリンクが既に書き込まれています。
"orange_line.css"と同じフォルダに転送すると、自動的に色や枠囲いなどの体裁が整います。

→解説用ホームページのひな形（CSSなし版）

「ホームページ作成講座 in ＭＬ」または「ホームページ作り方教室」を受講したことがない人用です。

最小限の体裁しか整えていませんので、ご自分で色を変えたりしてください。
ダウンロード後は、もちろんファイル名を書き直しても構いません。
白玉ファイル（swfファイル）と同じ名前にした方が混乱が少なくて良いでしょう。
改造例も用意しておきますので参考にしてください。
→改造例１（語句をリンクに変えたもの）
→改造例２（写真を貼って、リンクに変えたもの）
「リンクのさせ方（リンクの張り方）」は分かりますか？
「ホームページビルダー７」の場合は以下の通りです。
- １）リンクにしたい語句を選択する（反転表示にする）
- ２）選択した語句を右クリック→「リンクの挿入」
- ３）「ファイルへ」タブを選択。
- ４）「ファイル名」欄の右下、「参照」をクリック。
- ５）「ファイルの種類」欄を「すべてのファイル」にする。
- ６）リンクさせる Flash作品（白玉ファイル）を見つけ出して、クリック
- ７）「開く」→「ＯＫ」
「メモ帳」や「Oedit」などで、直接タグを書き込む場合は以下の通りです。
"kanji.swf"へリンクさせる場合を例に書きました。
```
→Flash作品へのリンク
```
↓
```
<a href="">→Flash作品へのリンク</a>
```
↓
```
<a href="kanji.swf">→Flash作品へのリンク</a>
```
解説用ホームページが出来たら、ステップ１と同じ手順で「転送」しなさい。
ステップ１で「転送」した白玉ファイルの側に、HTMLファイルを送ってやるのです。
「転送」が終ったら「インターネットエクスプローラー」で見てみなさい。
ステップ２と同じ手順です。

書き込むアドレス（URL）の例

ステップ２で書き込んだアドレス→"http://www.yamadarn.com/swf/kanji.swf"

ここで書き込むアドレス→"http://www.yamadarn.com/swf/kanji.html"
解説用ホームページは、正しく表示されましたか？
リンク語句をクリックすると「オリジナルフリップ（白玉ファイル）」が表示されましたか？
お疲れさまでした。以上で今回の学習は終了です。

*1：ひな形をダウンロードする方法は、リンク語句を

▲このページの先頭に戻る →課題２２へ