---
title: "自分の地域のイエメシ（iemeshi.jp）の作り方"
canonical_url: "https://olein-design.com/blog/released-gifu-iemeshi-jp"
language: "ja"
date_published: "2020-05-03T19:06:33+09:00"
date_modified: "2020-05-03T19:06:33+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "Web制作豆知識"
  post_tag:
    - "PWA"
    - "React"
---

# 自分の地域のイエメシ（iemeshi.jp）の作り方

個人で「テイクアウト岐阜」というウェブサービスを運営しているのですが、和歌山県串本町の宮内さんらが立ち上げられたイエメシ（iemeshi.jp）という、オープンソースのテイクアウト地図アプリ用フレームワークの存在を先日知りました。

[埋め込みコンテンツ](https://iemeshi.jp/)

当初は、「テイクアウト岐阜」と扱う情報がとても似ているので、他の誰か興味のある人に任せようと傍観していました。

しかし、Reactは少しかじったことがある程度、Typescriptなんてよくわからない、Netlifyも触ったことがない。こんな状況ではありましたが、ちょっと興味が勝り、とりあえずローカルで触ってみることにしました。

背中を押されたツイートとして、いっぺいさんのツイートもあります。

https://twitter.com/ippey_s/status/1256360955648176129

このスレッドを見て「ほぅ、ローカルだけでも試せるんや」と知りました。（その程度の知識）

ここではざっくりと作り方を説明してみようと思います。本当は実際に試してみた動画を公開できればと思って、再度試そうと思ったんですが、同じリポジトリを１つのGithubアカウントにフォークできないんですね…（それも知らなかった）

## まずは公式のマニュアルを読む

ちゃんと方法は用意されています。全くの初心者の方が、このマニュアルだけでやろうと思うとちょっと難しいかもしれません。（調べればなんとかなりますが）

これを読んでいて「ん？はぁ？」となったら、Twitterで僕に聞いてみてください。

[埋め込みコンテンツ](https://iemeshi.jp/develop.html)

まずは、用意されているリポジトリを自分のGithubアカウントへforkしてきましょう。

[埋め込みコンテンツ](https://github.com/iemeshi/app)

![](https://olein-design.com/wp-content/uploads/2020/05/image-1024x399.png)

とりあえずローカルで動かしてみたいので、自分のアカウントにforkしたものをcloneしましょう。SoucetreeなどGUIを使ってもいいですし、コマンドラインを使っても良いです。 `git clone https://-----`ってやつですね。

これで、同じものがローカルに出来上がったはずです。

そしたら、`package.json`が用意されているので、コマンドラインからこのディレクトリに移動して、

```
$ npm install
```

しましょう。すると、必要なパッケージが用意されます。しばし待ちましょう。

## config.ymlを編集

`config.yml`の中身を自分が作りたいエリアのものに変更しましょう。

マニュアルにもありますが、必要な情報としては

- お店の情報を入力してもらうGoogleフォームのURL
- 入力してもらったお店の情報のスプレッドシートURL（これをCSVとして使う）
- cloneした自分のリポジトリURL

これだけです。あとは、タイトルとかは任意のものに変更します。テキストエディタで`config.yml`を開いて編集をしましょう。

### 店舗情報を入力してもらうGoogleフォームを用意

自身のGoogleアカウントで作成しちゃいましょう。

`config.yml`の`form_url`に最初から書かれているURLはサンプルとして和歌山県串本町のデータを入力するためのフォームのものです。

こちらのフォームの項目をそのままパクって（できれば順番もそのまま）自分のアカウント下でフォームを作成します。

### 入力してもらった情報を自動出力するスプレッドシートを用意

フォームを作ったら、そのフォームで入力された情報をGoogleスプレッドシートとして用意できるようにしましょう。

![](https://olein-design.com/wp-content/uploads/2020/05/image-1-1024x397.png)

フォームの編集画面で、【回答】を選択するとGoogleスプレッドシートのアイコンが表示されるので、こちらを押して設定します。新規のスプレッドシートを作ってしまいましょう。

そして、出来上がったらスプレッドシートのURLをコピーしておきましょう。（あとでもいいけど）

### データベースとして利用するスプレッドシートも用意しておく

これは僕のやり方なので、もっと楽なやり方があるのかもしれません。

Googleフォームから生成されるスプレッドシートの冒頭には、タイムスタンプとメールアドレス、申請内容という項目がフォーム項目のまま作られます。

しかし、データベースとして利用するCSVには、この項目は必要ありません。

ですので、フォームから生成されたスプレッドシートの緯度情報以降を、実際にデータベースとして利用するスプレッドシートにコピペする形で、岐阜市は運営しています。

それでも良ければ以下を参考にしてください。もっと良いやり方をご存知の方は教えてください！

マニュアルにも書かれていますが、データ用スプレッドシートの末尾に`export?format=csv&gid=<:gid>`と付け加えるとCSV形式にすることができます。

```
https://docs.google.com/spreadsheets/d/<:id>/edit#gid=<:gid>
```

こういうものを、

```
https://docs.google.com/spreadsheets/d/<:id>/export?format=csv&gid=<:gid>
```

こうするということですね。

### これらの情報を`config.yml`に入力する

ここまでに用意してきた情報を`config.yml`に入力します。

- `data_url`にはデータベース用スプレッドシートのCSV出力用URL
- `repogitory`にはforkしてきた自分のところのリポジトリURL
- `form_url`には情報入力用のGoogleフォームのURL

これで準備はOKです。

## ビルドする

試しに何かしらデータをフォームからテストとして入力しておきましょう。

準備が完了したらターミナルで

```
$ npm run build
```

と実行します。すると、諸々がビルドされます。（あんまり分かってない…

## 実際にローカルでサーバーを立ち上げて確認してみる

無事にビルドが終わったら、ローカルサーバーを立ち上げて動作しているかを確認してみましょう。

```
$ serve -s build
```

![](https://olein-design.com/wp-content/uploads/2020/05/serve_-s_build.jpg)

すると、ローカルサーバーが立ち上がり、http://localhost:5000 にブラウザでアクセスすると確認できます。

****npm start した人**npm startで開発環境を動かした方はローカルサーバーを別途動かす必要なないかと思います。（僕は最後にbuildして終わりだったのでstartしてなかった…

同じネットワーク管理下であれば、その下のIPアドレスにアクセスするとスマホなどでも確認することができます。

## Netlifyのアカウントを作る

[埋め込みコンテンツ](https://www.netlify.com/)

![](https://olein-design.com/wp-content/uploads/2020/05/Netlify__All-in-one_platform_for_automating_modern_web_projects-1024x540.jpg)

まずはNetlifyにアクセスして、アカウントを作成しましょう。Githubを利用するので僕はGithubアカウントでNetlifyアカウントを作りました。秒で終わります。

そのあとは、実際にサイトを公開するのですが、僕はこちらの記事を参照して進めたら、10分後には公開できていました。

[埋め込みコンテンツ](https://qiita.com/shozzy/items/dadea4181d6219d2d326)

公開できたらちゃんと確認しておきましょう。

## iemeshi.jpのサブドメイン申請

iemeshi.jpのサブドメイン（sub-domain.iemeshi.jpみたいな感じ）を使わせていただくことができます。

そのために、こちらのリポジトリにプルリクエストを送ります。

[埋め込みコンテンツ](https://github.com/iemeshi/registry)

このリポジトリの中の`apps.json`に自分が作るエリアの情報を追記して送りましょう。マージされてすぐに利用できるようになるはずです。

あとは、マニュアルの「Netlify で iemeshi.jp のサブドメインを設定する」で示されている方法に沿って、サブドメインの設定をNetlifyで行えば完了です。

実際にサブドメインでアクセスして、表示を確認してみましょう。実際にデータベース用スプレッドシートを更新すると、キャッシュ次第ですがかなり早く反映されていることがわかります。

## まとめ

ざっくりですが、このような流れでイエメシを立ち上げることができます。

上で紹介したいっぺーさんみたいに知見は多くありませんが「やってみたい！」という方で僕くらいのサポートで良ければいつでもご相談ください。

立ち上げるのも楽しいのですが、やはり運用も大切ですので、その面も考えた上でトライしてみると良いでしょう。

岐阜県岐阜市版のイエメシもよろしくお願い致します。

[埋め込みコンテンツ](https://gifu.iemeshi.jp/#/)