米NHTSA、乗用車への車車間通信システム搭載義務付けに関する法規案を公示

米運輸省道路交通安全局（NHTSA）は13日、米国で販売される新車の乗用車に車車間（V2V）通信システムの搭載を義務付ける法規案を公示した。

NHTSAでは2014年からV2V搭載の法制化に向けた作業を進めていた。現在、パブリックコメントを受け付けており、2019年の法制化を目指す。2019年に法制化が行われた場合、2021年から段階的な導入が進められ、2023年には対象車両へのV2V搭載義務付けが開始されるとのこと。

V2V通信システムは専用の短距離通信規格（DSRC）を用い、周囲の車両に位置や速度、進行方向、ブレーキの状態などを送信する。データは秒間最大10回更新され、他の車両のV2Vシステムは受信したデータをもとにドライバーに注意を促すなどの処理を行う。先進運転支援システムを搭載する車両では、V2Vのデータをもとに自動ブレーキを使用するなどの危険回避も可能になる。

またV2Vとは別に、NHTSAでは車両と信号や標識、道路工事現場など道路上のインフラストラクチャーが通信する車路間（V2I）通信についても近くガイダンスを公表する予定だという。V2VとV2Iにより、交差点や車線変更時の衝突事故を含む、アルコールやドラッグの影響を受けていないドライバーによる衝突事故の最大80%について、回避または深刻度の緩和が可能になるとNHTSAでは予測しているとのことだ。

欧州のランサムウェア対策組織、無料の復号ツールを提供拡大

　欧州警察機構（ユーロポール）は12月15日、官民が連携するランサムウェア（身代金要求型マルウェア）対策プロジェクト「No More Ransom」（NMR）に、民間と公共セクターから新しく30以上のパートナーが加わったと発表した。人質に取られた被害者のデータを取り戻すための無料ツールの提供を増やし、より多くの被害者救済を目指す。

　NMRはユーロポルとオランダ国家警察、Intel Security、Kaspersky Labが創設メンバーとなって2016年7月に設立。Webサイトを通じてランサムウェアに関する情報や、被害者のデータにかけられた暗号を解除する無料複合ツールなどを提供している。

　今回は新たにセキュリティ企業のBitdefender、Check Point Software Technologies、Emsisoft、Trend Microの4社が「Associate Partner」として参加し、復号ツール32本を提供した。これまでNMRでは8本の無料ツールを提供して約6000人が身代金を払わずにデータを取り戻すことに成功したとしており、復号ツールが一挙に増えたことで被害者救済が進む見通しだ。

　さらに、オーストリアやクロアチア、オランダ、シンガポールなどの国家警察のほか、各国のサイバー犯罪対策機関やセキュリティ企業が「Supporting Partner」として加入し、NMRの参加国は22カ国に増加。各国が連携してランサムウェアに対する対策を強化する。

一部の「Windows 10」でDHCPによるIPアドレス取得ができなくなる不具合

一部のWindows 10でルーターからIPアドレスを取得できず、ネットに接続できなくなるという問題が発生しているそうだ。Microsoftは12月13日、この問題に対応するアップデート「KB3206632」をリリースしている（ZDNet Japan）。

この問題は、Connected Devices Platform Service（CDPSvc）に問題があり、特定の状況下でIPアドレスの取得ができなくなるというもの。ZDNetの記事によると、9日に配信されたアップデートによって問題が発生したという声が出ているようだ。

# ネットにつながらないのにどうやってアップデートが自動的にインストールされるのか

 

今がベストなタイミング、AIは電気と同じような存在になる

　我々の頭脳、知性に関する考え方は、いずれコペルニクス的な転回を迎えることになるでしょう。人間は汎用的で普遍的な知能を持ち、他のどんな種より有能と考えがちです。AIを作れたとしても、限られた機能しか持たないと思うかもしれません。しかし、いろいろな種類の知能を作ればどうなるでしょう。人間と協働できるAIを作り、多くの思考能力を開発していけば、ビジネスやサイエンスなど、人間の知能だけでは十分に解決できない非常に複雑な課題も解くことができるのではないでしょうか。

　そのとき、人間の思考の仕方はその中心ではなく、片鱗にあるのではないかと気づくかもしれません。我々に固有の組み合わせの思考は普遍的なものでなく、狭く具体的な領域に限られたものなのかもしれない。そういう価値観の転換がコペルニクス的転回、革命ということです。

　これらのAIは「異質の知性（Alien Intelligence）」ともいえるでしょう。人間と違う考えをするものとの共存が富やイノベーション、ニューエコノミーを作るうえで推進力となります。いろいろな形で違う形、違う思考法の能力を開発していくことが重要です。となると、AIはAA（Artificial Alien 人工異星人）と呼べるかもしれませんが。

AIのコモディティ化で第二の産業革命が進行
　さて、異質の思考の他にもう１つ、AIがもたらす恩恵があります。それは第二の産業革命を起こしてくれるということです。

　第一の産業革命は18世紀後半、人間が人工的な動力を作ったことをきっかけに起こりました。エネルギー源が人力、動物の力、自然の力から、蒸気、電気、化石燃料などに変わったのです。重要なのは、その人工動力を電力として社会に普及させたことです。

　電力がコモディティになることで農場のポンプは手動式から電気式に代わり、農業生産性は飛躍的に高まりました。何百万倍にも増幅されたパワーが社会に広まって、高層ビル、高速道路、高速鉄道、飛行場、電気製品などを生み出し、我々の生活を一変させました。人工動力がイノベーションの源泉となったのです。

　今直面しているのが第二の産業革命です。第一の産業革命と同じように、今あるものの性能が全て100万倍になると考えてください。それを可能にするのはAIです。例えば自動運転車は、250馬力の自動車に250の頭脳を付けるようなものです。

　AIは電気と同じような存在になるでしょう。私たちが自分で作るのではなく、クラウドから必要なだけ買って好きなものに加えるのです。これがこれからの起業の方程式です。いまある何かしらのもの、すなわちXにAIを加えるのです。靴にAIを加える。椅子にAIを加える。タクシーにAIを加えたら？——Uberになります。

　第二の産業革命とはそういうことです。社会のいたるところで、さまざまな形で、無数の取り組みがなされます。それがどれほどパワフルな効果を生むか、第一次産業革命に比べてどれほど大きなインパクトをもたらすか想像できるでしょう。

人間とAIは「ケンタウルス」となって密に協働していく
　すでにAIは買うことができます。グーグルにログオンするとAIが質問に答えてくれるのです。例えばテニスをしている人物の写真をアップロードして、「服の色は何色か」「ボールの色は何色か」などと聞くと正しい答えをくれるでしょう。６セントで100の質問をすることができます。

　AIに体をつけるとロボットとなります。スマートで賢い産業用ロボットは人間を感知して傷つけないようにしますし、さらには仕事のやり方を見せれば真似する能力もあります。試行錯誤しながら、正しく実行できるまで自律的に学習するのです。こういうスマートなロボットなら人間と協力できますし、素人でもプログラミングできます。これが重要な点です。人と一緒に作業できる、より人間的なロボットが登場しつつあるということです。

　我々の仕事の定義は変わるでしょう。仕事の多くがロボットに奪われると同時に、我々の知らない新しい仕事ができるのです。祖父母の時代になかった仕事がテクノロジーによって生み出されたのと同じように、ロボットは我々に新たな仕事を作ってくれます。ロボットが得意とするのは効率や生産性が問われる仕事で、人間はイノベーションやクリエイティビティが重要な仕事を受け持つことになるでしょう。新しいものを作り出すにはたくさんの失敗が必要で、その意味でイノベーションは非効率な作業です。芸術、アートもそうですし、人間関係もそう。人間の体験もしかり。ロボットが進化すると、こういう分野で働く人の価値が高まります。

人間とAIが一体となって協働する状態は半身半馬のケンタウルスにたとえることができる。
　チェスの世界チャンピオンだったガルリ・カスパロフはIBMのAI「ディープ・ブルー」に敗れたとき、自分がAIと同じようにビッグデータにアクセスして、取りうる手を全てリアルタイムでシミュレーションできていれば勝てたと考えました。そしてAIと人間が協力して戦う新しいチェスリーグを始めました。彼はそのチームを「ケンタウルス」と呼びました。AIと人間の融合を、神話上の半身半馬の生きものになぞらえたわけです。今日、世界でベストのチェスのプレイヤーはAIでもなければ人間でもない、このケンタウルスです。

　これは今後のモデルになるでしょう。ベストな医学の診断者は「人間の医師＋AI」なのです。これは人間とロボットが隣り合わせで作業するということです。AIと人間の知性が補完的な関係にあるからこそできることであり、一緒になれば双方がより賢くなるということです。仕事の報酬も、AIとどのくらいうまく協力できるかによって決まることになるでしょう。

AIとの相互作用が高まり、現実と仮想空間が融合していく
　今後の不可避な流れについて、２番目に重要なトレンドとして挙げられるのが「INTERACTING」、相互作用が高まるということです。

　いろいろな形でいろいろな装置とのインタラクションが要求されるようになります。『マイノリティ・リポート』や『アイアンマン』などの近未来を描いた映画では、指先だけでなく全身でコンピュータとコミュニケーションするさまが表現されています。

　また、我々がコンピュータの中に入り込むバーチャルリアリティ（VR）もインタラクションの一例です。発明当初は費用がかかることが課題でしたが、最近はスマートフォンを使うことでコストが下がってきました。

　VRにはタイプがいくつかあって、１つはゴーグルで体験するものです。これは自分があたかも別の場所にいるように感じることができます。実際は部屋の中にいるのに、まるで崖っぷちにいるようで、恐怖で体が震えるほどです。

　メガネで体験するタイプもあります。メガネをかけて周りを見渡すと、その空間の中に実際にはないものが浮かび上がるのです。これはMR（Mixed Reality）、複合現実と呼ばれます。現実世界と仮想世界を混ぜるからです。技術的にはまだおぼつかない段階ですが、急速に進歩していくと見込まれます。ゴーグルは使いませんが、「ポケモンGO」はデジタルと物理的な世界を結びつけた好例といえるでしょう。

　VRにはもう１つ、安価なムービータイプがあります。頭の向きを変えることで回転が感じられるものもあり、これは技術的難易度が低めですが、VRの醍醐味を味わうには部屋を自由に歩いて好きなものを見られるようなものがいいですね。実現の敷居は高いですが、目指す方向はこちらでしょう。

VRが今後の社交の場の中心になる
　VRは新たなインターネットです。ニュースやドキュメント、写真、動画といった「情報」から、実際に感じることができる「経験」へのシフトです。経験を買う、あるいはダウンロードする、共有するといったさまざまな受け取り方が考えられます。

　退屈な時にスリリングな経験を得るだけでなく、病気のとき誰かがそばにいてくれているような安心感や、商品のデモンストレーションを目の前で見られるような利便性もそこにはある。つまり、「経験の経済」「経験のインターネット」が到来するということです。そこでは50％以上が視覚情報以外に頼っています。聴覚、触覚情報が今後重視されるということです。

　とはいえ、バーチャルな世界における最も重要で最もワクワクする要素は人と遭遇することです。マイクロソフトがMRによるデモンストレーションを行ったときは、そこにいない人を3Dで浮かび上がらせて見せました。髪やまつげ、服の生地の風合いまで見ることができて、非常にリアルで存在感がありました。

　仕事で電話会議をするときも、こうした新しいテクノロジーを使えば驚くべき結果が生まれるのではないでしょうか。スクリーンの向こうにいるのが漫画のキャラクターのようなアバターだとしても、表情やしぐさは本人のものをそっくりそのまま反映しています。アイコンタクトまでしてくれるのです。見つめる要素が合わさると、見ている対象がアバターでもその人が本当にそこにいると思います。VRはソーシャルメディアの中でソーシャルになる、VRが最も活発な社交の場になるということです。

監視が強化される社会では情報の非対称化が起こる
　不可避の流れの重要な要素の３つ目は「TRACKING」、追跡です。我々の生活は我々が思っている以上に監視され、モニタリングされ、そしてデジタル化されています。将来はさらにこれが高まっていくでしょう。

　先ほど話したバーチャルな環境は、追跡あるいは監視される対象の最たるものといえます。VRを実現するためには体や表情の動きをデータでとらえなければいけません。データ化されたものは追跡しやすいのです。VRの世界は最も監視度の高い世界となることは認識しておくべきです。

　そして我々もまた自分自身を追跡しています。私は「Quantified Self」（定量化された自己）* というムーブメントを2007年に起こしました。脳波、睡眠の内容、気分、皮膚の反応など、さまざまな項目で自分たちの体の変化を継続的に監視して、個別化医療に役立てるのです。最近はアップルウォッチでも同じようなことができるようになりました。

　自分が自分を追跡するばかりではありません。政府や企業、そして友人など、みんながみんなを追跡することになるでしょう。すでにフェイスブックは手軽な追跡手段となっています。こうした追跡があふれていくのは怖いことです。彼らは私について知っているかもしれないけれど、私は彼らを知らない。どういった情報を追跡されているか分からない。それが正確な情報かも分からない。不正確だったとしても訂正できない。その情報の利用に関して彼らに説明責任を持たせることができない。つまり情報の非対称化が起こるわけです。非常に不快ではあるものの、この流れは避けられません。

　ではどういうトラッキングがいいのか。私が提案するのは「Co-veillance」、相互監視です。情報を対称にするのです。誰かが追跡してきたならば自分もその人を追跡できるという双方向性があるべきです。技術的には可能ですが、実現するには我々が声を上げていかなければなりません。

　もう１つこれに関連していうならば、なぜ我々が互いをトラッキングしているかというと、個別化された待遇をしてほしいからです。プライバシー重視とオープン志向は相反しつつ連動するもので、「個別化医療を受けたい」「政府から個別化された処遇を受けたい」「友人から特別視されたい」といった場合は、まず自分から情報を公開して透明性を高めなければなりませんし、プライバシーがほしい場合は"その他大勢"として一般的な扱いを受けざるを得ません。若い世代は個別化待遇される方を選んでいます。だからSNSなどで自らの情報をさらけ出すのです。虚栄心がプライバシーに打ち勝つということなのでしょうが、両軸の間をバランスする選択肢もあってしかるべきだと思います。

今はまだ変化の初めに過ぎない
　ここでは３つのトレンドについて話しましたが、テクノロジーがもたらす不可避の変化は多方面に渡ります。

　中には信じがたい方向性もあるでしょう。しかし、30年前にタイムマシンで戻って、当時の人々に今の状況を説明したとしたらどうでしょう？　スパコンが膨大で複雑な計算を瞬時にやってのけ、リアルタイムで株価が報告され、ウィキペディアのような世界中の人々が作る辞書が無償で利用できる。そんな現実はにわかには受け入れてもらえないはずです。

　しかし、これらは今すべて現実です。ありえないと思っていることも実現するのがコンピュータの世界なのです。我々も柔軟性をもって、実現不可能と思える未来であろうと信じなければなりません。

　今は変化のまだ初めに過ぎません。今ほど何か作るのに適した時期はないのです。過去を振り返ってみると、いろいろなものを作るツールが最も安く、アクセスしやすく、マーケティングにも最適なタイミングです。

　未来を見据えても、今がことを起こすベストのタイミングです。AIやVRの世界が拡大していくことを考えると、今ある機会はかつてなく大きいのです。「X＋AI」でいいのです。30年後は多くのことがなされてしまっていますから、今は何でもXを取ってAIに加えてやればいい。誰でもAIやVRのエキスパートになれる時なんです。

　20年先から振り返るならば、「20年前はチャンスが山のようにあった、この素晴らしい時期はもう二度と再現されることはない」と思えるでしょう。最もパワフルで、これから20年支配的な存在となる製品は存在するどころか、まだ発明さえされていないのです。それは誰かが発明しなければなりません。何をするにも決して遅過ぎることはないのです。

JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips

JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。

debuggerステートメント

大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメントは、ECMAScript第1版から標準化されているため、かなり前から存在していることになります。

基本的にはブレークポイントを追加するという単純な方法です。ループ文を使った要素リストを実行する場合を見てみましょう。

ループ内にdebuggerステートメントを追加すると、処理を繰り返すたびにブレークポイントで止まります。

コードを実行すると、ブレークポイントを追加した場所でトリガが発生します。debuggerハンドラがない場合、例えばデベロッパーツールが搭載されていないほとんどのブラウザでは、このステートメントは効力を発揮しません。

デベロッパーツール側では手動でブレークポイントを配置したものと認識されます。

当然、本番用のコードに残しておきたいものではありません。ただ、これは開発中においては非常に便利な機能です。私にとっては人生が変わるほどの、特にコールバックが頻繁に行われるベンダーのJavaScriptコードを扱う際には役立つ機能です。

ルークよ、コンソールを使え！　

開発者のほとんどがデバッグの目的でconsole.logを使用します。しかしconsole.warn、console.error、console.infoについてはご存知でしたか？　

いずれも以下のようなC言語で使われるような出力フォーマットをサポートします。

1.       console.log("Hello %s", "Brian");

JavaScriptにはロギングフレームワークも多くあります。適切なロギングは、ほとんどのプログラミング言語において重要であり、JavaScriptにおいても例外ではありません。全てのロギング機能が標準化されているわけではなく、フォールバックが必要となるブラウザもあることに注意してください。こちらに現実問題としてのロギングに関する詳細記事がありますので、参考までにご覧ください。

console.table()を使ったJavaScriptオブジェクトの概要

私たちは、さまざまなサービスからデータをロードしますが、特にそのデータがオブジェクトのリストであるような場合は、コンソール上でより見やすく表示できたらと思います。例えば、openbeerdatabase.comからビールのリストをロードする場合を見てみます（この素晴らしいデータは実在します）。 http://openbeerdatabase.com/documentation/beers-getにあるHTTP GET/beersをコールして、オブジェクトのリストを受け取ります。リストを受け取った後は、console.logを使って出力するだけです。

コンソール内で結果のリストをうまく閲覧するのは困難です。データが示すものを明確に把握しづらいのです。データ全体を見るのも面倒です。JavaScriptオブジェクトであるどんな大きさのリストについても同じことが言えます。

console.logをconsole.tableに置き換えて再度コールすると以下の通りに出力されます。

ご覧の通り、結果はテーブルで出力され、オブジェクトの属性でソートすることができます。一覧するのも楽になります。例えば、次の方法で2つの配列を、視覚化して簡単に比較することができます。

1.       console.table([[1,2,3], [2,3,4]]);

さらに多くの配列が含まれている場合でも、この方法を使えば見やすい結果が出力されます。

コールトレースを取得する

コールトレース、つまり"誰が私の関数を呼び出しているか"を知りたい場合があります。コールとレースは私たちがなにか失敗した時に見られるものですが、console.traceを使用すれば、失敗した時だけでなく、成功した時にもコールトレースを確認することができます。

console.traceは非標準の関数であり、本番のコードに残すものではないことに注意してください。そうは言っても、主要なデスクトップブラウザではサポートされています。
非同期コールを実行するTraceConsole.traceは通常の関数呼び出しでは正常に機能します。ほとんどのデベロッパーツールでは、ブレークポイントで停止したときに同様のコールトレースを取得します。関数呼び出しが非同期（コールバック）の場合は、クロージャ（コールバック関数）のスコープが限られるため、この情報は取得できません。幸い、Chromeのデベロッパーツールの新バージョンにはAsyncのチェックボックスがあります。関数呼び出しの情報は、以前は次のように一部しか確認できませんでしたが…

新バージョンでは、呼び出し元とコールバック全てを含むコールトレースになりました。

個人的な意見としては、今日のような非同期処理が溢れた世界の中では、最も重要な機能だと言えます。非同期コールトレースがどのように機能するかについてはこちらのHTML5rocksの記事をお薦めします。

誰がオブジェクトを変更するか？: Objects.observe + console.trace

オブジェクトのプロパティの一部が変更されることがありますが、私たちにはその原因が分かりません。このような場合Object.observeが役に立ちます。personオブジェクトに対する全ての変更を確認する場合を見てみましょう。

console.traceと併用すると、コールトレースも確認できるのです。素晴らしいですよね？　

いや、それほどでもありません。これを書いている今現在、Chromeのみがこの機能をサポートしており、非標準機能です。幸いEMCAScript第7版の一部として提供はされています。Geckoベースのブラウザには、よく似た実装としてobject.watchがあります。ここでもまた、デバッグに関して言えば、取得できるものは何でも有用であると考えてください。Objects.observeの第一の用途はデバッグではありませんが、素晴らしい効用があるのです。

誰がDOMやHTML要素を変更するのか。つまりコードをめちゃくちゃにするのは誰だ？　

複雑なアプリケーションでは、HTML要素がどのように変更、移動、追加され、属性が修正されたのか分からなくなってしてしまうことがあります。そうした変更を検知する方法の1つに、今はもう非推奨となったMutation Eventリスナを使う方法があります。変更を検知するAPIは理想からほど遠い上に、他にもいろいろと欠陥があります。新しいバージョンのブラウザにはMutationObserverと呼ばれるオブジェクトがあり、これによってDOM要素の監視が可能になります。

ドキュメント全体で発生した全ての変更をリストアップしたい場合を考えてみましょう。この場合、ドキュメントは選択されたどのDOM要素にも当てはまります。

Chromeでは、プログラミング以外の解決策も使えます。DOM Breakpointsと呼ばれるもので、バックグラウンドでは依然としてMutation Eventを使っています。

サーバ側でクライアントのエラーログを取る

実に簡単なのですが、Windowオブジェクトにonerrorイベントハンドラを追加するだけでクライアント側の処理は完了です。ハンドラは、サーバ上にエラー情報を蓄積するRESTのエンドポイントに対してAjaxリクエストを行うことができます。IE9より前のバージョンにはstring.trim()が無いので、クライアントがIE8を使っている場合は、この方法ではいろいろと問題が多いと思う方もいるでしょう。string.trimはそれほど重要ではないと思います。

いずれにせよ、サーバ側でクライアントのエラーログを取るこの最も基本的な方法は以下のようになります。

もちろん、これは最も基本的な解決策です。もっと良い解決策がhttp://www.stacktracejs.com/やhttp://jsnlog.com/といったサイトにたくさんあります。Mozilla hacksには豊富な手法が載っています。Hacker Newsという素晴らしいサイトでも、このテーマでディスカッションが行われています。いずれにせよ、この基本的な解決策は、スタートとしては良いと言えますね。

Googleや他の分析ツールを使ってデータを収集する

バックエンドのコーディングをする時間も無いほど忙しいというあなた。それなら、Google Analyticsにデータを収集してみてはどうですか？　

確かにこれならできますね。ただしこれは、とりあえずの手段です。徹底的に行いたければ、例えば他にもhttp://usersnap.comなど、もっと優れた多くの製品から選ぶことができます。でも、お手軽な方法だって何も情報が無いよりはマシです。何も情報が無い人がほとんどなのですから。

JavaScriptは"本物の"コードではないのか？　

私はこのことについて長年考えてきましたが、数年前、JavaScriptへのアプローチが全く間違っていることに気づきました。JavaScript に対しても、JavaやC#やRubyなどと同様に真剣に向き合うべきなのです。

病気になることを避けられないように、JavaScriptを学ぶことも避けられません。

他のプログラミング言語と同じように、JavaScript を使う人は本やプログラミングの練習、複数のプロジェクトでの経験が必要です。そしてJavaScript自体にも、コーディングスタイルガイドやフレームワークのテストや、コード分析などが必要です。基本的に"本物のコード"に向き合う際に必要なもの全てが必要なのです。統合的にサポートしてくれるYeomanやJHipsterといった完全な解決策もあります。

こうしたことを何もしないでいると、あなたは必ずJavaScriptを大嫌いになってしまうでしょう。JavaScriptは周り中にあふれているというのに残念なことです。ベストプラクティスに従えば、コードのデバッグに時間をかけることも、手のこんだコツに頼ることもなくなるでしょう。あなたがチャック・ノリスでなければ、ですが。

さらにこちらのサイトも参考にしてください

https://github.com/DeveloperToolsWG/console-object/blob/master/api.md
https://developer.chrome.com/devtools#debugging-JavaScript
https://developer.mozilla.org/en-US/docs/Tools/Debugger
http://msdn.microsoft.com/en-us/library/dd565625%28v=vs.85%29.aspx
https://developer.mozilla.org/en-US/docs/Web/JavaScript
www.HTML5rocks.com

 

Google Chromeのキャッシュの保存先を変更する

　Google Chromeには、次回のアクセス時にWebページを読み込む時間を短くするため、Webページの一部を保存するキャッシュが用意されている。デフォルトでは、以下のフォルダがキャッシュとして利用される。

%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\Cache
※ %USERPROFILE%は環境変数。一般的には、C:\Users\＜ユーザー名＞

Google Chromeのデフォルトのキャッシュ保存先

 
Google Chromeのデフォルトのキャッシュ保存先フォルダ
デフォルトでは、［%USERPROFILE%］フォルダの下にキャッシュの保存先フォルダ（（1））が作成されている。キャッシュフォルダには、このようにキャッシュファイル（（2））が作成される。残念ながらファイルを開いただけでは、キャッシュされた画像などを取り出すことはできない。

　このキャッシュの保存先をSSDやRAMディスクなどの高速なストレージに変更すれば、Google Chromeの表示を高速化できる。またC:ドライブの容量が小さいような場合には、別のドライブを指定することでキャッシュがディスク容量を圧迫するのを防ぐことも可能だ。

　保存先を変更するには、Google Chromeを起動する際に「--disk-cache-dir="＜保存先＞"」オプションを付ければよい。Google Chromeのショートカットを作成し、リンク先にオプションを指定しておくのがよいだろう。その手順は以下の通りだ。

 
Google Chromeのキャッシュの保存先を変更する手順
Google Chromeのショートカットにオプションを付けることで、キャッシュの保存先を変更できる。
　 （1）Google Chromeのショートカットを作成する。
　 （2）右クリックメニューから［プロパティ］を選択する。
　 （3）［Google Chromeのプロパティ］ダイアログを開く。
　 （4）［ショートカット］タブを開く。
　 （5）「リンク先」を編集し、「--disk-cache-dir="＜保存先＞"」オプションを追加する。ここでは、保存先を［F:\RAMDisk\ChromeCache］フォルダにするとしている。

▼

 
変更したキャッシュの保存先フォルダ
オプション指定した［F:\RAMDisk\ChromeCache］フォルダ（（1））の下に［\Profile 1\Cache］フォルダ（（2））が作成され、このようにキャッシュ（（3））が作られる。

　なお事前にGoogle Chromeのバックグランド起動を終了した上で、デフォルトのキャッシュの保存先を削除またはリネームしておかないとキャッシュの保存先が変更できないので注意したい。

 

How to use Chrome DevTools like a Pro

As the name implies Chrome Developer Tools is a tool that allows web developers to interfere and manipulate applications via the browser. With this tool you can:

·         Manage interface problems

·         Debug Javascript Code with using breakpoints

·         Optimize your code

To open DevTools, you can right-click anywhere on the page and select inspect element or you can choose the "tools > developer tools" option from the top right menu.

1. Quick-edit a HTML Element

 

To try it:

·         Select the "Elements" panel.

·         Choose a DOM element within the Elements Panel editor.

·         Double click on the opening tag and edit it.

When you are finished, the closing tag is automatically updated.

2. Go to a Line Number

 

You can use this feature in the ":linenumber:columnnumber" format from the Sources panel.

To try it:

·         CMD + O

3. Expand All Child Nodes

 

To try it:

·         Select the "Elements" panel.

·         Choose a DOM element and Alt + Click the arrow within the Elements Panel editor to expand all child nodes.

4. Change DevTools Positions

 

To try it:

·         CMD + Shift + D

Dock options:

·         Undock DevTools

·         Dock to bottom

·         Dock to right

5. DOM Search by CSS Selectors

 

To try it:

·         CMD + F / CTRL + F and enter your class name or id name base search selector.

6. Material and Custom Color Palettes

 

You can click on the little switcher icon in front of hex code. you can choose from the following:

1.     Page Colors: This palette is auto generated from your web site (in your CSS).

2.   Material Design: This palette automatically generates primary colors from The Material Design palette.

7. Multiple Cursor

 

Move the cursor with the CMD + Click to add multiple cursors. You can also undo your last selection with CMD + U.

8. Copy Image as Data URI

 

To try it:

·         Select "Network" panel.

·         Choose your image within the Resources Panel

·         Right click and copy it as a Data URI (base 64 encoded)

9. Triggering of Pseudo Classes

 

To try it:

·         Right click in the left panel and select "Force Element State".

·         Alternatively, the toggle element state icon can be clicked in the right panel.

10. Column Selection by Dragging

 

To try it:

·         Select "Sources" panel.

·         Choose your file within the Sources Panel editor.

·         Hold Alt and dragging the mouse.

11. Get the current element with "$0"

 

To try it:

·         Select "Elements" panel.

·         Choose a DOM element within the Elements Panel editor.

·         Click Console and write $0 to access it.

12. Reveal in Elements

 

To try it, if you choose an a DOM node:

·         Right click on it within the Console panel.

·         Select "Reveal in Elements Panel".

13. View Event Listeners

 

To try it:

·         Select the "Elements" panel.

·         Navigate to the Event Listeners and choose an event.

·         You can also view source by right click and choose "Show Function Definition" in context menu.

14. Easing Previews

 

To try it:

·         Click the easing icon (purple icon) and see a preview.

·         You can view it via choose other previews or you can set new easing format.

15. Media Query

 

To try this:

·         In Device Mode, click the icon ('bars') in the upper left corner of the page.

·         Click the breakpoint ('blue', 'green', 'orange') bars and change.

If you right click on a bar, you can reveal its position within the source code.

16. Network Filmstrip

 

"Film Strip" shows page rendering screenshots and times from start to finish. You can click a screenshot and view in the timeline-style view.

To try this:

·         Select "Network" panel.

·         Click "Camera Icon".

·         Reload page.

17. Copy Response

 

You can copy the response/request headers of a network resource.

To try it:

·         Select "Network" panel.

·         Choose your file within the Resources Panel.

·         Right click and click "Copy Response".

18. Run Predefined Snippets

 

To try it:

·         In the left sidebar: Sources > Snippets

·         Right click > Select New

·         Enter a file name and write your snippets in the right panel

·         Right click on the snippet and select Run

19. Device Emulation Sensors

 

You can also simulate mobile devices sensors like:

·         Touch Screen

·         Geolocation Coordinates

·         Accelerometer

To try this:

·         Select "Elements" panel.

·         Click "Esc" and choose "Emulation > Sensors"

20. Workspaces

 

To try this:

·         Select "Sources" panel.

·         Right click within sources pane and choose "Add Folder to Workspace"

·         Choose your file and right click > Map to Network Resources

·         Change your file code and view it.

References:

·         https://developers.google.com/web/tools/chrome-devtools/

·         https://umaar.com/dev-tips/