javaScriptおよび{x} - SitePointでWebページを制御します

キーテイクアウト

• 著者は、HTMLプレゼンテーションをリモートで制御する例を使用して、Androidデバイスを使用してライブWebページにリモートの指示を送信する方法を示しました。
使用される技術スタックには、{x}アプリ、node.js、express、socket.io、deck.js、およびheroku。 JavaScriptライブラリであるSocket.ioは、サーバーとクライアント間のリアルタイム通信を可能にします。これは、Androidデバイスからの信号へのリアルタイムの応答に重要です。 JavaScript APIを搭載したOn {x}アプリは、Androidデバイスの制御と、受信テキストメッセージ、GPSの場所、バッテリー寿命などのイベントへの応答を可能にします。これは、Nudgesが発生したときにサーバーリクエストを送信するために使用されました。
• 著者は、この方法が安全ではないことを警告し、あまりにも一般的なものにセキュリティのレイヤーを追加することをお勧めします。
• 電話を紛失しました。私はそれをショッピングモールのソファに置いて、戻ってそれを見つけました。誰かが盗むというひどい芸術を通して新しい電話を贈られていました。 JavaScriptコードをWeb上で携帯電話にリモートで送信し、テキストメッセージを送信するたびにデバイスの座標を送信しました。彼らが電話をオフにするまで、私はそれをシズラーのレストランに追跡し、それは永遠に消えました。私は自分自身に新しい電話を買いましたが、その時点で{x}で呼ばれるまで、かろうじて使用した強力なアプリで新しい可能性を見ました。 この記事では、失われた電話のホラーストーリーと比較して、アプリの非常に異なる使用を共有します。 Androidデバイスを使用してリモートの手順をライブWebページに送信する方法を紹介します。 HTMLプレゼンテーションのリモート制御の例を使用しますが、概念を拡張して、いくつかの興味深いことを行うことができます。
次の技術を使用します。
• Androidデバイス
{x}

on

node.js

express

socket.io

deck.js
heroku
• Android電話がない場合は、心配しないでください！ HTTP呼び出しを行うことができる他のデバイスを理論的に使用して、同じ種類のノード/socket.ioの魔術を解き放つことができます。この記事では、読者にはnode.jsとjavascriptの知識があると想定していますが、ソースコードは参照用に提供されています。
socket.io？
• とは何ですか
これに行き過ぎる前に、次の数コードスニペットに表示されるように、socket.ioが何をするかを説明します。 Socket.ioは、サーバーとクライアント間のリアルタイム通信を可能にするJavaScriptライブラリです。サーバーとクライアントの両方でイベントを定義できます。たとえば、io.sockets.emit（ 'eventthathappened'）は、アプリケーションが対応できる新しいイベントを作成します。イベントに反応するには、このようなイベントハンドラーを設定するだけです - socket.on（ 'eventthathappened'、function（）{}）。

チャットプログラムは、一般的な例socket.ioアプリケーションです。サーバーは、任意のクライアントからの受信メッセージを聴き、チャットアプリを実行しているすべてのクライアントに即座に表示します。それを使用して、ページが上がっている間にAndroidデバイスからの信号に即座に応答します。

サーバーのセットアップ

このデモのディレクトリ構造を次の図に示します。すべてのサーバーサイドコードは、メインJavaScriptファイルindex.jsに保存されます。フロントエンドのHTML、CSS、およびJSは、パブリックフォルダーに保存されています。

Package.jsonファイルは、ノードアプリケーションに関する依存関係とその他のメタ情報を定義します。このファイルの内容を以下に示します。 ExpressおよびSocket.ioモジュールが依存関係に必要であることに注意してください。

このデモはHerokuでホストすることを目的としているため、コンテンツを以下に示しているProcfileが必要になります（非常に単純です！） Web：node index.js ノードサーバー
index.jsに保存されているノードサーバーを以下に示します。

<span>{
</span>  <span>"name": "androidremotecontrol",
</span>  <span>"version": "0.0.1",
</span>  <span>"dependencies": {
</span>    <span>"express": "3.1.x",
</span>    <span>"socket.io": "latest"
</span>  <span>},
</span>  <span>"engines": {
</span>    <span>"node": "0.10.x",
</span>    <span>"npm": "1.2.x"
</span>  <span>}
</span><span>}</span>

index.jsからの次の行は、socket.ioのインポートに使用され、サーバーのポートを設定します。

Socket.ioがHerokuで作業するためには、WebSocketsに頼るのではなく、XHRポーリングを構成するためにこれらの追加の行を追加する必要があることがわかりました（環境にはこれらを必要としないかもしれません）。これらの行には、GETまたはPOSTリクエストに具体的な応答がない場合、空の応答で応答する前に10秒間待つようサーバーに指示します。

プレゼンテーションのスライドの制御

<span>var http = require('http'),
</span>    express <span>= require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    io <span>= require('socket.io').listen(server),
</span>    port <span>= process.env.PORT || 5000;
</span>
app<span>.use(express.bodyParser());
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendfile('public/index.html');
</span><span>});
</span>
app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendfile('public/' + req.params[0]);
</span><span>});
</span>
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
io<span>.configure(function() {
</span>  io<span>.set('transports', ['xhr-polling']);
</span>  io<span>.set('polling duration', 10);
</span><span>});</span>

このデモはdeck.jsを使用しますが、スライド間を移動するためのJSコールがある限り、他のHTMLプレゼンテーションテンプレートを自由に置き換えてください。 deck.jsの場合、パブリックフォルダーにダウンロードして解凍します。

ノードサーバーで最も重要なルートは、プレゼンテーションスライドと対話できるPOSTリクエストです。このルートは以下に示されています。

io <span>= require("socket.io").listen(server),
</span>port <span>= process.env.PORT || 5000;</span>

の構成

io<span>.configure(function () {
</span>  io<span>.set("transports", ["xhr-polling"]);
</span>  io<span>.set("polling duration", 10);
</span><span>});</span>

以下に示すように、追加のjavaScriptがpublic/js/magic.jsでプレゼンテーションに追加されました：

最初の行は、window.location.hostnameのsocket.ioサーバーに接続します。このデモの目的のために、私たちはそれをシンプルに保ち、すべてを1つのドメインに載せます。 2つのイベントハンドラーは、スライドを左または右に微調整するリクエストを聞きます。これらに気付いた場合、deck.jsの前または次の関数を実行してスライドを移動します。

{x}シークレットソース

{x}は、Androidデバイスを制御し、受信テキストメッセージ、GPSの場所、バッテリー寿命などのイベントに対応できるAndroidアプリケーションです。このデモでは、nudgeが発生したときにそれらのサーバーリクエストを送信するためにそれを使用します。

{x}

で始めること

アプリをデバイスにダウンロードしてください：https：//www.onx.ms/#! DownloadAppPage。
それがダウンロードしている間に、デスクトップブラウザのhttps://www.onx.msにアクセスし、Facebookアカウントを使用して{x}にログインします（心配する必要はありません。これは、デバイスとデバイス間のコードの同期に使用されるだけですon {x}）。
{x}のダッシュボードに移動します。レシピにアクセスして、興味がある場合はすでに利用可能なコードのエキサイティングなスニペットを探索できます。ただし、このチュートリアルのカスタムコードを直接掘り下げます。
3. ページの左上隅にある書き込みコードリンクをクリックして、コードエディターを表示します。
そのウィンドウを開いたままにして、そこにいくつかのコードを追加しようとしています。
{x}
5. のコーディング 上記のように、 {x}にはJavaScript APIがあり、Androidデバイスで多くのイベントを呼び出して検出できます。このデモでは、主にdevice.gestures. on methodに焦点を当てています。
最初のことは、{x}を開いてコードエディターを開いたままそのウィンドウに戻ることです。「ルール名：」が表示され、「ナッジプレゼンテーションコントロール」のようなよりフレンドリーなものに変更します。私のオン{x}コードを以下に示します。 http://androidremotecontrol.herokuapp.comを独自のサーバーに置き換えることに注意してください。

device.gestures.onコンポーネントは、イベントハンドラーをセットアップするために使用されます。 {x}でいつでも左のナッジを検出すると、Nudgeleftハンドラーが呼び出されます。基本的に電話に通知を表示するコードがあり、携帯電話が左に微調整されていることを示しています。これは必要ありませんが、ナッジが検出されたことを確認するために、テストに使用します。そのコードの行を以下に示します。

次に、{x}のdevice.ajaxメソッドでJSONデータをサーバーに送信します。データ型はJSONとして明示的に定義されていることに注意してください。これがないと、データは適切に送信されません

現在、OnSuccessコールバック関数は、HTTP応答が成功したことを記録するために使用されます。これは、response.json（{success：true}）にマップします。ノードサーバーで早期に設定します。この成功コールにさらに追加して、{x}を提供して、そのように傾いていると感じた場合は、より多くのデータを提供できます。同様に、Onerrorコールバックは、発生するエラーをログに記録するために使用されます。

次に、これらのジェスチャーの検出を90万ミリ秒間オンにします。これは、最初にデバイスでコードを有効にすると実行されます。このコードを900,000ミリ秒以上実行することを望む可能性があります。私が現在それを個人的にセットアップしている方法は、デバイスの画面がオンになるたびにこれをオンにすることです。したがって、スライドを制御したい場合は、画面をオンにするだけで、900秒間になります。開発中に私が見つけたものから、この関数に制限時間を提供する必要があります。別の方法を見つけたら、コメントでお知らせください。更新したいです。

サーバーアドレスと一致するようにコードを更新し、すべての準備が整ったら、[保存して電話に送信]をクリックして、ウェブ上で電話に送信されます。そこから、プレゼンテーションでURLを開き、Androidデバイスの画面をオンにして、左右に微調整してみてください。すべてがうまくいったら、スライドが前後に切り替わるのが見えます！

{x} logs

で表示します

{x}のログファイルを表示する場合は、Androidスマートフォンでアプリを開くことができ、追加したルールを選択して「ログの表示」を選択できます。または、ルールページに移動してルールを選択し、[ログ]タブをクリックしてログインしてログインしている場合、オン{x}サイトで表示できます。

セキュリティはどうですか？

この方法は決して安全ではありません。他の誰かがあなたのプレゼンテーションのアドレスと送信している投稿リクエストを作成した場合、彼らはあなたのスライドを世界中のどこからでも簡単に切り替えることができます。これとあなたがsocket.ioに関連して{x}に関連する他のアイデアについては、このような一般的なもののためにどこかにセキュリティの層を追加することを忘れないでください。

結論

このデモの背後にあるアイデアは、JavaScript、socket.io、およびかなり気の利いたAndroidアプリを使用して、携帯電話を使用してWebページに何らかの方法で影響を与えることを示すことです。プレゼンテーションスライドのフリックスライドは、スタートのみです。あなたは、あなたがあなたの場所に基づいて、あなたがあなたの場所に基づいてあなたの場所に基づいて表示されるもの、あなたがあなたのバッテリーがなくなっている場合、あなたの場所に基づいて表示するものを変更することができます。 Dそれについて聞くのが大好きです。出て、何かをコーディングしてください！

コード

このデモのすべてのコードは、GitHubで利用可能です。私のランニングバージョンはHerokuでも入手できますJavaScriptを使用したWebページの制御に関するよくある質問（FAQ） Webページの制御におけるJavaScriptの役割は何ですか？ ​​

JavaScriptは、Webページの制御において重要な役割を果たします。これは、Webページに複雑な機能を実装できるプログラミング言語です。 Webページが静的である場合、つまり静的情報を表示する場合、JavaScriptを使用してページをよりインタラクティブにすることができます。ユーザーアクションに応答したり、動的コンテンツを作成したり、マルチメディアを制御したり、画像をアニメーション化したりすることができます。 JavaScriptがユーザーのコンピューターで実行され、ページの読み込みが速くなり、サーバーの負荷が削減されます。 <script>タグまたは<script>タグ内のsrc属性を使用して外部からリンクされます。スクリプトはHTMLドキュメントのヘッドまたはボディセクションに配置できますが、ページのレンダリングのブロックを防ぐためにボディセクションの下部にスクリプトを配置することを一般的に推奨します。 Webページを制御するJavaScript？</script>

JavaScriptは、さまざまな方法でWebページを制御できます。たとえば、HTML要素のコンテンツとスタイルを変更したり、サーバーに送信する前にフォームデータを検証したり、Cookieを操作したり、ポップアップウィンドウを作成したりすることができます。 JavaScriptは、オンラインゲーム、インタラクティブマップ、2D/3Dグラフィックスなどの複雑なアプリケーションを作成するためにも使用できます。動的でインタラクティブなWebページを作成します。 HTMLは、Webページの構造、スタイリング用のCSS、および機能のJavaScriptに使用されます。 JavaScriptは、HTMLドキュメントのすべての要素と属性にアクセスして変更できます。また、Webページ内のすべてのCSSスタイルを変更できます。

以前のプログラミングの知識なしでJavaScriptを学ぶことができますか？ただし、HTMLとCSSがJavaScriptと協力してインタラクティブなWebページを作成する際に、HTMLとCSSを基本的に理解することは有益です。 JavaScriptをゼロから学習するのに役立つチュートリアル、ビデオ、インタラクティブなコーディングプラットフォームなど、オンラインで利用可能な多くのリソースがあります。

JavaScriptはWeb開発にのみ使用されていますか？ Web開発の場合、その使用はそれに限定されません。また、Node.jsを使用したサーバー側のプログラミング、Reactネイティブやイオンなどのフレームワークを使用したモバイルアプリ開発、電子などのフレームワークを使用してデスクトップアプリケーションを作成するためにも使用できます。

JavaScriptはどれだけ安全ですか？

JavaScriptは安全ですが、他のプログラミング言語と同様に、正しく使用しないと悪用されます。潜在的なセキュリティの問題を防ぐために、安全なコーディングのためにベストプラクティスに従うことが重要です。これらには、ユーザー入力の検証と消毒、eval（）の使用を回避し、脆弱性についてコードを定期的に更新およびチェックすることが含まれます。 Webページでアニメーションを作成するために使用されます。時間の経過とともにHTML要素のCSSプロパティを変更し、アニメーションの効果を生み出すことができます。 JavaScriptは、スムーズでブラウザオプチミー化されたアニメーションを作成するために特別に設計されたRequestAnimationFrameメソッドも提供します。 HTMLおよびXMLドキュメントのプログラミングインターフェイス。ドキュメントの構造を表し、JavaScriptなどのプログラミング言語がドキュメントのコンテンツ、構造、スタイルを操作できるようにします。試み、キャッチ、そして最後に声明の。 TRYブロックには、エラーをスローする可能性のあるコードが含まれています。Catchブロックはエラーを処理し、最後にブロックには、スローされているかどうかに関係なく実行されるコードが含まれます。

以上がjavaScriptおよび{x} - SitePointでWebページを制御しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。