Log.log(work)

いろんな作業メモ

Vue2→3へ移行したらチェックボックスにチェックが付かない

環境

vue3.2.6 (OptionsAPI)

node 18.16.1

内容

Vue2で元気に動いていたチェックボックスがVue3に上げたら動かなくなった。

正確にはチェックボックスをクリックしてもチェックが付かない状態になった。v- modelの中身をconsole.log()で表示しても空っぽのまま。Vue2だとクリックしたチェックボックスvalueが入っていたのになぜ・・・。

チェックボックスは複数あるのでv_modelは配列を指定。

細かい話は省略するが、click時の関数にはクリックしたチェックボックスによって他のチェックボックスの要素を変更するような処理が入っている状態だった。

<input
  type="checkbox"
  id="hoge_1"
  value="hoge_1"
  v-model="checklist"
  @click="clickfunc(hoge_1)"
/>

解決

@clickを@changeにしたら動いた。

前任者がclickで実装していたのでそのままにしていたが、Vue3で動きが変わったのかな・・・?

参考

(追記) Click event is triggered before value is really changed. だって。

stackoverflow.com

Typescript memo

Typescript

Javascriptの世界に型システムを導入した言語。

型推論のおかげで一つの変数に型の異なるデータを宣言するとコンパイルエラーになる。

foo = 'hello world';

foo = 10; // コンパイルエラーになる

またJavascriptの機能も使えつつ、アクセス修飾子、インターフェイスジェネリクスも使える。

コンパイルまでの動き

Typescript
 →TypescriptソースがASTへ解析される。 ※AST=abstract syntax tree
 →ASTが型チェッカーによってチェックされる
 →ASTによってバイトコードコンパイルされる

Javascript
 →JavascriptソースがASTへ解析される。
 →ASTによってバイトコードコンパイルされる
 →バイトコードがランタイムによって評価される

インストール

npm install -g typescript

tscコマンドが使えるようになる。

実際にアプリ開発するにはコンパイラだけ用意しても不便なのでビルドツールの「webpack」とプラグインの「ts-loader」もインストールする。

npm install typescript ts-loader webpack webpack-cli webpack-dev-server -D

※オプションの-Dは開発時にのみ使うパッケージであることを記録する。(package.jsonに記述される)

備考:
・webpack
 …複数のjsファイルをくっつけて1つのjsファイルを作成するバンドルツール。最適化しているらしい。
・ts-loader
 …webpackのプラグインtscを呼び出してコンパイルしている。コンパイルされたjsファイルをwebpackに渡している。
・webpack-dev-server
 …webブラウザの変更を知らせて、ソースコードの変更を検知してwebpaackを再起動?して再描画している。
 ※サーバを起動したままソースの変更を取り込んで反映させる。

最後にTypescriptコンパイラ用の設定ファイル(tsconfig.json)を作成する。

npm tun init

作成後はコンパイルするソースコードの場所を追記しておく。

{
  "include":[           //add
    "src//*"             //add
  ],                         //add
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
(省略)

Angular memo1

Angularメモ

Angularとは

Googleが開発したtypescriptベースのフロントエンドwebアプリケーションフレームワーク
半年に1度バージョンが上がるので、一年に一回は更改メンテナンスが必要になる。
Javaユーザにはなじみやすいフルスタック(=必要なライブラリは用意されている)。

AngularJS(バージョン1)とAngularと互換性がない。
またReactやVue.jsと比べてファイル数やコード量が多い。
Angularに内蔵されている非同期ツールであるRxJSは難解。

開発について

事前準備

用意するもの
・ブラウザ(chrome
・node.js(https://nodejs.org/ja/)⇒LTSをダウンロード
コマンドプロンプトを開いて「npx conwsay hello」をたたいて牛のアスキーアートが表示されればOK。

インストール

npm install @angular/cli@next

※@nextは最新、という意味。バージョンを指定する場合は@の後ろにバージョンを指定する。

インストールしたらアプリを立ち上げる。

ng serve

コンポーネントが変更されると検知して再度コンパイルして表示しなおしてくれる。

コンポーネント

画面を構成する部品。
AngularのAppcomponentは3つの部品で出来ている。
1.Typescriptクラス
2.HTMLテンプレート
3.表示を装飾するスタイルシート
cliのコマンドで作成するとこれらを自動で作成してくれる。あとはおまけでテストコードも。
例)

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

selectorはHTML上で割り当てられる名前。htmlではこの名前を使ってデータを参照する。 備考: 下記のようにhtml上でデータを参照するときに{}を使用するがこれをinterpolation(補間)という。

{{ title }}

参考リンク: https://angular.io/guide/interpolation

styleUrlsはCSSのリンクを記載する。カンマで続けて複数読み込むことも可能。

  styleUrls: ['./test.component.css','./test.component2.css']

備考:cssの共通化について。
アプリ全体に同一のスタイルを飾る場合はルートのstyle.cssに記載すれば良い。
しかし、複数あるコンポーネントのうち、一部だけスタイルシートを共通化するということは可能だが、
コンパイルされる際にはそれぞれのコンポーネントごとにcssが生成されるためファイルサイズが大きくなる。
よって開発面で言うなれば管理がしやすいかもだが、
読み込む側のhtmlが多ければ多いほどファイル(サイズ)が大きくなるので注意が必要。
CSSコンポーネントごとに保有する、ということらしい。

⇒共通化を設計するならcssではなくscssとして作成し、共通スタイルシートをimportを使うと共通化しやすい。

備考:typescript中にhtmlを記載するとどうなるか
クラス内はサニタイズされて出力されるため、全部文字として扱われる。
よってhtmlタグを書いてもhtmlだと解釈されない。

備考:デバッグ方法について
フロントエンドなのでコンソールでエラーログやデバッグログを出すものらしい。

サービスクラス

サーバサイドとのやりとりはServiceクラスに任せるのが鉄板。
Serviceクラスは基本的にシングルトンなので、アプリ起動中はいろんなコンポーネントから使いまわしされる感じになる。

※使い方としては、コンポーネント側のコンストラクタにサービスクラスを記述する。

export class HogeComponent implements OnInit {
  foo: Foo[] = []; //そういうインターフェイスクラスがあると想定

  constructor(private fooService: FooService ) { } // サービスクラス呼び出し

  ngOnInit(): void {
    this.foo= this.FooService .getFoo(); // サービスクラス内のメソッドを呼び出し
  }
}

coffeescript

環境

Ruby : 2.6.5 RobyonRails : 5.2.3

はじめてのcoffeescript

いろいろ調べたので自分的メモ。

呼び出し

railsはhead ⇒ body の順にレンダリングするため、body内部の処理よりも先に外部ファイルのcoffeescriptが読み込まれる。 よってhtml側にcoffeescriptを呼び出すように記述しないといけない。

呼び出し側

var hoge= document.getElementById('hoge');
hoge.onkeyup = function() {
            foo(hoge);
        };

呼び出され側

@foo=  (hoge) ->
    if hoge.length == 0
      hoge.style.visibility = "hidden"
    else
      hoge.style.visibility = "visible"

thisの扱い

CoffeeScriptの'@'はthis.を表す。

すでにオワコンときいたので。

墓標の代わりに置いておきます

Ionic(Angular)でandroid実機で動作確認

やりたいこと

位置情報を送るアプリをAndroidで動作させてみる。

環境

OS : Windows 8.1
Ionic CLI : 5.4.2
NodeJS : v10.15.3
npm : 4.0.5

さっそく開発

  1. nodistインストール
    インストーラダウンロード
  2. cordovaインストール

    npm install -g cordova ionic

  3. Android Studio / コマンドラインツールのダウンロード
    ダウンロードページからそれぞれのZipファイルをダウンロード

    • Android studio(android-studio-ide-181.5014246-windows.zip)を適当なところに解凍。 例)d:\android配下
    • コマンドラインツール(sdk-tools-windows-4333796.zip)を適当なところに解凍。 例)d:\android\android-sdk配下
  4. Android SDK のセットアップ

    sdkmanager "emulator" "platform-tools" "platforms;android-27" "build-tools;27.0.3" "system-images;android-27;default;x86_64"

  5. Windows Hypervisor Platform (WHPX) インストール

    sdkmanager "extras;intel;Hardware_Accelerated_Execution_Manager"

  6. 新規プロジェクトつくる(位置情報を表示したいだけなのでblankにしておく。他にもtabsとかいろんなオプションがある)

    ionic start myProject blank
    cd myProject

  7. Geolocationプラグインをインストール

    ionic cordova plugin add cordova-plugin-geolocation
    npm install @ionic-native/geolocation

  8. 開発

    unmet peer dependency ionic-native/coreという警告?でビルドが失敗する事象にでくわし、
    なんだろうと思っていろいろ調べていたら思ったより時間がかかってしまった。
    とりあえず import { Geolocation } from '@ionic-native/geolocation/
    ではなく import { Geolocation } from '@ionic-native/geolocation/ngx
    にしたら解消した。

・myProject\src\app\home\home.page.ts

    import { Component } from '@angular/core';
    import { Geolocation } from '@ionic-native/geolocation/ngx';

    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {

      geoLatitude: number;
      geoLongitude: number;
      geoAccuracy:number;
      constructor(private geolocation: Geolocation) {}

        getGeolocation(){
          this.geolocation.getCurrentPosition().then((resp) => {
            this.geoLatitude = resp.coords.latitude;
            this.geoLongitude = resp.coords.longitude; 
            this.geoAccuracy = resp.coords.accuracy; 
           }).catch((error) => {
             alert('Error getting location'+ JSON.stringify(error));
           });
        }
    }

・ home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
        Geolocation
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <h1>Get Location</h1>
   
    <ion-button (click)="getGeolocation()">
      Get Location
    </ion-button>
  
    <div *ngIf="geoLatitude">
      <p>Latitude : {{geoLatitude}}</p>
      <p>Longitude : {{geoLongitude}}</p>
      <p>Accuracy : {{geoAccuracy}}</p>
      
    </div>
   
  </ion-content>

ブラウザで確認

サーバーを立ち上げて確認

> ionic serve

実機で確認

  • ビルド
> ionic cordova build android
  • ドライバーを用意する
    公式サイトで usbドライバーをダウンロードし、下記の場所に解凍したファイルを置く。
Android SDKをインストールしたフォルダ\extras\google\usb_driver

「コントロールパネル」→「デバイスマネージャー」→ 「ほかのデバイス」を右クリック、でドライバーを更新する。
ドライバーは上記のフォルダを指定する。

  • 証明書を作成する
    下記のフォルダを証明書を作成してみる。
    myProject\keys\android
keytool -genkey -v -keystore debug.keystore -alias [alias名] -storepass [storepass] -keypass [keypass] -keyalg RSA

※keytoolコマンドはJDKが通っていれば使えるハズ

> adb devices

※adbコマンドはandroid-sdk\platform-tools がpathに入っていれば動作する。

リストに表示されたら、

> ionic cordova run android --livereload

デバッグしたい場合はChromeブラウザで操作できる。Chromeに下記URLを打ち込み、デバイスのInspectリンクをクリックする。

chrome://inspect/#devices

参考サイト

[Ionic3] 開発環境の構築からAndroid実機デバッグまでの手順まとめ - WESTA

Androidの各種ドライバをインストール | Androidのメモ帳 - 楽天ブログ

Oracleにダンプを入れてもらおうと頼んだら思いのほか大変だったはなし。

後輩に、コマンドを調べながら新規ユーザー(スキーマ)を作成してそこにダンプを入れてみて、と依頼したらいろいろ引っかかったのでその時のメモ。

環境:Windows10、Oracle11g

接続識別子が認識できないといわれる。

環境変数ORACLE_SID」が設定されていなかった。
というか「ORACLE_HOME」もなかったので設定することに。

ORACLE_HOMEの設定パスが分からない

ORACLEの本体がどこにあるか、について自分の記憶ベースで
「c:\app\ユーザー\product\オラクルのバージョン\dbhome_1」
にないですか?、と確認してもらったらなぜか無い。
どうやら場所が違って「c:\oracleexe」というフォルダに入っていた。
まあ、とりあえず現状優先で設定。

コマンド「impdp」を実行したが「ORA-39002: 操作が無効です」と言われる。

とりあえず、新規ユーザーは作成しているらしいが、
インポートしようとしているユーザと別のユーザでインポートしてたので、ユーザがちゃうんでない?と指摘。
(つまり権限がなかったもよう)

正しいユーザーでログインしようとしたら新規ユーザでログインができないことが発覚。
パスワードが間違っていたらしい。Create文を確認(コピペそのままで気が付かなかったらしい)。

CREATE USER [ユーザー名]
IDENTIFIED BY [パスワード];

パスワードを確認して再度ログインができることを確認

まだ同じエラーが出る

ダンプがどうも認識できていないようだったので、指定したパスにちゃんとファイルがあるかどうか確認。
新規にディレクトリを作成したのでパスとファイルの確認したら合ってる…。
試しにデフォルトのパス「DATA_PUMP_DIR」でやってみたら、エラーが変わった。

create or replace directory [ディレクトリオブジェクト] AS [ディレクトリオブジェクトのパス];

expコマンドでエクスポートしたダンプはimpdpじゃなくてimpでインポートする

(内部の引継ぎミスで)エクスポートコマンドがexpdpじゃなくてexpだったらしく、impdpからimpへ書き換え。

バージョンが違うんでないの?というエラーがでた

思い込みなのかなんなのか、開発環境は11gだって聞いていたのにダンプは12cからエクスポートしてきたらしい。
ダンプはバージョンの小さい方へは入れられないので、Oracle12cを入れなおすか、ダンプ情報を書き換えるしかない。

実は勉強用に用意しているのでダンプの情報を書き換えよう、ということになり、フリーのバイナリエディタをダウンロードしてバージョンを12→11へ書き換えてどうにかインポート成功。

結果

環境変数と権限の確認は大事。
Oracleのバージョンが違うとかちょっと酷い目にあった…そんな基本的なところでミスするとは思わなかった。