aknow2

自分の興味のある事を連々と(プログラミング、モバイルアプリ、プログラミング教育)

TypescriptのInterfaceにはinstanceofは使えない。

Typescriptには、JavaやC#と同じ様にinterfaceがあります。 が、JavaやC#と同じ様に扱うと怪我をします。 instanceofでinterfaceは使えない。 最初に私がビックリした事です。JavaやC#では'instanceof 'で型をチェックしたり、条件分岐で使えたりします。が…

Typescript ブラケット記法(Object[key])でno index signatureエラーをtype safeに解決したい。

TypescriptでObjectに対して[文字列]でアクセスするブラケット記法を用いると発生するエラー。 例えば、この様に書くとエラーが出てきてコンパイルが通りません。 interface ISomeObject { firstKey: string; secondKey: string; } const obj = { firstKey: …

【React Native(RN)】RNのプロジェクトフォルダ内に、別のNode.jsプロジェクトを作るとRNのビルドエラーになる

どんな時に発生するか React Nativeのプロジェクトフォルダ内に、別のNodejsプロジェクトを作った場合に発生します。 私の場合、Node.js for MobileというスマホアプリからNode.jsが実行できるモジュールを使った際に発生しました。 現象 以下のエラーログが…

Logcatを使って実機Androidのデバッグログをウォッチする

CordovaやReactNativeなどXプラットフォームな開発をしていて シミュレータでは大丈夫だったのに実機にインストールして起動すると何も言わずにアプリが落ちた! そんな時はlogcatを使ってログを見てみると解決する糸口が見つかったりします。 logcatを実行…

ReactNativeで簡単なアプリを作ってExpoとReactNativeCLIの比較をしてみた

作ったもの 食材毎に大さじとか小さじをグラムに変換するアプリ 既に似たような物が出ているけど、家族からの要望で作ることにした。 折角なので、前から気になっていたReactNativeで作ってみる事にした。 ちなみにReactjsは使ったことはありますが、ReactNa…

Create-react-native-app(CRNA)が開発中止(アーカイブ)になっている件

ふと、CRNAのGithubのページを見ると、、、 アーカイブされとるやんけ! reade meを見てみると真ん中ぐらいに、、、 Note: Create React Native App has been merged with Expo CLI You can now use expo init to create your project. See Quick Start in t…

CordovaでiOS版を作ってみた。(青空速読)

青空速読tomoaki kanayamaEducationFree 今までAndroid版しか作ってなかったけど、中古でiMacを安く買えたので、せっかくのクロスプラットフォーム開発環境なのだからという事でiOS版も作ってみた。 UIはAndroidから変更なし、機能的にもintent機能を除き移…

Node.js向けのTypescriptのボイラープレートを作った

Typescript書いてますか? TypescriptでNode.jsのスクリプトをサクッと書きたいが環境を作るの面倒。 なので、オレオレTypescriptボイラープレートを作った。 特徴 Typescript3.1 TSLint AirBnBのコンフィグを使用。MSとかFacebookのconfigはキツすぎてダル…

大さじ?g サポートページ

大さじ、小さじや1カップをグラムへ一発変換 料理向けの計量をグラムへ変換するアプリです。 計量器具を使わず、グラムで料理をする方ぜひお使いください。 特徴 ・材料を選択すると1杯辺りのグラムを一発表示 ・大さじや小さじの杯数の変更も可能 ・グラ…

【react-native・Android】React-native-admobを入れてアプリを起動すると停止し続ける。

react-natvie-admob(ver 2以降)を入れて、アプリを起動しようとすると「繰り返し停止しています」エラーで落ちる現象に遭遇。。。 調べてみるとadmobのSDKが10月2日に更新され、古いAPIと互換性が無く落ちる模様。 回避策としては、/node_modules/react-nati…

React-native ver.0.57.2で起動出来ない

追記:0.57.3がリリースされています。そっちでは問題が起きないので, 出来るならアップデートする方が良いと思います。 ReactNative 0.57.2でデバッグが起動できない現象が発生します。 iOS、Android両方とも起きます。 エラー内容 iOS Android共に下記の様…

react-native-router-fluxで現在表示しているシーン名を取得等

基本、Actionsに色んなものが入っている。 表示中のシーンや一つ前に表示していたシーン等色々入っているのでチェックしてみると良い import { Actions } from 'react-native-router-flux'; Actions.currentScene; // 現在表示してるシーン Actions. prevSce…

create-react-native-appを使ってReactNative+Typescriptの環境を一瞬で作る方法

create-react-native-appを使うとReactNative+Typescriptの環境も一瞬で出来るのでサクッと紹介します。 方法 まずはインストール npm -g install typescript create-react-native-app 次に以下のコマンドを打てば、my-appフォルダ内にTypescriptでReactNat…

ブラウザやタブを閉じた時にindexedDBに何か保存したい。save on exit

Webアプリでブラウザやタブを閉じた時に、今表示している内容をIndexedDBに保存したい場合ってありますよね。 ブラウザやタブが閉じる時の発火するイベントbeforeunloadを使えば上手く行きそうですが、、、。例えばこんな風に、、、 window.addEventListener…

Google Cloud Functionsでcorsを有効にする。

Cloud Functions特有なところも無く一般的なクロスドメインの話ですが、忘れないようにメモしときます。 環境 Google Cloud Functions Node.js 6 / 8 メモリー128MB クライアント Chrome 有効する方法 サーバーサイドでレスポンスのヘッダーに'Access-Contro…

【ASO・Android】自分のアプリがPlayストアどんな検索ワードで調べられているか知る方法

ASOが重要な事は言わずもがなですが、自分のPlayStoreのページにユーザがどの様に検索して辿り着いたか気になるところです。 実はplay consoleで自分のアプリのページがどんな検索キーワードでたどり着いたを知る事が出来ます。 どの様に検索されているか知…

「デバッグ編」nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせて、デバッグ。

nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせる。 - aknow2 上記リンク先の記事の続きです。 先にこちらを御覧ください 前回の方法でTypescriptを編集した際に自動リロードする事が出来ました。 次にデバッ…

React Router(v4)でcomponentクラス外から手動でページ遷移を行う。

まずReact Router v4 基本的なページ遷移の方法からです。 やり方は以下で出来ます。 // タグで指定する class Hoge extends React.component { render (): JSX.Element { return <Link to='/my/link'>Link</Link>; } } // historyを利用する class Hoge2 extends React.component { han…

【ホットリロード】nodejs + TypeScriptでサーバーサイドを開発している時に、コードを編集したら自動リロードさせる。

TypeScript+node.jsでサーバーサイドを開発してる時に、煩わしいこと TypeScriptをjavascriptへコンパイルすること。 ソースコードを編集したい場合、node.jsのプロセスを立ち上げなおす必要があること。 この二つの問題を問題を解決していきたいと思います…

必要なのはブラウザ(Chrome)だけ!コントラクト指向言語SolidityでEthereumのスマートコントラクトを実装してみる。

Ethereum、特にスマートコントラクトとかに興味があるけど 何か環境とか色々準備するのが面倒くさそうと思っている方 Ethereumにはテスト環境が公開されているので、 スマートコントラクトを実装して実行する事は ブラウザだけでも出来てしまいます。 今回は…

【cordova・Android】プラグイン(ネイティブ側)のデバッグ

Cordovaで開発をしていると避けては通れないプラグイン達、、、 今回はプラグイン側のデバッグ方法を紹介します。 【環境】 ・Windows10 ・Android Studio ・Nexus5X(実機・USBデバッグ有効済み) 今回はUSBで接続で接続した実機に対してデバッグする方法と…

青空速読サポートページ

青空文庫やお気に入りのニュースサイトを取り込んで速読体験しよう! play.google.com 青空速読tomoaki kanayamaEducationFree 文章を読んでいる時間の8割が眼球運動に費やされており、 文を理解する処理は2割程の時間しか無いそうです。 このアプリを使う…

【Android】Hay Sheep! サポートページ

play.google.com どんなゲーム? ヒツジをステージ上にある全ての干し草ロールをタッチさせるパズルゲームです。 クルクル回る小さな惑星に色んな装置を配置して、ヒツジを干し草ロールへゲット導こう! 特徴 ・スワイプだけのかんたん操作 ・全50のユニーク…

CordovaにAdmobプラグインを入れてAndroidアプリを収益化しよう【cordova-admob-free】

Cordova、Admobで検索すると真っ先に結果に上がってくるプラグインcordova-plugin-admobpro でも、このプラグインは20ドル払わないと、数パーセントのトラフィックが引き抜かれる隠れ有料サービスだったりする。 今回は完全無料をうたっているcordova-plugin…