わんぱく Flutter! 第二回 Widget を試してみよう!

f:id:Akihiro_Kashiwagi:20210213124545j:plain

 

 さて、第一回では、通例のインストールを行いました。最後に動作確認をしましたが、そのアプリケーションをちょこちょこ変更しながら、Flutter に用意されている Widget を試してみましょう。

 

 

1. サンプルプログラムの概観

 動作確認用に作成した flutter_app を開きましょう。第一回から続けて読んでいる方は、開いている状態でしょう。

 

f:id:Akihiro_Kashiwagi:20210213140023j:plain

 

 

恐らく、目の前には main.dart ファイルのプログラムが見えているはずです。見えていない方は、ウィンドウ左側のツリーメニューから、"Project" - "flutter_app" - "lib" - "main.dart" と開いていくと、見つかるはずです。これが、今、作成した動作確認用のサンプルプログラムです。

 

f:id:Akihiro_Kashiwagi:20210221183610j:plain

figure 01

 

一番上に、"void main()" と書いてあります。 dart 言語も、C言語と同じように "main()" 関数から開始されます。そして、その中には、"runApp(MyApp());" と書かれてあります。これは、直ぐ下にある "class MyApp" を呼び出しています。

 

そして、その少し下の方を見てみると、"home: MyHomePage(title: 'Flluter Demo Home Page")" と書かれていますから、この "class MyApp" は、その更に下に書かれてある "MyHomePage" を呼び出していることが解ると思います。

 

また少しスクロールして、"class MyHomePage" を見てみると、"_MyHomePageState" と頭に "_" の付いた似た名前の class を使用しています。そして直ぐ下にはその class が書かれてあります。

 

f:id:Akihiro_Kashiwagi:20210221185335j:plain

figure 02

 

つまり、このサンプルプログラムの処理は、この "class _MyHomePageState" 内で行われていることが分かります。

 

この "=>" は、ファットアロー(fat allow)関数、或いは単に アロー(allow)関数と呼ばれるもので、JavaScript における function() を省略するために考案された表記法(シンタックスシュガー)です。 ここでは詳しくは説明しませんので、興味のある方は調べてみて下さい。

 

そしてまた、class の前に付いている "_" ですが、こちらは、オブジェクト指向言語における private 修飾子に相当します。

 

 

2. アプリケーションを変更して動作を確認してみよう

 

 呼び出しフローを、順番に追ってきましたが、この class の中では、画面のレイアウトと、テキストボックスやボタンのような Widget について書かれています。

 

f:id:Akihiro_Kashiwagi:20210221190121j:plain

figure 03

 

英語のコメントで、簡単な説明が書かれてありますが、この "Widget build()" とは、説明すると、テキストボックスやボタンなど(Widget)を構築(build)すると言う意味です。そして、直ぐ下には、"Scaffold()" メソッドが書かれてあります。これは訳すと、「足場」と言う意味です。Widget を構築する足場という意味になります。この中には、アプリケーションの上に表示されるアプリケーションバー "appBar" や、アプリケーションの胴体である "body" などがあります。

 

試しに、アプリケーションのタイトルを変更してみましょう。この "appBar" の中にある "widget.title" がアプリケーションのタイトルです。これは、プログラムの上の方で書かれてある "class MyApp" の "home: MyHomePage(title: 'Flluter Demo Home Page")" で指定しています。スクロールして、ここを変更してみましょう。

 

f:id:Akihiro_Kashiwagi:20210221192057j:plain

figure 04

 

変更箇所は見つかったでしょうか。変更したら、android studio のメニューバーにある実行ボタン "➤" を押してみましょう。androidエミュレータを起動していない方は、"tool" - "AVD Manager" から、AVD を起動しておきます。

 

f:id:Akihiro_Kashiwagi:20210221192740j:plain

figure 05

 

どうでしょうか。タイトルは上手く変更されたでしょうか。

 

タイトルについて指定していたのは、"appBar" の中でした。その少し下には、"body: Center()" と書かれてあると思います。これは、読んで字のごとく、中心(Center)を指定しているのですが、Smart Phone のアプリケーションは、よくご存知の通り、画面の大きさも様々ですし、縦・横と回転もしますから、画面レイアウトを絶対位置で指定するのは、具合がよくありません。そこで、このように相対的な指定をしておくと、画面の大きさや向きに依存しない位置指定ができます。つまり、アプリケーションの胴体は、画面の中心に表示すると言う意味です。上の画像を見ると分かる通り、確かに画面の中心に "0" と表示されていると思います。

 

その下には、何と書かれてあるでしょうか。"child: Column()" と書かれてあります。 Flutter の Widget は、入れ子のように作っていきます。丁度、ロシア人形のマトリョーシカのような構造です。

 


マトリョーシカ人形

 

ですから、ここでは、"Center()" の中に "child: Column()" と、"Column()" を "Center()" に入れ子のように配置します。 "Column()" とは、つまり、「縦」ですから、Widget を中心から、縦に並べて配置するという意味になります。実際、"You have pushed..." と数字 "0" は、中心から縦に配置されているのではないでしょうか。では、この "Column()" を、"Row()" に変更してみましょう。"Row" とは訳すと、「行」です。変更が終わったら、実行します。

 

f:id:Akihiro_Kashiwagi:20210221200028j:plain

figure 06

 

どうでしょうか。横に並んで表示されたでしょうか。画面を回転させたりして、確認してみましょう。

 

では、一旦、"Row()" から、"Column()" に直しておきます。次は、Widget を追加してみます。 "Column()" の中を見ていくと、"Text()" と書かれた箇所が2つあります。読みにくいですが、それぞれ複数行に渡って、括弧で囲われて記述されています。そう、これは、今、表示されているテキストメッセージと、数字です。

 

f:id:Akihiro_Kashiwagi:20210221200638j:plain

figure 07

 

そして、2つの "Text()" は、"children: <Widget>[ ]" の中に入れ子になっています。先程は、"child: " と指定して、Widget入れ子にしましたが、今度は、"children: " となっています。これは、英語で child の複数形ですから、幾つかの Widget をまとめて追加する場合に使用します。

 

この figure 07 の 106 行目のところに、コメントで "// Text" と書かれた行があります。この下に "TextField()" を追加してみましょう。 "TextField()" は、入力可能なテキストボックスです。

 

f:id:Akihiro_Kashiwagi:20210221201431j:plain

figure 08

追加できたら、実行してみます。

 

f:id:Akihiro_Kashiwagi:20210221201724j:plain

figure 09

文字を入力して確認してみて下さい。

 

それでは、もう一つだけ、"ElevatedButton()" を追加しましょう。先程の "TextField()" の下の行に、figure 10 のように "ElevatedButton()" 追加して下さい。"TextField()" の後ろに "," を追加するのを忘れずに。

 

f:id:Akihiro_Kashiwagi:20210221202428j:plain

figure 10

 

これは、ボタンを作成していますが、ボタンの文字列 "ADD" を入れ子に指定しています。つまり、"ElevatedButton()" の中に "child: " と指定して "Text()" を追加しています。"Text()" は、上でも使用しているのと同じテキストボックスです。また、"onPressed:" は、訳すと「押された時」という意味ですが、ボタンが押された時に行う処理を指定します。ここでは、”_incrementCounter" を指定していますが、これは、少し上の方、"class MyHomePageState" の初めに指定しているメソッドです。ボタンを押すと、数字に加算していきます。

 

プログラムの変更が終わったら、実行してみましょう。

 

f:id:Akihiro_Kashiwagi:20210221203246j:plain

figure 11

ボタンは表示されたでしょうか。これは、下の方にある "" ボタンと同じように、押すと数値を加算していきます。

 

Flutter には、たくさんの Widget が用意されています。 Flutter のドキュメントなどを参照しながら、色々試してみましょう。

 

flutter.dev

 

以上

 

わんぱく Flutter! 第一回 Flutter をインストールするよっ!

f:id:Akihiro_Kashiwagi:20210213124545j:plain

わんぱく Flutter! 第一回 Flutter をインストールするよっ!



  最近話題の Flutter、もう使ってますか? 私もこの程、利用を開始致しました。丁度よいので、開発履歴をここにまとめて行こうと思います。第1回は ー そう、インストールからです。 Flutter は、Android アプリケーションでも iOS アプリケーションでも Web アプリケーションでも開発することができますが、今回は Android 用アプリケーションを開発して行きます。

 

1. 準備

 Android 用の開発環境として、Android Studio をインストールしておきます。 Android Studio のインストール方法は、わかり易い解説が多数、執筆されておりますので、それらのウェブサイトを参照してインストールしておいてください。

 

 

2. Flutter の取得(Download)

 Flutter の SDK は、以下のウェブサイトから所望の OS 用のバイナリを取得(Download)します。

flutter.dev

どの OS でも、大した差はありませんが、ここでは Windows 版を download したものとして話を進めます。

 

download が終わったら、解凍します。解凍先ディレクトリは特に規定はありませんが、自分の User ディレクトリや、"C:\Program Files"、"C:\" 等に解凍するといいでしょう。ここでは、 "C:\Program Files" に解凍したものとします。

 

f:id:Akihiro_Kashiwagi:20210213130616j:plain

figure 01

Flutter SDK の解凍が終わったら、環境変数の設定をします。Windows環境変数の設定方法は、説明の必要はないと思いますが、"設定" - "システム" - "詳細情報" - "詳細設定" - "システムのプロパティ" - "詳細設定" - "環境変数" 等から "Path" の値に Flutter SDK を解凍したディレクトリの "bin" を追加します。ここでは、 "C:\Progaram Files\flutter\bin" になります。

 

f:id:Akihiro_Kashiwagi:20210213131840j:plain

figure 02

Flutter の document では、この後、flutter doctor コマンドを動かすことになっています。 flutter doctor の実行には、git が必要となるので、適当な時点で git もインストールしておきます。



 

3. Flutter Plugin のインストール

 Flutter SDK のインストールが終わったら、Android Studio に Flutter Plugin を追加します。Android Studio で開発を行っている人は、Android Studio を起動すると、前回終了したプロジェクトから起動してきてしまいますが、一旦、プロジェクトを "File" - "Close Project" 等から閉じて、タイトル画面を表示させます。

 

f:id:Akihiro_Kashiwagi:20210213133404j:plain

figure 03

すると、下の方に "Configure" というコンボボックスが見えると思います。ここを開いて、 "Plugins" を選択します。

 

f:id:Akihiro_Kashiwagi:20210213134352j:plain

figure 04

 Plugin 関連の設定画面が開きますので、上の方にある "Marketplace" から "Flutter" を探してインストールボタンを押します。

 

f:id:Akihiro_Kashiwagi:20210213133903j:plain

figure 05

これで、準備完了です。

 

 

 

4. 動作確認

 タイトル画面には、"Create New Flutter Project" が現れていると思いますので、これを選択し、"Flutter Application" を作成します。

 

f:id:Akihiro_Kashiwagi:20210213134817j:plain

figure 06

"Next" を押すと、プロジェクト名などを指定する画面が現れるので、適当に名前を付けます。そして、2つ目のテキストボックスに、"Flutter SDK path" があると思います。ここに、Flutter SDK をインストールしたディレクトリを指定します。

 

f:id:Akihiro_Kashiwagi:20210213135332j:plain

figure 07

既に Android Studio の動作確認はされていると思いますので、AVD(Android Virtual Device) の作成は終わっているはずですから、 "Tool" - "AVD Manager" から、AVD を起動します。なければ、作成し、或いは、実際の Android 端末を USB に接続します。

 

f:id:Akihiro_Kashiwagi:20210213140023j:plain

figure 08

"Running Gradle task 'assembleDebug'..." というメッセージで、しばらく待たされるかも知れませんか、無事、実行できたでしょうか。

 

今回は、Flutter のウェブサイトに書かれてある flutter doctor コマンドの実行は省略しましたが、どこかのタイミングで、実行しておきましょう。

 

以上

 

Microsoft Azure Windows Server 2016 Datacenter 無料試用版で、外部参照可能な PHP Laravel Server を起動するっ!

1.概要

 

 最近、AWS や今回記事に取り上げる Microsoft Azure に、Windows が含まれていることに気づいている人は、どれくらいいるのでしょうか。どちらも無料利用枠が設定されており、該当する Instance であれば、12ヶ月無料で利用することができます。一年間、無料で利用できるというのは、意外に実用に耐え得る期間だと思われないでしょうか。今回は、Microsoft Azure の Windows Server 2016 Datacenter を無料試用版の Standard B1s(CPU:1 Memory:1GB)を使用して立ち上げて、local(127.0.01) からだけでなく、外部参照が可能な状態で PHP Laravel Server を起動する方法を説明します。

 

つまり、Windows Server 2016 Datacenter の Laravel の動かせる Web Server が 12ヶ月無料で利用できるっ!

 

complete_image

complete_image

これが、起動完了イメージです。手元の Ubuntu 19.04 から RDP で Microsoft Azure Windows Server 2016 Datacenter に接続、xampp から ApacheMySQL を起動して、手元の chrome から Server 上の Apache に接続しているところです。

 

 

2.仮想マシン Windows Server 2016 Datacenter の作成

 

 初めに、Microsoft Azure にアカウントを作成します。これは、説明は不要でしょう。各種情報を設定して、アカウントを作成します。

 

 Microsoft Azure : https://azure.microsoft.com/ja-jp/

 

Microsoft Azure Login

 

Login したら、右上の「ポータル」ページに移動し、上の方に並んでいる「Azure サービス」アイコンから、「Virtual Machines」に移動します。移動したら、左上にある「+追加」ボタンを押して、新しい Windows Server 2016 Datacenter を作成します。2019年11月11日現在、このページには上の方に「クラシックVMをお探しですか?Azure MarketplaceからVMを作成する」と言うリンクがあります。ここをクリックして、既存のVMを選ぶと間違いがありません。クリックすると、VM一覧と検索用テキストボックスがありますので、「Free account virtual machine」を探すか、検索して「作成」ボタンから作成します。

 

ここでひとつ注意しなければならないのは、12ヶ月無料で利用できるサイズは、「Standard B1s」だけとなる点です。上記のVMを選択した場合は、このサイズが規定値となっています。そして、「リソースグループ」、「イメージ」、「仮想マシン名」、「ユーザー名」、「パスワード」、「受信ポート選択」等、空白部分を入力し、「確認および作成」ボタンで次へ移ります。「リソースグループ」には、「A1」など何でも構いません。「イメージ」には言うまでもなく「Windows Server 2016 Datacenter」、「受信ポート選択」では、予め選択されている「RDP」の他、「HTTP(80)」、「HTTPS(443)」、「SSH(22)」もチェックを入れておきます。問題がなければ、「検証に成功しました」と表示されるので、「作成」ボタンから作成します。

 

作成中は、「デプロイが進行中です」と表示さているので、しばらく待つと、「デプロイが完了しました」と表示され自動的に起動するので、「リソースに移動」ボタンで移動します。

 

Detail of Virtual Machine

Detail of Virtual Machine

既にVMは起動しているので、RDP で接続するために、右の方に、「コンピュータ名」、「オペレーティングシステム」などとVMの情報が表示されています。その中の「パブリックIPアドレス」の値をコピーします。

 

Connect to VM

Connect to VM

私は今、Ubuntu 19.04 を使用して作業をしている為、RDP 接続に「Remmina」を使用していますが、ご自分の環境で利用できる RDP ソフトウェアを利用します。Windows の場合は「リモートデスクトップ接続」と言うソフトウェアが使えます。先程コピーした「パブリックIPアドレス」と、VM作成時に設定したユーザー名、パスワードを指定して接続します。

 

Connecting

Connecting

どうでしょうか。無事、接続できたでしょうか。

 

 

3.環境設定

 

 接続できたら、環境設定を行います。インストールした状態では、IE しか Browser がありませんが、必要なソフトウェアをインストールするのに「IE Enhanced Security Configuration」が有効になっている為、各種ソフトウェアが download できません。起動した状態では、「Server Manager」が起動しているはずですから、「Server Manager」の左側のメニューから「Local Server」を選択し、右側に表示される「IE Enhanced Security Configuration」から、「Administrator」と「Users」を off にします。

 

IE Enhanced Security Configuration

IE Enhanced Security Configuration

これで、IE を利用して各種ソフトウェアの download が可能になりますので、適ほど Firefoxchrome、圧縮解凍ソフトなど必要なソフトウェアをインストールします。

 

また、Windows メニューから設定を開いて、「Time & language」から、「Date & time」と「Region & language」を設定しておきます。

 

Time & Language Setting

Time & Language Setting

 

 

4.xampp のインストール

 

 そして、PHPMySQL をインストールする為に、xampp をインストールします。これはご存知の通り、Web Server に必要な各種ソフトウェアをパッケージにしたものです。下記のリンクから Windows 用のインストーラーを download してインストールします。

 

www.apachefriends.org

 

xampp のインストールが終わったら、xampp のコントロールパネルの ApacheMySQL の右側にあるチェックボックスを確認します。チェックがなければ、それぞれチェックを入れることで、インストールを行うことができます。

 

インストールが終わったら、php.ini の最低限の設定をしておきます。xampp のコントロールパネルにある Apache の「config」ボタンをクリックして php.ini を開きます。最後の方に 「date.timezone」を設定する行があるので、「date.timezone=Asia/Tokyo」に変更して保存します。

 

ApacheMySQL の「Start」ボタンを押して、起動します。正常に起動したら、接続を確認します。Browser から「http://127.0.01/dashboard/」を開きます。

 

Confirmed xampp

Confirmed xampp

どうでしょうか。正常に開くことができたでしょうか。

 

 

5.Laravel のインストール

 

 xampp のインストールが終わると、もう、Web Server として使えます。今回は、Laravel も使いますから、こちらの準備をします。xampp をインストールしてあるので、php は既に入っています。Windowsコマンドプロンプトを開いて、「Composer」 をインストールします。

 

C:\bin>echo @php "%~dp0composer.phar" %*>composer.bat

 

ご存知の通り「Composer」 の Windows 版には Installer が用意されているので、こちらを利用してインストールしても構いません。

 

getcomposer.org

「Composer」のインストールが終わったら、「Laravel」をインストールします。

 

composer global require "laravel/installer=~1.1" 

 

readouble.com

これで、Laravel のインストールも完了しました。新しい Laravel Project を作成して確認します。コマンドプロンプトから「C:\xampp\htdocs」に移動して laravel 用のディレクトリを作成します。ここでは「laravel」とします。そして、このディレクトリに移動し、「larave new blog」を実行することで「blog」project を作成することができます。

 

cd c:\xampp\htdocs

md laravel

cd laravel

laravel new blog

 

作成したら、Laravel に接続してみます。Browser から「http://127.0.0.1/laravel/blog/public/」を開いて確認します。

 

Connect to local laravel

Connect to local laravel

問題なく動作したでしょうか。

 

 

6.外部参照の設定

 

 VMを作成した際に、「受信ポート選択」から「HTTP(80)」を選択してあるので、Microsoft Azure の Virtual Machines の右側にある設定メニュー「ネットワーク」を開くことで、「受信ポートの規制」に「HTTP」が入っていることを確認できます。もし、設定していなければ、ここで設定します。

 

Network Configration

Network Configration

そして、Windows Server 側も同様に HTTP(80) Port を許可する設定を行います。Server Manager を開いて右側のメニューから「Local Server」を選択します。次に「Windows Firewall」を選択するとコントロールパネルが開くので、右側のメニューにある「Advanced settings」を選びます。すると「Windows Firewall with Advanced Security」のウィンドウが開くので、右側のメニューにある「Inbound Rules」を選択し、右側の「Action」メニューにある「New Rule...」をクリックします。

 

New Inbound Rule Wizard

New Inbound Rule Wizard

「New Inbound Rule Wizard」ウィンドウが開くので「Port」を選択し「Next」を押します。

 

Protocol and Ports

Protocol and Ports

「Protocol and Ports」に変わるので「Specific local Ports:」に「80」を入力して「Next」を押します。

 

Allow the connection

Allow the connection

「Action」の選択へ変わるので「Allow the connection」が選択されていることを確認して「Next」を押します。

 

Profile

Profile

「Profile」の選択へ変わるので、すべて選択されていることを確認して「Next」を押します。

Name

Name

最後に「Name」の設定に変わり、入力を求められます。今回は、HTTP(80) の Port を許可する設定なので、名前と説明を適ほど入力し、「Finish」を押して完了です。

Confirm

Confirm

Windows Firewall with Advanced Security」に、先程設定した HTTP(80) の設定が追加されていれば、問題ありません。

 

7.確認

 

 外部接続の設定を行ったので、手元の環境から接続を確認します。RDP 接続で確認した Windows Server の「パブリックIPアドレス」を使って、「http://xxx.xxx.xxx.xxx/laravel/blog/public」を Browser から開きます。

 

Connect to server from public address

Connect to server from public address

上手く接続できたでしょうか。
これで、localhost(127.0.0.1)からだけでなく、外部参照(外部アクセス)可能な、Windows Server 2016 Datacenter による PHP Laravel Server が起動しました。

 

8.補足

 

 Microsoft Azure Windows Server 2016 Datacenter で Laravel Server をほぼ一年間利用して気づいたことを補足しておきます。システム自体には問題なく、不具合も発生しませんでした。気をつけなければならないのは、知らない内に課金が発生していることが多いということです。今回紹介している無料試用版で利用できるリソースは、例えばストレージであれば、P6 SSD × 2 です。VMを作成する際に試行的に利用したリソースも確実に削除しておく必要があります。この際、「Virtual Machine」のメニューで表示されるものだけでなく、「すべてのリソース」のメニューで確認する必要があることです。

知らずに課金が発生してしまったリソースについては、その旨、サポートへ伝えることでキャンセルが可能です。しばらく運用して、意図しない課金に気づいたら、問合せてみることができます。

 

以上