Flutter を触ってみる

最近アプリ開発をするのに、Flutter を利用する選択肢があります。 気になっていたので今回触ってみました。プロジェクトの作成から、基本的なflutterの構成を見ていきます。

目次

• Flutter を触ってみる
  • 目次
  • Flutter とは
  • Flutter の導入
  • アプリケーションの作成
  • 動作確認
    • シミュレーターの起動
      • iOS の場合
      • Android の場合
    • アプリの起動
  • Flutter プロジェクトの構造
    • ディレクトリ
      • lib ディレクトリ
      • test ディレクトリ
    • pubspec.yaml (依存管理・ビルドツール)
  • Widget
  • 最後に

Flutter とは

FlutterはGoogleが作成した、モバイルUIフレームワークです。
iOS, Android, Desktop, Android のアプリをDartで書いた１つのコードベースから作成することができます。
Flutterの開発言語にはDartを使います。
Dartを使うことでHot reloadの機能を実現しており、コードの修正を即座に確認することができます。

Flutter - Beautiful native apps in record time

• Dartを使って開発を行う
• iOS, Android, Desktop, Android のアプリをDartで書いた１つのコードベースから作成できる
• hot reload が可能。
• iOSとAndroidのアプリを両方作れる

Flutter の導入

Flutter のインストールは下記に従って行います。
Install - Flutter

flutter doctor コマンドを打つことで、足りない設定等があれば教えてくれるので、詰まったらflutter doctorコマンドに従ってインストールをしていくと良いかと思います。

$ flutter doctor

アプリケーションの作成

$ flutter create hello_app
$ cd hello_app

動作確認

シミュレーターの起動

iOS の場合

iosのシミュレーターを起動します。

$ open -a simulator

Android の場合

Androidの場合はAndroid Studioからシミュレータを起動してください。
Android Studio を開いてメニューから「Tools」 => 「AVD Manager」を選択します。

デフォルトで入っているもので、問題なければ、ダウンロードして選択して起動します。

アプリの起動

$ flutter_run

Flutter プロジェクトの構造

作成されたプロジェクトの2階層目までのツリーを下記に示します。

.
├── README.md
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── hello_app_android.iml
│   ├── local.properties
│   └── settings.gradle
├── hello_app.iml
├── ios
│   ├── Flutter
│   ├── Frameworks
│   ├── Runner
│   ├── Runner.xcodeproj
│   ├── Runner.xcworkspace
│   └── ServiceDefinitions.json
├── lib
│   └── main.dart
├── pubspec.lock
├── pubspec.yaml
└── test
    └── widget_test.dart

ディレクトリ

プロジェクト配下にデフォルトで, 下記ディレクトリがありますが、開発時に実際にいじるコードは lib と、test 以下になります。

• android
• ios
• lib
• test

lib ディレクトリ

lib 以下にはソースコードを置きます。
Flutter ではソースコードは Dart で書いていくので、*.dartというファイルをここにおいていくことになります。
今回の場合 lib/main.dart というファイルがメインのソースコードとなります。

test ディレクトリ

ここにはテストを書きます。
ユニットテスト関連のファイルをここに入れていきます。
test/widget_test.dart といったファイルがここに入れていきます。

pubspec.yaml (依存管理・ビルドツール)

Flutter, Dart では依存管理やデプロイなどのツールとして pub という物を使います。
The pub tool | Dart

ビルド設定や、依存関係などを pubspec.yaml というファイルに記述していきます。
Node.jsでいうpackage.jsonだったり、javaだとbuild.gradleに当たるものだと認識しています。

Widget

Flutter の基本構成要素はWidgetです。
Widgetの組み合わでアプリを開発していきます。

UIフレームワークというだけあって、Widgetの種類は豊富です。
Material Components widgets - Flutter
また Material design がデフォルトで適用されます。

最後に

Flutter の良いところ

• Hot reload があるため、効率的な開発ができる
• Widget が豊富で Material Design の統一したデザインが簡単に作成可能
• iOS, Android, Desktop, Android のアプリをDartで書いた１つのコードベースから作成できる

最近アプリ開発をしようと思っているのですが、Android, iOS それぞれ作ることが課題だったりしたのですが、１つのコードベースで作れるのは非常に便利そうです。
また開発効率的にも、コードの修正をすばやく反映してくれるHot reload機能や、
UIフレームワークというだけあって、Widgetを豊富だったり、Material Designに従えばデザインに関しても考えることが減りすばやく開発ができそうです。

VRoid Studio で目の色を変える方法

VRoid Studio で目の色を変える方法について記載します。
VRoid Studio で目の色を変えるためには、自分でテクスチャを編集する必要があります。
今回は VRoid Studio 上で直接テクスチャを編集していく方法で目の色を変えていきたいと思います。

実際の編集画面をまじえ、修正方法について記載していきます。

目次

• VRoid Studio で目の色を変える方法
  • 目次
  • 環境
  • 今回のゴール
  • 目の色を変更する
    • 瞳の編集画面
    • レイヤーを追加する
    • レイヤーの設計
    • 目のベースの色のレイヤー作成
    • 瞳のグラデーションレイヤー作成
    • 瞳の影レイヤー作成
    • 瞳孔レイヤー
  • 最後に
  • 関連記事

環境

• ソフト: VRoid Studio v0.6.4
• OS: Mac

今回のゴール

デフォルトの赤い目から、青い感じの目にすることをゴールとします。

修正前(デフォルト)

修正後(今回のゴール)

目の色を変更する

VRoid Studio で目の色を変えるためには、「瞳」のテクスチャを変更することで実現します。
実際に「瞳」のテクスチャを変更する方法について順を追って説明していきます。

瞳の編集画面

「顔編集」=>「テクスチャ」=> 「瞳」=>「デフォルト画像」を選択します
下図のように現在適用されている画像のテクスチャが表示されます。

編集の際、右目と左目は左右対称としますので、ミラーリングを有効にしておきましょう。

レイヤーを追加する

デフォルト画像を直接編集することもできますが、今回は直接編集することはしません。
レイヤーという機能を使うことで、元の画像（デフォルト画像)には影響を与えずに編集を行えます。

サイドバーから「レイヤー」をクリックしてレイヤーを追加します。

追加したレイヤーを「↑」をクリックしていって一番上に持っていきます。

レイヤーの移動をしたい場合はここの「↑」「↓」で移動させてください。

レイヤーの設計

今回のレイヤーの構成は下記の様にします。

• 瞳孔レイヤー(1番濃い)
• 瞳の影レイヤー(2番目に濃い)
• 瞳のグラデーション(3番目に濃い)
• 目のベースの色レイヤー(4番目に濃い)
• デフォルト画像(瞳の枠部分として残す)

下の方のレイヤーから順次作っていきましょう。
デフォルト画像はすでにあるので、目のベースの色レイヤーから作っていきます。

目のベースの色のレイヤー作成

まずベースとなる色を選択します。
右のサイドバーからブラシカラーを選択できるので、ここからお好きな色を選択します。
今回は青系の瞳にすることにしているので、青系の色にしています。
またレイヤーのところで述べたように、目のベースの色は4番目に濃い色(1番薄い色)のため、薄めの色を選択しておきましょう。

目のベース色レイヤーに対して、塗っていきます。
デフォルト画像の縁の部分だけ残るように、全体を選択した色で塗りつぶします。

この状態だけ見ると、目としては違和感があるかもしれないですが、レイヤーを追加して目らしくしていくので問題ありません。

瞳のグラデーションレイヤー作成

瞳にグラデーション（濃淡)をつけることで、「目らしく」していきます。
色の選択は目のベース色よりも少し濃い色にしてください。
レイヤーを追加して、上に凸な曲線を描くように色を塗っていきます。
塗る領域は全体の3分の2位を塗るようなイメージです。

瞳の影レイヤー作成

瞳の影を付けていきます。
色の選択は瞳のグラデーションレイヤーよりも少し濃い色にしてください。

レイヤーを追加して、上に凸な曲線を描くように色を塗っていきます。
塗る領域は全体の2分の1位を塗るようなイメージです。

だいぶ瞳らしくなってきました。

瞳孔レイヤー

色の選択は一番濃い色にしてください。

瞳孔を書くのはデフォルト画像を参考にしてみたいと思います。
他のレイヤーを一旦非表示にしてデフォルト画像が見えるようにしてみましょう。
レイヤーを選択して右クリックして「表示/非表示」でレイヤーの表示・非表示を切り替えられます。

デフォルト画像の瞳孔部分(真ん中の黒い部分)を参考に瞳孔を塗っていきます。

最後に、非表示のレイヤーを表示に戻してやります。

最後に

VRoid Studio上で目の色を変更するについて記載しました。
目の色を変えるとだいぶ印象が変わってきます。 VRoid Studio上の編集だけでも簡単なテクスチャは作れ、なれてしまえばそんなに時間もかからずできる用になると思います。

関連記事

• VRoid Studio でモデル作成 使い方 | mintsu's blog

VPSに microk8s を導入する

さくらのVPSサーバに学習用にkubernetesを導入していきます。
以前 minikube を導入する記事を書きましたが、今回は microk8s を導入していきます。
以前の minikube についての記事はこちら: VPSにminikubeを入れて失敗した話 | mintsu's blog

目次

• VPSに microk8s を導入する
  • 目次
  • 環境
  • 準備
    • snap のインストール
      • snapdのインストール
    • microk8s をインストールする
  • 動作確認
    • microk8s の起動
    • podの配置まで試してみる
      • deploymentの作成
      • 起動したpodを確認
      • pod のアプリケーションをcurlで叩いてみる
  • まとめ

環境

VPSサーバ	さくらのVPS 1Gプラン
メモリ	1G
HDD	100GB
CPU	仮想2Core
OS	Ubuntu 16.04.6

準備

snap のインストール

参考: Installing snap on Ubuntu - Snap documentation

snapdのインストール

$ sudo apt update
$ sudo apt install snapd

microk8s をインストールする

参考: MicroK8s - Fast, Light, Upstream Developer Kubernetes

インストール

$ sudo snap install microk8s --classic

過去のリリースバージョンの確認や、別のバージョンに切り替えたいときは、こちらのコマンドでリリース済みのバージョンを確認できます

$ snap info microk8s

これは snap の機能になりますが、切り替えるには下記のように refresh で切り替えることができるようです。

$ sudo snap refresh --channel=1.15/beta microk8s

動作確認

microk8s の起動

$ sudo microk8s.start

確認

$ sudo microk8s.status

microk8s is running と表示されていればOKです

バージョン確認

$ microk8s.kubectl version

毎回 microk8s.kubectl と打つのは大変なので kubectlで実行できるようにします。

$ sudo snap alias microk8s.kubectl kubectl

podの配置まで試してみる

参考: Tutorials - Kubernetes

deploymentの作成

$ kubectl run kubernetes-bootcamp --image=gcr.io/google-samples/kubernetes-bootcamp:v1 --port=8080

起動したpodを確認

$ kubectl get pods

# 例
# $ kubectl get pods
# NAME                                  READY   STATUS    RESTARTS   AGE
# kubernetes-bootcamp-b94cb9bff-bb8fl   1/1     Running   0          30s

例のようにSTATUSがRunnningになればOKです

pod のアプリケーションをcurlで叩いてみる

kubectl exec -ti $POD_NAME bash
curl localhost:8080
exit

curl localhost:8080のときに下記のような実行結果が出ます

Hello Kubernetes bootcamp! | Running on: kubernetes-bootcamp-b94cb9bff-bb8fl | v=1

アプリケーションが動くところまでは確認できました.
サーバーの load も上がっておらず学習用途には使うことができそうです。

まとめ

• snap を使って簡単に microk8s を導入可能
• さくらのVPS1Gのスペックで動作可能
• microk8s なら minikube よりも快適

VPSにminikubeを入れて失敗した話 | mintsu's blog
以前 minikube をVPSを入れたときには動作が重くて使い物にならない状態でしたが、microk8sのほうが軽量なのか、 2vCPU, 1G のスペックのVPSでも問題なく動かすことができました。
また、snapで簡単にインストールできるため、導入も非常に簡単に導入ができました

記事に具体的には書いていませんが、microk8s を使うとアドオンとして istioなども簡単に導入できそうです。

今後は microk8s を使って kubernetes の学習をしていきたいと思います。