todya-only.net
Bing Mapsの基礎〜応用 某GのmapのAPIを利用するのにクレカ登録が必須となったので、Bing Mapsでどのくらいまでいけるのか試してみた。 主な使用技術 Bing Maps API、JavaScript、CSS、レスポンシブ 詳しく見る Youtube APIを使用したサンプル YouTube Data API (v3)を使用し、JavaScriptにてユーザーチャンネルの動画を取得するプログラムを作成。 主な使用技術 YouTube Data API、JavaScript(jQuery)、CSS、レスポンシブ 詳しく見る ポケモンGO図鑑 Githubに公開されている「Pokemon-DB」を元にページを生成 主な使用技術 JavaScript(jQuery)、CSS、レスポンシブ、Photoshop（タイプのドット絵を作成） 詳しく見る
HTML5 Video Player -シークバー実装編 vol.1- « SMART LAB
スマートフォン,smart phone,Windows7,iPhone,Android,iPad前回は再生・一時停止など、ごくごく基本的な機能のみの実装だったので徐々に機能を追加していきたいと思います。 今回はシークバーをつけてみます。 手始めに、再生位置にあわせて伸びていくだけのバーを作ります。 サンプル ※PCから閲覧の場合、safari, chromeのみ動作します まず、メディアの長さを表すベース部分とプログレスバーの部分を div 要素で作ります。 <div id="seek-bar"><div id="progress-bar"></div></div> プログレスバーはベースの中に入れ子になってます。 次にCSSで見た目をそれっぽくします。 #seek-bar {width: 100%; margin: 5px 0; background: #ccc; -web
今さら聞けない！Pinterest（ピンタレスト）の利用方法と国内事例10選 | ソーシャルメディア集客ラボ
ソーシャルメディア集客ラボの伏田です。 先日、楽天が出資したことでより国内でも注目されているPinterest（ピンタレスト）をみなさんは利用されていますか？ まだ、日本では普及していないように感じられる方も多いかもしれませんが、日経デジタルマーケティングの記事によると、利用時間ではmixiやFacebookを抜いてソーシャルメディアで1位というデータもあります。また、アメリカでは会員数が1800万人を越えており、利用時間はFacebookに次いで2位という状況だそうです。 また、Pinterestは女性の利用者が多いという特徴もあり、女性に人気のブランドを中心に国内でもアカウントを開設している企業が増えてきています。 今回は、今さら聞けない！という方のためにPinterestの利用方法と国内の事例についてまとめてみました。 ピンタレストの国内事例10選 国内の有名企業でもアカウント開設が
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
HTML5 videoのcodecsの書き方
<source src='videofile.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> いわゆるHTML5 videoのsource要素のtype属性には、上記のように動画のコーデックを書くらしい。 avc1.42E01E, mp4a.40.2 とか "avc1.58A01E, mp4a.40.2" とか色々あるらしいのだが、全く意味が分からない！動画によって変わるらしいけど、自分の動画に適した文字列はどれなんだよ！ というわけで調べました。 なぜかなかなか情報が見つからなくて大変だった。 結論から言うと、H.264形式の場合、動画のプロファイルとレベルによって何を書くべきかが変わります。 まず、前半のavc1.42E01Eの部分が動画のコーデックを表しています。「avc1」がAVC、つまりH.264という意味になるそう
知らんがな » HLS
Last modified on 2012-04-01 Created on 2011-07-16 HTTP Live Streaming 1.概要 HTTP Live Streaming (HLS) を使って iOS (iPhone, iPad) にビデオストリーミングを行う WEB アプリケーションについて書いています。 主な特徴は、 マイク付き USBカメラ (WEBカメラ) の映像と音声をリアルタイムにストリーミング サーバー内の任意のビデオファイルをストリーミング PT2 で生成中のものを追いかけ再生/追っかけストリーミング エンコーダは FFmpeg を使用 リアルタイムエンコードのため、事前エンコードが不必要 コンテナは MPEG2-TS ビデオは H.264、オーディオは AAC-LC または MP3 任意の Duration で MPEG2-TS の分割 分割した MP
HTML5のscript要素でasync, deferを使ってパフォーマンスアップ - IT-Walker on hatena
http://code.google.com/speed/articles/html5-performance.html JavaScriptの高速化手法を紹介する、Googleのプロジェクト「speed」がリニューアルしたと言うので見てたら、「HTML5でパフォーマンスアップ」てなタイトルがあったので「なぬ？」と思って読んでみました。 HTML5使ってもそんな効力得られないだろう・・・と思って読んでみたら、「HTML5の記法を使えばnバイト節約」みたいなチョコザイな手法が主だったのでちょっと苦笑(^^; とはいえ、script要素に今度から加わるasync属性について等は、日本語で説明されている記事がほとんどないので、全体的に要約しておきます（あくまで翻訳ではなくて要約。時間がないので超適当です。正確なところは原文を読んでください）。 DTD HTML4までは以下のように書かなきゃいけな
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Read files in JavaScript Stay organized with collections Save and categorize content based on your preferences. Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate the
head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="
レスポンシブWebデザイン制作に便利なGoogle Chrome拡張「Resizer」
レスポンシブWebデザイン制作に便利なGoogle Chrome拡張「Resizer」を紹介します。 先日、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を投稿したところ、Chromeでも同じような機能がほしい！みたいな書き込みがあったので、探してみたら似たような拡張機能がありました。 それがこの「Resizer」です。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」については、「レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」」を参照ください。 ２．インストール 「Resizer」のページ右上にある「CHROMEに追加」をクリック。 表示されたダイアログの「追加」をクリック。 これでインストールされました。 ３．「Resizer」の使い方 レスポンシブWebデザインのサンプルサイトとして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
春の試乗会（その２）・２５０ＴＲ - ミスターＤのバイクのある生活
【250ccクラス】お奨めのバイクを教えて【まとめ】