狐好きぷろぐらまー

狐好きプログラマー見習いのブログです。

【VS Code】macのChromeのデバッグで躓いた【Debugger for Chrome】

こんばんは。 pregum_foxです。

今回はmacOS上のVisual Studio Code(以降VS Code)を使用してChromeデバッグした時に躓いたメモを残します。

目次です。

  • 背景
  • 前提条件
  • 作業環境
  • 作業開始からデバッグできるようになるまでの流れ
  • 解決後の画面
  • 原因
  • 対処方法
  • 図解
  • 雑感
  • 参考資料
続きを読む

【LINE】LINEのトーク画面でTwitterを開いてみた【LINEログイン】

おはようございます。

pregum_foxです。

今回は、LINE上でTwitterを開いてみました。

画面の見た目です。

f:id:pregum_fox:20200705064959p:plain
LINE上でTwitterを開いた画面

目次です。

  • LINE上でTwitterを開く為に必要なもの
  • LINE上でTwitterを開く手順
    • 1. LINE Developersへログイン
    • 2. プロバイダーの作成
    • 3. チャネルの作成
    • 4. LIFFの作成
    • 5. 動作確認
続きを読む

【0.23.0対応】rxdartについて調べてみる 第6回目 -Race, Retry- 【rxdart】

こんにちは。 pregum_foxです。

今回は、RaceオペレータとRetryオペレータについて調べていきます。

目次です。

  • 動作環境
  • Ampオペレータ (rxdart: Rx.race<T>拡張メソッド / Stream API: RaceStream<T>クラス)
  • Retryオペレータ (rxdart: Rx.retry<T>拡張メソッド / Stream API: RetryStream<T>クラス)
  • 雑感
  • 参考サイト
続きを読む

【0.23.0対応】rxdartについて調べてみる 第5回目 -Periodic, Never- 【rxdart】

こんばんは。 pregum_foxです。

前回に引き続きrxdartのオペレータを調べていきたいと思います。

今回は、rxdartのPeriodicオペレータとNeverオペレータについて調べていきます。

前回までの記事です。

目次です。

  • 動作環境
  • Periodic オペレータ (rxdart: Observable<T>.periodic ファクトリコンストラクタ / Stream API: Stream<T>.periodic ファクトリコンストラクタ)
  • Never オペレータ (rxdart: Rx.never<T> 拡張メソッド / NeverStream<T> クラス)
  • 雑感
  • 参考サイト
続きを読む

【0.23.0対応】rxdartについて調べてみる 第4回目 -Defer, Merge- 【rxdart】

こんにちは。 pregum_foxです。

今回は、rxdartのDeferオペレータとMergeオペレータについて調べていきます。

前回までの記事です。

目次です。

  • 動作環境
    • Deferオペレータ (rxdart: Rx.defer<T>拡張メソッド / Stream API: DeferStream<T>クラス)
    • Mergeオペレータ (rxdart: Rx.merge<T>拡張メソッド / Stream API: MergeStream<T>クラス)
  • 雑感
  • 参考サイト
続きを読む

【0.23.0対応】rxdartについて調べてみる 第3回目 -concatとconcatEager-【rxdart】

こんにちは。 pregum_foxです。

今回は、rxdartのページの最初に載ってあったconcatとconcatEagerについて調べてみました。

前回までの記事は以下をご覧ください。

動作環境

動作環境は以下の通りです。

項目 バージョン
Dart 2.6.1
rxdart 0.24.0

以下にconcatオペレータとconcatEagerオペレータについて記載します。

今回は以前rxdartが0.22.xのバージョンの頃に書いていたこちらの記事を0.23.0以降のバージョンに対応したものです。

0.22.xから0.23.xにバージョンが上がったタイミングの変更内容は以下のサイトをご覧ください

concat オペレータ / concatEager オペレータ

基本的にはconcatオペレータもconcatEagerオペレータもStreamを連結させて、1つのStreamとして振る舞います。
連結した順番に値が発行され、発行が完了したら次の値が発行されます。 発行する順番をこちらで設定しておきたい時に便利なオペレータです。

Concatオペレータ (rxdart: Rx.concat<T>拡張メソッド / Stream API: ConcatStream<T>クラス)

シグネチャ

  • rxdart
    Stream<T> concat<T>(Iterable<Stream<T>> streams)

  • Stream API
    ConcatStream<T> ConcatStream(Iterable<Stream<T>> streams)

処理の概要

前のStreamが完了してから、次のStreamを実行するよう連結します。
concatは、Streamが購読されると順番に発行します。
以下にサンプルを示します。

void studyConcat() {
  // concatは実行中のStreamが完了するまで、次のStreamが購読されないため
  // 'do on listen.'は3つ目のStreamが完了してから表示されます。
  // timerを使用してもその秒数待った後、順番に出力されます。
  Rx.concat<int>([
    Stream<int>.value(1),
    // Stream<int>.timer(2, Duration(seconds: 2)),
    Rx.timer(2, Duration(seconds: 2)),
    Stream<int>.value(3),
    Rx.timer(4, Duration(seconds: 1))
        .doOnListen(() => print('do on listen.')),
  ]).listen((i) => print('listen: $i'));
}
// 実行結果
// listen: 1
// listen: 2
// listen: 3
// do on listen.
// listen: 4
  
void studyConcatStream() {
  ConcatStream<int>([
    Stream<int>.value(1),
    TimerStream<int>(2, Duration(seconds: 2)),
    Stream<int>.value(3),
    TimerStream<int>(4, Duration(seconds: 1))
        .transform(DoStreamTransformer(onListen: () => print('do on listen.'))),
  ]).listen((i) => print('listen: $i'));
}
// 実行結果
// listen: 1
// listen: 2
// listen: 3
// do on listen.
// listen: 4

Concatオペレータは複数のStreamをまとめるオペレータです。
そしてまとめた順番の通りに値を発行します。
後述するconcatEagerと違う箇所は、発行と購読がStreamごとに行われることです。
その為、3回目の値の発行の後に4つ目のStreamのdoOnListen()が処理されています。

ConcatEagerオペレータ (rxdart: Rx.concatEager<T>拡張メソッド / Stream API: ConcatEagerStream<T> クラス)

ConcatEagerオペレータはRxでは正規のオペレータ名では存在しなかったので、リンクはつけておりません、ご了承ください。

シグネチャ

  • rxdart
    Stream<T> concatEager<T>(Iterable<Stream<T>> streams)

  • Stream API
    ConcatEagerStream<T> ConcatEagerStream(Iterable<Stream<T>> streams)

処理の概要

前のStreamが完了してから、次のStreamを実行するよう連結します。
concatEagerは、Streamの発行前に一度全て処理しておいてから順番に発行します。
以下にサンプルを示します。

void studyConcatEager() {
  Rx.concatEager<int>([
    Stream.value(1),
    Rx.timer(2, Duration(seconds: 2)),
    Stream.value(3),
    Rx.timer(4, Duration(seconds: 1))
        .doOnListen(() => print('do on listen.')),
  ]).listen((i) => print('listen: $i'));
}
// 実行結果
// do on listen.
// listen: 1
// listen: 2
// listen: 3
// listen: 4
  
void studyConcatEagerStream() {
  ConcatEagerStream<int>([
    Stream<int>.value(1),
    TimerStream<int>(2, Duration(seconds: 2)),
    Stream<int>.value(3),
    TimerStream<int>(4, Duration(seconds: 1))
        .transform(DoStreamTransformer(onListen: () => print('do on listen.'))),
  ]).listen((i) => print('listen: $i'));
}
// 実行結果
// do on listen.
// listen: 1
// listen: 2
// listen: 3
// listen: 4

ConcatEagerオペレータは複数のStreamをまとめるオペレータです。
そしてまとめた順番の通りに値を発行します。
concatEagerは、最初のStreamの発行前に全て購読しておきます。 その為、1回目の値の発行の前に4つ目のStreamのdoOnListen()が処理されています。

concat / concatEagerに関連するオペレータ

調べていく中で、concatやconcatEagerに類似するオペレータについてこちら探すのに良さそうなサイトがありましたのでいくつか記載します。

  • Mergeオペレータ (Rx: Rx.merge<T>拡張メソッド / Stream API: MergeStream<T> クラス)
    • 連結後、順番に関係なく値を発行します。
  • Zipオペレータ (Rx: Rx.zipN(Nは2~9)拡張メソッド / Stream API: ZipStream クラス(staticメソッドにzip2~zip9まで存在する))
    • 複数のStreamを順番に組み合わせて1つのStreamを発行します。
    • 複数のStreamを全て購読したタイミングでStreamが生成され、発行されます。
  • CombineLatest (Rx: Rx.combineLatestN(Nは2~9) 拡張メソッド / Stream API: CombineLatestStream クラス (staticメソッドにcombine2~combine9まで存在))
    • 複数のStreamを順番に組み合わせて、1つのStreamを発行します。
    • 複数のStreamの内いずれかを購読したタイミングで値が生成され、発行されます。

ここだけの説明だけでは私は理解できなかったので、次回以降で調べてみようと思います。

雑感

オペレータは、各言語によって名前が違ったりするので探すのも大変ですね。
concatEagerはRxの基本のオペレータではなかったので、 ReactiveX.ioにどのオペレータをするかの指標が記載されているので、参考にさせてもらっています。

concatとconcatEagerだけだとあまりrxdartがどこで使用できるか分かりづらいと思いますが、様々なオペレータが沢山あるので、調べつつ記事にしていきたいと思います。

未だに、DartPadにgistにアップしたコードを載せる方法がよく分かっていないので、そろそろ調べたいと思います。

ここまで読んで頂き、ありがとうございました。

参考サイト

【0.23.0対応】rxdartについて調べてみる 第2回目 -ObservableとSubject系クラス- 【rxdart】

こんにちは。 pregum_foxです。

今回は、rxdartでメインとなるRx、PublishSubject、BehaviorSubject、ReplaySubjectについて調べてみました。

0.23.0に対応したコードに変更しました。

目次です。

  • 動作環境
  • 0.22.xから0.23.xで変わったこと
  • ここで使用する用語の説明
  • Rxクラス
    • Observable<T>.just() ファクトリコンストラクタ / Stream<T>.value() ファクトリコンストラク
    • Rx.repeat<T>() ファクトリコンストラクタ / RepeatStream<T> クラス
    • Rx.range<T>() 静的メソッド / RangeStream<T> クラス
    • Observable<T>.error() ファクトリコンストラクタ / ErrorStream<T> クラス -> Stream<T>.error()ファクトリコンストラク
    • Rx.timer<T>() staticメソッド / TimerStream<T> クラス
  • Subject系クラスについて
    • PublishSubject<T>クラス
    • BehaviorSubject<T>クラス
    • ReplaySubject<T>クラス
    • AsyncSubject<T>クラス
  • 雑感
  • 参考サイト
続きを読む