What's New Qiita

20191112のNode.jsに関する記事は3件です。

  • 投稿日：2019-11-12T23:07:54+09:00

超初心者が子供の服装について目安を教えてくれるLine Botを作ってみた

はじめに

プログラミングを勉強し始めてから2か月経過しました。
休み休みなのでちょっとずつの進歩ですが、
自分の成長のために新たなLINE BOTにトライしてみたくなりました。
季節の変わりめ、いつも困るのが子供の服装です。
子供は大人より体温が高いらしく、同じ感覚で服を用意すると
すぐ「あつ～い」と脱がれてしまいます・・・。
挙句の果てに上着を忘れたり、やたら荷物が増えたり。
ということで気温から服装の目安を教えてくれるLine Botを作ってみました。

作った目的

前回までのLine Botは基本的にオウム返しのみの設定でした。
今回は少しステップアップするためWEBのAPIにつなげることに
挑戦してみました。

仕様

1⃣明日の気温を教えてくれる
2⃣気温を入れると、子供の服の目安を教えてくれる。

環境

基本的には「LINE BOT作ってNowで動かした時のメモ」を参考にさせていただきました。
・Node.js v10.16.3
・Windows 10 pro
・Visual Studio Code v1.39.1
　服装の基準は下記を参照しています。
・https://woman.excite.co.jp/article/child/rid_ItMama_37721/

コード

'use strict';

const express = require('express');
const line = require('@line/bot-sdk');
const axios = require('axios');
const PORT = process.env.PORT || 3000;

const config = {
    channelAccessToken: 'LINEのアクセストークン',
    channelSecret: 'LINEのシークレットトークン'
};

const app = express();
app.get('/', (req, res) => res.send('Hello LINE BOT!'));
app.post('/webhook', line.middleware(config), (req, res) => {
    console.log(req.body.events);
    Promise
      .all(req.body.events.map(handleEvent))
      .then((result) => res.json(result));
});

const client = new line.Client(config);

function handleEvent(event) {

    const message = event.message.text;
    let replyMessage = event.message.text;
  //event、message以外はnull(空）で返す
    if (event.type !== 'message' || event.message.type !== 'text') {
      return Promise.resolve(null);
    }


  if( message.indexOf('子供の服') > -1 ){
    replyMessage = '明日の気温入れて';
  }
  if(message.indexOf('10') > -1){
    replyMessage = '本格的冬服'; 
   }
   if(message.indexOf('11') > -1){
    replyMessage = '薄手の冬服　長袖下着＋ロンTシャツ＋セーター'; 
   }
   if(message.indexOf('12') > -1){
    replyMessage = '薄手の冬服　長袖下着＋ロンTシャツ＋セーター';  
   }
   if(message.indexOf('13') > -1){
    replyMessage = '本格的秋服　半袖下着＋ロンTシャツ＋トレーナー'; 
   }
   if(message.indexOf('14') > -1){
    replyMessage = '本格的秋服　半袖下着＋ロンTシャツ＋トレーナー'; 
   }
   if(message.indexOf('15') > -1){
    replyMessages = '薄手の秋服　半袖下着＋ロンTシャツ＋カーディガン'; 
   } 
   if(message.indexOf('16') > -1){
    replyMessage = '薄手の秋服　半袖下着＋ロンTシャツ＋カーディガン'; 
   }
   if(message.indexOf('17') > -1){
    replyMessage = '薄手の秋服　半袖下着＋ロンTシャツ＋カーディガン'; 
   } 
   if(message.indexOf('18') > -1){
    replyMessage= '薄手の秋服　半袖下着＋ロンTシャツ＋カーディガン'; 
   } 
   if(message.indexOf('19') > -1){
    replyMessage = '薄手の秋服　半袖下着＋ロンTシャツ＋カーディガン'; 
   }
   if(message.indexOf('20') > -1){
    replyMessage = '夏秋服　下着タンクトップ＋ロンTシャツ'; 
   } 
   if(message.indexOf('21') > -1){
    replyMessage = '夏秋服　下着タンクトップ＋ロンTシャツ'; 
    }
    if(message.indexOf('22') > -1){
    replyMessage = '夏秋服　下着タンクトップ＋ロンTシャツ'; 
   }
   if(message.indexOf('23') > -1){
    replyMessage = '夏秋服　下着タンクトップ＋ロンTシャツ'; 
   }

   if(message.indexOf('明日の気温') > -1 ){
     getTommorowTemperature(event.source.userId); //スクレイピング処理が終わったらプッシュメッセージ
    }

  return client.replyMessage(event.replyToken, {
    type: 'text',
    text: replyMessage
  });

}
const getTommorowTemperature = async (userId) => {
    const res = await axios.get('http://weather.livedoor.com/forecast/webservice/json/v1?city=130010');
    const item = res.data;

    if(item.forecasts[1].temperature.max == null){
      client.pushMessage(userId, {
        type: 'text',
        text: "最高気温のデータが無いみたいです",
      });
    } else {
      client.pushMessage(userId, {
        type: 'text',
        text: "最高" + item.forecasts[1].temperature.max.celsius + "度",
      });
    }
  //データが取れなかった時の返答
    if(item.forecasts[1].temperature.min == null){
      client.pushMessage(userId, {
        type: 'text',
        text: "最低気温のデータが無いみたいです",
      });
    } else {
      client.pushMessage(userId, {
        type: 'text',
        text: "最低" + item.forecasts[1].temperature.min.celsius + "度",
      });
    }
  }
}
//一番上段のexpressのコードとのセット。ポートとつなぎます。
app.listen(PORT);
//つながれたらTerminalに記載します。
console.log(`Server running at ${PORT}`);

動作確認

Screenshot_20191112.png

課題

正直言うと、本当は2段階ではなく1段階で明日の子供の服についてコメントしてくれるボットが良かったのです。しかし、APIから取ってきた値でLINE　BOTが応答できるような複雑でかっこいいコードをまだまだ書けません。
またAPIbankなるものがあり、素敵なAPIが多く掲載されていましたが、パラメーターの設定をどうするかというのが難題で、さっぱりどうして良いか迷子でした。先にQiitaに記事を掲載されていた方にめちゃ感謝。
今後、この課題をクリアしたいと痛感しました。

感想

1、2日使ったみた感想はそこそこ当たっているかなという感じです。
寒い日には私から言うよりもLINE BOTからサジェストされた方が子供も素直に聞きそうでした。
UX的にはまだまだなので、あきらめずに改良していきたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T17:34:33+09:00

npmコマンドで、permission deniedが発生する

状況

babelをインストールしようとすると、permission deniedが発生し、インストールに失敗しました。

$ npm i @babel/core @babel/node @babel/preset-env --save-dev
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /home/user/repos/play_express/node_modules/@babel/core
npm ERR! dest /home/user/repos/play_express/node_modules/@babel/.core.DELETE
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename '/home/user/repos/play_express/node_modules/@babel/core' -> '/home/user/repos/play_express/node_modules/@babel/.core.DELETE'
npm ERR!  { [Error: EACCES: permission denied, rename '/home/user/repos/play_express/node_modules/@babel/core' -> '/home/user/repos/play_express/node_modules/@babel/.core.DELETE']
npm ERR!   cause:
npm ERR!    { Error: EACCES: permission denied, rename '/home/user/repos/play_express/node_modules/@babel/core' -> '/home/user/repos/play_express/node_modules/@babel/.core.DELETE'
npm ERR!      errno: -13,
npm ERR!      code: 'EACCES',
npm ERR!      syscall: 'rename',
npm ERR!      path: '/home/user/repos/play_express/node_modules/@babel/core',
npm ERR!      dest:
npm ERR!       '/home/user/repos/play_express/node_modules/@babel/.core.DELETE' },
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, rename \'/home/user/repos/play_express/node_modules/@babel/core\' -> \'/home/user/repos/play_express/node_modules/@babel/.core.DELETE\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'rename',
npm ERR!   path: '/home/user/repos/play_express/node_modules/@babel/core',
npm ERR!   dest:
npm ERR!    '/home/user/repos/play_express/node_modules/@babel/.core.DELETE',
npm ERR!   parent: 'play_express' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2019-11-12T02_06_04_443Z-debug.log

対応

npmをグルーバルで再インストールしました。

$ rm -rf ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ npm i -g npm

ちなみに、npm config get prefixで、現在のprefixを確認できます。

結果

babelをインストールできました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-11-12T13:44:13+09:00

最速 install ？！ electron のはじめ方

最速 install ？！ electron のはじめ方

みなさまこんにちは。ハーツテクノロジーの山崎です。この記事は仕事の中で得たられた知見によって書かれています。

どんな話？

なんか面白そうなので、electron を使ってプログラムを作ってみようと思ってググってみたけど、何をインストールすればいいのかいまひとつ理解できなかったので、理屈はいいから、どこかにサクッと動かすまでの手順だけまとめて書いてないかな？と思ったひと向けの記事です。

「electron ってなに？」「node.js ってなに？」「JavaScriptってなに？」なひとは対象にしていないです。まぁ、Qiita を読んでいるひとにそんなひとはいないと思っていますが。

あ、Windows 環境で解説します。Mac や Linux なかた、ごめんなさい。

1, フォルダ（作業環境）を作る

好きな名前でフォルダを作成してください。個人的には日付を入れるのが好み。
image.png
image.png

2, フォルダに electron を入れる

npm コマンドを使って electron を install しますが、グローバルにインストールせず、作ったフォルダにローカルインストールします。

2-1, コマンドプロンプトを開いてすぐにカレントディレクトリをそのフォルダに移動

> cd <フォルダパス>

image.png

2-2, node.js がインストールされていることを確認し、無ければインストール

> node -v

image.png

node.js のインストールの仕方はここでは解説しないので、各自でググってください。

2-3, 本格的なアプリを作るつもりなら先に package.json を作っておく（お試しならば飛ばせる項目です）

> npm init

npm や package.json の使い方に関しても、同じくここでは解説しないのでググってください。

2-4 electron をインストール

npm コマンドで、electron をインストールする。

> npm install electron

electron-install-01.png
package.json 無しで実行したので警告(WARN)がでてます。

node_modules フォルダが作成され、そこに electron > dist > electron.exe が入っていることを確認。
-g オプションを付けてたりすると別の場所に入るので注意。VSCode でのデバッグ起動も難しくなるかもしれない。-g を使うとどんなライブラリが入っているのか管理が難しくなるので個人的におすすめしないです。使わないほうをおすすめしてます。

image.png

ここにありました。ちなみにダブルクリックして実行してみると、
image.png
こんな感じで、バージョンが表示されたりします。ここでは exe の位置が確認できればおっけー。

3, フォルダにファイルを２つ用意する

新規ファイルで以下の２つのファイルを作成し、エディタで開いて、コピペ＆保存終了してください。

  • main-process.js
main-process.js
'use strict'

const { app, BrowserWindow } = require( 'electron' )        // Electron 本体

let main_gui = null

app.on( 'ready', () =>
{
    let win_option = {
        frame: false,   // electron の タイトルバーを消す（必ず -webkit-app-region: drag; とペアで使うこと）
        width: 900,
        height: 700,
        backgroundColor: '#eee',
        webPreferences: {
            experimentalFeatures:   true, // backdrop-filter: すりガラス機能を有効にする
            nodeIntegration:        true, // electron v5.0.0 から、明示的に true を指定しないと、require( 'electron' ) に失敗する
        }
    }

    win_option.width = 1300    // debug 少し 400横に広くする

    main_gui = new BrowserWindow( win_option )
    main_gui.loadURL( 'file://' + __dirname + '/renderer-process.html' )

    main_gui.webContents.openDevTools()     // debug
} )

コメントの通り、タイトルバーを表示したい場合はframe: false,を消してください。ちなみに、タイトルバーのデザインを変更する手段は、、、、無いみたい。

experimentalFeatures: true,もコメントの通り「磨りガラス機能backdrop-filter」なので普通はいらないかな。

これらのコードは、デバッグ画面の表示なので、リリース時には消すこと。

win_option.width = 1300    // debug 少し 400横に広くする

main_gui.webContents.openDevTools()     // debug
  • renderer-process.html
renderer-process.html
<!DOCTYPE html>
<html><body>
  <div style="-webkit-app-region: drag;">Hello electron world!</div>
</body></html>

この HTML に <script> ... </script> tag を追加して、javascript のコードを書いていくことになる。

4, 実行（動作確認）

この段階で、フォルダ内は、こんな感じになっているはず。
electron-install-04.png

準備が終わったら、いよいよ実行です。先程確認した electron.exe の引数にJavascript のファイル main-process.js を引数に指定して実行します。
コマンドラインから

> node_modules\electron\dist\electron.exe main-process.js

これで、以下が表示されればおっけー。

electron-install-02.png

タイトルバーを消しているので、終了する（閉じる）のに苦労するかと思う。Hello の div tagをタイトルバーとして機能するように指定-webkit-app-region: drag;しているので、右クリックでメニューが出ます。「閉じる」を選択すると終われます。
electron-install-03.png

おめでとうございます。electron のプログラムが起動しました。あとは、好きなようにコードを改良してください。

ここまで、５分くらい？？
たぶん最速。違ってたらごめんなさい。

最近の版では、main-process.js はほとんど触らなくても renderer-process.html 側になんでも書けて実行できちゃうようです。
いい時代になりました。

5, VSCode からデバッグ実行

ここから先は、さらに極めたいひと向け。

VSCode のことはここでは説明しない。

[F5]キーでデバッグ実行

.vscode/launch.json ファイルを以下のように記述すると、[F5]キーでデバッグ実行できるようになる。

launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron Main",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
            "program": "${workspaceFolder}/main-process.js", // <- 修正
            "skipFiles": [
                "<node_internals>/**"
            ]
        }
    ]
}

image.png

コードを更新してみる

たとえば、このtag <button onclick="require('electron').remote.app.quit()">x</button>を追加すると、ボタンを押すだけで、アプリを終了できるようになります。

renderer-process.html
<!DOCTYPE html>
<html><body>
  <div style="-webkit-app-region: drag;">Hello electron world!</div>
  <button onclick="require('electron').remote.app.quit()">x</button>
</body></html>

あとはよしなにー。

以下はここでは解説しないので、別途ググってくだださい。

  • node.js のインストール方法

  • package.json の作り方（npm の使い方）

    • 使用するライブラリが増えるのがわかっているなら、作っておいたほうが 絶対によい。

  • electron のビルド（exe の作り方）

    • electron の真骨頂。ビルドして exe が作れるんだよね！

  • VSCode のインストール方法

まとめ

「electron って簡単！！」ってことが理解していただけたと思います！（希望）

みなさまの、快適なプログラミングライフを願いつつ。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧