============================ 基本2 (所要時間: 5分) ============================ .. include:: definition.txt WEB APIを作る --------------- HTTPのリクエスト(GET)を受け付けて、応答するWEB APIを作成します。 .. image:: ../images/http1.gif #. パレットの **入力カテゴリ** から |http in| を |workspace| にドラッグドロップします #. パレットの **出力カテゴリ** から |debug| と |http res| を |workspace| にドラッグドロップします #. |http in| の右端から線を引き出して、 |debug| と |http res| につなぎます。 #. |http in| をダブルクリックして、 **URL** を **/hello** に変更します #. |deploy| を押します これで準備完了です。 **[エンドポイント]-[ブラウザで開く]** で、ブラウザを開くと、FrontOpsのWEBサーバーのURLが確認できます。 [#]_ URLの後ろに **/hello** を追加してアクセスしてみます。 すると、ブラウザに .. block-code: json {} が表示されました。 |debugwindow| にも同様の出力が確認できました。 続いて、**/hello?id=123&name=ABC** とパラメータを付けてアクセスします。 すると、ブラウザに .. block-code: json {"id":"123","name":"ABC"} が表示されました。|debugwindow| にも同様の出力が確認できました。 (上の画像をクリックしてアニメを見てください) .. [#] Macの場合はSafariを使ってください。ChromeだとURLが外部から指定できず、FrontOpsのWEBサーバーのURLが確認できません。 動作説明 -------------- 何が起こったのか説明します。 #. |http in| は、 HTTPリクエストが来たのでメッセージを作成し、中にHTTPリクエストのデータを設定して、出力に流しました。 #. メッセージは線上を流れて、|http res| と |debug| に届きました。 #. |http res| は、メッセージが届いたので、HTTPリクエストに応答しました。 #. |debug| は、メッセージが届いたので、 |debugwindow| に表示しました。 応答内容を加工する -------------------- 応答内容を加工してみます。 .. image:: ../images/http2.gif #. |http in| と |http res| の間に パレットの **機能カテゴリ** からオレンジの |template| を追加します #. |template| をダブルクリックして、**テンプレート** を次のように変更します。 [#]_ .. block-code: mustache こんにちは {{payload.name}} さん。あなたのIDは {{payload.id}} です .. [#] `mustache `_ というテンプレートエンジンを使っています。 {{}} の中は変数展開されます。 先程のブラウザページをリロードして、応答が変わるのを確認してください。 (上の画像をクリックしてアニメを見てください) APIをインターネットに公開する ----------------------------- 作ったAPIを、外部からアクセスできるように、インターネットに公開します [#]_。 .. image:: ../images/http3.gif #. **[エンドポイント]-[ngrokに接続]** をクリックします。 #. 接続完了のポップアップがでたら、**[エンドポイント]-[ブラウザで公開URLを開く]** をクリックします。 あとは、さっきと同じように、URLの後ろに **/hello?id=123&name=ABCDEF** とパラメータを付けてアクセスして動作を確認してみてください。 (上の画像をクリックしてアニメを見てください) .. [#] `ngrok `_ というサービスを利用しています