Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。

型のプロパティを拡張する。

型で条件付きで拡張すれば良い。 const MyEmpty = Symbol("MyEmpty"); type Empty<T> = { [P in keyof T]:P extends "hoge" ? T[P] | typeof MyEmpty : T[P] } type ExRoomInfo = Empty<RoomInfo></roominfo></t>

サブモジュールがクローンされない。

git

以下を参照した。 gitでクローンと同時にサブモジュールを初期化、アップデートする – IsaB cloneしてから git submodule update --init --recursive で良いようだ、 それかそもそも --recursive をつけてcloneしておく。

jsconfig.json

VSC

Visual Studio Codeはjsconfig.jsonのあるファイルをルートにしてくれる。 JSDoc形式で書かれた型情報を認識 jsonconfig.jsonの設定は以下を参照。 VS CodeでJavaScriptアプリを作成する上で知っていると便利(?)なこと (2/3):Visual Studio CodeでWebア…

iPhoneのインスペクタがでてこない時

そもそもそのiPhoneの設定/safariでインスペクタがオンになっているかを確認 MacとiPhoneがケーブルでつながっているか確認 ケーブルをさしなおしてみる

index.vue

Vue

nuxtでindex.vueをpageのフォルダやその入れ子のフォルダにおくとindex.htmlのようにフォルダ指定のデフォルトになる。

回転設定

iOS

出し分けはinfo.plistでiphone/ipadそれぞれサポートを指定する。

iOS関連

PWA

manifestは読み込めるが、アイコンは無視されるのでメタタグで定義する必要がある(apple-touch-icon.pngというファイル名で根っこにおいておくとヘッダーに記述しなくて良いというのは本当だろうか。)。 htmlの根っこにおく。読み込まれないかは、safariのイ…

Parcell

以下を参照した。 mae.chab.in インストール npm install --save-dev parcel-bundler 使い方 npx parcel index.html とするだけで依存関係をたどってdistディレクトリに吐き出される。 webサーバ(ポートは自動)が起動し、 Hot Module Replacementに対応して…

オレオレ証明書

mkcertで作れる。 以下を参考にした。 www.hivelocity.co.jp live serverに設定するには www.ka-net.org brew install mkcert ローカル環境に認証局作成 mkcert -install SSL証明書を発行 mkcert sample.co.jp ワイルドカード指定で mkcert "*.co.jp" sample…

compositionAPI ストアのプロバイドとインジェクション

Vue

より明確にストアの書き方がわかったので書いておく。 キーを何か用意 const StoreSymbol = Symbol() 親のstoreをもっているものがprovideする。 // sotreを持っている側がprovideする。 export function provideStore(store) { provide(StoreSymbol, store)…

alert

Vue

アラートを書いてみた。クロージャで結果を返すのはやめるべきなのかよくわからないがそこもリアクティブにすべきだろう。 gist.github.com

compositionAPIの初歩

Vue

ここの説明がそもそもわかりやすかった。 vue-composition-api-rfc.netlify.app そこに書いてあるコードを借りてくると、こんな感じでuse関数(useは実際は何でも良い)を書いて、 function useCreateFolder (openFolder) { // originally data properties con…

パッケージの公開

npm

以下を参考にした。 qiita.com まず、npmのユーザーを登録しておく。 npm | build amazing things で npm addUserでユーザを紐付けておく。 .npmignore を用意して、公開に不要なもの(tsファイルとか)を指定しておく。 package.jsonのバージョン(version)を…

ABC propsでオブジェクトを指定する。

Vue

type AlertCompletedBlock = (index: number) => void; interface Alert { display: number; completedBlock: AlertCompletedBlock | null; title: string; desc: string; buttonTitles: string[]; } const alertInit:Alert = { display:0, title:"", desc:"…

vue-property-decorator

vue

クラスで書けるので普通のクラスの書き方に慣れているひとはこちらのほうが断然わかりやすい。型の情報が明確。 以下に詳しい解説があった。 qiita.com

まとめ

rodhos.hatenadiary.jp

pdfがiOS13で表示されない。

iOS

これはcontents-typeの問題のようだ。サーバ側で修正がいる。 stackoverflow.com

bxSliderで要素を入れて更新できない

bxSliderで色々不具合があったのでそれをなおした。結構微妙な修正が多く苦労した。 左右のコントロールを使うと止まる件 古いバージョンのbxSliderの不具合のためリンク先を更新(githubに書いてあるCDNで最新のものをもってくるようにした。) ランダムに動…

ネット会議でマイクが入らない

mac

アプリケーションがマイクの使用を許可されていない場合がある。Google Meetを使用しようとして発生した。 macのmacのセキュリティとプライバシーでマイクの使用許可にchrome等のブラウザのチェックを入れていなかった。そのうえでアプリ(今の場合はブラウザ…

ABC globalに参照するオブジェクト

Vue

Vue.observableを使うらしい。 /* eslint-disable */ import Vue from 'vue' /// グローバル変数定義 const state = Vue.observable({ _hoge:"Hoge", get hoge(): string { return this._hoge; }, set hoge(value:string) { this._hoge = value; } }) declar…

ABC v-bindはオブジェクトや関数を渡せる。

Vue

よって、使ってほしい関数などを渡すことは可能だった。 validationに使う関数を渡すのに使ってみた。 指定しないときはnullを入れておくようにした。

ABC5 ストア

Vue

例題を勉強したサイトを失念してしまった。思い出したらリンクを張りたい‥。 検索して見つかりました。この記事です。 qiita.com 以下はこの記事を自分で実装してみたメモです。 今、カウンター情報を各コンポーネントで共通化したいと考える。 次のようなク…

ABC4 composition-api

Vue

composition-api プラグインなのでVue.useを忘れずに。 defineComponentで作る。 setupしてreturnで参照したい変数(ref,reactiveで作る)、関数、computedな関数等を作って返却する。 例 /* eslint-disable */ export default defineComponent({ name: 'Login…

rxjsとpromise

rxjsの someObservable.subscrive((result)=>(....)) が const result = await someObservable.toPromise(); みたいにプロミスに変更してawaitできる。 あとES6から複数値を関数から受け取れるらしい function some() { return {4,3}; } let {x, y} = some();

AsyncとPromise

async関数はPromisで包んで返してくれる。awaitはpromiseが解決されるまでそこでまってくれる。これをつかうためには結局、その関数はasyncにならないといけない。

環境変数env

process.envに入っている。 NODE_ENV NODE_DEBUG NODE_PATH .env ファイルを作ってそれを読むようにできる。 maku77.github.io process.env.hoehogeでみえるようになる。

AjaxでJSON取得

req.openの2つ目は非同期のフラグ、req.sendはPOSTの場合データが入る。 const req = new XMLHttpRequest(); req.open("GET", "myjson.json", true); req.onreadystatechange = () => { if (req.readyState === 4 && req.status === 200) { const jsonText …

nodeABC

このサイトを読んで勉強した。 www.suzu6.net typescriptを入れてみた。packageは { "name": "myfirstserver", "version": "1.0.0", "description": "my first server", "main": "index.js", "scripts": { "build": "tsc", "serve": "node dist/js/index.js"…

Vue.JS コンポーネントの使い方

vue

簡単な例 components <template> <div> <p>myConponent</p> </div> </template> スクリプトは <script> /* eslint-disable */ import { defineComponent, computed, watch } from '@vue/composition-api'; export default defineComponent({ name: 'MyCard', components: {}, props: {}, data: function() {}…

Vue.JS ABC3 ルーティング

Vue

vue-router パスを定義する。 Vue.use(VueRouter) const routes: Array<RouteConfig> = [ { path: '/', name: 'Home', component: Home }, { path: '/hoge', name: 'Hoge', component: Hoge } ] const router = new VueRouter({ routes }) export default router 使用を宣</routeconfig>…