現役プログラマのWordPressカスタマイズ相談

WordPress(ワードプレス)のお悩み、うまくいかなくてお困りなこと、不具合調査、新規制作依頼まで、ウェブアプリケーションエンジニアがあなたをサポートします。

Flutterの画像縦横比"BoxFit"をソフトバンクホークスのロゴ画像で検証

Flutterで画像を配置した際のサイズを指定に関して

f:id:jsaz:20181224181723p:plain:w480

FlutterでImageを使って画像を表示させる際、

縦横比"BoxFit"がどのようになっているのかを確認したくプログラムを書いてみた。

ドキュメントはコチラ

docs.flutter.io

BoxFitは7つのタイプがあったので、それぞれタイプ名とそのタイプでの画像出力を下記のようなプログラムで検証してみた。

画像はソフトバンクホークスのロゴ画像を一瞬拝借。

※一部ソースは省略。 listViewItems()を呼び出せば確認できる(はず)

ソースコード

// タイプ名とBoxFitのPropertyのクラスを定期
class BoxFitType {
  final String name;
  final BoxFit type;
  BoxFitType({this.name, this.type});
}

// BoxFitType のリストを作成
List<BoxFitType> listBoxFitType = [
  BoxFitType(name: "fill", type: BoxFit.fill),
  BoxFitType(name: "contain", type: BoxFit.contain),
  BoxFitType(name: "cover", type: BoxFit.cover),
  BoxFitType(name: "fitWidth", type: BoxFit.fitWidth),
  BoxFitType(name: "fitHeight", type: BoxFit.fitHeight),
  BoxFitType(name: "none", type: BoxFit.none),
  BoxFitType(name: "scaleDown", type: BoxFit.scaleDown)
];

//-途中省略-

// リストを出力
List<Widget> listViewItems() {
    List<Widget> listWidget = [];

    for (var boxFitType in listBoxFitType) {
      print(boxFitType.name);

      listWidget.add(SizedBox(
        height: 70.0,
        child: Container(
            color: Colors.black38,
            padding: EdgeInsets.all(8.0),
            child: ListTile(
              leading: Image.network(
                  "http://www.softbankhawks.co.jp/pc/_pl_img/footer/logo_footer_l02.png",
                  height: 60.0,
                  width: 60.0,
                  fit: boxFitType.type),
              title: Text(boxFitType.name),
            )),
      ));
    }

    return listWidget;
}

画面

リストにBoxFitTypeをループして出力している。

画像は高さ60、幅60で指定しており、上からfill, contain, cover, fitWidth, fitHeight, none, scaleDownとなっている

f:id:jsaz:20181223234229p:plain:w480

こういう場合は coverを使うべきなのかな。

Android開発 エミュレータ(AVD Manager)のサイズ変更はとても簡単だった

f:id:jsaz:20181219235439p:plain:w360

半年以上Android開発をしていて、今日初めて知りました。

Androidエミュレータのサイズ変更方法に関してです。

なんと設定は不要でした!

  • デフォルトは大きすぎて使い辛い
  • 動画付きで操作説明
  • みんな知ってたのかな?
続きを読む

ふるさと納税-商品券ジャンルなら小山町

ふるさと納税商品券金券

今年2度目のふるさと納税です。

恥ずかしながら給料が高い会社で働いている訳ではないため、たくさん寄付できる状況ではありません。かといって少額をいろいろ試すのも管理が面倒、また還元率も悪くなってしまいます。ということで高額なもの1つで2018年は終わらせようと考えました。

ちょうどよかったのが

静岡県小山町 QUOカード 1万円分 」寄付金額25,000円

高額返礼品問題で今は終了しています。

が、類似の返礼品も出ているのでそちらも紹介しておきます。

続きを読む

Mi Band 3 を中国から取り寄せたけどiPhone7(iOS12)で心拍数と睡眠ログが同期しない

f:id:jsaz:20181101233659p:plain

やはり自分だけじゃなかったか。。。

www.reddit.com

中華ガジェットはすぐ壊れるから予備でもう一台購入していて、そっちも開けて試したけどダメだった。。。

続きを読む

WARNING in ./node_modules/Firebase/dist/index.cjs.js

angular で Firebase を使ったときに起こったWARNING

解決しないと実行できません。。

[ng] WARNING in ./node_modules/Firebase/dist/index.cjs.js
[ng] There are multiple modules with names that only differ in casing.
[ng] This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
[ng] Use equal casing. Compare these module identifiers:
[ng] * /<path>/node_modules/Firebase/dist/index.cjs.js
[ng]     Used by 5 module(s), i. e.
[ng]     /<path>/node_modules/@ngtools/webpack/src/index.js!/<path>/src/app/detail/detail.page.ts
[ng] * /<path>/node_modules/firebase/dist/index.cjs.js
[ng]     Used by 5 module(s), i. e.
[ng]     /<path>/node_modules/@ngtools/webpack/src/index.js!/<path>/src/app/app.component.ts
[ng] ℹ 「wdm」: Compiled with warnings.

ワーニングの内容は

複数のモジュールで名前がケースによって異なる
大文字、小文字のファイルをコンパイルすると、予期しない動作につながる可能性がある

といった感じ。

 

detail.page.ts のfirebaseのimport記述を確認したところ

import * as firebase from 'Firebase';

となっていた。

警告通り、大文字Fを小文字fに変更してみた

import * as firebase from 'Firebase';

そして実行。

[ng] WARNING in ./node_modules/Firebase/dist/index.cjs.js
[ng] There are multiple modules with names that only differ in casing.
[ng] This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
[ng] Use equal casing. Compare these module identifiers:
[ng] * /<path>/node_modules/Firebase/dist/index.cjs.js
[ng]     Used by 3 module(s), i. e.
[ng]     /<path>/node_modules/@ngtools/webpack/src/index.js!/<path>/src/app/create/create.page.ts
[ng] * /<path>/node_modules/firebase/dist/index.cjs.js
[ng]     Used by 7 module(s), i. e.
[ng]     /<path>/node_modules/@ngtools/webpack/src/index.js!/<path>/src/app/app.component.ts
[ng] ℹ 「wdm」: Compiled with warnings.

modulesの数字が変化した。

解決したのか?

同様に create.page.ts のimportも修正し実行。

[ng] Date: 2018-09-28T02:05:58.160Z - Hash: ff79b76efc66c6cf0588 - Time: 8958ms
[ng] 176 unchanged chunks
[ng] chunk {create-create-module} create-create-module.js, create-create-module.js.map (create-create-module) 9.08 kB  [rendered]
[ng] ℹ 「wdm」: Compiled successfully.

無事解決 ヽ(^o^)丿

githubに載っていたものを参考にしたんだけど。。。

Firebaseの「F」の大文字が原因だったのか?