Google Chromeを使ったWebシステム開発がもっと簡単になる·Tincr MOONGIFT
TincrはGoogle Chromeデベロッパーツール上の修正をローカルファイルに反映できるソフトウェアです。 Webシステムを開発している際にGoogle Chromeのデベロッパーツールはおおいに役立ちます。Web上での修正をそのままローカルに反映できるTincrを使うとさらに便利になるでしょう。 インストールします。Google Chrome機能拡張として提供されています。 開発中のサイトで使います。 静的なWebサイトの他、Google Chrome機能拡張やRailsのassetsにも対応しています。 デモ動画です。 Tincrはローカルファイルの修正の他、ローカルファイルを修正した際の自動リロードにも対応しています。ログをコンソールに出力することもできるので、動かない場合の原因調査も容易になりそうです。 TincrはGoogle Chrome用のオープンソース・ソフトウェア（
Webブラウザ、Google ChromeでJSON構造の確認、編集·JSON Editor Online MOONGIFT
JSON Editor OnlineはWebブラウザやGoogle Chrome機能拡張として動作するJSONビューワー、編集ソフトウェアです。 RESTfulのWeb APIなどでよく使われるようになったJSONフォーマット。構造が分かりづらかったり、自分で手作業でJSONファイルを作成したりするといった時に便利なのがJSON Editor Onlineです。 トップページです。左側がJSON、右側がその解析結果のツリービューです。 項目を追加しました。中央にある左右の矢印ボタンをクリックすると反映されます。 右側でツリーを使って値を変更したりキーを追加したりできます。 その結果を逆に差し戻すこともできます。 配列も表現されています。 検索機能もあります。 URLを指定してJSONの取得ができます。 JSONの内容は小さくすることも可能です。 JSON Editor OnlineではJS
HTML5でルビ付き表示を行う方法（FirefoxとChromeのルビの扱い） - 結城浩のはてなブログ
ケイクスでのWeb連載『数学ガールの秘密ノート』が始まりました。ところで記事の中で、ルビの扱いがブラウザで微妙に違うことにお気づきでしょうか。まずはこちらをご覧ください。 第1回 文字と恒等式（前編） はじめの方に、女子高生テトラちゃんのセリフ「……先輩は恒等式（こうとうしき）のお話をしてくださいましたよね」が出てきます。この「恒等式」の部分は、以下のようにマークアップしています。 <ruby> 恒等式 ←1. 単語 <rp>（</rp> ←2. カッコ開き <rt>こうとうしき</rt> ←3. ルビ <rp>）</rp> ←4. カッコ閉じ </ruby> ルビに対応していないブラウザ(Firefox)では、上記の1,2,3,4が表示されます。 ルビに対応しているブラウザ(Chome)では、上記の1,3を使ってルビ付きで表示されます。 その結果、以下のように表示されます。Firefox
Google Chromeでスマートフォンサイトを閲覧するユーザエージェントスイッチャー·ctouch MOONGIFT
ctouchは選択式でユーザエージェントをiOS向けに切り替えられるGoogle Chrome機能拡張です。 Google ChromeはWebKitをレンダリングエンジンに使っています。なのでiOSのMobile Safariとほぼ変わらない表示ができるようになっています。そこでctouchを使ってスマホサイトの開発にもGoogle Chromeを使ってみましょう。 様々なユーザエージェントが並んでいます。ここから選択すれば良いだけです。 iPhoneの表示に切り替わりました。 ctouchを使うとユーザエージェントを簡単に切り替えられるようになります。予めiPhone、iPadといったユーザエージェントが設定されていますので選択するだけという手軽さが良いです。ctouchはGoogle Chromeの他、オープンソース版のChromiumでも利用できます。 ctouchはGoogle
ChromeのデベロッパーツールでCSSの未使用セレクタを調べる方法 - かちびと.net
Google Chromeのデベロッパーツール で現在閲覧中のページでロードされて いるCSSファイルから未使用のセレクタ を調べる、という方法です。こんなの Web制作者にとって常識だろ、みたい な内容だったらごめんなさい。 今更感あふれる内容ですけど、Chromeのデベロッパーツールで閲覧中のページで読み込まれているCSSからそのページで使用されていないCSSルールを調べる、という方法。 と言うかただの標準機能の紹介です。便利かどうかは使わないと分からないと思うのでテストしてご判断下さい。 手順 F12でデベロッパーツール開いてAudit（監査）っていうタブを選択し、Runで調査ツールを実行します。 ↑ 直ぐに解析は終わると思います。赤い枠の「Remove unused CSS rules」という部分が未使用のCSSルールです。 ↑ ファイルごとに調査結果が出ます。三角のマークをクリッ
iPhone版Google Chromeをインストールしてみた – poyosi.com
iPhoneでは専らSafariを使ってます@poyosiです、こんにちは。 iPhone版のGoogle Chromeがリリースされたとのことで早速iPhone（iOS 5.1）にインストールしてみました！ インストールしたので実際に使ってみる！ 利用規約に同意して使用開始 GoogleアカウントでログインするとPC間と同期できる プッシュ通知機能もついてます（何に使うんだろう？） 初心者にも優しい使い方の説明もある アクセスしてみるとこんな感じ 体感の動作はとても軽く、キャッシュも有効なのでサクサク閲覧できそうな感じでとても良いです。画像にあるようにURLが表示されてるヘッダーエリアのようなところが常に固定なのでここが一瞬邪魔かなーと思いました。Safariと表示エリアも変わってきますので、それは後ほど。 大きな違いとしては、【前にページに戻る】や【ブックマーク】のボタンが上に配置され
Google ChromeでiPhoneとかのtouch系イベントをエミュレートできるようになってた。これは便利。 | Ginpen.com
右上User Agentのところね。Emulate touch eventsにチェックを入れると、マウスのクリックやドラッグ＆ドロップでtouchstart, touchmove, touchendが発火するようになる。 開発時にいちいち実機やXcodeのエミュレーターを用意しなくても動作確認できるようになるのはとても便利。さすがにマルチタッチはできないけど、とりあえずエラーが出てないとかそういう確認ならできる。 ついでに隣の項目のOverrride User AgentでiPhoneやiPadを選ぶとなお良さそう。（ちなみにIEとかも指定できます。もちろんエミュレートはないけどね。） 画面サイズは、それを指定値に変更できるプラグインがあるから、探してみてください。 Settingsの項目は、なんか気がついたら（Chromeが更新されてて）変わってるから、ときどき覗いてみるといいんじゃない
Chromeの「デベロッパーツール」が神すぎて感動。CSS初心者な私でもサイトのカスタマイズがわかりやすい
Chromeデベロッパーツールの起動方法Google Chrome上で右クリックして「検証」を選ぶだけで、デベロッパーツールが起動します。 これで、現在開いているページのHTMLソースと、スタイルシートが表示されます。 この時点で拒否反応を示す人もいることでしょう・・・。その気持ちは痛いほどわかります。わけわからんアルファベットの羅列が飛び込んできたら、そっと閉じたくなりますよね。 でもちょっとだけ待ってください。 きっと今考えているよりも楽に、ブログのカスタマイズを試してみることができるはずなのです。 （少なくとも、私にとってはそうでした） HTMLソースが実際のブログ（サイト）のどの部分に対応しているかわかる！表示されたデベロッパーツールのHTMLソースにカーソルを合わせてみてください。 カーソルを合わせたところに対応する場所が、ハイライトされて表示されます。 つまり、「このHTMLソ
その場でiPhoneやAndroidのユーザーエージェントに切り替えられるChromeエクステンション・User-Agent Switcher - かちびと.net
その場でサクッとUAを切り替える 事が出来るChromeエクステンション User-Agent Switcherのご紹介です。 iPhoneやiPad、Androidだけでなく、 FirefoxやIEなどのブラウザにも スイッチできます。 FirefoxやIE、iPhone、iPadやAndroidなどのユーザーエージェントにその場で切り替え可能なChromeエクステンションです。ただそれだけなんですがシンプルだし地味に便利かなと思いまして。 閲覧中のページでサクッとユーザーエージェントを切り変える事が出来ます。iPhone4やiPad、AndroidなどのタッチデバイスだけでなくIE、Firefox、Safari、Operaなどにも変更可能です。 使い方 使い方は簡単で、User-Agent Switcherをインストールするとメガネのアイコンが表示されるようになりますので、好きなUAを
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」:phpspot開発日誌
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 2012年05月01日- Chrome ウェブストア - Dev HTTP Client WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 サーバに対して、POSTやGET等のメソッドで、独自のクッキーやヘッダーなどを加えて手動で送信できるChromeのアプリです。 POSTで送信する場合ってフォームを用意しないといけないのが面倒ですが、それも手動で指定できるため、非常に便利。 その場で返却値がカラーリングされつつ整形されて見れるので、JSON等の値を見る場合には超便利です JSON返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
いま見ているサイトで使われているテクノロジーを調査できる拡張機能 | ライフハッカー・ジャパン
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
Modern Web Development
A software engineer in San Francisco, talking about the mobile web, inspiration, creativity, life, and personal development. The blog post is the first in a series of posts that attempts to outline what a modern web development toolchain looks like and how to use the best-of-breed tools for efficient, effective development. Part two will outline how to use to set up your Terminal, zsh, and vim The
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
CodeGrid - フロントエンドに関わる人々のガイド
HTML/CSS 394 CSS仕様 123 CSS設計 55 HTML仕様 42 SVG 25 スタイルガイド 14 HTML/CSSの実践 138 HTML/CSSドリル 4 フォント 3 データ形式 6 性能と品質 52 セキュリティ 16 パフォーマンス 12 アクセシビリティ 23 ブラウザ 23 デザイン 70 コミュニケーション 10 ディレクション 51 ドキュメンテーション 7 JavaScript 468 ECMAScript 45 ライブラリ 68 ブラウザAPI 38 WebGL 42 テスト 36 JavaScriptの実践 64 JavaScriptの設計 9 JavaScriptドリル 19 非同期通信 5 DOM 9 Angular 30 Electron 4 Web Components 17 jQuery 24 Backbone 17 TypeScrip
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.2ch-search.net/blog/6
PLUS1WORLD | ゲームとネットが好きな今井阿見の個人ブログ
ブログやサイトのスマートフォン用画面を、パソコンで確認する方法[ChromeのUser Agent（ユーザーエージェント）変更]![ブログやサイトのスマートフォン用画面を、パソコンで確認する方法[ChromeのUser Agent（ユーザーエージェント）変更]](https://cdn-ak-scissors.b.st-hatena.com/image/square/41c5fb239c4b3f698edeed41f90667a70bfa5192/height=288;version=1;width=512/https%3A%2F%2Fushigyu.net%2Fwp-content%2Fuploads%2F2012%2F05%2Fuser_agent_title-210x158.jpeg)
新着記事
