文字

今回つくるものはこちらで公開しているので、ご確認ください。

技術内容

・Node.js
・Express
・Ajax
・Heroku

事前準備

・OpenWeatherMap.orgアカウント
apiキーを取得するために、アカウント登録が必要です。こちらのサイトからアカウント登録を済ましておいてください。

・Node.js
Node.jsの環境構築については、こちらの記事を参考にしてください。

ディレクトリの作成

今回のアプリケーションに必要なディレクトリ、ファイルを作成しましょう。

$ mkdir weather-app
$ cd weather-app
$ npm init
$ touch server.js

サーバーの作成

まずはじめに、サーバーを起動して実行する必要があります。

ここでは、Expressフレームワークを使って、サーバーの実行環境をつくっていきましょう。

ExpressはNode.jsのためのWebフレームワークです。

$ npm install express --save

インストールが完了したら、server.jsにサーバー起動用のコードを記述します。

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World!')
})

app.listen(1234, function () {
  console.log('ポート番号1234でサーバを起動しました。')
})

expressオブジェクトのexpressメソッドでappオブジェクトを作成し、appオブジェクトのgetメソッドを使ってURLのルーティングを設定しています。

app.get(‘/’~ では、「/」にGETリクエストがあったときに、コールバック関数で指定されている処理を呼び出します。

ここでは、res(レスポンスに)’Hello World’を返す処理になっています。

最後に、app.listen(1234 ~ でポート番号を1234に指定してListenします。(通信機能を持つソフトウェアが、外部からのアクセスに備えて待機すること)

ファイルを保存したら、node server.jsでサーバを起動して、http://localhost:1234にアクセスしてみましょう。

たったこれだけの処理でWebサーバを立ち上げることができました!

index.ejsの作成

今の状態では、レスポンスとしてテキストを返しているだけなので、HTMLファイルを返せるようにしていきましょう。

ここでは、EJSと呼ばれるテンプレートエンジンを使います。npmを使ってインストールしていきましょう。

$ npm install ejs --save

インストールが完了したら、server.jsで、テンプレートエンジンの指定を行います。

$ app.set('view engine', 'ejs')

EJSファイルは、viewsディレクトリの下で読み込まれるので、viewsディレクトリを作成します。

$ mkdir views

ディレクトリが作れたら、その下にindex.ejsファイルを作成しましょう。

$ touch views/index.ejs

ちなみに、現時点でのファイルの階層はこのようになっています。

|-- weather-app
   |-- views
      |-- index.ejs
   |-- package.json
   |-- server.js

作成したindex.ejsファイルに都道府県を選択し、選択したデータをサーバーに送信するフォームを作っていきます。

index.ejs

ファイルが作成できたら、index.ejsを反映するために、server.jsの設定を変更します。

app.get('/', function (req, res) {
  //sendからrenderへ変更
  res.render('index');
})

renderメソッドではviewsディレクトリを読み込み、その下階層にあるファイルを読み込んでページに反映してくれます。

それでは、node server.jsコマンドでサーバーを起動して、localhost:1234を開いてみましょう。

※herokuにデプロイした段階で、ポート番号を変更したため画像では8080になっていますが、皆さんは1234のまま進めてもらって結構です。

index.ejsファイルがレンダリングされましたね!

CSSや画像ファイルを追加

今の段階では、皆さんのページは非常にプレーンなものになっていると思います。

このままでは味気ないので、publicディレクトリにcssディレクトリを作成して、その中にstyle.cssファイルを置きましょう。

style.css

次に、いらすとやの画像を使って、トップページに画像を表示させてみます。

publicディレクトリにimagesディレクトリを作成し、tenki.pngという画像ファイルを置いてください。

※本ページで使っている画像はこちらからダウンロードできます。

現時点でのディレクトリの構成はこちらです。

|-- weather-app
   |-- views
      |-- index.ejs
   |-- public
      |-- css
         |-- style.css
      |-- images
         |-- tenki.png
   |-- package.json
   |-- server.js

ここで重要なポイントは、server.jsにpublicディレクトリを読み込む設定を記述することです。

app.use(express.static('public'));

上記のコードをserver.jsに記述しましょう。

これでpublicディレクトリ下の静的ファイルが読み込めるようになったので、index.ejsで外部ファイルの読み込みを行うことができます。

<head>内に、以下のコードを記述してください。

<link rel="stylesheet" type="text/css" href="/css/style.css">

これでスタイルシートが読み込まれます。

最後に、index.ejs内のform-selectの下で画像を表示させるコードを記述しましょう。

<div class="form-select">
  <!-- ↓ここに追加↓ -->
  <img src="images/tenki.png" />
    <form name="form"</form></div>

それでは、node server.jsでサーバーを起動して、localhost:1234を開いてみましょう。

Ajaxでデータを送信

ページの表示を行うことができたら、次にデータの送信を実装していきましょう。

ここではAjaxを使ってサーバー側にユーザーが選択した都道府県のデータを送信します。

publicディレクトリ下にjavascriptディレクトリを作成して、index.jsファイルを置いてください。

index.js

※Ajaxの処理についての説明は割愛させていただきますが、簡単に説明すると、送信ボタンがクリックされた時点で「/ajax」にPOSTリクエストを送るという処理になります。

忘れないうちにindex.ejsの<head>内でindex.jsファイルを読み込んでおきましょう。

<script type="text/javascript" src="javascript/index.js">&lt/script>

POSTリクエストの処理

次に、/ajaxのPOSTリクエストを受けとるサーバー側の処理を実装していきます。

受けとった都道府県データを元に、OpenWeatherMap.orgにapiリクエストを送り、その都道府県の県庁所在地の現在の気象データを受信します。

まず、クライアント側からのリクエストにアクセスするために、body-parserライブラリをインストールします。

$ npm i body-parser --save

インストールが完了したら、server.jsに設定を記述します。

const bodyParser = require('body-parser');
// ...
// ...
app.use(bodyParser.urlencoded({ extended: true }));

上記のコードがどのように動いているのかについての説明は省きますが、ここでは、このおかげでreq.bodyオブジェクトにアクセスできるということだけ分かっていれば大丈夫です。

それでは、POSTリクエストを処理するコードを書いていきましょう。まずはリクエストを受信できているかをテストします。

server.jsのgetリクエストの下に以下のコードを記述します。

app.post('/ajax', function (req, res) {
  res.render('index');
  console.log(req.body.city);
})

コードが書けたら、node server.jsコマンドでサーバーを起動して、都道府県を選択して送信ボタンをクリックします。

ターミナルに県庁所在地名がローマ字で表示されたら成功です。

次に、URLリクエストを送るためのrequestライブラリをインストールします。

$ npm i request --save

インストールができたら、server.jsに処理を記述していきましょう。

ここでは、完成したコードを先に紹介してから、重要な点(①〜⑩の番号を振ってあります)について後述していきます。

①req.bodyにアクセス
前述の通り、body-parserライブラリを使うことで、req.bodyにアクセスできるようになります。

②apiキー
OpenWeatherMap.orgから取得したapiキーです。キーの認証まで10~60分ほどかかることがあるみたいなので、リクエストエラーが出る場合は少し時間を置いてみてください。

③ローマ字の県庁所在地名を変数に格納しています。

④都道府県のテキストデータを格納しています。

⑤apiリクエスト用のURLです。

⑥URLリクエストを送信
先ほどインストールしたrequestライブラリを用いて、OpenWeatherMap.orgにapiリクエストを送っています。クエリデータとしてユーザーが選択した都道府県の県庁所在地名、apiキーを渡しています。

⑦エラー時の処理になります。

⑧weather変数にJSONデータを解析したオブジェクトを格納しています。

⑨データ取得に成功した場合の処理
index.ejsで表示させるテキストデータを生成しています。

⑩Heroku用の処理
Herokuではポート番号が動的に生成されるため、固定のポート番号が使えません。そのため、このような処理を行っています。

それでは、最後にnode server.jsコマンドを用いてサーバーを起動しましょう。

localhost:1234で都道府県を選択して送信ボタンをクリックしてみてください。

お天気アプリが完成しましたね!

Herokuにデプロイ

最後に完成したお天気アプリをHerokuにデプロイしていきましょう。

お使いの環境にHeroku CLIがインストールされていない場合は公式ホームページ、もしくはbrewコマンドでインストールしましょう。

$ brew install heroku/brew/heroku

Git管理を開始

まずはgit initで.gitファイルを作成します。

$ git init

余計なファイルをアップロードしないように.gitignoreを作成します。

node_modules
.DS_Store

Procfileを作成

Heroku起動時に実行されるコマンドを記述するProcfileを作成します

web: node index

Herokuにデプロイ

最後は一気にgitからherokuのデプロイまでを完了します。

$ git add .
$ git commit -m "Initial  commit"
$ heroku create
$ git push heroku master
$ heroku open

ブラウザが立ち上がり、エラーがなければOKです!

https://nihon-no-ondo.herokuapp.com

お疲れ様でした!!

PROFILE

はじめまして、大阪のWeb制作会社Yuapです。「Yuap(ユアプ)」とは英語で「あなたのプランナー」という、Your Plannerの頭文字をとった社名です。 ホームページ制作|Webシステム開発|Webコンサルティングなどの業務を通じて、みなさまの事業の成長に貢献できるようなプランナーになれるよう、日々チャレンジしております。

※お問い合わせ・お見積りは無料です。 IT|ホームページ|Webシステムのことならなんでもお気軽にご相談ください。お問い合わせはこちらから。