Flutterアプリ開発に役立ちそうなコード/ライブラリ/ノウハウ一覧

Flutterでアプリを実装し始めると、「どう書くのがベストなのか?」や「どう配置するのがベターなのか?」と悩み始めた。
そういう時はGitHubで公開されているコードやアプリを参考にしたくなる。

そこで、Flutterアプリ開発に便利そうなコード/ライブラリ/ノウハウを集めてみた。

Flutter公式 : Write your first Flutter app, part 1

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

どのサイトを見てもまずFlutter入門としてここが紹介されいる。
Flutterのプロジェクト作成、シンプルなアプリ作成を丁寧に教えてくれる。

Flutter公式 : Cookbook

ここもFlutter入門としてどこでも紹介されている
アプリの作成中に一般的な問題を解決する方法を示すレシピ集

https://flutter.dev/docs/cookbook

Flutter公式GitHubのサンプル

Flutterスキルの向上に役立つサンプルアプリ、デモ、サンプルが紹介されている。
公式のFlutterチームが厳選したリストらしい
20個くらいのアプリが紹介されている(GitHubリンク付き)

https://github.com/flutter/samples/blob/master/INDEX.md

Flutter Community

Flutter Communityなるものがあり、アプリの公開リストとMedium記事が紹介されている。

List of open-source Flutter apps | It's All Widgets!

Flutterで構築されたアプリのGitHubリスト

https://itsallwidgets.com/?open_source=true

Flutter Community – Medium

良質な記事がたくさんありそう

https://medium.com/flutter-community

Solido/awesome-flutter

awesomeシリーズのFlutter版
記事、動画、プラグインフレームワークオープンソースアプリ、なんでもござれ

https://github.com/Solido/awesome-flutter#articles

Flutter Awesome

Flutterのアプリ、ライブラリ、UIテンプレートが紹介されている
細かくカテゴライズされており、ジャンルや部品毎に検索も可能

https://flutterawesome.com/

Puppeteerのpage.evaluateとpage.$はどちらがいいか

疑問

スクレイピングではPuppeteerをよく使うのだが、page.evaluate()page.$()の違いがよく分からなかった。

ちなみに、自分はpage.evaluate()しか使ったことがない。

回答

何が違うのか、どちらを使うべきか、その疑問が以下リンクを見つけて解決した。

stackoverflow.com

質問者も同じ疑問を持っており、page.evaluate()のほうが作業しやすい、と意見している。

回答が素晴らしいのでまとめてみた。

これらのコード行の主な違いは、Node.jsとブラウザー環境の間の相互作用です。

page.evaluate()は次のことを行います。

  • document.querySelectorブラウザーで実行し、要素ハンドルを(Node.js環境に)返します
  • getPropertyハンドルで実行し、結果を(Node.js環境に)返します
  • ブラウザ内の要素をクリックします

page.$()は単にこれを行います。

  • ブラウザーコンテキストで指定された関数を実行します(そして結果をNode.js環境に返します)

性能

これらのステートメントのパフォーマンスに関して、操り人形師はWebSocketsを介してブラウザと通信することを覚えておく必要があります。したがって、ブラウザに送信されるコマンドは1つだけなので(2つとは対照的に)、2番目のステートメントは高速に実行されます。

接続しているブラウザが別のマシンで実行されている場合(を使用して接続されている場合puppeteer.connect)、これは大きな違いをもたらす可能性があります。スクリプトとブラウザが同じマシン上にある場合、わずか数ミリ秒の差が生じる可能性があります。したがって、後者の場合、大きな違いはないかもしれません。

要素ハンドルを使用する利点

要素ハンドルを使用すると、いくつかの利点があります。まず、のような関数elementHandle.clickは、を使用するのとは対照的に、より「人間らしい」動作をしdocument.querySelector('...').click()ます。puppeteerは、たとえば、click関数を実行するだけでなく、マウスをその場所に移動し、要素の中央をクリックします。

何を使用するか

一般に、page.evaluateこのAPIデバッグもはるかに簡単なので、可能な限り使用することをお勧めします。エラーが発生した場合、ChromeブラウザーでDevToolsを開き、ブラウザーで同じ行を再実行することにより、エラーを簡単に再現できます。多数のpage.$ステートメントを一緒に混在させている場合、問題が何であるか、Node.jsまたはブラウザーランタイム内で発生したかどうかを理解することははるかに困難です。

要素をより長く必要とする場合は、要素ハンドルを使用します(複雑な計算を行ったり、外部イベントから情報を抽出する前に外部イベントを待機した可能性があるため)。

結論

  • page.evaluateを使おう
  • デバッグもエラー再現も簡単

Raspberry pi Camera v2 のケース探し

pi camera v2を使うことになり、カメラのケースは何があるのかと探してみた。

結論を先に書いちゃうと、選択肢は少なく、思ったよりいいモノはなかった。

カメラケース達

三脚マウントナット付きPiカメラケース - スイッチサイエンス

コンパクトなカメラケース 、三脚マウントナットがついてるらしい。
個人的には有力候補

www.switch-science.com

楽天市場Raspberry Pi Camera Case - Black Plastic:マルツオンライン

Amazonでも見かけたけど楽天のリンクを張っちゃう。
「pi camera v2ではフィットしない」という書き込みも見かけた、本当だろうか。

item.rakuten.co.jp

SmartiPi Touch - Raspberry Pi オフィシャル 7" ディスプレイ用ケース、スタンド

モニターケースとカメラがセットになったモノ
カメラ部分はLEGOブロックの形になってるらしい。

www.amazon.co.jp

モニタが不要なら、カメラケース単体でも売ってる。

item.rakuten.co.jp

ラズベリーイカメラフレーム/マウント:ロボショップ

コンパクトで4段階の角度を調整可能
三脚取り付け穴も付いている、いいね

item.rakuten.co.jp

自分が選んだケース

ケースとカメラがセットの SmartiPi Touchにした。

今回はタッチパネルモニタも欲しかったので、自分のニーズと一致したし。

海外のサイトだと、3Dプリンタで自作してる人も多い。
やっぱりそれが1番ベストだよね、自分はできないけど。

Atomで短形選択する方法

Atomをインストールするたびに毎回忘れるので記録しておく

結論

sublime-style-column-selectionパッケージをインストールする

これで短形選択が可能になる

スクリーンショット_2019-05-20_8_57_07.png

短形選択の方法

macだとoptionキー(winだとalt?)を押しながらカーソルを動かす。

パッケージインストール後はエディタの再起動不要で使用可能だった。

Kodiの種類と使用した感想

ラズパイ3をテレビに接続したく、Kodiの種類を色々と試してみた。

LibreELEC

ダウンロード

LibreELEC Downloads – LibreELEC https://libreelec.tv/downloads_new/

インストーラーを使うと便利

使用した感想

評判どおり動作は安定している。

UIをもうすこしイジれたらなぁ

OSMC

ダウンロード

Download - OSMC https://osmc.tv/download/

注意点

インストーラーが用意されているが、自分のMacではSDカードへのインストールが失敗する。 Disk Imagesからイメージファイルを直接ダウンロードして、BalenaEtcherあたりでSDに入れるといい。

使用した感想

デフォルトのUIがすごく見にくくて使いにくかった。

これを使うメリットは何だろか

XBian

ダウンロード

https://xbian.org/getxbian/

使用した感想

XBianというものを初めて知った。
起動した見た目はほぼLibreELECと変わらない。

XBianのダウンロードイメージは以下があった。

Raspberry Pi Raspberry Pi 2 / Raspberry Pi 3 Raspberry Pi 3B+ CuBox-i / Hummingboard

総評

LibreELECが安定している。

XBianもカスタマイズ性が高く、もう少し深く使ってみたい。

ラズパイ3で稼働させているが、ラズパイzeroWに移行したい。

でもzeroWだとテレビに表示されない、PCモニターでは映るのに。
これはどうしたらいいんだろうか

このへんで解決できそう www.raspberrypi.org

Flutterを初めるために

最近、Flutterに注目している。

Android + iOSのアプリが両方作れる!かつ、自分の大好きなマテリアルデザインが使えるためだ。

実際にまだアプリは作っていないけど、Flutterを初めるために良さげな記事を見つけた。

ちょっと古いけど、こにふぁーさんの記事

konifar.hatenablog.com

自分なりにまとめると以下

Dartのキャッチアップ Language Tour | Dart https://www.dartlang.org/guides/language/language-tour

UIライブラリ FlutterはUIをWidgetというパーツを組み合わせて作る。 そして標準で用意されてるWidgetは豊富で、Material Design GuidelineにあるUIは全て用意されている。 実際に作るときにどんなWidgetがあるかを知っておくのがキモで、以下を読んでおくことをオススメ Widget catalog - Flutter https://flutter.dev/docs/development/ui/widgets

開発環境を整えるなら
Android Studio / IntelliJ - Flutter https://flutter.dev/docs/development/tools/android-studio

Flutterのセットアップ
Install - Flutter https://flutter.dev/docs/get-started/install

Code Lab
Building Beautiful UIs with Flutter https://codelabs.developers.google.com/codelabs/flutter/index.html#0

サンプル
flutter/examples at master · flutter/flutter https://github.com/flutter/flutter/tree/master/examples

公式にサポートされているplugins
plugins/packages at master · flutter/plugins https://github.com/flutter/plugins/tree/master/packages

ここらへんを見ておけばアプリを作れるようになるはず

MacでGooglePlayMusicをアプリで聴きたい

ブラウザで聴くのではなく、Macのアプリで聴きたい。

Chromeだとタブ選択したりするのが手間。

ちょっと探してみた。

Radiant Player

radiant-player.github.io

自分も昔から使っていてオススメ

ただし、Mojaveだと起動した瞬間にエラーで落ちる。
解決策は、設定>セキュリティとプライバシー>プライバシー のアクセシビリティにRadiant Playerをドラッグして追加する。
これでMojaveでも起動できるようになる。

GitHubのissueにも話題になってた

Crashes upon open in Mac OS Mojave · Issue #668 · radiant-player/radiant-player-mac · GitHub

Google Play Music Desktop Player

www.googleplaymusicdesktopplayer.com

Radiant Playerがエラーで起動できない時期に見つけたアプリ

こいつはMojaveでもエラーにならず起動できる。

ただ、メモリ使用量が多いという情報もあった。

まぁ聴ければいいという人には問題ないかも

STAMP

freeyourmusic.com

GoogleMusic以外にもいろいろなサービスの音楽が聞ける。
SpotifyとかAppleMusicとかAmazonMusicとか。

ただ、GooglePlayMusicを聴くためのGoogleにログインに失敗して、GoogleMusicは聴けず。。。

なので使ってない。

結論

自分はRadiant Playerがオススメだが、エラーで開けない問題が解決できなければ Google Play Music Desktop Player でいいんじゃね