FC2ブログ

スポンサーサイト

  1. トップ
  2. スポンサー広告
  3. スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | コメントを書いてくれる人はこちら(-) | トラックバック(-) | [編集]
このページのトップへ移動する。

職業訓練WEBクリエーター科45日

  1. トップ
  2. WEB制作総合演習 個人
  3. 職業訓練WEBクリエーター科45日

職業訓練WEBクリエーター科45日

総合演習

テーマ・・・いつものところ亭のWEBサイト作成

今日のスケジュール

今日は、WEBサイトのページ5ページを作成した。

1・トップページ

2・メニュー一覧ページ

3・店舗情報

4・サービス案内

5・サイトマップ

CSSでのコーディングはだいたい修了したので、明日水曜日は、画像関係を編集していきたいと思う。

スポンサーサイト
このページのトップへ移動する。

職業訓練WEBクリエーター科44日

  1. トップ
  2. WEB制作総合演習 個人
  3. 職業訓練WEBクリエーター科44日

職業訓練WEBクリエーター科44日

総合演習

テーマ・・・

本当の仕事っぽく

期限

来週の8月6日(月)まで、

発表

8月7日(火)

パワーポイントで作成し発表時間は一人5分

必要なページ

  1. 表紙
  2. 方針・・・ターゲット層・画面設計(デザインに入るかも)
  3. デザイン・・・作ったサイトのページ
    1. トップ
    2. 2階層目
    3. サイト構成図等
  4. 今後の展開について(提案)
  5. 実際にはスケージュールが必要

注意点

クライアントの希望は必ず盛り込む。

要望

ロゴの作成

ただし決まったロゴはないので、こちらでイメージにあったロゴを作成

クーポン券を付けたい

アルコール以外のドリンククーポン券1杯サービス(一人1枚の利用)  期限・・・特になし

つきがえメニューの毎月紹介

従業員が更新

従業員のWEB知識

WEBを見たり、メールをみたりしてる。

最近個人でビルダーを購入

WEBデザイン

こちらにお任せ

WEB作成するにあたり用意されたデータ

メニュー 一覧表

和食 ※そば以外にはみそ汁が付いてくる。

  • おにぎりセット・・・350円
  • 親子丼・・・650円
  • 鉄火丼・・・650円
  • ざるそば・・・600円
  • たぬきそば・・・500円
  • 山菜そば・・・600円
  • 天ぷらそば・・・750円
  • 山菜定食・・・1,000円
  • 天ぷら定食・・・1,100円
  • 刺身定食・・・1,200円
  • いつものところ定食・・・900円
  • 今月のおすすめセット・・・1,000円

中華(ラーメン類以外にはスープが付いてくる)

  • ラーメン・・・500円
  • 味噌ラーメン・・・550円
  • 塩バターラーメン・・・650円
  • ねぎ味噌ラーメン・・・650円
  • タンメン・・・700円
  • 五目チャーハン・・・600円
  • レタスチャーハン・・・600円

洋食(サラダ付き)

  • サンドイッチ・・・500円
  • トーストセット・・・500円
  • カレーライス・・・600円
  • オムライス・・・600円
  • ハンバーグセット・・・700円
  • ナポリタン・・・700円

一品料理(おつまみ)

  • ポテトサラダ・・・400円
  • 餃子・・・400円
  • 天ぷら・・・800円
  • 刺身・・・800円
  • 冷奴(ひややっこ)・・・200円
  • お新香・・・150円

お飲み物(ノンアルコール)

  • コーヒー・・・250円
  • アイスコーヒー・・・300円
  • 紅茶(レモン・ミルク)・・・250円
  • アイスティー・・・300円
  • オレンジジュース・・・300円
  • コーラ・・・300円
  • ジンジャエール・・・300円
  • ウーロン茶・・・300円

お飲みもの(アルコール類)

  • ビール(中)・・・450円
  • お酒・・・500円
  • 梅サワー・・・400円
  • ウーロンサワー・・・400円

夏季限定メニュー

冷やし中華セット・・・700円

晩酌セット・・・650円

写真(イメージ画像を含める)

地図(データ)

イラストレーターにて作成

地図・・・文字サイズ変更可能

地下鉄・・・徒歩5分以内

クライアントの雰囲気

見た目

50歳ぐらいの男性

メールは怖い

問い合わせ電話のみ

メールでの予約受付等

メールでの予約受付等はWEBの成果がでると興味がわき、出来る用になるかも・・・

WEBページを依頼したきっかけ

店長がフリーペーパーを見て、ほかの食べ物屋さんのWEBページがあり人がWEBページを見るかもとゆうことで作成を依頼した。

店舗情報

店名

いつものところ亭

営業時間

11:00~14:30   17:00~21:00

定休日

毎週火曜日

駐車場

2台

座席数

50席

住所

〒000-0000

城山県森崎市青葉区柿崎町 2-5-10

電話

XXX-316-1056

その他

宴会が入ると貸切

値段が安い(大衆向け)

和風の食べ物屋

座敷 テーブル有り

小さな子供も可能

ラストオーダー 1時間前

晩酌セットあり(650円)

立地条件

近くに県庁がある

地下鉄から歩いて5分以内

昼間は県庁が近いためサラリーマン

夜 家族連れ サラリーマンの会社帰り

案件に対する質問事項

なにか質問がある場合はメールでやりとりをする。

メールのあて先は小林さん宛てにメールで送る。

このページのトップへ移動する。

職業訓練WEBクリエーター科43日目

  1. トップ
  2. PowerPoint
  3. 職業訓練WEBクリエーター科43日目

職業訓練WEBクリエーター科43日目

使用ソフト・・・Microsoft Office PowerPoint2003

使用教科書

よくわかるPowerPoint2003

授業の内容

第6章 特殊効果とスライドのデザイン設定

よくわかるPowerPoint2003 P141~172

作業ウィンドウから操作する。

第7章 プレゼンテーションをサポートする機能

よくわかるPowerPoint2003 P175~193

第8章 便利な機能

よくわかるPowerPoint2003 P197~214

ショートカットキー

レベル上げ TABキー

レベル下げ SIFT+TABキー

スライドショー実行 F5

スライドショーの途中終了 ESCキー

作業ウィンドウ表示 Ctrl+F1

プレースフォルダの選択 F2

マスタ表示 SIFT+スライドマスタ表示ボタン

マウスポインタをフェルトペンの状態にする。 Ctrl+P

内容を消去 E

ペンを解除する。 Ctrl+U

このページのトップへ移動する。

職業訓練WEBクリエーター科42日目

  1. トップ
  2. PowerPoint
  3. 職業訓練WEBクリエーター科42日目

職業訓練WEBクリエーター科42日目

使用ソフト・・・Microsoft Office PowerPoint2003

使用教科書

よくわかるPowerPoint2003

授業の内容

職業訓練でPowerPointの使用目的

クライアントから以来を受けてそのサイトを発表する。

PowerPointとは?

PowerPointはプレゼンテーションをするソフト

作成手順

よくわかるPowerPoint2003 P13

1~8までの手順がある。

作成するためのプランニングワークシート

手順1の部分 作成するための構成を検討するために使用する。

スライド

全体のレイアウトが表示される。

アウトライン

文字部分のみ表示される。

デザインテンプレートを使って作成する。

第2章

あらかじめ決まったテンプレートが用意されており、それを使ってすばやく資料を作成する。

プレースフォルダと文字の編集

第3章

プレースフォルダとは、作業をするボックス

文字に対する書式の設定

図やオブジェクトの挿入と編集

第4章

図やオブジェクト関係の設定

図形の作成と編集

第5章

オートシェイプの使い方

ショートカットキー

レベル上げ TABキー

レベル下げ SIFT+TABキー

スライドショー実行 F5

スライドショーの途中終了 ESCキー

作業ウィンドウ表示 Ctrl+F1

プレースフォルダの選択 F2

このページのトップへ移動する。

職業訓練WEBクリエーター科41日目

  1. トップ
  2. WEB制作の勉強
  3. 職業訓練WEBクリエーター科41日目

職業訓練WEBクリエーター科41日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書

ゼロからはじめるJavaScript ホームページ辞典 WEBクリエータのためのベーシックデザイン

授業の内容

FTPの役割

WEBページを自分のパソコンで作成して、そのWEBページをサーバーに転送する。

この転送するために使用するプロトコルがFTPである。

自分PC

どのフォルダのどのファイルを送るのがを把握

サーバー

どのフォルダ(ディレクトリ)に転送(アップロード)するのか?

サーバーに転送するためには

ユーザー名・パスワードが必要

ログインしたら、自分専用のディレクトリ(フォルダ)が使用可能になる。

それ以外のサーバーフォルダーは使用ができない。

画面上で表示されるディレクトリ(フォルダ)は/と表示されるが、実際はログインした個別のディレクトリである。

URLについて

http://www.jc-21.co.jp/web/pk19007

http://・・・定型分HTTPプロトコルの指定

www.jc-21.co.jp・・・はコンピューター名(サーバー名)

/web/pk19007・・・以下コンピュータのディレクトリ(フォルダ)名

サーバーにアクセス(FTPを使う)場合・・・ftp.jc-21.co.jp

このコンピューター名は同一のコンピュータ

FTPのアカウントでアクセスした場合

/で表示されるが、WEBで閲覧する場合は/web/pk19007で表示される。

URLが/で終了した場合index.htmlが自動的に付け加えられる。

CGIファイルを使用するにあたって

CGIファイルをアップロードするだけだと、CGIが実行(起動)できないので、

ファイルの属性を変更しなければならない。

ファイル属性には

呼び出し・・・ページを読み取る(WEBページブラウザで表示)させることができる。

書き込み・・・ページに直接書き込むことができるように許可を与える。

実行・・・プログラムを実行する許可を与える。

の属性がある。

最初は実行を許可しない設定になっているので、これをCGIファイルの場合実行を許可するように変更する。

今後の日程

文書 Power Point 7月26日(木)~27(金)

担当先生・・・小山先生

総合演習(個人) 7月30日(月)~8月7日(火)

制作のロールプレイング

要求使用にしたがってWEBページを作成する。

競合プレゼンテーションをする。

担当先生・・・島崎先生 何日か山田先生

要求使用は何か?を必ず島崎先生に確認する。

発表会 8月7日(火)

実際に企業の方が来ていただける可能性もある。

制作実践(グループ) 8月8日(水)~8月29日(水)

グループ演習

結構大変!!

グループ分け・・・今回まったくのランダム

4名グループ6チーム

追加注文の可能性もある。

チームメイト発表

発表会 8月29日(水)

実際に企業の方が来ていただける可能性もある。

オリエンテーション ビジネスマナー 8月30日(木)

WEBクリエーターのためのベーシックデザイン

第6章 ユーザビリティ(使いやすさ)

P93~P103

ユーザビリティとは?

認知性

それが何であるか瞬時にわかる。

操作性

それを簡単に操作することができる。

快適性

それを使うことで楽しさや満足感が伴う。

リンク

テキストリンクは初心者でも認識しやすい

画像リンクはボタン状の加工をするとリンクしやすい。

ピクトグラム/アイコン

道路の標識のように、直感的にイメージしやすい画像をアクセントとして入れてあげると、認識しやすい。

注意

オリジナルのイメージはユーザーによって解釈が異なる。

アイコンのポイント

誰が見てもわかること

繰り返し利用すること

ロールオーバー

使いやすさとゆう意味では積極的に使う

ロールオーバーは、画像データが2倍になるので、データ量を大きくしないように注意する。

注意

マウスオーバー状態で文字が現れるよなロールオーバーは避けること

CSSによるロールオーバーも可能

画像をロールオーバーをさせたい場合、透過GIFを使用して、a hoverに背景色を設定すると画像の色が変更されるような効果が得られる。

ナビゲーション

WEBサイトの各サイトにどのような手法でたどりつけるのか

ナビゲーションの種類

左メニュー型

ヘッダー・フッダー型

複合型

まとめ

一般的に作る。

アフォーダンス・・・P98

見ただけで直感的にすぐわかるサイトを目指す。

ユーザビリティの10原則

サイトの目的を明確にする

1・ワンセンテンスのタグラインを入れる。

2・ウィンドウタイトルを付ける

3・企業情報は1つエリアにまとめる。

ユーザーが求めるものを見つけやすくする

4・サイトの主要なタスクを強調する。

※トップページのリンクは4つに絞り込む

5・検索入力ボックスを付けておく。

※25文字分のテキストボックスは確保する。

サイトのコンテンツを紹介する。

6・実際のコンテンツの例を提示する。

リンクをクリックするとどのような内容が提示されるか明確にする。

7・リンク名は最も重要なキーワードから始める。

8・最新フィーチャー(情報)にアクセスしやすくしておく

※できるだけ短い更新リストにする。

ビジュアルデザインはインタラクションを強化するもので、定義するものではない

9・重要なコンテンツをフォーマットしすぎない

あまり飾り過ぎない

10・意味のあるグラフィックを使う

余計なグラフィックを使わない

弟7章 WEBページのタブー(禁じ手)

テキストのタブー

文字化け

機種依存文字は使用しない

文字コードの指定

文字のコードを必ず記述する。

CSSによる文字と行間の指定

一行をやたらと長くしない

20文字~25文字

行間を空ける

だいたい150%~120%で指定する。

文字サイズ指定

相対単位を使用する。

ページタイトル

必ず付ける。

ページの見出しタイトルになる。

HTML文書中の改行

HTMLで改行されると、ブラウザによって半角スペースが入ってしまう。

イメージのタブー

イメージサイズの指定

イメージのサイズと同じように指定する。

大きいものを小さくしたり

小さいものを大きいものに変更するのはタブー

<img>タグの中でwidth・heightを指定すると早くなる。

ALT属性を必ず設定してあげる。

画像が表示できなかった場合に画像の中身がわかるように付ける。

音声読み上げソフトを使った場合も画像のALT属性を読み上げる。

テーブルのタブー

不要なテーブルは使わない

テーブルを使うと表示が遅くなる。

テーブルの単純化

罫線が入り組んでいないようにする。

テーブルのテクニック

伸縮する角丸の枠

丸まっている画像を4つの角に作成して、

伸縮する縦・横の画像を1pxの画像として作成する。

空白のセル

ブラウザによっては、空白のセルが歯抜け状態で表示されることがあるので、必ず&nbspを空白セルに挿入する。

リンクのタブー

リンク切れ

サイト内リンクのリンク切れは、WEBページ制作者として評価が下がるので、注意すること。

注意ポイント

1・ファイル名は小文字で統一する。

2・拡張子を統一する。

三文字拡張子を使うのか4文字拡張子を使うのか決める。

3・ファイル名を付ける際にスペルミスや省略をしない。

多少長くなってもフルネームで記述する。

4・WEBページ作成ソフトを使用する。

自動チェック機能を有効に使う

行き止まりページは作らない

初心者が戻り方を知らない場合戻れない。

リンクを新しいウィンドウで開く

スクロールバーは必ず表示させてあげる。

あまり新しいウィンドウで表示させるのは避ける。

フレームの利用

フレームは古い技術なので、使わない。

トップページへアクセスするためのリンクを作る。

 

 

このページのトップへ移動する。

職業訓練WEBクリエーター科40日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科40日目

職業訓練WEBクリエーター科40日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

第7章 フォームを処理するプログラム

ゼロからはじめるJavaScript P165~199

ここの章はプロの現場でも使用しているところが多い!!

使用タグ一覧

<select>

<textarea・・・・>

<input ・・・・>

のタイプ

<input type="submit">・・・・サーバーに送信するボタン

<input type"reset">・・・・初期値に戻すリセットボタン

<form>タグの中

actionについて

フォームの内容を送信する送信先を書く"

送信先(例)・・・tyumon.cgiまたはphp

cgi拡張子はサーバースクリプトで書かれたファイル 主なものとして、perlがある。

わざと拡張子を偽装して送る場合はHTMLの拡張子も存在する。

今回は・・・

action="mailto:mail@address"

と記述されており、クライアントサイドから、上記のメールアドレスに送信することになっている。

メールアドレスを送信する場合の注意事項

注意1

送信はユーザーにゆだねられる。

注意2

事前セットアップがユーザーに必要となる。

mehtodについて

データの送信手法を記述する

get

post(主流)

の2種類が存在する。

postとは?

サーバーに接続(URL)した後、それとは別に

フォームのデータを送信していく方法。

getとは?

サーバーに接続し(URL+フォームデータ)を送信する。

URLに表示される

フォームを文字データにしてURLと一緒に送信されるので、情報が漏れやすい。

enctypeについて

enctypeは文字の書き出し形式をしていするダグ

通常フォーム送信では使用しない。

enctype="text/plain"

text/plainは書式なしテキスト形式で書き出されるとゆう意味

プルダウンメニューについて

<select>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

と記述され、

下記のように表示される。

ラジオボタン

<label for="dai"><input id="dai" type="radio" name="shiharai" value="daibiki">代金引換</label>
<label for="gin"><input id="gin" type="radio" name="shiharai" value="furikomi">銀行振込</label>

と記述され、ラジオボタンをひとくくりにする場合

同じ名前を付けてあげる。

lavelタグについて

このラベルタグは関連づけのタグで、

この場合、<input id="dai" type="radio" name="shiharai" value="daibiki">がラベルタグの中にあるので、このなかにあるものは、関連づけられてるの意味で、

ラベルにid=daiと記述されており、このなかの部分は、id=daiの動きをしますとゆう意味

つまり、代金引換の文字をクリックしても、ラジオチェックボタンが選択されます。とゆうことになる。

テキストエリア

<textarea name="memo" cols="50" rows="5">ご意見ご要望などありましたら、ご記入ください。</textarea>

cols="50"は列の数を指定

rows="5"は行の数を指定

テキストエリアは

<textarea>この中に最初のテキストの表示する文字を記入する。</textarea>

送信ボタン・リセットボタン

<input type="submit" value="注文">&nbsp;<input type="reset" value="リセット">

 

送信ボタン(submit)はフォームの中の内容を送信するボタン

リセットボタン(reset)はフォームの中身を元の状態の戻すボタン

税率の計算の場合

端数処理を行う。

お届け先の配送量設定

swith(制御命令)を使う

swith(何番だったらとゆう変数を書く)

case 0:0番目の処理;
break;

case 1:1番目の処理;
break;

case 2:2番目の処理;
break;

case 3:3番目の処理
;break;

breakとは、その処理から外れるとゆう意味

これがないと、次の処理まで行ってしまうので注意する。

入力チェック

ifの分岐関数を使う

onsubmitでサブミット(送信されたときに起動させる。)

turuを返すと、送信が実行される。

falseを返すと、送信が実行されない。

return呼び出しもとに返す

これを利用して入力チェックをする。

alertメソッド

テキスト読み上げソフトに対応していないので、多様は禁物

ダイアログボックス(警告ウィンドウ)を表示させるメソッド

forcusメソッド

カーソルが項目に移動するメソッド

テキストボックスを入力不可にする方法

入力してほしくないテキストボックスに、

onFocus="this.blur()"を記述する。

onFocusでフォーカスが当たった時

this.blur()・・・このオブジェクトのフォーカスを外すメソッド

なので、テキストボックスに入力ができなくなる。

送信時ラジオボタンの選択漏れをチェックする

オブジェクト.checkedプロパティ

ラジオボタンにチェックがついている場合、true

ラジオボタンにチェックがついていない場合 false

よって、

if(document.form1.shiharai.checked==false && document.form1.shiharai[1].checked==false){
alert("支払い方法を選択してください。");
return false;
}

とゆうプログラムとなる。

リセット時に確認メッセージを表示する。

return confirm("入力した内容をクリアしますか?")
で動作確認ウィンドウが立ち上がる。

はいと答えると、trueを返す。

いいえと答えるとfalseを返す。

これを

FORMタグで onReset="return kakunin()"を記述すると動く

CGIについて

いままで作ったプログラムはjavascriptで行い、うまく送信された場合その受注処理は様々なものがある。

今回は、↓の様な処理をする。

担当者のパソコンにメールで送る。

クライアントのメールに受付完了メッセージを送る。

第7章 フォームを処理プログラム

今回作成した注文フォームのWEBページはこちら

作成した課題23を見てみる

このページのトップへ移動する。

職業訓練WEBクリエーター科39日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科39日目

職業訓練WEBクリエーター科39日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

前回までのおさらい

手の抜きどころ

教科書・インターネットから引用してもよいが、必ず説明できるようにすること。

配列関数

a=new Array();

a[0]="ABC"

a[1]="DEF"

Javascriptの基本的な動きではなく、なんのためにこの関数を利用したかを説明できるようにする。

習ったメソッド

w=window.open("表示させたいURL");

w.resizeTo;(幅のピクセル数,高さのピクセル数)

w.moveTo;(親要素から横の位置ル数,親要素から縦の位置)

w.close();

授業の続き

ゼロからはじめるJavaScript P103

一定時間後に画像を順番に表示させる

使用メソッド

setTimeout()・・・ビルドイン関数

このプログラムが実行した後に特定時間後に動作する。

setTimeout("実行したい命令",時間(単位はミリ秒))

一定時間ごとに画像を入れ替える

使用メソッド

setInterval("命令プログラム",ミリ秒)

設定したプログラムを何回も表示させる。

JSファイルを作成し、外部ファイルにする

新たにファイルを作成して、そこにいままでプログラムしたプログラムを移す

ファイルの拡張子は、jsで記述する。

あとは、HTMLでその外部ファイルをリンクさせる。

<script type="text/javascript" src"ここに外部ファイルにしたファイルを指定するリンクを張る"></script>

どこでもソースをリンクさせることができるが、だいたいはヘッダーのなかに記述される。

JavaScriptを外部ファイルにする利点

HTMLの記述が少なくなるので、メンテナンス性がよくなる。

他のHTMLファイルで複数共有することができる。

弟5章 文字列を処理するプログラム

ゼロからはじめるJavaScript P121~133

文字列の一部を抜き出して表示する。

使用メソッド

文字列はオブジェクトであるので、メソッドとプロパティがある。

文字列 .substring(開始位置,終了位置)

使用プロパティ

文字列.length

文字列オブジェクトの文字数のプロパティ

substring()メソッドの 意味

文字列の一部を取り出すメソッド

文字列の始まりは0から始まる。

テスト
012

.substring(開始位置を指定,終了位置を指定)

文字列をスクロールしながら表示させる。

ABCD

BCDA

CDAB

DABC

と文字列を移動してあげるプログラムを作る。

上の場合、substring(1,4)+substring(0,1)

第六章 日時を処理するプログラム

ゼロからはじめるJavaScript P135~163

使用メソッド

new Date("2006/11/16")

new・・・は新しいオブジェクトの登場の意味

年・月・日時を区切る記号は/を使うのが一般的

new Date()と記述すると、現在時刻が表示される。

日時の計算の仕方

ゼロからはじめるJavaScript P158~163

解禁日.getTime()-本日.getTime()を引く

ただ単位がミリ秒なので、1000*60*60*24で割ると日時が表示される。

このページのトップへ移動する。

職業訓練WEBクリエーター科38日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科38日目

職業訓練WEBクリエーター科38日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

うるう年のプログラムの解説

うるう年とは?

4で割れる かつ 100で割れない ただし400で割れるもの

コード

%を使用・・・%は、あまりを計算することができる。

!を使用・・・!はその条件を否定する意味。

4で割り切れる→コード・・・ year%4==0

100で割り切れない→コード・・・year%100!==0

400で割り切る→コード・・・year%400==0

よって分岐条件ifは↓

if((year%4==0&&year%100!==0)||year%400==0)

あとはこの分記条件を利用して、プログラムを組んであげる。

テキストボックスへ値を羅列したい場合

valueプロパティを使用する。

このとき、テキストボックス.value="ここに表示させたい値"

と記述すると、=は代入するとゆう意味があるので、新しく上書きされてしまう。

なので、文字列を消してあげたい場合、

テキストボックス.value=""と記述すると何も記述されないvalueが代入されるので、データを消去することができる。

テキストエリアの枠・スクロールバーを消す場合

overflowとborderのプロパティを

hiddenと0pxにする。

オプション課題 ジャンケンプログラム

先生のプログラムの解説

プルダウンメニューのプルダウンにvalue属性で値を入れてあげると、値で指定できる。

<select>
<option value="0">グー</option>
<option value="1">チョキ</option>
<option value="2">パー</option>
</select>

あとはほとんど自分の組んだプログラムと変わらない。

ランダム関数

Math.floor(Math.random()*3);

Mathは数学関連のオブジェクト

Math.random()は0~1までの乱数をランダムに与える

Math.floor()は少数点を切り捨てる

Math.abs()数値を絶対値にする。

コード化

ジャンケンのグー・チョキ・パーをコンピュータに認識させるために、任意の数値を割り当てること。

プログラマーは・・・

今後の変更のことも考えて、不等号で組んであげた方が汎用性が高い

<や>を使う

<=や>=を使うのは避けている。

コンピュータは微妙に誤差がある。

配列・・・

教科書の弟6章あたりにでてくる。

配列とは・・・

データの並びを作る変数を作る。

配列変数 a  変数(箱)をいくつでも並べることができる。

変数 b ・・・一つの箱だけ

配列変数の表示の仕方はa[0]a[1]a[2]a[3]a[4]a[5]a[6]のように配列変数の中の変数に番号を付けて並べられている。

イメージは↓

a[0]
a[0]
a[0]

 

配列・・・添え字

a[1]この[]の中に入っている変数のことを添え字とゆう。

配列関数の記述のしかた。

a = new Array();  と記述する。

a[0]="グー";

a[1]="チョキ";

a[2]="パー";

別の記述方法

a = new Array("グー","チョキ","パー");

a = ["グー","チョキ","パー"];

 

がその中身

配列はオブジェクト

上の記述の意味はaに新しいオブジェクト(配列関数)を作るとゆう意味

定型分として覚えるとよい。

イメージはa[グー][チョキ][パー]と箱の中に入って連結しているイメージ

a[0]="グー"

a[1]="チョキ"

a[2]="パー"

i=Math.floor(Math.random()*3);

document.write(a[i]);

このプログラムの訳は

グーチョキーパーをドキュメントに書き出す

2次元配列

配列の中に配列を作ることができる。

イメージはこんな感じ↓

a[0][0]
a[0][1]
a[0][2]
a[1][0]
a[1][1]
a[1][2]
a[2][0]
a[2][1]
a[2][2]

2次元配列の書きかた

a = new Array();

for(i=0;i<4;i++){
a[i] = new Array();
}

と記述するして、変数を利用する時は、

a[1][2] ="ここに文字列を記入"

余談・・・上のプログラムで、forの中身・・・も不等号を使わない(プロ使用)

他の書きかた

a=[[5,1,2],[4,2,5],[10,1,3]];と記述するやり方もある。ただ一般的に記述するときは、

a=[[5,1,2],
[4,2,5],
[10,1,3]];

が一般的

ジャンケンプログラムでの応用

自分\相手

0:グー 1:チョキ 2:パー

0:グー

[0][0]

あいこ

[0][1]

勝ち

[0][2]

負け

1:チョキ

[1][0]

負け

[1][1]

あいこ

[1][2]

勝ち

2:パー

[2][0]

勝ち

[2][1]

負け

[2][2]

あいこ

これを2次元配列で記述する

a[[あいこ,勝ち,負け],
[負け,あいこ,勝ち],
[勝ち,負け,あいこ]]

配列を使うための利点

汎用性が高い

メンテナンス(変更)がしやすい

弟3章 ウィンドウ

ゼロからはじめるJavaScript P69~87

ウィンドウを開く

使用メソッド

window.open("開きたいURLを書く");

オプション設定

ウィンドウに様々な設定をかけることができる。

今回はメニューバーとツールバーのみ表示させる設定を行う。

window.open("開きたいURLを書く","ここにウィンドウに任意の名前を付ける。","ここにオプション設定を入れる。");

プログラムを書く常識

関数はヘッダーの中に書く

引数を利用

関数()の()の中に書く変数を引数とゆう。

変数なので、任意に名前を付けることができる。

ヘッダータグ

<!--
function hiraku(file){
window.open(file);
}
-->

ボディタグ

<p><input type="button" value="目次を見る" onclick="hiraku('sweden.html')"></p>

<p><input type="button" value="目次を見る" onclick="hiraku('italy.html')"></p>

<p><input type="button" value="目次を見る" onclick="hiraku('egypt.html')"></p>

この引数を利用すると、関数を一つだけ書くことで、他の3つのボタンでもこの関数を使うことができる。

ウィンドウを閉じる

使用メソッド

window.close()を使用する。

ウィンドウの位置・大きさを変える

使用メソッド

resizeTo(横の大きさ(ピクセル指定),縦の大きさ(ピクセル指定))

moveTo(親ウィンドウから横の位置(ピクセル指定),親ウィンドウから縦の指定(ピクセル指定))

このメソッドを反映させたいオブジェクトを指定しないと動かないので、

このプログラムでは、

var win=window.open();

win.resizeTo(,);

win.moveTo(,);

でウィンドウオブジェクトを変数に入れて指定してあげている。

弟4章 画像を処理するプログラム

ゼロからはじめるJavaScript 89ページ

ロールオーバー

リンクの画像に対して

onMouseover="ここに重なった時の画像"

onMouseout="ここに元の画像にする"

指定方法

document.画像オブジェト(<img>タグにつけた名前).src='ここに画像のファイルアドレスを入力する。'

補足

画像を指定するとき・・・<img>のタグ内に記述する場合、オブジェクト指定をthisで省略できる。

this.src'ここにURLを記述

こうすると、<img>タグに名前を指定しなくても動く

オブジェクトを指定しなくても動く模様

スワップイメージ

ロールオーバーと同じ手法で、変更するオブジェクトを指定してあげるだけ

このページのトップへ移動する。

職業訓練WEBクリエーター科37日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科37日目

職業訓練WEBクリエーター科37日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

昨日の復習

ゼロからはじめるJavaScript P63

繰り返し for

for(カウンター変数を初期化のため初期値を与えるものi=初期値;
繰り返す条件(繰り返す回数)を設定i<=繰り返す回数を記入する。;
カウントアップ数を設定する。i=カウントアップ数を設定 ;)
{繰り返し行いたい一連の処理をプログラムする。 }

※iは変数なので、プログラムの中で使用することも可能

※この中にさらにforプログラムやifプログラムをしようすることも可能

課題17

昨日の課題16を変更したうるう年のプログラムを作成

プログラム内容

指定した年数から20年間分の年数を羅列して、

さらにうるう年のテキストカラーを赤色に変更して表示させる。

作成した課題17のWEBページを見てみる。

今回作成したページで、HTMLタグでのバグがあったので、報告します。

バグ報告

<form>タグの中で、テキストフィールドを一つだけだと、そのテキストフィールドの中を選択して、ENTERキーを押すと勝手に送信(submit)されてしまう症状です。

解決方法

テキストフィールドを2つ以上フォームの中に入れると、ENTERキーを押してもsubmit(送信)されないので、新たに作成して、そのテキストフィールドを見えなくさせる。

見えなくする方法は2つ

テキストフィールドの幅を0pxに指定して、枠線を0pxに指定する方法

(例)

<p><input type="text" style="width : 0px;"></p>

この部分だと選択すると見える。

CSSで、表示させない方法  (display : none;)をテキストフィールドに入れる方法

<p><input type="text" style="display : none;" value="ここは、フォームのバグ対策"></p>

上に表示されてるんですがわからないでしょう。

このページのトップへ移動する。

職業訓練WEBクリエーター科36日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科36日目

職業訓練WEBクリエーター科36日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

条件分岐のおさらい

条件1かつ条件2のプログラムでの表現

if(条件1 && 条件2){ここにプログラム}

条件1または条件2のプログラムの表現

if(条件1 || 条件2)

できること・・・

何個でも繋げることができる。

&&と||を併用することも可能

&&と||を併用した場合、&&のプログラムのほうが強い

条件1&&(条件2||条件3)をつけると先に実行される。

3つのデータを並べ替える方法・・・(基本交換法・バブルソート)

データ1・データ2・データ3を作り

条件一個目

データ2とデータ3を比較してデータ3が大きい場合並べ替える

条件2個目

データ1とデータ2を比較してデータ1が大きい場合並べ替える

条件3個目

データ2とデータ3を比較してデータ2が大きい場合並べ替える

処理を繰り返す

ゼロからはじめるJavaScript P63~67

繰り返し関数for

for(i=1(初期値);i<=10(繰り返す条件つまり繰り返す回数);i++(繰り返し毎の演算)){
document.write("毎月5000円ずつ貯金します。<br>");

ポイント

iは変数である。

iにはカウント数が入れられる。

writeのなかに変数を利用したいときは””の外で使用すること。

for(i=1;i<=18;i++){
document.write(i,"ヵ月後 毎月5000円ずつ貯金します。<br>");

課題14で作成したプログラムをWEB上で見てみる。

課題15

テキストボックスに年数を記入してもらう。

年一覧のボタンを作成して、クリックすると、テキストボックスに20年分を表示する。

指定した年数も表示する。

このようなプログラムを作成する。

出来上がったプログラム課題15のWEBページを見てみる。

課題16

課題15と同様

テキストボックスに年数を記入してもらう。

年一覧をクリックすると、

テキストボックスを入れられた年

~20年後までのうるう年を表示

うるう年は4で割れる年

100の倍数は普通

400の倍数はうるう年

出来上がったプログラム課題16のWEBページを見てみる。・・・明日の課題

このページのトップへ移動する。

職業訓練WEBクリエーター科35日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科35日目

職業訓練WEBクリエーター科35日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

昨日作成した課題08・課題09の答え合わせ

課題08の加算プログラム

関数は3行で住んでいる。

答えの変数を使わない方がみやすいかも

課題09の入れ替えプログラム

変数はできるだけ小さいほうがコンピューターに負担がかからなくて済む。

これからは、変数はできるだけ少なくするように心がける。

本日の課題11の演習

分岐関数ifを使った演習

if(a>10)

条件が真ならば実行・・・true

条件が偽ならば実行・・・false

課題11・・・並べ替えプログラム

並べ替えると、数値が小さい方が必ず上にくるようにプログラムを組む

演習11で作成した課題11をWEBで見てみる。

課題12・・・3つの値の並べ替えプログラム

並べ替えると、数値が小さい順に必ず上にくるようにプログラムを組む

演習12で作成した課題12をWEBで見てみる。

演習13条件分岐関数のプログラム

else関数を使う

else関数とは・・・ if関数で設定した関数以外の時に行うプログラムである。

分岐関数について ゼロからはじめるJavaScript P62

if関数の中にif関数を使うことができるさらにその中にもelseを使うことができる。

else ifと続けて記述することも可能

分岐関数で、3つを比較させる場合

if(1<money<100)と記述して分岐関数が使えないので、

&&を使用すると、2つの条件が満たされたときにプログラムを実行することができる。  and

||を使用すると、またはの意味になる。 or

アンドとオアを両方一緒に使用することもできる。

条件A&&条件B||条件C

どの部分が条件なのかわからないので、()をつける。

条件Aかつ条件Bまたは条件Cの場合

(条件A&&条件B)||条件C

条件Aかつ条件Bまたは条件Cの場合

条件A&&(条件B||条件C)

これらはいくつでも分岐関数で繋げることができる。

例・・・

if(money>1&&money<=100)  &&はかつとゆう意味合い
{
緑色に変化する。
}

この場合、1~100までの数値に入った時実行するプログラムになる。

演習13で作成した課題13をWEBで見てみる。

このページのトップへ移動する。

職業訓練WEBクリエーター科34日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科34日目

職業訓練WEBクリエーター科34日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

1コマ目

JavaScriptのおさらい

JavaScriptの記述場所・・・起動するタイミング

外部ファイル・・・外部ファイルを読み込んだタイミング

ヘッダー・・・ページ表示終了直後

ボディ・・・ページ表示中

タグ内・・・イベント発生時 onClick onMouseover等

関数(複雑な処理をまとめたもの)を使うと、記述場所が醜くならなくて済む

オブジェクト

オブジェクトの種類

window

document

ここから下は複数存在する可能性があるので、名前を記述する。

form

textarea

名前の記述のしかたは、<タグの後ろにname="ここに任意の名前をつける。">

オブジェクトのプログラム

プロパティ(状態・設定)

オブジェクトが持っている変数のことをプロパティと呼ばれている。

メソッド(操作)・・・プログラムの右側に()がついているのが特徴
(例)・・・write("ここにテキストを記述する。")
オブジェクトが持っている操作用の関数をメソッドと呼ばれているので関数の一種。
オブジェクト(引数)を記述してプログラムの記述をする。

の2種類がある。

オブジェクトはオブジェクトを含む

(ここでは決まった名前)window.document.(ここからは、任意でつけた名前)form1.textarea1でオブジェクトを指定する。

データ処理

変数・・・データの入れ物(箱)

変数で行うこと

  • 任意で名前をつける。半角英数 と_ 最初に数字を使えない 予約語は使えない
  • =で代入する。
  • 代入すると上書きされる。

変数の書き方

var a ;

a=5;

a=5+3;

省略した形

a=5;

kono;

この書きかただと、間違えやすいので注意すること。

変数・スコープ

function test(){
var a;
ここで記述した変数はこの中の変数のみで反映される。
}

グローバル変数

ある共通したデータを全ての関数に反映されたい場合、関数のそとで変数の設定を行う。

var a;
ここで変数を設定すると関数全てに反映される。
function test1(){
}
function test2(){
}

2コマ目

JavaScriptを使ってページを作成する。

課題08

テキストボックス 2つ

ボタンが1つ

テキストボックスの上に表示されるように設定する。

ボタンを押すごとに加算されるよに設定する。

課題08の制作WEBページに移動する。

3コマ目・4コマ目

JavaScriptを使ってページを作成する。

課題09

テキストボックス 2つ

ボタンが1つ

テキストボックスの上に表示されるように設定する。

ボタンを押すごとに数値が入れ替えるよに設定する。

課題09の制作WEBページに移動する。

5コマ目

補足

=・・・は代入の意味

例文

a=1;

a=a+1;・・・右の部分を先に実行されるので、aが1なので2になり、それをaに代入する考え方

この時のaの値はa=2

例文2

a=3;

a=a*5;・・・右の部分を先に実行されるので、aが3なので15になり、それをaに代入する考え方

aの値は15となる。

よく使われる記述

a=a+1・・・a++; と記述しても同じプログラムが実行される。

a=a-1・・・a--;と記述しても同じプログラムが実行される。

課題08のプログラムを1行で行うプログラム

document.fm_kei.tb_ue.value = document.fm_kei.tb_ue.value*1 + document.fm_kei.tb_sita.value*1

条件によって処理を分岐する

ゼロからはじめるJavaScript P56~62

今までは・・・

1から4の順番をそのままの順番で実行するプログラムを組んでいた。

これからは・・・

1~2を実行して、条件Aを満たした場合3・4のプログラムを実行して6に移項する。

1~2を実行して、条件Aを見てしていない場合3・4・5を実行して6に移項する。

このプログラムを条件分岐と呼ばれる

または、

1~5のプログラムを5回実行して、6に移項する。

条件分岐

if関数を使う

1の処理

 if(条件式){

  2の処理

3の処理

ある条件2番が満たされたとき2の処理を行う。

比較演算

  • >・・・a>b aがbより大きい
  • <・・・a<b   aがb小さい
  • >=・・・a>=b aがb以上
  • <=・・・a<=b  aがb以下
  • ==・・・a==b  aがbと同じ
  • !=・・・a!=b  aがbではない、等しくない

※必ず=が後ろにつく。

※等しい時は必ず==を付ける

文字列でも使える。

6コマ目

具体例 課題10

結果がマイナスならば、赤字で表示

money= moneyin-moneyout;

もし moneyが負ならば残高テキストの文字を赤にする。

document.fm_keisan.tb_zandaka.value = money;

をプログラムする。

if(money<0){

document.fm_keisan.tb_zandaka.style.color = "red";

}

課題10の制作WEBページに移動する。

このページのトップへ移動する。

職業訓練WEBクリエーター科33日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科33日目

職業訓練WEBクリエーター科33日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

1コマ目

改行について

HTMLとして表示した文字を表示する場合<br>で改行

例・・・document.write("ここに文字を記述<br>ここから改行して表示される。")

プレーンテキスト

textarea.value="ここに文字を記入nにより改行する・・・ここのテキストを専門用語でプレーンテキストと呼ばれる"

input.value="ここに文字を記入・・・ここのテキストを専門用語でプレーンテキストと呼ばれる"

input.valueは1行分のテキストボックスなので、改行は入らない。

※は名前をつけないとプログラムを動かなくなるので注意

演算

=の記号・・・javascriptでの=の意味は右の記述を左の記述に代入するプログラムになる。どの演算子よりも一番最後に動く

A=B=Cと記述された場合・・・CをBに代入してその値をAに代入する。

*の記号・・・掛け算

/の記号・・・割り算

-の記号・・・引き算

+の記号・・・加算する

+の記号の使用注意

文字列の場合、+は文字列加算の処理されるので、左に記述した文字列の右に順に加算されるプログラムとなる。

+の記号を使って数値として加算させたい場合

等数の値として認識させた後に加算されるので、数値として認識させる。

A=B/1+C/1

A=B*1+C*1

parseInt(文字列) 関数(ビルドイン関数・組み込み関数)を使う・・・ゼロからはじめるJavaScript P176

例・・・

A=parseInt(B)+10

事件

javascriptの間にコメントタグが入ってるとうまく実行しないので注意

よい例

<!--<script></script>-->となるようにする。

悪い例

<!--<script>--></script>となるようにすると実行されな

関数について

関数とは一連の処理をまとめて表示するくとができる。

例・・・

ヘダーの中に

fanction keisan(){
A=B+C+D+E+F+G
}

ボディの中に

<タグ onclick="keisan()">

名前付け

  • ・オブジェクト textbox,textarea,form等のタグ
  • ・自分で作成した関数 function 任意の名前()
  • ・自分で作成した変数  自分でつけた名前=プログラムの記述

名前を付ける時の注意

  • 半角英数・記号_等(記号は_(アンダーバー以外)あまり使わないようにする。)
  • 1文字目は数字以外で始めること、記号はOK(通常はアルファベットからスタートする任意の文字)
  • 大文字小文字は区別される。(だからといってTotal,totalと名前を付けるのは避ける。)
  • 予約語は使えない(予約語とは?ゼロからはじめるJavaScript P49)

予備知識

start()・color()は予約語ではないが、使わないことをお勧めする。

2コマ目

本日の課題07 変数

変数とは?データの入れ物

テキストボックスの値をコピーして置いておくところ・・・詳しいことはここのページを参照

電卓でゆと、M+キー

書き方

var 変数の名前 ;・・・データの入れ物を作った

変数の名前=データを指定

例 収入テキストボックスの値を入れる(コピーする)ための変数を作る

var moneyin ;

moneyin=document.fm_keisan.tb_syunyu.value;

var moneyout ;

moneyout=document.fm_keisan.tb_sisyutu.value;

docoument.fm_keisan.tb_zandaka.value=moneyin-moneyout;

3コマ目

注意

        function zandaka(){
            var moneyin;
            moneyin=document.fm_keisan.tb_syuunyu.value;
            var moneyout;
            moneyout=document.fm_keisan.tb_sisyutu.value;
            var money;
            money = document.fm_keisan.tb_zandaka.value;
            money = moneyin - moneyout;
        }
		

と記述すると、プログラムが動かないので、注意すること!!

変数で代入した前の値は、考えられなくなってしまう(データは残る)。

解釈は、moneyってゆうプログラムに値が代入されるので、document.fm_keisan.tb_zandaka.valueには値が反映されないので、WEB上では表示されない。

イメージは箱のイメージで考えるとわかりやすい。

こう書くと記述される。

                function zandaka(){

                    var moneyin;
                        moneyin=document.fm_keisan.tb_syuunyu.value;
                    var moneyout;
                        moneyout=document.fm_keisan.tb_sisyutu.value;
                    var money;
                        money=moneyin-moneyout;
                    document.fm_keisan.tb_zandaka.value = money;
                }

4コマ目

授業で行った方法の考え方(収入計算・・・手順書)

  • 収入データを入れる箱「money」を用意する。
  • 収入テキストボックスの値をmoneyinに入れる
  • 支出データを入れる箱「moneyout」を用意する。
  • 支出テキストボックスに値をmoneyoutに入れる
  • 残高の計算結果を入れる「money」を用意する。
  • 残高の計算をする計算式moneyにmoneyin-moneyouの結果を入れる。
  • 残高テキストボックスにmoneyを入れる。

5コマ目

授業で行った方法の考え方(消費税率・・・手順書)

  • 本体価格データを入れる箱「hontai」を用意する。
  • 本体価格テキストボックスの値をhontaiに入れる。
  • 消費税率データを入れる箱「zei」を用意する。
  • 消費税率テキストボックスの値をzeiに入れる。
  • 税込金額のデータを入れる「zeikomi」を用意する。
  • 税込金額を計算する計算式zeikomiにhontai*(1+zei/100)の結果を入れる
  • 税込テキストボックスにzeikomiを入れる。

6コマ目

変数の記述方法には3通りの記述方法がある。

var a;
a=58

var a = 58;

a=58;

var a,b,cと記述する場合もある。

これは、aとbとcの変数を宣言していることになる。

テクニック

変数をどのような意味で付けたかに関するコメントを入れる。

例・・・

var moneyin; // 収入 

var moneyout; // 支出

var money; // 残高

//を記述したら、改行されるまでコメントとして扱われる。

/*コメント*/この記述は/**/で囲まれた部分はコメントとして扱われる。

変数の(有効範囲)

関数の中のみ有効になるので、

下の記述では、zandaka関数内のみ有効

<script>
var total; ・・・このように、関数の外に記述している変数をグローバル変数と呼ばれる
funvtion zandaka(){
var money; ・・・関数の中に記述している変数をローカル変数と呼ばれる
}
funvtion zeikomi(){
var money;
}
</script>

下で記述された変数monyはzandaka関数とは別物

関数の外で記述した変数は、どの関数でも利用が可能

関数が2回呼び出されると、関数の中に記述された変数は何が起こるかわからない。

練習課題07のWEBページはこちら

ソースコードはWEBを開いて、ソースコードを参照してください。

このページのトップへ移動する。

職業訓練WEBクリエーター科32日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科32日目

職業訓練WEBクリエーター科32日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

1コマ目

テラパッドの使い方

選択した部分のインデント

CTRL+SHIFT+I

選択した部分の逆インデント

CTRL+SHIFT+U

昨日の復習

ゼロからはじめるJavaScript P36

昨日学習したJavaScriptの注意する点をおさらい。

昨日作成した課題を編集する(テキストに改行を入れる)。

ゼロからはじめるJavaScript P37

メソッド write()の改行法について・・・<br>のタグを記述する。

<script type="text/javascript">
<!--
document.write("トリュフ","<br>","フォアグラ","<br>","キャビア");
-->
</script>

と記述する。

writeメソッドは、文字列をHTMLコードにて記述されるので、改行タグの<br>を記述する。

2コマ目

,(カンマの使い方)

write構文では,でくくって文字列を複数表示させることができる。

一つの文字列として

<script type="text/javascript">
<!--
document.write("トリュフ<br>フォアグラ<br>キャビア");
-->
</script>

と記述しても同じ表示がされる。

他の記述法として・・・+をつかう。

<script type="text/javascript">
<!--
document.write("トリュフ"+"<br>"+"フォアグラ"+"<br>"+"キャビア");
-->
</script>

と記述しても同じ結果が表示されるが、プログラムの処理としては文字列を+(付け加えながら表示する)

プロパティ要素 value での改行法は・・・nコードを記述する

<!--▼▼▼ここからJavaScript▼▼▼-->
<input type="button" value="答えを見る" onClick="document.form1.textarea1.value='からすみnこのわたnうに';">
<!--▲▲▲ここまでJavaScript▲▲▲-->

valueプロパティは文字を列普通の文字列として認識するので、HTMLタグも文字列のして扱われるので、改行させたい文字列に、nとJavaScriptの改行コードを記述する。

作成した課題04はこちらからページを移動する。

3コマ目

ゼロからはじめるJavaScript P40~44

課題05演算子の利用

コツ

プログラムを日本語で書いて、それをJavaScriptに変換する。

名前をつけるためのコツ

プログラムの記述を行いやすいためにわかりやすい名前をつける。

悪い例・・・text1 text2 text3 text4 text5

よい例・・・tb_zandaka

演算市の記述のコツ

演算市の両端に半角スペースを記述すると、読みやすくなる。

残高の計算

残高の値=収入の値-支出の値これをJavaScriptのプログラムに変えてあげる。

残高の値のしていプログラム・・・document.fm_keisan.tb.zandaka.value

収入の値・・・document.fm_keisan.tb_syuunyu.value

支出の値・・・document.fm_keisan.tb_sisyutu.value

よって、

残高の値=収入の値-支出の値は

document.fm_keisan.tb.zandaka.value=document.fm_keisan.tb_syuunyu.value-document.fm_keisan.tb_sisyutu.value

これを表示させたいところに記述すると、実行される。

手順

フォームタグ・テキストタグに名称をつける。

制作したタグの記述は、

<form name="fm_keisan">
<p>収入&nbsp;<input type="text" value="0" class="right" name="tb_syuunyu">円</p>
<p>支出&nbsp;<input type="text" value="0" class="right" name="tb_sisyutu">円</p>
<p>残高&nbsp;<input type="text" value="0" class="right" name="tb_zandaka" onFocus="document.fm_keisan.tb_zandaka.value=document.fm_keisan.tb_syuunyu.value-document.fm_keisan.tb_sisyutu.value">円</p>
<input type="button" value="リセットボタン" onfocus="document.fm_keisan.tb_zandaka.value='0';document.fm_keisan.tb_syuunyu.value='0';document.fm_keisan.tb_sisyutu.value='0'">
</form>

消費税の計算

考え方

1番目・・・実行タイミング

税込金額のtextboxにフォーカスが当たったとき

税込金額のtextboxのonFocusイベント

2番目・・・ブラウザに何をさせたいのか?

本体金額の値*(1+消費税率の値/100)を税込金額の値に代入

税込金額=本体金額*(1+消費税率/100)

3番目タグに名前をつける

必要・・・本体金額の値の名前,消費税率の値の名前,税込金額の名前

本体金額の値の名前・・・document.fm_keisan.tb_hontai.value

消費税率の値の名前・・・document.fm_keisan.tb_zei.value

税込金額の値の名前・・・document.fm_keisan.tb_zeikomi.value

よって、javascriptは・・・

document.fm_keisan.tb_zeikomi.value=document.fm_keisan.tb_hontai.value*(1+document.fm_keisan.tb_zei.value/100)

記述は、

<form name="fm_keisan">

<h2>消費税計算</h2>
<p>本体金額&nbsp;<input type="text" value="0" class="right" name="tb_hontai">円</p>
<p>消費税率&nbsp;<input type="text" value="0" class="right" name="tb_zei">%</p>
<p>税込金額&nbsp;<input type="text" value="0" class="right" name="tb_zeikomi" onfocus="document.fm_keisan.tb_zeikomi.value=document.fm_keisan.tb_hontai.value*(1+document.fm_keisan.tb_zei.value/100)">円</p>
</form>

さらに改良してこんなプログラムを組んでみました。

収支計算

収入 

支出 

残高 


消費税計算

本体金額 

消費税率 %

税込金額 

プログラムは下記

<h2>収支計算</h2>
<form name="fm_keisan">
<p>収入&nbsp;<input type="text" value="0" class="right" name="tb_syuunyu" onchange="document.fm_keisan.tb_zandaka.value=document.fm_keisan.tb_syuunyu.value-document.fm_keisan.tb_sisyutu.value;">円</p>
<p>支出&nbsp;<input type="text" value="0" class="right" name="tb_sisyutu" onchange="document.fm_keisan.tb_zandaka.value=document.fm_keisan.tb_syuunyu.value-document.fm_keisan.tb_sisyutu.value;">円</p>
<p>残高&nbsp;<input type="text" value="0" class="right" name="tb_zandaka">円</p>
<input type="button" value="リセットボタンだぴょーん" onClick="document.fm_keisan.tb_zandaka.value='0';document.fm_keisan.tb_syuunyu.value='0';document.fm_keisan.tb_sisyutu.value='0';">
<hr>
<h2>消費税計算</h2>
<p>本体金額&nbsp;<input type="text" value="0" class="right" name="tb_hontai">円</p>
<p>消費税率&nbsp;<input type="text" value="0" class="right" name="tb_zei">%</p>
<p>税込金額&nbsp;<input type="text" value="0" class="right" name="tb_zeikomi" onFocus="document.fm_keisan.tb_zeikomi.value = document.fm_keisan.tb_hontai.value * (1 + document.fm_keisan.tb_zei.value / 100);">円</p>
<input type="reset" value="リセットボタンだよ~ん">
</form>

<input type="reset" value="リセットボタンだよ~ん">このボタンはフォームタグの中の記述を最初の状態に戻る。なので、上の計算も同じようにリセットされてしまう。

出来上がった課題05はこちらをクリックすると見れます。

上記のページのソースを見てもらうとわかるのですが、CSSのスタイルをコメントアウトしているが、ブラウザ等によって対応していないブラウザで見ると、表示されてしまう場合があるので、コメントアウトしている。

考え方は、JavaScriptと同じ

4コマ目

ブラウザがオブジェクトの名前を認識するのはいつ?

ブラウザが、HTML文書を上から読んでいって、名前の定義がされている部分を読み込んだ時

ブラウザが名前を認識する前にはJavaScriptのプログラムで名前を使うことはできない。

注意

bodyダグにjavascriptを埋め込む時、名前の指定タグより上に記述をしてしまうと、プログラムが実行しなくなるので、注意すること。

5コマ目

課題06関数の利用

ゼロからはじめるJavaScript P45~49

関数とは処理をまとめる

まとまった手順に名前をつけてまとめたもの

関数の書き方

ヘッドタグの中に記述する。

function ****(){このなかにjavascriptを記述する}

****()の部分にそのプログラムを実行したいタグで任意に名前をつけた名前を記述する。

6コマ目

完成したHTML文書は

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<!--▼▼▼ここからスタイルシート▼▼▼-->
<style type="text/css">
<!--
.right{
text-align:right;
}
-->
</style>
<!--▲▲▲ここまでスタイルシート▲▲▲-->
<!--▼▼▼ここからjavascript▼▼▼-->
<script type="text/javascript">
<!--
function zandaka(){
document.fm_keisan.tb_zandaka.value = document.fm_keisan.tb_syuunyu.value - document.fm_keisan.tb_sisyutu.value;
}
function zandaka_reset(){
document.fm_keisan.tb_zandaka.value='0';document.fm_keisan.tb_syuunyu.value='0';document.fm_keisan.tb_sisyutu.value='0';
}
function zeikomi(){
document.fm_keisan.tb_zeikomi.value = document.fm_keisan.tb_hontai.value * (1 + document.fm_keisan.tb_zei.value / 100);
}
-->
</script>
<!--▲▲▲ここまでjavascript▲▲▲-->

<title>簡単計算機</title>
</head>
<body>
<h1>簡単計算機</h1>
<hr>
<h2>収支計算</h2>
<!--▼▼▼ここからフォームタグ▼▼▼-->
<form name="fm_keisan">
<p>収入&nbsp;<input type="text" value="0" class="right" name="tb_syuunyu" onchange="zandaka();">円</p>
<p>支出&nbsp;<input type="text" value="0" class="right" name="tb_sisyutu" onchange="zandaka();">円</p>
<p>残高&nbsp;<input type="text" value="0" class="right" name="tb_zandaka">円</p>
<input type="button" value="リセットボタンだぴょーん" onClick="zandaka_reset()">
<hr>
<h2>消費税計算</h2>
<p>本体金額&nbsp;<input type="text" value="0" class="right" name="tb_hontai">円</p>
<p>消費税率&nbsp;<input type="text" value="0" class="right" name="tb_zei">%</p>
<p>税込金額&nbsp;<input type="text" value="0" class="right" name="tb_zeikomi" onFocus="zeikomi()">円</p>
<input type="reset" value="リセットボタンだよ~ん">
</form>
<!--▲▲▲ここまでフォームタグ▲▲▲-->
</body>
</html>

完成WEBページ課題06へはこちら

数値を加算する場合

テキストボックス(文字列の並びが入っているとゆう扱いになる)

なので、処理は5000+2000=50002000とゆう処理の仕方になってしまう。

-だと、ブラウザが数値と判断するので正常に計算される。

なので、加算したい場合は

5000/1+2000/1=7000とゆうようにすると計算される。

5000*1+2000*1=7000でもよい

このページのトップへ移動する。

職業訓練WEBクリエーター科31日目

  1. トップ
  2. JavaScriptの学習
  3. 職業訓練WEBクリエーター科31日目

職業訓練WEBクリエーター科31日目

使用ソフト・・・TeraPad(テキストエディタ)

使用教科書・・・ゼロからはじめるJavaScript ホームページ辞典

授業の内容

1コマ目

JavaScriptの勉強

今日から使用する教科書は、ゼロからはじめるJavaScriptを使用する。

CD-ROMの内容をインストールする。

ゼロからはじめるJavaScript P3

一章 JavaScriptとは?

JavaScriptとは

ゼロからはじめるJavaScript P9~12

WEBページに動きを付ける。

自動的な動き&ユーザー操作に反応させる。

どのような動きができるかとゆうと・・・

  • ポップアップウィンドウを表示させる。
    ※新しいページを出すことができる。その際にウィンドウの設定もすることができる。
  • 画像に動きを出す
    ロールオーバーや画像にアニメーション的な動きを表示させたり、時間ごとに画像が切り替わる等の設定。
  • 文字列に動きを出す。
    文字を横にスクロールさせたり、文字に動きをつけることができる。
  • 日時を表示・計算する。
    ページの今日の日付を表示させたり、それを利用して日時を計算したりする。
  • フォーム上の計算やチェックを行う
    フォームを設置したり、入力した数値により計算して表示させたりすることができる。
  • カラー
    画面を操作したら。色を変更させることができる。
  • ゲームを作る
    WEB上でゲームを作ることができる。
  • 2回目以降は表示されない
    WEBを閲覧したい人へのアクセスからプログラムをつけることができる。
  • 画面の画像を時間で変える。

JavaScriptの記述の特徴

ゼロからはじめるJavaScript P12

HTMLの文章に直接記述することができる。

クライアントサイドとサーバーサイドに分かれているが、

JavaScriptはWEBページを見ているクライアントが行動を起こしたら、起動する仕組み。

なので、カウンター・掲示板等のプログラムはJavaScriptでは設定できない。

JavaScriptとJavaの違い

JavaScriptはWEB上で動くプログラム

Javaは、携帯・家電製品など様々なものでプログラムしている。汎用のプログラム

Javaアプレットとゆうのもあり、JavaをWEB上で実行できるもの。

JavaScriptの実行タイミングは

HTMLファイルが全て表示されてからプログラムが実行される。

2コマ目

JavaScriptプログラムの作成

JavaScriptの記述は

<script>プログラム</script>のように、<script></script>タグで囲まれた部分がJavaScriptのプグラム

ヘッドタグ

<script type="text/javascript">

記述されているが、ここではブラウザに種類を認識させるために明記する。

省略しても動くがしっかり記述すること

<!--javascriptが記述-->HTML文章では、コメントタグで囲むこと。

※ブラウザによっては、解釈できないブラウザがあるので、ブラウザ上でこのプログラム記述が表示されてしまわないようにするため。

メタタグでの記述

<meta http-equiv="Content-Script-Type" content="text/javascript">

を記述してJavaScriptだとブラウザに認識させるために記述する。

記述を2つ書いているのは、<meta>タグが認識されないブラウザのために記述する。

※Content-Script-Typeの記述は必ず大文字・小文字を区別して書く

ボディタグでの記述

<noscript>

ここに記述された内容は、scriptに対応したブラウザは表示されない。

逆に、scriptに対応していないブラウザはこの部分が表示される。

</noscript>

3コマ目

課題01のHTMLの記述

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
window.status="ようこそ";
-->
</script>
<title>箱根温泉物語のトップ</title>
</head>
<body>
<noscript>
JavaScriptに対応するブラウザでご覧ください。
</noscript>
<h1>箱根温泉物語</h1>
</body>
</html>

課題01のWEBページはこちらをクリックして移動してください。

JavaScriptの記述場所について

4種類の記述方法がある。

  • headタグの中・・・ページが表示された後に実行される
  • bodyタグの中・・・ページ表示中に実行される
  • タグ内に属性として・・・イベント発生時(タグの上にマウスが重なった場合等)
  • 外部ファイル・・・ファイルの拡張子はjs 実行タイミングは、記述した場所により異なる。

それぞれの記述の違い

プログラムの実行の始まるタイミングが違う

イベント属性

ゼロからはじめるJavaScript P17

前置詞の後に大文字で記述すると見やすい

  • onLoad
  • onunLoad
  • onClick
  • ondbClick
  • onKeypress
  • onMouseover
  • onMouseout
  • onSubmit
  • onReset
  • onFocus
  • onBluer
  • onSelect
  • onChange

等がある。

イベントについては、P17に記述されている。

4コマ目

イベント属性を記述する。

ゼロからはじめるJavaScript P25~29

今回はタグに直接記述する形での JavaScriptを作動させてみたいと思う。

課題02のHTML文章

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">・・・定番の記述
<title>箱根温泉物語のトップ</title>
</head>
<body>
<noscript>
JavaScriptに対応するブラウザでご覧ください。
</noscript>
<!--▼▼▼ここにJavaScriptを記述▼▼▼-->
<h1 onMouseover="window.status='ようこそ'" onMouseout="window.status=''">箱根温泉物語</h1>
<!--▲▲▲ここまでがJavaScriptを記述▲▲▲ -->
</body>
</html>

課題02のWEBページはこちらをクリック

使用したJavaScript

onMouseover

マウスが乗ったときのプログラム

onMouseout

マウスが離れたときのプログラム

onMouseover="window.status='ようこそ'"

window.status・・・ブラウザのウィンドウステータスに’’で囲んだ文字を表示させる。

onMouseout="window.status=''"

window.status・・・ブラウザのウィンドウステータスに’’で囲んだ文字を表示させる。ここでは、空白なので、離れた時にステータスバーになにも記述されない

注意点

イベントの中でJavaScriptを記述する場合”(ダブルコーテーション)の中での囲いは’(シングルコーテーション)にする。

5コマ

プログラムの規則

window.document.write( )

※このプラグラムの.(ドット)の意味は、~のとゆう意味になる。

※右に書かれているプログラムほど、物(オブジェクト)の記述がなされている。

オブジェクトとは・・・状態・操作がある。

状態(プロパティ)・・・ウィンドウの位置・大きさ・ステータスバーの状態・ツールバーの状態、等

window.status="ようこそ"等のプログラム

プログラムの=とは右側のものを左側に入れるとゆう解釈でプログラムは処理される。

操作(メソッド)・・・ウィンドウを閉じる。新たなウィンドウを表示する。ウィンドウを最小化する、等

window.open( )等のプログラム

( )の中に・・・何を・どのようにといったプログラムを記述する。

※メソッドの場合後ろに( )が必ず付く

オブジェクト・プロパティメソッドを確認する

ゼロからはじめるJavaScript P31~39

課題03

課題03のWEBページはこちらをクリック

以上をふまえて、JavaScriptを記述する。

出来上がったHTML文章は下にに記述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>三大珍味</title>
</head>
<body>
<h1>三大珍味</h1>
<p>世界三大珍味に数えられる3つの食材は何でしょう?</p>
<!--▼▼▼ここからJavaScript▼▼▼-->
<script type="text/javascript">
<!--
document.write("トリュフ、フォアグラ、キャビア");
-->
</script>
<!--▲▲▲ここまでJavaScript▲▲▲-->
<hr>
<p>日本三大珍味に数えられる3つの食材は何でしょう?</p>
<!--▼▼▼ここからフォームタグ▼▼▼-->
<form name="form1">
<p>
<!--▼▼▼ここからJavaScript▼▼▼-->
<input type="button" value="答えを見る" onClick="document.form1.textarea1.value='からすみ、このわた、うに'">
<!--▲▲▲ここまでJavaScript▲▲▲-->
</p>
<p>
<!--▼▼▼ここからテキストエリアのタグ▼▼▼-->
<textarea cols="40" rows="4" name="textarea1"></textarea>
<!--▲▲▲ここまでテキストエリアのタグ▲▲▲-->
</p>
</form>
<!--▲▲▲ここまでフォームタグ▲▲▲-->
<hr>
</body>
</html>

できあがったWEBページはこちらから移動

JavaScriptの記述

<script type="text/javascript">
<!--
document.write("トリュフ、フォアグラ、キャビア");
-->
</script>

ここでは、ドキュメントのオブジェクトにて、writeの()の中身の部分をページ上に表示される。

onClick="document.form1.textarea1.value='からすみ、このわた、うに'"

クリックした時に、ドキュメントオブジェクトのform1とゆう名前のtextarea1とゆう名前の部分に、’’内の文字列を表示する。

注意

タグのオブジェクトを指定する場合、タグを直接指定できないので、必ずタグに名前を記述する。

ここでは、<form name="form1">フォームタグにform1

<textarea cols="40" rows="4" name="textarea1"></textarea>テキストエリアにtextarea1とゆう名前を記述した。

課題03のWEBページはこちらをクリック

番外編

同じオブジェクトに同じイベントをかけて別々の部分に同時に表示させたい場合;(カンマ)をつける。

<hr>
<p>日本三大珍味に数えられる3つの食材は何でしょう?</p>
<!--▼▼▼ここからフォームタグ▼▼▼-->
<form name="form1">
<p>
<!--▼▼▼ここからJavaScript▼▼▼-->
<input type="button" value="答えを見る" onClick="document.form1.textarea1.value='からすみ、このわた、うに'document.form1.textarea2.value='このわた、うに、からすみ'">
<!--▲▲▲ここまでJavaScript▲▲▲-->
</p>
<p>
<!--▼▼▼ここからテキストエリアのタグ▼▼▼-->
<textarea cols="40" rows="4" name="textarea1"></textarea>
<textarea cols="40" rows="4" name="textarea2"></textarea>
<!--▲▲▲ここまでテキストエリアのタグ▲▲▲-->
</p>
</form>
<!--▲▲▲ここまでフォームタグ▲▲▲-->
<hr>

日本三大珍味に数えられる3つの食材は何でしょう?


このページのトップへ移動する。

職業訓練WEBクリエーター科30日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科30日目

職業訓練WEBクリエーター科30日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目~6コマ目

今回学習したFLASHのソフトを使用して、作品を作成してみよう。

テーマ

「おめでとう」・「暑中見舞い」・「ゲーム性のあるもの」

上記の中から一つ選んで、作品を作る

期間

今日・明日の2日間

制約

ActionScriptを使用して、

「スタートボタン」を押すまで再生しない。

最後まで再生したらストップし、「最初から」のボタンを押して最初に戻る。

演習課題

昨日と今日で作成したフラッシュのアニメーションがしました。

今回の見所

テニスのラリーアニメーション

テニスのボールに、ボールの弾道を描いたパスガイドを作成してそれにあわせてラケットで打ってるようなアニメーションをつけて、実際ラリーをしているアニメーションを作成した。

ニュースへのリンク先

今回テニスのリンク先のロールオーバー部分で、ジャンプするページのレイアウトを表示するアニメーションを作成してみた。

このページのトップへ移動する。

職業訓練WEBクリエーター科29日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科29日目

職業訓練WEBクリエーター科29日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目~6コマ目

今回学習したFLASHのソフトを使用して、作品を作成してみよう。

テーマ

「おめでとう」・「暑中見舞い」・「ゲーム性のあるもの」

上記の中から一つ選んで、作品を作る

期間

今日・明日の2日間

制約

ActionScriptを使用して、

「スタートボタン」を押すまで再生しない。

最後まで再生したらストップし、「最初から」のボタンを押して最初に戻る。

途中経過

今回作った課題は、テニスのウィンブルドンの優勝をおめでとうで作成しました。

制作途中の課題がこちら

このページのトップへ移動する。

職業訓練WEBクリエーター科28日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科28日目

職業訓練WEBクリエーター科28日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

ボタンを作ってみよう

トレーニングブック P206~218

フラッシュでボタンを作成する。

動き

アップ・・・ステージに配置した時に表示される画像です。カーソルが触れていない状態

オーバー・・・マウスカーソルが触れた状態で、この状態を「ロールオーバー」と呼びます。

ダウン・・・クリックした時の画像です。

ヒット・・・カーソルの反応エリアです。通常は「アップ」が隠れるくらいのサイズで作ります。

シンボルに編集してタイプをボタンに選択する。

できた成果物↓

動きのあるアニメーションボタンを作成

動きをつけたい部分にここでは、ダウンに動きのあるシンボルを挿入してあげると、動きがつく。

ここでは色が変わるアニメーションに設定した。

できた成果物↓

2コマ目

トレーニングブック P213

シンプルボタンについて

アニメーションボタンを作成した場合はムービープレビューでみないと動きが確認できたない。

シンプルボタンの場合、シンプルボタンで動きを確認することができる。

文字をボタンにする。

テキストでも、シンボル化すると、先ほどと、同様にボタンの機能を持たせることができる。

ヒット領域にテキストを入れると、文字の部分しかヒットしなくなるので、テキストを覆おうような図形を挿入して、ヒット領域を確保する。

できた成果物↓

3コマ目

ActionScriptで動きを制御する。

トレーニングブック P219~231

アクションには3種類

フレームアクション・・・タイムラインによるアクション タイムライン上で設定したフレームにきた場合のアクション

ボタンアクション・・・ボタンにたいして、ボタンを押したときにどうゆう動きをするかのアクション

ムービークリップアクション・・・

アクション制御パネルは、レイヤーの一番最初に用意する。

stop・・・止まる

play・・・再生

ActionScriptを記述後、自動フォーマットボタンを押すと、記述が間違っているか、間違っていないか判断できる。

ActionScriptでコメントを挿入したい場合は

一行だけコメントを挿入・・・・ //を入れる。

 複数行コメントを挿入の場合・・・ /*ここにコメントを挿入*/

4コマ目

自動車のアニメーションにボタン制御をつけたFLASHを作成しよう。

スタートスイッチ・リセットスイッチを作成する。

できた成果物↓

ラベル機能

フレームにラベルをつけてそこに移動させる方法。

フレームを増やしたりする場合フレーム指定だと毎回設定を変えないといけなくなるので、アンカーを設定して移動させる方法。

今回は、スタートスイッチに、

on (release) {//マウスが離れた場合

gotoAndPlay("start");/*startタグに移動して再生する。*/
}

を記述して、クリックしたらstartタグに移動して再生する。

さらにGOスイッチを追加してそのスイッチに

on (release) {
gotoAndPlay("go");
}

を記述して、GOをクリックすると、GOラベルをつけたフレームから再生が始まる。

できた成果物↓

5コマ目

FLASHでリンクの作成

トレーニングブック P242~244

URLリンクを設定しよう

ビヘイビアパネルのWEB→WEBページへ移動から選択する。

今回は、ボタンシンボルにYAHOOへのリンクを張ってみた。

メールソフトの起動は

getURL("mailto:ここからメールアドレスを記述");すると、メールソフトが起動する。

メールソフトを使用する際の注意点

トレーニングブック P243

メールリンクはパソコンの中のメールソフトが起動してしまうので、メールをリンクさせる場合メールアドレスだと、わかりやすく表示させる。

できた成果物は↓

6コマ目

課題練習の予習

課題で作成するテーマ

おめでとう

暑中見舞い

ゲーム性のあるもの

必ず付けるもの

スタートボタンを押すまで再生しない。

最後まで再生したらストップ

最初からのボタンをおして最初に戻る

このページのトップへ移動する。

職業訓練WEBクリエーター科27日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科27日目

職業訓練WEBクリエーター科27日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

レイヤーを使ったアニメーションを作ろう

トレーニングブック P114~121

レイヤーとは トレーニングブック P114~115

レイヤーはステージの重なりをさします。

レイヤーを使ったアニメーション トレーニングブック P116~117

レイヤーを3個作成して、

最前面に茂み

真ん中にクルマが動くアニメーション

最背面に山を作成した。

2コマ目

カーブに沿って走るアニメを作ろう トレーニングブック P117~121

レイヤーを2つ作成する。

最前面に動く自動車

最背面に山を作成する。

カーブに沿って動かすために山に線を追加して、それをコピーしてモーションガイドとして新たに作成

その上をクルマが動くように、キーフレームの位置を変更する。

そのままだとクルマが傾かないので、パスに沿って回転を選ぶ

※山の角度に合わせてクルマの向きを調整するとさらに見栄えがよくなる。

カラーエフェクト

トレーニングブック P134~141

カラーエフェクトとは、色のを変更する動きを付ける効果

プロパティインスペクタにより変更をする。

明度・・・明るさを変更する設定

着色・・・インスタンスに色を着色する設定

アルファ・・・透明度の設定

カラーエフェクトとカラーを利用したアニメーション

モーフィング

トレーニングブック P152~158

形が異なる図形に変形するアニメーション

シェイプトゥイーン

トレーニングブック P152

シェイプトゥイーンの練習

丸から形を変える

一部の色を変える

3コマ目

トレーニングブック P155

揺らぐ煙を作ろう

トレーニングブック P155~157

煙が揺らぐアニメーションをつけるために、シェイプヒントの追加をする。

4コマ目

マスクレイヤーを活用する。

トレーニングブック P142~151

マスクにしたレイヤーを作成する。

汽車をトンネルにくぐらせる

トレーニングブック 142~144

進行方向部分にも塗りを追加して、マスク処理を追加しておく。

動くマスクを作ってみよう

トレーニングブック P145~147

動きをつけたホシマークをマスクをかける。

5コマ目

マスク対象レイヤーに追加

トレーニングブック P148~151

マスクを設定した部分にレイヤーを追加する練習

順番は

マスクの中・・・キャラA・キャラB・背景C

マスクの外・・・背景D

下記のように見える。

写真の表示

トレーニングブック P174~183

写真を読み込む

トレーニングブック P175

ファイルメニュー→読み込みからステージに変更をする。

写真の読み込む画像のサイズはFLASH制作の画像の幅に合わせて作成する。

6コマ目

ホームページ上に載せるには

トレーニングブック P246~252

このページのトップへ移動する。

職業訓練WEBクリエーター科26日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科26日目

職業訓練WEBクリエーター科26日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

キャラクターの作成の続き

トレーニングブック P78~88

グループ化オブジェクトのシンボル化

トレーニングブック P81~82

修正→シンボルに変換(F8)

重ね合わせの調整

トレーニングブック P83

重ね合わせの設定

修正→重ね順→ひとつ前面へ移動で編集する。

CTRL+カーソルの上下で重ね合わせを変更ができる。

シンボル同士の組み合わせ

トレーニングブック P83~84

シンボルを両方選択してシンボルに変換

※ステージに配置されたシンボルはインスタンスと呼ぶ

シンボルの編集

トレーニングブック P85~87

インスタンスを選択し、右クリック→編集を選択

2コマ目

シンボルとは

何度も使うことのできるオブジェクトのこと。

インスタンスとは

シンボルをステージ上に置いた場合インスタンスと呼ばれる。

インスタンスをステージ上に配置し、縮小・拡大・回転・反転・明度・透明度・着色を変更することができます。

この場合はライブラリには影響がありません。

作成した練習課題がこちらです。

キャラクターの作成の画像

FLASHアニメーションの作成

トレーニングブック P90~184

アニメーションの基本

トレーニングブック P90~91

シンボルに動きを設定する場合、1つの動きに1つのレイヤーが必要

サイズは、最初に設定をする。

パタパタアニメを作ろう

トレーニングブック P92~94

手を作りシンボル化(基準点を付け根部分にしておく)

体の部分をつけてシンボル化

両方をシンボル化

3コマ目

キーフレーム

各シーンの特徴部分をキーフレームとゆう。

再生

ENTERを押すと再生できる

シーンではムービークリップは再生できないので、ムービープレビューで行う

ムービークリップとグラフィックの違い

トレーニングブック P97~101

グラッフィックにすると、シーンでも「ENTER」を押すと動きを見ることができる。

グラフィックだとループ再生の時にムラのある動きになってしまう。

繰り返しの動きをしたい場合はムービークリップを使用する。

作成したアニメーションがこちらです。

4コマ目

シンボルをステージ上で動かそう

モーショントゥーイーン

移動するアニメーション

場所の移動・回転・拡大と縮小・明度・透明・着色等がアニメーションとして動きを付けられる。

イージング

加速や減速の効果を出す機能

動きを増やしたい場合

ステージで一つの動きだけなので、シンボルに動きをつけて、それをステージ上で動かす。

ボールを弾ませる

ステージのフレームに、頂点、弾む位置、弾み終わった頂点をキーフレームにして、モーショントゥーイーンをかけた。

ボールを弾ませながら移動する

ボールをシンボル化して、そのボールを弾ませるシンボルを作成して、さらにステージで、横に動く動きをつけた。

5コマ目

タイヤを回転しよう

トレーニングブック P103~105

タイヤのオブジェクトをシンボル化して、さらに、そのタイヤが回転するオブジェクトを作成してそれをシンボル化

ステージ上に車の車体のシンボルとタイヤをあわせた。

自動車を動かそう

トレーニングブック P105~108

上で作成した課題をシンボル化して、それをステージ上で動きをつけた。

6コマ目

シンボルをパスに沿って動かそう

P109~113

モーションガイド機能を使う

「パスに沿って回転」を選択すると、車の傾きが変わる。

円状にシンボルを動かす

モーションパスを円形ツールで円上のパスを作成してその上を動くように設定した。

このページのトップへ移動する。

職業訓練WEBクリエーター科25日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科25日目

職業訓練WEBクリエーター科25日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

消しゴムツールの使い方

流し消し

トレーニングブック P66

消しゴムツールのオプション選択の流し消しを選択する。

塗りを消したい場合、塗りの部分にポインタをあてて選択する。

線を消したい場合、線の部分にポインタをあてて選択する。

流し消しの課題

消しゴムツールを使いこなそう

トレーニングブック P66~67

消しゴムにはブラシツール同様、五種類の消し方が存在する。

  • 標準・・・塗り・線の両方を消す
  • 塗りを消す・・・塗りの部分だけ消す
  • 線を消す・・・線だけ消す
  • 選択された塗りを消す・・・選択した塗りの部分だけを消す
  • 内側を消す・・・消しゴムを開始した塗りの部分だけ消す

消しゴムツールの使用例

テキストの入力

トレーニングブック P69~76

FLASHでの文字の扱いは、WEBページ同様、コンピュータによっては表示される文字のイメージが異なるので、気をつける。

画像として(アウトライン化)すると、表示が崩れない

文字の入力

トレーニングブック P69

ツールボックスのテキストツールを使用する。

プロパティインスペクタで様々な設定を変更できる。

決まった幅に文章を入力する方法

トレーニングブック P70

テキストブロックを作成する。

作成法は、テキストツールボックスを選択し、一行分のテキスト幅をドラックして作成する。

文字詰めを調節する

トレーニングブック P73~74

プロパティインスペクタの文字間隔から調整する。

行間を調整してみよう

トレーニングブック P74

プロパティインスペクタのフォーマット部分で調節する。

テキストのアウトライン化

トレーニングブック P75

アウトライン化の方法・・・修正メニュー→分解または(CTRL+B)を二回繰り返す

最初・・・テキストが一文字ずつに分かれる。

文字情報が失われ、画像として処理される。

課題 テキスト操作の練習・オブジェクト操作の練習

例文から文字の操作を行う

テキスト操作の練習課題

ダイレクト操作ツールを使ってオブジェクトを操作

ダイレクトツールの操作練習

塗りやペイントツールを使ってオブジェクトの操作

塗りやペイントの操作練習

キャラクターの作成

トレーニングブック P78~87

キャラクターをシンボルに変換

修正→シンボルに変換(F8)

キャラクターの作成課題

このページのトップへ移動する。

職業訓練WEBクリエーター科24日目

  1. トップ
  2. FLASHのソフトの使い方の勉強
  3. 職業訓練WEBクリエーター科24日目

職業訓練WEBクリエーター科24日目

使用ソフト・・・FLASH

使用教科書・・・FLASHトレーニングブック

授業の内容

1コマ目

FLASH

今日から新しいソフト・・・FLASHの勉強に移る

テキストのサンプルデータをダウンロードする。 トレーニングブック P8ページ

FLASHについて・・・

トレーニングブック P10~

FLASHとは

アニメーションを作ったり、インタラクティブなコンテンツを作ることができるグラフィックソフトです。

簡単なバナーアニメーションから、複雑な構造を持ったアプリケーションまで、じつに幅広い用途に使われています。

FLASHのファイル形式

FLA形式で保存される。

書き出しファイル(WEBページで見ることができる拡張子)・・・SWFで保存されている。

よく使うツール

ステージ

画面の真ん中の白い部分レイアウトを作画を行う場所

タイムライン

横時間軸・縦レイアー 画面の上の部分

各コマの部分

ツールバー

画面左側で、様々な道具が入っている場所だいたいFireworksと同様

パネル

画面右側と下側に並んでいるパネル

よく使うパネル

プロパティインスペクタ・・・画面下側にあり、様々な設定をするときに使用するパネル

カラーミキサー・・・画面右側にあり、色を変更する時にいようする。

変形パネル・整列パネル・・・画面右側にないので、ウィンドウから出す。

ライブラリパネル・・・情報を管理するパネル

基本図形の作成

トレーニングブック P28~31

直線を描く・・・Fireworksと同様

ツールバーの線ツールを選択する。

マウスをドラック&ドロップすると線が書ける

Shiftキーを押しながら各と、水平・垂直・45度線を各ことができる。

ALTキーを押すと、両幅に線が描ける。

四角形を描く・・・Fireworksと同様

矩形ツールを選択する。

マウスを四角形の対角線上にドラック&ドロップをする。

SHIFTキーを押すと正方形が描ける。

ALTキーを押すと中心から四角形が描ける。

円を描く・・・Fireworksと同様

楕円ツールを選択する。

マウスを円の大きさの対角線上にドラック&ドロップする。

SHIFTキーを押しながら描くと正円が描ける。

角丸四角形を描く

矩形ツールを選択して、ツールバーの下にオプションツールがあるので、そこの角丸半径を指定して矩形を描く。

ドラック中にキーボードの↑↓の矢印キーで角の丸みを調整できる。

三角形を描く

矩形ツールを押しっぱなしにして、多角形ツールを選択する。

プロパティインスペクタのオプション設定から変の数を指定して描く

星を描く

多角形ツールからプロパティインスペクタからスタイルを星に変更して頂点を選択して描く

2コマ目

移動する際の注意事項

FLASHは塗りと線(枠の部分)が分かれて表示されているので注意する。

塗りの移動

塗られている部分の内部をクリックして移動したいところまでドラック&ドロップすると、塗られた部分だけ移動される。

線の移動

線の部分にマウスを持ってくとマウスの形が変わるので、そのまま選択して移動したい部分にドラック&ドロップをすると移動できる。

ダブルクリックをすると線が全部選択される。

塗り・線の両方の移動

塗りの部分でダブルクリックすると、塗りと線の両方が選択することができる。

線で塗りを分断する

いままで描かれた図形の上に図形をのせると、今まで描かれた図形が分断される。

3コマ目

バケツツールの使い方

トレーニングブック P38

塗りを変更したい塗られた部分にバケツツールを使って、色を変更する。

バケツのアイコンの形で液がこぼれている先の部分が塗りたい部分の先端

スポイトツールの使いかた

トレーニングブック P39

ある図形でしようした塗りの色と同じ塗りの色で塗りたい場合にこのスポイトツールを使って色を設定場合に使用する。

選択ツールから色を変更する。

トレーニングブック P40

複数の塗りの色を同時に同じ色に変更したい場合の時に使用すると便利

塗りが設定されている部分を選択ツールで選択して、プロパティインスペクタで色の塗りを変更する。

グラデーション

トレーニングブック P41~44

線状のグラデーションのかけ方

トレーニングブック P41

カラーミキサーパネルを使用してグラデーションを設定する。

グラデーションを調整しよう

トレーニングブック P42

ツールボックスの「塗りの変更」ツールを使用する。

グラーデーションの塗りの部分を選択すると、変更するための選択項目がでてくる。

放射状のグラデーションのかけ方

トレーニングブック P43

カラーミキサーパネルの塗りのスタイルを「放射状」を選択する。

放射状グラデーションの調整

トレーニングブック P43~44

ツールボックスの「塗りの変更ツール」を使用

グラデーションの色数を増やしてみよう

トレーニングブック P44

カラーミキサーパネルのグラデーション定義バー上でクリックする。

演習・・・描画の練習

トレーニングブック P35~37ページにあるイラストを描画してみよう。

描画の練習課題の成果

4コマ目

線のタイプを変更してみよう。

トレーニングブック P45~48

線の種類を変更してみよう。

トレーニングブック P45

ツールボックスの「インクボトルツール」を使用して線の種類を変更する。

線の種類の変更は、プロパティインスペクタで変更する。

線の種類は、太さ・線の形状が変更できる。

極細線と実線の違い

極細線は拡大しても1pxで表示される線なので、拡大してもつねに1pxで表示する。

破線のカスタマイズ

トレーニングブック P46~47

プロパティインスペクタのカスタムから変更する。

選択ツールで線を変更する。

線を「選択ツール」で選択するとプロパティインスペクタで線おスタイルを変更することができる。

インクボトルツールでは、

塗りの設定がされた部分に新たに線を追加することもできる。

図形の変更と複製

トレーニングブック P49~57

同じ図形の複製

トレーニングブック P49

コピーして、ペーストをすると図形の複製ができる。

「選択ツール」で角を移動しよう

トレーニングブック P50

「選択ツール」で頂点にポインタを持っていくとポインタの形が変わるので、変わったらドラック&ドロップする。

「選択ツール」で直線を曲線にする

「選択ツール」で辺にポインタを当てるとポインタの形が変わるので、変わったらドラックする。

「ダイレクト選択ツール」の使い方

トレーニングブック P51

fireworksと同様の使い方ができる。

図形の台形に変形してみよう

トレーニングブック P51~52

「自由変形ツール」を使用して変更する。

オプションで歪曲を選択する。

平行に変更してみよう

トレーニングブック P52

「自由変形ツール」を使用して変更する。

オプションで回転と傾斜を選択する。

図形を膨らませてみよう

トレーニングブック P53

「自由変形ツール」を使用して変更する。

オプションで、エンペローブを選択

課題の練習

魅力的なキャラクターに仕上げる。

変形ツールを使用して、魅力的なキャラクターに仕上げる。

変形ツールの練習の課題

5コマ目

いままで学習したものを生かして、イラストを描いてみよう。

イラストの描画の課題

6コマ目

鉛筆ツールとペンツール

トレーニングブック P58~62

鉛筆ツールで描く

トレーニングブック P58~59

鉛筆ツールを使用して線を描く

オプション設定で、ストレート・スムーズ・インクがある。

ペンツールで描く

トレーニングブック P60~62

Fireworksと同様の使い方

ブラシツールと消しゴムツール

トレーニングブック P63~68

ブラシツール

トレーニングブック P63~64

塗りには5種類のペイントの種類がある。

標準・・・上に描かれてペイントされる。線も塗りも両方ペイントされてしまう。

塗りをペイント・・・塗りの部分だけペイントされる。

背面をペイント・・・線と塗りのない部分だけペイントされる。

選択範囲をペイント・・・選択された部分だけペイントされる。

内側をペイント・・・塗りを開始した部分だけがペイントされる。

下の画像が各ブラシの特性

ブラシの特性の画像

塗りの固定とグラデーション

トレーニングブック P65

塗りが固定されると、グラデーションを描けるときに、全体でかけるか、個別にかけるかの違い。

グラデーションの違いの画像

このページのトップへ移動する。

サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

06 | 2007/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。