メモ用のブログ

技術系のメモとかを書いておきます

What’s New in Flutter 2を読んだメモ

Flutter2のキャッチアップするために What’s New in Flutter 2 を読んだので、そのメモです〜

medium.com

Web

  • webのサポートが安定版になったよ
    • HTMLレンダラーに加えて、CanvasKitベースのレンダラーも追加したよ
    • これでコードの再利用性も高まる

Sound Null Safety

  • Dart 2.12に追加された機能で、Flutter2でも完全対応された
  • nullable型とnon-nullable型を区別することで型システムを強化してる
  • null safeのパッケージ開発者はマイグレーションガイドを見て移行してね

Dartのドキュメントでもあった Dart is a sound language. の sound の意味がよくわからなかったけど、堅牢とか健全とかいうニュアンスっぽい

refs: types - What is a sound programming language? - Stack Overflow

Desktop

  • 早期リリースフラグ(β版？)として安定版でも利用できるようになったよ
  • 今年後半に安定版リリースの予定
  • テキスト編集やマウス操作の検知、スクロールバーあたりが強化されたっぽい
  • コマンドライン引数の処理が可能になった
  • IMEも有効にできるようになった

Flutter Folio scrapbooking app

  • いろんな画面サイズや入力方法に対応するにはどうしたらいいか、という疑問に答えるために、Flutter Folioスクラップブックアプリを作成したよ
  • 単一コードベースで複数のプラットフォームでいい感じに動作させる簡単な例になってる
  • このようなアプリをプラットフォーム適応型と呼んでる
  • 複数プラットフォーム対応するときに困ったらソースコードが参考になるかも

refs:

github.com

Google Mobile Ads to Beta

新しいiOSの機能

  • iOSまわりも色々新機能を追加したよ
  • xcodeを起動せずに、コマンドラインからIPAをビルドできるようになったよ
  • 他iOSウィジェットがいくつか追加されたよ
  • シェーダーやアニメーションまわりのパフォーマンス改善も引き続きやっているよ

新しいウィジェット: Autocomplete と ScaffoldMessenger

Add-to-Appによる複数のFlutterインスタンス

  • 既存のアプリにFlutterを追加する際の Add-to-App機能で、Flutterインスタンスを追加したときのメモリコストを大幅削減(99%ダウン)

Flutter Fix

Flutter DevTools

  • DevToolsの名前をFlutter DevToolsにしたよ
  • IDEでも例外が発生したときに、DevToolsのオプション指定の提案などをしてくれるようになった
  • 今はlayout overflowの例外にのみ対応しているけど、ゆくゆくは他の一般的な例外も同様にできるようにする予定
  • DevToolsを起動すると、タブ上にエラーバッジを表示して特定の問題を追跡しやすくしたりしている
  • もう一つの新機能は、表示されているよりも高い解像度の画像を簡単に見ることができる機能で、アプリのサイズやメモリの過剰使用を追跡するのに役立つ
    • この機能を有効にするには、Flutterインスペクタの「Invert Oversized Images」を有効する
    • 表示サイズより解像度が大幅に大きい画像が上下逆さに表示されるようになる
  • その他レイアウトまわりのデバッグが可能になったり、いろいろな機能を追加している

Android Studio/IntelliJ Extension

  • IntelliJ系のIDEのためのプラグインに色々新機能を追加したよ
  • プロジェクト作成ウィザードも新しくなった様子
  • M51
    • Flutter設定の変更
    • 新規プロジェクト作成のときはAndroidXが必須に
    • その他バグfixなど
  • M52
    • Android Studio 4.2以降、新しいプロジェクト作成ウィザードになった
  • M53
    • プロジェクト作成ウィザードでプラットフォーム選択できるようになった
    • Render overflowエラーが出たとき、通知をクリックすると原因のウィジェットがDevToolsに表示されるようになった
    • 今までコードの横に色のプレビューが強制表示されていたけど、カラーアイコンをクリックすると、デフォルトのカラーピッカーが立ち上がるようになった
    • ANSIカラーエスケープシーケンスを使ってIDEのコンソールの出力をカラー化することができるようになった
    • Flutter SnapのパスがLinuxの既知のSDKパスのリストに追加されたので、LinuxユーザはFlutterの設定が簡単になった
    • DevToolsのインストール時に問題が起きたとき、再インストールできるようになった
  • M54
    • DevToolsのサーバー起動を効率化
    • flutter attachの引数用のフィールドを追加
    • canary buildのベースが安定版に切り替わったので、なんか色々対応が必要らしい(よくわからなかった)

Visual Studio Code Extension

  • VSCode用の拡張機能も色々追加している(テストまわりとか)
  • DartのLSPサポートが投入されたので、色々便利になったっぽい
    • Dartだけじゃなく、pubspec.yamlやanalysis_options.yamlファイルの補完もサポートされている

DartPad updated to support Flutter 2

  • DartPadもFlutter2サポートされるようになった

Ecosystem updates

  • プラグインまわりも色々アップデートされているので、以前試してうまく行かなかった人はまた試してほしい
  • アプリクラッシュのレポートがほしいときは、sentryがFlutterアプリ用のSDKを公開したので検討するといいかも
  • プラグインたくさんあって検討が大変になってきたので、いろいろな指標や品質が高いパッケージに"Flutter Favorite"マークをつけたよ
  • pub.greenサイトで最近のバージョンで動くかもチェックできるようになったよ

目玉としてはWebが安定版になったのと、Desktopがベータ版になったあたりかなぁという印象。あとはDartがNULL安全になったので、Flutter2でもそれに完全対応したよというあたりも大きな変更っぽい。

あとは、前々からオートコンプリート機能実装のときに結構パッケージを探したりして手間がかかっていたので、 AutocompleteCore の追加は気になるところだなー。

パッケージ探しもなかなか大変だったので、 "Flutter Favorite"マークは参考になりそうで助かる。

ひとまず自作アプリのFlutter2対応を早く進めなくては💨

UdacityのBuild Native Mobile Apps with Flutterコースを受けてみる その2

結構日数が経ってしまいましたがその2です。 前回に引き続き、UdacityのFlutterコースの受講メモを書いていきます。 今回はFlutterの内部の動きやウィジェットの紹介の話(7〜11回)でした。

Udacityのコース www.udacity.com

7.Flutter's Reactive Framework

8.Flutter's Development Tools

  • ウィジェットの説明に入る前にFlutterの3つの開発ツールの紹介
  • ホットリロード
    • JITコンパイラが使われている時有効になる
    • 実機でもエミュレータでも使える
    • アプリを再起動したいときはAndroidStudioの緑色の三角ボタンを押す
  • ウィジェットインスペクタ
    • ChromeのWeb Inspectorみたいなもの
    • デバイスのピクセル、ウィジェット、ウィジェットツリー、アプリでウィジェットが生成されたコード行を行き来できる
    • インスペクタモードを使用するときはアプリが実行されている必要がある
    • AndroidStudioの view > tool windows から開く(もしくはウィンドウ右端のタブ)
    • Xのついた丸いアイコンが inspect ボタン
    • 2つの長方形のアイコンはプラットフォーム切り替えボタン
    • inspect ボタンを押してinspectモードにするとアプリの画面が青くなり、特定のウィジェットを検査できる
    • アプリ画面左下に出ている虫眼鏡アイコンをクリックすると、ウィジェットを選択できる
    • インスペクタを利用してウィジェットのパディング等の値を見ることができる
  • コードの自動整形
    • AndroidStudioの code>reformat code with dart format でdart形式でコードを自動整形できる

9. The Wonderful Things about Widgets

  • Widget
  • StatelessWidget
    • 不変
    • プロパティがfinalになっているので、一旦作成すると変更できない
  • StatefulWidget
    • ステートオブジェクトを持つ
    • 詳細は後で
  • Widgetがレイアウトでどのように使われるか
    • Widgetは一部のパラメータを解析してインスタンス化される
    • コンテナウィジェットはアプリの分割や既存のWidgetの修飾など色々な用途に使われるWidget
    • webでいうと、コンテナウィジェット=React Nativeのdivみたいなもの
    • コンテナウィジェットをカスタマイズするには、widthやheightなどのプロパティを入力していく
    • 殆どのWidgetは child または children プロパティを持っていて、Widgetを入れ子にするときに使う
    • child プロパティは paddingやマテリアルアプリなど、1つの子だけを持つwidgetに存在する
    • childrenプロパティは子にリストをとるような、column、ListViewウィジェットに存在する
    • 子を持たせなくてもよい(デフォルト動作)し、わざわざnullを入れたりする必要もない

10. Quiz: Explore Flutter Widgets

WIdgetの数がかなりたくさんあるので、しっかり覚えていかないとなーという感じでした。 Youtubeで公式が今週のウィジェットという動画を出しているので、こちらもチェックしていきたいです。

Flutter Widget of the Week - YouTube

次回は 11.Dissect Hello Rectangle から。

そろそろ手を動かすターンに入りそうなので楽しみです。

UdacityのBuild Native Mobile Apps with Flutterコースを受けてみる その1

Flutter Udacity

チュートリアルを一通り終えたので、おすすめされていたUdacityの Flutter コース(無料)を受けてみています。英語なので必死にメモを取りつつやっているので、ここに残しておこうと思います。

今回はイントロダクションから最初の演習まで。

チュートリアル flutter.dev

Udacityのコース www.udacity.com

1. Introduction

2.Why Flutter?

  • ユーザはスムーズなアニメーションや良いパフォーマンスを期待しているが、それだけでは成功するアプリとしては不十分
  • ユーザに愛されるアプリになるためには、品質やパフォーマンスを妥協せず、素早い新機能実装が求められる
  • Flutterは一つのコードで、各プラットフォームのバイナリを出力するので、開発効率とパフォーマンス両方を得られる

3.Why Dart?

4.Set Up Your Environment

5.Build a Flutter App

6. Quiz: Build the Hello Rectangle App(演習問題)

次は 7.Flutter's Reactive Framework から

MacでFlutterの環境構築(2020年7月)

Flutter 環境構築

9年ぶりの記事……😇

最近Flutterの勉強を始めたので、覚書き等投稿していきます。 まずは環境構築から。

公式サイトはこちら

flutter.dev

こちらの手順のままでも十分できるのですが、Xcodeまわり、AndroidのAVDマネージャまわりがちょっと変わっていました。

Flutter SDKの取得

macOS install - Flutter からダウンロード or バージョンを固定したくない場合は下記コマンドでリポジトリをgitからcloneします

$ git clone https://github.com/flutter/flutter.git

使っているshellの.rcファイルに↓を追記してflutterのパスを通します。

$ vi ~/.zshrc

# For Flutter
export PATH="$PATH:`SDKをダウンロード or git cloneしたディレクトリのパス`/flutter/bin"

Flutterは基本的に必要に応じて固有のバイナリファイルなどをダウンロードしますが、事前にすべてダウンロードしておきたいというような場合(インターネットに繋げない環境になるなど)は下記コマンドを実施しておきます。

$ flutter precache

Flutter doctorコマンド

Flutter doctorコマンドでは、必要なライブラリが不足していないかなどをチェックしてくれたりします。何かflutterコマンドでエラーが出たときは、とりあえずこのコマンドを実行するとよさそう。

まっさらの環境でここまで実施した時点でdoctorコマンドを実行すると、下記のようになるはずです。

$ flutter doctor
Downloading Dart SDK from Flutter engine dcc9a4048da890660f0880b4c2afed7c9470d335...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  255M  100  255M    0     0  3559k      0  0:01:13  0:01:13 --:--:-- 5705k
Building flutter tool...

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
  ║ statistics and basic crash reports. This data is used to help improve      ║
  ║ Flutter tools over time.                                                   ║
  ║                                                                            ║
  ║ Flutter tool analytics are not sent on the very first run. To disable      ║
  ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
  ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
  ║ event will be sent, and then no further information will be sent by the    ║
  ║ Flutter tool.                                                              ║
  ║                                                                            ║
  ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
  ║ Note: The Google Privacy Policy describes how data is handled in this      ║
  ║ service.                                                                   ║
  ║                                                                            ║
  ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
  ║ crash reports to Google.                                                   ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://flutter.dev/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Downloading Material fonts...                                       2.4s
Downloading Gradle Wrapper...                                       0.3s
Downloading package sky_engine...                                   0.7s
Downloading flutter_patched_sdk tools...                           23.3s
Downloading flutter_patched_sdk_product tools...                    4.5s
Downloading darwin-x64 tools...                                    21.1s
Downloading libimobiledevice...                                     1.1s
Downloading usbmuxd...                                              0.3s
Downloading libplist...                                             0.3s
Downloading openssl...                                              0.7s
Downloading ios-deploy...                                           0.6s
Downloading darwin-x64/font-subset tools...                         1.0s
Downloading android-arm-profile/darwin-x64 tools...                11.4s
Downloading android-arm-release/darwin-x64 tools...                 1.1s
Downloading android-arm64-profile/darwin-x64 tools...               0.9s
Downloading android-arm64-release/darwin-x64 tools...               1.6s
Downloading android-x64-profile/darwin-x64 tools...                 0.9s
Downloading android-x64-release/darwin-x64 tools...                 1.0s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.21.0-2.0.pre.114, on Mac OS X 10.15.5 19F101,
    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/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, set
      ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[✗] Xcode - develop for iOS and macOS
    ✗ 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
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (not installed)
[✓] VS Code (version 1.47.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

AndroidSDKまわり、AndroidStudio、Xcode、使えるデバイスが無いよ〜という結果になります そのあたりは次のセクションで入れていくので、いったんはこのままで次に進みます。

動作確認用のアプリを作る

次セクションでセットアップする環境の動作確認用にアプリを作っておきます

$ flutter create my_app

これでカウンターアプリが作成されます。

各プラットフォームの設定

MacではiOS/Android/Webの開発ができるので、最低各環境のうち1つのセットアップを完了させていきます。今回はiOSとAndroidのセットアップを説明していきます。

iOS

Xcodeのインストール

AppStoreからインストールします

Xcode

Xcode

apps.apple.com

インストールが終わったら、Xcodeを開くか、コマンドラインからライセンスの同意をおこないます。

f:id:todomasa:20200724173845p:plain

最新のコマンドラインツールを使うよう下記コマンドで設定します。

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

あとは、実機へのデプロイに使うためのgemをインストールしておきます。(今回実機へのデプロイ手順の説明は省いています。必要な方は macOS install - Flutter 参照してください)

$ sudo gem install cocoapods
$ pod setup

iOSシミュレータのセットアップ

下記コマンド(もしくはXcodeから)シミュレーターを開きます。

$ open -a Simulator

File>OpenDeviceから64bitデバイス(iPhone5s以上)を選択していることを確認します。公式サイトではHardware>Deviceとなっていますが、Xcode9からなくなっているメニューのため、Fileメニューから確認します。 f:id:todomasa:20200724174519p:plain

公式サイトでは、次にWindow > Scaleからサイズの調整の項目がありますが、こちらもXcode9からは、ドラッグして任意のサイズに変更できるようになったので、なくなっているメニューになります。

動作確認

シミュレーターを起動した状態で、動作確認用アプリのディレクトリに移動後下記コマンドを実行します

$ cd my_app
$ flutter run

Downloading ios tools...                                           12.0s
Downloading ios-profile tools...                                    7.3s
Downloading ios-release tools...                                   83.0s
Launching lib/main.dart on iPhone SE (2nd generation) in debug mode...

Running Xcode build...
 └─Compiling, linking and signing...                        59.1s
Xcode build done.                                           83.4s
Waiting for iPhone SE (2nd generation) to report its views...          4ms
Syncing files to device iPhone SE (2nd generation)...              182ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on iPhone SE (2nd generation) is available
at: http://127.0.0.1:50135/vCEgznKhEwY=/

シミュレーターを見るとカウンターアプリが表示されているはずです。 f:id:todomasa:20200724175052p:plain

Android

ここではAndroidStudioをインストールが必要になりますが、実際開発していく際は他のエディターを使うことも可能です。私はAndroidStudioを使っていますが、vim等も使えるようです。

AndroidStudioのインストール

Download Android Studio and SDK tools  |  Android Developers からAndroidStudioのダウンロード&インストールします。 初回起動時、AndroidStudioのセットアップウィザードが開くので、最新版のAndroidSDK,Android SDK Command-line Tools, and Android SDK Build-Toolsをインストールします(特に特別な事をしなくても勝手にインストールされるので、デフォルトのまま Next ボタンで進めて行けばよいです。

プラグインのインストール

Preferences > Plugins から、Flutter プラグインをインストールします(この時一緒に Dart のプラグインもインストールされます)

f:id:todomasa:20200724183539p:plain

Androidエミュレータのセットアップ

ハードウェアアクセラレーションの設定

AndroidStudioでAVD Managerを開きます。 AndroidStudioを開いた時に出るウィンドウの右下の Configure から AVD Manager を選択します。 f:id:todomasa:20200724175949p:plain (上記ウィンドウではなく、通常のコード編集ウィンドウが開いている場合は、 Tools > Android > AVD Manager から開きます)

AVD Managerが開いたら、 +Create Virtual Device... から新規作成を行います。 f:id:todomasa:20200724180236p:plain

Choose a device definition では、 Play Store が無いものを選ぶようにします。バグ？なのか、Play Store があるdeviceにすると、ハードウェアアクセラレーションが選択できなくなるためです…。(refs: https://stackoverflow.com/questions/53016119/why-cant-i-change-the-emulated-performance-graphics-setting-in-the-android-v )

f:id:todomasa:20200724180552p:plain

作成できたら、Verify Configuration の Emulated Performance で Hardware - GLES 2.0 を選択します。

f:id:todomasa:20200724181217p:plain

これでAVDの設定は完了です。

動作確認

まず下記コマンドでAndroidSDKのライセンスの同意を行います。

$ flutter doctor --android-licenses
Warning: File /Users/xxxx/.android/repositories.cfg could not be loaded.
6 of 7 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)? y

1/6: License android-googletv-license:
---------------------------------------
Terms and Conditions

This is the Google TV Add-on for the Android Software Development Kit License Agreement.
(...中略...)
All SDK package licenses accepted

エミュレータを起動した状態で、動作確認用アプリのディレクトリに移動後下記コマンドを実行します

$ cd my_app
$ flutter run
Using hardware rendering with device sdk gphone x86 arm. If you notice graphics
artifacts, consider enabling software rendering with
"--enable-software-rendering".
Launching lib/main.dart on sdk gphone x86 arm in debug mode...
Checking the license for package Android SDK Build-Tools 28.0.3 in /Users/xxx/Library/Android/sdk/licenses
License for package Android SDK Build-Tools 28.0.3 accepted.
Preparing "Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)".
"Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" ready.
Installing Android SDK Build-Tools 28.0.3 in /Users/xxx/Library/Android/sdk/build-tools/28.0.3
"Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" complete.
"Install Android SDK Build-Tools 28.0.3 (revision: 28.0.3)" finished.
Checking the license for package Android SDK Platform 28 in /Users/xxx/Library/Android/sdk/licenses
License for package Android SDK Platform 28 accepted.
Preparing "Install Android SDK Platform 28 (revision: 6)".
Running Gradle task 'assembleDebug'...
"Install Android SDK Platform 28 (revision: 6)" ready.
Installing Android SDK Platform 28 in /Users/xxx/Library/Android/sdk/platforms/android-28
"Install Android SDK Platform 28 (revision: 6)" complete.                       "Install Android SDK Platform 28 (revision: 6)" finished.                       Running Gradle task 'assembleDebug'...                                          Running Gradle task 'assembleDebug'... Done                       232.2s (!)
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk...                 1.4s
Waiting for sdk gphone x86 arm to report its views...               10ms
Syncing files to device sdk gphone x86 arm...                      269ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on sdk gphone x86 arm is available at:
http://127.0.0.1:56194/sN9MGqne9Qo=/

エミュレータにカウンターアプリが表示されればOKです。 f:id:todomasa:20200724181415p:plain

最後の確認

最後に flutter doctor コマンドを実行してみます。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.21.0-6.0.pre.3, on Mac OS X 10.15.5 19F101,
    locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.47.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

使えるデバイスが無いとは言われていますが、これはエミュレータ等を起動 or 実機を接続していないためなので、特に問題はありません。

これでiOS/AndroidのFlutterアプリの開発環境が構築できました 🙆‍♀️

レイアウトxmlファイルが開けない

Androidアプリ開発

私が遭遇したエラーではないですが、メモとして残しておきます。

レイアウトXMLファイルを開こうとすると、下記のようなエラーが出てファイルが開けない

エラーが発生しました。詳細については、エラー・ログを参照してください。

com.android.ide.eclipse.adt.internal.editors
.layout.configuration.ConfigurationComposite
.setFile(Lorg/eclipse/core/resources/IFile;)

Eclipse3.6でADTをバージョンアップすると出るらしいです。

そんな時はeclipseを-cleanオプションを付けて再起動すると解消されるかもです。

gitで作業途中のファイルをもとに戻したいとき

memo git

今までsvnを使っていたので、作業途中にファイルを最初からやり直ししたくなると、リネームしてsvnを更新で再度取得…とかやってました。

今回gitを使う事になり、どうやるのか調べました。

↓のコマンドでいけました。

git reset --hard HEAD

ちなみに、コミット後の場合は、

git revert HEAD　#一つ前
git revert HEAD^  #二つ前

だそうです。gitもしっかり勉強したいなぁ。