アクセスカウンタ

還暦QPON喜寿

プロフィール

ブログ名
還暦QPON喜寿
ブログ紹介
ホームページ「還暦QPON喜寿」で公開している、ホームページ用のオリジナルな裏ワザ、ソースプログラム、ホームページ用ツール、などの新着情報、GoogleAdSenseを使ったアフィリエイトやSEOについての分析などを書いています。
麻雀ゲーム「上海」インターネット囲碁など、ゲームサイトも好評です。
また「地図から飛び出すリンク集(QPON LINK)」には全国の多くの仲間たちのホームページが集まってメーリングリストで相互研さんを図っています。
zoom RSS

スマホでも効果音の同期したスライドショー

2017/12/16 19:53
私の提供しているスライドショーのソースは、効果音を同期して鳴らすことができる
先般、仲間だ「山口線のSL」を効果音入りで発表していた
http://kusano.sakura.ne.jp/2017SLyamaguchi2/
ところがスマホで開くと、画面はスマホサイズに変換されるか効果音が鳴らない
スマホはプログラムで自動的に音が鳴らせないようだ
PCなら
<audio id="bgm" src="***.mp3" autoplay>&<audio>
で最初から鳴るし
同期して鳴らせたいなら
<audio id="bgm" src="***.mp3">&<audio>
と準備して置き、ならせたいときに
&%60script>
document.getElementById("bgm").play();
&%60/script>
と命令すればよいのだが

スマホの場合、通信が有料、パケット数の大きいオーデオやビデオ動画を、ユーサーのアクションなしに
プログラムでダウンロードされてしまっては問題なので、そのような仕様になっているらしい。

そので今回工夫したのは
1)サムネールを書くときに効果音も
fou(i=1;i<n;i++){
document.write('<img src="'+syasin[i]+'">');
document.write('<audio id="bgm'+i+'" src="'+oto[i]+''">&<audio>');
}
のように一緒に書いておく
幸い、プレーヤーは非表示のままだ


2)スライドショー開始ボタンを押したときに、すべてのオーディオファイルをダウンロードさせる
一回のタップでもアクションを伴えば、複数のオーデオファイルをダウンロードできる

for (i=1;i<n;i++){
document.getElementById("bgm"+i).load();
}

3)実際にならせたい場面,例えば3番の音を鳴らせたければ

document.getElementById("bgm3").play();

と書いておけばいいのだ

http://kusano.sakura.ne.jp/2017SLyamaguchi2/

をスマホで開くとPCと同じように効果音が鳴るはずです
記事へなるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 0 / コメント 0


やっとフルコースの散歩ができるようになった

2017/12/14 21:03
愛犬を連れて毎日歩いていた3Kmの散歩コース、春に愛犬が他界してからも、望遠カメラで野鳥を探しながら、歩いていたが。
夏に膝関節症が再発して以来、続いて帯状疱疹とその後の神経痛で、4か月近く歩いていなかった。
今日、帯状疱疹後神経痛の痛みが和らいだので、歩いてみた。
10kgも痩せたせいか長い上り坂では途中で一休みしながら、何とか自宅にたどり着いた。
すっかり筋肉が衰えた気がする、寒い日が続くが毎日歩く努力をしなければ

記事へなるほど(納得、参考になった、ヘー) ブログ気持玉 2 / トラックバック 0 / コメント 1


小学校のパソコンクラブ復帰

2017/12/11 19:48
夏休み以来、小学校パソコンクラブのお手伝いは膝関節症に続く帯状疱疹、帯状疱疹後神経痛で欠席させていただいていたが、今日は今年最後の活動日、痛みも少し和らいできたので、出掛けた
子供たちと触れ合っていると、痛みを忘れて、一時間を過ごすことができた。
終わって帰ると、また痛みを覚えるのだが、他に気を取られていれば痛みを忘れる、痛みとは不思議なものだ
記事へガッツ(がんばれ!) ブログ気持玉 1 / トラックバック 0 / コメント 0


スマホで横スクロールするページを作る

2017/12/10 20:21
紅葉列島リンク集のモバイルフレンドリー化をしたいと思って取り組んだ
<IFRAME>に収まてある地図上に貼ったリンクなので<IFRAME>自体をスマホサイズにしてスクロールして見るようにすれば
<iframe src="http://qpon-toyota.com/mapsys/koyo2017/mapsys11.html" width=320 height=460 scrolling=yes>
</iframe>

モバイルフレンドリーになるだろうと思ったが、iPhoneは横スクロールしなく全部が縮小して表示されてしまった。
いろいろ調べた結果、<IFRAME>のスクロールは効かないだ、スタイルシートの
overflow:auto
を使えばスクロールさせることが分かった

<div style="width:320;height:600;overflow:auto">
<iframe src="http://qpon-toyota.com/mapsys/koyo2017/mapsys11.html" width=800 height=460\>
</iframe>
</div>
記事へなるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 0 / コメント 0


年4回の地域のゴルフコンペ、連続して欠席

2017/12/08 19:36
年に4回行われている地域のゴルフコンペ
9月は膝関節症で欠席し、今日行われた12月のコンペは帯状疱疹後神経痛で欠席、
半年病欠とは情けない。
春に、毎日一緒に散歩してくれていた愛犬が他界してから、散歩をサボり気味だったため体力が落ちて、病魔に狙われたのかもしれない
傘寿という節目の歳、これを乗り切れば、また元気な新年がも返られると信じ養生を続けます
記事へなるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 0 / コメント 0


紅葉列島2017、ただ今65個所収録

2017/12/04 10:16
全国の仲間たちが、各地の紅葉を撮影して紹介しているページへのリンク集
自己登録型でただ今65K所収録されました
http://qpon-toyota.com/mapsys/koyo2017/
ぜひ、訪問して、紅葉を楽しんでください。
自分のサイトでも使いたい場合は

<iframe width="780" height="640" src="http://qpon-toyota.com/mapsys/mapsys_sub.html?koyo2017">
</iframe>

と書いて共用してください
記事へナイス ブログ気持玉 1 / トラックバック 0 / コメント 0


手っ取り早いモバイルフレンドリー化

2017/12/02 17:28
仲間たちのページのモバイルフレンドリー化をアドバイスしているが
一番、障害になっていつのが<TABLE>で横幅を数字で固定していることにある
スマホは横幅が画面をはみ出すと、その分画面が縮小され、文字が小さくなり読めなくなる
固定せずに「%」でスクリーンの横幅の何%で書かれていれば、横幅の狭いスマホ画面では文字が改行されて表示されるので、はみ出して全体が縮小されてしまうことはない

ただ、%指定だと、PCのワイドスクリーンでは横に間延びして締まりにないレイアウトになってしまう
そこで、外枠を<TABLE>タグで囲い、その横幅はPCは固定幅、スマホが画面幅になるように、JavaScriptを書き
以降はすべて%指定にする。

<script>
 ww=800
   if(screen.width<800){
     ww=screen.width;
    }
 docment.write("<table width="100%"><tr><td>");
</script>

<!--以下横指定は%で書く

<table width=100%><tr><td>〜〜〜〜

そうすると外枠に対する%でマスの横幅が決まる

この原理で、仲間たちのサイトをモバイルフレンドリー化した事例です

http://qpon-toyota.com/demo/konchan/
http://qpon-toyota.com/demo/mabo/index_10.html
http://qpon-toyota.com/demo/kawasima/yamaguchi.html

参考にしてください
記事へなるほど(納得、参考になった、ヘー) ブログ気持玉 1 / トラックバック 0 / コメント 0


続きを見る

トップへ

月別リンク

還暦QPON喜寿/BIGLOBEウェブリブログ
文字サイズ:       閉じる