目的 PoC業務で、数年ぶりにWebアプリケーション開発を行うことになって、開発環境、特にフロントエンド開発環境の進展、変貌に驚いた。 動的コンテンツはJSP, Ajaxで止まっており、テンプレートにjavascript, JSPタグを必至に埋め込んでいた自分にとって、これは纏めないと速攻忘れそうだ。 開発環境の構成 フロントエンドとバックエンドはREST APIで分離されている。 フロントエンドはローカル環境（Windows10, Mac)で開発可能 フロントエンド開発においてバックエンドはスタブで代用可能 この開発環境の利点 フロントエンド、バックエンドの開発環境、開発体制を分離できる。(REST APIのみ取り決め) フロントエンド開発はjavascriptダミーデータによりREST API取り決め以前でも開始可能。 開発環境での充分なテスト後に、フロントエンド実行環境をサーバにデプロイすることができる。 フロントエンド開発環境 前提 フロントエンド開発環境 (Windows10) javascript実行環境 node.js javascript実行環境 PS C:\work\git\post19\acp_portal> node -v v14.15.1 yarn npm互換のパッケージマネージャ。npmでもいいが、nuxtの自動セットアップと依存バージョンの固定(yarn.lock)を期待。 PS C:\work\git\post19\acp_portal\sample_cloud> yarn -v 1.22.10 javascriptフレームワーク、コンポーネントライブラリ vue ユーザーインターフェイスを構築するためのjavascriptフレームワーク yarn create nuxt-app で自動的にインストールされる。 nuxt vueフレームワーク。vueファイルの配置がそのままルーティングになるためかなり楽。 yarn create nuxt-app で自動的にインストールされる。 vuetify VueのUIコンポーネントライブラリ。多くのコンポーネント、レイアウトツールが含まれていて、vuetifyコンポーネントを組み合わせていくだけで多くの画面を構成できる。これを利用するためにVueを使うといっても過言ではない。 yarn create nuxt-app で自動的にインストールされる。 フロントエンドアプリケーション作成例 yarn create nuxt-appによりnuxtフレームワークを利用したアプリケーション(sample-app)を作成する。 選択の要点 Programming language: JavaScript/TypeScriptのどちらかの選択。上位互換のTypeScriptを選択。 Package manager: Yarn UI framework: Vuetity.jsを選択すると自動的にインストールされる。 Nuxt.js modules: AxiosモジュールによりREST APIアクセスを行う。 Rendering mode: Singe Page Appを選択 PS C:\work\git\frontend> yarn create nuxt-app sample-app yarn create v1.22.10 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "create-nuxt-app@3.6.0" with binaries: - create-nuxt-app create-nuxt-app v3.6.0 ✨ Generating Nuxt.js project in sample-app ? Project name: sample-app ? Programming language: TypeScript ? Package manager: Yarn ? UI framework: Vuetify.js ? Nuxt.js modules: Axios - Promise based HTTP client ? Linting tools: ESLint ? Testing framework: None ? Rendering mode: Single Page App ? Deployment target: Server (Node.js hosting) ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript) ? Continuous integration: None ? Version control system: Git yarn run v1.22.10 $ eslint --ext ".js,.vue" --ignore-path .gitignore . --fix Done in 21.63s. To get started: cd sample-app yarn dev To build & start for production: cd sample-app yarn build yarn start For TypeScript users. See : https://typescript.nuxtjs.org/cookbook/components/ Done in 258.47s. yarn.lockにアプリケーション依存ライブラリのバージョンが固定される。 Mode LastWriteTime Length Name ---- ------------- ------ ---- -a---- 2021/05/10 15:24 402210 yarn.lock ・・・ vue "^2.6.12" ・・・ vuetify "^2.4.2" ・・・ nuxt@^2.15.3: version "2.15.5" フロントエンドアプリケーションの起動 yarm devで起動 PS C:\work\git\frontend\sample-app> yarn dev yarn run v1.22.10 $ nuxt ╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.5 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: client-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯ i Preparing project for development 15:45:47 i Initial build may take a while 15:45:47 i Discovered Components: .nuxt/components/readme.md 15:45:47 √ Builder initialized 15:45:47 √ Nuxt files generated 15:45:48 √ Client Compiled successfully in 18.58s i Waiting for file changes 15:46:15 i Memory usage: 237 MB (RSS: 428 MB) 15:46:15 i Listening on: http://localhost:3000/ 15:46:15 No issues found. 15:46:15 ブラウザからlocalhost:3000にアクセス フロントエンドアプリケーションの開発例 この状態からバックエンド環境から独立してフロントエンドアプリケーション開発が可能です。 試しにトップページ(pages/index.vue)にダッシュボードぽいグラフコンポーネントを配置します。 VuetifyのDashboard cardを開き、ソースを表示。(<>を押下) TEMPLATEの<v-card>～</v-card>をトップページ(pages/index.vue)に貼り付け SCRIPTの内容をトップページ(pages/index.vue)の<script>～</script>にマージ ブラウザからlocalhost:3000にアクセス ダッシュボードぽいグラフが追加されました。 バックエンドとのREST APIによるデータ通信 Javascript・AxiosモジュールによってREST APIクライアントを実装します。 例(GET)だけ示します。 <script> import axios from "axios" export default { data() { let today = new Date(); let tomorrow = new Date(); tomorrow.setDate(today.getDate() + 1); return { from_ts: today.toISOString().substr(0, 10), to_ts: tomorrow.toISOString().substr(0, 10), devices:[], }; }, created: function() { let sample_api = "https://backend/sample_app/api/deviceinfo/" + "?from_ts=" + this.from_ts + "&to_ts=" + this.to_ts axios.get(sample_api).then( function(response) { this.devices = response.data }.bind(this) ) }, バックエンド開発環境 前提 バックエンド開発環境 (ubunutu@AWS) バックエンドは基本的な構成はデータベース、Webアプリケーションフレームワークで構成され、フロントエンドとのREST APIを提供する。 django djangoのREST API Framework HTTPサーバ (Apache 2.4) djangoとの連携をmod_wsgiで行う。 データベース (mariaDB) RESTful環境 djangorestframework, django-filter, django-cors-headersをpipによりinstallする。 /home/ubuntu/acp_cloud/acp_cloud/acp_cloud/settings.py INSTALLED_APPS = [ ... 'rest_framework', 'django_filters', 'corsheaders', ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ] REST_FRAMEWORK = { 'DEFAULT_FILTER_BACKENDS': ('django_filters.rest_framework.DjangoFilterBackend',) } ... CORS_ORIGIN_ALLOW_ALL = True バックエンド実装については省略します。 本番環境へのデプロイ フロントエンド開発環境でnuxt generateを実行し、ビルドとエクスポートを行う。 本番用の webpack を使用してアプリケーションをビルドおよび最適化します。 すべてのルートを HTML ファイルとして生成し、dist/ ディレクトリに静的にエクスポートします（静的ホスティングに使用されます）。 PS C:\work\git\frontend\sample-app> yarn generate yarn run v1.22.10 $ nuxt generate WARN When using nuxt generate, you should set target: 'static' in your nuxt.config 16:33:29 ? Learn more about it on https://go.nuxtjs.dev/static-target i Production build 16:33:46 i Bundling only for client side 16:33:46 i Target: static 16:33:46 i Using components loader to optimize imports 16:33:46 i Discovered Components: .nuxt/components/readme.md 16:33:46 √ Builder initialized 16:33:46 √ Nuxt files generated 16:33:46 √ Client Compiled successfully in 45.81s Hash: fee4ce8f4922b5867c93 Version: webpack 4.46.0 Time: 45807ms Built at: 2021/05/10 16:34:44 Asset Size Chunks Chunk Names ../server/client.manifest.json 16.5 KiB [emitted] 3714763.js 644 bytes 6 [emitted] [immutable] pages/inspire 40b57dd.js 51.2 KiB 1 [emitted] [immutable] app 5425da6.js 2.14 KiB 3 [emitted] [immutable] components/logo 5f0440d.js 27 KiB 9 [emitted] [immutable] vendors/pages/index 7b1fd44.js 12.7 KiB 0 [emitted] [immutable] vendors/pages/index/pages/inspire 81b55ec.js 214 KiB 2 [emitted] [immutable] commons/app 9f5a49a.js 2.35 KiB 7 [emitted] [immutable] runtime LICENSES 390 bytes [emitted] a373906.js 946 bytes 4 [emitted] [immutable] components/vuetify-logo d98c730.js 482 KiB 8 [emitted] [immutable] [big] vendors/app e4a0c6b.js 6.52 KiB 5, 3, 4 [emitted] [immutable] pages/index + 1 hidden asset Entrypoint app = 9f5a49a.js 81b55ec.js d98c730.js 40b57dd.js WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: d98c730.js (482 KiB) i Generating output directory: dist/ 16:34:44 i Generating pages 16:34:44 √ Generated route "/inspire" 16:34:44 √ Generated route "/" 16:34:44 √ Client-side fallback created: 200.html 16:34:44 Done in 77.61s. 1.で作成されたdistフォルダをWebサーバのドキュメントルート(ex. /var/www/html)に配置する。 Webサーバを再起動し、上記ドキュメントルートにアクセスする。(ex. https://backend:443/dist) Webサーバにデプロイされた環境は以下のようになる。 フロントエンド開発環境でgenerateされたdistフォルダをWebサーバにデプロイする。 アクセスURLはWebサーバのデプロイ先となる。 フロントエンド/バックエンド間のREST APIはそのままブラウザ/Webサーバ間となるため、CORS設定には注意が必要。

アプリの概要 アプリ名：ひとこと日記ver2 日々の記録をテキスト形式で保存する、シンプルな日記アプリです。 コードはGithubにてご覧いただけます。(フロントエンドのコード・バックエンドのコード) 作成環境 ・インフラ：AWS ・バックエンド：node.js ＋ Express ・フロントエンド：Vue.js ・データベース：MySQL ●各バージョン node.js v12.18.2, Express 4.17.1, Vue.js 2.6.12, Veu-CLI 4.4.6, MySQL 8.0 アプリで行う主な処理 ユーザー登録・認証処理 日記のCRUD処理 アプリの構成 ・インフラは、AWSのEC2上にExpressサーバーを立て、RDS上にMySQLデータベースを立てています。 ・フロントエンドは、Veu-CLIを使って構築し、SPAにしています。（Nuxt.jsは使っていません） ・Expressサーバーにて、SPAのホスティングと、データベース処理用のエンドポイントの提供を行っています。 ・Vue.js-Express間の通信は、axiosでデータをやり取りしています。 サーバーとクライアントの構成図 ユーザー登録・認証機能の動作 ・UIからユーザー登録、ログインを行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、ユーザー登録、ログインの処理を実現します。 ・ログインするとトークンが発行され、以降の処理はトークンによってユーザーを一意に特定します。 日記機能の動作 ・UIから日記の表示・作成・更新・削除を行います。 ・Vue.jsからaxiosで通信し、Expressサーバーのエンドポイントへアクセスすることで、日記のCRUD処理を実現します。 ・axios通信時にサーバーにトークンを送信することで、ユーザーを一意に特定して、日記データを処理します。 フォルダツリー ●vuecli-appのフォルダ構成（フロントエンド） [ルート] └ [public]フォルダ └ [images]フォルダ 　└ 各種imageは全てここに格納 └ index.html └ favicon-diary.ico └ [src]フォルダ └ [asset]フォルダ └ [components]フォルダ 　└ [diary]フォルダ　日記関係のVueコンポーネントを格納するフォルダ └ Index.vue　トップページ（アプリの紹介ページ） └ Mypage.vue　日記の一覧表示ページ └ Edit_Create.vue　日記作成ページ └ Edit_Update.vue　日記更新・削除ページ └ Header.vue　ログイン時のヘッダーコンポーネント └ Help.vue　機能紹介ページ 　└ [login]フォルダ　ユーザー認証関係のVueコンポーネントを格納するフォルダ └ Regist.vue　ユーザー登録ページ └ Login.vue　ログインページ └ Trial.vue　お試しユーザーログインページ └ App.vue └ main.js └ router.js　Vue.jsのルーティングを記述したJS └ store.js　Vuexの設定を記述したJS ●express-appのフォルダ構成（バックエンド） [ルート] └ [public]フォルダ　ビルドしたVue.jsのファイルをここに格納している。 └ 各種ファイル。Vue-CLIでビルドしたdistフォルダ内のファイルをそのままコピーしたもの。 └ [routes]フォルダ　axiosリクエストのエンドポイントを提供するためのルーターモジュールを格納したフォルダ └ get_diaries.js　一ヶ月分の日記を取得する処理のモジュール └ get_one_diary.js　一日分の日記を取得する処理のモジュール └ edit_create.js　日記を作成する処理のモジュール └ edit_update.js　日記を更新する処理のモジュール └ edit_delete.js　日記を削除する処理のモジュール └ user_regist.js　ユーザー登録する処理のモジュール └ user_login.js　ログインする処理のモジュール └ user_delete.js　ユーザーを削除する処理のモジュール └ user_auth.js　認証トークンを延長する処理のモジュール └ [function]フォルダ　サーバーに機能を与えるモジュールを格納したフォルダ └ db_connect.js　データベース接続設定モジュール └ token.js　認証トークン発行モジュール └ clear_auth.js　有効期限切れのトークン情報を削除するモジュール └ app.js

winserを使用してnode.js+Vue.jsアプリをWindowsサービスに登録する node.jsアプリのWindowsサービス登録にはwinserモジュールが使えますが、vue-cliを使ったアプリをWindowsサービスに登録する場合にはwinserコマンドがそのまま使えませんでした。 winserがラッピングしているNSSMを使ってWindowsサービス登録ができたので、その方法を紹介します。 手順 1. winserを導入 $ npm install winser 導入されると/node_modules/winserディレクトリができる 2. NSSMを起動 <アプリ名>にはWindowsサービスとして表示したいアプリケーション名称を入れる $ C:\<アプリディレクトリ>\node_modules\winser\bin\nssm.exe install <アプリ名> 以下のような画面が表示される 3. 必要な値を入力 Path: <アプリディレクトリ>\node_modules.bin\vue-cli-service.cmd を絶対パスで指定 Startup: <アプリディレクトリ>を絶対パスで指定 Arguments: アプリ起動コマンドを指定 Expressを使用していたため、ArgumentsにExpressのコマンドを指定した 4. "Install service"ボタンを押下 以下のような画面が表示されてWindowsサービスが登録される これでWindowsサービスにアプリが登録され、起動・停止が可能になりました。

前回の追加実験です。 Promise.all()したらどうなるのかやってみました。 実験1 まずは前回の実験3の状態に、環境変数AWS_NODEJS_CONNECTION_REUSE_ENABLEDを1にセットした状態で、別々のインスタンスでセッションが共有されることを確認します。 import { DynamoDB } from 'aws-sdk'; import { execSync } from 'child_process'; process.env.AWS_REGION = 'ap-northeast-1'; process.env.AWS_NODEJS_CONNECTION_REUSE_ENABLED = '1'; const TableName = 'test-table'; function getDynamoDB() { return new DynamoDB({ endpoint: 'http://localhost:18005', }); } function printSession() { try { const stdout = execSync('lsof -i@localhost | grep node'); console.log(stdout.toString()); } catch (e) { console.error('null'); } } async function main() { console.log('#0'); printSession(); const cl = getDynamoDB(); console.log('#1'); printSession(); await cl.describeTable({ TableName }).promise(); console.log('#2'); printSession(); await cl.describeTable({ TableName }).promise(); console.log('#3'); printSession(); const cl2 = getDynamoDB(); console.log('#4'); printSession(); await cl2.describeTable({ TableName }).promise(); console.log('#5'); printSession(); } main(); 以下が出力されました。 #0 null #1 null #2 node 6070 user 29u IPv4 0xa83d103bf35ef62d 0t0 TCP localhost:51201->localhost:18005 (ESTABLISHED) #3 node 6070 user 29u IPv4 0xa83d103bf35ef62d 0t0 TCP localhost:51201->localhost:18005 (ESTABLISHED) #4 node 6070 user 29u IPv4 0xa83d103bf35ef62d 0t0 TCP localhost:51201->localhost:18005 (ESTABLISHED) #5 node 6070 user 29u IPv4 0xa83d103bf35ef62d 0t0 TCP localhost:51201->localhost:18005 (ESTABLISHED) インスタンスが違っても共有されてますね。 実験2 main()の最後に以下を追加して実行してみます。 （差分のみ記載） const requests = [cl.describeTable({ TableName }).promise(), cl2.describeTable({ TableName }).promise()]; await Promise.all(requests); console.log('#6'); printSession(); 以下が出力。 #0 null #1 null #2 node 6584 user 29u IPv4 0xa83d103c049d8c4d 0t0 TCP localhost:51367->localhost:18005 (ESTABLISHED) #3 node 6584 user 29u IPv4 0xa83d103c049d8c4d 0t0 TCP localhost:51367->localhost:18005 (ESTABLISHED) #4 node 6584 user 29u IPv4 0xa83d103c049d8c4d 0t0 TCP localhost:51367->localhost:18005 (ESTABLISHED) #5 node 6584 user 29u IPv4 0xa83d103c049d8c4d 0t0 TCP localhost:51367->localhost:18005 (ESTABLISHED) #6 node 6584 user 29u IPv4 0xa83d103c049d8c4d 0t0 TCP localhost:51367->localhost:18005 (ESTABLISHED) node 6584 user 30u IPv4 0xa83d103bf0bcd62d 0t0 TCP localhost:51368->localhost:18005 (ESTABLISHED) 新しいセッションが作られました。 念のため、同じインスタンスだとどうなるのか。 const requests = [cl.describeTable({ TableName }).promise(), cl.describeTable({ TableName }).promise()]; await Promise.all(requests); console.log('#6'); printSession(); 結果は同じでした。 （出力は割愛） まとめ 同時に処理される場合は、リクエストに必要なだけ（不足する分の）セッションが作られました。 （まあ、当たり前と言えば当たり前か） 高速化を狙って並列化しても、却って遅くなることもあるかも知れないです。 それよりも、（ちゃんと）テーブルやクエリを工夫して、リクエスト数を減らす方がよさそうですね。

はじめに 星座を入れると今日の運勢やラッキーカラーを自動返信する「今日の運勢占いBOT」を作ってみました。 占いBOTを作った目的 子供のころから星を見るのが大好きで、今でも星の誕生だったり、意味だったり、はたまた運命だったりを考え、日々、思いを馳せています。 そんな私は、やっぱり、星占いにも関心があり、ほぼほぼ毎朝、「今日の占いカウントダウン」をかかさずチェックしています。 ただ、最近、毎朝時間がなく、見れていないんです。 「スマホに占いのアプリでも入れようかな？」とも考えてみたのですが、今回、LINEでBotを作る！という課題がでたこともあり、「じゃあ、自分で作ってみようかな？」と思い作成することにしました。 プログラミング力まだまだですが、がんばって作ってみました！ 開発手順 下記の流れで、開発を進めていきました。 ・LINE Developers 登録&設定 ・Heroku 登録&設定 ・node.jsで実装 LINE Developersの登録&設定、およびHerokuの登録&設定については下記URLを参照ください。 ＜参考サイト＞ https://developers.line.biz/ja/docs/messaging-api/getting-started/ https://note.com/on_bass/n/n0495484a2b2b 環境 Visual Studio Code　 Heroku Node.js LINE BOTの仕組みについて 今回は、勉強も兼ねてHerokuを使ってLINE BOTを作成しました。 1. ユーザーがボットにメッセージを送ると、Webhookを利用し、Messaging APIを通して、Herokuへリクエストを送信します。 2. Herokuが受け取ったリクエストを、Node.jsで実装したソースコードが処理し、値をHerokuへ返します。 3. Herokuが受け取った応答リクエストを、Messaging APIへ送ります。 　(応答リクエストは、JSON形式でHTTPSを使って送信されます。) 4. LINEが受け取り、データが表示されます。 という流れで、データの授受が行われます。 ＜Messaging Api＞ https://developers.line.biz/ja/docs/messaging-api/getting-started/ ＜Heroku＞ https://www.bing.com/ ＜今回使用した星占いのApi＞ https://jugemkey.jp/api/waf/api_free.php 開発準備 １．Heroku CLIインストール インストール手順については、以下を参照してください。 https://developers.line.biz/ja/docs/messaging-api/getting-started/ ２．Herokuへのログイン、環境設定　　 Herokuへのログイン、webhookの設定方法等が詳細に記載されています。 今回は、こちらをがっつり参考にさせていただいているので、詳細な内容は割愛させていただきました。 https://qiita.com/abemaki29/items/44d2015561c31ea9628e ３．Webhookの設定 今回は、星占いApiから結果を返したいので、LINE Developers上で以下の様に設定します。 Webhook送信：利用する Webhook URL：https://<アプリケーション名>.herokuapp.com/callback 完成画像 早速今日の運勢を占いましょう！ ちなみに私は「牡羊座」です。なんと総合運１位！やりましたー！ おわりに 初めてHerokuを使ってみましたが、意外と楽しく開発することができました。 今回はかなりシンプルな内容になってしまったので、もう少し勉強して「星占いBot」をさらにパワーアップさせたいと思います。 サンプルコード（全文） 'use strict'; const http = require('http'); //初期設定 var express = require("express"); var app = express(); var cfenv = require("cfenv"); require('dotenv').config(); var request = require("request"); var bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); var urlLine = process.env.Channel_endpoint //LINEエンドポイント設定(.envより取 得) var botKey = process.env.Channel_access_token //apiというPOSTがurlにきたらテキスト返信するように設定 const asyncwrap = fn => (req, res, next) => fn(req, res, next).catch(next); app.post("/api", asyncwrap(async (req, res) => { var userMessage = req.body["events"][0]["message"]["text"]; //牡羊→0 牡牛座→1 双子座 蟹座　獅子座　乙女座　天秤座　蠍座　射手座　山羊 座　水瓶座　魚座 if(userMessage==="牡羊座" || userMessage==="牡牛座" || userMessage==="双子座 " || userMessage==="蟹座" || userMessage==="獅子座" || userMessage==="乙女座" || userMessage==="天秤座" || userMessage==="蠍座" || userMessage==="射手座" || userMessage==="山羊座" || userMessage==="水瓶座" || userMessage==="魚座"){ //callback処理をしました(uranai関数終了後に次に進むように同期) uranai(userMessage,function(message) { console.log("同期中") console.log(message) //受け取った値の手直し(json形式のままでは送信できない) const text=userMessage+"の今日の運勢\n-----------------------\n・ラ ッキーアイテム: "+message.item+"\n・金運: "+message.money+"\n・総合運: "+message.total+"\n・仕事運: "+message.job+"\n・ラッキーカラー: "+message.color+"\n・恋愛運: "+message.love+"\n・占い: "+message.content //送信形式 var options = { method: "POST", uri: urlLine, body: { replyToken: req.body.events[0].replyToken, messageNotified: 0, messages: [ { contentType: 1, type: "text", text: text, } ] }, auth: { bearer : botKey }, json: true }; console.log(options) request(options, function(err, res, body) { }); res.send("OK"); }) } else{ var options = { method: "POST", uri: urlLine, body: { replyToken: req.body.events[0].replyToken, messageNotified: 0, messages: [ { contentType: 1, type: "text", text: "現在は「星座」のみテキストを受け付けています", } ] }, auth: { bearer : botKey }, json: true }; request(options, function(err, res, body) { }); res.send("OK"); } })); //占いから結果を取得するfunction function uranai(seiza,callbackFunc){ //日付取得→事前にnpm install date-utilsにてインストール require('date-utils'); var dt = new Date(); var DATE = dt.toFormat("YYYY/MM/DD"); const req = 'http://api.jugemkey.jp/api/horoscope/free/'+DATE; //APIより (url+日付(YYYY/MM/DD形式)にて返答あり) http.get(req, res => { var body =''; res.setEncoding('utf8'); res.on('data', (chunk) => { body += chunk; }); res.on('end', () => { res = JSON.parse(body); //牡羊→0 牡牛座→1 双子座 蟹座　獅子座　乙女座　天秤座　蠍座　射手座　 山羊座　水瓶座　魚座 if(seiza==="牡羊座"){ var num=0; }else if(seiza==="牡牛座"){ var num=1; }else if(seiza==="双子座"){ var num=2; }else if(seiza==="蟹座"){ var num=3; }else if(seiza==="獅子座"){ var num=4; }else if(seiza==="乙女座"){ var num=5; }else if(seiza==="天秤座"){ var num=6; }else if(seiza==="蠍座"){ var num=7; }else if(seiza==="射手座"){ var num=8; }else if(seiza==="山羊座"){ var num=9; }else if(seiza==="水瓶座"){ var num=10; }else if(seiza==="魚座"){ var num=11; } const all_data=res.horoscope; const minimal_data=all_data[DATE]; const ohitsuziza=minimal_data[num]; const uranai_content=ohitsuziza.content; //console.log(uranai_content); //return console.log(uranai_content) //callbackFunc(uranai_content); //注意：通常の関数処理では非同期接続とな りデータが得られなかった→同期処理 callbackFunc(ohitsuziza); }); }) .on('error', e => { console.error(e.message); }); } // サーバ起動→LINE botを作る際には必ず必要 var appEnv = cfenv.getAppEnv(); app.listen(appEnv.port, "0.0.0.0", function() { console.log("server starting on " + appEnv.url); });