著者アーカイブ 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

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

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

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

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

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

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

このconfig.xmlを

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

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

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

著者: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文で５回回しているので、回を追うごとに値は減っていき最終的には値がない配列が出力されることになります。

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

著者:asaba

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

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

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

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

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

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

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

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

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

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

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

著者: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でアプリを作ってみたいというかたはぜひともマスターしておきたいところですね！

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