2022年のまとめと2023年にやりたいこと

あけましておめでとうございます（遅）
今年もゆるーくブログを書いていこうかと思っています。

2022年の年末にまとめとかを書かなかったので、ここで書いておこうかと思います。

2022年個人開発事情

実は2つアプリを公開しています。
アプリのリンクはこちらに貼ってあります。

qkuronekop.my.canva.site

Canvaで練習がてら作ったポートフォリオサイトです。
こちらは予告なく削除する可能性があります。

城NaviとRemanagaというアプリを公開しています。

どちらもFlutter製です。

2022年の頭にはとになく何かやらなくちゃみたいな気持ちで個人開発アプリを作ってました。

その後、出産し業務委託で仕事を始めて個人開発する時間がなくなってしまい失速。

結局公開できたのは２つだけでした。

機能もいまいちでインストールも全然されていないので、もうちょっとちゃんと作り込みたいです。

2023年にやりたいこと

2022年の年末頃からvue3でアプリ作りを始めました。

長い事、モバイルのお仕事してたのでちょっと飽きがきていたのでWebフロントとかやっていきたいなーと思って始めました。

手始めにvue3でのアプリ開発をしています。

アプリを作っている様子はnoteに書いています。

note.com

そんな感じで、今年も個人開発と業務委託のお仕事を頑張っていこうと思います。

ViteでVue3+TypeScript+TailwindCSS+axiosでお天気予報アプリを作ってみる

掲題の通りなのですが、Vue3とTypescriptの練習がてらお天気予報アプリを作ってみました。

Versionとか

$ node --version
v19.2.0
$ npm -v
8.19.3

プロジェクト作成

qiita.com

こちらのQiitaの記事を参考にさせていただきました。

Open Weather

openweathermap.org

データはこちらのapiを使いました。
英語のサイトなので、日本語で使い方を説明してくれている記事がありましたので、こちらを参考にしました。

auto-worker.com

実装

github.com

GitHubにコードをアップしてみました。
よかったら参考にしてみてください。

hosting

weatherapp-d206b.web.app

作ったものはFirebaseHostingにアップしてみました。
↑から遷移できます。
よかったら見ていってください。
右上のタブで地域を切り替えることができます。
47都道府県、途中で面倒になっちゃったのでざっくり東日本だけ切り替え可能です。
extensionの使い方はアンチパターン感ありますね。
初心者なので許してください。

ja.vitejs.dev

firebaseへのhosting方法はこちらにあります。

感想

Vue3での書き方を探すのに苦労しました。
以前の書き方を知っている人ならそんなに苦労せずに置き換えて考えられるのかもしれないです。
以前の書き方も知らないのでどうかこうか迷いました。
ref()でフレキシブルにデータを再描画できるのはいいですね。
今回はコンポーネントを細かく分けずに１つのコンポーネントだけを作っているので、Viewをいい感じに分けるのもやっていきたいです。

【flutter】【go_router】flutter webでgo routerを使った時にurlの#を消す方法

こんにちは。
本日はgo routerを使った時にブラウザに表示される#を消す方法について書きたいと思います。

go routerについてはこちらを参考にしてみてください。

zenn.dev

ここにリンクされているページを一通り読むとgo routerについて理解できるかと思います。
モバイルアプリ開発しかやったことない方は理解が難しいかもしれませんが、webアプリの経験があればすぐに理解できるかなと思います。

さて、flutetr webでアプリを作るとurlに#がついてしまうと思います。

url 例

こんな感じ。
この#を消す方法が↑の目次の「サンプルコード集」のリンク先にもあるのですが、go_route5.1.5では使えないみたいです。
以前のバージョンではできていたんだと思います。
なお、どのバージョンから消えたのかの検証、確認はしていません。
該当の引数がない場合には↓の方法を試してみてください。

バージョン

flutter: 3.3.7
dart: 2.18.4
go_route: 5.1.5

pub.dev これを使います。

dependencies:
  flutter:
    sdk: flutter
  url_strategy: ^0.2.0

追加。

flutter pu get

import 'package:url_strategy/url_strategy.dart'; ←追加

void main() {
  setPathUrlStrategy(); ←追加
  runApp(const MyApp());
}

これで、#が消えます。

以上です。

【Docker】【Vue3】Docker+Vue3開発環境を作る

こんにちは。
Webアプリが作りたい今日この頃なんですが、フロントエンドにはVue3を使いたいと思い、自分のローカルに開発環境を作った話をしようと思います。

参考

qiita.com

こちらのqiitaの記事を参考にさせていただきました。

実行環境

MacOS Moterey 12.5.1
docker 20.10.11
docker-compose 1.29.2

作業ディレクトリ

- docker-compose.yaml
- Dockerfile

上記２つのファイルを作ります。

Dockerfile

FROM node:16.16

RUN apt-get update -qq && yarn global add @vue/cli

WORKDIR /app
COPY . /app

CMD ["/bin/bash"]

docker-compose

version: "3.9"

services:
  client:
    build: ./app
    container_name: app
    ports:
      - "8080:8080"
    expose:
      - "8080"
    volumes:
      - ./app:/app
    tty: true
    stdin_open: true

実行

$ docker image build . -t app
$ docker container run --rm -it -p 8080:8080 app

vueのインストール

$ yarn -v
# 1.22.19

yarnは最初から入っていました。

$ yarn global add @vue/cli

プロジェクトの作成

$ vue create my-project

プロジェクトができたら動かしてみます。

$ cd my-project
$ yarn serve

localhost:8080にアクセスするとVueのページが見れます。

まとめ

• とりあえず動かすのは簡単
• 参考記事のコピーでDockerfileを作ったのでvolumeの意味がわかってなくて最初は困った
• 新規でアプリを作ったのであまり旨味を感じなかったけど、既にあるアプリを動かそうとするならインストールできないものがあるとかで困らなくなるのでよさそう
• Dockerもっと色々できそうなので順次調べていきたい 　　

【Flutter】【dart】コード自動生成mason使ってみた

こんにちは。
本日はdartのコードを自動生成できるプラグインmasonを使ってみたいと思います。

早速インストールしてみましょう。

私の実行環境はこちら。

flutter: 3.3.5
dart: 2.18.2 (stable)

インストール

$ dart pub global activate mason_cli
+ archive 3.3.2dencies... (1.3s)
+ args 2.3.1
+ async 2.9.0
+ checked_yaml 2.0.1
+ cli_util 0.3.5
+ collection 1.17.0
+ crypto 3.0.2
+ file 6.1.4
+ http 0.13.5
+ http_parser 4.0.2
+ json_annotation 4.7.0
+ mason 0.1.0-dev.34
+ mason_api 0.1.0-dev.8
+ mason_cli 0.1.0-dev.37
+ mason_logger 0.2.1
+ meta 1.8.0
+ mustache_template 2.0.0
+ path 1.8.2
+ platform 3.1.0
+ pool 1.5.1
+ process 4.2.4
+ pub_semver 2.1.2
+ pub_updater 0.2.2
+ recase 4.1.0
+ source_span 1.9.1
+ stack_trace 1.11.0
+ string_scanner 1.1.1
+ term_glyph 1.2.1
+ typed_data 1.3.1
+ yaml 3.1.1
Downloading mason_cli 0.1.0-dev.37...
Downloading pub_updater 0.2.2...
Downloading mason_api 0.1.0-dev.8...
Downloading mason 0.1.0-dev.34...
Downloading recase 4.1.0...
Downloading mason_logger 0.2.1...
Downloading stack_trace 1.11.0...
Downloading pub_semver 2.1.2...
Downloading collection 1.17.0...
Downloading http_parser 4.0.2...
Downloading archive 3.3.2...
Building package executables... (1.3s)
Built mason_cli:mason.
Installed executable mason.
Activated mason_cli 0.1.0-dev.37.

masonコマンドを打って以下の表示が出ればインストール成功。

$ mason
🧱  mason • lay the foundation!

Usage: mason <command> [arguments]

Global options:
-h, --help       Print this usage information.
    --version    Print the current version.

Available commands:
  add        Adds a brick from a local or remote source.
  bundle     Generates a bundle from a brick template.
  cache      Interact with mason cache.
  get        Gets all bricks in the nearest mason.yaml.
  init       Initialize mason in the current directory.
  list       Lists installed bricks.
  login      Log into brickhub.dev.
  logout     Log out of brickhub.dev.
  make       Generate code using an existing brick template.
  new        Creates a new brick template.
  publish    Publish the current brick to brickhub.dev.
  remove     Removes a brick.
  search     Search published bricks on brickhub.dev.
  unbundle   Generates a brick template from a bundle.
  update     Update mason.
  upgrade    Upgrade bricks to their latest versions.

Run "mason help <command>" for more information about a command.

masonテンプレートを作成するには、テンプレートを作成したいフォルダの下でmason initを打つ。
私の場合は、新しいFlutterプロジェクトを作って、その下にmasonフォルダを新規作成しました。
参考↓

AndroidStudio mason 参考１

テンプレートを作成します。

テンプレートを保存しておくフォルダを作成します。
私の場合は先ほど作成したmasonフォルダの下にbricksフォルダを作りました。
作成したフォルダに移動して、mason new <テンプレート名>コマンドを打ちます。 (例)

mason new my_stateless_widget

するとですね、bricksフォルダの下にmy_stateless_widgetフォルダができます。
その下には

 __brick__
brick.yaml
CHANGELOG.md
LICENSE
README.md

というフォルダとファイルができます。
__brick__というフォルダの下にテンプレートを保存します。
最初からHELLO.mdというテンプレートが入っていると思いますが、こちらは消して大丈夫です。
ここに{{name.snakeCase()}}.dartというファイルを作成し、下記のコードを保存します。

import 'package:flutter/material.dart';

class {{name.pascalCase()}} extends StatelessWidget {
  const {{name.pascalCase()}}({super.key});

  @override
  Widget build(BuildContext context) {
    return const {{child.pascalCase()}}('{{text.pascalCase()}}');
  }
}

{{}}で囲まれた箇所は引数といして自由に書き換え可能です。
brick.ymlのvars:の部分を書き換えます。

name: my_stateless_widget
description: A new brick created with the Mason CLI.

# The following defines the version and build number for your brick.
# A version number is three numbers separated by dots, like 1.2.34
# followed by an optional build number (separated by a +).
version: 0.1.0+1

# The following defines the environment for the current brick.
# It includes the version of mason that the brick requires.
environment:
  mason: ">=0.1.0-dev.26 <0.1.0"

# Variables specify dynamic values that your brick depends on.
# Zero or more variables can be specified for a given brick.
# Each variable has:
#  * a type (string, number, boolean, enum, or array)
#  * an optional short description
#  * an optional default value
#  * an optional list of default values (array only)
#  * an optional prompt phrase used when asking for the variable
#  * a list of values (enums only)
vars:
  name:
    type: string
    description: Your file name
    default: Dash
    prompt: What is your file name?
  child:
    type: string
    description: Your widget name
    default: Dash
    prompt: What is your widget name?
  text:
    type: string
    description: add text
    default:
    prompt: What is your text?

テンプレートを登録します。

mason add -g my_stateless_widget --path my_stateless_widget

-gをつけることで、現在のフォルダに関わらず、 どこでも作成したテンプレートを使用できるようになるそうです。

早速、このテンプレートを使ってStatelessWidget作成してみます。
ファイルを作成したいフォルダに移動します。
flutterのWidgetコードを作成したいので、flutterプロジェクトのlibフォルダに移動します。

$ mason make my_stateless_widget
? What is your file name? (Dash) first_screen
? What is your widget name? (Dash) text
? What is your text? hello
✓ Made brick my_stateless_widget (45ms)
✓ Generated 1 file:

AndroidStudio mason 参考2

できたコードはこんな感じ。

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Hello');
  }
}

まとめ

• 同じような画面やUIを沢山作るのによさそう
• ある程度決まりきったUI(BottomTabWidgetとか)とか作るのによさそう
• いつもつかうimportとかを最初から入れておけるのよさそう
• アプリを沢山作る場合には使えそう
• もっと色々できそうなので調べてみたい

参考

blog.flutteruniv.com

pub.dev

brickhub.dev

【Python勉強中】Windonws環境で日本語を含むjsonを読み込む

現在python勉強中です。
最終目標は機械学習がやりたい訳なのですが、機械学習系のスクリプトってpythonが使われる事が圧倒的に多いですよね。
なので、この機会にpython書けるようになりたいなと思い、簡単なプログラムを書いてみる活動を始めました。

使わせていただいたデータはこちらのポケモンのjsonデータ。

github.com

その中でもとりあえず最初は少ないデータからと思い、types.jsonを使いました。
types.jsonをコピーしてローカルに保存します。
今回は、poke_type.jsonという名前で保存しました。
書いたスクリプトはこちら。

import json

# ファイルを開く
json_open = open('poke_type.json', 'r')

# 開いたファイルをJsonとして読み込む
json_load = json.load(json_open)

# 確認
print(json_load)

これを実行するとエラーになってしまいました。

UnicodeDecodeError: 'cp932' codec can't decode byte 0x83 in position 81: illegal multibyte sequence

ファイルをUTF8にしていてもWindowsを使っていると勝手にcp932にエンコードされるようです。
なので、スクリプトの７行目を以下のように修正しました。

import json

# ファイルを開く
json_open = open('poke_type.json', 'r',encoding="utf-8")

# 開いたファイルをJsonとして読み込む
json_load = json.load(json_open)

# 確認
print(json_load)

BOM付きの場合にはencoding="utf-8_sig"とする必要があるみたいです。

これで無事にjsonを読み込めたみたいです。

[{'english': 'Normal', 'chinese': '一般', 'japanese': 'ノーマル'}, {'english': 'Fighting', 'chinese': '格斗', 'japanese': 'かくとう'}, {'english': 'Flying', 'chinese': '飞行', 'japanese': 'ひこう'}, {'english': 'Poison', 'chinese': '毒', 'japanese': 'どく'}, {'english': 'Ground', 'chinese': '地上', 'japanese': 'じめん'}, {'english': 'Rock', 'chinese': '岩石', 'japanese': 'いわ'}, {'english': 'Bug', 'chinese': '虫', 'japanese': 'むし'}, {'english': 'Ghost', 'chinese': '幽灵', 'japanese': 'ゴースト'}, {'english': 'Steel', 'chinese': '钢', 'japanese': 'はがね'}, {'english': 'Fire', 'chinese': '炎', 'japanese': 'ほのお'}, {'english': 'Water', 'chinese': '水', 'japanese': 'みず'}, {'english': 'Grass', 'chinese': '草', 'japanese': 'くさ'}, {'english': 'Electric', 'chinese': '电', 'japanese': 'でんき'}, {'english': 'Psychic', 'chinese': '超能', 'japanese': 'エスパー'}, {'english': 'Ice', 'chinese': '冰', 'japanese': 'こおり'}, {'english': 'Dragon', 'chinese': '龙', 'japanese': 'ドラゴン'}, {'english': 'Dark', 'chinese': '恶', 'japanese': 'あく'}, {'english': 'Fairy', 'chinese': '妖精', 'japanese': 'フェアリー'}]

参考：

qiita.com

Flutterで作った個人開発アプリが公開されました

城Navi公開

play.google.com

アプリの概要は日本のお城を検索できるアプリです。

選定技術

Flutter

まずアプリを作成するのにはFlutterを使いました。
これは最近、私がFlutterばかり使っていてすぐに作れると思ったからです。
iOSやWebにもできますし、いいですよね。
本当はiOSやWebも同時にリリースしたかったのですが、どちらもうまいことビルドできなくなってしまい現在原因調査中です。
うまいことエラーの解消ができたらいずれiOS版、Web版もリリースしていきたいです。

Firebase

データの保存先はFirestore databaseを使っています。
お城のデータ、お知らせ、お問い合わせなんかをFirestoreを使ってアプリとやりとりしています。
現在はアプリから直接Firestoreのデータを取得するようになっていますが、ページネーションや文字検索の機能を追加していきたいので、functionsを噛ませていきたいなと思っています。

まとめ

全体的に多くの機能を使っている訳ではないですし、前回書いたこの記事でも言いましたが、まだやりたい事も沢山あるのでちょっとずつ機能を増やしていけたらいいなと思っています。

qkuronekop.hatenablog.jp

なにせアプリをリリースするのも久しぶりで、以前アプリをリリースした時にはapkをアップしたのですが、今回はapp bundleにしてみました。
Flutterで署名付きapp bundleを作る方法はまた別途書きたいと思います。

それではこの記事を読んでくださり、なおかつお城好きな方がいらっしゃいましたらぜひアプリをダウンロードしていただけると幸いです。