ひじりんのひつまむしブログ

現役システムエンジニアのゲームやら映画やら技術やら・・

WindowsにFlutter環境を構築

 

Flutterとは

Flutterとは、マルチプラットフォームのアプリを作成するものです

などが、作成できるとのこと

需要があるのが、「モバイルアプリ」(ネイティブアプリ)

を作成するにあたり、iOS/Android を両方に作成するため、利用することが多いと思う。

 

今回、Windows環境で、Androidアプリを作成する環境を作る

 

Flutter 環境 のインストール

Flutter - Build apps for any screen

こちらの、サイトを開き、右上に「Get Started」を選択

そうすると、プラットフォームの選択がでてくるので、「Windows」を選択

どんなアプリかも聞かれるので、上述したように「モバイル」を選択

すると、ハードスペックとツール群の記載があります

ハードスペック

  • 64ビット4コア
  • メモリ8G
  • ディスク10G

のようですね。ちなみに、Windowsは10以降だそうです

「Install the Flutter SDK」という欄のところに「Download and install」

を押すと、zip のダウンロードボタンが表示されます。

zip をダウンロードしましょう

ダウンロードができれれば、日本語やスペースのないフォルダに展開します

zip の中に「Flutter」フォルダがありますので、「c:\」などに展開しましょう

次に、Flutterのパスを通します

パスは

設定 > システム > バージョン情報 > システムの詳細設定

より、環境変数 を選択

上段のユーザ固有か、下段のシステム全体かの、Path を選択

編集を押して、ダイアログを開く。

ダイアログでは、新規から、先ほどコピーした「C:\flutter\bin」を追加する

OK を押して、ダイアログを閉じたら、コマンドプロンプトから

flutter --version

で、バージョンなどが表示されたらパスが通っています

 

VisualStudio Code (VSCode) のインストール

Running Visual Studio Code on Windows

上記のサイトから、インストーラーをダウンロードします

Visual Studio Code installer」のアンカーからダウンロードできます

 

VSCodeにFlutterをインストール

Flutter - Visual Studio Marketplace

こちらに、インストールボタンがあり、インストールできます

インストールする際に、VSCodeを先にインストしておくようなメッセージがでますが、まだ、インストしていなければ、先にインストしておいてください

そのメッセージから、VSCodeが開かれます

VSCodeプラグインで、インストールを押下します

 

Flutter サンプルを作成

VSCode で、「Ctrl」「Shift」p を押下する

コマンド選択の枠が表示されるので

flutter: new porject

を選択する

すると、Could not find a Flutter SDK が表示された場合は、

先ほど、ダウンロードしてパスを通しているので、ここでは、「Locate SDK」を選択します

「C:\Flutter」を選択するとこんどは「テンプレート」の選択枠が表示されます

「Application」を選択すると、フォルダの選択になります

ここでも「日本語」「スペース」「-」などがないフォルダを選択します

次にアプリ名が表示されます

「flutter_application_1」

でよければそのまま Enter

「Do you trust the authors of the files in this folder?」

が表示されれば、Yes を押します

ソースが出てくるとOKです

 

Android Studio をインストール

https://developer.android.com/studio?hl=ja

こちらから、ダウンロードします

現在では「Android Studio Giraffe | 2022.3.1 Patch 3」が最新

インストーラーでインストします

インストール後、Android Studio を開く

途中SDKの格納場所が表示されますが、上記同様「日本語」などのフォルダを指定してください

ライセンスの表示があると、全部「accept」を選択します

 

Android Studio を開くと、中央の「More Actions」から SDK Manager を開く

Android SDK 33 がインストールされていなければ、インストール

SDK Tool では

がインストールされていることを確認

 

Flutter の確認

コマンドラインから、

flutter config --android-sdk C:\Android\SDK

を実施する

「C:\Android\SDK」は、上記で、インストールしたときのフォルダです

flutter doctor --android-licenses

を実施する。ライセンスが聞いてこらえるので、y を入力

flutter doctor

を実施する。投稿者の環境では、VisualStudioは入れていないのでそれ以外は、OKでした

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.5, on Microsoft Windows [Version 10.0.22621.2861], locale ja-JP)
[✓] Windows Version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Chrome - develop for the web
[✗] Visual Studio - develop Windows apps
    ✗ Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.85.1)
[✓] Connected device (3 available)
[✓] Network resources

! Doctor found issues in 1 category.

 

 

ここまで、設定して、VSCodeを再起動します

すると、左下のデバイスが更新されていて、選択すると

選択肢のところに、Virtual Device が選択できるようになっています

 

実行

バイスで、Androidのデバイスを選択して、Run & Debug を選択

 

 

Windows 11(10)で、英字名ユーザ作成

 

日本語フォルダの弊害

PostgreSQLなどをインストールすると、日本語フォルダが邪魔して

インストールできない

その場合、日本語ユーザでログインしていることが原因であることもある

Microsoftアカウントでログインすると、アカウントに結びつけられた

日本語名前が採用されてします

 

英字名ユーザの作成方法

Windowsの「設定」から、「アカウント」を選択

「その他のユーザ」から「アカウントの追加」を選択

「このユーザのサインイン情報がありません」を選択

Microsoftアカウントを持たないユーザを追加する」

ユーザ名とパスワードを設定

管理者の権限を付与する

 

ログインする場合

ユーザ名の前に、「.\」をつけないと ローカルにならない場合がある

ドメインに参加していた場合)

Eclipse 日本語の入手

 

Eclipse

Eclipse とは、開発の統合環境で、Java PHP などが開発できる

通常英語であるが、日本語化プロジェクトもある

 

Eclipse 日本語

https://mergedoc.osdn.jp
にアクセスして取得できるのであるが、2023/11/21 現在アクセスできない・・

その場合、

https://willbrains.jp
から取得ができるみたい

AlmaLinux 9 に getssl を用いて、Let's Enciptを入れる

 

Apacheのインストール

AlmaLinux構築直後では、apache が入っていない場合がある

その場合

dnf install httpd

で、インストール。

systemctl start httpd

で、起動。

 

ファイアーウォールの設定

次いでに、ファイアーウォールも起動しておいた方がよい

systemctl start firewalld

ファイアウォールの初期は、httpが許可されていない場合もあるので、追加

firewall-cmd --add-service=http --permanent

firewall-cmd --reload

設定されているかは、

firewall-cmd --list-all

で確認できる。サービスの行に http があればよい

 

また、クラウド業者によっては、パケットフィルターを設定している

ところもあるので、フィルタに Web (http/https) を追加が必要

 

次に進む前に、http にて、ドメインでアクセスできるか確認しておく

(※Google Chrome では、http アクセスを https へ切り替えるという

 事もあるようなので、他のブラウザの方がよいかも・・)

 

getssl の設定

getssl は、certbot の代替としてあるものの一つ

root のホーム等で、下記を実行する

curl --silent https://raw.githubusercontent.com/srvrco/getssl/latest/getssl > getssl

chmod 700 getssl

 

ドメインSSL取得

./getssl -c ドメイン

そうすると、~/.getssl/ドメイン/getssl.cfg

ファイルができる

 

もし、./getssl コマンドが下記のエラーが発生した場合

getssl: this script requires one of: dig nslookup drill host

下記をインストールする

dnf install bind-utils

 

getssl.cfg を書き換える

# The staging server is best for testing
#CA="https://acme-staging-v02.api.letsencrypt.org"
# This server issues full certificates, however has rate limits
#CA="https://acme-v02.api.letsencrypt.org"

この部分は、下の CA の方をコメントアウトを解除する

(上のCAは、テスト用)

# Note: this is Additional domains - so should not include the primary domain.
SANS="別ドメイン"

このドメインは、元々 getssl -c で作成しようとしてるドメインとは

異なるドメインを指定する必要があります

どちらも、自身のサーバを指している必要があり

複数個ドメインを登録する場合は、認証済のドメインでも可能です

# Multiple locations can be defined for a file by separating the locations with a semi-colon.
#ACL=('/var/www/dev.innate-ss.co.jp/web/.well-known/acme-challenge'

こちらは、既存 apache を経由するため、実パスでよい

ACL=('/var/www/html/.well-known/acme-challenge'
     '/var/www/html/.well-known/acme-challenge')

このパスの、/var/www/html は、apache のデフォルトドキュメントルート

と一致するはず

ファイルが更新できれば、保存し getssl のあるディレクトリに戻って

getssl ドメイン

を実行する

正常終了すれば、~/.getssl/ドメイン に

ができていると思います

 

apache を更新

sslモジュールをインストール

dnf install mod_ssl

apache に 証明書を設定。/etc/httpd/conf.d/ssl.conf ファイルの

SSLCertificateFile /etc/pki/tls/certs/localhost.crt

SSLCertificateKeyFile /etc/pki/tls/private/localhost.key

を、先程作成したファイルに変更

 

apacheを再起動

systemctl restart httpd

 

ファイアウォールも追加しておく

firewall-cmd --add-service=https --permanent

firewall-cmd --reload

 

Let's Encriptの更新

更新は、下記を cron 登録しておくとよい

5 0 1 * * /root/getssl -u -a -q
5 0 5 * * /root/getssl -u -a -q

期限まで、30日未満になると更新できるので

月1回程度で、実施して。ただし、31日の月もあるので

毎月1日と5日などの、2回を実施しておけば、どちらかで更新できる

 

不要になったドメインの更新対象外

更新対象外とする場合は、下記を実行する

# getssl -r ドメイン

 

AlmaLinux 8にFreeSFAをインストール

 

SFAとは

Sales Force Automation 営業支援ツール。
いくつか、酒類がありますが、今回は、オープンソースのFreeSFAを
インストールしたいと思います

 

pythonのインストール

FreeSFAは、PythonDjangoで動いていますので
そちらをインストールします

 

hijirinhima.hatenablog.com

 

データベースの構築

FreeSFAは、PostgreSQLMySQLなどに対応していますが
今回はMySQLを入れます

 

hijirinhima.hatenablog.com

 

また、データベースの文字コードもそろえておきましょう

 

hijirinhima.hatenablog.com

 

準備ができると、空のデータベースを作ります

#mysql -u root

mysql>CREATE DATABASE freesfa CHARACTER SET utf8mb4;

mysql>CREATE USER 'freesfa'@'localhost' IDENTIFIED BY 'freesfa';

mysql>GRANT ALL ON freesfa.* TO 'freesfa'@'localhost';

 

FreeSFA用のユーザを作成

FreeSFA用のユーザを作ります

# addusr freesfa

 

FreeSFA本体を取得

#cd /home/freesfa

#git clone https://github.com/sikkimtemi/FreeSFA.git

 

#cd FreeSFA

#cd IISE

#vi local_sttings.py

import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

SECRET_KEY = '6jn1ssy-4-0(he(8w((l*53f2gjuzgo$u134zoj73*ebgq+!j%'

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'freesfa',
        'USER': 'freesfa',
        'HOST': 'localhost',
        'PASSWORD': 'freesfa',
        'PORT': '3306',
        'OPTIONS': {
            'charset': 'utf8mb4',
            'init_command': "SET sql_mode='STRICT_TRANS_TABLES'",
        }
    }
}

DEBUG = True

ALLOWED_HOSTS = [
    '*',
]

# SOCIAL AUTH
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = ''
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = ''
#SOCIAL_AUTH_TWITTER_KEY = ''
#SOCIAL_AUTH_TWITTER_SECRET = ''
#SOCIAL_AUTH_GITHUB_KEY = ''
#SOCIAL_AUTH_GITHUB_SECRET = ''

# reCAPTCHA
GOOGLE_RECAPTCHA_SITE_KEY = ''
GOOGLE_RECAPTCHA_SECRET_KEY = ''

# Mail server
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 465
EMAIL_HOST_USER = 'myuser'
EMAIL_HOST_PASSWORD = 'mypassword'
EMAIL_USE_SSL = True

 


 起動させる

#cd FreeSFA

パッケージのインストール

#pip install -r requirements.txt

 

私の環境では、ikp3db のバージョン的に合わないらしい

ikp3db は、python3.6が必要で、私のpipが3.7以上が必要で合わなかった

#vi requirements.txt

ikp3db==1.4.1

に変更

 

psycopg2 でもエラーが・・

# Error: pg_config executable not found.

これは、pg (PostgreSQL)が無かったみたい

#dnf install postgresql-devel

こちらも必要ですね

#dnf install gcc python38-devel python38-psycopg2 postgresql-contrib

また、下記のようなバージョンが出る場合

      psycopg/psycopgmodule.c: In function ‘psyco_is_main_interp’:
      psycopg/psycopgmodule.c:689:18: error: dereferencing pointer to incomplete type ‘PyInterpreterState’ 

バグのようで、バージョン更新されているようです

psycopg2==2.8.5
psycopg2-binary==2.8.4

といったように、バージョンの修正

 

DBの作成

#python manage.py migrate

 

こんどは、このエラー

django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module.
Did you install mysqlclient?

もう、ほんと、かんべんしてほしいよ・・・

#pip install pymysql

そして、IISE フォルダ上の __init__.py に下記を加える

#cd IISE

#vi __init__.py

import pymysql

pymysql.install_as_MySQLdb()

 

これで、DB作成ができる。再度実行

#python manage.py migrate

 

ユーザの作成

#python manage.py createsuperuser

Email address: *******
Password: *******
Password (again): ******
Superuser created successfully.

 

ここまで出来たらあと1歩?

#python manage.py runserver サーバIP:8000

 

ん・・・ここでも、ログインすると

TypeError: not enough arguments for format string

 

これは、依存する defusedxml が、0.5.0 だと、python3.6 までだそう

defusedxml==0.7.1

バージョンを変更してパッケージを入れ直し

#pip install -r requirements.txt

 

さて、

 

LiunxのMySQLで、文字コードの初期値設定

 

文字コードの初期値を設定

/etc/my.cnf

を修正

#vi /etc/my.cnf

 

[client]
default-character-set = utf8mb4

[mysql]
default-character-set = utf8mb4

[mysqld]
character_set_server=utf8mb4
skip-character-set-client-handshake

 

再起動

#systemctl restart mysqld

 

AlmaLinux 8にPythonとDjangoをインストール

 

Pythonインストール

Pythonはインストールされていることが多いです

#dnf install python

でインスト可能。後述のpip が、ver3.7以降なので

#dnf list | grep python

また

#python -V

でバージョンが確認できます

別バージョンをインストールするには

#dnf install python3.11

 

pipインストール

#wget https://bootstrap.pypa.io/get-pip.py

#python get-pip.py

#pip -V

 

Djangoインストール

Django (ジャンゴと読むらしい)

#pip install django

 

PVアクセスランキング にほんブログ村