Reactのプロジェクトを作る方法のメモ

Reactのプロジェクトを作るときの便利コマンドをとりあえずメモ

create react appで一式そろえることができるので、便利。

[参考：Create React App]
https://create-react-app.dev/docs/getting-started/

npmインストール済みの環境で「my-app」フォルダをプロジェクトする場合は以下のようにコマンドラインから入力する

$npx create-react-app my-app

my-appというフォルダができるので、移動する

$cd my-app

my-app以下には以下のフォルダとファイルができている。

index.jsがエントリポイントになるので、App.jsを編集していくことになる。

node_modules/    ←nodeのパッケージが配置される
package.json
public/　　　　　←公開用のコンテンツはこちらに出力される
src/　　　　　　←ソースフォルダ
    App.js        ←アプリケーション本体
    index.js 　　←エントリポイント

 

 サンプルがすでに出来上がっているので、以下のコマンドで起動できる

$npm start 

公開用のコンテンツの出力は以下で実行

$npm run build

ReactでThree.jsを使う場合のめも

 ReactでThree.jsを使う場合には、react-three/fiberなるものが便利そうなので、なんとなくメモ

 

[react-three/fiber]
https://www.npmjs.com/package/@react-three/fiber 

他にも、react-three/drei というのもあるらしい。fiberのヘルパー的立ち位置なのかな？おいおい調べる。

Blenderのモデルを取り込んだりもできる模様。

 Three.jsをいじってみたかったので、なんとなくメモ

 

[three.js超入門]
https://qiita.com/watabo_shi/items/f7c559c3cdbcdd0f2629

[Three.jsの基礎 ]
https://threejsfundamentals.org/threejs/lessons/ja/

[超楽しくてカッコいい、Reactで始めるThree.js入門]
https://qiita.com/hppRC/items/b3e292e210d02005120f

PythonでのShapefile（.shp）操作

PythonでShapefileを操作する方法をまとめている方がいたので、なんとなくメモ。

感謝！！

 [PythonでのShapefile（.shp）操作まとめ]

https://qiita.com/c60evaporator/items/78b4148bac6afa4844f9

ローカル環境でnpm start をHTTPではなくHTTPSで起動する

 reactなどの開発をしているときに、npm startで、ローカルサーバを立ち上げるけど、そのままだと、http://xxx.xxx.xxx.xxx:3000/になりHTTPでのアクセスとなる。

 

React-QR-Readerを使おうとしたときに、Android(iPhoneもそうらしい）の場合、httpでのアクセスではブラウザからカメラを使うことができず、httpsでのアクセスが必要となるので動かない。

立ち上げ方が以下のページにあったので、とりあずメモ。

（参考）
https://create-react-app.dev/docs/using-https-in-development/

（Wndowsコマンドプロンプトの場合）

      set HTTPS=true&&npm start

（PowerShellの場合）VisualStudioCodeのコンソールはこちら

      ($env:HTTPS = "true") -and (npm start)

（Linux Bashの場合)

       HTTPS=true npm start

ReactとLeafletで地図の操作

 Reactとleafletを使って地図の操作をしたかったので、なんとなくメモ。

 Reactでleafletを使うときには、react-leafletを使うと便利。

 [ドキュメント]

(Leaflet) 本家 直接操作するに仕様確認する
https://leafletjs.com/

(React Leaflet)
https://react-leaflet.js.org/

(React-leafletの使い方メモ) React Leafletのサンプルを解説してくれている感じ。
https://qiita.com/studio_haneya/items/fbb52fa03ab4f212ced0

[インストール]

(React本体、React-dom、Leaflet本体)
npm install react react-dom leaflet

(React-Leaflet)
 npm install react-leaflet

(React-Leaflet Google Layer) GoogleMapを表示するなら
 npm install --save react-leaflet-google-layer

[使い方]

1. とにもかくにもインポート
   (主なコンポーネント)
       import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
   (GoogleMapを表示するなら追加）
       import ReactLeafletGoogleLayer from 'react-leaflet-google-layer';
   (Leaflet本体の機能を使うなら)
       import L from 'leaflet'
   
   
2. OpenStreetMapを表示する
   return (
   　　<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
   　　　　<TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
   　</MapContainer>
   );
   
   
3. Google Mapを表示する
   return (
       <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
           <ReactLeafletGoogleLayer apiKey='AIzaSyBF904Y-d2_yF4tXwHuji18VHSUDTwGUFI' type={'hybrid'}  />
       </MapContainer>
   );
   
4. マーカーを表示する
   MapContainerの子要素としてMaker要素を記載すると、地図表示時にマーカーを表示してくれる。Makerの子要素として、Popup要素を記載すると、地図上のマーカーをクリックした際に、表示するポップアップを設定できる。
   
   <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
       <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
           <Marker position={[51.505, -0.09]}>
               <Popup>ポップアップメッセージ </Popup>
           </Marker>
       </MapContainer>
   );
   
   
5. leaflet本体を直接操作する
   初期表示だけであれば、react-leafletのコンポーネントを駆使していろいろとカスタマイズできるが、外部コンポーネントからのアクションで、地図内の要素を制御するのは出来なさそう。
   leaflet本体にアクセスして、本体のメソッドなどを使うしかない。
   
   MapContainerのwhenCreated属性に本体を取り出すための関数を設定することで、leaflet本体を取得できる。
   
   以下の例では、状態管理要素を取得するuseStateを利用して、leaflet本体入手している。
   地図とは違うボタン要素のクリックで実行する関数内で、leaflet本体を操作している。
   
   (サンプル)
   function Sample() {
       //leaflet本体を格納するだけなら何でもよいが、状態管理のフック(useState)を使っている。
       let [map,setMap]=useState(null);
       //センター位置を変更するための処理
       let setCenter=()=>{
         map.setView([51.505, -0.09],map.getZoom());
       };
       //マーカーを地図に追加する
       let addPoi=()=>{
         L.marker([53.505, -0.09]).addTo(map);
       }
6.     //レンダー要素
       return (
       <>
       <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true} whenCreated={setMap}>
           <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
       </MapContainer>
       <button onClick={()=>addPoi()}>マーカー追加</button>
       <button onClick={()=>setCenter()}>センターを表示</button>
       </>
   )
   }
   
   

 

Reactでレンダー後に処理を実行するフック(useEffect)

 クラスコンポーネントの場合、componentDidMount(),componentDidUpdate(),componentWillUnmount()などのライフサイクルに関する関数を書くことで、マウント時やレンダー時などに処理をはさむことができる。
けど、関数コンポーネントの場合は、これらの関数は使えないので代わりに、useEffect()を使う。

[ドキュメント]
https://ja.reactjs.org/docs/hooks-effect.html

[インストール]

Reactに含まれるので、特にインストール不要

[使い方]

1. とにもかくにもインポート
   import react ,{useEffect} from 'react'
   
   
2. 関数コンポーネントの処理の中で記載
   
   useEffect(処理関数,オプション)
   
   処理関数：useEffectはレンダー毎に第一引数に設定される処理関数を実行する。
   
   第一引数に設定される処理関数の戻り値にコンポーネントがアンマウントする際のクリーンナップ実行時に実行される。
   たとえば、setInterval()で定期的に処理を実行した際に、コンポーネントがアンマウントされた場合に処理と中止させる場合に使う。
   
   
   オプション：設定した処理関数の実行タイミングを制御する。
       指定なし：毎回
       []    ：初めの一回のみ
       [state] ：useState()で取得した状態管理に使用している変数を指定すると、状態が変化したときに実行される。
   
   
   useEffectで設定できる関数は１つなので、使い分けたい場合は、複数記述する。
   
   

Javascript で日付操作

 Javascriptで日付操作をするときnew Date()などで面倒だったけど、momentがよさそうだったのでとりあえずメモ。

[ドキュメント]
  http://momentjs.com/
[参考]
(わくわくBank)
https://www.wakuwakubank.com/posts/606-javascript-moment/

[インストール]

    npm install moment

[使い方]

1. とにもかくにもインポート
   import moment from moment;
   
2. 処理でのコーディング
   (現在日付を取得)
   moment().format("YYYY-MM-DD HH:mm:ss")
   
   
3. こんなことも？
   (ロケール指定)
      moment.locale('ja')
   (加算:add)
      moment().add(数字,単位)
        単位: 年:'y',月:'M',週:'w',日:'d',時間:'h',分:'m',秒:'s'
   (減算:subtract)
      moment().subtract(数字,単位)
         単位は加算と同じ
   (差分:diff)
      元moment.diff(比較対象moment,単位,小数調整)
      単位は加算と同じ、デフォルトはミリ秒
   　小数調整は小数以下あり(true),なし(false)
   (はじめ:startOf と おわり:endOf）
   　moment().startOf(単位)  はじめ 
      moment().endOf(単位)　おわり
   　単位は加算と同じ
   (ほかの日時と比較:isAfter,isBefore,isSame)
      元より比較対照が後であればtrue : 元moment.isAfter(比較対象moment)
      元より比較対照が前であればtrue : 元moment.isBefore(比較対象moment)
      元と比較対照が同じであればtrue : 元moment.isSame(比較対象moment)
   (日付の生成)
     現在時刻（デフォルト) : moment()
     文字列で指定              : moment("2021-05-23")
     オブジェクトで指定     : moment({years:2021,months:5,days:23})
     Dateオブジェクト　　 : monent(new Date(2021,5,23))
   

Reactでコンポーネント間のデータ共有がしたい

 Reactは親から子コンポーネントに値を渡す場合、引数(props)として渡すことができる。ただ引数で実装する場合、親から孫や、兄弟で同じ値を参照しようとすると必要もないのに、propsに設定しまくることになるので、メンテンナンス性が良くない。

React ではContext APIを用意しているので、上記のようなケースの場合に使える。

[ドキュメント]

 　　https://ja.reactjs.org/docs/context.html

[インストール]　

　　※Reactに含まれているuseContextを使うので、Reactが入っていればよし。

[ソース例]

[context/app.js] Context用のファイル
import { createContext } from 'react';
const AppContext = createContext();
export default AppContext;

[App.js] アプリ本体
import AppContext  from './context/app';
import { useState } from 'react';

function App() {
  //authという状態とsetAuthという設定用関数を取得
  let [auth,setAuth] = useState();
  return (
    //AppContextで共有するauthとsetAuthを設定
    <AppContext.Provider value={{"auth":auth,"setAuth":setAuth}} >
    <Sample></Sample>
    </AppContext.Provider>
  );
}

[sample.js] 子コンポーネント
import React,{useContext} from 'react';
import AppContext  from './context/app';
function App(){
    //useContextでAppContextの状態を取得
    let app_context=useContext(AppContext);
    //Contextに値を設定
    app_context.setAuth({user_id:1});
　  //参照
    console.log(app_context.auth);//{user_id:1}
    
    return (
        <div></div>
    );
}
export default Sample;


[ソース内での書き方]

1.  createContextでContextを生成する。
   他のコンポーネントにimportするため、外部ファイルにしておく。
   適当に名前を付けてたContext用の変数にcreateContext()の戻り値を設定する。
     const AppContext = createContext();
   他のソースで読みこんだ時にアクセスできるように宣言をしておく
     export default AppContext;
   
   
2. 共有したい範囲のコンポーネント上位に、ContextのProviderを設置する。
   
   定義したContextにはProviderが標準で用意される。
   定義したContextに合わせてタグを作る
   <AppContext.Provider value={オブジェクト}></AppContext>
   ソース例(App.js)では、面倒なのでuseState()で管理する値と、変更用の関数を用意して、それらをContentに設定している。
   
   
3. Context.Consumer側での値の参照
   上位はPoviderで、受け取る側はCunsumerというらしい。
     関数コンポーネントの場合はuseContext()フックが使えるので、意識しなくても大丈夫。
   
   　利用する場合は、useContext(定義したContext)で利用するContextを取得する。
   　ソース例では、AppContextとしているので、useContext(AppContext)と記述することになる。
   Contextが取得できれば、あとは、共有した要素に直接以下のようにアクセスできる
       Context.共有値
   ソース例では、値保持用のauthと変更用のsetAuthという関数型の値を共有しているので、
       app_context.auth
       app_context.setAuth({user_id:2}) 
   といったようにアクセスできる。
   
   

React Routerでベースをルート以外にする方法

 React Routerは初期状態だと、"/"を起点にしてしまうので、デプロイ先が/hoge/のようになるとおかしくなる。
回避するには   

    <BrowserRouter basename="/test/">

 のように、BrowserRouterの属性でbasenameに配置場所を指定すればよい。

npm startで起動する際にも変える必要があるので、プロジェクトのpackage.jsonでhomepageを指定する必要がある。

　“homepage”:”/test/”

React Hook Formでフォーム要素の管理をしてみる

 Reactでフォーム画面を構成したいときに、標準(?)だとinput要素一つ一つにstateを管理するようなつくりで面倒くさいので、React Hook Formが使えそうだったのでなんとくメモ。

非制御コンポーネント (Uncontrolled Components) を、管理下(register)に登録することで、form要素の一括してデータを取り扱える（操作およびvalidateion)ようにしている感じ。
非制御コンポーネントな要素だけだと、Material UIやBootstrapなどでラップしている部品は使えないことになるこえど、そのあたりは考慮されている模様。
今回は、非制御コンポーネントの書き方をメモ。

useState()で状態を一つずつ管理したり、useRef()を使用して参照先を管理するよりはわかりやすいかなぁと。※中身はuseRef()使っているのかも



[ドキュメント]

 　　https://react-hook-form.com/jp/

[インストール]　

　　$npm install react-hook-form

[ソース例] ログイン画面のイメージ
import {useForm} from 'react-hook-form';
function Login(){
    const { register, handleSubmit, formState: { errors },reset } = useForm();
    //Sumit時に呼ばれる処理
    const handleLink = (form_data) => {
        console.log(form_data);
    };
    return (
        <div>
        <form onSubmit={handleSubmit(handleLink)}>
                アカウント：<input type="text" {...register("account", { required: true })} /><br/>
                パスワード:<input type="password" {...register("password", { required: true })} /><br/>
                    <button type="submit">送信</button>
                    <button onClick={()=>{reset()}}>キャンセル</button>
                    <p>{(errors.account || errors.password) && "アカウントとパスワードをどちらも入力してください。"}</p>
                </form>
        </div>
    );
}

[ソース内での書き方]

1. とにもかくにもインポート
   
   import {useForm} from 'react-hook-form';
   
   
2. 関数コンポーネント内で、useForm()を仕様
   useForm()から取得できるものはいろいろとあるけど、以下を使ってみた
   
       register    フォーム要素の関連付け（？）用の関数
       handleSubmit    Submitで呼ばれる関数
       formState:{arrors}    フォーム要素のエラーの状況
       reset  フォーム要素の要素を再設定用の関数
   
   useForm()の引数として、フォームに設定するデフォルト値なんかも設定できる
   
   
3. form要素のonSubmitイベントでuseForm()で取得したhandleSubmitをコール
   
   form要素で送信ボタンなどのsubmitをした際にhadleSubmitが呼ばれるようにする。
   hadleSbumitの引数として、実際に実行したい関数を設定しておく。
   指定した関数への引数として、4.で登録するinput要素のnameをキーにしたオブジェクトが設定されるので、それぞれの要素にアクセスしやすい。
   
   
4. input要素を管理下に登録
   
   useForm()で取得したregisterを使って、input要素を管理下に登録する。
   inputの属性として、registerも戻りが設定されるように記載する。
   
   <input type="text" {...register("account", { required: true,maxLength:{value:5,message:"５文字まで"} })} />
   
   regiserの引数として、第1引数にキーとなる名称、第2引数は任意で、簡易的なバリデーションの情報を設定する
   
   registerの前の...はスプレッド構文 (...) というらしく、オブジェクトや配列などを展開してくれる便利な構文だそうです。
   
   バリデーションは以下が使える。registerでの登録の際にはエラー時のメッセージも登録できる。
       required    必須
       min    最小値
       max    最大値
       minLength    最小文字数
       maxLength    最大文字数
       pattern    正規表現
       validate    オリジナルのチェック関数を設定
   
   
5. reset処理を追加（必要なら）
   resetを使うと管理要素をセットしなおしてくれる。
   引数なしだとすべて空にしてくれるが、オブジェクトでkey:valueを指定することによって
   上の例ではリセットボタンを
   ボタンのタイプをreset(<button type="reset">リセット</button>)としても空にはなる
   その際には、フックの対象にならないので、イベントが走らない。
   
   初期表示の値を入れるのであれば、以下のようにuseEffect()で実行させると入力済みにしてくれる。
   
       useEffect(()=>{
           reset({account:'start_string'})
       },[reset]);
   
   

Javascriptでサーバへアクセスするのにfetchメソッドを使ってみる。

 
以前は、 XMLHttpRequest や jQuery の ajaxメソッドを使ってサーバへのアクセスをしていたけど、今はfetchメソッドを使うとシンプルにかけそうなのでなんとくなくメモ。

前は非同期処理をする際に、コールバック関数をつなげていくような見通しがわるいコード
になってたけど、イマドキはpromiseが使えるので、見た目すっきりでいい感じ。


(参考)
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch


[基本的な使い方(promise)]

fetch(接続先文字列, { オプション })
 .then((response) => {
　 //Responseオブジェクトが引数に設定される
    //httpステータス404とかでもここまで到達するのでResponse.statusかResponse.okプロパティで正常か判定をしたほうがよい。
    if (!response.ok) {
        throw new Error();
    }
    //ResponseのBody部を戻り値にしてやるBodyに設定されているデータに応じて容易に取得するためのメソッドが用意されている
　 // バイナリ:response.blob(),JSON形式: response.json() ,Text形式: response.text() ,FomrData形式: response.formData()

    return response.json(); //bodyがJSON文字列の場合の取得例
 })
 .then((data) => {
    //前のthenのリターンが引数として設定される
    //response body部の処理を記述する想定
   
    
 })
 .catch((error) => {
    // ネットワークトラブルか、then句での例外などの処理を記述
 });


<<GETの場合>>
オプションは省略可能
fetch(接続先文字列)


<<POSTの場合>>
オプション部分で、method,cache,bodyを指定する
fetch(接続先文字列, {   
    method: 'POST',
        cache: 'no-cache',
        headers: {
              'Content-Type': 'application/json',
        },
        body: data  //送りたいデータ
 }
)

bodyに設定設定するのは、テキストかformData,バイナリと何でもよい。

[json文字列の場合]
 適当なオブジェクト(data)をJSON.stringify(data)としてJSONに変換するだけでＯＫ
   body:JSON.stringify(data)

 ※オプション部分にヘッダーとして、Content-Typeなどを設定するとよい。
  headers: {
    'Content-Type': 'application/json',
  },

[formDataの場合]
ファイルアップロードとかする場合はformDataのほうがよさげ。
const data = new FormData();
let blob = new Blob(['Sample text'], {
    type: 'text/plain'
});data.append('data1', blob, 'foo.txt');

React Routerで画面遷移をするときのメモ

 Reactで画面を切り替えるのに、React Routerが使えそうだったのでなんとくメモ。

 ざっくりとした感覚だと、URLのパスを条件として、呼び出すコンポーネントを切り替える感じ
 パスが切り替わったタイミングで、判定してくれるので、React Routerの用意するLinkやuseHistory()でするhistory.push()やhistory.replace()、あとはwindow.location.hrefなどでパスを操作することで、表示するコンポーネントを切り替えることができる。
 

[ドキュメント]

 　　https://reactrouter.com/

[インストール]　

　　$npm install react-router-dom

[ソース内での書き方]

1.  ルーティングをするソースでのインポート

import {
  BrowserRouter,
  Switch,
  Route
} from 'react-router-dom';


2.  ルーティングの定義
（記述例）
<BrowserRouter>
 <Switch>
   <Route exact path="/" component={Login}  />
   <Route exact path="/top" component={Top}  />
 </Switch>
</BrowserRouter>


   • BrowserRouter
     React Routerでコンポーネントを切り替える位置に配置する。
     BrowserRouterで切り替える子コンポーネント内でも再度切り替えるための記述可能。
     特にパラメータは不要。
     
     
   • Swtich
     BrowserRouterの子要素として切り替える条件を囲うために配置する。
     子要素としてRouteを配置する。
     
     
   • Route
     ルーティング条件を記述するために配置する。切り替える条件分配置する。
     パラメータとして、条件となるパスを定義するpathと条件に一致する際に呼び出すコンポーネントを定義するcomponentを設定する。
     pathだけだと部分一致になるので厳密な一致を条件とする場合はexactをパラメータとして追加する。path部分は正規表現やパスをパラメータとして受け取るための定義もできるのでいろいろと使えそう
     
     
3. URLパスの切り替え
URLのパスの切り替えは大まかに以下の３つ

   • React Routerが用意するLink
     import {Link} from 'react-router-dom';//インポート
     
     <Link to {path="/next/"}>次へ</Link>
     
     
   • React Routerが用意するhistoryの操作
     ※関数コンポーネントの場合はフックでuseHistory()を使える
     
     import {useHistory} from 'react-router-dom';//インポート
     
     let {history} = useHistory();
     const next =()=>{history.push("/")};//履歴が残る
     const back=()=>{history.replace("/")};//履歴が残らない
     
     
   • windowsオブジェクトのlocation.hrefの操作
     普通にwindows.location.href="/"としても操作できる
     

 

Reactでテーブル表示にMaterial-Tableを使うときのメモ

サーバから取得したデータを表形式で表示することが多いので、テーブル関連を探していたら、Mateial-UIの拡張として、Material-Tableなるものがあったのでとりあえずメモ。

Material-UIがインストールされていることが前提。

[ドキュメント]

 　　https://material-table.com/#/

[インストール]　

　　$npm install --save material-table

[ソース内での書き方]

1. とにもかくにもインポート


   import MaterialTable from 'material-table';

   
   
2.  JSXの中での記述
   MaterialTableのタグに属性値としてtittle,columns,dataなどを渡す。
   プロパティはここを参照
   <MaterialTable
           title={"Material-tableテスト"}
           columns={[
             { title: 'カラム1', field: 'col1' },
             { title: 'カラム2', field: 'col2' }
           ]}
           data={[
             
             { col1: 'データ１', col2: 'データ３' },
             { col1: 'データ２', col2: 'データ４' }
           ]}
           options={{
             showTitle: true,
           }}
         />
   
   
   

ReactでMaterial-UIを使ってみる

 ReactでUIを作るときにMaterial-UIが便利そうだったので、導入部をメモ

 [ドキュメント]

https://material-ui.com/ja/ 

[導入]

1. Material-UI のコアをインストール
   $npm install @material-ui/core


2. index.htmlにRoboフォントとフォトアイコンを使えるようにしておくためのおまじないを追加
   
   <meta  name="viewport"  content="minimum-scale=1, initial-scale=1, width=device-width"/>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
3. SVGアイコンを使う場合はアイコンをインストール
   $npm install @material-ui/icons

以下のサイトで使えるアイコンを探せる
https://material-ui.com/components/material-icons/
   

[ソース内での書き方]

1. とにもかくにもインポート
   

   import Button from '@material-ui/core/Button';
   もしくは
   import { Button } from '@material-ui/core';

   後者だと、
   import { Button,Menu } from '@material-ui/core';

   のように書ける。

   
   
2. JSXの中での記述
   function App() {
     return (
       <div className="App">
           <Button>あああ</Button>
       </div>  
     );
   }
   
   Buttonのように、先頭は大文字で記載する。
   パラーメータなどは属性値として記述すればいい。
   

QGISでpythonによるプラグイン開発メモ

 QGISはpythonでプラグインを作る環境がついているので、なんとなくメモ

 

[GIS初中級者のためのPython入門]
https://gis-oer.github.io/gitbook/book/materials/python/

[QGIS3でpythonプラグインを作ってみた その1 ベース作成]
https://qiita.com/ozo360/items/399d3257bf4c24bf27e4

[QGIS3.x系向けプラグイン作成手順や各種処理の実装方法について]
https://qiita.com/Kanahiro/items/205d1128dcdaf3ad9506

[QGISを用いたプラグインツールの作成手法について]
https://www.apptec.co.jp/technical_report/pdf/vol24/treport_vol_24-05.pdf

GeoPackage,SpatiaLite のメモ

 PostgreSQLの位置情報拡張がPostGISとするとSQLiteの同じような拡張で、SpatiaLiteってのがあったので、とりあえずメモ。

 

ＱＧＩＳ 3.xだと画面操作でSpatiaLiteのデータベースファイルの作成したり、レイヤデータをデータベースにインポートできる。

DBマネージャー経由だと、テーブルの追加やクエリ（SQL)の実行などもできて便利。

レイヤーデータを一つのファイルで管理できるのですっきり。

ほぼ同様なもので、GeoPackageなるものがある。QGISはこちら推しのもよう。
違いはよくわかってないが、個人的感覚的に

　GeoPackage　ファイルフォーマット
　SpatiaLite      SQLiteの拡張  
 とった使い分け（？）のように感じる。

QGISでも直接扱えるほか、Leaflet.jsとLeaflet-geopackageを利用すすると、geopackageのファイルを直接指定するだけで、地図に表示できるみたい。

(参考)
https://day-journal.com/memo/try-054/

React-leaflet関連のメモ

 Reactで地図を表示して、マーカーやらポリゴンなどを後から操作で追加するようなことを考えていた場合、react-google-map/apiなどはちょっと使いづらい。

 調べてたら、leafletが使いやすく、react-leafletってあったので、とりあえず参考になりそうなリンクをメモ

 

[React Leaflet]
https://react-leaflet.js.org/ 

[React-leafletの使い方メモ]
https://qiita.com/studio_haneya/items/fbb52fa03ab4f212ced0

React関連で参考になりそうなページ

 Reactで始めるうえで、参考になりそうなページをなんとなくメモ

画面の構成部品(状態とVIEW)をJavascript(とJSX)で作って、それらをJSXつなげて一つの画面を作るイメージ。JSXのタグとコンポーネントが一致するので１画面だけを作るだけだと楽そうだけど、画面遷移（VIEWの切り替え）やVIEWをまたぐ処理を書こうとするとめんどくさそう。
状態管理や画面遷移簡単にするために、ReduxやReact Routerなどがあるけど、コードは結構複雑に見える。
React UI Builderとかで手軽にUIを構成できるように使えるならば、そこしは楽になるんだろうか？
React NativeやElectronでスマホアプリやデスクトップアプリへも比較的容易に拡張できそうなので、そのあたりも調べてみたい。
日本ではVue.jsも人気らしいけど、そっちのほうが楽なのか？おいおい調べてみる。

[開発環境]

node上でcreate-reacte-appでまとめて構築するか、webpack,Babelでこつこつ環境を整えるみたい。

(webpackとBabelの基本を理解する)
https://qiita.com/koedamon/items/3e64612d22f3473f36a4

(Create React App)
https://create-react-app.dev/docs/getting-started/

 

[React]

(React本家の日本語ページ)
https://ja.reactjs.org/
(基礎からはじめるReact入門)
https://codezine.jp/article/corner/688
(基礎からはじめるReact入門 第1回)
https://codezine.jp/article/detail/9878
(今から始めるReact入門 ? React の基本)
https://qiita.com/TsutomuNakamura/items/72d8cf9f07a5a30be048
(はじめてのReact)
https://blog.katsubemakito.net/series/react_1st
(わくわくBank./Reack)
https://www.wakuwakubank.com/categories/react/

[React-Router]

(React Routerで複雑な画面遷移をシンプルに実装する)
https://codezine.jp/article/detail/10624
(今からはじめるReact.js?画面遷移?)
https://qiita.com/kuniken/items/89c8bbef3b71d2af662d
(React入門 ～React Router編～)
https://zenn.dev/h_yoshikawa0724/articles/2020-09-22-react-router

[Redux]

(Reac初心者でも読みば必ずわかるReactのRedux講座)
https://reffect.co.jp/react/react-redux-for-beginner
(Reactで管理画面をつくるときに便利だったライブラリ集と所感)
https://qiita.com/maruware/items/07e77c5882ca88d1ff3c

[UI関連]

(Material-ui)
https://material-ui.com/ja/
(React入門 ～Material UI編～)
https://zenn.dev/h_yoshikawa0724/articles/2020-09-24-react-material-ui
(Material-UIで一覧画面を作ってみる（React）)
https://qiita.com/m-oishi/items/6264fd2765736d874f9d
(早く・それなりの UI を実現する React コンポーネントセット 16 選)
https://qiita.com/kyrieleison/items/39ce30dd2d204791a9ea?utm_content=bufferdf1f8&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer
(React.js Examples)
https://reactjsexample.com/

 

[Reactと位置情報、GoogleMap関連]
(Geolocation APIを使って位置情報を取得するサンプルをReactで書いてみる)
https://qiita.com/shinshin86/items/63142a4d4b498d562fba
(ReactでGoogleMapAPIの使い方)
https://qiita.com/uoti/items/3ccfc168924cde76de5a
(javascript:Reactコンポーネント内でGoogle Map APIを使用する)
https://www.fixes.pub/program/50756.html
(初めてのGoogle Maps API by React)
https://qiita.com/theFirstPenguin/items/dc94aeb1595df1a0aa56#%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%A8%E6%83%85%E5%A0%B1%E3%81%AE%E8%A1%A8%E7%A4%BA
(ReactでGoogle mapをお届けする)
https://qiita.com/miyabiya/items/98c8a177e6077ee50971

[ReactとQRコード関連]

(React で QRコード表示機能を実装)
https://qiita.com/hujuu/items/b12ff32f189f5ab620ca
(QRコードリーダーをReactアプリケーションに実装する方法 )
https://ichi.pro/qr-ko-do-ri-da-o-react-apurike-shon-ni-jissosuru-hoho-59617978014841
(【React】 React で QRコードを読み取る)
https://h-s-hige.hateblo.jp/entry/20190325/1553505904

Windows10にnode.jpとnpmをインストール

 Windows10にもnode.jsを入れたくなったので、なんとくなくメモ。

配布されているインストーラでインストールすると、node.jsのほかにもれなくnpmもインストールされてました。

 

[ダウンロードページ]

https://nodejs.org/ja/download/

Postgisで緯度経度が含まれるポリゴンを特定する

 緯度経度から、ポリゴンに含まれる判定する場合、ST_Contains()が使える。

 ST_Contains(A,B)で、AにBが含まれているか確認できる。

A,Bともに、Geometry型である必要があるが、POINT,POLYGONなど使える。

このため、Aにポリゴン、BにPOINT（緯度経度）を指定することで、緯度経度がポリゴンに含まれるか判定ができる。

例）いわき市の座標（140.8815066 37.0687356）がadmareテーブルのgeom項目に設定されるポリゴンデータに含まれるか判定し、市/村(cn2)を取得する際のSQL

select cn2 from admarea where ST_Contains( geom,ST_GeometryFromText('POINT(140.8815066 37.0687356)',4612))

 

 

PostGISにポリゴンデータ(shp)を登録する

PostGISにポリゴンデータとしてShpファイルを取り込んでみたので、とりあえずメモ。

（参考）
[PostGISを使ってみよう]
https://lets.postgresql.jp/documents/tutorial/PostGIS
[PostGISを入れるところからやってみよう]
https://zenn.dev/boiledorange73/books/b1de0a18073af70946e0

 

shpファイルは、そのままでは取り込めないので、shp2pgsqlコマンドで、shpファイルをsqlに変換する。

変換元となるshpファイルは、.shp,.dbf,.shxの３つのファイルが１セットとなるので、おなじディレクトリに配置すること。

Shpファイルに含まれる属性はすべてテーブルの項目として設定される。
ジオメトリを扱うカラムは"geom"として作られ(-gで名前は変えられる）、空間インデックスも作ってくれる。

以下は、データベース名:hoge_db,テーブル:tb_hogeにtest.shpファイルのデータを取り込むときの手順。

(手順）

1. テーブル定義を作る（最初だけ)
   

   > shp2pgsql -p -W cp932 -D -I -s 4612 test.shp tb_hoge > tb_hoge.sql
   
   

   • -p : テーブル定義のみ
   • -W cp932 : は文字コードを932指定
   •  -D : ダンプ形式を指定
   •  -I : 空間インデックスの作成を指定
   • -s 4612 : 空間参照系を4612 (JGD2000地理座標系)を指定


2. テーブル定義をDBに取り込み

   > psql hoge_db -f tb_hoge.sql

3. データ取り込み用SQLを作る

   > shp2pgsql -a -W cp932 -D -s 4612 test.shp tb_hoge > test_data.sql
   
   

   • -a :データのみ　※-Dを指定しない場合はinsert文になる

   • -W cp932 : は文字コードを932指定
   •  -D : ダンプ形式を指定
   • -s 4612 : 空間参照系を4612 (JGD2000地理座標系)を指定


4. データをDBに取り込む

   > psql hoge_db -f test_data.sql

初めに1.,2.の手順で、テーブルを作っておき、その後は、3.,4.でデータを追加するイメージ。
データ取り込みが１回だけで終わるなら、　1.の手順で-pを外せば、テーブル定義とデータ取り込みをしてくれるＳＱＬができる。取り込み手順は2.でＯＫ

Windows PowerShellから特定ポートの疎通確認

Windows10から同一ネットワーク上のLinuxのポートに対して疎通確認をしたかったので、とりあえずメモ

PowerShellが利用できる必要があるけど、Test-NetConnection　を利用すると確認はできる。

以下は192.168.1.45 の80ポートへの接続例

> Test-NetConnection 192.168.1.45 -Port 80


ComputerName     : 192.168.1.45
RemoteAddress    : 192.168.1.45
RemotePort       : 80
InterfaceAlias   : イーサネット 2
SourceAddress    : 192.168.1.65
TcpTestSucceeded : True

 

 

Visual Studio Codeでサーバにファイルをアップロード

 Visual Studio Codeで編集したファイルをVisual Studio Codeの画面からサーバにアップロードしたかったので、なんとなくメモ

 機能拡張でSFTPを追加。検索するといろいろ出てくるけど、一番初めに出てきたliximomo製をインストールして使ってみる 

 コマンドパレットで、「SFTP:Config」と入力して選択すると、sftp.jsonという設定ファイルが出てくるので、接続先となるサーバの環境に合わせて編集する。

複数のワークスペースがあると、それぞれsftp.jsonが作れるので、環境によってわけることが可能みたい。

 標準では以下の情報を編集ができる。

{

    "name": "My Server",

    "host": "localhost",

    "protocol": "sftp",

    "port": 22,

    "username": "username",

    "remotePath": "/",

    "uploadOnSave": true

}

 

 

Ubuntu20.04 LTS Serverにnode.jsの最新バージョンをインストール

node.jsを使ってみたくなったので、インストール方法をなんとなくメモ。

(参考)

https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-ja

 

とりあえず最新バージョンを一つだけインストールしたかったので、PPAを追加してaptでインストールしてみた。

$curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
$sudo bash nodesource_setup.sh
$sudo apt install nodejs
$node -v 

  最新が14.16.1だったので、１つ目の指定は14.x。新しいバージョンが出てたら変わるんだと思う。

 

Visual Studio Codeのインストールと日本語化

Visual Studio Codeを使いたくなったので、とりあえずメモ

(ダウンロードページ）

https://code.visualstudio.com/download 

（日本語化） 

1. ［View］→［Command Palette］→［Configure Display Language］を選択
2. ［Install Additional Laugage］を選択して［Japanese Language Pack for Visual Studio Code］の［Install］ボタンをクリック
3. VS Codeが再起動する。

 

(PostgreSQL拡張機能）

拡張機能マーケットから Postrgresqlで検索するといくつか出てくる。

Microsoft製を使ってみる。

 

Ubuntu20.04 LTS ServerにPostgreSQL12,PostGIS3 Pgadmin4 インストール

Ubuntu20.04 LTS ServerにPostgreSQL 12, PostGIS3 ,PgAdmin4をインストールしたかったので、なんとなくメモ

 

以下サイトを参考にさせてもらいました。 

https://computingforgeeks.com/how-to-install-postgis-on-ubuntu-debian/

https://www.kkaneko.jp/tools/postgresinstall/pgadmin4linux.html

https://postgresweb.com/install-pgadmin4-ubuntu-20-04 

（モジュールのインストールと起動）

1. sudo apt update 
2. sudo apt -y install curl ca-certificates gnupg
3. curl https://www.postgresql.org/media/keys/ACC
4. sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'C4CF8.asc | sudo apt-key add -
5. sudo apt -y update
6. sudo apt -y install postgresql-12 pgadmin4 postgresql-12-postgis-3
7. sudo service postgresql start
   

（ユーザ作成とデータベース作成)

1. sudo su - postgres
2. createuser -P -d xxx
3. exit
4. createdb -E UTF-8 test_db
5. psql test_db
6. CREATE EXTENTION postgis;
7. select postgis_versioin();

 (外部からのPostgreSQLデータベースへのアクセス設定）

[postgresql.confの編集]   ※/etc/postgresql/12/main

　　listen_addresses = '*' # what IP address(es) to listen on;

[pg_hba.confの編集]　※/etc/postgresql/12/main

     ※192.168.1.xからのアクセスする場合は以下を追加

　　host all all 192.168.1.0/24 md5

[postgresqlの再起動]

      $sudo service postgresql restart

 

 

 

 

 

国土交通省のGISホームページ

 GISがらみでいろいろと試してみたかったので、参考にメモ

 

https://nlftp.mlit.go.jp/index.html

Ubuntu20.04 LTS serverでapache2のインストールとSSL有効化

PWAを試すのに、httpsでのアクセスが必要だったので、apache2のインストールとSSLを有効化する手順をメモ

1.  インストール
   $ sudo apt-get install apache2
2. SSL有効化
   $ sudo a2enmod ssl
   $ sudo a2ensite default-ssl
3. 再起動
   $ sudo systemctl restart apache2
4. 確認
   $ ss -lnt

デフォルトのコンテンツ配置先はhttp(80),https(443)どちらのアクセスも

   /var/www/html

の模様。 index.htmlがおいてあるので、必要に応じて書き換え

Ubuntu 20.04 LTS Server の設定

１） インストール
　　Ubuntuのサイトからダウンロード

            https://jp.ubuntu.com/download

２）日本語環境設定

1. アップデート
   

   $ sudo apt update
   $ sudo apt upgrade

2. 言語パックのインストール_
   

   $ sudo apt install language-pack-ja-base language-pack-ja ibus-mozc

3. 文字セットを変更
   

   $ sudo localectl set-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja"

4. ~/.bachrcへ追加
   

   case $TERM in
       linux) LANG=en_US.UTF-8;;
       *)     LANG=ja_JP.UTF-8;;
   esac

   
   
5. タイムゾーンの設定
   

   $ sudo dpkg-reconfigure tzdata

   上記実行後に東京を選択 

３） IPアドレスの固定化

1. 　/etc/netplan/に99_config.yamlを追加する。
   以下は固定IPアドレスとして192.168.1.45の例。
   ※インターフェイス名は元の00-installer-config.yamlに合わせればよい。
   
   -----ここから----
   network:
     version: 2
     renderer: networkd
     ethernets:
       enp0s3:
         dhcp4: false
         dhcp6: false
         addresses: [192.168.1.45/24]
         gateway4: 192.168.1.1
         nameservers:
           addresses: [192.168.1.1, 8.8.8.8, 8.8.4.4]
   ----ここまで------
   
   
   
   
   
2. sudo netplan applay で反映
    

VirtualBox でマウスカーソル脱出

Virtual Box6.1でVＭ起動後のコンソールからマウスカーソル出てこれなくなったので、解決方法をなんとなくメモ

 右Ｃｔｌボタンを押す