IT初学者部

プログラミングに関することを中心に、備忘録として残していきます。

マイクロソフトアカウントでログインしているWindows11にリモートデスクトップ接続できない件を解決した

はじめに

MacbookからWindows環境にリモートデスクトップさせようとした際に、全くうまくいかなかったので色々と調べて解決しました。

Microsoft Remote Desktop

Microsoft Remote Desktop

apps.apple.com

原因

パソコンへのサインインをPINコード入力でしか行っていないことが原因でした。

というのも、一度でもPINコードではなくユーザ名/パスワードでログインしたことがあれば、別の端末からのリモート接続時にそのユーザー名/パスワードでログインできる(マイクロソフトアカウントのユーザー名とパスワード)ので、一度もしたことがないことが原因になります。

正直言って初回の起動時にマイクロソフトアカウント作成してログイン、その後PINコード作成を推奨されてそのままでいるとユーザー名/パスワードによるログインをしない状態でいてしまうので、あまり気づかないと思います。

手順

①とりあえずWindowsマークをクリックし、設定を開きます。

②アカウント→サインインオプション でサインインオプションを開きます。

③PIN(Windows Hello)でPINの削除を選択し、ユーザー名/パスワードでサインインしてみましょう。

④一回でもサインインしたことがあれば、その後再びPINコードを作成してそれでログインしていても問題なくリモート接続可能になります。

おわりに

これ普通に忘れそうなので備忘録にします。

npmパッケージでtypescriptの環境構築(Windows11)

はじめに

別の記事でnpmコマンドでモジュールパッケージの環境構築の手順に付いて記載しましたが、今回はそのパッケージにtypescriptの環境を作るまでの手順を記載します。

手順

npmコマンドなどでpackage,jsonのあるディレクトリはすでに存在する想定です。

  1. 以下コマンドを実行し、typesciprtをインストールしてください。
npm install --save-dev typescript ts-node @types/node
  1. 以下コマンドを実行し、tsconfig.jsonを作成してください。
npx tsc --init

3.dirコマンドなどで確認してみてください。ファイル名などが表示されていれば成功です。

おわりに

CUIって慣れてくるとやりやすいですね。。。

npmモジュールパッケージ作成手順

はじめに

reactでモジュールパッケージを作成したいと思ったんですが、reactプロジェクトとして作りたいわけではなかったのでnpmコマンドを利用する手順を簡単に記載します。

手順

1.ディレクトリを作成して移動する。

mkdir project-name
cd project-name

2.イカコマンドを実行し、質問に対して回答を記載していく。

npm init

対話形式で進みます。C押下でキャンセル可能。すべて進んだらyesを入力して実行してください。

完了し、package.jsonファイルが作成されています。中身が入力した内容通りになっているはずです。

おわりに

コマンドプロンプトをずっと使っていたのですが、PowerShellだと過去コマンドが履歴で残っているのを最近知りました、、、こっちのほうが便利ですね

VSCodeでSpringbootアプリケーションが勝手に終了してしまう

はじめに

VSCodeでSpringbootアプリケーションの開発をするようにしているんですが、アプリケーション起動時に起動したままになっていてほしいのになぜか終了してしまう(エラーになるわけではない)ので、調べた解決法を一応載せておきます。

状態

  • java 17, springframework 2.7.5、GradleでビルドしているSpringbootプロジェクト。
  • VSCodeにはJava Extention Pack、Springboot Extention Pacl, Gradle for Javaなどインストール済み。
  • 他アプリなどは問題なく実行できる

事象

Springbootアプリケーションを起動すると、エラーなどが発生するわけではなく、コマンド表示がイカのようにされたまま終了してしまう。

10:06:58.626 [Thread-0] DEBUG org.springframework.boot.devtools.restart.classloader.RestartClassLoader - Created RestartClassLoader org.springframework.boot.devtools.restart.classloader.RestartClassLoader@35bbbcb9

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.7.5)

2022-10-30 10:06:58.841  INFO 51660 --- [  restartedMain] com.hirm159.ika3api.Ika3ApiApplication   : No active profile set, falling back to 1 default profile: "default"
2022-10-30 10:06:58.870  INFO 51660 --- [  restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set 'spring.devtools.add-properties' to 'false' to disable
2022-10-30 10:06:59.130  INFO 51660 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Multiple Spring Data modules found, entering strict repository configuration mode
2022-10-30 10:06:59.131  INFO 51660 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JDBC repositories in DEFAULT mode.
2022-10-30 10:06:59.138  INFO 51660 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 4 ms. Found 0 JDBC repository interfaces.
2022-10-30 10:06:59.153  INFO 51660 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Multiple Spring Data modules found, entering strict repository configuration mode
2022-10-30 10:06:59.155  INFO 51660 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode.
2022-10-30 10:06:59.161  INFO 51660 --- [  restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 1 ms. Found 0 JPA repository interfaces.
2022-10-30 10:06:59.382  INFO 51660 --- [  restartedMain] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Starting...
2022-10-30 10:06:59.586  INFO 51660 --- [  restartedMain] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Start completed.
2022-10-30 10:06:59.764  INFO 51660 --- [  restartedMain] o.hibernate.jpa.internal.util.LogHelper  : HHH000204: Processing PersistenceUnitInfo [name: default]
2022-10-30 10:06:59.840  INFO 51660 --- [  restartedMain] org.hibernate.Version                    : HHH000412: Hibernate ORM core version 5.6.12.Final
2022-10-30 10:06:59.985  INFO 51660 --- [  restartedMain] o.hibernate.annotations.common.Version   : HCANN000001: Hibernate Commons Annotations {5.1.2.Final}
2022-10-30 10:07:00.109  INFO 51660 --- [  restartedMain] org.hibernate.dialect.Dialect            : HHH000400: Using dialect: org.hibernate.dialect.PostgreSQL10Dialect
2022-10-30 10:07:00.224  INFO 51660 --- [  restartedMain] o.h.e.t.j.p.i.JtaPlatformInitiator       : HHH000490: Using JtaPlatform implementation: [org.hibernate.engine.transaction.jta.platform.internal.NoJtaPlatform]
2022-10-30 10:07:00.237  INFO 51660 --- [  restartedMain] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default'
2022-10-30 10:07:00.481  INFO 51660 --- [  restartedMain] o.s.b.d.a.OptionalLiveReloadServer       : LiveReload server is running on port 35729
2022-10-30 10:07:00.506  INFO 51660 --- [  restartedMain] com.hirm159.ika3api.Ika3ApiApplication   : Started Ika3ApiApplication in 1.872 seconds (JVM running for 2.319)
2022-10-30 10:07:00.506  INFO 51660 --- [ionShutdownHook] j.LocalContainerEntityManagerFactoryBean : Closing JPA EntityManagerFactory for persistence unit 'default'
2022-10-30 10:07:00.506  INFO 51660 --- [ionShutdownHook] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Shutdown initiated...
2022-10-30 10:07:00.506  INFO 51660 --- [ionShutdownHook] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Shutdown completed.
2022-10-30 10:07:00.506  INFO 51660 --- [  restartedMain] com.hirm159.ika3api.Ika3ApiApplication   : Started Ika3ApiApplication in 1.872 seconds (JVM running for 2.319)

これがあるので、少なくとも起動自体はしている様子。起動できない、とかで調べるとビルドエラーだったりなんだったりが出てくるので、Google先生もあまりあてにならない。。。

2022-10-30 10:07:00.506  INFO 51660 --- [ionShutdownHook] j.LocalContainerEntityManagerFactoryBean : Closing JPA EntityManagerFactory for persistence unit 'default'
2022-10-30 10:07:00.506  INFO 51660 --- [ionShutdownHook] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Shutdown initiated...
2022-10-30 10:07:00.506  INFO 51660 --- [ionShutdownHook] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Shutdown completed.

これは終了時などに表示されるもの。なので、勝手に終了されている? 同じようなSpringbootアプリケーションをVSCodeの同じ環境で実施している場合は問題なく起動し続けているため、プロジェクトの問題かと思って調べました。

ついでに、すぐに起動後に終了するとかそんなんで調べてみる。

出てきたサイト様

Spring Bootを起動させてもすぐにShutdownしてしまう場合にやること - プログラマーの調べ物

同じような現象について記載しているブログ記事を発見。

stackoverflowにもいくつかこの現象についてのスレッドがある模様。

stackoverflow.com

stackoverflow.com

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

依存関係にspring-boot-starter-webと入れろという回答がほとんどでした。

Gradleでビルドしている場合の記載の仕方は以下のような感じです。

build.gradle

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

依存関係に追加してから再度実行してみると、起動できるらしいです。

追加済みなのに起動が終了してしまう

それでも私のケースでは起動してもすぐに終了してしまいました。こうなるともはやお手上げです。調べても出てきません。どこかの質問サイトにでも投稿しようかな。。。と思っていた矢先、以下の手順を実行することで無事に解決することができました。

  1. VSCodeを開き、ワークスペースから起動してもすぐに終了してしまうSpringbootプロジェクトを削除する。
  2. 再度、プロジェクトのフォルダをワークスペースに追加する。
  3. 起動してみる

この手順を踏むと解決でき、無事に起動状態を維持できるようになりました。

おわりに

基本に帰ってやり直して見るみたいなことの大切さがわかりましたね、これでも解決できなかった場合は本当にお手上げですが。。。

react-router-domの導入手順

はじめに

react-router-domの導入手順について記載します。

そもそもreact-router-domって何をするものなの?って疑問についても含めて簡単に記載していこうと思います。

react-router-domの目的

reactプロジェクトはフロントエンド開発のライブラリ、フレームワークであるreactを利用したフロントエンド側のコンポーネントになります。

一般的な、従来のフロントエンド側というのはhtmlファイルで記載し、javascriptcssなどで要素の装飾や機能の作成などを付与していくというものでした。

htmlファイルについても、例えばトップページならtop.html、メニューならmenu.htmlのようにそれぞれのページごとにhtmlファイルを作成し、どのファイルを呼び出しているのかをjavaなどのサーバ側の呼び出し処理で行っていました。

しかしながら、htmlファイルを呼ぶためにいちいちサーバ側処理を実施するのは負担が大きくなって心舞うため、近年のwebフロント開発などではフロントエンド側の処理のみで対処できるものはそれだけを行い、必要な場合だけサーバ側呼び出しを実施するというのが一般的になりつつあります。

このとき、従来であればindex.htmlをはじめ各ページごとにhtmlファイルを作成、そしてhtmlファイルを呼び出すようにしていた部分を、javascriptで「index.htmlファイルの中身の描写を変更する」ようにしているのがルーティング処理の肝です。

これについては過去の記事で同じような内容を記載してあります。

hirm159.hatenablog.jp

VueだろうがAngularだろうがここのSPAの考えの部分は変わらないと思います。

もしも更に詳しく知りたいなどあれば自分でいろいろ調べてみてください。

導入手順

前置きはこの辺にして、導入手順を記載します。

プロジェクトのルートディレクトリを開き、以下のコマンドを実行してください。

npm i react-router-dom

インストール完了後、とりあえずルーティング処理を試してみましょう。

App.tsxを書き換えてみます。まずは書き換え前

(書き換え前)

import React from 'react';
import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Button>test</Button>
      </header>
    </div>
  );
}

export default App;

(書き換え後)

import { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Top } from './pages/Top';
import { About } from './pages/About';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path={"/"} element={<Top />} />
          <Route path={"/about"} element={<About />} />
        </Routes>
      </BrowserRouter>
    )
  }
}

export default App;

, で囲っている中のでルーティング時のパスと描写する要素を指定しています。

今回の記述の場合、/のページの場合はTopコンポーネントを、/aboutの場合はAboutコンポーネントを描写するようにしています。

ちなみに2つのコンポーネントの中身です。今回は表示内容が変更されていることを確認できれば良いので、以下のような記載にしています。

Top.tsx

import { Container, Row } from "react-bootstrap"

export const Top = () => {
    return (
        <Container>
            <Row>
                Top
            </Row>
        </Container>
    )
}

About.tsx

import { Container, Row } from "react-bootstrap"

export const About = () => {
    return (
        <Container>
            <Row>
                About
            </Row>
        </Container>
    )
}

この記載をしている状態で、ローカル上で起動し、アクセスしてみます。

http://localhost:3000/

Aboutへ移動してみます。

http://localhost:3000/about

パスで指定したコンポーネントの内容が表示されていることが確認できると思います。

おわりに

www.npmjs.com

v5.reactrouter.com

この辺のページを見ておくとより理解しやすいかもしれません。

react-bootstrapの導入手順

はじめに

今更すぎるけどreact-bootstrapについて簡単に記載します。

手順

create-react-appでもなんでもいいですが、reactプロジェクトを作成してプロジェクトのルートディレクトリに移動しましょう。

React-Bootstrap · React-Bootstrap Documentation

公式サイトの導入手順ページにコマンドが記載されているのでその通りに入力して実行します。

導入後、以下のような記載をしてボタンを作成してみましょう。

npm startでローカルに実行してみます。

…あれ、ボタンが装飾されているはずですがされていない。。。

import文の追加を忘れてますね。。。

import 'bootstrap/dist/css/bootstrap.min.css';

これを追加してあげましょう。

ボタンが装飾されているのがわかると思います。

ソースコード

import React from 'react';
import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <Button>test</Button>
      </header>
    </div>
  );
}

export default App;

デフォルトで作成したreactプロジェクトからはほとんど変わっていません。

おわりに

bootstrapを利用することで、いちいちcssでボタンの装飾を設定したり作成したりする手間が省けます。基本的にどの現場、環境でも広く使われているかと思いますので、是非参考にしてみてください。

Windows環境でcurlコマンドを利用してAPIを叩いてみる

はじめに

ログイン機能っぽいものを作りたいと思い、まずはログインするアカウントを作成する処理APIを実装しているのですが、そこでcurlコマンドを叩くときに微妙に躓いたので備忘録として残します。

結論から言うと

windowsの場合(CMD)はこれで叩けます。

curl http://localhost:8080/account/create -X POST -H "Content-Type: application/json" -d "{\"username\":\"test01\", \"password\":\"password\", \"mailAddress\":\"mail@com\"}"

\を入れていかないと文字列などの不正としてエラーになってしまうので、注意が必要です。

作成したAPIのソース

github.com

おわりに

最近あまり更新できていませんが、頭の中であれしたいこれしたいというのはかなり多くあるので少しずつでも作っていければと。。。