プログラミング初心者が「Flutter」に挑戦!その1(環境構築編)

初心者がflutterに挑戦
Pocket

先日、調子に乗ってJavaScriptでアプリを作ってみたのですが、操作性の悪さや機能が不十分な点があり、納得がいきませんでした。言葉で表現し難いのですが、スマホ上でボタンの反応が悪いのと、悪いからと2度叩くと画面が拡大するのです。(当たり前っちゃ当たり前なんですがね)

アプリ作ってみた!JavaScriptプログラミング学習【第一弾】

アプリが出来た時の楽しさというか感動はありましたが、悔しい思いもあったので、今度はスマホ専用でもう少し機能も使い勝手も良いアプリを作ってみたい!と思いました。JavaScriptも勉強しつつ、並行してスマホアプリ開発なるものにも挑戦していきたいと思います。

スマホ用アプリ開発について色々と調べてみたところ、Swiftとかよりも最近は「Flutter」でスマホアプリを開発するのが良さそうです。言語は「Dart」と言うプログラミング言語になるようです。これが良いと思った理由は2つ!クロスプラットフォームに対応している点(iPhoneとAndroidを別々に作る必要なし!そしてももう一つはGoogleイチオシの言語だから!という単純な理由です。

ただし、一つ問題があります。それは情報が少なすぎる事です!職場の近くの本屋さんに行ってもFlutterやDartに関する書籍は一冊も置いてませんでした。Amazonで調べると数冊出ておりました。(買おうか迷い中)

先ずは海外のサイトで情報収集をするしかなさそうですね。こういうマニアックなのはやはり海外の方が情報は揃ってそうです。

どうやら「flutter」と「SDK」いう開発環境やらフレームワークを構築するところから始める事になるようです。要はデベロップメントキットとライブラリってとこでしょうか。本家の公式ページからDL&インストールをする事にしました。

   

恐らく、この言語を始める方はある程度、他のプログラミング言語で経験値のある方が多いかと思います。私のような初心者の方はいないのかもしれませんが、もしそんなレアな方がいらしたら参考になれば幸いです。

先ずはFlutterをダウンロードするところから全てが始まる!

本家のページからダウンロードをしましょう。私の場合はWindows版をダウンロードしました。やっぱiPhone信者なら、断然Macが良さそうですが、、、。Mac持っていないので仕方ありませんね。。。

本家DLページはコチラ↓

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

このページを参照しながら、圧縮データを解凍し、インストールを開始していきました。

   

途中、躓いた箇所があります。コマンドプロンプト(又はPowerShell)で導入状況をチェックする箇所があるのですが、ここで赤い文字でXと記載され、太字でエラーメッセージが出てきます。。。「Android toolchain locate Android SDK….」公式ページによるとどうやら何かが不足しているようです。

ここは後でSDK(AndroidStudio)ををインストールすると解消されたので、ここでのエラーは一旦は気にせず飛ばしていきましょう。(Android版しかやっていないのでiPhoneは分かりません)

という事で、ガイドに従い、ダウンロードやらインストールが終わり、エディタは最近JavaScriptで使い慣れてきたVScodeを選択し、AndroidoにFlutterとDartのプラグインも導入しました。英語ばかりなので苦戦しましたが何とか、環境構築が出来たっぽい。↓

よっしゃー!まだ、全然分かりませんが、右側のブルーの見出しがついた画面は恐らく仮想ブラウザのようなものっぽいです。一応、後で色々調べたら、Pixel2や3のエミュレータも出せました。

一方、純正のAndroidStudioの画面はこんな感じでした。↓こちらはソースの文字色が地味な感じでした。カスタマイズは出来るようですが、、、。ダークモードにはしたものの文字色はそのまま。カスタマイズは可能そうです。

どちらのツールを使うのが良いか?分かりません。両方少し使ってみて良さそうな方に絞りたいと思いますです。

   

と、ここまで順調かと思いきや、またもや問題が発覚!エミュレータを起動した後に▲ボタン(又はWinの場合F5キー)を押してサンプルプログラムを実行してもエミュレータに反映されませんでした!

というか、ボタンを押した瞬間にerrorメッセージが出るのです。キャプチャを取り忘れてしまいましたが「Unable to locate adb」というエラーです。また、コンソールにも赤文字でエラーっぽいのが出ていたので、何かが不足しているのか?又はインストールが失敗したか?ファイルの破損等が疑われます。

あちこちのサイトで原因や対処法を調べた結果、やっと分かりました!どうやら、「Android SDK Platform-Tools」というフォルダ内のデータに原因が潜んでいるようです。

AndroidStudioメイン画面のToolsメニュー内のSDK Managerを起動し、System Setting内のAndroid SDKを選択します。結構深いぞ!更にこの中のメイン画面のタブをSDK Toolsに切り替えてAndroid SDK Platform-Toolsをアンインストールしました。(チェックを外してApply)その後、Not installedになったのを確認した後に、再度Installします。これで再インストール完了!そして、サービス自体を再起動し、もう一度Pixel2(エミュ)を立ち上げてから▲ボタン実行!オラ、出てこいやー!と気合を入れる。これでやっと復旧しました。汗

これはデフォルトのサンプルコードで表示される仮想Pixel2でアプリを起動した状態の画面です。プラスボタン(フローティングボタン?でしたっけ?)を押すと中央の数字が増えていきます。ついつい嬉しくて4連打しました。

その後、調子に乗ってエミュレータではなく実機とPCを同期させてやろうと、昔のAndroid端末を押し入れから引っ張り出し、USB接続しAndroid実機側の開発者モードで色々と試したのですが、こちらはうまくいきませんでした。Androidのバージョンが4.04だったので古過ぎたのが原因?と思いきや、調べると一応バージョン的にはいけそうなんですけどね。。。言語の方が対応していないかもしれません。まあ、エミュがあるので良しとしましょう!

真っ新なところから始めて2日かかりました。仕事もしている身なので2日合わせてざっと3~4時間程度はかかっていたかと思います。情報量の少なさもありますが、ビギナーズアンラックw?初心者による落とし穴だったのか?分かりませんが、スタートラインに立つまでにかなり苦戦しました。これから先が思いやられます。w

さあ、波乱含みの幕開けとなりましたが、ここからが本当のスタートです!果たしてこんな初心者がいきなり始めて、JavaScript版よりも良いアプリが作れるのでしょうか?

   

追記)

言語はサンプルコードでちらっと見ましたが、Javaっぽい構文に見えました。難しそうです。25年前にPublic voidってJavaで何回も書かされたのを思い出しました。何となくなんですが、波カッコがオブジェクト単位になっていて、その中にプロパティやメソッドがコロンで表現されているように見えます。これは割とフツーでしょうか?

但し、オブジェクトとは言っても上位層に見た目のオブジェクトが配置されており、その中に機能が書かれているように見えました。(間違っていたらゴメンナサイ)HTMLやCSSのような見た目の要素というか大枠の構造体が先ず最初に書かれて、その中に、色々な機能を持ったメソッドやクラス系のオブジェクトを詰め込んでいく。そんな作りなんじゃないかなーと、、、全体像を勝手に解釈してみました。(違ったらゴメンナサイ)

要はDart一つで全てを表現しているという事ですね。JavaやJavaScriptの場合はHTMLとCSSとJS(又はClassファイル)それぞれファイルごとに役割が分担されていました。個人的にはHTMLの見た目の要素と実際の中の変数の値が混乱したり、表示上の見た目のテキストが変数(値)に追いついて来てなかったり、違ったりで混乱に陥りやすかったので、もしかしたらFlutterの方がシンプルで楽なのかなーと楽観視してみました。

ただし、初心者がいきなりコードを書くと、書くことが多すぎるのと()が多すぎてパニックに陥り、すぐにスパゲティ構造になりそうな気もします。閉じ()に対してのコメントとかも大事かもしれませんね。ヘッダーとかボディとかでファイルを分けて書けるかもしれないので、JSとは少し違った考え方でソースを管理しないとダメでしょうね。

次回はDartの記述ルールとかお作法に入っていこうかと思います。

   

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

はじめまして。アカサティナです。今はサラリーマンです。定年まで続けたいとは思っていません。色々第二の人生を考えてます。最近ブログを始めました。70年代生まれ、昭和の人です。ブログはWordPress、テーマは「ストーク」を使ってます。