C++幼女先輩

プログラミング成分多め

UNITY URPのお勉強。URP対応の簡単なシェーダー作ってみる

UNITYちゃんを表示

URPのプロジェクトに旧来のUNITYちゃんを表示してみると

f:id:murasame-labo:20210123010041p:plain

シェーダーが対応していないよね
もちろん、シェーダーをURPのものにすれば、とりあえずエラーは解消されるし
URPやHDRPに対応したUNITYちゃんもダウンロード可能なので
そちらを使うのが良いが
ちょうどいいので、これでシェーダーを試してみようと思う

f:id:murasame-labo:20210123010402p:plain

GUI関連もエラーが出ているなあ・・・

簡単なURPシェーダー

先日の調査でURPのパスはDeferredやDepthOnly等複数のパスが存在した

github.com

が、推測ではForwardLitパスだけで、簡単な表示は出来そうだ

テンプレート

UNITYのメニューから、Create->Shader->Unlitでデフォルトのシェーダーを作成し貼り付ける

f:id:murasame-labo:20210123011924p:plain

ライティング無し、テクスチャのみ、半透明に対応してないのでチークは変になってるが
最低限のシェーダーは作れた
影もない

仮に一部のマテリアルをURPのLitに差し替えると

f:id:murasame-labo:20210123013638p:plain

影は表示されている

Templateで生成されたものをみると

Shader "MyShader/URPTest"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                UNITY_FOG_COORDS(1)
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                UNITY_TRANSFER_FOG(o,o.vertex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv);
                // apply fog
                UNITY_APPLY_FOG(i.fogCoord, col);
                return col;
            }
            ENDCG
        }
    }
}

特に名前のないパスがあるだけで、ShadowCaster等のパスもないので当然

一応?礼儀正しく? Passの名前をちゃんとしていし、動きが同じことを確認

        Pass
        {
            Name "ForwardLit"
            Tags { "LightMode" = "UniversalForward" }

            CGPROGRAM

ShadowCaster Pass

古よりのUNITYのシェーダーパス、ShadowCasterを追加すれば影を落とす事ができる

        Pass {
            Name "ShadowCaster"
            Tags { "LightMode" = "ShadowCaster" }

            ZWrite On ZTest LEqual

            CGPROGRAM
            #pragma target 3.0


            #pragma vertex vertShadowCaster
            #pragma fragment fragShadowCaster


            struct VertexInput {
                float4 vertex : POSITION;
            };
            struct VertexOutput {
                float4 pos : SV_POSITION;
            };

            VertexOutput vertShadowCaster(VertexInput v) {

                VertexOutput o = (VertexOutput)0;
                o.pos = UnityObjectToClipPos(v.vertex);
                return o;
            }

            float4 fragShadowCaster(VertexOutput i) : SV_TARGET {
                return 0;
            }


            ENDCG

        }

あえて、古いシェーダーを書いている
URPのシェーダーを読んでいると今はCGPROGRAMではなくHLSLPROGRAMを使い
CG言語ではなくHLSLでシェーダーを書くのが主流っぽい?し
GPU Instancing等が入っているが、今回は古のシェーダーで調査だ

f:id:murasame-labo:20210123014902p:plain

このとおり、ShadowCasterはうまくいった(ただし、Shadowを受け取る側はできていないので、床はURPのシェーダーを使っている)

ShadowRecieve

昔のUNITYではShadowRecieveパスがあったような記憶があるけど今はライトのパスで行っている

まずは古のシェーダーで書いてみる

過去に書いた自分の記事の通りに
murasame-labo.hatenablog.com

この通りに書くが影が表示されない

SHADOW_ATTENUATION、LIGHT_ATTENUATIONがきかない(1,1,1) が帰ってきてるようなかんじ
UNITYの質問で同じような事があったので調べる
forum.unity.com

pragma multi_compile _ _MAIN_LIGHT_SHADOWS

pragma multi_compile _ _MAIN_LIGHT_SHADOWS_CASCADE

を書けばいいというようなことを書いているが、それでもダメ
色々なフラグを追加してもダメ

該当部分のコードをみてみると

void MainLight_half(float3 WorldPos, out half3 Direction, out half3 Color, out half DistanceAtten, out half ShadowAtten)
{
    #if SHADERGRAPH_PREVIEW
        Direction = half3(0.5, 0.5, 0);
        Color = 1;
        DistanceAtten = 1;
        ShadowAtten = 1;
    #else
        #if SHADOWS_SCREEN
            half4 clipPos = TransformWorldToHClip(WorldPos);
            half4 shadowCoord = ComputeScreenPos(clipPos);
        #else
            half4 shadowCoord = TransformWorldToShadowCoord(WorldPos);
        #endif
            Light mainLight = GetMainLight(shadowCoord);
            Direction = mainLight.direction;
            Color = mainLight.color;
            DistanceAtten = mainLight.distanceAttenuation;
 
        #if !defined(_MAIN_LIGHT_SHADOWS) || defined(_RECEIVE_SHADOWS_OFF)
            ShadowAtten = 1.0h;
        #endif
 
        #if SHADOWS_SCREEN
            ShadowAtten = SampleScreenSpaceShadowmap(shadowCoord);
        #else
            ShadowSamplingData shadowSamplingData = GetMainLightShadowSamplingData();
            half shadowStrength = GetMainLightShadowStrength();
            ShadowAtten = SampleShadowmap(shadowCoord, TEXTURE2D_ARGS(_MainLightShadowmapTexture,
            sampler_MainLightShadowmapTexture),
            shadowSamplingData, shadowStrength, false);
        #endif
    #endif
}

該当部分がちゃんと計算されるようなパスになるようにしたつもりだけど上手く動かない

シェーダーをコンパイルすると下記のエラー
f:id:murasame-labo:20210123071916p:plain

'ComputeScreenPos': no matching 1 parameter function
Compiling Vertex program with DIRECTIONAL SHADOWS_SCREEN VERTEXLIGHT_ON _MAIN_LIGHT_SHADOWS_CASCADE
Platform defines: UNITY_ENABLE_REFLECTION_BUFFERS UNITY_USE_DITHER_MASK_FOR_ALPHABLENDED_SHADOWS UNITY_PBS_USE_BRDF1 UNITY_SPECCUBE_BOX_PROJECTION UNITY_SPECCUBE_BLENDING UNITY_ENABLE_DETAIL_NORMALMAP SHADER_API_DESKTOP UNITY_LIGHT_PROBE_PROXY_VOLUME UNITY_LIGHTMAP_RGBM_ENCODING
Disabled keywords: FOG_LINEAR FOG_EXP FOG_EXP2 LIGHTPROBE_SH SHADOWS_SHADOWMASK DYNAMICLIGHTMAP_ON LIGHTMAP_ON LIGHTMAP_SHADOW_MIXING DIRLIGHTMAP_COMBINED UNITY_NO_DXT5nm UNITY_ENABLE_NATIVE_SHADOW_LOOKUPS UNITY_METAL_SHADOWS_USE_POINT_FILTERING UNITY_NO_SCREENSPACE_SHADOWS UNITY_PBS_USE_BRDF2 UNITY_PBS_USE_BRDF3 UNITY_NO_FULL_STANDARD_SHADER UNITY_HARDWARE_TIER1 UNITY_HARDWARE_TIER2 UNITY_HARDWARE_TIER3 UNITY_COLORSPACE_GAMMA UNITY_HALF_PRECISION_FRAGMENT_SHADER_REGISTERS UNITY_LIGHTMAP_DLDR_ENCODING UNITY_LIGHTMAP_FULL_HDR UNITY_VIRTUAL_TEXTURING UNITY_PRETRANSFORM_TO_DISPLAY_ORIENTATION UNITY_ASTC_NORMALMAP_ENCODING SHADER_API_GLES30  
  
invalid subscript 'pos'
Compiling Vertex program with DIRECTIONAL SHADOWS_SCREEN VERTEXLIGHT_ON _MAIN_LIGHT_SHADOWS_CASCADE
Platform defines: UNITY_ENABLE_REFLECTION_BUFFERS UNITY_USE_DITHER_MASK_FOR_ALPHABLENDED_SHADOWS UNITY_PBS_USE_BRDF1 UNITY_SPECCUBE_BOX_PROJECTION UNITY_SPECCUBE_BLENDING UNITY_ENABLE_DETAIL_NORMALMAP SHADER_API_DESKTOP UNITY_LIGHT_PROBE_PROXY_VOLUME UNITY_LIGHTMAP_RGBM_ENCODING
Disabled keywords: FOG_LINEAR FOG_EXP FOG_EXP2 LIGHTPROBE_SH SHADOWS_SHADOWMASK DYNAMICLIGHTMAP_ON LIGHTMAP_ON LIGHTMAP_SHADOW_MIXING DIRLIGHTMAP_COMBINED UNITY_NO_DXT5nm UNITY_ENABLE_NATIVE_SHADOW_LOOKUPS UNITY_METAL_SHADOWS_USE_POINT_FILTERING UNITY_NO_SCREENSPACE_SHADOWS UNITY_PBS_USE_BRDF2 UNITY_PBS_USE_BRDF3 UNITY_NO_FULL_STANDARD_SHADER UNITY_HARDWARE_TIER1 UNITY_HARDWARE_TIER2 UNITY_HARDWARE_TIER3 UNITY_COLORSPACE_GAMMA UNITY_HALF_PRECISION_FRAGMENT_SHADER_REGISTERS UNITY_LIGHTMAP_DLDR_ENCODING UNITY_LIGHTMAP_FULL_HDR UNITY_VIRTUAL_TEXTURING UNITY_PRETRANSFORM_TO_DISPLAY_ORIENTATION UNITY_ASTC_NORMALMAP_ENCODING SHADER_API_GLES30

ちょっと影関連の計算はURPでは大きく変わってるのかなあ・・・
って事で、後日調査しますか。。

URPの勉強をする。概要

趣旨

Unityが従来の固定レンダリングパイプライン(BuiltIn RP)の後継にURPを指名した
ので、早急にURPを調査する必要がある

blogs.unity3d.com

UNITYのレンダリングパイプライン

SRP

UNITYのレンダリングは下記のようなパイプラインで行われる

それらのパイプラインは、UNITYエンジンでハードコーディングされており、BuiltIn RPと呼ばれる
UNITY2018より、PreviewとしてScriptable Render Pipeline(SRP)がテスト実装された
SRPでは、レンダリングパイプラインをプログラマが自由に変更できるようになった

blogs.unity3d.com

LWRP, HDRP, URP

レンダリングパイプラインを変更すると、シェーダーも全部作り直す必要があり
非常にコストが高いため
ある程度汎用的な2つのパイプラインをUNITY社は用意をした

ハイクオリティーレンダリング用途のHDRP(High Definition Render Pipeline)と
低スペック端末用のLWRP(Light Wait Render Pipeline)

そして、従来LWRPと呼んでいたものを、UNITY2020からURP(Universal Render Pipeline)と改名し
BuiltIn RPの後継に指名した

note.com

コードリポジトリ

BuiltIn Shaderのコードリポジトリは見つけられなかったが、下記でバージョンごとにダウンロードできる ダウンロードタブを押すと、ビルトインシェーダーを選択できる
unity3d.com

レンダーパイプラインはリポジトリが公開されているので、対象のバージョンをTagで指定してダウンロードできる
github.com

使っているUNITYのRenderPipelineのバージョンを調べるには、UnityPackageManagerでRP等で検索してバージョンを調べる
例えば、Unity2020.2.1 だと、v10.2.2である
f:id:murasame-labo:20210120031600p:plain

シェーダーの書き方

UNITYのシェーダーはHLSLベースの、ShaderLabという言語で書く
テキストエディタで作る
シェーダーのフル機能を使う事が出来る
私の知る限りだが、ビジュアルスクリプティングでは一部の表現が出来ない

ビジュアルスクリプティング

以前より優良アセットとして、ShaderForge、Amplify Shader Editorがある(あった)
ShaderForgeは開発中止されたが、Amplifyは今でも使われていて、URPにも対応しているらしい
UNITY社はShaderGraphを無料で提供し、当然URPにも対応している
一部出来ないことはあるかもしれないが、ノードベースでシェーダーを書きたい人の選択肢になればと

URP プロジェクトを作ってみる

プロジェクトの作成は簡単
UnityHubで新規プロジェクト作成時にURPプロジェクトのテンプレートがあるので作成する

f:id:murasame-labo:20210120050056p:plain

そこに、仮に独自シェーダーのモデルをImportすると

f:id:murasame-labo:20210120045304p:plain
ShaderError

URPに対応していないシェーダーなのか、シェーダーエラーになる

仮に、URP/Unlitシェーダーを適用すれば、テクスチャがはられたのみのモデルが表示される

f:id:murasame-labo:20210120045024p:plain
URP/Unlit

URP/Unlitシェーダーを覗く

github.com

チラ見で気になるのが、SRP batching
軽くみたかんじ、BuiltIn RPでは同じマテリアルでしかBatchingが出来なかったが
SRP(URP)では、異なるマテリアルであっても、シェーダーが同じであればInstancing出来るようだ
そのため、他のシェーダーとも共通化してあるのかな

        // SRP batching compatibility for Clear Coat (Not used in Lit)
        [HideInInspector] _ClearCoatMask("_ClearCoatMask", Float) = 0.0
        [HideInInspector] _ClearCoatSmoothness("_ClearCoatSmoothness", Float) = 0.0

URPには、 "RenderPipeline" = "UniversalPipeline" Tagが必要そう

独自のシェーダーパスも簡単に作れそうだ
qiita.com

今度は簡単なURP対応シェーダーを作ろうと思う

Windowsネイティブにも開発環境作る

理由

私の今のPC環境は
超スペックのWindowsデスクトップ
ハイスペックWindowsノートPC(ただしバッテリー爆発)
低スペックMacbookPro(ProではあるがWindowsマシンと比較するとスペックが酷い。値段は同じなのに・・)

仕事が落ち着いたら、AWS Cloud9でリモート開発環境を作る予定だが、それまでのつなぎ。
いや、WindowsデスクトップはAWSよりスペックいいはずなので、こっちではPCで開発するかもしれない

Windowsデスクトップの問題

WSL2+Docker for Windowsの開発環境が最強すぎて、満足しているが
まだ技術の過渡期なのか、WindowsUpdateで頻繁にエラーが出る
ので、安定した環境を考えている
もちろん、VirtualBoxLinux入れてそこにDocker入れれば問題ないんだけどね
ただ、VirtualBoxHyper-Vとの相性の悪さもある

ただ、ネイティブのWindowsでの開発もわりと最近便利になっているので、それの調査も兼ねて、ローカル環境を構築する
コマンドプロンプトPowerShellを使うのも面倒だけど、最近はGitBashなりもあるし、何とかなるかな・・・

今回の開発環境

AWS Client系、node.js関連の構築と行い、AWS Amplify、AWS SAM、ServerlessFramework、ServerlessOffline等のテストをしてみたいと思う
フロントはionicフレームワークを試す。こちらはMacのみ正式対応だが、Windowsでどこまで出来るかも試したい(結局iPhoneビルドでMacは必要だが)

node環境

nodist

Windowsの場合はnodeのバージョン管理ツールとしてnodistを使う事が多いと思われる

Releases · nullivex/nodist · GitHub

ここからダウンロードしインストールを行う。
ここで問題が一つおきた。

PATH not updated, original length 1040 > 1024

というエラーが出て、結果的にインストールはできたものの、nodistにパスが通っておらず使いにくい
Windowsのパスの制限は色々と話はあるが、まずは不要になったPathを捨てたり、User環境変数で良いものはそちらに移したりした
で、細かい仕様は調べてもらうとして・・
大雑把にいうと、環境変数の文字数は

  • 内部的には32767文字ほど使える
  • コマンドプロンプトの制限で8192文字に制限される
  • プロセスの環境変数制限が2047文字
  • setx コマンドの制限が1024文字

結論から言うと、nodistインストーラではsetxを使っているので1024文字制限があるが、環境変数を自分で設定すれば
システムとユーザで約2000文字ずつ環境変数の設定が可能なので、自力で

C:\Program Files (x86)\Nodist\bin

これをPathに追加すればよい

Pathの環境変数をどうしても2000文字以内に出来ない場合は、VisualStudioのように
環境変数をカスタマイズしたコマンドプロンプトの起動バッチを作るのがWindows

nodeバージョン

Amplify Cliでは、node 10.x以上、npm6.x以上が推奨 Install & Configs :: title

ionicは node10.3以降(最新LTS推奨)との事
Ionic CLI - Ionic Framework 日本語ドキュメンテーション

AWS Lambdaでは、Nodeは 12.x、10.xのランタイムで動く
AWS Lambda ランタイム - AWS Lambda

という事で、12.19.0をインストールした(14xをインストールしたら、ionicがエラー吐いたので)
npmも更新し、npxも入れる(nodistはnpxが入らないらしい)

$ nodist 12.19.0
$ nodist npm 6.14.8
$ npm i npx -g

Java環境

AmplifyはMockingが出来て便利だ
Mockを使うとサーバにUploadせずにローカルで動かすことが出来て非常に便利だ
前に試したところ、AmplifyをPushすると5分ほどはデプロイに時間がかかり、開発が辛かった
その、MockingにはJavaが必要
Javaは OpenJDK 1.8以降が必要

Install & Configs :: title

ただし、Javaを取り巻く状況は、SunがOracleに買収されてから急激に変化し
Oracleが提供するOracleJavaは有償化したため
Javaの互換性のあるOpenなJavaが必要だ
Oracleの提供するOpenJDKは無償だが、リリースが遅い、サポート期間が短いなどで、セキュリティ的に非常に使いにくい
もちろん、業務としてならOracleJavaを有償で使うのもあるが、今回は無償で行いたい
現在利用できる OpenJDKとして
AdoptOpenJDK、AmazonCorreto等がある
今回はAWSメインで使うのでAmazonCorretoを使うが、こちらは32ビットに対応していない、対応OSが少ない等の問題があるので
そのうちAdoptOpenJDKにするかも

とりあえずAmazonCorreto11をインストールする
Windowsの場合はmsiファイルからインストールする
Downloads for Amazon Corretto 11 - Amazon Corretto

java -version
で、正しくバージョンが表示されればOK

ionic

ionicフレームワークはnpmからインストールする
ionicパッケージは今は古く、@ionic/cliのほうが新しいのでこちらをインストールする

$ npm install -g @ionic/cli

Amplifyクライアント

npm install -g @aws-amplify/cli    

サンプルなプロジェクト作成

ionic

ionicアプリはテンプレートから簡単に作成できる
今回は amplify_testという名前で作る
ionicではAngularで作るのがデフォルトだ(ReactやVueも追加されているが)

ionic start amplify_test
コマンドプロンプトからうち
Angular、tabsと選択し、Capacitorにするか聞かれるので Yを選んでみる

テンプレート作成したら

ionic serve

コマンドでトランスパイルされブラウザに表示される
ionicの説明はしない
コードを変更したら即座にLiveReloadも行われる

ばっちり

amplify作成

npx amplify init  

入力はデフォルトのままでOK
Frameworkはionicを選び、AWSのAccessIDを設定

これでAmplifyがAWS上に作成される

amplify push
を行うと、コードをAWS上にPushできる(5分ぐらいかかる)

npx amplify add auth
で、Cognitoでの認証を作成できる

amplify mock
を使うと、Amplifyをローカル実行できるので試したが
Cognitoに関しては、Mocking出来ず、AWSのサーバが必要な気がする

amplify add api
で、GraphQLあるいはREST APIを作成できる
今回はGraphQLを作成する

作成されたAPIの下に schema.graphqlファイルがある。これがスキーマ

type Todo @model {
  id: ID!
  name: String!
  description: String
}

デフォルトでは上記のようなかんじになっている

amplify mock

amplify mock

で、Amplifyをローカル実行できる!!
毎度 amplify pushするとデプロイに5分かかるしデバッグもし辛い
どうやらCognito以外はMockできるらしいので非常に便利だ
Mockを実行するとURLが表示されるので、ブラウザで開くと

f:id:murasame-labo:20201008173834p:plain

GraphQLのデバッグ画面が表示される

ちょっと引っかかったのが
src/graphql/queries.js
に、SQLあるいはGraphQLのQLが作成されるという情報がある

export const getTodo = `query GetTodo($id: ID!) {
  getTodo(id: $id) {
    id
    name
    description
  }
}
`;
export const listTodos = `query ListTodos(
  $filter: ModelTodoFilterInput
  $limit: Int
  $nextToken: String
) {
  listTodos(filter: $filter, limit: $limit, nextToken: $nextToken) {
    items {
      id
      name
      description
    }
    nextToken
  }
}
`;

が、探しても見つからないのだが
おそらく下記に変更されたと思われる

src/app/API.service.ts

export class APIService {
  async CreateTodo(
    input: CreateTodoInput,
    condition?: ModelTodoConditionInput
  ): Promise<CreateTodoMutation> {
    const statement = `mutation CreateTodo($input: CreateTodoInput!, $condition: ModelTodoConditionInput) {
        createTodo(input: $input, condition: $condition) {
          __typename
          id
          name
          description
          createdAt
          updatedAt
        }
      }`;
    const gqlAPIServiceArguments: any = {
      input
    };
    if (condition) {
      gqlAPIServiceArguments.condition = condition;
    }
    const response = (await API.graphql(
      graphqlOperation(statement, gqlAPIServiceArguments)
    )) as any;
    return <CreateTodoMutation>response.data.createTodo;
  }
...

JSよくしらんけど、Angular的な書き方なんかな?

そしておなじみAngularの不具合、Globalが定義されてないので、polifil.tsに追加

(window as any).global = window;

GraphQLをせっかくなので呼んでみる

Serviceを作る

$ ionic g service services/viewTodo

ionicコマンドで作成する コードの方は、先ほど作成された、API.service.tsのListTodoを呼べばよさそう

viewTodo.service.ts

import { Injectable } from '@angular/core';
import { APIService } from 'src/app/API.service';

@Injectable({
  providedIn: 'root'
})
export class ViewTodoService {
  public async listTodos() {
    var api = new APIService();
    return api.ListTodos();
  }
  constructor() { }
}

戻り値はどうやら、ListTodosQuery型のようだ

今回は table1にボタンを置いてデバッグ表示させる

tab1.page.html

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-fab-button (click)="debug()">
    <ion-icon name="list"></ion-icon>
  </ion-fab-button>

</ion-content>

ion-icon#nameにアイコン名を指定すれば、プラットフォーム毎に適切なアイコンが表示される
Ionicons

今回は debug()関数を呼ぶことにした
Viewから呼ばれる関数は、tab1.page.tsに書く

import { ViewTodoService } from '../services/viewTodo.service'; 

export class Tab1Page {

  constructor(public viewTodoService: ViewTodoService) {}
  
  async debug(){
    (await this.viewTodoService.listTodos()).items.forEach (elm => console.log(elm.name));
 
  }
}

ListTodosQuery型からはこんな感じでデータを取る事が出来る

これでGraphQLを呼べるはずだが残念ながら、
Error: No credentials
認証が必要だね

サーバレス(主にAWS Lambda)の開発環境を調べる

昔から環境が変わったので調査中

まず今回調べるのは、サーバレス開発時の手法である

過去

わたしはLambdaが出始めた時には下記のような開発を行っていた

API Gatewayを設定する
nodeでコードを書く
トランスパイルを行う
Lambdaのエミュレートイメージ DockerLambdaを使いローカルデバッグ
Lambdaへのデプロイスクリプトを叩きデプロイ

しかし現在は色々と便利なものがある

AWS SAM

単純なFunctionであればこれがベストマッチ
APIGatewayの作成も行う事が出来る
また、AWSが公式のLambdaエミュレートDockerを出していて
ローカルテストまで出来る
主にAPIGatewayを使ったRestAPIの作成に向いている
非常に万能である

AWS Amplify

Lambdaだけでなく、Cognito、DB、S3、GraphQL等の実行環境をコンテナの中で開発するようなもの
SAMと比べて非常に色々な事が出来るので
フロントのHTMLやDBやらが必要なWebホスティングあるいはスマホでのサービス等
Lambdaだけじゃない大掛かりなシステムに向いている
主に画面をともなうGraphQLのソフトウェアに向いていると思われる

ServerlessFramework

AWS以外の、AzureやGCP、Ali Cloud、TencentCloud等にも対応している
Serverless-offlineプラグインを入れると、オフラインでも実行させることが出来る
AWS以外で実行する可能性があるときは、こちらを使うのがベストかもしれない

会社のサーバ構成の変更を考える

現在の構成

前は色々と使っていたが今は下記で終わっている

さくらVPS

会社設立前からさくらVPSホスティングをしている
今はほぼWebページしか使ってないが、いろんなWordPress建てたり、GitLabやRedmine、メールサーバを建てていた時期がある
一応仕事によっては固定IP欲しいので、プロキシサーバはいつでも立ち上げられるようにしている

お名前.com、お名前メール

ドメインはお名前.comでとっている。DNSもお名前.comからさくらVPSフォワードしている
メールはお名前メールを今は利用している。メールサーバを自社で持ってもいいが、お名前メールすごく安いし楽なので・・

ソース管理

内部のGItLabは今は使ってない。GithubやらGitlab.com、AzureReposなどのホスティングサービスが便利だ
ただ、ゲームの案件などでは、外部のホスティングサービスを禁止されることがある
といっても、結局はAWSにGitLabやらGHEをホスティングするので、クラウドにデータを置くのだが、何故かはわからぬ
たしかにGithubから情報流出があったり、Githubサーバが落ちたりするリスクはあるが
そんなの自前ホスティングするほうが危険やろwwwwって思うんだが、そういう風潮があるので
もし内部でGitサーバを建てる必要が出たら建てようとおもう

IBS,WBS

今はRedmine建ててないなあ・・・そのうち建てるか・・
わたしはTrelloやGithubのツールで全部やってるので、今のところ必要性感じてないが
Redmineあると複雑な案件が管理できるので、またインストールしたいなあ
まあ、クラウドホスティングサービス使ってもいいんだけど

チャットBOT

昔はホスティングしてた時もあるが今は使ってない
例えばSlackにAWSの使用状況とか通知してくれると便利なので、またBOT導入したいところ

問題点

さくらVPSは昔から契約しているため、OS等が古い
まずVPSバージョンがV3だ(最新はV5)このため色々制限がある
また、OSがCentOS6.6ととても古い
今の時代は私はあまりCentOSでデプロイする仕事少なくなったし、Dockerで好きなOSでテスト出来るゆえに
Ubuntuなり楽なOSに変えようかと思っている

そして、会社のホームページをリニューアルしようと思うが、現状静的コンテンツのみなため、S3でええやん・・・
そうすると現状はVPS不要論も出てきた。。
また、チャットBOTも現状だとAWS Lambda等で作る事が好ましいと思われる
もちろん年1万ちょっとなので、別にさくらVPSを解約する必要もないのだけど
大阪リージョンに作っているため、レスポンスがより早くなるよう東京リージョンに変えてもいいし・・

Redmineを建てるとしても常時建てている必要はなく、必要になったらインスタンスを立ち上げる、クラウドベースのほうが便利かもしれない
SlackBotで起動させればええやんやし、Reserved Instanceではなく、Spot InstanceでBIDしても面白い
まあ年間1万程度なので、常時起動させてもいいけど、どっちが美しいか?という話だ
実際に無駄にシステムこだわって作る工数をペイするには100年運用が必要だろうwww
お得なのは、さくらVPSなりAWS LightSail あるいはEC2でホスティングする事である

やる事

さくらVPSの再インストール

さくらVPSはどうせあと10か月契約残っているので契約は終了しないが
VPSを一度破棄し新しく作り直す。OSはUbuntuなり新しくしたい

会社のWebページ

会社のホームページをS3+CloudFrontに変更する。当然Route53も設定必要だし、DNSの転送も変える
試算したが月120円程度だ

リモート開発環境

AWS Cloud9を評価してみようと思う
これが使いやすければ、PC複数あってもリモート環境で開発が出来るようになる
基本的にはEC2にサーバを建てる(しかもIDEを終了したら自動的にインスタンスが終了する)のだが
SSH接続で、さくらVPSでも出来るらしいので、ついでなのでさくらVPSホスティングしてみようと思う

SlackBot

AWSの状況の監視(アクセス異常)、AWS料金などをレポートしたり
インスタンスの起動状況、インスタンスの起動終了
その他マネージドサービスのコントロールなどを行うBOTを作りたい

AWS Amplify & ionicを勉強する

3年間はお金になる仕事をしようと思い、Amplifyに興味をもちました
具体的には、Webアプリを最速で開発、モックアプリ、PoC、R&Dを行いたい
そこそこ動くWeb、iOSAndroidのハイブリッドアプリを作るのに
サーバレスでAmplify+ionicを一つの選択肢として使ってみようと思う

もちろん、Flutter、ReactNative、Vue、Xamarinなどの有力なハイブリッドフレームワークも存在するが
Amplifyと連携しやすいのでionicを使ってみようと思う

Amplifyとは

下記の3つから成り立っている

ライブラリ

認証(cognito)、データストア(Dynamo,Aurora)、API(GraphQL,REST)、ストレージ(S3)、Pubsub、自動デプロイ、Git連携・・・
様々なマネージドサービスを一括で管理設定連携できる、いわばマネージドサービスの統合環境のようなもの

UI Component

AWSの各機能(例えばログイン関連のフォーム等)をかんたんに生成可能なUIタグが提供されている
現在は、React、ReactNative、Angular、Vue、ionic、Next.jsに対応している

CLI ToolChain

Amplifyのコマンドラインツール
これが非常に便利で、コマンド1つでAmplifyの作成やAWSのサービスの追加、デプロイ等が行うことが可能

ローカル実行

amplify mockで、ローカルでモック実行できるらしい??試してみたい

メリット、デメリット

メリット

非常に早くプロダクトを作ることが出来る
デプロイまで面倒を見てくれる
マネージドサービスのため、自動でスケーリングするし、サーバー監視も任せることが出来る

デメリット

比較的新しい機能なので、情報がない、英語が必要です
現時点では非常に出来る事が限られているため、Amplifyの機能を超えるものを作るには非常に苦労します
また、機能を拡張する際に、テーブルのマイグレーション等がしにくいという話もあり、大きな機能追加は難しいかもしれません

ionic

Typescript(JavaScript)で記述する
基本的にAngularを使うが、React、Vueも対応している
ネイティブプラグインにはPhoneGapあるいはCapacitorを使う
Web、WindowsiOSAndroidをワンソースから作れる

JavaScriptなので資産が活かせるのも大きい
また、LiveReloadが素晴らしく、ネイティブ開発時でもコードを変更するとコードがリロードされるのでリアルタイムなデバッグ開発ができる
UIパーツも、ネイティブに似ているので、普通に作るだけでネイティブっぽい見た目になります

実際のionicやAmplifyの使い方はチュートリアルなどをみてもらうとして
これで高速にアプリを作成可能になった

Windows10 IoT Coreと Windows10 IoT Enterprizeに関して

仕事で必要になったので調べた

japan.zdnet.com

Windows10 IoT Coreは、よくラズパイ等のIoT開発の時にインストールするOSで
OS自体の機能も少なく、アプリもUWPで動く

一方、 Windows10 IoT Enterprizeは、Windows10のフル機能が備わっているため.netのネイティブでも動く

という認識だったが、2021年にそれらを統合するらしい

なるほど、ますます便利になるなあ