IT初学者部

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

Apple Watch SEを購入して3週間くらいたったのでレビューする

はじめに

久々にガジェット関係の記事になります。

というのも夏にキーボード購入して依頼その類のものは一通り揃ってしまった(ノートPC,スマホ、ゲーミングPCなど)というのもあって、あまりガジェットについてほしいものが最近はなかったのですが。。。

今回はAppleStoreまで行って Apple Watch SEを購入してきました。

まだそんなに使いこなしたわけではないですが、簡単にレビューでもしていこうと思います。

購入までのいろいろ

Apple Storeの店員さんに色々と聞きながらだったんですが、一番購入されているのは Watch SEらしい。

健康管理の機能などが必要であればWatch 8 購入してもいいですが。。。という感じで、欲しければまあみたいな感じだった気がしました。

個人的には腕時計自体持っていない(正確に言うと古くて壊れてしまっている)ので、腕時計として使えればいいくらいの感覚で購入しに行ったのでそれならSEで、と伝える。

正直言ってSEと8の見た目についてはそこまで変わらないような気がしました。一応SEはベゼルがやや大きいとのことでしたがマップ開いたときくらいしか気になりません。と言うか開いててもそんなに気にするほどではないような。。。?

SEの画面サイズはおもに40mmと44mmの2種類があります。

これもどっちも身に着けてみたんですが、正直言って44mmはサイズが大きいです。腕につけたときに結構主張してくるような感じで。。。

別にサイズが大きくなくても困らないし、そこまで主張されてもと思ったので、40mmを購入しました。

このあとは、色だったりなにやらを色々と店員さんに相談、確認しながらバンドなどを決め、購入まで行きました。

使い始めてから3週間、感覚的にどうか

ということでApple Watchを購入して使い始めました。

壊れてしまってから腕時計のない生活を続けていたので、久々に腕を見ることで時間を確認できるのは便利だなという感じです。

とりあえずこの辺にして、Apple Watchで便利になったことをいくつか書いてみます。

便利になったことその1 アラーム

これは本当に衝撃でした。

というのも、Apple Watchではアラームを設定するとその時間に振動してくれるので、腕につけたまま眠るとほぼ確実に起きることができます。

通常のスマホなどのアラームではせいぜい音が大きいくらいでしかないですが、これを購入してアラームを利用するようになってから二度寝や起きられなくて3回目くらいのアラームで起きるみたいな現象はほとんど発生しなくなりました。

そもそもiPhoneのアラーム自体がなんかいまいち(主に設定の部分が)と感じていたので、これを利用するようになってからQOLが上がった気がします。

便利になったことその2 電子決済

PASMOやあらSuicaやらは複数のもの利用できないとか聞いていたのでこれはどうなのかなあと思っていたんですが、クレジットカードなどを登録することで電子決済で色々払うときに面倒じゃなくなりました。

というのも、普段利用しているiPhoneがSEなのですが、これがたまに指紋認証通らなかったりして非常似面倒だし、自販機などで決済する際にいちいち認証通さなきゃいけなくて非常にめんどくさかったりします。

その問題を解決してくれたのがApple Watchです。

右サイドにあるボタンを2回押すと登録したクレカなどの決済サービスが表示されるので、それをリーダーにかざすだけで決済できます。

おわりに

正直言って腕時計で決済できるくらいに思っているので個人的には大満足です。今度からはランニングなどする際にも使ってみようと思っているのですが、冬が開けてから位のほうが良さげですね。。。

Linuxサーバーのファイアウォール設定方法

はじめに

タイトルに書いてるこれなんですが本当によく忘れてしまうので備忘録で残します。

やり方

LinuxサーバーにSSH接続して、適当に権限のあるユーザー(rootでもなんでもいいですが)までログインしてみます

ログイン後、とりあえず以下のコマンドを実行してみてください。

sudo ufw status

これで一応ファイアウォールの起動を確認できます。 非アクティブ状態です、と出ている場合は、ファイアウォールが起動できていない状態です アクティブ状態の場合は、どこのポートが開放されているのかが出てきます。

sudo ufw status numbered

上記コマンドで開放中のポートに番号を割り振って表示できます。

sudo ufw delete (number)

割り振った番号を(number)のところに記載することでポート開放設定を解除できます。

sudo ufw reload

再読み込みし直します。

今使ってるのはこのくらいなので、また増えてきたら追記します。

おわりに

寒くなってきましたね。。。

マイクロソフトアカウントでログインしている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

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