input type="file" accept で .m4a 形式のファイルをデフォルトの選択対象にする場合は audio/x-m4a を使う

タイトルが本文.

実現したかったこと

<input type="file">

でデフォルトでは .m4a 形式のファイルだけを選択対象にする.

.m4a とは

非圧縮ファイル(WAVやAIFF)を音質の劣化なく70%から50%程圧縮する。通常はQuickTimeのMOVファイル(.mov)かMP4ファイル(.m4a)に格納される。

ロスレスで50%サイズダウンすごい.

試したこと

素直に <input type="file" accept="audio/m4a">

-> 全てのファイル形式が対象になる: ☓

あ, m4a は mp4 ベースの拡張だから <input type="file" accept="audio/mp4">

-> .mp4 が対象になる: ☓

-もう <input type="file" accept="audio/*"> で妥協しよう

-> ☓

結論

<input type="file" accept="audio/x-m4a">

なぞは残る

Media Types

developer.mozilla.org

あたりを探しても関する情報はなく...

help.dottoro.com

に audio/m4a の Aliases として audio/x-m4a があったので試してみたらいけた.

現行の Chrome 63 と Safari 11.0.2 では実現できた.

Web 標準ではないけど各ブラウザが実装している..?

優先度は高くないので, 時間あるときにでも調べていきたい.

React Native で実行対象の Android デバイスを選択してビルドする

blog.morugu.com

↑を乗り越えた後に, emulator を起動しつつリアルデバイスも繋いだ状態で

react-native run-android したところ emulator が優先された.

なので明示的に実行対象を指定する方法.

実行可能な一覧を取得

adb devices で使用可能な( adb サーバに接続された ) emulator/device が表示される.

$ adb devices
List of devices attached
adb server version (39) doesn't match this client (36); killing...
adb E 54586 8413562 usb_osx.cpp:147] Unable to create an interface plug-in (e00002be)
* daemon started successfully *

emulator-xxxx   device
xxxxxyyyyy      device

emulator-xxxx はその名の通りなので, 実機ビルドしたい場合は xxxxxyyyyy の方をコピーしておく.

実行

react-native run-android --deviceId xxxxxyyyyy

--deviceId で対象を指定. 以上!

参考

https://facebook.github.io/react-native/docs/running-on-device.html

http://android.keicode.com/devenv/what-is-adb.php

Redis でワイルドカードを使った複数 key の一括削除

Redis で key_name_* で一致する key を削除したいときに

key に使用している文字列によって最適な方法が違うのでまとめておく.

だいたいは redis-cli コマンドで ok

redis-cli KEYS "key_name_*" | xargs redis-cli DEL

基本的にはこれを使えば問題ない.

クォートを使った文字列の場合

key にクォートが含まれていると xargs が文字列を処理できずエラーになる.

xargs: unmatched single quote; by default quotes are special to xargs unless you use the -0 option

Linux 環境

redis-cli KEYS "key_name_*" | xargs -d '\n' redis-cli DEL
-d オプション について

every character in the input is taken literally.

文字列がそのまま解釈されるようになる.

xargs(1) - Linux manual page

macOS 環境

redis-cli KEYS "key_name_*" | xargs -0 redis-cli DEL

macOS の xargs には -d オプションがない.

xargs(1) Mac OS X Manual Page

その他

Lua

Redis 2.6 以降では EVAL コマンドで Lua Scripting で操作することができ, それを使った方法.

redis-cli EVAL "return redis.call(\'DEL\', unpack(redis.call(\'KEYS\', ARGV[1])))" 0 "key_name_*";

ただし, 1024件以上のデータ量になる場合 too many results to unpack エラーが発生する.

Lua の Default Stack Size が 1024 で定義されているため.

Lua 4.0.1 source code - llimits.h

対策( Feature request, zrevrangebyscore with STORE option · Issue #678 · antirez/redis · GitHub )はあるけど

素直に xargs 使ったほうが良さそう.

参考

Delete redis keys with unmatched single quotes · GitHub

React Native で run-adnroid したときに発生しがちな3つのエラーと対策

背景

久しぶりに react-native run-android したらエラーが出て

以前にも同じようなエラーに遭遇した記憶があるので, 内容と対策をまとめておく.

環境

  • macOS: 10.13.2
  • react-native-cli: 2.0.1
  • react-native: 0.42.3
  • node: v8.9.1

エラー その1: SDK location not found.

ログ
SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
対策

app/android/local.properties に以下を追加. (なければ作成)

sdk.dir = /Users/{USER_NAME}/Library/Android/sdk

※Mac で ~/ はホームディレクトリとして認識されないので, 必ずフルパスで設定する.

参考

stackoverflow.com

エラー その2: The SDK Build Tools revision (23.0.1) is too low for project

ログ
The SDK Build Tools revision (23.0.1) is too low for project ':{PROJECT_NAME}'. Minimum required is 25.0.0
対策

app/android/build.gradle

'com.android.tools.build:gradle:2.3.0'

'com.android.tools.build:gradle:2.2.3' に変更.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        // classpath 'com.android.tools.build:gradle:2.3.0'
        classpath 'com.android.tools.build:gradle:2.2.3'
    }
}
参考

github.com

エラー その3: No connected devices!

ログ
com.android.builder.testing.api.DeviceException: No connected devices!
対策

Android Emulatorを先に起動しておく.

$ cd ~/Library/Android/sdk/tools
$ ./emulator -list-avds
Galaxy_Nexus_API_23
Nexus_5X_API_23

$ ./emulator -avd Nexus_5X_API_23
参考

Build Your App from the Command Line | Android Studio

React Nativeアプリを爆速で作れるツールCRNAを試してみた

f:id:morugu:20170320094540p:plain

React Native BlogでCRNAが発表されていて

モック開発用?Production投入できるの?

と気になったので試してみました。

facebook.github.io

CRNAとは

Create React Native App の略称で、Facebook(React Community) からリリースされた React Nativeの開発を支援するためのツールで

XcodeAndroid Studioを使用すること無く(!)

React Nativeで書いたコードを実機で動かすことが可能です。

there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and runs CRNA projects written in pure JavaScript without compiling any native code.

どんな仕組で動くの?

最終的にはExpoというJavaScriptで書かれたコードをiOS/Androidで動かすことができるアプリ上で動作します。

なので

React Native > Expoで動くJavaScriptに変換 > Expoで動作

といった流れで動くようになります。

試した環境

事前準備

  • node 6.0 以上が必要になります

Node.js

  • 動作確認にはExpoが必要になります

expo.io

  • Macと動作確認に使用する端末が同じネットワークに繋がっている必要があります

アプリ作成

公式のチュートリアル通りに進めていきます。

CRNAをインストールして create-react-native-app コマンドでプロジェクトを作成します。

$ npm i -g create-react-native-app
$ create-react-native-app my-project
Success! Created my-project at /dir-path/my-project
Inside that directory, you can run several commands:

  npm start
    Starts the development server so you can open your app in the Expo
    app on your phone.

  npm run ios
    (Mac only, requires Xcode)
    Starts the development server and loads your app in an iOS simulator.

  npm run android
    (Requires Android build tools)
    Starts the development server and loads your app on a connected Android
    device or emulator.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-project
  npm start

Happy hacking!

と表示されれば作成成功です!

$ cd my-project
$ npm start

とするとターミナル上にQRコードが表示されるので

Expoアプリを起動してQRコードを読み取ります。

f:id:morugu:20170320082548p:plain

アプリが表示されました!

変更するにはApp.jsを修正します。

画像を追加してみます。

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
        <Image
        style={{width: 50, height: 50}}
        source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
        />
      </View>
    );
  }
}

エディタで保存すると、アプリ側も自動で更新されて

f:id:morugu:20170320082555p:plain

画像が表示されました!

このようにエディタで変更を保存すると、すぐに実機で動作確認ができるのがCRNA最大のメリットです。

Xcode/Android Studio用プロジェクトに書き出す

これだとモックの開発で終わり? と思っていたら

Xcode/Android Studio向けのプロジェクトに書き出す機能も用意されています。

$ npm eject

を実行するとindex.ios.js, ios/, index.android.js, android など

react-native init でプロジェクトを作成した時と同じReact Nativeのディレクトリ構成で出力され

Xcode/Android Studioで開くことができるプロジェクトも生成されます。

CRNAでモック作成 > ejectして本開発開始 > OS毎のライブラリ導入/調整

という流れで開発が可能になります!

所感

いままでの開発ではMaciPhoneを繋いで、Profile整えて、、と実機確認で面倒なことが多かったので、QRコードから読み込んで確認というアプローチは煩わしさが消えて楽になりました!

今回は1ファイルのシンプルなアプリでしたが、複数ファイルや外部ライブラリを入れたりしたときにejectが問題なく動作するのかなど、実践でどの程度使用できるかを引き続き試していきたいと思います。