GLSL(OpenGL Shading Language)を使って画像処理する練習。
今回は色々な切り抜き(Cropping)と敷き詰め(Tiling)。
最終的にreact nativeで使いたいのでgl-reactを前提として書きます。
【Typescript】モジュールをブラケット表記法で使う
import * as M from ""で読み込んだモジュールをブラケット記法[]で使いたい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//module_a export const contents_a = ...; export const contents_b = ...; export const contents_c = ...; //module_b import * as M from "./module_a" export const someFunc = (name: string) => { M.contents_a; //ドット表記法なら問題ない M[name]; //この書き方はエラー /* expression of type 'string' can't be used to index type 'typeof import("..."). No index signature with a parameter of type 'string' was found on type 'typeof import("..."). ts(7053) */ } |
こんな感じで引数（変数）に対応したモジュールを使いたい場合にどうするか。
React Native, Expoを使った画像処理の流れ
色々と機能の限られるReact Native(Expo managed)で画像処理することを考える。
細かい部分はドキュメントを参照するとして使うライブラリや全体的な流れをざっくりとまとめてみます。
I/Oに不満がなければわりと好き放題できる。
日時を使った新規ファイルの命名
なにか新しくファイルを作るときには命名法則を考える必要があります。
被らずにソートしやすいものとして日時の情報を使うことが多いですが、どうやって使うのがいいかなと思ったのでjavascriptで適当に動かしてみます。
React Native (Expo)でカメラプレビューにエフェクト
Expoでカメラを使う時ライブプレビュー画面にgl-reactでエフェクトをかけたい。
結論を書くとあまりスマートな方法で解決はできなかったです。
関連リンク
- ドキュメント expo camera
- ドキュメント expo gl-view
- ソース expo camera
- ネイティブソース(java)
- 参考リンク – Camera app with live preview( Medium, shoutem )
Next.js with Material-UIでスタイルが崩れる
Next.jsとMaterial-UIの組み合わせでビルドすると予期せぬ表示ずれがあった。
現象としてはnext.jsのPHASE_PRODUCTION_BUILDでgetInitialProps()のあるページで初回読み込みをするとmakeStylesによるスタイルが崩れる。
ErrorやWarningはないし上記以外のアクセスではスタイル崩れもない。
結構複雑な問題だったので要点をまとめながら解決を図ります。
環境：next: 9.1.7material-ui: 4.8.3react: 16.12.0カスタムサーバー express: ^4.17.1
Next.jsプロジェクトの公開手順
Next.jsで作ったアプリを公開、SSL対応、永続化するためのメモ。
nowじゃなくて普通に自前のLinuxサーバーに載せることを考えます。
気持ち的にはNext.jsプロジェクトの初期設定の続きです。
【Typescript】Nullableに対する様々な操作
Next.js(React)でTypescriptで書いていますが、DOM関連でNullableな操作が続きどう処理するのがいいか悩んだので色々やってみます。
Typescriptは制限と同時にできることも多いので思いのほか色々できました。
キーワード：Null合体演算子Null条件演算子Null許容型Type GuardNon-null assertion operatorDefinite Assignment AssertionsOptional chaining
Next.jsプロジェクトの初期設定
next.jsはnowと合わせると秒単位でWEBアプリを公開できるような超速フレームワークですが、それなりの規模のものを作ろうと思うと色々設定が必要です。
大分慣れてきたので振り返りもかねてプロジェクト初期設定の備忘録。
プロジェクト作成からGit設定、各種コンフィグ類の設定、必須ライブラリの導入とカスタムページの用意まで。
【javascript】URLエンコードあれこれ
色んなAPIを使っているとPOSTで情報取得をするものもあります。
api keyなんかが必要な場合は仕方ないとして、どうでもいいパラメータをPOSTで送るものがREST APIと自称してて？？となることも多々。
そんな中で躓くことの多いapplication/x-www-form-urlencodedのエンコードをどうするのがいいかなと試してみたので覚書き。
基本的にネストしたデータは送らないという前提で書いていきます。
階層化したデータを送る必要があるならapplication/jsonで送るかJSON.stringfyしたものを送るようになっているはず。きっとそう。
とはいえ必要な場面が来るかもしれないのでそれっぽいコードも書いておきます。