ushumpei’s blog

生活で気になったことを随時調べて書いていきます。

Promise + reduceで逐次処理

setIntervalでもいいですが、Promisereduceでもできるようです。

/* 逐次処理したいデータ */
const arr = [1,2,3,4,5];

arr.map( /* データの配列から`Promise`を返す関数の配列を作る */
  e => (
    () => new Promise(
      (res, _) => {
        setTimeout(
          () => {
            /* ここに処理を書く、ここではコンソールに出力 */
            console.log(e);
            res(e);
          },
          /* 処理の間隔 */
          1000
        );
      }
    )
  )
).reduce( /* reduceを使って、Promiseをthenでつなぐ */
  (p, c) => p.then(c),
  Promise.resolve() /* 初期値 */
)

一応のメリットは、処理を中断する際の記述がわかりやすくなることだと思います。

const arr = [1,2,3,4,5];

arr.map(
  e => (
    () => new Promise(
      (res, rej) => {
        setTimeout(
          () => {
            if(e == 4) return rej('4 is an unlucky number');
            console.log(e);
            res(e);
          },
          1000
        );
      }
    )
  )
).reduce(
  (p, c) => p.then(c),
  Promise.resolve()
).catch(
  e => console.error('Error!!!: ' + e)
)

ちゃんとする場合はsetTimeoutのコールバック関数内にtry...catchで記述するのがいいでしょう。

setTimeout(
  () => {
    try {
      if(e == 4) throw new Error('4 is an unlucky number');
      console.log(e);
      res(e);
    } catch(e) {
      rej(e);
    }
  },
  1000
);

感想

なんとなくメソッドチェーンにしたがる性分なのかもしれません。

React Native実機動作中のcommand+d

お疲れ様です。

とりあえず結論というか、言いたい事です。

React Nativeで作ったアプリを開発段階で実機にXcodeで転送した場合、
シミュレータでcommand+dしたときに出るメニューは、実機を振ると出すことができるようです。
(2017/02/22時点)

説明

最近、とりあえずiOSアプリのデモ作ってみないか?という縁がありReact Nativeを触ったりしています。

React Nativeはreact-native run-iosとか打てばシミュレータが立ち上がるのですが、カメラを使う機能などシミュレータでできないことは、Xcode経由で実機に転送する必要があります。

シミュレータではLive Reloadという、コードを修正するたびに再読込してくれる機能を有効にできるのですが、実機ではコードを修正するたびにビルド → 転送みたいな事をしないといけないと思っていました。

というのもLive Reloadを有効にするためのメニューは、シミュレータではcommand+dで出るのですが、実機ではショートカット打てないためです。

しかし実機に入れた場合でも、立ち上げ時にはローカル経由でjavascriptを読み込みに行っているようだし(完全にReact Native勉強不足です)。どうにかならないかなーと思い色々いじってみると、実機を振ったらメニューが出ました。その他やってみたこと

  • 音量ボタン同時押し
  • 二本指で画面下をスワイプ
  • 三本指で画面下をスワイプ
  • 二本指で画面をピンチ
  • 三本指で画面をピンチ

だからどうしたという感じですね。

感想

結局実機を振るとメニューが出たのですが、振る動作を使ったアプリを作りたい場合はどうするのでしょうか?

それはそうと毎回場当たり対応で知識が集積していかない感が集積しています。

ブラウザでテキスト読み上げるコンポーネント: react-voice-components

テキスト読み上げをしてくれるReactコンポーネントの存在を知りました。grvcoelho/react-voice-components

ブラウザで音声を使って何かしたいと思っていたので、試しに触ってみて、GitHub Pageにあげてみました。 以下ちょっと苦労したので、メモです。

Reactを動かせる環境の作成

半年前くらいに作ったコンパイルの環境がかなり古くなっていたので、facebookincubator/create-react-appで作り直しました。インストールに少々時間がかかりましたが、とても便利ですね。

npmで入れたreact-voice-componentsが動かない?

npmで入れたreact-voice-componentsだと、create-react-appで作った環境との相性なのか、コンパイルされずブラウザエラーが発生して動きませんでした。webpackの設定ファイルを上書けばいいようですが、とりあえず、git submoduleリポジトリコンパイル対象のディレクトリにクローンして使用することにしました。せっかくなので、本当に問題があるのなら、いずれ修正を送ってみようかと思います。

書いたコードです;

ushumpei/play-with-react-voice-components

GitHubページを公開する

GitHubページの公開方法は3つあるようで、mastergh-pagesブランチのindex.htmlからか、master/docsを使うか、だそうです。

今回はdocsを作成して公開しました。静的リソース(cssjs)の指定が絶対パスだったため、読み込まれなくて困りました。

感想

  • テキストから音声ファイルとして吐き出すことはできるか気になりました。
  • Reactで綺麗に書けるようになりたいです。
  • GitHubはとても太っ腹です。
  • リポジトリの作者がすでにデモページを作成してくださっているようです。。。

GitHubのIssuesを閉じる方法

GitHubのIssuesを閉じる方法、GitHubのHelpページでも紹介されていますが、commit messageに関して書かれているだけなので、PullRequestからでも閉じられるか確認しました。

確認内容

結論から言うと、PullRequestからでも閉じられます。

以下試したことです。これらは全て、マージするとIssue nを閉じてくれました。なお確認したのは、PullRequestの向き先がmasterの場合です。;

  • commit messageの1行目にClose #nが記述されたcommitを持つPullRequest
  • commit messageの3行目にClose #nが記述されたcommitを持つPullRequest
  • titleにClose #nが記述されたPullRequest
  • descriptionにClose #nが記述されたPullRequest

試してみたリポジトリ(特にどうでもいい内容です)。

余談

Closecloseでも問題なく、この単語以外には次の単語群が使用可能らしいです。

GitHubのHelpページ

Keywords for closing issues

The following keywords will close an issue via commit message:

close
closes
closed
fix
fixes
fixed
resolve
resolves
resolved

(転載日時: 2016/12/20)

Helpページでは、あるリポジトリから別のリポジトリのIssueを閉じる方法なども紹介されてます。

感想

PullRequestとIssueはID(#番号)の空間を共有していることに今更気がつきました。

repositoryのカタカナ表記をリポジトリとしましたが、レポジトリという発音をよく聞きます、どちらがいいのでしょう?

Yesodのquick startが重い

 題に掲げた問題を解決するための記事ではないです。HaskellのwebアプリケーションフレームワークYesodquickstartをDockerfileで行っただけの記事です。

Dockerfile

 Dockerfileを書きます。

FROM haskell:latest
MAINTAINER ushumpei
ARG project_name
RUN stack new $project_name yesod-sqlite \
  && cd $project_name \
  && stack build yesod-bin cabal-install --install-ghc \
  && stack build
CMD ["/bin/sh"]

 ビルドします。任意のプロジェクト名を引数に取れるようにARGで指定しています。引数を渡すには--build-argオプションをつけて、イメージ自体に名前をつけるために-tオプションをつけます。

docker build -t yesod_sample . --build-arg project_name=sample

 ビルドできたらコンテナを立ち上げます。めちゃくちゃ時間がかかります。。。

docker run -i -t --rm -p 3000:3000 yesod_sample /bin/bash

 立ち上がったらコンテナのシェルが起動します、/以下にARGで指定した名前のプロジェクトができているので移動し、起動コマンドを実行します。

cd /sample
stack exec -- yesod devel

 コンパイルマイグレーションが終わればlocalhost:3000で「Welcome To Yesod!」のページにアクセスできるようになります。

感想

 stack build yesod-bin cabal-install --install-ghcがめちゃくちゃ重くて面倒でした。DockerHubに重い部分がいい感じに済んでいるイメージとかありそうですね。dockerstackyesodとわからないことが二つ以上あるともうしっちゃかめっちゃかです。