タグ

HTML5に関するhalohalolinのブックマーク (15)

  • ユーザーの体感速度を高めるためのJavaScriptチューニング(後編)

    連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング(前編)」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという

    ユーザーの体感速度を高めるためのJavaScriptチューニング(後編)
    halohalolin
    halohalolin 2014/06/09
    非同期でJavaScript処理を進めるにあたって、2013年7月ではWebWorkersという仕様が存在する。IEはバージョン10とPCモダンブラウザ、iOSが対応、Androidの標準ブラウザが未対応なのでfakeworker-jsなどのPolyfillを利用する。
  • Web ブラウザーや OS のシェアが確認できる Web サービスまとめ - monoe's blog - Site Home - MSDN Blogs

    In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...

    Web ブラウザーや OS のシェアが確認できる Web サービスまとめ - monoe's blog - Site Home - MSDN Blogs
    halohalolin
    halohalolin 2014/03/04
    FileSystemAPIは2014年3月時点ではGoogleChromeしか使えない。しかしファイルをキャッシュさせるのが目的であれば、画像をBASE64に変換しローカルストレージに保存してキャッシュさせる方法がある、但しlocalstorageの容量が膨らむ。
  • Audio Sprites

    halohalolin
    halohalolin 2014/01/19
    iOSにも対応、HTML5 AudioSpriteの実装例
  • IBM Developer

    IBM Developer is your one-stop location for getting hands-on training and learning in-demand skills on relevant technologies such as generative AI, data science, AI, and open source.

    IBM Developer
    halohalolin
    halohalolin 2014/01/08
    iOSのWebアプリ開発においてaudioタグの利用に制限が加わっているため、タイミングよく音声を再生する事が出来ない、その為オーディオ・スプライトを用いて遅延を防ぐようにします(事前に音声はロード済みであること)
  • 『ガールフレンド(仮)の「声」実装』

    1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。こんにちわ。 「ガールフレンド(仮)」でフロントエンドの開発をしている秋山と申します。 「ガールフレンド(仮)」とは、ユーザーが主人公となり、様々な女の子と出会っていく“声が出る♪”学園恋愛カードゲームです。各カードには、人気声優のボイスが付いていて、さまざまな演出に合わせてキャラクターの声を聞くことができます。スマホのブラウザ版カードゲーム × 声ガールフレンド(仮)の開発に入る時点で、スマホブラウザゲームで音声を出しているサービスは他にもありましたが、カードに声が付いているものは少なかったかと思います。 また、スマートフォンのブラウ

    『ガールフレンド(仮)の「声」実装』
    halohalolin
    halohalolin 2013/04/03
    HTML5の音声に関するバッドノウハウ/mp3を商用で利用する際にはライセンス料が発生しますのでご注意ください/iOSは音声ファイルの先読み不可/currentTime設定に注意
  • これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸

    はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapWebデザインが得意ではないエンジニア向けにTwitter社が開発/提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at

    これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 小さい頃はエラ呼吸
    halohalolin
    halohalolin 2012/10/09
    今風のWebサイトを作るのに役立ちそうなフレームワーク
  • [速報]HTML5/JavaScriptでWindows 8対応アプリを作る「Visual Studio」「Expression Blend」登場。BUILD 2011

    [速報]HTML5/JavaScriptWindows 8対応アプリを作る「Visual Studio」「Expression Blend」登場。BUILD 2011 マイクロソフトは9月13日(日時間9月14日早朝)、開発者向けのイベント「BUILDカンファレンス」を開催、開発コード名「Windows 8」の詳細を初めて明らかにしました。 Windows 8で搭載される「Metroスタイル」と呼ばれるインターフェイスに対応したアプリケーションの構築には新しいAPIが用意され、C/C++、C#、VBなどに加えてHTML5/JavaScriptでも開発可能になります。 これに合わせ、開発ツールのVisual Studio、Expression BlendもHTML5/JavaScript対応となりました。 基調講演の模様を紹介しましょう。 (記事は「Windows 7より軽くなったWi

    [速報]HTML5/JavaScriptでWindows 8対応アプリを作る「Visual Studio」「Expression Blend」登場。BUILD 2011
    halohalolin
    halohalolin 2012/02/20
    Expression Blendどうなるのかと思ったんですが、あぁ新商品ではHTML5対応しているからそれを買えという展開ですね、お前この間VisualStudio2010出してなかったか?つーか、職場で買わせちゃったよorz
  • Windows 8のタッチUI用IE10はプラグインに非対応。FlashもSilverlightも使えず - Publickey

    Windows 8のタッチUI用IE10はプラグインに非対応。FlashもSilverlightも使えず Windows 8の最大の特徴は、「Metroスタイル」と呼ばれるタッチUIが提供されることです。そして、Windows 8に搭載予定のInternet Explorer 10には、当然ながらMetroスタイルに対応したモードが追加されます。 マイクロソフトのIEチーム リードであるDean Hachamovitch氏は次のように書いています。 the Metro style browser in Windows 8 is as HTML5-only as possible, and plug-in free. The experience that plug-ins provide today is not a good match with Metro style browsing

    Windows 8のタッチUI用IE10はプラグインに非対応。FlashもSilverlightも使えず - Publickey
    halohalolin
    halohalolin 2012/02/20
    ちょっと古いニュースですが、Windows Phone 7でSilverlightを使い始めたユーザは-恐らくWindows8と統合されていくであろう-Windows Phone 8で早々に捨てることになるんでしょうか?Expression Blendの将来はどうなる?!
  • Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime

    結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ

    Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime
    halohalolin
    halohalolin 2012/01/23
    HTML/CSSフレームワーク99limeの紹介、素早くデザインの整ったサイトが構築できる/リスト・メニュー・ボタン・画像・イメージスライダ-・パンくず・グリッドレイアウト・フォーム
  • ジャストアイディアを素早く形にしていく。HTML5/CSS3デザインテンプレート·Perkins MOONGIFT

    PerkinsはHTML5/CSS3のデザインテンプレート。多数のパターンに対応している。 PerkinsはHTML5/CSS3製のオープンソース・ソフトウェア。アイディアを思いついてすぐにコーディングにとりかかるが、Webデザインで詰まって投げ出してしまったという経験はないだろうか。デザインが今ひとつだと開発する気力までなくなってしまうというものだ。 2カラム 必要なのはある程度までパターンとして対応できる汎用的なテンプレートだ。それを実現するソフトウェアとしてPerkinsを紹介しよう。 PerkinsはHTML5/CSS3でデザインされたテンプレートだ。2カラムまたは4カラムのデザインで、ヘッダーやリスト、引用、コード記述、画像の回り込み、テーブル、フォーム、エラー(または通知)メッセージ、ボタン、角丸、傾き、細かく分けたブロックなどが用意されている。 リストなど さらに文字をアイコ

    halohalolin
    halohalolin 2011/06/12
    「HTML5/CSS3でデザインされたテンプレートだ。2カラムまたは4カラムのデザインで、ヘッダーやリスト、引用、コード記述、画像の回り込み、テーブル、フォーム、エラー(または通知)メッセージ、ボタン、角丸...」
  • iPhone用サイトのフォームにはHTML5の属性を使おう - NullPointer's

    ガラケーからiPhone4に乗り換えました。おサイフケータイ等のガラパゴス機能は使っていなかったのでiPhoneになって不便を感じることもなく、iPhoneの便利さだけを享受しています。東京にいる限りはソフトバンクの電波で困ることもないですしね。 ところでiPhone4のSafariはHTML5で追加されたinputの新しいtype属性値に対応しています。キーボードのレイアウトが属性にあった形に変更され、入力しやすくなります。また属性に合わない値の入力が制限されます。 https://nullpon.moe/dev/sample/form.html type="email"では @ と . のキーが追加されます。 type="url"では . と / と .com が追加されます。 type="number"では数字キーボードになります。ただし数字以外も入力可能でした。 type="tel

    iPhone用サイトのフォームにはHTML5の属性を使おう - NullPointer's
    halohalolin
    halohalolin 2010/08/17
    iPhoneにおけるHTMLフォームは、<input type="~" />の指定を行うほうが良い。キーホードが変化するので。email…メールアドレス・type="url"…/追加・type="number"…数字キーボード・type="tel"…数字入力
  • GWTをスマートフォンでも活かす·GWT Mobile Webkit MOONGIFT

    GWT Mobile WebkitJava製、iPhone向けのオープンソース・ソフトウェア。JavaScriptを用いずにWebアプリケーションを開発するためにGoogleが開発しているGWT(Google Web Toolkit)。PC向けの開発が容易になるのはもちろんだが、最近シェアが広がりつつあるスマートフォンに対しても使えるともっと便利だろう。 ストレージAPI そこで作られているのがGWT Mobile Webkitだ。特にiPhone向けを意識している。PC向けブラウザでは多数のバージョンが存在するが、iPhone向けであればSafariに限定できる。さらにHTML5にも対応しているので高度な機能を使えるようにしているのが特徴だ。 現時点では3つの機能が提供されている。一つはDatabase APIだ。もう一つはストレージAPIで、最後に位置情報取得用のAPIとなっている。

    GWTをスマートフォンでも活かす·GWT Mobile Webkit MOONGIFT
    halohalolin
    halohalolin 2009/11/24
    GWT Mobile Webkitだ。特にiPhone向けを意識している。PC向けブラウザでは多数のバージョンが存在するが、iPhone向けであればSafariに限定できる。さらにHTML5にも対応しているので高度な機能を使えるようにしているのが特徴だ。
  • あまり知られていないけれど、HTML5では正規表現が使えるようになる

    正規表現といえば、主にsedやawkといったUNIXのコマンドで、あるいはPerlPHPJavaScriptなどのスクリプト言語の中などで、プログラマーが文字列を操作するために使う道具でした。 その正規表現がHTML5でサポートされる見通しです。いままで正規表現を使わずに済んでいたデザイナやコーダーといった職種の方々も、いずれ仕事としてきちんと正規表現を扱わなければならない時代がやってきます。 HTML5のどこに正規表現が使えるようになるの? 正規表現は、input要素のpattern属性の中で使えることになる予定です。W3Cが2009年8月25日付け公開しているHTML5のワーキングドラフトの「4.10 Forms」の「4.10.4.2.8 The pattern attribute」では次のように記載されています。 The pattern attribute specifies a

    あまり知られていないけれど、HTML5では正規表現が使えるようになる
    halohalolin
    halohalolin 2009/09/29
    HTML5では入力フォームで正規表現が使えるらしいので、javascriptなどによる判定ルーチンを組む必要がなくなる?
  • HTML 5 And CSS3 Cheat Sheets Collection

    Free Web Resources Everyday - WebResourcesDepotRelated Posts70+ Practical Cheat Sheets For Web Designers And Developers 20+ Cheat Sheets Handy For Designers Wireframe Magnets For Easy Prototyping (DIY Kit) Free Pixel Patterns From Kaliber10000 Lorem Ipsum Generators

    halohalolin
    halohalolin 2009/09/20
    HTML5とCSS3の早見表あれこれ、HTML 5 Visual Cheat Sheet/HTML 5 Canvas Cheat Sheet/HTML5 id/class Name Cheat Sheet/CSS3 Cheat Sheet/CSS Properties Index
  • 最近公開のHTML5関連の参考サイト色々まとめ:phpspot開発日誌

    最近公開のHTML5関連の参考サイト色々をまとめてみました。 チュートリアル〜チートシートまでをご紹介。 Coding A HTML 5 Layout From Scratch | How-To, Tutorials | Smashing Magazine ゼロからHTML5レイアウトを行うためのチュートリアル HTML 5 Reset Stylesheet | HTML5 Doctor HTML5用のCSSリセットスタイルシート How to build a desktop WYSIWYG editor with WebKit and HTML 5 - Ars Technica WebkitHTML5を使ってWYSIWYGエディタを作成するチュートリアル HTML5 drag and drop in Firefox 3.5 ? 0xDECAFBAD Firefox3.5でHTML5のド

    halohalolin
    halohalolin 2009/09/10
    ゼロからHTML5レイアウトを行うためのチュートリアル/HTML5用のCSSリセットスタイルシート/WebkitとHTML5を使ってWYSIWYGエディタを作成するチュートリアル/Firefox3.5でHTML5のドラッグ&ドロップ機能を使うサンプル
  • 1