5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show

最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく

A deep dive into advanced functionality within the Chrome Developer tools that will enable you to more effectively build and debug web apps. Presented at the 2014 OpenWest Conference.

Limited space! Get on waitlist to be the first to know when tickets go live!

オフラインWebアプリの再到来で今、再び注目されるAPIの本命　ーJavaScript SQL-like database

We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、ピグディビジョンでフロントエンドのプログラムを書いています。maginemu (@maginemu) です。 どこでもピグライフとは弊社の提供しておりますPC向けソーシャルゲーム「ピグライフ」をスマートフォン向けに移植したサービスです。『ピグライフのお庭をスマートフォンでも』を目標に移植を行いました。 (「どこでもピグライフ」はPCで「ピグライフ」を開始し、「いちごジュースを作ってみて！」というクエストをクリアするとお使い頂けるようになります) PC版ピグライフはFlashでつくられていますが、どこでもピグライフはHTML5/CSS3/J

右上User Agentのところね。Emulate touch eventsにチェックを入れると、マウスのクリックやドラッグ＆ドロップでtouchstart, touchmove, touchendが発火するようになる。 開発時にいちいち実機やXcodeのエミュレーターを用意しなくても動作確認できるようになるのはとても便利。さすがにマルチタッチはできないけど、とりあえずエラーが出てないとかそういう確認ならできる。 ついでに隣の項目のOverrride User AgentでiPhoneやiPadを選ぶとなお良さそう。（ちなみにIEとかも指定できます。もちろんエミュレートはないけどね。）　画面サイズは、それを指定値に変更できるプラグインがあるから、探してみてください。 Settingsの項目は、なんか気がついたら（Chromeが更新されてて）変わってるから、ときどき覗いてみるといいんじゃない

対象ユーザ GoogleのPaaS型クラウド「Google App Engine」に興味はあるが経験のない方。JavaScriptやActionScriptによるプログラミング、およびjQueryでの簡単なプログラミング経験のある方。JavaやPythonの開発経験は不要です。 必要な環境 コマンドライン動作環境 Java SE5またはJava SE 6 Eclipse（オプショナルですが強く推奨） 1　クラウド移行の意義 1.1　災害発生時に実証されるクラウドの威力 5年ほど前から米国で構築され始めたクラウドコンピューティングは、日本でも急速にその価値が認識され存在感を高めつつあります。クラウドは東日本大震災への対応と復興/復旧においても、公共Webサイトの複製を構築したり業務システムを復旧させたりするときに、拡張性・可用性・迅速性などがいかんなく発揮されています。もちろん平時での利用で

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開

BigtableをjQueryで操作できる「gaedirect」とは：クラウドとgaedirectでできる緊急対応マッシュアップ（1）（1/3 ページ） 緊急時の“クラウド”の有用性 このたびの東日本大震災で被災された皆さま、ご家族ならびに関係者の皆さまに、心からお見舞いを申し上げます。今回の大震災では、多くのWebサイトでアクセス不能状態が発生したのは、記憶に新しいところです。緊急時こそ、必要な情報を入手するために多くの人がWebサイトにアクセスするわけですが、このような切実に情報が必要とされるときに限って、トラフィック増大によるアクセス不能が発生してしまう状況が多々見られました。 しかし、このような緊急時対応サイトをGoogle App Engine（以後、GAE）などによってクラウド化しておけば、このような問題は解決できたといえます。クラウドを使用すれば、ユーザーアクセスが急激に増加

連載の最終回となる今回は、これまでの内容のおさらいとして、Google App Engineで自分の位置情報を記録するサイトを作ってみます。 アプリケーションの内容 今回作成するアプリケーションは、簡単な位置情報サービスということで、以下のようなサイトにしたいと思います。 Goelocation APIに対応したブラウザでトップページを開いていると、測位された位置が変わるごとにサーバへ緯度経度をPOSTし、Geohashに変換してGoogle App Engineのデータストアに保存する。 履歴ページ（/history）へアクセスすると、地図を表示し、それまでに記録されている位置を線でつないで地図上に表示する。 今回必要となる技術要素は以下のようになります。 トップページ： Google Maps JavaScript APIを利用した地図の表示 JavaScriptによる位置情報の取得

Rainbow U トップページページ一覧メンバー編集 × jQuery→Google App Engineでデータ保存 最終更新： puriketu99 2011年03月07日(月) 22:31:01履歴 Tweet jQuery側 $.post( "http://xxxxxxxxxxxxxxxxx.appspot.com/introdata", {"viewerid": viewerid, "fromid": from, "toid": to, "introreason": reason}, function(data, status) { $("#oktext").css('font-size', '12px').css("font-weight", "bold").css("color", "red").fadeIn(2000); $("#oktext").fadeOut(5000

あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。