html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
UnitePlayer.js 作ったよ - latest log
UnitePlayer はモバイルとゲームに特化した HTML5 な音楽再生プレイヤー UnitePlayer は、モバイルブラウザ上で動作するゲームに音をもたらします。 扱いが難しい Mobile Safari や Android ブラウザの音周りをフォーマット化し、とっても扱いやすくします。 フィーチャーフォン用のソーシャルゲームが大流行な昨今ですが、 フィーチャーフォン用のゲームって音が無いですよね? そのゲームをそのままスマートフォン向けにコンバートしても、音がならずに寂しい感じですよね? 2012年は UnitePlayer で BGM も SE も鳴らしちゃいましょう。 そして没入感や色々なものを高めちゃいましょう! PCブラウザでもそのまま動くから、横展開もお手軽に! UnitePlayer なら iPhone でも BGM と SE を擬似的に同時再生できますよ。 Unit
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
[iPhone|iPad]iOSにおけるhtml5::manifestの削除について Vol.1 - Web 業界の技術屋 | VIVID Labs.
Web 業界の技術屋 | VIVID Labs. html5、CSS3、javascript、PHPなどwebに関する疑問を解消したり検証したりしています。 暑くなったり肌寒くなったりで体調を崩しそうな大阪ですが、皆様の周りは如何な具合でしょう？ さて、今回は結構重要な話しです。 今後隆盛を迎えるであろう WebApp はもちろんの事、これから先は PC ブラウザで閲覧する html5 コンテンツも快適性を追求して当たり前のように使われる事になると思われる manifest の仕様についてのレポートを作りました。 実は私は色々開発はしているものの、オフラインで動かすための manifest 指定と言うモノに少々気持ち悪さを覚えています。 理由は単純に「良く解らない」からです、これが凄く気持ち悪い。 manifest とは、非常に強力で有用な技術です。簡単に言えば超強力なキャッシュ機能と言う
HTML5とは何かを簡単にまとめてみた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。 最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。 なので、今回はちまたで大人気のHTML5について書きます。 若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。 HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。 なぜこれからHTML5なのか HTML4との違いがわからない HTML5を使う利点がわからない など疑問に思っている方はぜひ見ていた
Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum
個人利用を中心に急伸を続けるスマートフォン市場は、もはやニッチ市場ではなくなりつつある。過去に企業サイトの携帯電話（フィーチャーフォン）対応が問われたように、今後スマートフォン向けのサイト対応が課題になると考えられる。2010年はスマートフォン元年といわれていたが、2011年は企業のスマートフォンサイトへの投資検討が本格化してくるだろう。 2010年、スマートフォンの市場規模は急成長し、『スマートフォン利用動向調査報告書2011』（MCPC監修、インプレスR&D発行）によると、2011年3月末（2010年度）の契約数は、前年の497万契約から63％増の810万契約となる見通しだ。調査によると、契約数は年平均40％以上で拡大を続け、2015年度には4,712万契約に、コンテンツ配信事業も急成長することが予測されている。こうした調査からも、今からサイトをスマートフォンに対応しておくことが決して
ke-tai.org > Blog Archive > iOS4.2から実装されたというJavaScriptの加速度センサーAPIを試してみました
iOS4.2から実装されたというJavaScriptの加速度センサーAPIを試してみました Tweet 2010/12/16 木曜日 matsui Posted in iPhone | No Comments » 先日リリースされたiOS4.2から実装されたという、Safari上で動作するJavaScriptの加速度センサーAPIを試してみました。 使い方はごく簡単で、次のようにして加速度が取得できます。 event.accelerationIncludingGravity.x; iPhoneを傾けると赤い点がコロコロと移動するというサンプルプログラムを作ってみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" c
BE READY 5 for the new Web market
iPhone/iPad/Androidなどさまざまなデバイスが日常に浸透しはじめているがYahoo! Japanは日本でのマルチデバイス対応の先行事例を既に構築している。当セミナーではiPhone Safari向けに最適化されたYahoo! Japanポータルページの開発経緯、ティップスを設計面、実装面に分けてUIデモを含めて紹介する 木村 尚敬（きむら なおたか） Ｒ＆Ｄ統括本部 制作本部 ウェブデベロップメント部 制作５ リーダー 2004年ヤフー株式会社に入社。入社以来一貫して検索系サービスのUI制作に携わる。担当サービスのYahoo!カテゴリがアックゼロヨン・アワード2006入賞。Yahoo!検索のUI制作の経験を「css nite Web標準の日々」（2007）や「東京大学メディアコンテンツ特別講義」（2008-2010）にて講義。2008年、iPhone版Yahoo!検索のUI
マルチデバイス時代に向けてのYahoo! JAPANの取り組み
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Tech Blogスタッフです。 8月31日（火）、アドビ システムズ 株式会社主催のイベントBE READY for the new Web market に、弊社からスピーカーとして伊東、藤木、木村の3名が参加しました。 少し遅くなりましたが、当日の資料etc.をアップしておきます。 会場のようす 「マルチデバイス時代に向けてのYahoo! JAPANの取り組み」ついてお話しました 主催者の方によると、当日は200名定員のところ、191名(95％)の来場者、 Twitterもハッシュタグ #adobeready で500超のtweetと、盛況だったとのことです。 資料はこちらに公開しましたので、ご覧くださいませ。
HTML5で作られたドローツール「deviantART Muro」が高機能で使える*二十歳街道まっしぐら（FC2ブログ時代）
「deviantART Muro」はHTML5で作られたドローツールです。 かなり色んな描き方が可能で、フィルタやレイヤーも備わっています。 ブラシ機能はアカウント取得後、購入が可能です。 動作もスムーズでかなり使えるんじゃないでしょうか。 以下に使ってみた様子を載せておきます。 まず「deviantART Muro」にアクセスしましょう。 アクセスすると、真っ白なキャンバスがありますので、自由にお絵かきできます。 線の種類は最下部のメニューより選べます。 最上部には、フィルターがあったり。 PROモードにすると、右側にレイヤーが表示されます。 ブラシ機能は購入して利用できるようですね。 描いた絵は画像として保存することができます。 deviantARTこんなの作ってたんですねー。 FlashじゃなくHTML5で作られた画像ツールはいろんなところで登場していますね。 （本記事で紹介したサイ
html5 ざっくりメモ
html5 関係無いのも有るかもですが、個人的にhtml5の要点をまとめたメモ。 ほんとにざっくり書いているので、何か期待しても何も出ません＞＜ 日本語が含まれる場合、title要素は charset の後（次）。 address要素は連絡先情報に使う。 例えば企業サイトの各支店の住所一覧とかに使うのはNG。ブログとかで、上手い店とかの住所にaddressを使うのもNG。 あくまでも、そのサイトの管理者への連絡先。なので、copyrightに使うのもNG。 copyrightはsmall要素が妥当。 なので、p small copyright って感じになる。 nav要素はあくまでも主要なナビゲーションに使う。 主要なってのは具体的にはグローバルナビゲーションやローカルナビゲーション。 なので、関連リンク一覧とか、ページ内にあるちょっとしたリンクに使うのはNG。 hgroup要素は、見出し
CSS Nite LP9 連動 第2回コーディングコンテスト
2007年5月に第1回目が開催されたコーディングコンテストの第2回を開催することになりました。 用意されたデザインを参加者がそれぞれ個々のスキルや考えに基づいてコーディングします。第2回は現在策定中であるHTML5+CSS3を利用し、テクニック、デザイン再現性、メンテナンス性の高さを競います。 このコンテストはCSS Nite LP9のイベントと連動しており、イベント当日に結果発表が行われます。 開催目的 これから現場で困るだろうHTML5+CSS3の技術を先取りして実装してみることで問題点を洗い出し知識として共有する。 この機会を利用してこれからのスタンダードを業界に示す。 参加・応募方法 参加するにはこのページ最下部にあるダウンロードリンクから必要データをダウンロードし、それを元にマークアップ、コーディングを行ってください。 完成したデータとprofile.txtをzip圧縮して c
Modernizr: the feature detection library for HTML5/CSS3
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
美しいHTMLの条件を綺麗にまとめた一枚の画像 - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ext JS - JavaScript Library
サービス終了のお知らせ
ブラウザカンファレンス2010 - #browserconf ツイートまとめ
IBM Developer