Web開発者の作業効率劇的に向上するChrome Developer Tools
Google Chromeってシェアをぐんぐん伸ばしていますよね。FireFoxにアドオンしてJavaScriptをデバッグしていた人も多かったかもしれませんが、Google ChromeでJavaScriptのデバッグを行いたい人も多いはず。Chromeを使って、同じことをｓるう場合は、Chrome Developer Toolsがオススメです。Chrome Developer Toolsは、WebKitのWeb Inspectorに基づいていますが、多くの拡張機能を含んでいます。例えば、わずかのクリックまたはキー入力で、スクリプトにブレークポイントを表示させたり、HTMLの編集からすべてを行うリモートデバッグを実行する能力などを備えています。最近ではFire Bugより高機能になっていますし、たいぶん安定してきました。筆者は、もうJavaScriptのデバッグはChrome Developer Tools一本で以降と思っています。
主な機能
- JavaScriptのデバッグ（ブレークポイント、コンソール確認、変数の内容確認）
- CSSの確認とデバッグ
- プロファイラ情報、クッキー情報の参照
- 設定（クッキーをDisableにしたりとか
もう、ほとんどＩＤＥ状態です。下記の動画も参考になります。
Chrome Developer Toolsの各機能詳細は、次のＵＲＬから入手できます。
https://developers.google.com/chrome-developer-tools/docs/overview?hl=ja
またChromeがインストールされている場合はpluginを入手しなくても次のショートカットですぐにツールが使えますよ。
On Windows and Linux, press
Control – Shift – I keys to open Developer Tools
Control – Shift – J to open Developer Tools and bring focus to the Console.
Control – Shift – C to toggle Inspect Element mode.
On Mac, press
⌥⌘I (Command – Option – I) keys to open Developer Tools
⌥⌘J (Command – Option – J) to open Developer Tools and bring focus to the Console.
^⌘C (Control – Option – C) to toggle Inspect Element mode.
パソコン(PC)とテレビ(TV)の接続方法
テレビをＰＣのモニターにしたい、Youtubeをテレビで見たい場合は、パソコン(PC)とテレビ(TV)の接続方法があります。テレビとパソコンをつなぐ方法にはポートによっていくつかの種類があります。
JQueryで５分でアップロード画面を作成する方法
Blueimp jQueryは、 jQueryを使用してアップロード用プラグインのイベントです。機能としては、複数のファイルを選択、ドラッグ＆ドロップをサポートするウィジェット、プログレスバーとjQueryのプレビューイメージファイルのアップロード。クロスドメイン、チャンクと再開ファイルのアップロードとクライアントサイド·イメージのサイズ変更をサポートしています。
無料であるBlueimpをダウンロードするとphpなどのサーバーサイドのアップロードスクリプトも配布されているので簡単に設定できます。次のようなクライアント・サーバーコーディングで５分もかからず多機能アップロード処理を可能にします。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
Google App Engine for Javaで実行環境を判定する簡単な方法
Google App Engine for Javaでローカル開発環境、デプロイ環境で処理を分岐させるときは次のような環境変数を取得できます。
String env = System.getProperty(“com.google.appengine.runtime.environment”);
変数のenvには”Production” とか “Development” という文字列が取得できます。
【2011版ベスト10】無料ダウンロードできる素敵なWordPressテンプレート
Google +1（プラスワン） SEO対策？
インターネットサーフィン中に海外のサイトで次のような募集記事を見かけました。
これってGoogle +1を利用した新手のＳＥＯ対策でしょうか？
結局、こういうことしても効果は一時期で、Google側の検索アルゴリズム変更されてすたれていくのでしょうね。
1000 Google +1s
Must be from different Canada Google accounts ONLY
Must provide link doc to +1′s
Must be done within 7 days
カテゴリ別に1500以上のPhotoshop PSDを無料でダウンロードできるサイト
カテゴリ別に1500以上のPhotoshop PSDを無料でダウンロードできるサイトです。ダウンロードしておきたい高品質のデザインリソースです。
リアルタイム翻訳！？ Word Lens
久しぶりに驚きのiPhoneアプリが登場しました。
iPhoneのカメラを通して、看板などの文字を見ると、英語がスペイン語に翻訳して見えるというアプリです。
これは、まるでドラえもんの道具です。
言葉で言うよりも下の動画を見てもらったほうが早いでしょう。
Word Lens リアルタイム翻訳アプリ
これどういう仕組かすごく気になります。
買っちゃおうかな。
Google Mapsで表示されている範囲内のオブジェクトを表示する方法
Google Mapsで表示されている地図上に、お店や不動産などの情報をプロットするようなアプリを作りたいと思うことってよくありますよね？
Google Maps Javascript API v3を使えば、簡単に実現できます。
