グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる
グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる 学習内容は全部で以下の7つのレベルに分かれており、17本のビデオと、レベルごとに用意された、実際に自分で操作して解いてみる75以上の例題から構成されています。レベルをクリアするとバッジがもらえるようになっています。 Level 1: Getting Started & Basic DOM and Styles Level 2: Advanced DOM and Styles Level 3: Working With the Console Level 4: Debugging JavaScript Level 5: Improving Network Performance Level 6: Improving Performance Level 7: Memo
weinre - Home
Home - Test Drive - Installing - Running - Multi-User - Security - Building - ChangeLog - License ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ weinre is Web Inspector Remote. Pronounced like the word "winery". Or maybe like the word "weiner". Who knows, really. It's a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, a
ブラウザベースのjQuery Mobileアプリ開発環境「codiqa」と「Application Craft」
jQuery MobileなどのすぐれたJavaScriptフレームワークの登場で、HTML5とJavaScriptを組み合わせたWeb標準によるモバイルアプリケーション開発が普及し始めています。 この記事では、Web標準によるアプリケーション開発をさらに簡単にしてくれる、WebブラウザベースのjQuery Mobile対応モバイルアプリケーション開発環境「codiqa」と「Application Craft」の2つを紹介しましょう。 Codiqa～jQuery Mobileアプリのモックアップがすぐ作れる モバイルデバイス対応のアプリケーションを開発するときに手間がかかるのが、小さい画面でも使いやすいユーザーインターフェイスの構築です。モックアップを作り、使い勝手を試す必要があります。 先月公開が始まった「codiqa」は、そのモックアップを手軽に、Webブラウザ上でドラッグ＆ドロップす
アドビの新ツール「Shadow」は、モバイル用Webアプリ開発者必須のツール
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた
長い記事なので、先に結論だけ書いておきます。WebSocketのバイナリメッセージ機能は、これまでのインターネットのあり方をひっくり返します。「そんなの知ってるよ」という方もいるとは思います。僕も理屈では分かってたつもりだけど、実際にアプリを作ってみて、具体的にそれを感じることができたので、ちょっと長いですがどういうことなのか説明してみます。 WebSocketとは # WebSocketは、HTML5関連の中でも特に注目を集めている技術の一つです。通常のHTTP通信であればクライアントからのリクエストなしにサーバーは応答しませんが、WebSocketを使うことでクライアントとサーバーの間で双方向の通信が可能となります。これを利用することで、今後様々なリアルタイム性の高いサービスを構築することが可能になるでしょう。 そんなWebSocketですが、これまで波乱の道を歩んできました。数年前か
Google がまだ Flash を使っているサービスでみる脱 Flash の難しさ - てっく煮ブログ
Flash, HTML5スマートフォンの普及が進む中、iPhone には Flash が搭載されず、Android 版 Flash は開発停止になるなど、遅かれ早かれ Web 上から Flash が消えていき、リッチな表現は HTML5 に置き換わっていくことは確実となりました。「これからは HTML5 だ」という印象を世間に強く与えたのが、2009 年の Google I/O でした。Google I/O 2009 レポート グーグルが賭けるHTML 5の未来 − ＠ITGoogle はそれ以降、多くのサービスに HTML5 を取り入れてきました。しかし、いまだに Flash を利用しているサービスがいくつかあります。この記事では HTML5 化していない、または、できていない 5 つの Google のサービスを通してどのこで Flash が使われているのかなぜ Flash が使われて
Dojo道場 ～ 第9回「ウィジェット・レイアウト詳解」
はじめに 第6回からウィジェットに関して紹介してきましたが、今回はそれらのウィジェット組み合わせて画面に配置するレイアウトの機能について紹介していきます。 レイアウトと聞くとCSSやテーブルなど、HTMLのレイアウトを思い浮かべるかもしれませんが、Dojoでのレイアウトは基本的に、「ウィジェットをどう配置するか」というウィジェットのレイアウトを指します。 Dojoのウィジェットには、用途に応じて様々なレイアウト用のウィジェットが揃っていますが、今回はその中でも最も汎用的に使えるBorderContainerを使って、ウィジェットを配置する方法をご紹介します。 BorderContainer（ボーダー・コンテナ）とは 第7回で既に登場しているBorderContainerですが、これは非常にシンプルかつ汎用性の高いウィジェットで、上下左右と中央の最大5つの領域（region）にウィジェットを
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作り」を目指す――Mozilla
米Googleが今後3年間で米Mozilla Foundationに支払う契約金は年額3億ドル――昨年末、Firefoxのデフォルトの検索エンジンをGoogle検索にするための契約金額に関する報道が話題となった。Google ChromeのシェアがFirefoxを超えて2位となった中、前回を大きく上回る契約金額の理由についてさまざまな憶測が飛び交った。 「契約内容について詳しいことは言えないが」――こう切り出したのは、Mozilla Foundationで常任理事を務めるマーク・サーマン氏。サーマン氏によれば、「契約内容はWebブラウザのマーケットシェアとは全く関係ない」という。 同氏は契約内容に関してそれ以上の言及は避けたものの、（1）少なくとも今後3年間は（Googleからの契約金を中心とした）安定した資金が確保できていること、（2）Mozillaの収益はGoogleからの契約金が全て
Using JavaScript's Prototype with MVC | Envato Tuts+
As you can see above, the header inherited its font color property from its parent container though the CSS behavior of cascading. This behavior is quite similar to the concept of inheritance in OOP. We can also see that the header is a child of the container, inheriting certain properties, based on the behavior of the element. When we see our elements from this perspective, we have a better defin
jquery.jsを読み解く：第1回 jQueryライブラリ（1～171行目）｜gihyo.jp … 技術評論社
はじめに jQueryとは、John Resigによって開発され、最近非常に注目を集めている Javascriptライブラリです。 JavaScriptとHTMLの対話を劇的に改善し、Ajaxなどにより複雑化してきているWebアプリケーション構築に必要な処理を非常に簡潔に書くことができます。また、ブラウザの種類やバージョンによる違いも吸収してくれるため、プログラマの作業量も減らしてくれます。 本連載では、jQueryライブラリのコードを読みながら、実装として中で何が行われているのかを見ていこうと思います。 想定している読者は、jQueryライブラリをただ使うだけでなく、やっていることを理解したいという方、使われているコードを応用して自分なりの改造をしてみたい方、新たなプラグインを開発したいという方などです。 今回の連載では執筆開始時点の最新版であるバージョン1.2.2を対象としています。説
PC向けWebページをスマートフォン向けに作り直す
パソコン向けのWebページを、iPhone/Android向けに作り直すことによって、HTML5でiPhone/Androidアプリケーションを作る際のポイントを見ていきましょう。リスト1は入力フォームのあるパソコン向けWebページのHTMLです。HTML5で作成してあります＊4。入力したら文字コードUTF-8で保存してください。 Webブラウザでリスト1を実行すると図1のようになります。テキストボックスにテキストを入力してボタンを押すと、そのテキストがアラートウィンドウで表示されます。見出し（h1要素）の文字が折り返しているのは、Webブラウザの幅のせいで、改行（br要素）は入れていません。 このHTMLをAndroid端末のWebブラウザに読み込んで表示してみましょう。Android端末に読み込むには、ネットワーク経由でアクセスできる場所にHTMLファイルをアップロードしなくてはなりま
スマートフォン向けのWebアプリを作ろう
この特集では、現在利用者が急増している2大スマートフォン、iPhoneおよびAndroid端末向けのアプリケーションを作ります。と言っても、それぞれのOSにネイティブなアプリケーションではなく、iPhone/Androidが搭載するWebブラウザの上で動くWebアプリケーションです。具体的には、HTMLおよびCSSの最新バージョンであるHTML5とCSS3を使ってiPhone/Androidアプリケーションを作成する方法、およびその際のポイントを説明します＊1。 iPhone/AndroidならHTML5とCSS3でアプリを作れる Webアプリケーションは、OSやプラットフォームに依存しないと言われています。確かに、Webアプリケーションの動作や見栄えは、OSやプラットフォームにはあまり依存しません。しかし、Webブラウザの種類やバージョンに強く依存します。異なるWebブラウザで同じように
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
Hidden Gems of HTML5: classList – Mozilla Hacks - the Web developer blog
If you are a web developer, you surely must know how handy it is to dynamically change the class attribute on an element. The benefits this technique are quite a few: You leave any changes in the look and feel to the CSS You avoid having to loop lots of elements as you can allow CSS to do that job for you by assigning a class on a parent element You can trigger CSS transitions and avoid having to
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css-eblog.com
Engadget | Technology News & Reviews
オープン Web テクノロジーのデモ | MDN
IBM Developer
IBM Developer
