この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
広告
posted by fanblog
●テスト●てすと
2021年11月24日
2021年09月13日
2021年09月08日
2021年09月06日
test 音のなるボタンを作ってみる
ブログでMP3を鳴らす【はてな、Blogger】直接埋め込む方法も
https://www.engineer-log.com/entry/2019/10/08/sound-mp3
HTML5のaudioタグで効果音の出るボタンを設置する方法
https://minagawa.design/blog/webdesign/html5koukaon/#JavaScriptonClick
↑基本はこれ
【HTML5】ボタンにマウスオーバーした時に効果音を鳴らす
https://www.s-oj.com/ec-business/html5_mouseover_ring/
↑さらにクリックではなく、マウスオーバーにしたい
現在、音は鳴りません。
https://www.engineer-log.com/entry/2019/10/08/sound-mp3
HTML5のaudioタグで効果音の出るボタンを設置する方法
https://minagawa.design/blog/webdesign/html5koukaon/#JavaScriptonClick
↑基本はこれ
【HTML5】ボタンにマウスオーバーした時に効果音を鳴らす
https://www.s-oj.com/ec-business/html5_mouseover_ring/
↑さらにクリックではなく、マウスオーバーにしたい
現在、音は鳴りません。
test js「記事の外で定義した関数を、記事内で使って、innerHTMLとかしたい」ちなみにalertはできた。javascript
javascript
・記事で使いたい関数を、トップページの共有部分の【上のほう】に置いたら関数は使える。
しかし、
・そこでdocument.getElementByIdで、特定のdiv id="〜"にinnerHTMLしようとしたら、
そのIDを指定したdivはないと言われる。
・試しに、共有部分の【一番下】に置いたら、「記事内で使おうとしてる関数は定義されてない」
と言われる。
この順序の問題、どう解決すればいいんだ?
これは、記事内で
div id="xx"
document.getElementById(”xx”)
とやってる場合は、
下で指定してるIDが上にあるので使える。
しかし、それを関数にしようとして
「document.getElementById(”〜〜”)」の部分を
上や下に移動するとエラーが出る。
・上ではもちろん、そのgetしようとしてるIDはない、と言われる。
(その上にはないから)
・下だと、逆に、記事で使おうとしてる関数が、まだ定義されてない、と言われる。
関数の定義は、使おうとしてる記事より、(はるか)下にあるから。
これ、なんとかする方法ないのかな?
●ちなみにalertはできた。
●記事内のidで、なにかを取得してなにかする関数じゃないから。
そうか、記事内のidをgetして、innerHTMLで書き出すやり方じゃなくて、
共有部分の上で、定義済みの関数を使うけど
書き出すのは、「関数から記事内のidを取得して、innerHTMLで書き出す」という仕組みにしなければいいのか。
●関数内じたいに、動画の埋め込みタグを持たせて、
動画URLだけ指定したら、それと結合して
もしinnerHTMLを使うとしたら、ブログ共有関数を
記事内で使うってやり方でできるかもしれない。
・その場合、記事でその関数使う場合、結局 innerHTML記述しないとダメなので
煩雑・冗長になり、jsの力でサクッと省力化という、当初の希望とはちょっと変わってしまうけど。
・まぁ遊び、試し的な勉強としてなら、実用性はともかく
やってみてもいいかもしれない。jsの動きや性質に慣れる練習にはなる。
●もしくは、関数を上と下で切り分けて記述しても無理かな
上、関数定義
中、記事でその関数を使用
下、記事内のidを取得してごにょごにょ
でも、中の記事かから、上の関数を使ってる時点で、
もう下の関数も呼び出されてる。
その時に、下の関数のコードが、ブラウザに読み込まれてなかったらどうなるんだ?
結局ダメってことなのか?
あれ、関数の定義って、同一ファイルのJSの中でも、
必ず上で記述しといて下で使わないとダメなんだっけ?
切り分けて書いたり、別ファイルにしたもその仕組みは同じなのか、
よりシビアになるのか。
上、共有部分で、alert1()定義→alerrt2()呼び出し
中、記事で、alert1()使用
下、共用部分で、alert2()定義→普通のalert()呼び出し
↓dev toolのお言葉
Uncaught ReferenceError: myAlert2 is not defined
at myAlert1
なるほど
ちなみに、jsか他の言語で
1つのファイルで、
「上で独自関数使用して、
その下で、その関数の定義書いてる」みたいなのを
見たようなやったようなことあるような気がするけど
ちゃんと動いてた気がするけど、勘違いか。
・記事で使いたい関数を、トップページの共有部分の【上のほう】に置いたら関数は使える。
しかし、
・そこでdocument.getElementByIdで、特定のdiv id="〜"にinnerHTMLしようとしたら、
そのIDを指定したdivはないと言われる。
・試しに、共有部分の【一番下】に置いたら、「記事内で使おうとしてる関数は定義されてない」
と言われる。
この順序の問題、どう解決すればいいんだ?
これは、記事内で
div id="xx"
document.getElementById(”xx”)
とやってる場合は、
下で指定してるIDが上にあるので使える。
しかし、それを関数にしようとして
「document.getElementById(”〜〜”)」の部分を
上や下に移動するとエラーが出る。
・上ではもちろん、そのgetしようとしてるIDはない、と言われる。
(その上にはないから)
・下だと、逆に、記事で使おうとしてる関数が、まだ定義されてない、と言われる。
関数の定義は、使おうとしてる記事より、(はるか)下にあるから。
これ、なんとかする方法ないのかな?
●ちなみにalertはできた。
●記事内のidで、なにかを取得してなにかする関数じゃないから。
そうか、記事内のidをgetして、innerHTMLで書き出すやり方じゃなくて、
共有部分の上で、定義済みの関数を使うけど
書き出すのは、「関数から記事内のidを取得して、innerHTMLで書き出す」という仕組みにしなければいいのか。
●関数内じたいに、動画の埋め込みタグを持たせて、
動画URLだけ指定したら、それと結合して
もしinnerHTMLを使うとしたら、ブログ共有関数を
記事内で使うってやり方でできるかもしれない。
・その場合、記事でその関数使う場合、結局 innerHTML記述しないとダメなので
煩雑・冗長になり、jsの力でサクッと省力化という、当初の希望とはちょっと変わってしまうけど。
・まぁ遊び、試し的な勉強としてなら、実用性はともかく
やってみてもいいかもしれない。jsの動きや性質に慣れる練習にはなる。
●もしくは、関数を上と下で切り分けて記述しても無理かな
上、関数定義
中、記事でその関数を使用
下、記事内のidを取得してごにょごにょ
でも、中の記事かから、上の関数を使ってる時点で、
もう下の関数も呼び出されてる。
その時に、下の関数のコードが、ブラウザに読み込まれてなかったらどうなるんだ?
結局ダメってことなのか?
あれ、関数の定義って、同一ファイルのJSの中でも、
必ず上で記述しといて下で使わないとダメなんだっけ?
切り分けて書いたり、別ファイルにしたもその仕組みは同じなのか、
よりシビアになるのか。
上、共有部分で、alert1()定義→alerrt2()呼び出し
中、記事で、alert1()使用
下、共用部分で、alert2()定義→普通のalert()呼び出し
↓dev toolのお言葉
Uncaught ReferenceError: myAlert2 is not defined
at myAlert1
なるほど
ちなみに、jsか他の言語で
1つのファイルで、
「上で独自関数使用して、
その下で、その関数の定義書いてる」みたいなのを
見たようなやったようなことあるような気がするけど
ちゃんと動いてた気がするけど、勘違いか。
2021年09月05日
test js vue.js
JavaScript テスト用ブログを用意して動作確認をする
https://fanblogs.jp/pontaoyaji/archive/1066/0
Vue.js:Webで簡単に公開する方法
https://fanblogs.jp/to70/archive/562/0
とほほのwww入門
Good morning.
Hello!
Bye!
https://fanblogs.jp/pontaoyaji/archive/1066/0
Vue.js:Webで簡単に公開する方法
https://fanblogs.jp/to70/archive/562/0
とほほのwww入門
Good morning.
Hello!
Bye!
タグ: Vue.js
2021年09月03日
自分用ツールjavascript【】動画URLから埋め込みタグ作る君【blog運営】
↓ここに動画URLを張り付けてください。
再生リスト (個別動画は、どちらを選択しても自動的に個別動画の埋め込みタグを生成します)
個別動画 ←再生リストだけど、単独動画として埋め込みたい場合これをチェック。
●動画埋め込みタグ
●動画のID
●再生リストID
●生成したタグを張り付けた場合のサンプル
見本URL
◇動画1つ →動画1つの埋め込みタグを生成します。
https://www.youtube.com/watch?v=oKDFDCSQNY0
◇再生リスト →再生リストの埋め込みタグを生成します。
https://www.youtube.com/watch?v=oKDFDCSQNY0&list=PL4CfyKGXE0b0rB7ZFeK8-77cPAtAU3frX&index=4
●ローカルだと動くのに、fanblogだとうまくいかなり理由(の1つ?)発見。
なるほど、urlにリンクタグが自動でつくからっぽい。すーっとした。
そりゃ動かないわけだ。これに気付かず、他の打ち間違いや、もっと意味不明な原因があるのかと模索してた。
・ローカルのコード
embedPart1 = '<iframe width="560" height="315" src="
https://www.youtube.com/embed/';
↑これが、
・投稿した記事の該当コード部分
embedPart1 = '<iframe width="560" height="315" src="
<a href=" https://www.youtube.com/embed/'; " target="_blank">
https://www.youtube.com/embed/';
</a>
↑こうなる
●解決策
embed用文字列の前半部分を
3分割したら、fanblogがURLとして認識しないので
できた!!!
・元のダメなやつ
embedPart1 = '<iframe width="560" height="315" src=" https://www.youtube.com/embed/';
・これだとうまくいった
embedPart1 = '<iframe width="560" height="315" src="h';
embedPart1_2 = 't';
embedPart1_3 = 'tps://www.youtube.com/embed/';
ローカルだと動くのに、fanblogに投稿すると動かない。
なぜか、splitを使うとまともに動かなくなる
https://www.youtube.com/watch?v=oKDFDCSQNY0&list=PL4CfyKGXE0b0rB7ZFeK8-77cPAtAU3frX&index=4
埋め込み用URL https://www.youtube.com/embed/oKDFDCSQNY0
ふつうのURL https://www.youtube.com/watch?v=oKDFDCSQNY0
todo
URLには、動画の個別文字列だけでなく、
再生リストごとの文字列や
index何番目とかの文字列もあるので
必要なとこ(動画の個別文字列)だけとりだして、結合させる必要がある
課題1
・URLから、動画の(または再生リストの)個別文字列を抜き出す
・動画埋め込みタグと合体させる
課題2
・URLに再生リストの記述があるかしらべる
・URLから、動画の(または再生リストの)個別文字列を抜き出す
・ある場合、再生リスト用の埋め込みタグにする
課題3
・余裕があれば、再生リストURLでも、個別動画の埋め込みを生成もできるようにラジオボタンで分岐
その先の課題
・別途スクレイピングで、URLから各種情報を取得する。
・・動画タイトル、チャンネル名、投稿日時、再生回数
・チャンネル名や通称を、自動で記事のタグとして入力、投稿させる
・・スクレイピング時の日時から投稿日時を引いて、何日(と何時間)経過したか取得。
・・再生回数を、経過日時で割り、何日で何回再生されたか計算し、
単なる累計再生回数ではなく、本当の伸び率、人気度を計算する。
※もちろん、これにしてもyoutube全体の視聴者数などの影響は受けるけど。
・・上記の独自尺度を、横棒グラフやイメージ絵などで表す。
埋め込んだ動画の再生で
日本語字幕をデフォでつける場合
src="//www.youtube.com/embed/xxxxxxxxxxx?cc_load_policy=1&cc_lang_pref=ja
2021年08月27日
2021年08月26日
test。youtubeとtwitterの埋め込み、共有について
※この内容は消すかもしれないです。
◇◇twitter埋め込み
Twitter埋め込みツイートをカスタマイズ!CSSを変更する方法も
https://ponhiro.com/twitter-tweet-customize/
結局、ガワは加工できても中身は加工できないみたい
[CSS]ブログに埋め込んだツイートのデザインをCSS で変更する方法
https://www.webantena.net/css/iframe-twitter-tweet/
?できてるかのように書いてるけど変わってないような
記事投稿時はできてたけど、今はできなくなったということかな
◇直接ここで色を変えたらどうなるのか...変わらない
◇人がやってたやつ。
当該ツイートが消されてるとこうなるっぽい
◇twitterからデフォでの埋め込み
↑
こっちは最後に
<
script async src=" https://platform.twitter.com/widgets.js " charset="utf-8"
></script>
ってのがついてるけど、これはなくてもよさそう。
◇◇youtube
最初のサイズ指定の有無で、サイズが変わってるだけなのかな
サイズ指定だけ抜いて小さくなるかテスト
◇自分がいつもやってる埋め込み
タグの中身
iframe width="560" height="315"
src=" https://www.youtube.com/embed/zXFk2UGmp-4 "
title="YouTube video player"
frameborder="0"
allow="accelerometer;
autoplay;
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture"
allowfullscreen
◇他の人がやってたやつ
小さいyoutube埋め込み(特に後付けでcssとかで調節してないのにデフォで小さいっぽいやつ)
◇タグの中身
iframe src=" https://www.youtube.com/embed/zXFk2UGmp-4 "
frameborder="0"
allow="
accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture
"
allowfullscreen="allowfullscreen"
◇◇twitter埋め込み
Twitter埋め込みツイートをカスタマイズ!CSSを変更する方法も
https://ponhiro.com/twitter-tweet-customize/
結局、ガワは加工できても中身は加工できないみたい
[CSS]ブログに埋め込んだツイートのデザインをCSS で変更する方法
https://www.webantena.net/css/iframe-twitter-tweet/
?できてるかのように書いてるけど変わってないような
記事投稿時はできてたけど、今はできなくなったということかな
◇直接ここで色を変えたらどうなるのか...変わらない
そういえば僕がiOS/Android/フロントエンドを主戦場にしなかったのは、「細々としたUI変更の指示に巻き込まれたくない」というメインの理由以外に「端末やブラウザごとの表示や挙動の違いに悩まされたくない」というのもありまして、僕の観点だとこれもかなりの人生の無駄という感があるわけですねw
− 勝又健太@テック系YouTuber (@poly_soft)
June 10, 2019
◇人がやってたやつ。
そういえば僕がiOS/Android/フロントエンドを主戦場にしなかったのは、「細々としたUI変更の指示に巻き込まれたくない」というメインの理由以外に「端末やブラウザごとの表示や挙動の違いに悩まされたくない」というのもありまして、僕の観点だとこれもかなりの人生の無駄という感があるわけですねw
− 勝又健太@テック系YouTuber (@poly_soft)
June 10, 2019
当該ツイートが消されてるとこうなるっぽい
受託やってるとこうはいかないんだけど、健太ちゃんのこの選択は正しい。
昔、Windowsのバージョンごとに泣かされた身として良くわかる。
ガラケーでも泣かされたわ。
突き進むなら無駄は省いた方が良い。
でも、無駄の中にしかない楽しいものもあるけどね。 https://t.co/HmLh46TDC0
− いけしん@ジジイ(無資格無認可エンジニア) (@_ikeshin)
June 10, 2019
◇twitterからデフォでの埋め込み
昨日動画にもしてますが、個人投資家1300人が選ぶ
「最近損した銘柄、利益出た銘柄ランキング」 pic.twitter.com/N7xM9lPwey
— 株の買い時@YouTube (@kabunokaidoki)
August 25, 2021
↑
こっちは最後に
<
script async src=" https://platform.twitter.com/widgets.js " charset="utf-8"
></script>
ってのがついてるけど、これはなくてもよさそう。
◇◇youtube
最初のサイズ指定の有無で、サイズが変わってるだけなのかな
サイズ指定だけ抜いて小さくなるかテスト
◇自分がいつもやってる埋め込み
タグの中身
iframe width="560" height="315"
src=" https://www.youtube.com/embed/zXFk2UGmp-4 "
title="YouTube video player"
frameborder="0"
allow="accelerometer;
autoplay;
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture"
allowfullscreen
◇他の人がやってたやつ
小さいyoutube埋め込み(特に後付けでcssとかで調節してないのにデフォで小さいっぽいやつ)
◇タグの中身
iframe src=" https://www.youtube.com/embed/zXFk2UGmp-4 "
frameborder="0"
allow="
accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture
"
allowfullscreen="allowfullscreen"