著者アーカイブ asaba

asaba 著者:asaba

【cordova react】Invariant Violation: You should not use Route> or withRouter() outside a Router>

reactのチュートリアル中にハマりました。

 

チュートリアル中せっかくなのでアプリを画面遷移させるところまで試してみようと思い、index.jsとMyComponentをコーディングしてyarn run buildでビルド。

そしたら下のエラーに遭遇。


<span style="color: #ff0000;">Invariant Violation: You should not use Route> or withRouter() outside a Router>
</span>

訳すと、ルーターの外でwithRRouterを使ってはいけません。です。

export default withRouter(MyComponent)ってスコープ内だっけと思いましたがそんな訳ないよなと思いスタックオーバーフローへ。

するとありました。解決方法と原因。めっちゃシンプルでした。↓

https://stackoverflow.com/questions/47314541/you-should-not-use-route-or-withrouter-outside-a-router-when-using-react-route

 

 

<BrowserRouter></BrowserRouter>を定義していない・・・だと・・・

 

 

考えてみたらコンポーネントを上記のタグで囲まない限りいつまでも場外扱いですよね。

Routerを使いたいのにRouterを定義していないならそりゃ使えないよねと(汗)反省して下記のようにindex.jsを編集しました。

画面遷移はreact-routerの使い方を理解すれば大丈夫そう。筆者もここにきてようやくstateとpropなどのライフサイクルが分かってきたので、複数のコンポーネントで値を渡していじれるようになれば少しは楽に開発できるかなと感じました。

長いですが頑張て行きたいと思います。

 

 

 

 

asaba 著者:asaba

【iosアプリ】jsAnywhereでどこでもプログラミング

手軽にプログラミングができるjsAnywhereというアプリをダウンロードしてみました。

このアプリの特徴は、名前の通りいつでもどこでもプログラムを書くことができ、JS、CSS、HTML別にプログラムを見ることが出来ます。

背景色やフォントも変えることが出来る点は従来のエディタと変わらないですね。持ち込みができるエディタと考えたほうがいいかもしれません。

プログラムかけてもデバッグできないのかーと思ったらブラウザ上でしっかり行うことができました。設定画面で設定できます。

facebookやdropboxとも連携できるので、自分の作ったプログラムをsnsにアウトプットして共有することもできます。

最近ではスマホでもプログラミングができるツールが増えてきたのですが、自分は現在javascriptを使っているのでたまたまこのアプリを見つけて紹介させていただきました。

スマホでプログラミングをしたいと思ったとき、ちょっとしたtipsを見つけたときにはいいのではないでしょうか。

asaba 著者:asaba

【cordova】unable to load platformAPIでブラウザが開けなかった時の解決法

今回は再びコルドバの話題に戻ります。

先日cordovaを7.0.1から8.0.0にアップデートした時のことです。

直後にブラウザで動きを試したいと思い、いつものようにコマンドでnpm run serveでブラウザを実行したところ、下記のエラーが出現しました。

コルドバのバージョンをcordova.jsやモジュールにも認識させないといけなかったみたいです。

browserのplatformを入れ直したところ一発で解決しました。

一旦rmで消して↓


cordova platform rm browser

addで追加します


cordova platform add browser

ちなみに他のplatformを消す必要はないのでそこは大丈夫です。

一応このエラーの解決はしましたが、以前chromeで開けてたアプリがIEで表示されるようになってしまいました。原因は調査中です。

解決方法が見つかり次第このブログに書いていきたいと思います。

 

 

asaba 著者:asaba

【Cordova&react】cpコマンドが使えないときの対処法

reactを使ったcordovaアプリの開発環境を作っている時の話です。

reactのチュートリアルで開発環境を作っていて、config.xmlを違うフォルダにコピーする必要があったので

コマンドプロンプトでcp tutorial-cordova/config.xml tutorial/でコピーをしようとしたところ、おなじみのエラーが出ました。

ディレクトリのパスが間違っている若しくは環境変数にパスが設定されていないので実行できないよというエラーです。

しかし、筆者はどちらも正規の手順で設定済みで特に間違いはありませんでした。解決方法が分からないので、仕方なくcpコマンドを使わずにそのままコピーをしました。手動です。

このconfig.xmlを

このtutorialフォルダにコピーします。↓

考えてみたらただコピーするだけのコマンドなので手で直接コピーしてしまっても何の支障もなかったのです。

環境変数の設定ミスなどがなければ、これでも全然コピーできるので同じエラーで悩んでいる方はやってみてください。

 

 

 

asaba 著者:asaba

【javascript】特定の配列の値を削除する方法

少し前にjavascriptで配列の操作について勉強しました。実用性はあまりないですが、今回はそのためになったことを備忘録に残します。

配列の値を削除したいと思ったときにsplice()という関数の使い方を覚えました。下の例に沿って説明します。


<script>
var i = 0;

var arr = [85, 78, 92, 62, 69];

for(i=0;i<5;i++){

console.log(arr);

arr.splice(0, 1);

}
</script

コードを見ると、arr[]で5つの値を設定して配列文だけ出力しています。

その後にsplice()を使っていますが、引数を二つ取っています。一つ目の引数で、何番目の値を、二つ目の引数で削除する数を示しています。

つまり、0番目の値「85」を一つ消すという意味になります。

for文で5回回しているので、回を追うごとに値は減っていき最終的には値がない配列が出力されることになります。

使い方は分かるのですが、やはり実用性があまりないです。なのでこのページを見た方は配列の勉強程度に思っていただくと幸いです。

 

 

asaba 著者:asaba

【iosアプリ】夕ご飯が決まっていない、そんな時の強い味方 --今日の晩ご飯ーー

夕ご飯の計画が決まってない、自分で決めるのが億劫という方に向いてるアプリを見つけました。

名前そのままですが、「今日の晩御飯」というアプリです。

このアプリは、真ん中の押すというボタンを押すだけで、ランダムに料理名を出してくれます。画像ではエビフライとでています。(気に入らなければもう一度押してください)

で、料理名そのままの状態でレシピというボタンを押すと、なんとAPIを叩いてクックパッドのページに飛んでレシピを教えてくれます。

作ったことないなーとか余計な心配は一切しなくていいのでこれは助かります・・・!

更に、外食ボタンを押すと、googleに飛んで近くの店名(ここではジョイフルです)を教えてくれます。素晴らしすぎる・・・

友達や家族と何を食べるか意見が分かれた場合とかこのアプリを使えば盛り上がること間違いなしだと思います。

独身でも迷いを打ち消してくれるたのもしいアプリだと思います。

以上、優柔不断をスパっと打ち消してくれるアプリでした。短めですが今日はこれで終わります。

P.S.地元を離れてしばらく外食andスーパーのお惣菜ばかりだったので、もう少し早く出会いたかったです。

asaba 著者:asaba

【androidJava】rarativelayoutを使って画像を重ねる

前回は、linearlayoutを使って画像を横に揃えて表示するプログラムを載せました。

今回は、ralativerayoutを使って画像を重ねるところまで紹介していきます。

ralativerayoutとは、アクティビティに必要な部品を相対的に並べることで、デバイスが縦横してもデザイン崩れすることなく表示できるのが特徴です。

ある一つの部品を軸にすることで、周りのパーツを相対的に並べることで見やすいアプリを作ることができます。

ralativelayoutを使ったソースがこちらです↓

<pre><RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"

    >

<ImageView
    android:id="@+id/apple"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/apple"
    android:layout_alignParentBottom="true"
    tools:ignore="MissingConstraints"/>

<ImageView
    android:id="@+id/banana"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/banana"
    android:layout_alignParentBottom="true"
    tools:ignore="MissingConstraints"/></pre>
<pre></RelativeLayout></pre>

 

この中で重要な役割を担っているのが


<span style="display: inline !important; float: none; background-color: transparent; color: #333333; cursor: text; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">android:layout_alignParentBottom="true"</span>

このコードは、配置する下辺ビューを、親の下辺ビューに揃うように配置してくださいという意味を持っています。

これを応用すれば、ボタンの上からテキストや画像を重ねることも簡単にできます。

 

ralativerayoutを上手に使えば、モバイルアプリでは致命的なデザイン崩れも防ぐことができるので、これからiosやandroidでアプリを作ってみたいというかたはぜひともマスターしておきたいところですね!

自分もレイアウトは見様見真似だったので引き続きレイアウトの勉強も欠かさずしていきたいと思います。

 

asaba 著者:asaba

【androidJava】初心者向け:文字列から数値型に変えたい時

今日は渡された文字列をint型で受け取りたい時の方法を書いていきます。

intentなどで渡された値の照合などをしたい時は結構あると思います。自分もすっかり忘れてしまっていたので備忘録として下記に残します。ほんの少しですが。

<pre>num = Integer.parseInt(intent.getStringExtra(MainActivity.EXTRA_MESSAGE));

MainActivityから受け取った値をInteger.parseIntで変換していますね。この処理の後はもうint型の値として使うことが出来ます。

最近はandroiddevelopmentとか見なくなったので細かい変更などがされているか分からなくて不安でしたが、上記の処理でも問題なく動きます。もしよろしければ参考にしてみてください。

P.S.alt+Enterキーさんは偉大だったと改めて感じました。

asaba 著者:asaba

【firebase】firebase:cloud Massegingで送信失敗した時の解決策

firebaseはcloudを使ってデバイス同士のやりとりを高速で体現できることが特徴で、主にチャットの機能にも使われています。オフラインからオンラインになったタイミングで通知を流したりとプラグインと組み合わせることで好きなタイミングで機能を追加することができるなど、モバイルアプリを開発するユーザーにとってはありがたい機能がそろっております。

今回はfirebaseのcloud massegingを使ってデバイスにプッシュ通知を送信できなかったときの対策を備忘録として書きます。

例えば、メッセージ送信の際に突然めせーじが遅れなくなり送信失敗と赤いアイコンが出てしまったとき。

そのような時は、FCM登録トークンに着目しましょう。赤く囲んだところです。

 

このエラーは、デバイスのトークンがアプリを消してしまった際に違うトークンIDに変わってしまったことが原因です。

回答としては、現在のトークンIDをconsole.log(xxx)で調べ、それを先ほどの赤く囲んだところにコピペするだけです。

開発中のアプリを新しくインストールしたりアンインストールしたり繰り返していると、トークンIDがすり替わっているのを忘れてしまいがちなので、そこは気を付けたいと感じました。

 

asaba 著者:asaba

【android Java】初心者向け・Linearlayoutの使い方

今日は、androidstudioのレイアウトについて気づいたことを備忘録に残したいと思います。

今回はLinearlayoutの使い方をメインに綴ります。

お題の主役であるLinearLayoutは、ある部品を等しく一直線に並べたいと思ったときによく用いられます。Layoutの中でも最も使用頻度が高く汎用性のあるレイアウトといっていいでしょう。htmlでいうdivの役割と似ていますね。

使い方は、シンプルで一直線に並べたい部品を中に囲むだけ。下記のように書くだけです。

例えば、ボタン三つを横一列で中心に表示したい時は
android:orientation="horizontal"
android:layout_gravity="center"

と<Linearlayout内でプロパティを決めます。
Designタグを見て下記のようになっていれば成功です。

これだけならすごく簡単ですね。

複数の部品を決まった場所にそれぞれ配置したいとなってくるとRalativelayoutを使う必要がありますが、簡単なアプリを作ってみたいというかたはまずはLinearlayoutから触ってみてください。他にもTablelayoutやGridlayoutなど様々な特徴を持ったレイアウトがありますが、使う機会があったらまたやんわりと紹介していきたいと思います。