月: 2019年6月

　さて、今度こそ動かします。まずはプロジェクトの作成からです。

• 

　「Start a new Flutter project」をクリックします。

• 

　一般的なアプリケーションを作成するので、「Flutter Application」を選択します。「Next」をクリックします。

• 

　ここでは、新しいFlutterアプリケーションの情報を入力します。今回はお試しなので、おすすめの設定のままで大丈夫でしょう。「Next」をクリックします。

• 

　パッケージの名前を設定するようです。「Company domain」だけ、「ishikawasekkei.com」に変更してみます。「Package name」が変更されました。あと、「Sample Application」のところの「generate sample content」をチェックしてみましょう。きっとサンプルが作成されることでしょう。「Finish」をクリックします。

• 

　しばらく待った後、プロジェクトが開かれました。Android Studioをインストールした後に作っておいた仮想デバイスで動かしてみたいと思います。

• 

　この、デバイスを選ぶところで「Open Android Emulator: Pixel 3 API Q」を選択して、三角形をクリックしてみようと思います。

• 

　デバイスを選択すると仮想端末が開きました。そして、実行の三角形をクリックすると、「Initializing gradle…」で結構長い時間待たされた後、「Resolving dependencies…」が出てきて、警告が出てきました。

• 

　プライベートネットワークとパブリックネットワークの両方にチェックして、「アクセスを許可する」をクリック。許可しないと、使えませんからね。

• 

　おっと、エラーがでました。。。今のところ原因はよく分かりませんが、仮想デバイスがいけないのかも知れません。ちょっと調べてみないとねぇ。。。

　と、言うことで調査完了いたしました。対応しまして、再度三角形をクリックして実行したところ、コンソールに以下のような出力が表示されまして、画面に最初のアプリケーションが表示されました。

• 

• 

　やっと動きました！

　さて、今回のエラーについて、どうやって対処したかというと、
１．http://dl-ssl.google.com/android/repository/platform-tools_r28.0.2-windows.zipをダウンロード。
２．解凍した「platform-tools」フォルダを、C:\Users\mitsu\AppData\Local\Android\Sdk配下のフォルダと置き換える。
　と、今回はただそれだけでした。ちなみに、解決方法については、ここに記載されていました。内容は根本解決にはなっておらず、このフォルダの内容を以前のものにダウングレードするだけ、というものでした。
　投稿はちょうど2日前のもので、このあたり、Flutterは現在進行形の開発環境で、かなり活発に利用されているなぁ、という感じがしました。Flutter開発をするなら、開発環境がまだ整備されていないのかも、という疑う姿勢と、英語で検索するスキルが絶対に必要だなぁ、と、思いました。
（追記：その2日後に、platform-toolsのバージョンが29.0.1と、リビジョンが一つ増えて根本解決していました。Flutter開発者集団は、優秀で仕事が早いですね！）

　では、仮想環境ではなくて、本当に端末で動くのか、確認したいと思います。まずは、動かしたい端末の設定です。USBケーブルで接続して動かしていくのですけど、「開発者向けオプション」の「USBデバッグ」を有効にする必要があります。「開発者向けオプション」を表示させるためには、スマフォの「設定」-「システム」-「端末情報」と進み、「端末情報」の中の「ビルド番号」を数回タップすると表示されますので確認してみてください。ケーブルをつなぐとスマフォに「USBデバッグが接続されました」と表示されました。
　ええと、Android Studioの上部に自動的に表示されると思っていたのですが、出てきませんねぇ。

• 

　もしかしたら、仮想環境でアプリを実行中だからかも知れませんね。と、いうことで仮想環境のアプリを終了してみます。
　ダメですねぇ。。。
　メニューにそれらしいものがないか、探してみます。

• 

「Tools」の中に「Connection Assistant」というのを見つけました。クリックして見ます。

• 

　すると、右上に上記のようなウィンドウが開いて、スキャンが始まり、しばらくすると「SH-03K」という接続したぼくのスマフォが表示されました。「Next →」をクリックします。次の表示を見てみると、「USBデバッグ」を有効にせよ、と、書いてあって、手順も書いてありました（英語で）。「Next →」をクリックします。

• 

　ADB（Android Debug Bridge）serverをリスタートせよ、ということですので「Restart ADB server」ボタンをクリックします。
　…全然表示は変わりませんねぇ。と、しばらくウロウロしていたのですけれど、ふと、スマフォの方を見てみると「USBデバッグを許可しますか？」と、聞いてきていました！ええと、もしかして、リスタートとか必要なかったのかも。スマフォの「OK」をクリックします。

• 

　はい、ちゃんと表示されました。選択して、実行します。

• 

　下の方のコンソールに実行中のメッセージがちゃんと出てきました。ここに選択した端末の名前が出てたのですね。

• 

　実機にも出力されました！
　さて、噂のHot Reloadを試してみたくなりました。タイトル部分の「Flutter Demo Home Page」を修正してみます。

• 

　ここですね。ここの部分を、「フラッターでもホームページ」に変えてみます。

• 

　さすがに修正しただけでは変わりませんねぇ。ファイルを保存してみます。「Ctrl+S」を押してみます。

• 

　すぐにコンソールに「Performing hot reload…」と出力されました。

　修正も、一瞬で反映されました。できました～！

　前回の続きです。次にやらないといけないことは、PATHの設定です。

• 

　ユーザー変数のPATHを設定するために、Windows画面左下の「ここに入力して検索」のところへ「env」とキー入力します。

• 

　すると「システム環境変数の編集」が検索されてきますので、クリックします。

• 

　「環境変数(N)…」をクリックします。

• 

　「Path」を選んで「編集(E)…」をクリックします。

• 

　「新規(N)」をクリックします。

• 

　「C:\Flutter\bin」を追加して「OK」を次々とクリックしてPATHの追加は終了です。

次は、「flutter doctor」コマンドを実行せよ、ということですので、実行してみます。

• 

　しばらくグルグルしていましたが、メッセージが出てまいりました。Flutterはちゃんとインストールされているようです。Android toolchainの中で、いくつかのライセンスが受け付けられてなくてダメ、と言われております。解決するためには「flutter doctor –android-licenses」を実行してね、と言われましたので、実行してみます。そういえば、フライイングして、AndroidStudioはインストールしておいたのでした。こちらは別途記事をアップしたいと思います。

• 

　ここで初期値のままエンターキーを押すと終了しました。ま、当たり前ですけど。再度実行して、このタイミングで「y」を入力してからエンターキーを押すと、たくさんメッセージが出力されて、またしても、「y/N」を聞かれます。

• 

　 上の方に戻って見てみますと、「The Google TV Add-on for the Android Software Development Kit」のソフトウエア利用許諾契約が5個のうちのひとつ目ということで出力されていました。たぶんテレビのアドオンは使わないですねぇ。エラーじゃなくて警告ということだから、全部そのままでいいような気がしてきました。でも、後から問題になったときに問題を発見するのは難しいだろうなぁ。と、いうことで、今回はすべて許諾をよく読んでひとつずつ「y」を入れて許諾していくことにしようと思います。

• The Google TV Add-on for the Android Software Development Kit License Agreement
• The Android Software Development Kit License Agreement
• The Glass Development Kit License Agreement
• Intel (R) Hardware Accelerated Execution Manager End-User License Agreement
• MIPS Technologies, Inc. (gMIPSh) Internal Evaluation License Agreement for MIPS Android

　以上、順番に許諾していきました。
　そして、次の2つに対応したいと思います。
[!] Android Studio (version 3.4)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.

　FlutterホームページのGet Started － Set up an editor に書いてありました。

• 

まずは、Android Studioを起動します。

• 

　しばらく待つと、「Welcome to Android Studio」画面が登場します。

• 

　はて、Fileメニューがありませんね。プロジェクトを作成していないからでしょうか。ConfigureをクリックしたらSettingsとPluginsがありました。

• 

　確認したところPluginsでも同じ画面にたどり着きましたので、Settingsの方がわかりやすいと思いますので、そちらの画面を採用します。

• 

　Flutterの項目の「Install」をクリックします。

• 

　サードパーティのプラグインが個人情報を扱う方法についてはJetBrains社は全く関知しないのでちゃんとチェックしてくださいね、というメッセージが表示されました。「Accept」をクリックします。

• 

　「インストールしようとしているプラグインはDartのプラグインを必要としています。続けますか？」はい、当然、続けますよ。「Yes」をクリックします。

• 

　しばらく待つと、上記のようにボタンが「Restart IDE」に変わります。これをクリックしてAndroid Studioを再起動します。

• 

　はい、「Restart」ですよ～。

• 

　おっ、Flutter用のメニューが増えていますね。もう一度「flutter doctor」コマンドを実行してみます。

• 

　エラーは解決しました。Flutter入門には、「Flutter I18n」というプラグインもインストールしてね、と書いてありましたので、同様にインストールしておきました。日本語を扱うときに必要な国際化プラグインですね。
　あとは接続デバイスですが、現在接続されているデバイスを表しているだけ、ということで、つなげば解消するということですので気にしないことにします。これでセットアップは概ね完了ですね。次回、プロジェクトを作って実際に動かしてみたいと思います。やっと実行できる～！！！

　どうにも今まで書いてきた内容がプロっぽくないのですけど、さらにプロっぽくない感じの内容をアップしていきます。今回は、Flutterが使えるようになるまでのお話です。秀和システムから出版されている『Android/ iOSクロス開発フレームワーク Flutter入門』を買ってきまして、これからFlutterを使ってみたいと思います。
　 それで、ざっと書籍に目を通してみまして、一番最初に「マジか～」と思った点ですが、「Windowsでは、iOSアプリのビルドができない。」という点ですね。ぼくはWindowsマシンを使っていますので、ちょっとがっくりきました。アプリ開発は、macOSの方が有利、ということなのですね。まあ、当然と言われればそうなのでしょうけど、macOSからはどちらもビルドできるなんて、、、今までずっと抵抗していましたけど、そろそろ乗換時期なのかなぁ。MacProもかっこよかったし。。。

　はい、気を取り直して。まずはFlutter SDKのセットアップをします。書籍には色々と書いてあったのですけど、公式ホームページの手順に従ってやっていきたいと思います。基本的にはzipファイルをダウンロードしてきて、PATHを設定するだけで完了のはずです。
　まずはGoogle先生に「Flutter install」を聞いてみます。動画の次にインストール方法が出てきました。

• 

　ぼくの環境はWindowsですので、こちらをクリックしました。

• 

　システム必要要件です。OSはWindows10を使っていますので、問題ありませんね。ディスクもたくさん用意してありますので、問題ありません。そして、ToolsのWindows PowerShell 5.0以上は、Windows10の場合はプリインストールされている、ということですので、気にしなくてよさそうです。最後の「Git for Windows」が必要ですね。ホントにいるのかなぁ、と、思いつつも、入れておくことにします。

• 

　クリックすると、勝手にダウンロードが始まりました。「Git-2.21.0-64-bit.exe」がダウンロードされましたので、ウィルスチェックしてから管理者権限を使ってインストールします。ユーザ制御は当然OKしました。

• 

　「Next ＞」をクリックします。

• 

　再度、「Next >」をクリックします。

• 

　これも初期値でよさそうです。「Next >」をクリックします。

• 

　スタートメニューのフォルダについて聞いてきました。特に変える理由もないので、そのままにして「Next >」をクリックします。

• 

　はい、次はデフォルトエディタを選んでください、と、言ってきました。ぼくはどちｒかというとVimエディタが大好きなので、このまま「Next >」をクリックします。Vimエディタのこと知らない、とか、使いにくい、というひとは変える必要がありますね。
選択肢としては、「the Nano」「Notepad++」「Visual Studio Code」「Visual Studio Code Insider」「Sublime」「Atom」「その他」となっていました。世界のエディタ情勢はこんな感じなのですね。サクラエディタが入っていません。

• 

　次は環境変数のPATHについての質問です。ここもデフォルトで問題なさそうです。「Next >」をクリックします。

• 

　HTTPSで接続するときに使うライブラリを選択します。特に認証サーバーとか使う予定はないので、デフォルトのままで問題ないでしょう。「Next >」をクリックします。

• 

　テキストファイルの改行文字の設定ですね。デフォルトのままで。「Next >」をクリックします。

• 

　コンソールをどうするか、という設定ですね。特にこだわりがないので、デフォルトのままで「Next >」をクリックします。

• 

　だんだんうんざりしてまいりました。。。いや、いかん、気を取り直して。
さあ、エクストラオプションですよ！
キャッシュ、使いましょう、スピードを速くしてくれるんでしょ。Git Credential Manager使いましょう、きっと認証が楽になるんでしょ。シンボリックリンク、うん、使わなくてもいいね、Windowsだし。で、「Install」をクリックします。おお、やっとインストールできます♪

• 

　そして、、、1分もしないうちに以下の画面が表示されました。

• 

　Finish!フィニーッシュッッッ！

• 

　あ、リリースノートがブラウザに表示されました。確かに「View Release Notes」にチェック入れたままでしたね。なるほど、インストール先のフォルダにReleaseNotes.htmlファイルがあるのですね。あとでじっくり読むことにしましょう。
　そして、システム必要要件がクリアできたので、やっと次ですね。

• 

　上のボタンをクリックすると、「flutter_windows_v1.5.4-hotfix.2-stable.zip」ファイルがダウンロードされます。念のため、ウィルスチェックしておきましょう。そして、これを自分の好きなフォルダに解凍します。ぼくは、「C:\Flutter」にしようかな。Program Filesは高い権限が必要になるのでインストールしないでと書いてあるので気を付けましょう。そして、flutter_consle.batをダブルクリックして終了、ということですね。

• 

　これは、保護じゃなくて、実行しますよ。中身を確認したけど、パスを追加して管理者権限でコマンドプロンプトを出しているだけですから。「詳細情報」をクリックします。

• 

　ボタンが現れましたので、「実行」をクリックします。

　はい、実行されました。ちょっと長くなってきたので、続きは次回に。