2つのプログラミング言語間でデータを送信する方法、1つのオブジェクトを送信しようとするのか、複数のデータセグメントを送信しようとするのか、疑問に思ったことはありませんか？

今日は、JSONを使ってJavaScriptからPythonにデータを送る方法を紹介します。Webサーバーのセットアップ方法と必要なコードをすべて説明します。

前提条件

このプロジェクトを始めるには、いくつかのものが必要です。PythonがすでにインストールされているMacで動かす予定です。もしWindowsを使っているならば、Pythonをダウンロードしてインストールし、コマンドラインのスキルを少し学ぶ必要があるでしょう。

Pythonのパッケージマネージャであるpipが必要です。pipはPythonの2.7.9以上のバージョンでデフォルトでインストールされます。

サーバーの設定

Pythonをウェブページに提供するためのサーバーが必要です。多くの選択肢があります。すでにサーバーをセットアップしている場合は、このステップをスキップすることができます。

tornadoは良い選択ですし、Twistedもそうです（以前、DIYウェブカム用にTwistedを書いたことがあります）。今回はフラスコを使用する予定です。

pipを使ってflaskをインストールする場合（コマンドラインから）。

pip install Flask

以上です！設置方法はいくつかありますが、正しく設置されていれば問題ありません。

Pythonの仮想環境の利用を検討することも可能ですが、これは完全にオプションです。

パイソンセットアップ

お気に入りのテキストエディタや統合開発環境（IDE）で新規ファイルを作成します。私はSublime Text 3とPyCharmを使っていますが、お好きなものを使ってください。

フラスコの初期設定を一部実施しました。

from flask import Flaskapp = Flask(__name__)

これで、必要なモジュールがインポートされ、アプリケーションが設定されます。

@app.route("/output")def output():return "Hello World!"

これは、Webサイトのページに似たパスを設定します。これは、エンドポイントまたはルートと呼ばれることもあります。

def output()行は、このエンドポイントが呼ばれたときに実行されるoutputという関数やメソッドを定義しています。これらのメソッドは、エンドポイントと同じ名前を使用する必要はなく、任意の適切な名前を使用することができます。このメソッドの内部には、シンプルな hello, world!の文字列を表示します。最後に、リクエスト時に実際に実行されるスクリプトを設定します。

if __name__ == "__main__":app.run()

続けて、このスクリプトを json_input_output という名前で適当な場所に保存します。ターミナルに戻り、プロジェクトフォルダーに移動して、このスクリプトを実行します。

python json_io.py

pythonという単語は、その下にあるファイルをpythonスクリプトとして実行するようにコンピュータに伝えるために使用されます。その後に続くファイル名は、Pythonとして実行したいファイル名です。すべてがうまくいけば、ターミナルに次のようなステータスメッセージが表示されます。

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

これは、サーバーが動作しているIPアドレスとポートを表示します。これは127.0.0.1と5000になります。CTRL> Cを押すことでこの実行を停止できますが、今はこれをしないでください。

ブラウザにアドレスを入力すると、Hello, World!が表示されます。これで、Pythonサーバーのインストールと最初のスクリプトの作成に成功しました!変更した場合は、サーバーを再起動する必要があります（スクリプトを停止してから、再度実行する）。

同じネットワーク上の他のコンピューターでスクリプトを表示するには、アプリケーションの実行()を

app.run("0.0.0.0", "5010")

このラインには2つのパートがあります。最初のコマンドは、Flask にあなたのローカル IP アドレスでファイルを提供するように伝えます (あなたの IP アドレスでない場合でも、0.0.0.0 を維持することを確認してください)。第2部では、ポートを指定する。ご希望により、ポートを変更することができます。もう一度スクリプトを実行します（保存と再起動を忘れずに）。

これで、同じネットワーク上の他のコンピュータからスクリプトにアクセスできるようになるはずです。IPアドレス（コマンドラインからifconfigを実行）と先ほど入力したポートが使用されていることを確認してください。ファイアウォールを使用している場合は、その設定が必要な場合があります。

コンソールには、HTTPレスポンスと、サーバーに接続されているデバイスのIPアドレスが表示されます。

endpoint/dfが404エラーを返していることにお気づきでしょうか？エンドポイントが設定されていない!インターネット経由でアクセスする場合は、ポートフォワーディングをご確認ください。

テンプレート

さて、サーバーの準備が整ったので、いよいよテンプレートを書いてみましょう。PythonとJavascriptの間でデータを送信するためにJSONを使用することになりますが、テンプレートはこれを容易にします。JSONが何なのかは過去に書きましたので、よくわからない方は読んでみてください。

テンプレート言語を使用する必要があります。jinja2にはflaskが付属していますので、追加の設定は必要ありません。

テンプレート言語は、ウェブサーバーと組み合わせて使用します。Pythonスクリプトからの出力（バックエンドコード）を受け取り、HTML（フロントエンドコード）を使ってユーザーに便利に出力することができます。注意すべきは、テンプレートはロジックに使ってはいけないということですロジックはPythonに任せて、データの表示だけテンプレートで行う。テンプレートを複雑にしようとし始めると、非常に分かりづらくなってしまいます。

プロジェクトディレクトリに templates というフォルダを作成します。 Flask はこのフォルダ内のファイルをテンプレートファイルとして認識します。ここにはPythonスクリプトを入れずに、HTMLファイルを入れてください。

index.htmlというファイルを作成し、その中に以下のコードを記述してください。

{{ name }}

これは、スクリプトの中にあるnameというデータにアクセスする方法です。json_input_outputに戻ります。スクリプトを作成し、出力関数を修正します。hello worldを返す代わりに、次のコードを入力します。

return render_template("index.html", name="Joe")

これはindex.htmlファイルを読み込み、文字列Joeを{name}}テンプレートタグに置き換えます。このメソッドを使うと、テンプレートフォルダ内の任意のページを読み込み、任意の量のデータを渡すことができます。

コード

テンプレートの動作がわかったところで、必要なHTMLコードを以下に示します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script type="text/javascript">// setup some JSON to usevar cars = [{ "make":"Porsche", "model":"911S" },{ "make":"Mercedes-Benz", "model":"220SE" },{ "make":"Jaguar","model": "Mark VII" }];window.onload = function() {// setup the button clickdocument.getElementById("theButton").onclick = function() {doWork()};}function doWork() {// ajax the JSON to the server$.post("receiver", cars, function(){});// stop link reloading the page event.preventDefault();}</script>This will send data using AJAX to Python:<br /><br /><a id="theButton">Click Me</a>

CSSやHTMLの見出しは含まれませんのでご注意ください。これらはページに必要なものです（この例はなくても動作します）ので、必要であればW3Schoolsで調べてみてください。

このファイルにはあまり何も入っていません。ラリーカーのJSONリストが設定されました。テキストとボタンがあります。ボタンが押されると、jQueryを使って車のリストをサーバーにポストしています。これは、次に作成される受信者エンドポイントに移動します。この場合のjQueryの動作について詳しく知りたい方は、jQueryガイドをぜひお読みください。

以下は、json_inputとoutputに必要なコードです。

#!flask/bin/pythonimport sysfrom flask import Flask, render_template, request, redirect, Resp***eimport random, jsonapp = Flask(__name__)@app.route('/')def output():# serve index templatereturn render_template('index.html', name='Joe')@app.route('/receiver', methods = ['POST'])def worker():# read json + replydata = request.get_json()result = ''for item in data:# loop over every rowresult += str(item['make']) + ''return resultif __name__ == '__main__':# run!app.run()

このコードでは、2つのエンドポイントを定義しています。デフォルト（/）は、前のhtmlページを提供します。ボタンが押されると、/receiverエンドポイントにPOSTリクエストが送信されます。ルーティング定義の2番目の部分 (methods=['POST']) は、このページがどのようにアクセスされるかを定義しています。POST のみが指定されているため、このルートは他の http リクエスト（GET など）を拒否します。

この/receiverエンドポイントは、単純に各JSON行をループして、車種を文字列に追加し、ループ後に戻ります。JSONは、データ変数と、PythonがJSONオブジェクトであることを知っているrequest.getu json()として格納されます。のデータです。各行の異なる要素には、角括弧内の名前（item['make']）でアクセスすることができる。

ブラウザの開発者ツール（Mac OS/ChromeではCMD&gt; ALT&gt; I）を開き、「ネットワーク」タブに移動します。ボタンを押すと、サーバーの応答が表示されます。

最初のJSONを変更してみて、どうなるか試してみてください。JSONによって異なる動作をするようにPythonを修正しましょう。以下は、forループに必要な新しいコードです。

for item in data:# loop over every rowmake = str(item['make'])if(make == 'Porsche'):result += make + ' -- That is a good manufacturer'else:result += make + ' -- That is only an average manufacturer'

単純なif文を使って、入力に応じて出力を変化させるものです。データベースに書き込んだり、別のコードセグメントを実行するように簡単に修正することができます。現在はこんな感じです。

これで、Pythonサーバーのセットアップ方法とJSONリクエストへの対応方法について、深く理解できたはずです。

JavaScriptでのコーディングは好きですか？音声認識ロボットアニメーションのスクリプトを書いてみよう!また、開発者として、JavaScriptの矢印関数や配列メソッドを習得し、他の関数型プログラミング言語を探求することで、スキルアップを図ることも可能です。