LoginSignup
18
18

More than 3 years have passed since last update.

LINEBotをみんなで作ろう〜環境構築編〜【1日目】

Last updated at Posted at 2020-04-29

この記事は下記の #GWアドベントカレンダーの 1日目の記事になります。

すごくなりたい @inoue2002 ) | GWアドベントカレンダー

はじめに

全く触った事がない人でも読み進められる記事を目指して、「実際に動くもの」を作ることを重視して解説をしていきます。

最初は環境構築から始め、最終的にはサーバレスで動くLINEBotを作成し、色々な物を作ってもらえたら嬉しいです。
僕の持っている知識を全部書いていこうと思いますのでよろしくお願いします!
あと、基本的にはMac環境で説明していきますのでよろしくお願いします。
では1週間よろしくお願いします!

今日やる事

LINE Developerのサイトにログインできるようにする。
ngrokをインストールする
node.js(v10以上推奨)をインストールする
gitをインストールする
エディタ(どのエディタでもいいですが、VSCodeをリンクに入れています。) をインストールする

LINE Developerのサイトにログインする

LINE Developerのサイトに行くと以下のような画面が出る
スクリーンショット 2020-04-29 22.23.48.png
自分のLINEアカウントでログインする。
もしメールアドレスが登録していない、わからない時はLINEをスマートフォンから開き、メールアドレスの設定をする。
スクリーンショット 2020-04-29 22.25.29.png
このような画面がでてログインボタンが押せれば成功。

ngrokをインストールする

サイト上部のバーよりダウンロードをクリック、以下のような画面が出ると、お使いの環境に合わせたバージョンをダウンロード。
ダウンロードしたあと、解凍すれば完了。
スクリーンショット 2020-04-29 22.46.09.png

node.jsをインストールする

サイトに行き、推奨板をインストール、解凍すれば準備完了

gitをインストールする

サイトにいき、インストール、解凍するだけ。

VSCodeをインストール

サイトに行ってインストールをポチっと!!

一通りできたら確認

*ターミナルを開く

ngrokのバージョンを調べる

ngrok -v
と打ち込みenterを押す。
ngrok version 2.3.35このような形で表示されればインストールできています。
でてこない場合はインストールできていません。
一番下にどうしてもインストールできない場合のヒントあり。

node.jsのバージョンを調べる

node -v
と打ち込み、enterを押すと
v12.13.0
のように表示されると成功です。

gitのバージョンを調べる

git --version
と打ち込みenterを押すと
git version 2.23.0のように表示されると成功です。

エディタがインストールできたか確認

上記のエディタをインストールするに書いたリンクからインストールした人は以下のアイコンがパソコン内にあれば成功!
スクリーンショット 2020-04-29 22.12.23.png

最後に

これらを使って明日からLINEBotを作っていきます!よろしくお願いします!

本記事:LINEBotをみんなで作ろう〜環境構築編〜
次の記事:LINEBotをみんなで作ろう〜LINEBot is 何?編

LINEBotをみんなで作ろう〜おうむ返しbotを作ろう編〜
LINEBotをみんなで作ろう〜色々なメッセージを送ってみよう編
LINEBotをみんなで作ろう〜Messageを分岐させるぞ編
LINEBotをみんなで作ろう〜AWSアカウントを作るぞ編
LINEBotをみんなで作ろう〜レイヤーとAPIgateway設定編
LINEBotをみんなで作ろう〜コードを実装編

ngrokがインストールできない場合の参考に。

2020/7/6追記----

Windowsユーザーがngrokの導入で躓きやすいので対処法を追記します。

'ngrok' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

というような表示が出て、ngrokのバージョンを確認できない場合の対処法です。
環境変数にPathを通すことで解決します。

①Winキー+Pause/Break を同時押し
②システムの詳細設定へと進む
③詳細設定のタブから環境変数というボタンをクリックする
④システム環境変数欄からPathの項目を探し、編集を行う
⑤参照をクリックし、ngrokがインストールされているディレクトリを追加する
⑥コマンドプロント立ち上げ直し、再びバージョン確認ができるか行う

追記するにあたって参考にした記事

-----2020/7/6

記事を読んで作ってくださった方の感想

2020/5/11更新
https://twitter.com/mi73mayumi/status/1259784149872721922?s=20

18
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
18