コンテンツ
- 01.たまり場の時間です
- 02. $（ 'light'）。fadeIn（）;
- 03.あなたの手はブラウザのために作られています
- 04.ゲームパッドで制御される3Dゲーム
- 05.iPadでFlashを実行する
- 06.スマートフォン用のアプリを書く
- 07.ブラウザでRubyとPythonを実行する
- 08.OSに依存しないデスクトッププログラムの作成
- 09.Webサーバーの実行
- 10.ウェブスクレイピングとスクリーンショット
- 待つ！もっとあります...
JavaScriptは、1995年の誕生以来、長い道のりを歩んできました。誤解、誤用、無知に満ちた、確かに難しい方法です。しかし、過去5年間、JavaScriptがますます注目を集めているため、時代は変わりました。より多くの注意を払って、より多くの開発者が実際にJavaScriptを使用し、さまざまな目的で使用し、その美しさを楽しんでいます。あなたが私に尋ねれば、古典的な「醜いアヒルの子」の話。
次の記事では、JavaScriptの一般的な「ブラウザ内」のユースケースとは異なる10のユースケースを紹介します。
01.たまり場の時間です
Facetimeのようなビデオコミュニケーションの80年代のビジョンを覚えていますか？
ほぼすべての場所で利用可能なブロードバンドインターネットとSkypeと呼ばれる小さなソフトウェアの多用により、これが主流になるまでに20年しかかかりませんでした。
AdobeのFlashの機能とGoogleのソーシャルネットワーク構築の試みにより、私たちはすでにブラウザでのビデオ通信の機能を備えています。 Flashなどのサードパーティのプラグインを使用せずにこれらの機能を使用できるのは素晴らしいことではないでしょうか。
幸いなことに、ブラウザベンダーは同じことを考え、「getUserMedia」APIをソフトウェアに実装しました。これは、ブラウザから直接カメラやマイクなどのデバイスにアクセスするための最初のステップでした。
このようなアプリケーションの背後にあるサーバーとしてNode.jsを使用すると、ビデオ信号を1つ以上のクライアントに無線で転送するのが驚くほど簡単になります。残念ながら、これを書いている時点では、ChromeとOperaだけがAPIをサポートしていますが、他のものはすぐに追いつくでしょう。
双方向通信のためのよりクリーンなアプローチは、現時点ではWebRTCと呼ばれるChromeのみのものです。 WebRTCにより、クライアントはピアツーピア通信チャネルを開くことができ、クライアントとクライアントを直接接続できます。
楽しみのために、121バイトで行われたSindreSorhusのフォトブースの実装をチェックしてください！
var video = document.getElementsByTagName（ ’video’）[0]、
navigator.getUserMedia（ ’video’、successCallback、errorCallback）;
関数successCallback（stream）{
video.src =ストリーム;
}
関数errorCallback（error）{
console.log（エラー）;
}
02. $（ 'light'）。fadeIn（）;
Arduinoマイクロコントローラープラットフォームは、「すぐに使える」JavaScriptユースケースのグレードAの例です。 Arduinoプラットフォームに慣れていない方のために、そのWebサイトからの非常に有名な引用を以下に示します。
「Arduinoは、柔軟で使いやすいハードウェアとソフトウェアに基づくオープンソースの電子機器プロトタイピングプラットフォームです。アーティスト、デザイナー、愛好家、そしてインタラクティブなオブジェクトや環境の作成に関心のある人を対象としています。」
Arduino自体はCで書かれたコードのみをサポートしますが、それでも大したことではありません。数行のC（他の人があなたのためにこの作業を行ったことを除いて）で、Arduinoはシリアルポートプロトコルを介してUSBポートを介してコマンドを受信できます。
しかし、JavaScriptを介してシリアルポートにアクセスするにはどうすればよいでしょうか。明らかにブラウザからではありません。
Node.jsが助けになります！
コミュニティの支持者であるChrisWilliamsの努力により、古いSPプロトコルを介してデータを送信できるノードシリアルポートライブラリがあります。これは最初のブレークスルーであり、他の人々がArduinoの機能に対してより抽象的なアプローチを考案したライブラリに基づいています。たとえば、node-arduinoおよびduinoライブラリ。
JS駆動のArduinoプログラミングのブロックの周りで最もホットでクールなライブラリは、今ではjonny-fiveです。 Bocoupのブログで、Arduinoプラットフォームとたくさんのプラグインを使って行ったいくつかのホットなことをチェックしてください。また、Nicolai OnkenとJörnZaeffererのJSConfビデオでは、わずかなコードで今日可能なことを紹介しているかもしれません。
03.あなたの手はブラウザのために作られています
マイノリティレポートの将来のビジョン（醜い車ではなく、手でコンピューターを制御するビジョン）は毎日近づいています。この方向への大きな一歩は、Microsoftのコントローラーを使わない試みであるKinectでした。あなたが思うかもしれない素晴らしいゲームプレイですが、これはJavaScriptと何の関係がありますか？！
MicrosoftのKinectSDKリリースでは、多くの人々がKinectのブラウザ使用の橋を渡りました。まず第一に、完全に機能するkinect.jsライブラリを構築したChildNodesの人たちです。これにより、ブラウザでMicrosoftのKinectを使用できるようになります。
彼らのデモやビデオをチェックすることを強くお勧めします。ただし、kinect.jsライブラリの主な欠点の1つは、クライアントの背面でWebSocketサーバープログラムを実行する必要があることです（実際には、Kinect-> C＃-> JSグルーです）。
MITで有名な数人の学生が、この壁を壊しなさいというDepthJSと呼ばれる解決策に取り組んでいます。
どのような形式でもKinectベースの使用に最適化されていないサイトでも、ChromeとSafariでKinectを使用できるようにするブラウザ内プラグイン。 DepthJSは現在開発の初期段階にありますが、追跡する価値は間違いありません。
04.ゲームパッドで制御される3Dゲーム
最近、Flash以外のブラウザゲームをプレイしようとしたことがありますか？グラフィック機能は、特にQuakeのようなゲームクローンを見ると驚くべきものです。
しかし、このようなものをプレイするときは、常にキーボードと（ほとんど）不格好なマウスに縛られています。これは大きな欠点であり、特にアクションゲームの場合、ブラウザから実際に遠ざけられます。
XboxコントローラーをPCに接続して、お気に入りのブラウザーゲームをプレイし始めることができたら、すばらしいと思いませんか？これはもはや将来のビジョンではありません。ゲームパッドAPIに挨拶してください。
机の周りにゲームパッドがある場合は、今すぐプラグを差し込んで、すでにゲームパッドAPIを使用しているゲームを楽しんでください。入力コントロールのプログラミングも簡単です。このコードスニペットを確認するか、自分で実行してください。
div id = "gamepads"> / div>
スクリプト>
関数gamepadConnected（event）{
var gamepads = document.getElementById（ "gamepads"）、
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad Connected（id =" + gamepadId + "）";
}
window.addEventListener（ "MozGamepadConnected"、gamepadConnected、false）;
/ script>
ブラウザの3D機能について詳しく知りたい場合は、Three.jsとその上に構築されたJensArpsのオープンソース3DシミュレータエンジンAscentを確認してください。マークハミルは気をつけてください、私たちは別のウィングコマンダーの続編のためにあなたを必要とするかもしれません！
05.iPadでFlashを実行する
オープンスタンダードの愛好家でありAppleのファンである私は、iPadとiPodにFlashを搭載していないAppleに本当に感謝したいと思います。これにより、HTML5、CSS3、JavaScriptなどのオープンテクノロジーを採用する動きが始まりました。
代理店の従業員として、これはお客様にとって本当に悪い状況であると言わざるを得ません。
彼らのほとんどは、Flash経由の古いIE7またはIE8、最新のブラウザ、およびHTML5経由のiDeviceでインタラクティブなコンテンツを実行するために、立ち上げた単純な広告またはキャンペーンに2回支払う必要があります。
古いブラウザの機能をポリフィルすることには、主にパフォーマンスという名前の境界があります。では、これらのフラッシュレスiDeviceでFlashを実行する機能はありませんか？
もちろん1つあり、もちろんJavaScriptに組み込まれています。
歴史の一部：2010年、トビアスシュナイダーはゴードンと呼ばれる小さな図書館をリリースしました
これにより、SWFファイルをブラウザで直接実行できるようになりました。これは、Flashバージョン2までの機能のみを使用する広告などの小さなFlashファイルでは非常にうまく機能しましたが、より高いレベルの機能はまったく含まれていませんでした。
TobiasがueberJSの会社UXEBUに加わったとき、彼らは新しいアイデアを思いつきました。
そして、Bikeshedが誕生しました。 Bikeshed自体は一種のJavaScriptアニメーションフレームワークですが、コンパイラーにしたいすべてのものへのJavaScript to Flashでもあります（アダプターベースなので、標準的な動作はFlashをJavaScriptにコンパイルしますが、必要なものにアダプターを記述できます） 。 Flash10およびActionScript3と互換性があります。コンパイラ以外の多くの機能について詳しくは、Webページをご覧ください。
06.スマートフォン用のアプリを書く
携帯電話環境向けのネイティブアプリケーションを作成するのは困難な道のりです。それはあなたがどのプラットフォームをサポートしたいかという決定から始まります。アプリケーションをiPhoneおよびiPad、Android搭載モバイルデバイス、Windows Mobile、Blackberryデバイス、webOSベースのプラットフォームなどで実行する必要があります。
このプラットフォームにはそれぞれ独自のAPIがあり、ほとんどの場合、異なるプログラミング言語を使用します。
ブラウザ戦争を生き延びたなら、これは参加するのがはるかに難しい戦いだと言いましょう。開発者がこれらすべてのプラットフォーム用のアプリケーションを時間と予算内で構築することはほぼ不可能です。
じゃあ何をすればいいの？より多くの開発者を雇いますか？アプリにもっと課金しますか？または、コードベースがすべてのデバイスで実行されるようにするためのより良いアプローチを見つけますか？あなたのほとんどとして、私は最後のアプローチを好むでしょう。
しかし、これらのアプリは何で構築する必要がありますか？これらすべてのプラットフォームに共通するものは何ですか？あなたは答えを知っているかもしれません、それはウェブブラウザであり、したがってJavaScriptエンジンです。
これが、以前の名前PhoneGapでよく知られているApacheCordovaの背後にある考え方です。
Cordovaは、各モバイル環境のAPIを抽象化し、それらすべてを制御するためのきちんとしたJavaScriptAPIを公開するJavaScriptフレームワークです。これにより、単一のコードベースを維持し、それを構築してさまざまなモバイルデバイスに展開できます。
コルドバを使用して、一度作成すればどこでも実行できるキックアスモバイルアプリを作成する方法については、こちらのリソースをご覧ください。
07.ブラウザでRubyとPythonを実行する
有名なFirefoxブラウザの背後にある会社であるMozillaは、確かに多くのオタクを採用しています。そのうちの1人は、Mozilla ResearchTeamのエンジニアであるAlonZakaiで、Emscriptenと呼ばれる奇妙なツールを作成しました。
Emscriptenを使用すると、C / C ++ベースのライブラリから生成できるLLVMビットコードをJavaScriptに取り込むことができます。これは、ライブラリをビットコードにコンパイルしてから、そのビットコードを取得してJavaScriptに変換することで実現します。きちんとした、しかし私はこれで実際に何ができるか、あなたはあなた自身に尋ねるかもしれませんか？
反対の質問があります。「CoffeeScriptとPrototypeを使用するのが、ブラウザーでRubyを実行するのに最も近い」というフレーズを聞いたことがありますか。番号？これはもう真実ではないので、心配しないでください。
Emscriptenを使用すると、Rubyソースを取得して、JavaScriptに変換し、ブラウザで実際のRubyを実行することができます。ただし、これはRubyだけに当てはまるわけではなく、たとえばPythonも記述されています。
または、ブラウザのh.264デコーダーブロードウェイをチェックしてください。これは実際には、記述されたC ++ライブラリです。
repl.itにアクセスして、ブラウザーで実行されているいくつかのプログラミング言語（RubyおよびPythonを含む）を確認してください。
08.OSに依存しないデスクトッププログラムの作成
以前、ApacheCordovaを使用して複数のモバイルプラットフォームをターゲットにすることについて話しました。当然のことながら、JavaScriptはモバイルプラットフォームをターゲットにするために使用できるだけでなく、私たちの旧友であるデスクトップコンピューターにも取り組むことができます。
最初のソリューションは、Titanium Desktop Suiteを使用するAppceleratorのスタッフと、広く使用されているAirプラットフォームのAdobeから提供されました。
しかし、私たち全員がオープンソース愛好家であるため、よりオープンでNode.jsベースのテクノロジーが私たちが探しているものです。 app.jsに会いましょう！ app.jsは、オープンWebテクノロジーおよびNode.jsベースのデスクトッププログラムビルダーであり、ファイルシステムアクセス、ウィンドウコントロールなどを備えた実際のデスクトッププログラムを作成できます。 Nodeの安定したクロスプラットフォームAPIに依存し、HTMLとCSSを使用してソフトウェアUIを構築できます。ここのこのリストで最もホットな新しいもののように。
app.jsはかなり若いプロジェクトであるため、現時点ではWindowsとLinuxのみをサポートしていますが、メーリングリストによると、Macのサポートは進行中です。
09.Webサーバーの実行
今日では、自分のWebサイトがJavaScriptベースのWebサーバーによって提供されていると言っても、誰にもショックを与えることはありません。 2、3年前を振り返り、ウェブ開発者にまったく同じことを言ったとしたら、彼らはおそらくあなたを笑ったり、さらに悪いことに笑ったりしたでしょう。
しかし、Node.jsの信じられないほどの成功により、これは幸運にも今から遠く離れています。 Node.jsは非同期であるため、特に多くの並列接続の問題に直面する場合、パフォーマンスが驚異的であるため、人々を驚かせないだけではありません。そのパフォーマンスが素晴らしいだけでなく、真にシンプルなAPIは多くの開発者を魅了します。 NodeWorldの「HelloWorld」の例を確認してみましょう。画面の例に「HelloWorld」と印刷されているだけでなく、httpWebサーバーでもあります。
var http = require（ ’http’）;
http.createServer（function（req、res）{
res.writeHead（200、{'Content-Type'： 'text / plain'}）;
res.end（ 'Hello World n'）;
}）。listen（1337、 ’127.0.0.1’）;
この単純さに驚かされなければ、まあ、私もあなたを助けることはできません。
ノードの人気（または誇大宣伝）の最も優れた部分の1つは、Microsoftのような大企業が実際にそれをサポートしていることです。つまり、Azureクラウドサービスでサポートしています。
10.ウェブスクレイピングとスクリーンショット
最後になりましたが、コマンドラインでQUnitテストをヘッドレスで実行できるようにするために私が個人的に気に入っているプロジェクトを見てみましょう。 PhantomJSは、優れたJavaScript（またはCoffeScript）ベースのAPIを備えたヘッドレスWebKitベースのブラウザーです。
ただし、JavaScriptとDOMのテストだけがPhantomのユースケースではありません。私が本当に魅力的なのは、Webサイトをスクレイピングし、スクリーンショットを撮ることができる機能です。
ええ、あなたは正しく読んでいます。Phantomを使用すると、さまざまなグラフィック形式でWebページを出力できます。もちろん、赤ちゃんからお菓子を盗むのと同じくらい簡単です。
これを正確に実行するスクリプトを見てみましょう。
var page = new WebPage（）;
page.open（ ’http：//google.com’、function（status）{
page.render（ ’google.png’）;
phantom.exit（）;
});
スクリーンショットを作成するために必要なのはこれだけです。JavaScriptベースであるため、スクリーンショットを作成する前にjQueryを使用してページのコンテンツを操作することもできます。
待つ！もっとあります...
ですから、私がこれらのツールをすべて発見したとき、あなたが私と同じように驚いていることを願っています。この記事は、今日のJavaScriptで可能なことのほんの一部にすぎません。完全にJSCloud9で記述されたIDEや、それを使用して作成された高セキュリティのもの（クレジットカードはJavaScriptで作成されたもの）のようなものがたくさんあります。
インスピレーションを感じて、時間をかけてここに記載されているプロジェクトのいくつかを試してみてください。あるいは、これらのツールのいくつかを使って、それらの周りに新しいものを構築することをお勧めします。ここでのほとんどはオープンソースであり、ツールを使用してバグを発見し、報告するだけであっても、開発者が作業の改善を支援するためにあなたを探しています。
