はじめに

Googleは「Google I/O 2019」で、Dart製のアプリケーションフレームワーク「Flutter」の新機能として、Webアプリケーションを生成する「Flutter for Web」のテクニカルプレビューリリースを発表しました。

そもそも、Flutterとはなにかは、以下を見てみてください。

早速ですが、どのような機能があるのか、利用するにはどうすればよいか確認していきたいと思います。

環境

  • macOS Mojave 10.14.4

セットアップ

上記ページの手順に沿って進める。

1.以下をダウンロードする

https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip

2.上記のファイルを自分の置きたいディレクトリに置き、解凍する

mkdir ~/development
cd ~/development
unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

3.flutterへのパスを通す

# bashを利用している場合
.bash_profileに以下を追加する
export PATH="$PATH:~/development/flutter/bin"
source ~/.bash_profile

4. flutterコマンドが使えることを確認する

flutter

5. flutter doctorコマンドで診断をおこなう(今回は、Webの確認なので以下は無視)

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E226, locale ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the
        Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[!] Android Studio (not installed)
[!] VS Code (version 1.31.1)
    ✗ Flutter extension not installed; install from
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

6.Flutter for Webのソースをcloneする(Flutterをインストールしたディレクトリとは別で実施)

cd ~/development
git clone https://github.com/flutter/flutter_web.git
cd flutter_web

7.Flutter for Webをbuildする為のツールをインストールする

flutter packages pub global activate webdev

以下のエラー発生

flutter packages pub global activate webdev
Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.

以下に移動して実行

cd development/flutter_web/tool
flutter packages pub global activate webdev
Resolving dependencies...
+ args 1.5.1
+ async 2.2.0
+ browser_launcher 0.1.2
:
:
:
Installed executable webdev.
Warning: Pub installs executables into $HOME/development/flutter/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):

  export PATH="$PATH":"$HOME/development/flutter/.pub-cache/bin"

Activated webdev 2.0.5.

8.bash_profileに、7のpathを追加する

vim ~/.bash_profile

export PATH="$PATH":"$HOME/development/flutter/.pub-cache/bin"

source ~/.bash_profile

Hello Worldを動かしてみる

cd development/flutter_web/examples/hello_world

flutter packages upgrade

! flutter_web 0.0.0 from path ../../packages/flutter_web
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui
Running "flutter packages upgrade" in hello_world...               25.6s

Webサーバを立ち上げる

webdev serve

development/flutter/.pub-cache/bin/webdev: line 7: dart: command not found

dartがないとエラーが出ているので、dartをインストールします。

brew tap dart-lang/dart

brew install dart

再度、Webサーバを起動

webdev serve
webdev could not run for this project.
The pubspec.yaml file has changed since the pubspec.lock file was generated, please run "pub get" again.

エラーとなったので、pub getを実行

pub get

再度、Webサーバを起動

webdev serve
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 17.0s
[INFO] Caching finalized dependency graph completed, took 162ms
[INFO] Succeeded after 17.2s with 548 outputs (3169 actions)

うまく立ち上がったので、以下のアドレスにアクセスしてみる

http://localhost:8080/

 

ソースを確認すると、jsをはいているだけでした。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>

とりあえず今日はここまで。

この記事をシェアする