auの日記

プログラミング初心者の日記。(auはハンドルネームです)

サービスデザインとは何か調べてみた

auです。

サービスデザインという用語について調べました。

サービスデザインとは

サービスデザインとは、相手のことをよくリサーチして問題を見つけ、プロトタイプの体験を通じて改善していくアプローチのことです。

もともとデザイナー思考だった考え方を、ビジネスに落とし込むというのが、このサービスデザインみたいです。

デザイナー思考は、「HCD(人間中心設計)」と呼ばれる、ユーザ体験(UX)を中心とした設計のことで、ユーザの思考の流れを考えながらサイトが作るといった考え方です。

ざっくりとですが、ユーザ体験を考えながらサービスの改善を考えていくことという結論でいいと思いました。

React Nativeでamr形式で録音したい

auです。

React Nativeでアプリを起動し、amr形式で録音したいです。

まだ未解決ですが、やったことをまとめようと思います。

react-native-audioを使う

github.com

こちらのモジュールを使いました。

コードの一部をamrに変えることで保存できるらしいのですが、いくらやってみてもダメでした。acc形式でしか保存できません。

react-native-audiosを使う

github.com

react-native-audioとreact-native-soundを合わせたようなモジュールです。

これならできるかもと思い、インストールしてみたのですが、pod installで導入するはずのpodspecファイルの位置が他のモジュールと違うのでエラーが出ています。

Podfileをいじってみたり、podspecファイルの位置を変更してみたのですが、できませんでした。

f:id:program-shoshinsya:20200219221303p:plain

accファイルで録音→flac形式に変換ということをやってもいいのですが、それなりのリアルタイム性が欲しいので最後の手段にします。

Module AppRegistry is not registered callable module (calling runapplication)の直し方

auです。

React Nativeでパッケージを追加した後にリビルドしてみると「Module AppRegistry is not registered callable module (calling runapplication)」というエラーが出ました。

日本語の記事で見つからなかったので書いておきます。

直した後で再現できなかったのでスクショはないです・・・。

iPhone 11のシミュレータで実行しました。

環境

macOS Mojave: 10.14.6
Node.js: 12.16.0
npm: 6.13.7
react-native-cli: 2.0.1
react-native: 0.61.5

直し方

僕は以下の通りにやったらうまく行きました。

  1. Simuratorを強制終了
  2. Metro Bundlerを終了
  3. react-native run-iosで再起動

(Metro Bundlerはこんなやつ)
f:id:program-shoshinsya:20200218154505p:plain

React Nativeでパッケージをinstallするときにエラーが出る

auです。

React Nativeでモジュールをinstallしようとするとエラーが出ます。

npmのバージョン違いのようですが、Gitの中身をみても書いてないように思えました。

npm install react-native-google-speech-api --save
npm ERR! code ENOVERSIONS
npm ERR! No valid versions available for react-native-google-speech-api

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2020-02-17T09_32_49_221Z-debug.log

debug-logには以下のようになってました。

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/usr/local/bin/node',
1 verbose cli   '/Users/username/.npm-global/bin/npm',
1 verbose cli   'install',
1 verbose cli   'react-native-google-speech-api',
1 verbose cli   '--save'
1 verbose cli ]
2 info using npm@6.11.3
3 info using node@v12.15.0
4 verbose npm-session 60d8525e884fbcde
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 http fetch GET 304 https://registry.npmjs.org/react-native-google-speech-api 107ms (from cache)
8 silly fetchPackageMetaData error for react-native-google-speech-api@latest No valid versions available for react-native-google-speech-api
9 timing stage:rollbackFailedOptional Completed in 1ms
10 timing stage:runTopLevelLifecycles Completed in 837ms
11 verbose type tag
12 verbose stack react-native-google-speech-api: No valid versions available for react-native-google-speech-api
12 verbose stack     at pickManifest (/Users/username/.npm-global/lib/node_modules/npm/node_modules/npm-pick-manifest/index.js:39:11)
12 verbose stack     at /Users/username/.npm-global/lib/node_modules/npm/node_modules/pacote/lib/fetchers/registry/manifest.js:24:14
12 verbose stack     at tryCatcher (/Users/username/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/util.js:16:23)
12 verbose stack     at Promise._settlePromiseFromHandler (/Users/username/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:517:31)
12 verbose stack     at Promise._settlePromise (/Users/username/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:574:18)
12 verbose stack     at Promise._settlePromise0 (/Users/username/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:619:10)
12 verbose stack     at Promise._settlePromises (/Users/username/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/promise.js:699:18)
12 verbose stack     at _drainQueueStep (/Users/username/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:138:12)
12 verbose stack     at _drainQueue (/Users/username/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:131:9)
12 verbose stack     at Async._drainQueues (/Users/username/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:147:5)
12 verbose stack     at Immediate.Async.drainQueues [as _onImmediate] (/Users/username/.npm-global/lib/node_modules/npm/node_modules/bluebird/js/release/async.js:17:14)
12 verbose stack     at processImmediate (internal/timers.js:439:21)
13 verbose cwd /Users/username/Intern/speech_coding/speech-coding/SpeechCoding
14 verbose Darwin 18.7.0
15 verbose argv "/usr/local/bin/node" "/Users/username/.npm-global/bin/npm" "install" "react-native-google-speech-api" "--save"
16 verbose node v12.15.0
17 verbose npm  v6.11.3
18 error code ENOVERSIONS
19 error No valid versions available for react-native-google-speech-api
20 verbose exit [ 1, true ]

うーん、npmとnodeのバージョンは僕のものでした。では、このモジュールに対応しているnpmかnodeのバージョンを知るにはどうすればいいんだろう・・・?

gRPCとは

auです。

今回は、gRPCについて調べてみました。
www.grpc.io

gRPCとは

gRPCとは、プロトコルの一つです。

もともとRPC(Remote Procedure Call)がありますが、Google製のRPCで、gRPCです。

RPC自体が、通信をして別のコンピュータへ処理を依頼したり、結果を返したりします。

RESTのように、関数と引数を定義するだけで利用できるようです。

gRPCは、ILDを使用しているため、C++Python、Node.jsなどに対応しています。多いなー。

通信の際には、Protocol Buffersというフォーマットを利用しています。.protoという拡張子のファイルを作成し、ここに記述されたコードを使ってシリアライズ通信を行うようです。

HTTP/2のstream通信(双方向通信)にも対応している。

色々調べてみましたが、まだ腑に落ちない部分が多々あるので、実際にやってみながら学んでいこうと思います。




jsのmap関数についてまとめる

auです。

React Gatsbyでループ処理を書くときに、調べて出てくるのがforループとmap関数でした。map関数についてあまり使ったことがなかったのでまとめてみます。

map関数とは

map関数は、配列のデータをループ処理のように操作する際に使います。

つまり、要素一つ一つに対してコールバック関数を実行して、配列として返り値を返しています。

個人的にPythonのコードに置き換えたほうが考えやすいので、Pythonでmapと同じ動作を書いてみます。

まずは、map関数を使ったjs

var n = [1, 2, 3, 4]
var n2 = n.map((i) => {
    return i ** 2
)}
console.log(n2);
// 実行結果
Array(4)
0: 1
1: 4
2: 9
3: 16
length: 4

次にPythonコード

n = [1, 2, 3, 4]
n2 = [0] * len(n)

for i in range(len(n)):
    n2[i] = n[i]**2

print(n2)

# 実行結果
[1, 4, 9, 16]

配列全てに同じ処理を繰り返すということでした。

React Gatsbyの公式チュートリアルをやってみた

auです。

最近、React Gatsbyチュートリアルをやりました。

www.gatsbyjs.org

最近、静的サイトジェネレーターのツールである、Gatsbyを勉強しています。

公式チュートリアルがあるのでやろうと思い、一通りやってみました。

最初からやってみた感想になるのですが、src/pageの中にjsファイルを作成していくだけで、ページを追加できるのは簡単だしやり易いと感じました。
また、React Nativeをやっていたこともあり、ページの記法についてはあまり苦労しませんでした。やはりReact共通の書き方みたいですね。

HTMLにあるタグはほとんど使えるみたいでした。リンクを作成する時は、gatsbyのLinkをimportする必要がありました。

<Link to="/example/">Example</Link>

それでもこんな感じなので、より分かり易いと感じました。

CSSの適用も、src/stylesというディレクトリの下に.cssファイルを作り、それをimportするだけでした。限りなくHTMLですね。

他にも、React Nativeと同様に、ファイルの変更はその場で書き換わるため、デバッグはやりながらできます。流石にconfigの変更などは無理みたいでした。

共通のパーツをcomponentディレクトリに置いておくことで、簡単に使いまわすことができました。React共通の考え方みたいですね。

GraphQLというクエリ言語も触ってみました。どれくらいのファイルがあるのか、ファイルの中のステータスといった情報をSQLみたく検索することができ、表示する内容をコードとして書くことで、indexに別のページ情報の一部を表示するといったことができました。慣れるまで時間がかかりそうですが、Gatsbyを使うなら覚えておきたいと思います。

一通りやって、よかった点や印象にに残ったことを書いてみました。フロントの知識をもっとつけようとも思いました。