FlutterはStatelessWidgetでWebサイトのトレースから始めると楽しい

Flutter、最近よく聞くようになってきました。マテリアルデザインっぽいアプリならサクッと作れると評判のやつです。

Flutter、サンプルコードがまぁまぁムズい

New Project... でFlutterプロジェクト作って最初の、FABクリックでカウントアップするやつ、まぁまぁムズいです。

https://flutter.io/images/intellij/hot-reload.gif

読んでも動きがわからないとかそういうムズさではなく、どうにもこうにも次の一歩が踏み出せない感がある"ムズい"です。

なにがムズいのか

StatefulWidget。こいつがいきなり出てくるところかなと思っています。

HTML知らないのにJSいきなり教えられた(・o・)ポカーン な感じw

HTML画面の作り方を知った上で、動的なものを作りたくてJSを学ぶのがスーッと入っていけるのと同じで、FlutterもまずはStatelessWidgetで画面の作り方を知った上で、動的なものを作るところでStatefulWidgetを使えばいいんじゃないの?って感じました。

ということで、、作りたい画面があるなら作ればいいのだ!

静的な画面をつくるだけなら、StatefulWidgetの理解なく進められます。

「最近、よく読んでる https://home.livingfk.com/ ページ、もうちょっとスマホUIで読めたら最高なのになー」からの、Flutterトレースを始めてみました。

f:id:YusukeIwaki:20181021223304p:plain

StatelessWidgetでガンガン作っていくと結構楽しいです。

flutter.io

qiita.com

この2つのページと、あとはぐぐりながらやると、だいたいの画面は作れます。まだまだ途中だけどいったんリポジトリに上げてみました。

github.com

ネイティブ実装に比べてFlutterがラクなこと

マテリアルデザイン

まずスタイル定義が超ラクです。

あとは、ドロワーやアクションバー、ボタンやカードやDividerなど、一通りウィジェットが揃ってるのも本当にラクです。

最近は https://github.com/material-components/material-components はFlutterが一番先行してますよね。Androidですら未実装なのにFlutterは実装済み、とか結構あります。StepperとかBackdropとか。

ドロワーとかアクションバーのメニューとか

ネイティブだとJavaでコードを書かないとDrawerToggleが出ないとかオプションメニューが出ないとかありますよね。

FlutterだとScaffold使えば、

  • Drawerを定義するだけで自動でDrawerToggleつけてくれたり
  • AppBarにactionsって定義するだけでアクションバーのメニューをつけてくれたり

結構ボイラープレートコードっぽいものが省力化できてる感あります。

レイアウトの反映が一瞬

ネイティブだと、レイアウトXML変えたらビルドし直してまぁまぁ待たされますが、Flutterだとホットリロードで2秒くらいで結果が見れる。レイアウトの勉強には最高の利点です。

NetworkImageがライブラリなく使える

ネイティブだとGlideとかPicassoに頼ってContext渡して・・・とかいろいろ面倒なところ。

Flutterだと Image.network("https://xxxx.xx.xx/hogehoge.png") みたいなのがサラッと書けて、画像もWebページ表示するみたいに難なく非同期表示されるのはめちゃくちゃ便利です。

Webでは簡単だけどFlutterだと難しそうなこと

widthは画面の横幅100%、縦横比4:3のImage

Webだと簡単にできるんだと思いますが、Flutterだと幅を計算した後に高さを指定ってのがどうもうまくできませんでした。

PageView など事前に高さがわかってないと使えないウィジェットもあったりするけど、みんなどうやって解決してるんだろう・・・

NetworkImageを表示するカルーセル

PageViewの高さが事前にわかってないといけない制約です。はい。

画面にあわせて画像の方を加工せよ(あんまり縦横比が違いすぎる画像をまぜるな)ってことなんでしょうけど・・・

(ちなみにこれはネイティブでも同じことが言えるのでFlutterだから悪いとかそういうことではない)

 

まとめ

counterのサンプルアプリをみて「で、次なにからやればいいんだ・・・」ってなってる人は、ぜひWebページのトレースをやるといいです。楽しいよ。

f:id:YusukeIwaki:20181021225316g:plain

フレッツ光 "隼" はPPPoEでは本当に使い物にならなかったので...

長いまえおき

引っ越してからネット環境が変わって、隼とかいう「スーパーハイスピード」タイプのものになった、という話は昔書いた

夜のスループットは壊滅的!

これちゃんと調べてから契約すべきだったなーと激しく後悔しているんだけど、隼は 夜になると実測値で4Mbps出ない状態なのだ。よくこれで「スーパーハイスピード」なんて言えたもんだと思う。

これはたまたまじゃなくて、毎日だ。イライラした時にはTwitterにスクショ撮ってたんだけど↓

こんな感じで、有線でもスマホ以下のスループットしか出ない。しかもこの半年まったく改善されていない。

IPv6にすればいい?

どうやら「PPPoE経由ではなくて、IPv6で直接つなげばいい」みたいなことを書いてるサイトが結構あるなーとおもって、乗り換えることにした。

先に結論を書いておこう

  • フレッツ光 隼 + 「ZOOT NATIVE(1000円/月) だけ」で、望んでいた環境は30分くらいで手に入る。
  • 基本的には「ほげほげ光!」みたいなの(コラボ光)に乗り換える必要はまったくない
  • でもGMO BBでは、ひかり電話対応の機器を所持していない限り、持ち込みルータではv6プラス接続できない!!という罠がある

  • 検索結果の上位を占めるように出てくるキュレーションサイトの数々に騙されることなかれ!

これ以降は、失敗談とキュレーションサイトに対する愚痴しか書いていない。

 

今回の乗り換えでつまづいたところ一覧

世の中のキュレーションサイトがIPv6に対する理解の妨げにしかなっていないということ

「gmobb v6プラス」とかで検索すると、金稼ぎのために書いたようなブログ記事みたいなのがいっぱい引っかかります。 このキーワードに限らず、IPv6の調べ物をしているとかなりの割合で、そういうブログ記事が引っかかります。

「●●に申し込むだけでOK」「△△だと20000円キャッシュバックがあるのでお得!」みたいな情報は、調べ物においては正直何の役にも立たない、ただただノイズです。

 

で、自分がおそらく知りたかったのは、

  • IPoEとIPv4 over IPv6 の2つが揃って、初めてまともにネットが使える
    • IPoE単体でも、とりあえずIPv6サイトの閲覧はできるが、従来のIPv4にしか対応していないサイトは見れない(DNSが引けない?)
  • IPv4 over IPv6 いくつかの名称・規格がある。
    • transixっていうやつを使う場合には、ルーター側で gw.transix.jp というゲートウェイを1箇所設定をするだけで、IPv4サイトも見れるようになる
  • 原理上、ポート開放ができないので、サーバー公開とかやりたい場合は注意してね

くらいの情報です。

 

本当に、世の中のキュレーションサイトには消滅していただきたい・・・。

IPv6で接続ができることと、v6プラスは別物だということ

先にちらっとかいた

IPoEとIPv4 over IPv6 の2つが揃って、初めてまともにネットが使える

ということ。

flets-w.com

たとえばここに書いてあるのはIPoEの話であって、v6プラス, transix, MAP-Eなどの話ではありません。

IPv6で接続できて、なおかつその先でIPv4のサイトも見るための仕組みを用意してあげないといけないよ!それがv6プラス, transix, MAP-Eだよ!ということを理解するまでに結構時間がかかった。

ビックカメラの店員でも対応ルータを間違えるくらい紛らわしい

家のルーターが対応してなかったので、新しいのを買いに行くことにしたんだけど、「IPv6対応しているルータでなるべく安いの下しあ」なんて言うと、求めるルーターが必ずしも案内されない。

IPv6対応しているルータは、結構古くからあるが、transixとかに対応しているルータはかなりレア物で高い。

最初ビックカメラで案内されたのは

これ。IPv6パススルーには対応しているけど、v6プラスやtransixなどには対応していないよ。家に設置してから気づき、わざわざ交換しに行って

バッファロー WXR-1750DHP2 無線LAN親機 11ac/n/a/g/b

バッファロー WXR-1750DHP2 無線LAN親機 11ac/n/a/g/b

最終的にこれに行き着いた。(店員に案内されたやつを買ったからなんだろうけど、私の伝え方が悪かったかもしれない&開封したのに交換対応してくれたビックカメラには結構感謝している)

GMO BBは持ち込みルータではフレッツ光 隼 のv6プラスを使えないということ

これは、GMOBBに明らかに非があると思う。

2017/01/01 00:04:01 SYSTEM [V6Plus] Can't connect rule server. 
2017/01/01 00:04:01 SYSTEM [V6Plus] Can't receive rule(status=-2). 

ルーターのエラーログで↑みたいなのが出続けてていたんだけど、これはGMO BBでは持ち込みルータでv6プラスは使えませんぞ!ということらしい。

GMOBBの公式には「ひかりルーターorルーターレンタルが必須」とは一言も書いてなくて、

この辺の情報を見ると、なんとなくそれっぽいことがあるらしい、というのがわかる程度。

(ちなみに私はこれを見て、心底腹が立ち、カッとなってそれまで4年くらい使っていたGMOBBを解約するに至りましたw)

まとめ

すべてフレッツ光 隼が悪い。もう絶対にこんなサービス使いたくない。

まわりの人に快く動いてもらうための言葉遣いについて

家で仕事する日々が続くと、働く雰囲気というものを割と気にするようになってきた。

なんとなく、「あ、これは言うと損する言葉かも」とか「こういう言い方すると良いかも」みたいなのを自分用のメモみたいな感じで書いておこうかなと思う。

 

DONT: 「影響範囲が大きい」

対話中に見積もりを求められるときには無意識に使っている言葉。

影響範囲が大きいという言葉からは、結局の所「私はそれには協力しない」という"暗黙の姿勢"だけが伝わる。

難易度が高くて、ちゃんとできる保証がない・・・だとすると

「このロジック読み解くのに○日くらいかかってしまいそうだけど、いい・・?」

「今すぐにはうまいやり方が思いつかない・・・」

→へんに客観的な言い方をせずに、"私"を主語にして言ったほうが良さそう

まじでその決断をしてほしくない・・・だとすると

「うーん、この機能にどのくらい情熱ありますかね?」

「なんか別の方法でうまいことできないかなー・・」

「同じ工数つかうなら、△△の機能改善のほうをやってみたい/注力したいな」

→本当にそれが最善なのか?と確認とったり、別の策を一緒に考えたいという姿勢を第一に示したほうが良さそう

DONT: 「もとの作りがよくない」

何かを改造しようとしたら「うわぁ、なんだこれ!」っていうコードを見てしまうことは稀によくある。ただ、それを頭ごなしに否定するのは・・・

もし隣にその機能を作った人が座っていて、たまたま言葉を耳にしたらどんな気分になるだろう?

実は作った当時にはちゃんと理由があって作ったものかもしれない。何らか課題があってお試しでやってみただけなのかもしれない。どうしても暫定対処するしかなかったのかもしれない。

楽しい雑談や議論ができたかもしれないところが、「作りが良くない」なんて言ってしまうと一気に雰囲気が悪くなってしまう。

とにかく作った人を尊敬する。話はそれからだ。

作った人に対して尊敬の念をとりあえずでも持とう。そうすると、まずはgit logなどなどをみて、作られた経緯を今一度確認しようと思うはずだ。

それでもなんでこんな作りになってるの・・?というところがあるとすると、直接作った人に聞く。(すでに退職している人だったら諦めるしかないがw) だいたいそういうケースでは、何らかの未練が存在しているので、話す余裕があれば当時の思考過程をいろいろ聞く。で、本当にその未練をバッサリ消すのが良さそうかを合意する。

みたいなことができたら理想的なんじゃないかなぁと思う。

DONT: 「デザインが出てこないと手をつけられない」「プロダクトオーナーに判断してもらわないといけない」

私個人的にはたぶん言ったことはない気がするけど、世の中的には結構使われてる気がする。

ウォーターフォールなプロセスだとこういう態度は正しいと思われがちがけど、これって「自らの作業効率化のため」であって必ずしも他人を思いやっていないよね。

本当に手戻りが嫌なのだとすると・・・

「○○画面のデザイン、リストにするのかカードにするのか他のなにかにするのか、方針が変わると実装が大きく変わるので明日の昼までに決めたい」

→単純に丸投げするような言い方をせずに、選択肢を一緒に考えるように言えると良いんじゃないかなぁ

なんらかの判断に自分が担当/責任を持つのが嫌なんだとすると・・・

「○○画面のデザインのところ、デザイナでまず原案出して欲しいな。それみて議論したい」

→全部考えてくれ、ではなくてベースを作って欲しいという言い方にして、担当/責任はとらずとも協力はしたほうが良さそう

「私は○○がいいとおもってるけど、判断は△△さんを信じておまかせするわー。」

→英断に期待している!という言い方をすると、言われた方は(単純な丸投げよりも)快く&期待に応えるための判断をしようと思うんじゃないかなぁ

 

 

まとめ

結局のところ

  • 他者尊敬は大事だ

に尽きるのかなと思う。