Android StudioにFlutterを導入する方法

-

 どうも、ケーサンヨーシです。

私は普段、Android用のアプリをAndroid Studioで開発しているんですが、最近新たな波が訪れていると聞きます。それがFlutterです。

FlutterはAndroid Studioと同じく、Googleが開発しているフレームワークで、Dartという言語を用いて開発を行います。

Flutterの良い点の一つは、AndroidOS以外にもiOSなどの他の環境のアプリも同時に開発できる点です。

リリースされてから間もないため、設計が新しいという利点がある一方、参考になりそうな情報は少ないかと思われます。

しかし、巷でも話題になっており、開発できるだけで仕事になりそうな域に到達しているようなので、重い腰を上げて頑張って開発していこうと思います。

今回は、環境構築をやってみます。

それでは行きましょう。

□■□■□

前提として、私の現状の環境ですが、Linux上でAndroid Studioがインストールされている状態です。ここにFlutterをインストールします。

もし、1から始める人は、Android Studioをインストールするところからやってみて下さい。

まずは、以下のコマンドでFlutterをインストールします。

sudo snap install flutter --classic

上手く行くと以下のような結果が出ます。

flutter 0+git.671983f from Flutter Team✓ installed

インストールできたら、Flutterのpathを確認するため、以下のコマンドを打ちます。

flutter sdk-path

このコマンドを打つと、Flutterの初期設定が行われるらしく、かなり長い時間待たされた後にpathが表示されます。

/home/[ユーザー名]/snap/flutter/common/flutter

こうなればFlutterのコマンドが打てるようになり、実際にFlutterが使えるかどうか自動で確認できるようになります。

確認を行うコマンドは以下になります。

flutter doctor

ここからは人によって変わってくると思いますが、私の場合は以下のようなエラーが出ました。

[✓] Flutter (Channel stable, 2.10.3, on Ubuntu 20.04.4 LTS 5.13.0-30-generic, locale ja_JP.UTF-8)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/linux#android-setup for more details.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.64.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

これによると、Xが２つ付いていますが、１つ目は、コマンドラインツールが無いと言っており、２つ目はライセンスが無いと言っています。

1つ目は、Android StudioでSDKツールを起動し、コマンドラインツールをインストールすることで解決します。

Android Studioの立方体っぽいアイコンをクリックすると、インストール画面が開きます。

開いた画面でSDK Toolsのタブを選択し、Command-Lint Toolsにチェックを入れてインストールします。

これで１つ目の問題点は解決できます。

２つ目の問題点であるライセンスは、以下のコマンドを打ってライセンスに同意することで解決します。

flutter doctor --android-licenses

これでもう一度チェックを行うと、全てチェックが入って以下のような状態になります。

[✓] Flutter (Channel stable, 2.10.3, on Ubuntu 20.04.4 LTS 5.13.0-30-generic, locale ja_JP.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.64.2)
[✓] Connected device (1 available)
[✓] HTTP Host Availability

これで環境構築は完了です。

場合によってはプラグインも入れたほうが良いとのことだったので、私は一応入れてみました。

□■□■□

というわけで、Flutterの環境構築を行いました。

正直、一番参考になったのは公式のGet Startだと思います。

https://docs.flutter.dev/get-started/install

これを日本語に翻訳して読めば、今回の内容は全て網羅されています。

これから開発頑張って行きましょう！

以上。

このブログの人気の投稿

動画編集ソフト「Shotcut」で縦向きの動画を横向きにする方法。

-
イメージ
 どうも、ケーサンヨーシです。 今回は私が普段使用している動画編集ソフトの「Shotcut」で、動画の向きを変える方法を紹介します。 この記事は、Shotcutを開いて動画を出力することができるくらいの人向けの内容になります。 Shotcutを開くとこのような画面が出てきます。 今回は実験の材料としてスマホの画面録画動画を用意しました。 この動画を横向きにします。 まずは動画をタイムラインに並べます。 タイムラインに並べたら、上部メニューの「表示」の中から「フイルター」を選択します。 左側に表示されたフィルター画面の中の「＋」ボタンを押します。 追加するフィルターの一覧の中から「サイズ・位置・回転」を選択します。 サイズ・位置・回転フィルターの中の回転の角度の数字を「0」から「90」または「 -90 」にします。 90と-90では回転する向きが逆になるので、自分の動画の向きに合わせて選んで下さい。 次に「縮小拡大」の数字を変更します。 この数字を大きくすると画面に表示される動画がデカくなるので、丁度いいところまで大きくしてください。 この２つを調整することで、動画の向きを変えることができます。 動画の編集中に素材の向きが間違っていても編集の過程でなんとかできるので、ぜひやってみて下さい。 以上、解散！
続きを読む

Audacityで音声部分のみを自動カットする方法

-
イメージ
どうも、ケーサンヨーシです。 私は普段、Youtubeの投稿用の自分の音声を「Audacity」というソフトで録音しています。 このAudacityというソフト、結構色々できるみたいで、たとえば自動で音声部分のみを切り取るなんてこともできます。 しかし、少し前にAudacityがアップデートした時にそのやり方が変わりました。 今回は、その具体的な方法を解説します。 なお、このやり方はAudacityの「3.0.2」のバージョンを元に説明しています。 □■□■□ まずは、いつも通り音声を録音します。 録音するとこのように、録音内容がタイムラインに並びます。 この録音した内容のうち、音声部分のみを切り取る予定の部分を選択します。 選択できたら、上部のメニューの解析をクリックします。 その中に「音声から自動ラベル付け」という項目が下の方に出てくるため、それを選択します。 「音声から自動ラベル付け」を選択すると、専用のウィンドウが出てきます。 このうち私は、一番上の「閾値のレベル(dB)」の部分を「-10」にしています。 名前からして、この数字より小さい音声を無音、大きな音を有音として判断する基準かと思われます。ですので、自身の環境にあわせてこの部分の数字を変更して試行錯誤してください。 変更したら、OKを押します。 そうすると、先程の条件を元に音声の部分のみを選択したラベルが出てきます。 自分で微調整を行うこともできます。 自身での微調整を終えたら、左上のメニューのファイルから複数ファイルの書き出しを選択します。 この部分は、Audacityを常用している方はいつも使っている項目かと思います。 後は出力先のフォルダーを選んで「書き出し」をクリックします。 複数のファイルを出力しているため、音声ファイルのラベルについてのウィンドウが出てくるかもしれませんが、そのままOKで大丈夫です。 これで、書き出し先のフォルダーに音声のみが切り出されたファイルが複数出力されていれば成功です。 後は煮るなり焼くなり好きに使うことができます。 □■□■□ というわけで、Audacityのちょっと凝った使い方を解説しました。 私は、この出力した音声を動画編集ソフトに放り投げて、隙間なく喋る動画に仕上げています。 自分で切り取らない分楽なので良かったらやってみてください。 以上、また会いましょう
続きを読む

Android Studioでの動的なLayoutの幅と高さの変更方法

-
イメージ
 Androidアプリを開発していると結構躓きます。 今回は、後からレイアウトの幅と高さを変更する方法を紹介します。 言語はKotlinです。 まず、私が書いた失敗例がこれです。 #失敗例 findViewById<View>(R.id.testID).layoutParam.height = 100 固定で最初から数字を入れれば一応画面に反映されるんですが、2回目以降反映されません。 どうもheightに値を入れた後でViewを描写し直す必要があるようです。 なので、強制的に描写し直すことで反映させることができます。 #一応動く findViewById<View>(R.id.testID).layoutParam.height = 100 findViewById<View>(R.id.testID).visibility = View.GONE findViewById<View>(R.id.testID).visibility = View.VISIBLE visibilityは、そのレイアウトを表示するかどうかのパラメーターで、GONEは非表示、VISIBLEは表示を表しています。 なので、一度消してもう一度表示しています。 以前作ったアプリで失敗例の書き方を使って動いてしまったので、なぜなのか調べてみたらこのパターンでした。 実際は以下のような書き方をするのが一般的だと思います。 #ちゃんと動く val lp = findViewById<View>(R.id.testID).layoutParams lp.height = 100 findViewById<View>(R.id.testID).layoutParams = lp どうも、layoutParamを入れ直すと反映されるようです。 Viewのパラメーターによってはこんなことしなくてもちゃんと反映されるので、もし反映されないようだったら試してみてください。 以上！
続きを読む