YouTube Player APIを使ってYouTubeの動画をWebページへ埋め込んで制御する | 株式会社大塚ビジネスサービス
2024年 3月14日 Posted 野々瀨(フロントエンドエンジニア) YouTubeは動画を気軽で簡単にWebページへ埋め込むことができます。そのうちの一つとしてiframeで埋め込むことができます。 YouTubeではこのiframeで埋め込んだ動画を、自由なタイミングで読み込んだり、再生や停止などの操作を行えたりするAPIを提供しています。今回はそんなYouTubeのiframeの動画を、APIを使って制御する方法をご紹介します。 IFrame Player APIとは YouTubeが提供しているIFrame Player APIというAPIがあります。このAPIは、YouTubeの動画をWebページへ埋め込むための方法の一つであるiframeを、任意のタイミングで読み込めるほか、再生や停止といった制御を自由に行うことができます。 また、この記事を書いている時点では、無料でかつG
イマドキな JavaScript で書かない・使わないもの: var, function, then, jQuery, その他 - Qiita
0. まとめ var を書かない let もなるべく書かない なるべく const を使う 関数の引数は const のように扱う function をなるべく書かない アロー関数またはクラスやオブジェクトのメソッド定義を使う 関数宣言でなく関数式を使用する 理論上どうしても function が必要な場合もある ジェネレータ関数 function* は使用出来る then() を書かない await を使う 理想的には jQuery を使わない 純粋な WEB API を使用して DOM を操作する getElementById(), getElementsByClassName() querySelector(), querySelectorAll() insertAdjacentHTML() 等 jQuery 非依存のライブラリを使用する fetch() で通信する XMLHttpR
【JavaScript】シンプルな入力フォームを簡易に作るためのJS - Qiita
本記事ではシンプルな入力フォームが作りたいなあというモチベーションのもと作成しています。 シンプルな入力フォームのモックを作り（HTML, CSS）、そのHTMLの作りをもとにJavaScriptで書き出していくといった流れで作成します。最終的にはHTMLフォーム上で項目名や2カラムで表示させる項目などを指定し、同画面のtextareaにForm HTMLを書き出すというものを作りたい。（現状はForm HTMLをtextやemailなどのinput要素のみを1カラムで表示するといったものまで作成。） 本記事を作成するにあたり、参考にしたのは次の文献です。 前者はFormのレイアウトに、後者はHTML周りなどの全般的な参考文献として活用しています。 以下のような流れで紹介していきます。 作成フォームのモック Form要素 JavaScriptの作成 まとめ 1. フォームのモック こちらの
クレカ情報の流出があったタリーズオンラインストアのWebアーカイブから原因を特定した猛者が現れる→集まった有識者たちにより巧妙な手口が明らかに
あらおじ @ojigunma すごい タリーズの原因発見してる人いる 確かにナンカある slick.min.js という画像をスライドするファイルの中に 難読化された悪意のあるコードが追記されてるっぽい 難読化は４段階ぐらいされてるらしい これブラウザとかセキュリティソフトで気づくのは無理なんだろか。。。 x.com/motikan2010/st… 2024-10-04 13:15:14 Niishi Kubo @n11sh1_ クレカ情報漏洩の件、技術的な原因特定はこの投稿が一番分かりやすかった。 slick.min.js（画像切り替えのライブラリ）を改ざんされてマルウェアが仕込まれて、クレカ情報はサーバーに送信される前にフロントエンドから外部に送信されていたらしい。Content-Security-Policy がレスポンスヘッダーにきちんと設定されていれば悪意あるドメインに対しての通
世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
【JavaScript】グラデーションで隠して「もっと見る」で開閉するコンテンツ
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでもっと見るのコンテンツをグラデーションで隠して表示する方法をご紹介しています。 では、解説していきます。 本記事で作成するもの もっと見るをクリックすると、グラデーションで隠れているコンテンツを開閉して表示します。下記に動作確認用のデモを用意しましたので、ボタンをクリックして開閉する動きを確かめてみてください。 See the Pen 7474 by ryohei (@intotheprogram) on CodePen. 本記事では、開閉するコンテンツをテーマにしているため、開いた後に閉じる動作を組み込んでいます。開くだけで良い場合は、もっと見るボタンをクリックした後にボタンの要素自体をremoveなどで削除するなどしてご利用ください。 HTMLでレイアウトを作成する HTMLでレイアウトから作成し
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
JavaScriptで全角⇔半角の変換をサンプルコード付き解説！
JavaScriptで全角⇔半角の変換をサンプルコード付き解説！フォームで入力された文字列が全角や半角がバラバラに入力されてしまうとデータの後処理が大変です。入力された文字列を全角に変換したり、半角に変換したりして統一することができたら便利です。この記事ではJavaScriptで全角⇔半角の変換方法を解説していきます。
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
WordPressでポップアップを表示(プラグイン無しで実装) | タルト株式会社
WordPressでプラグインを使わずにポップアップを表示させる方法を紹介 この記事では「WordPressのプラグインを使わずに画像バナーなどのポップアップ表示する方法」を解説します。 バナーだけでなく独自で書いたHTMLや好きなタイミングでポップアップを表示する方法まで紹介しますのでお楽しみに！ ポップアップのサンプルデモ 完成するポップアップはどんな動きになるのか？実際に見てみた方が早いので下記のボタンを押してポップアップのデモを見てみてください (※画像は引き延ばしてるのでちょっと粗いです) このような機能がプログラムの知識なしで、コピペで実装できます。 実装にはプラグインではなくショートコードを使いますので、使う場所はいつもの投稿ページなどの記事編集画面です。 プラグインを使わずにショートコードで実装する利点 WordPressに機能を追加するというとすぐにプラグインに頼りがちで
こわくない関数型プログラミング
関数型プログラミングは全部理解しようとすると難しいですが、簡単な部分の中にも有用な知見がたくさんあります。 関数型プログラミングにまだ親しんでいない人向けに、明日からのプログラミングにすぐ役に立つ考え方をできるだけわかりやすく伝えます。
Markerクリックでモーダルを実装する、マーカーはRailsから。 - Qiita
2016年3月末の情報です。更新されても知りません。また、Rails5のβ版が出ているようですが、Rails4でやってます。 Railsのデータベースから、GoogleMapにマーカーを落とす。 マーカークリックでモーダルウィンドウを開く。 モーダルの中に、情報を表示する。 カスタマイズが難しかったので、gmaps4railsは使わない。 準備 APIKEY GoogleDevelopersへ登録し、APIKEYを入手する。生成されたスクリプトとAPIKEYをHTML文に貼り付ける。開発環境でアセットを行っていなかったからかはわかりませんが、application.html.erbにスクリプトのURLを貼り付けた場合、更新でしか地図が表示されなくなりました。これ要注意! Bootstrap vendor/assets配下にそれぞれ格納する。読み込みはapp/assets配下のそれぞれのap
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - knadh/autocomp.js: A super tiny Javascript autocomplete / autosuggestions library. Zero dependencies, ~800 bytes min+gzip.
JavaScriptでconsole.logを使用してませんか？
console.log(); しか使えなかった自分へ。。。 - Qiita
Webフロントエンド基礎研修 ~歴史から学ぶ、現場のスタンダードな開発~