かめ太の、今日も元気に金銀財宝♪

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。

Vue.js 動画リンク。再生リストも。

たった30分でわかるVue js入門
https://www.youtube.com/watch?v=JxXtAsHR4K0&t=17s
きど
↑わかりやすい、見やすい、聞きやすい

Vue.js入門 #01： 一番最初のプログラム
https://www.youtube.com/watch?v=cL3Al628mLE&list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW
たにぐち まことのともすたチャンネル

VueJS入門その1「インストールする」
https://www.youtube.com/watch?v=rfZfrNmIiJk&list=PLkQpCfbvj0lwds9oPsRRrFp1ZxTGyueqv
大阪コード学園
声小さい

Vue.js入門講座【最新のバージョン3対応】基礎から学ぶVue js 3
https://www.youtube.com/watch?v=wlCwyouRbtE&t=1s

【Vue.js入門】Vue.jsでタイピングゲームをつくってみよう！
https://www.youtube.com/watch?v=dP652Gi_57k

npx npm yarn

Webアプリ独学開発チャンネル【打田裕馬】
https://www.youtube.com/channel/UCaCyTT6rvhCyqU6-tMhpP0A/videos
php laravel多め

---

npm入門 npxの使い方を解説
https://www.youtube.com/watch?v=9A5ppMq5u5k

【やっすんとれい先生】yarn と npm は何が違うの？
https://www.youtube.com/watch?v=0vhPHX-TD_o&t=2s

パッケージ管理ツールとセマンティックバージョニング【gem/pip/yarn/npm/composerなど】
https://www.youtube.com/watch?v=GCa3nMseZnQ&t=211s

NPMって何？NPMの説明と環境構築
https://www.youtube.com/watch?v=nJQVcjr_zOg

npmとは？モダンJavaScriptで使われるnpmがよく分かる動画
https://www.youtube.com/watch?v=1XADZvNlfy8

恐竜のは、ミミズ？が星食べてくゲームにも要素にてる
saygames - train taxi 面白そう！

perfect slices、シュレッダーかけて最後にお金になるのがいい
アフォーダンスか
確かに気持ちのいいゲームってあるよな

データよりも面白さ？ 芸者東京に学ぶ！グローバルでヒットするハイパーカジュアルゲームの作り方 - Unite Tokyo 2019
https://www.youtube.com/watch?v=64zZ76HuCY8

解説欄。「snowball.io」「Traffic Run!」でUSのアプリランキング1位を獲得
「snowball.io」「Traffic Run!」でUSのアプリランキング1位を獲得された、芸者東京株式会社のCEO田中様をゲストにお迎えし、ハイパーカジュアルゲームヒットの秘策や社内環境の取り組み、開発についてお話しいただきます。

出演：
中村 優一（ユニティ・テクノロジーズ・ジャパン合同会社 Unity Ads Japan,Business Development Manager）
田中 泰生（芸者東京株式会社 CEO）

ゲーム画面は１４分くらいから
車と恐竜

作用メモ。jQuery併用で、chrome拡張機能でスクレイピング。

---

うまく動かない。原因はわからないが、いろいろ検索してたら
「xmlhttprequest 非推奨 fetch」という検索がでてきた。
まぁ、jQueryじたいも古いものらしいけど、そのなかでさらに
これは非推奨らしい。
とりあえずサクッと動かないし、調べたらわからないことだらけのページがヒットしまくる。
自分にはまだ早すぎる世界のようだ。
とりあえず、これはおあずけということにしておく。

javascriptとchrome拡張機能の初歩的なとこから、少しずつやっていこう。
いずれこのエラーの原因がわかるか、
「別の方法で、もっと便利でわかりやすくやりたいことが
できる」ようになってる日が来るだろう。

---

これを試し中
Chrome拡張とJavascriptでお手軽RPAスクレイピング
https://rooter.jp/web-crawling/chrome-extension/
なにやらjQueryを使うみたい

Downloading jQuery
https://jquery.com/download/

jQueryのサイトからどのファイルをダウンロードまたはCDNするのか
https://zigzow.com/post-1446/
>ちなみに、過去のバージョンをダウンロードしたい場合
>最新バージョンでは実装したスクリプトが動かないなどのケースで過去バージョンのjQueryを読み込みたい場合はCDNサイトからインストール・ダウンロードできます。
>jQuery CDN

jQuery CDN – Latest Stable Versions
https://code.jquery.com/

---

Chrome Extension "Refused to load the script because it violates the following Content Security Policy directive"
https://stackoverflow.com/questions/34950009/chrome-extension-refused-to-load-the-script-because-it-violates-the-following-c
拡張機能のフォルダを
Edge「展開して読み込み」したら、＜これに近い？＞エラーが出る

jQueryをダウンロードしてやってみたらエラーは消えたが
拡張機能が何もしてくれないみたいで、クリックしても真っ白なポップアップがでるだけ

---

javascript
・記事で使いたい関数を、トップページの共有部分の【上のほう】に置いたら関数は使える。
しかし、
・そこでdocument.getElementByIdで、特定のdiv id="〜"にinnerHTMLしようとしたら、
　そのIDを指定したdivはないと言われる。
・試しに、共有部分の【一番下】に置いたら、「記事内で使おうとしてる関数は定義されてない」
と言われる。
この順序の問題、どう解決すればいいんだ？

これは、記事内で
div id="ｘｘ"
document.getElementById（”ｘｘ”）
とやってる場合は、
下で指定してるＩＤが上にあるので使える。

しかし、それを関数にしようとして
「document.getElementById（”〜〜”）」の部分を
上や下に移動するとエラーが出る。

・上ではもちろん、そのgetしようとしてるＩＤはない、と言われる。
（その上にはないから）
・下だと、逆に、記事で使おうとしてる関数が、まだ定義されてない、と言われる。
関数の定義は、使おうとしてる記事より、（はるか）下にあるから。

これ、なんとかする方法ないのかな？

●ちなみにalertはできた。
●記事内のidで、なにかを取得してなにかする関数じゃないから。

そうか、記事内のidをgetして、innerHTMLで書き出すやり方じゃなくて、
共有部分の上で、定義済みの関数を使うけど
書き出すのは、「関数から記事内のidを取得して、innerHTMLで書き出す」という仕組みにしなければいいのか。

●関数内じたいに、動画の埋め込みタグを持たせて、
動画URLだけ指定したら、それと結合して
もしinnerHTMLを使うとしたら、ブログ共有関数を
記事内で使うってやり方でできるかもしれない。

・その場合、記事でその関数使う場合、結局 innerHTML記述しないとダメなので
煩雑・冗長になり、jsの力でサクッと省力化という、当初の希望とはちょっと変わってしまうけど。

・まぁ遊び、試し的な勉強としてなら、実用性はともかく
　やってみてもいいかもしれない。jsの動きや性質に慣れる練習にはなる。

●もしくは、関数を上と下で切り分けて記述しても無理かな
上、関数定義
中、記事でその関数を使用
下、記事内のidを取得してごにょごにょ

でも、中の記事かから、上の関数を使ってる時点で、
もう下の関数も呼び出されてる。
その時に、下の関数のコードが、ブラウザに読み込まれてなかったらどうなるんだ？
結局ダメってことなのか？

あれ、関数の定義って、同一ファイルのＪＳの中でも、
必ず上で記述しといて下で使わないとダメなんだっけ？

切り分けて書いたり、別ファイルにしたもその仕組みは同じなのか、
よりシビアになるのか。

上、共有部分で、alert1()定義→alerrt2()呼び出し
中、記事で、alert1()使用
下、共用部分で、alert2()定義→普通のalert()呼び出し

　↓dev toolのお言葉
Uncaught ReferenceError: myAlert2 is not defined
at myAlert1
なるほど

ちなみに、jsか他の言語で
１つのファイルで、
「上で独自関数使用して、
その下で、その関数の定義書いてる」みたいなのを
見たようなやったようなことあるような気がするけど
ちゃんと動いてた気がするけど、勘違いか。

chrome拡張機能で作ったら、
自分が望んでるスクレイピング的なこともできそう

---

---

Chrome Extension の作り方 (その1: 3つの世界) - Qiita
https://qiita.com/sakaimo/items/416f36db1aa982d8d00c
Chrome拡張でとっても役立つAPIのまとめ
https://qiita.com/Yuta_Fujiwara/items/daf41429f95caec82982

---

Documentation > Extensions
API Reference
https://developer.chrome.com/docs/extensions/reference/
chrome.storage
https://developer.chrome.com/docs/extensions/reference/storage/
chrome.history
https://developer.chrome.com/docs/extensions/reference/history/

Documentation > Extensions
> Develop extensions and themes
Extension development overview
https://developer.chrome.com/docs/extensions/mv3/devguide/

---

Chrome拡張を使って様々なWebサービスをハックする (Wataru Terada) - builderscon tokyo 2017

---

これはすごい！！
エディタvimとか使ってる人だと便利だろうな

wasavi
https://chrome.google.com/webstore/detail/wasavi/dgogifpkoilgiofhhhodbodcfgomelhe?hl=ja
>TEXTAREA 要素にフォーカスを移し、Ctrl+Enter を押すと TEXTAREA は vi エディタに変化します。
なんか音も鳴るｗ使いやすいかも

使い方とかFAQ　作者サイト
http://appsweets.net/wasavi/

---

Chrome拡張機能の作り方。誰でもかんたんに開発できる！
https://original-game.com/how-to-make-chrome-extensions/
Chrome拡張機能の作り方
https://blog.members.co.jp/article/37615

Chrome拡張機能でアイコンを変更してみる
https://yk5656.hatenadiary.org/entry/20140917/1411735701

---

YouTubeのおすすめやコメントを非表示にする方法。もう時間を無駄にしたくない！
https://original-game.com/how-to-use-remove-youtube-recommended-videos/
Chromeの拡張機能「Remove YouTube Recommended Videos」を使いましょう。

---

Chrome拡張機能のソースが丸見えな件。
https://qiita.com/samuraijap/items/56baecaeda730e8a6e5c

ブラウザ拡張機能のソースコードを確認する
https://www.bugbugnow.net/2021/06/sourcecode-for-extension.html
拡張機能を利用して確認する
Chrome extension source viewer - Chrome ウェブストア
Extension source viewer – 🦊 Firefox (ja) 向け拡張機能を入手
Rob--W/crxviewer - GitHub
　拡張機能のストアからページアクションで使用できます。拡張機能のソースコードをインストールすることなく確認できます。

Chrome extension source viewer - Chrome拡張のソースコードをその場で確認
https://softantenna.com/wp/review/chrome-extension-source-viewer/
Chrome拡張機能のソースコードを閲覧できる拡張機能 『Chrome extension source viewer』
https://pc.mogeringo.com/archives/59464

Chrome拡張のソースコードの中身をブラウザだけで確認する方法
https://scrapbox.io/nwtgck/Chrome%E6%8B%A1%E5%BC%B5%E3%81%AE%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E4%B8%AD%E8%BA%AB%E3%82%92%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A0%E3%81%91%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95
[** [CRX Viewer https://robwu.nl/crxviewer/]]を使うとできる。

---

Chrome 拡張機能を作ろう実践編
http://www2.kobe-u.ac.jp/~tnishida/programming/ChromeExtension-02.html
食べログの不要なパーツを非表示にする？

おすすめ
chrome拡張機能の作り方 入門編

もぐらストア

Chrome拡張の作り方(Manifest V3対応版)
Nory Soft
1/14
再生リスト
https://www.youtube.com/watch?v=jMtAV3tUBMM&list=PLwlNvVIUtWpsZMsmJ0vRAuNEfVN8gcHPx

自動音声、間が多め

【作業効率UP！】Web制作にマストのGoogle Chrome拡張機能10選！現役Webディレクターも愛用【HTML・CSS コーディング】


Chrome拡張を開発する大学生にプログラミング勉強法や将来について聞いてみた

自分用ツール（動画タグ埋め込み君）
・記事内でscripttタグと関数名で、埋め込みタグ生成できるようにする。
・↑フォームから生成するやつから、３つの関数に切り分けたらできそう。
・まぁ、そもそも左メニューとかに持たせたjsの関数を、右のメイン記事で使えるかを
　まずチェック
・ただ、この場合、記事内には urlからその都度、動画埋め込みタグを生成させることになる。
　→スマホだと、表示が変わってくる？　まぁそれも逆にいいのか？　ダメか？
・引数やフォームの指定で、動画サイズを大小変えれるようにしてみる。

---

・本来の自分ツール、jsでもいいので試作してみる。
　最終的にjsで中断したり、別のものに移行するとしても無駄にはならない。

・拡張機能のスクレイピング試してみる。それでここから、自分のやりたいことに発展させれそうか。
Chrome拡張とJavascriptでお手軽RPAスクレイピング
https://rooter.jp/web-crawling/chrome-extension/
【chrome extensions】Google Chrome拡張機能の作り方�A - デバッグの方法(console.log)
https://www.tweeeety.blog/entry/2015/03/04/231354

・vue.js とほほのwwwとかでかじってみる。

・progateで、react, node.js、あと余裕あればruby on rails いじってみる？

Firebase Hostingを使ってポートフォリオサイトを無料で公開する方法
https://webdesign-trends.net/entry/9692

JavaScript テスト用ブログを用意して動作確認をする
https://fanblogs.jp/pontaoyaji/archive/1066/0

Vue.js：Webで簡単に公開する方法
https://fanblogs.jp/to70/archive/562/0



とほほのwww入門

定数みたいにしたら
・同じ数値を１０回とか書いたり、
・コピペするときに、１０か所置換したり
しないで済むのか？

●todo　調べたり、試すこと
別途ファイルで試すこと！元のコードで試すと多少複雑になってるので、
できる確証もないのに試したら、ぐちゃぐちゃになってくるから。

・（その数値のあるところを）idで、innerHTMLであとから流し込めるのか？

・idに数値が含まれてるが、最初は別のidを指定しておいて、、、
あ、この時点で無理か、１つのページに２つの記事があって、
その２つに同じＩＤがある時点で、ＩＤかぶりしてることになるのか。
やはりjsで、これを簡略化するのは無理か。

・案としたら、innerHTML, eval?, 定数・変数とかの活用とかかな

・あと逆に、自動的に変わるものとして記事URLの文字列を使っても
結局、そのもともとのコードに、idを設定しておくけど
そのidが、２つの記事でかぶってて、それがトップページや
同じカテゴリーやタグの記事として、同一ページにあると
ＩＤかぶりしてることになるもんな

・とりあえず、これは普通にできたけど、記事２つで
　hereがかぶってる時点でもうアウトなんだよな
＜html＞
＜body＞
＜pre＞
＜span id="here"＞ひあ＜/span＞
＜/pre＞
＜/body＞
＜script＞
document.getElementById("here").innerHTML = '＜span id="there"＞ぜあ＜/span＞';
＜/script＞
＜/html＞

・いや、idを１つだけ指定して、記事内で、特定のHTMLコード全体を
innerHTMLで流し込むというふうにすれば、できるか？
・idを１つだけ、特定の数値や文字列にするなら、同じコードを複数の記事で使うときにも面倒じゃないし
・ただ、その仕組みじたいが、なんかややこしいというか、大層というか、回りくどい気もするけど
・そもそも、それを試してみるってこと自体が半ば面白い感じで、同じコードを複数の記事でコピペするということ自体は、、、
いや、それはそれで便利か。
今回の動画埋め込みタグを生成する、みたいなものは予備と合わせて、２つ３つあればいいくらいだけど。
ものによっては、お決まりのあの仕組みって感じで、同じコードを
一か所の数値文字列だけ変えれば、ＩＤとかの名前が、衝突なく安心して動くというのは。

・ちなみに試してみたら、これは「6」になった

＜html＞
＜body＞
＜pre＞
＜span id="here"＞ひあ＜/span＞
＜/pre＞
＜/body＞
＜script＞
document.getElementById("here").innerHTML = '＜span id="there"＞1＜/span＞';
document.getElementById("there").innerHTML = '＜span id="poa"＞2＜/span＞';
document.getElementById("poa").innerHTML = '＜span id="koa"＞3＜/span＞';
document.getElementById("koa").innerHTML = '＜span id="soa"＞4＜/span＞';
document.getElementById("soa").innerHTML = '＜span id="moa"＞5＜/span＞';
document.getElementById("moa").innerHTML = '＜span id="koa"＞6＜/span＞';
＜/script＞
＜/html＞