YouTubeの字幕を自動で翻訳して読み上げてくれる拡張機能「CaptionSpeaker」を使ってみた
日本語以外の言語のYouTube動画を再生する時、字幕を表示したり自動字幕翻訳機能を使用したりすることができますが、これだと字幕を読み続ける必要があります。しかし、拡張機能の「CaptionSpeaker」を使えば字幕を自動で翻訳して読み上げてくれるということで、実際にどんな感じになるのか使ってみました。 CaptionSpeaker - Chrome ウェブストア https://chrome.google.com/webstore/detail/captionspeaker/infafaffjndfcflcoemolnggghgoodce GitHub - limura/CaptionSpeaker: CaptionSpeaker は youtube で表示される字幕を発話させる事で耳から聞くことができるようにする chrome extension です。 https://github
【Vue】Youtubeの埋め込み動画を表示する - Qiita
サイトにYoutubeの埋め込み動画を乗っける方法です。 Vue.js上でやっていくので、コンポーネント化して汎用的に使えるような実装を目標にします。 Youtubeの埋め込み情報を取得する 動画上で右クリック → "埋め込みコードをコピー" で取得できます。 下のようなコードが取得できます。これを任意の場所に張り付けるだけです。簡単でしょ？ <iframe width="1280" height="720" src="https://www.youtube.com/embed/jAH3MEsh3aU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" all
超有名サイトのPHP製無料クローンスクリプト38選
世には幾多の人気webサービスがございますが、いざユーザーとして使ってみると、「ココがこーだったらもっと面白いのになー。。。」とか妄想してしまうのがweb屋のサガってもんです。 とはいえイチから類似サービスを構築するのは気が引けるし、構築ボリュームも遊びで手を出せるような規模じゃなかったり。 既存の人気webサービスを基盤に、自分のアイディアを組み込みたい！でも車輪の再開発は気が進まない！そんな時こそ「クローンスクリプト」の出番です。 今回はそんなクローンスクリプトの中でも、個人的趣向から「PHP製」にこだわって探し出しました。その数なんと16サイト38種！ 機能の実装やアルゴリズムの勉強から、オリジナルwebサービスのベースにまで、このクローンスクリプト集をご活用いただければ幸いです♪ ご紹介するクローンスクリプト使用時の注意 本エントリーにてご紹介させていただくクローンスクリプトに関し
[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3
![[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/b29e845c6df328575d3756fb3316de2a165a7046/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061401.png)
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
『Listband』ではじめる新しい音楽の遊び方 - SHELLBYS
2015-02-02 『Listband』ではじめる新しい音楽の遊び方 音楽 スポンサーリンク 前から注目してました田沢さん（@tazawa_naoto）が作った新しいウェブサービス。 『Listband』 Listband（リストバンド）はYouTubeの動画でアルバムが作成できるWEBサイトです。 アルバム１枚あたりの収録可能時間は実際のCDと同様に74分42秒。 すべての機能を無料でご利用いただけます。 日本ではかな～り先進的な試みです。 海外ではSpotifyなどのストリーミングサービスとFecebookなどを通じて「プレイリストを共有」する遊びが流行っているんです。 昔、やりませんでした？ テープで、MDで、CD-Rで「俺的ベスト」を作って友人にあげたりとか。 その現代版が『Listband』なわけですね！ 既に多くの方が利用しているみたいです。↓ 企業家で有名な家入一真さんもい
[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ：下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
![[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b3413c8d26665727debe1c206713a14699cabe5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020310-01.png)
YouTube、デフォルトの動画プレイヤーをFlashからHTML5に切り替え
Google Chrome、Internet Explorer 11、Safari 8、Firefoxのベータ版ではHTML5ベースの動画プレイヤーで動画が再生されるようになっているとのこと。 HTML5が「Adaptive Bitrate（ABR）」をサポート YouTubeはHTML5の動画プレイヤーは2010年1月頃にテスト公開しているが、デフォルトの標準プレイヤーとして採用するためにはまだ機能不足であると判断し、Flashをメインプレイヤーとして利用してきた。 発表内容によると、HTML5が技術的にFlash版プレイヤーを置き換えても差し支えないと判断した模様。特にユーザーのネット環境に最適な動画品質を調整することができる「Adaptive Bitrate（ABR）」をサポートしたことは非常に大きいと書かれている。 他にも「VP9」と呼ばれるコーデックをサポートしたことにより、ファ
スマホやPCのブラウザ間でYouTubeのプレイリストを共有できる「Playlistful」
パーティーには音楽が欠かせないものですが、欠席している人や遠く離れた人でも流しているBGMを共有できれば同じ雰囲気を味わうことも可能です。でも「音楽は共有したいけど勝手にスキップされたりしてケンカしたくない！」という時に便利なのが、招待された人はプレイリストを勝手に変更できずにスマートフォン・タブレット・PCのブラウザ間でYouTubeのプレイリストを共有できる「Playlistful」です。 Playlistful http://playlistful.com/ 「Start a party」をクリック。 表示されているURLを開きます。 シェアする人に表示する名前を入力したら「Join」をクリック。 プレイリストは空なので「Search」をクリックして入力欄からアーティスト名や曲名を入力します。 検索結果が表示されるので、お目当ての曲が見つかったら「ADD」をクリックしてプレイリストに
やりたいことが見つからないなら興味のある事をまずはやってみよう
Facebookの初期デザインもひどかった学生ノリで開発したFacebookも最初はひどかったです。 参照：File:Original-facebook.jpg Facebookが2004年にローンチしたとき、たった８つの機能しか実装していなかったにもあった通り、最初はProfile画面がTOPに来ていたんですね。 ですが、今はこんなに洗練されています。最初なんて未完成でいいんですよね。あとから、いくらでも改善できますから。 Yahoo!の初期デザインYahoo!も昔はこんな感じだったんですね。 今はすっかりおなじみのこちらのデザインになっています。 tumblr.の初期デザインミニブログサービス「tumblr.」もこんな感じでした。 参照：4903v1.png (495×520) 今ではこんなにかっこよくなってます。 Googleの初期デザインGoogleも！こりゃすごい。 参照：Bla
東京大学 暦本純一 先生 WISS Tokyo WISS20周年記念インタビュー
WISS Tokyo 〜日本語予測入力やマルチタッチはここから生まれた、2012年にはイグノーベル賞まで〜 WISS20周年記念イベント http://www.wiss.org/wisstokyo/
Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」:phpspot開発日誌
PrettyEmbed.js Demo - CodePen Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」。 通常埋め込むと動画コントローラーやラベルが表示されて便利なんですが、どうしてもYoutube埋め込んだ感が凄くなりますね。 そこで、PrettyEmbedを使えば次のように。せっかくデザインしたサイトもYoutube埋め込みでかっこわるくならないようにできますね 関連エントリ Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 流行りのYoutube風ローディングバー実装jQueryプラグイン YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
TechCrunch | Startup and Technology News
Less than one year after its iOS launch, French startup ten ten has gone viral with a walkie talkie app that allows teens to send voice messages to their close… While all of Wesley Chan’s success has been well-documented over the years, his personal journey…not so much. Chan spoke to TechCrunch about the ways his life impacts how he invests in startups.
Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」:phpspot開発日誌
dachcom-digital/jquery-video GitHub Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 Youtube,Vimeo等ではサイト上に動画を貼り付けられますが、再生、停止等のAPIもそれぞれあります。このAPIを共通で使うjqueryプラグインです。 動画を扱うようなサイトで、動画ウィジェットを制御したい場合に便利そうです 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクラム開発のために絶対理解しておくべきこと
NFTとは | なぜNFTに何百万ドルも支払うのでしょうか？NFTはアートだけではない！
前編：【登大遊】経営者向けセミナー『なぜ日本からGAFAが生まれないのか』
なるせ先生のPHP学～PHP8新機能スペシャル～
「閲覧数ゼロのYouTube動画」と「宇宙」の織りなすファンタジー
YouTubeはジャーナリズムになりうるか：「YouTube Newswire」