Back to HOME

Blogブログ

arrow blog一覧 arrow

システム

javascript

next.js

2020.07.05

Next.js/Reactで静岡県島田市家山の屋号マップを作ってみた。

島田市家山の屋号マップをご覧ください

https://yagou.jazttijaztti.vercel.app/

まず、index.jsはいつものような感じです。

import Fetch from 'isomorphic-unfetch';
import Layout from '../components/Layout';
import MapScreen from '../components/SimpleMap';
const Index = (props) => (
  <Layout>
  <div id="maincontent">
    <h1>静岡県島田市家山の屋号マップ</h1>
    <MapScreen/>
  </div>
  </Layout>
);
 

export default Index;

このSinpleMap.jsの中身が問題です。

その前に今回はpagesと同階層にpublicフォルダを作ってreset.cssやstyle.cssを記載して、グローバルなcssとして読み込んでいます。

pagesのなかに、_app.jsを作り,

import '../public/reset.css'
import '../public/style.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}


とやってます。

ではgoogleマップのコンポーネントの中身です。

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const min = 30 ;
const max = 60 ;
const md1 = String(Math.floor( Math.random() * (max + 1 - min) ) + min)+"%";
const md2 = String(Math.floor( Math.random() * (max + 1 - min) ) + min)+"%";
const md3 = String(Math.floor( Math.random() * (max + 1 - min) ) + min)+"%";
const md4 = String(Math.floor( Math.random() * (max + 1 - min) ) + min)+"%";
const md5 = String(Math.floor( Math.random() * (max + 1 - min) ) + min)+"%";
const md6 = String(Math.floor( Math.random() * (max + 1 - min) ) + min)+"%";
const md7 = String(Math.floor( Math.random() * (max + 1 - min) ) + min)+"%";
const md8 = String(Math.floor( Math.random() * (max + 1 - min) ) + min)+"%";


let mapStyle = md1 + " " + md2 + " "+ md3 + " " + md4 + " / " + md5 + " " + md6 + " " + md7 +" " + md8;
const AnyReactComponent = ({ text }) => {
        let info = text.split(",");

        return (
         <>
           <div className="marker-design" style={{borderRadius:mapStyle}} >
                  <div>
                     {info[0]}<br/><p className="address">{info[1]}</p>
                  </div>
            </div>
           <style jsx>{`
           .address{
             border:2px solid #FFF;
            
           }
           .marker-design{
              width: 70px;
              background-color:#ED9A00;
              color:#FFF;
              text-align: center;
              font-weight: bold;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size:10px;
              padding:5px;
             
            }
           `}</style>
           </>
        );
}
 
class SimpleMap extends React.Component {



  static defaultProps = {
    center: {
      lat: 34.000000000,
      lng: 138.000000000
    },
    zoom:19
  };
 
  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '50vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{key:"XXXXXXXXXXXXXXXXXX"}}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
                    <AnyReactComponent
                        lat={34.000000000}
                        lng={138.000000000}
                         text="屋号名,住所, 0, 0"
                    />
        </GoogleMapReact>
      </div>
    );
  }
}
 
export default SimpleMap;

まだAPIを作ってないので、
このAnyReactComponentをたくさん作ってピンを作ってる感じですね。

ピンのデザインだけは
<style jsx>{ }</style>でやってしまってます。

ちなみに、
const md1 = String(Math.floor( Math.random() * (max + 1 – min) ) + min)+”%”;
で、屋号を囲む枠線のグニャリ具合をランダムにしています。

地味にgoogle cloud platformでapi keyを取得するのが大変でした。

ちょっといろいろ迷ってしまったので分かりやすいスクショを撮り忘れた関係で、また次、使うことがあったら初めから解説します。

あれ？そもそもこの屋号はどうやって調べたの？

屋号は全ての家に訪問して聞いて回りました。

今思うと自分でも信じられない話ですが、
本当です。

今回デプロイはnowを使いました。

  1. https://vercel.com/dashboard のアカウントを作る
  2. githubに専用のリポジトリを作りmasterにpushしておく
  3. next.config.jsを作成し中身を
module.exports = {
    target: 'serverless',
};

にしておく。

4. 下記を実行する

$ npm i -g now
$ now

これをやる中で、vercelとgithubのリポジトリを紐づけてください。
認証が一度飛びますが、
メールをクリックするとデプロイが始まり、
実行中に出てくるURLをクリックするとデプロイ後のサイトを見ることができます。

yamamoto@MacBook-Pro yagou % git push origin master
Enumerating objects: 73, done.
Counting objects: 100% (73/73), done.
Delta compression using up to 8 threads
Compressing objects: 100% (46/46), done.
Writing objects: 100% (51/51), 460.45 KiB | 6.98 MiB/s, done.
Total 51 (delta 24), reused 0 (delta 0)
remote: Resolving deltas: 100% (24/24), completed with 14 local objects.
To https://github.com/jazttijaztti/yagou.git
   6753f43..2ffca66  master -> master
yamamoto@MacBook-Pro yagou % now
Now CLI 19.1.1
🔍  Inspect: https://vercel.com/jazttijaztti/yagou/h3a2buszo [3s]
✅  Preview: https://yagou.jazttijaztti.vercel.app [copied to clipboard] [1m]
📝  To deploy to production (yagou.vercel.app), run `vercel --prod`
yamamoto@MacBook-Pro yagou %

というわけで
https://yagou.jazttijaztti.vercel.app
で見れてるわけですね。

文化資本を保有するということ

資本には３種類
経済資本、文化資本、社会関係資本
があると言われています。

このような屋号の保存は文化資本に当たりますが、
なかなか売り上げという経済資本に変換はできません。
(その気もありません)

現在、現地の資料を含めてどこの資料をみても、
このサイトが一番島田市家山の屋号を網羅しています。
(過去の大火で燃えてしまった地域ということもあり
現地の図書館や各世帯の蔵の中にもなく、
全世帯を訪問して獲得した屋号マップのため)

そのような意味では、このデータは文化資本が比較的高いサイトと言えると思います。

arrow blog一覧 arrow