以前にYouTube Player APIの基本的な使い方をまとめたので、今回は実際に使う時に便利そうなtipsをいくつかまとめてみました。 以前の記事はこちらです。 YouTube Player APIを使って色々やってみる ■目次 動画のループ再生 動画の自動再生 タイトルやコントロールバーを出さないようにする 動画再生の開始位置や終了位置を設定する 動画の画質を変更する 初期表示をサムネイルにする 背景動画にする 1. 動画のループ再生 動画のループ再生を設定する方法は2種類あります。 1-1. パラメータで設定する パラメータで設定する場合、loopとplaylistを使用します。 ■HTML <div id="sample"></div> ■JavaScript // IFrame Player API の読み込み var tag = document.createElement

Youtubeをメインビジュアルとして埋め込むコーディングのお仕事があったのですが、 なぜかいただいたYoutubeの最初の1秒間が真っ暗だったため、どうにか1秒目から動画をスタートさせたくて、調べて見つかったのでメモメモ。 φ(･･。 あれこれ検索したけど、最初からリファレンス読めばよかった... ※取り扱い説明書はちゃんと使う前に読みましょう。電化製品も。APIも。 参考リファレンス1: iframe 組み込みの YouTube Player API リファレンス 参考リファレンス2: YouTube 埋め込みプレーヤーとプレーヤーのパラメータ APIでのYoutubeの実装は、上記リファレンスページにサンプルコードがあるのでそれで行けました。 ※下記のサンプルコードはリファレンスから参照してちょっと削ったり編集したりしたものです。 途中から再生させたいときは、playerVarsとい

Introduction The Carousel component is a component for browsing sets of thematically similar content. It must be implemented so that it can be operated by mouse, keyboard, and touch. Importantly, unlike some Carousel implementations, the content does not scroll automatically[1]: the user is entirely in control of which Carousel items they can see and interact with at any one time. Recommended mark

公開日 : 2013年9月4日 (2014年1月7日 更新) カテゴリー : ユーザビリティ ページの先頭に戻るリンク、というのを時々見かけます。ページ内の決まった位置にテキストリンクがあるパターンもあれば、クリック/タップ可能なボタンが浮遊する (スクロールに追従して常に画面上に表示される) パターンもあります。 この、ページの先頭に戻るリンクは、なぜあるのでしょうか？「ページの先頭には、グローバルナビゲーションや機能ナビゲーション (お問い合わせ、サイトマップ、サイト内検索機能、など)、サイトロゴ (ホームへのリンク)、といった重要な機能が並んでいて、そこに素早くアクセスできるようにしたほうが親切だから。」「ページの先頭に戻る際、スクロールバーまでマウスポインターを動かしてドラッグするのが、面倒だから。」...というのが、主な理由でしょう。 一見とても便利な機能なだけに外すのは難しい

構造化データのマークアップによるWebサイトのリッチリザルト表示が進んでいます。2019年5月にはGoogleが新しいリッチリザルトとして「FAQ」と「HowTo」を公表しました。 「FAQ」のマークアップは、BtoC向けWebサイトでは多く見られていましたが、最近ではBtoB向けWebサイトでも実装されています。 そこで本記事では、「FAQ」の構造化データのメリットや実装手順を事例とともに解説します。 構造化データでマークアップするとはどういうこと？構造化データとは、HTMLページの情報を検索エンジンが理解しやすいように、検索エンジンが理解できる言葉でタグづけしたもののこと。専門用語では、理解できる言葉のことを「記述方法」、タグづけのことを「マークアップ」といいます。 Googleは構造化データを提供してもらうことで、該当ページをより正確に理解できるようになります。Googleがサポート

FAQの構造化データとは？ FAQ形式の構造化データは、質問と回答がペアになったデータ構造です。FAQ形式で構造化データをページに埋め込んでおくと、Google検索結果にリッチリザルトとして表示されます。 構造化データを使用して「よくある質問」をマークアップする  |  Google 検索デベロッパー ガイド  |  Google Developers Google検索結果には、質問ごとにアコーディオン形式で表示されます。回答部分には、HTMLタグが記述できるので、見出し・リンク・強調表示が可能です。長い回答も記述できますが、300文字前後で省略される点には注意が必要です。 また、FAQの構造化データは、Googleアシスタントや音声検索の回答として利用されることがあるので、活用シーンは広そうです。 関連ツール：構造化データと画面デザインを1画面で確認する【アナトミー】 Q&Aの構造化デー

🐣 はじめに みなさん、勤怠打刻してますか？ 先日、このようなツイートをしたところ、思わぬ反響がありました。 そこで、この仕組みの全体像や工夫した点などをまとめることにしました。 SlackやGASを使ったOps自動化に興味がある人に読んでもらえたら嬉しいです。 きっかけ そもそもSlackにはfreeeが公式で提供している人事労務用のSlack appがあり、スラッシュコマンドを使って勤怠打刻できます。便利ですね。 ただ、このアプリ、コマンドを打つのがとにかくめんどくさかったりします。 あるとき、同僚が「もっと気軽に勤怠打刻できたらええのになぁ」と言っているのを耳にしました。 そこで、スタンプで勤怠打刻できる仕組みを作り、運用を始めました。 それから数ヶ月後、会社にフレックスタイム制が導入されました。 「ワークライフバランス！！さいこう！」となりつつも「今月はあと何時間働けば良いんだっ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

There is now a polyfill for Container Queries that behaves as perfectly as a polyfill should: You conditionally load it when you detect the browser doesn’t support Container Queries.You write CSS as you normally would, including current-spec-compliant Container Queries syntax code.It just works. It’s pretty great to have a container query polyfill that is this easy to use and from Chrome itself, t

一般にプログラマーはコードを書いている時間より読んでいる時間の方が長いと言われており、わかりやすい命名は可読性や保守性の観点から非常に重要です。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 前回の初級編では、わかりにくい命名をした場合の問題点や、JavaScriptで共通認識となっているルール、すぐに使える命名テクニックを紹介しました。 上級編の今回は初級編で紹介したものでは表現しきれない、より複雑な処理を行いたいときに役立つ表現を集めました。 命名テクニック上級編 1. 有効 / 無効 の状態の表現 オブジェクトやステータスが有効か無効かを表現する単語です。

【改訂版発売中！】【完全案件特化】JavaScriptをどこまで学ぶべきかの学習ロードマップ＋頻出パーツの作り方8選 - セカヤサBooks 【お知らせ】 内容を2024年に向けて更新、追加した改訂版を公開しました！ →https://zenn.dev/hideki_climax/books/0e124eb17a67b3 ・HTML/CSSの次は何を勉強すれば良いの？ ・案件が取れない ・未経験だけど転職を考えている ・フリーランスで実績を積みたい そんなあなたの悩み、全て解決します。 JavaScriptをどこまで深めれば案件が獲得できて、収入に繋がるのか。 フリーランスで7年間エンジニアをしてきた僕が思う 「Web制作領域においてJavaScriptで何ができれば良いか」 をまとめました。 そして圧倒的に頻出のUIパーツ8つの作り方を徹底解説しました。初心者でもすぐに実践できます。実際

flex-grow CSS プロパティは、flex アイテムの flex grow factor を指定します。これは、アイテムが flex コンテナ内のスペースをどれだけ占有するかを指定します。 MDN: flex-grow MDN の説明がシンプルすぎてよく分からなかったので、もう少し詳しく調べた内容をまとめておきます。 説明中に出てくるスクショの動作サンプルは下の記事にあります。 memowomome.hatenablog.com この記事は上の動作サンプル記事が長くなっため分離した補足記事みたいな感じです。 flexbox の基本 flexbox の基本的な動作は以下のページが個人的には分かりやすかったのでオススメです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 flexbox の仕様全般に関する説明が分かりやすい Flexboxを使うなら知ってお

2020.08.19 【Twitter：IE11サポート終了】IE11でTwitterへのリンクを表示させないようにする方法 こんにちは！コーダーの平原です。 TwitterがIE(インターネットエクスプローラー)でのサポートを終了したので、Twitter公式のシェアボタンや埋め込みタイムラインを設定しても、IE11でタイムライン表示はされず、Twitterへのリンクだけが表示されるという現象が起きています。 Chromeだとこのように表示されるタイムラインが、 小さく表示されている青いリンクは、クリックするとEdgeが立ち上がり、埋め込みタイムラインで指定していたTwitterページが表示されます。 IE11では、EdgeにリダイレクトされたというMicrosoft社のページが表示されます。 (TwitterはEdgeで見てねということか) このリンクがあることで、IE11を使用している

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーのデータソリューション事業に携わっている水野です。現在は、「DATA SOLUTION」というサービスと、その開発基盤となる「DS.Design System」の開発に関わっています。 近年、デザインシステムはプロダクト開発のホットワードとなり、多くの有名企業がオープンソースとしてデザインシステムを公開しています。例えば、Atrasian社のLightning、Adobe社のSpectrumは有名なデザインシステムで、アメリカでは200以上の政府サイトに導入されているUSWDSもあります。企業のみならず、政府単位でデザインシステムが導入され、驚くべき広がりを見せています。 DATA SOLUTIONでは、デザイン

「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の

CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。たとえばfloatだと親要素にdivを増やす必要があったのが、Grid Layoutを使えばそのようなムダなHTML要素を増やさなくて構わなくなります。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくり