HTML5ページ・広告を作成できる無料ツール「Google Web Designer」をためしてみた
昨日、GoogleがHTML5ページや広告を作成できる無料デザインツール「Google Web Designer」のベータ版をリリースいたしました。 HTML作成ツールと言えばMacでは「Hype」を以前ご紹介したわけなんですが、このGoogle Web Designerはどんな使い勝手なのか…？気になりましたので軽ーく試してみました:) 公式サイト：Google Web Designer Google Web Designerの概要 Google Web Designerの公式サイトがこちら。 スマートフォンやタブレットなど、様々なデバイスに対応する広告・バナー・コンテンツを作成できます。 大きな特徴としてデザインビューとコードビューを切り替えて作業することができます。 では、早速ダウンロードしてみませう。 使ってみた 解凍したDLファイルより、アプリを起動！ Adobe CCのようなイ
HTML5のvideoタグにさらなる魅力を。指定時間からの再生と字幕機能を追加·Cuepoint.js MOONGIFT
Cuepoint.jsはHTML5のvideoタグにキューポイントと字幕機能を追加するJavaScriptライブラリ。 Cuepoint.jsはHTML5/JavaScript製のフリーウェア（ソースコードは公開されている）。HTML5から新たに加わったvideoタグ。動画をHTML標準の技術だけで閲覧できるようになるのは魅力だが、単純にそれだけでは既存の技術には敵わないだろう。 上にあるのが字幕 ユーザにとってみれば機能が足りなければ敢えてvideoタグを使う理由にならないはずだ。だがHTML5の魅力は独自の拡張性にある。videoタグについてもCuepoint.jsを使えばさらに魅力を増すはずだ。 Cuepoint.jsはvideoタグに対してキューポイントと字幕機能を追加するソフトウェアだ。字幕は動画の上に重なって表示されるようになっている（配置は変更できるだろう）。また、指定時間後
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
CSS3/jQueryでオリジナルのHTML5 videoプレーヤを作成してみよう
コントローラUIの設計 <video>要素を使用した場合、表示されるコントローラはWebブラウザによって異なる。 Webブラウザ別のネイティブなビデオコントローラ - Figure 1: Native browser video controls across different browsersより引用 再生、一時停止、シークなどあらゆる機能/ボタンはMedia elements APIをとおして、JavaScriptでアクセス/操作することが可能だ。これらのコントローラUIは、HTML/CSS/SVGなどで自由に組みたてられる。 コントローラのマークアップ まず最初にこれらコントローラをマークアップする必要がある。さきほどのWebブラウザ別ネイティブビデオコントローラを見て分かるとおり、プレーヤには次の機能が求められる。 再生/一時停止ボタン シークバー タイマー ボリューム調節ボタン
HTML5で動く10の動画プレイヤー - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
SEOにもHTML5が重要などといわれる時代になってきましたが、HTML5といえばプラグインなしでデバイスとらわれず動画やアニメーションが再生できるのが大きな魅力ですよね。HTML5の動画プレイヤーは既に多数リリースされていますが、今回はその中から実際に使えるものを10厳選して紹介した記事をspyrestudiosから。 — SEO Japan 動画プレイヤーにはあまりに多くの選択肢があるため、どのアプリケーションが自分に最も相応しいのか選択するのは難しい。私なら、物事を複雑化しないことと、動画プレイヤーの更新、新機能、バグ修正という将来の頭痛の種を避けることをお勧めする。その全てに対処し、あなたの仕事を簡単にするオンラインベースの動画プレイヤーにこだわるのだ。物事を行うことや物事を複雑化しないことのより簡単な方法に関心があるなら、www.wix.comもチェックするといいかもしれない。
HTML5を楽しもう
作成2012年9月26日 改訂2012年10月9日 改訂2012年10月14日 改訂2012年10月22日 HTML5で映像コンテンツを楽しむ １．HTML4とHTML5との違い これまでのHTML4でも映像を楽しむことができる。HTML4では、OBJECT要素に、MediaPlayer、QuickTime、RealPlayerなどのプレイヤーを埋め込んで、映像コンテンツを閲覧することができた。HTML4での問題点は、使っているPCに該当するプレイヤーがないとき、プレイヤーをダウンロードし組み込むことが必要であった。その結果、プレイヤーのメーカーは、ブラウザーと同じように、そのPCで使う標準のプレイヤーとすべき、争いがあったように思う（利用者はあまり気にせず、使いたいものを使っていた）。 HTML5では、オーディオ（video／audio）要素（再生するためのプレイヤーも）が標準で搭載して
Multimedia Gallery for Images, Video and Audio | Codrops
This multimedia gallery for images, video and audio is a progression of our previous galleries. The idea for this new gallery is to integrate video and audio as exhibit pieces […] This multimedia gallery for images, video and audio is a progression of our previous galleries. The idea for this new gallery is to integrate video and audio as exhibit pieces along images. We use an XML file for definin
動画・音楽再生 jQuery プラグイン「jPlayer」を使う - メモ用紙
jPlayer は動画や音楽を再生する jQuery プラグインです。HTML Audio に対応していること、HTML + CSS + JavaScript で UI を細かく作り込めることが特徴です。 現時点での最新バージョンは2.0.0。jQuery 1.3.2 以降で使えます。 jPlayer : HTML5 Audio & Video for jQuery 動作サンプル 音を鳴らす まず jPlayer をダウンロードし、jquery.jplayer.min.js および Jplayer.swf を適当なディレクトリに配置します。 HTML 側は空の div を用意します。（中に何か書いても置き換えられる） <div id="player"></div> JavaScript は次のように書きます。swfPath には Jplayer.swf のあるディレクトリを指定、setMe
プラグインは要らない！音声／動画対応したHTML5 - ／要素
HTML5では、新たに あとから述べるように、ブラウザによって対応する音声／ビデオ形式にバラツキがあるなどの問題もありますが、メディア要素を利用することでメディアファイルの扱いがぐんとカンタンになるでしょう。 TIPS 041：音声ファイルを再生する TIPS 042：動画ファイルを再生する TIPS 043：音声／動画ファイルの再生を複数ブラウザ対応する TIPS 044：音声ファイルをスクリプトから再生する TIPS 045：動画ファイルをスクリプトから再生する TIPS 046：ボリュームや再生速度を変更する TIPS 047：動画を全画面表示する TIPS 048：音声／動画ファイルの情報／状態を取得する TIPS 049：音声／動画ファイルの取得状況に応じて処理を実行する TIPS 050：音声／動画ファイルの状態に応じて処理を実行する TIPS 051：音声／動画ファイル再生時
MP4の動画ファイルのチャプター情報の確認方法と追加方法: よーまのメモ帳
MP4の場合、「MP4BOX」というフリーソフトを使用する方法がある。 使い方は簡単？ ① MP4BOXを解凍（中にMP4Box.exeがあるはず） ② ファイル名を指定して実行に「cmd」を入力し、コマンド プロンプトを開く ③ C:￥●●●￥▲▲＞ （Cや●や▲は初期は自分のアカウントフォルダに設定されている) （変更は可能だが、今回は変更しないものとする） ④ ③のフォルダ内に①で解凍した「MP4Box.exe」を移動 これで準備完了〓 A. チャプター情報の確認方法 C:￥●●●￥▲▲＞mp4box -info ■■.mp4 ■■.mp4はチャプターを確認したい動画ファイル 途中までは文字を打ち込む必要がある（コピペ不可）が動画はD&DでOK 最後にENTERを押すと、チャプター等の動画の情報が表示される 当然ながら、チャプターを設定していないと表示されない〓 B: チャプター情報
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
