GitHub Pagesを使ってみた

静的ウェブサイトを簡単に作成・公開することができるGitHub Pagesを使ってみました。

公式サイトを見ながら、2つの方法を試しました。

  • HTMLを用意し、サイト公開する
  • Markdownを用意し、サイト公開する

方法

方法について、いろいろWebで調べてみました。
最もわかりやすかったのは、公式サイトでした。
ですので、最新の公式情報を確認するのが良い思います。

pages.github.com

結果

作成したウェブサイト

https://miajimyu.github.io/
HTML版。
Hello World表示するだけのindex.html。
※もしかしたら、こちらは今後変更することがあるかもかもしれません。

https://miajimyu.github.io/github-pages-markdown-sample/
Markdown版。
MarkdownはThemeを選択した後に表示されたデフォルトのまま。
index.mdと_config.ymlが生成されました。

リポジトリ

github.com

github.com

学び

  • すごく簡単に静的サイト公開することができる
  • 公開方法にはHTMLを用意する方法とMarkdownを用意してHTMLに変換してもらう方法がある
  • <username>.github.ioリポジトリを作成した場合、https://<username>.github.io/のURLで公開される
  • 他のリポジトリを作成した場合、https://<username>.github.io/<リポジトリ名>のURLで公開される

Flutterでbarcode scanする【flutter_barcode_scanner】

Flutterでbarcode scanしてみました。
前回とは別の「flutter_barcode_scanner」というPluginも試してみました。

開発環境

Flutter v1.9.1+hotfix.4

flutter_barcode_scanner | Flutter Package 0.1.7

準備

GitHubにexampleがあるので、これをみれば使用例が分かります。

flutter_barcode_scanner/example at master · AmolGangadhare/flutter_barcode_scanner · GitHub

結果

f:id:miajimyu:20191012150429g:plain

github.com

使った感想

周辺の暗い領域でもバーコードをスキャンする仕様は意外でした。
狙っていないバーコードもスキャンしてしまいそうで、ちょっと不安です。
まだ1.0.0に至っていないので、今後の改良されるかもしれませんね。

こちらのPluginでは、中央の赤いラインが動きます。

メソッドの引数にいくつも種類があったので、いろいろな要求に答えようという雰囲気を感じました。

barcodeScanRes = await FlutterBarcodeScanner.scanBarcode(
        "#ff6666",
        "Cancel",
        true,
        ScanMode.BARCODE,
      );

連続的にスキャンするgetBarcodeStreamReceiverメソッドがありました。

Future<void> startBarcodeScanStream() async {
  FlutterBarcodeScanner.getBarcodeStreamReceiver(
    "#ff6666",
    "Cancel",
    true,
    ScanMode.BARCODE,
  ).listen((dynamic barcode) => print(barcode));
}

動作確認環境

Androidエミュレータ

Pixel 3実機

学び

  • 実際に自分でPluginを使ってみないと、想像していた挙動と違う場合がある

関連記事

miajimyu.hatenablog.com

Flutterでbarcode scanする【barcode_scan】

Flutterでbarcode scanしてみました。
ちょっとつまづいた点もあるので、それも記載します。

開発環境

Flutter v1.9.1+hotfix.4

barcode_scan | Flutter Package 1.0.0

準備

Pluginの準備

pub.devのPluginのページの情報が古かったので(例:barcode_scan: ^0.0.3という記載があるなど)、GitHubの方を参考にしました。

以下のリンクから飛びます。

f:id:miajimyu:20191012115013p:plain
Repository(GitHub) on pub.dev

GitHubにexampleがあるので、これをみれば使用例が分かります。

flutter_barcode_reader/example at master · apptreesoftware/flutter_barcode_reader · GitHub

エラーとその解決

エラー

いざデバッグしようとすると以下のエラーが出ました。

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:preDebugBuild'.
> Android dependency 'androidx.core:core' has different version for the compile (1.0.0) and runtime (1.0.1) classpath. You should manually set the same version via DependencyResolution

ちなみに、pubspec.yamlの記載が「barcode_scan: ^0.0.3」の場合はエラー発生せず、「barcode_scan: ^1.0.0」にしたら発生しました。

解決

android/build.gradleの中のバージョンの指定を変更すると、解決できました。

classpath 'com.android.tools.build:gradle:3.2.1'

classpath 'com.android.tools.build:gradle:3.3.1'

にする

stackoverflow.com

結果

f:id:miajimyu:20191012120214g:plain
Android Pixel3

github.com

使った感想

中央の赤いラインにバーコードを重ねたらスキャンするのかと思ったら、ハイライトされている領域に入ったらスキャンしました。
実物のバーコードスキャナーを使ったことがあるため、最初のうち少し違和感ありました。

二次元バーコードもQRコードも、キビキビとスキャンできます。

iOSの方ではあまり試していませんが、ページ遷移の際に指でちょっかいをだすと、処理が少し固まるような印象がありました。

動作確認環境

Androidエミュレータ

Pixel 3実機

学び

  • barcode scanが簡単にできるPluginがある
  • pub.devのPluginのページの情報は古い場合がある
  • build.gradleの中のバージョンの指定を変更すると、エラーが解決する場合がある

関連記事

miajimyu.hatenablog.com

【Flutter】ThemeDataのprimarySwatchでアプリのテーマを変更する

primarySwatchを指定する

Flutterでアプリのテーマを設定するには、ThemeDataでprimarySwatchを指定します。
下記では、primarySwatchを紫色系、accentColor琥珀色に指定しています。

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.purple,
    accentColor: Colors.amber,
  ),
  home: MyHomePage(),
);

結果は以下の通り。
テーマカラーが紫色系になっていることが分かります。

primarySwatchを変えてみる

primarySwatchを緑色系に変更してみます。

primarySwatch: Colors.green,

すると、以下のようになります。

変わったところ

  • AppBar
  • Container

変わってないところ

  • FloatingActionButton

FloatingActionButtonのbackgroundColorはデフォルトがThemeData.accentColorなので、primarySwatchを変更しても変わらないようですね。
以下はfloating_action_button.dartの抜粋です。

/// The color to use when filling the button.
///
/// Defaults to [ThemeData.accentColor] for the current theme.
final Color backgroundColor;

Code

ThemeData and primarySwatch in Flutter

学び

Material Designのページも見たほうがいいかもしれない。

material.io

【Flutter】Custom Fontを使う

Cookbookにある「Use a custom font」を試してみました。

flutter.dev

方法

1. フォントを入手・配置する

今回は記事にある通り、Google FontsからRalewayRoboto Monoをダウンロードしました。

Google Fonts

プロジェクト内にディレクトリ(今回の場合はfonts)を作成し、フォントデータを以下のように配置します。

f:id:miajimyu:20191002000251p:plain

2. pabspec.yamlにフォントの情報を記載する

  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

3. フォントを指定する

2パターンの指定方法がある。

3-1. Defaultのフォントを指定する

ThemeDataのfontFamilyにフォントを指定。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Fonts',
      theme: ThemeData(
        fontFamily: 'Raleway',  // ←ここ
      ),
      home: MyHomePage(),
    );
  }
}

3-2. 特定のTextにフォントを適用する。

Text(
  'Roboto Mono sample',
  style: TextStyle(fontFamily: 'RobotoMono'),  // ←ここ
),

結果

f:id:miajimyu:20191002002906p:plainf:id:miajimyu:20191002002919p:plain
左Flutter Demoそのまま、右CustomFont適用後

学び

本筋に関係ありませんが、Google Fontsで検索結果がなにもない場合、複数パターンの絵文字が表示されるという知見を得ました。

f:id:miajimyu:20191002003334p:plainf:id:miajimyu:20191002003339p:plainf:id:miajimyu:20191002003343p:plainf:id:miajimyu:20191002003347p:plainf:id:miajimyu:20191002003351p:plainf:id:miajimyu:20191002003354p:plain
No fonts found!

【Android/Flutter】INSTALL_FAILED_INSUFFICIENT_STORAGEエラーの対策

状況

Flutterのアプリをデバッグしようとすると、 以下のような[INSTALL_FAILED_INSUFFICIENT_STORAGE]エラーが出るようになりました。

adb: failed to install /Users/<UserName>/Desktop/flutter_sample/build/app/outputs/apk/app.apk: Failure [INSTALL_FAILED_INSUFFICIENT_STORAGE]
Error launching application on Android SDK built for x86.

原因

エミュレータのStrageがいっぱいになっているのが原因のようです。 確認したところStrage使用量が90%を超えていました。

対策

私の場合は不要なアプリをいくつかUninstallすることで、Installが成功するようになりました。

Flutterで入眠用メトロノームを作ってみました

作ったもの

Google Play: NeZZZo

使い方

  1. テンポ(BPM)とタイマーを指定して、Startボタンを押す。 テンポは20~30くらいがおすすめ
  2. メトロノームの音に集中しつつ、寝ようとする。 音に集中することがすごく重要。

以上

おまけ機能

メイン画面右上のアイコンから、おまけ機能に飛べます。

時間で変化する音量設定が可能

メトロノームの音で、目が覚めないようにするためにつけた機能です。
下のスライダーでタイマー終了時(End)の音量の割合を調整できます(100%~0%)

複数の音色

音源として、手持ちのフリー音源を使いました。
ですので、正直な話、メトロノームの音としては変なのもが多いかもしれません。

きっかけ

以下の記事を見たことが、こういうアプリを知ることができたそもそものきっかけでした。

「寝つきの悪かった私が一瞬で眠れるようになった」 メトロノームアプリを使った入眠法を描いた漫画に反響

この記事で紹介されていた、アプリはいずれも試してみました。 その後も、同じカテゴリのアプリがリリースされているようです。 皆さんも試してみてはいかがでしょうか。

私は、いつか自分も作ってみたいなと思いました。

Flutter

Flutterを使って作りました。 当時は正式リリースされた時期が近く、興味を惹かれたことがきっかけです。

私はモバイルアプリエンジニアでもWebエンジニアでもありませんが、 Flutterはアプリをストアにリリースするという目標を、実現に導いてくれる素晴らしいフレームワークでした。