第10回ホームページ勉強会

13日目　2019年　3月14日実施

三宅　節雄

QPONのQLakeとQWaveのダウンロード

　2月14日の『ホームページ勉強会』は過去の勉強会のおさらいでした。今までの勉強会の内容が、理解できましたでしょうか？

　また前回は本部から那須シニアネットの臨時総会のために会場を貸してほしいとの要求があり、ホームページ勉強会としては、1か月ぶりの開催になりますね。

　今回の勉強は写真に動きを作るお遊びで、QPONさんの『QLake(画面の下に波打つ池を作る)』と『QWave(画面に波を起こす)』をダウンロードし、皆さんの写真に適用致しましょう。

　まずMy-HP内にqlakeの様な名前で新しフォルダーを作っておきます

　QPONさんの『写真の水や炎や旗などを揺らすソース』サイトへはここからリンク先に繋がります。

１．qlake

　上記をクリックすると下記のメニューが表示されますが、初期はqlake.jsQponLake(画面の下に波打つ池を作る)に

繋がっており、ソースから下記htmlをコピーします。

<html lang="ja">
<head>
<meta charset="shift_jis">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>qlake</title>
</head>
<body>
<script>
ur = "./"; //写真の置き場
file = "lake.jpg";//写真
waves = -20; //波の数（＋－は波の方向)
speed = 0.5; //波の速さ
scale = 0.3; //波の振幅
lake = 80; //池の大きさ（画面の％）（小さいほど準備時間が短い）

</script>
<script src="http://qpon-toyota.com/jquery/lake/qlake.js" charset="shift_jis"></script>

</body>
</html>

　コピーしたhtmlは、NotePadなどに貼り付け、qlake.html等の名前を付けて先に作ったフォルダーに入れます。

下の水面を揺らしたい写真は水の上になる部分だけにします。従って縦のサイズは通常の半分で、600×225ピクセル程度にします。
写真の名前は元々はlake.jpgですが、名前を変えてもOKです。
上記の例では写真の場所は、htmlと同じ場所ですがimgなどのフォルダーに入れたい場合は./をimg/に変えます。

qlake.jsというサブプログラムは作者のページを参照していますが、自分のページに取り込むこともできます。
作者が削除すると使えなくなってしまいますから、私はqlake.jsもダウンロードして同じフォルダーに入れています。
その場合にはhttp://qpon-toyota.com/jquery/lake/qlake.jsをqlake.jsとしリンク先を削除しています。

以上の操作によりMy-HP内のqlakeというフォルダー内には①qlake.html、②○○.jpg、③qlake.jsの3ファイルがあります。

qlake.htmlをダブルクリックし、元の写真の下側にある水面が揺れていればOKです。

作品例

２．qwave

　次にqwave.js(QponWave)をクリックします。QponWaveは写真に写った水面に波を起こします。

　先のｑｌａｋｅと同様にソースをコピーして名前をqwave.html等として同じフォルダーに保存します。

<html>
<head>
<meta charset="shift_jis">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>qwave</title>
</head>
<body>
<script>

ur="./"; //ファイルのある場所
file="aosagi.jpg,80";//写真,縮尺率％（省略時=100）
mask="aosagi.png,1";　//マスク,透明色：0=透明処理済み/1=白を透明にする
waves = 10; //波の数(+-で流れ方向が変わる)
speed = 0.2; //波の速さ(小さいと準備時間がかかる）
scale = 0.3; //波の振幅
lake = "0,100"; //波の範囲（縦位置で上から　開始％,終了％）
　　　　　　　　　　//　　　（範囲を狭めると準備時間が短縮できる）
</script>

<script src="http://qpon-toyota.com/jquery/wave/qwave.js" charset="shift_jis">
</script>

</body>
</html>

今回は写真を２枚準備します。サイズは600×450ピクセルで、一枚目は池や湖の様な水面が写っている写真で、
二枚目はその写真の水面を白で塗りつぶすか透明化した写真でpngかgifで保存します。

-------------------------------------------------------------------------------------------------------

御参考：写真の透明化

写真の一部を白塗りするにはmspaintでできますが、透明化はJTrimでも条件付きで1回しか実施できません。

写真の一部を透明化するにはPhotoFiltre 7が便利です。

最新版のダウンロードと日本語化は上記から実施して下さい。

注：期間限定(～2019年3月末)でPhotoFilterのセットアッププログラムと日本語化のファイルをアップしました。
①セットアッププログラム、②日本語化ファイル
①、②共にデスクトップに保存して、その後①はダブルクリックで起動してインストールします。
②は C:/Program Files (x86)/PhotoFiltre 7/のフォルダー内に入れ、StudioEN.plgは削除します。

-------------------------------------------------------------------------------------------------------

PhotoFiltreのインストール方法はここに説明をリンクしました。

Photofiltreを使用して写真の一部を透明化する方法はここに説明をリンクしました。

-------------------------------------------------------------------------------------------------------

作品例