2014年3月7日に作成されたページです。 情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。 全件リストはこちら。 どもです。 職場の乾燥具合に驚いた餅。です。 まぁ一日中パソコン起動させてるような職場ですし、湿度高くても問題そうですが… さて、今回はYouTube Player APIについて。 先日、サイトにyoutube動画を貼り付けるという依頼がありました。 その際の条件は「関連動画は表示しない」というものだけだったので、 <iframe width="xxx" height="yyy" src="//www.youtube.com/embed/動画ID?rel=0&showinfo=0&autohide=1" frameborder="0" allowfullscreen></iframe> という方法で導入しました。 が、 今回、「音量は初期ミュ

追記: 現在使用できません。 ※Flash-embeddedがサポート外になったため、この方法は現在使用できません。 再生ボタンを非表示にするオプションはない YouTubeの再生ボタンを非表示にするオプションはないが再生中は再生ボタンが非表示になるためどうしてもボタンを非表示にしたい場合はまずautoplay=1で動画を自動再生させ、その後JavaScriptで一時停止させる必要がある。 再生を一時停止させるJavaScript onYouTubePlayerReady()でプレーヤーの読み込みが完了を受け取れるのでこの関数内でpauseVideo()を実行することで自動再生した動画を直後に一時停止させることができる。 var params = { allowScriptAccess: "always" }; var atts = { id: "myPlayer" }; swfobjec

YouTube iFrame Player API 再生の制御〔再生・一時停止・停止・シーク位置〕 音量の制御〔ミュートの設定・解除、ミュート状態取得、音量の設定・取得〕 再生ステータスの取得〔経過時間、プレーヤーの状態、読み込みバイト数など〕 再生画質の制御〔画質の取得・変更、有効な画質セットの取得〕 動画情報の取得〔現在の動画の長さ、URL、埋め込みコードを取得〕 イベント プレーヤーのサイズを設定 複数の動画を切り替えて再生 プレーヤーの複数配置 字幕付き動画一覧表示＋字幕のフォントサイズ変更〔player.setOption()、onPlayerApiChange〕 iframe要素への取得と変更 YouTube iFrame Player API 2012/11/18 YouTube JavaScript Player API リファレンス ※2012.11.18　見れなくなって

3. 次は、トラッキング トラッキングは本来「計測する」の意味を持つ言葉です。それを、Googleアナリティクス的に言えば「計測し、その結果を記録する」という意味になります。 4. つまり、イベントトラッキングとは？ イベント＝サイト訪問者の行動 トラッキング＝計測し、データを記録すること イベント＋トラッキング＝サイト訪問者の行動を計測し、記録する となるわけです。 イベントトラッキングを利用して計測した訪問者の行動を、あとでGoogleアナリティクスのレポート画面で振り返ることができます。そこにはサイトの改善につながるヒントがたくさん！ その具体例をひとつ紹介しましょう。 5. イベントトラッキングの利用例 たとえば、お問い合わせのページへつながるリンク。「テキストリンク」か「ボタン」のどちらにするかは大きな運命の分かれ道。なぜなら訪問者の反応が大きく変わってくるからです。 では、どっ

ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..

TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard

2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG

TL;DR クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。 企画／提案 １．企画書 企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。 [保存版] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum ２．提案書 提案

清水淳子さんは、会議や講義をグラフィックで記録し発信するメディア『Tokyo Graphic Recorder』として活動しつつ、ヤフー社のUXデザイナーも務める。突出したクリエイターとなった彼女はかつて、いちデザイナーとして危機感に苛まれていた。その時取った行動とは？ 日常業務の疑問を追求することで、違うステージが現れた。 会議の議事録、パーティでのパフォーマンス、雑誌のコンテンツ、ジャーナリズム、ファシリテーション…。様々な意味合いで活動をする『Tokyo Graphic Recorder』の清水淳子さん。雑誌「Web Designing」や「ブレーン」などでも取り上げられ、ご存知の方も多いかと思う。 「言われたことをやっているだけで本当にいいのだろうか」という疑問を持つ、いちデザイナーだった彼女が『Tokyo Graphic Recorder』 兼 ヤフー社 UXデザイナーという唯一

この先は「デイリーポータルZをはげます会」会員向けの有料コンテンツです。会員になるとごらんいただけます。

HTMLはシンプルにCSSの「border」や「box-shadow」、擬似要素の「:before」や「:after」を使って実装する立体的な見出しデザインをご紹介します。 以下2つの記事にインスパイアされ、見出しデザインをいくつか作成しました。両記事を参考にしつつも、私なりの方法を説明していきたいと思います。 CSSの擬似要素を使った見出しデザイン｜Webpark[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリス まずはサンプルをご覧ください。 サンプルページ » 「border」で三角形や台形を作る最初に、今回の大きなポイントでもある「border」で三角形や台形を作る方法をご紹介します。「border」は要素の周囲四辺それぞれを囲むものですが、隣接する二辺の「border」が設定された時に、境界線の内側と外側の頂点を結ぶ対角線で要素が分けられ

こんにちは。堀井です。 webページでは、単純にPV数が多くてもサイトを読んでもらえていなければ意味がありません。そこで、ユーザーのスクロール量を数字で取得することでどの辺りまで読んで離脱する人が多いのか知れたら便利ですよね？ そこで今回は、 Googleタグマネージャ(GTM)のイベントリスナーを使用したページスクロール量を取得するための手順についてご紹介します。 いくつかのサイトを参考に作業しましたが、結構手こずった部分があったのでそれを含めまとめています。 新しい自動イベントトラッキング機能 Googleタグマネージャでは複数のタグの管理が可能ですが、イベントリスナーを使用して任意のルールと紐付けすることで、より細かい条件でイベントトラッキングが可能になります。HTMLに特別な記述をすることなく、自動でGTMからタグを発行できるようになるのです。 webページ上でのユーザーのスクロー

デザインの評価項目とデザインエレメント一覧表 -... / 【スマートフォン向け開発】ユーザビリティチェック... / Facebookページのタイムライン化で検討すべ...他...全10件

WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.