またまたcreate-reactについてです。今回は、テキストボックスに入力した値を画面上に出力する方法です。
reactは、通常親コンポーネントから子コンポーネントに渡した値をthis.stateで更新しますが、render()内に書き込んでも値を更新することができます。
初級ですがreactを触ったばかりという方の力になれたらなと思います。
いきなりですが、まずconstractorで初期値”james”を定義します。その後にpropで子コンポーネントに渡しています。
その後に自由に値を入力することができるコードがこちらです。
スクショのようにonchangeでイベントを定義することで、name: e.target.valueでnameの中身jamesに続く値をsetstateで更新することができます。
アプリのログイン時にパスワードを入力するときに●が後追って表示されるけどあんな感じに使われるのかな?
イメージしやすいので簡単ですね。今日もこんな感じで少ないですが少しずつ情報を増やしてアウトプットしていきたいと思います。
reactは画面遷移の手段が面倒だったりes5とes6の書き方で大きく変わったりと最初のうちは手がかかりますが、決まり事を守って書いていけばプログラミング歴の浅い方でもクオリティの高いアプリを作ることができそうです。
良いUIフレームワークも揃っているので、こちらもぜひともマスターして使いこなしたいですね、それでは!
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)ってスコープ内だっけと思いましたがそんな訳ないよなと思いスタックオーバーフローへ。
するとありました。解決方法と原因。めっちゃシンプルでした。↓
<BrowserRouter></BrowserRouter>を定義していない・・・だと・・・
考えてみたらコンポーネントを上記のタグで囲まない限りいつまでも場外扱いですよね。
Routerを使いたいのにRouterを定義していないならそりゃ使えないよねと(汗)反省して下記のようにindex.jsを編集しました。
画面遷移はreact-routerの使い方を理解すれば大丈夫そう。筆者もここにきてようやくstateとpropなどのライフサイクルが分かってきたので、複数のコンポーネントで値を渡していじれるようになれば少しは楽に開発できるかなと感じました。
長いですが頑張て行きたいと思います。
手軽にプログラミングができるjsAnywhereというアプリをダウンロードしてみました。
このアプリの特徴は、名前の通りいつでもどこでもプログラムを書くことができ、JS、CSS、HTML別にプログラムを見ることが出来ます。
背景色やフォントも変えることが出来る点は従来のエディタと変わらないですね。持ち込みができるエディタと考えたほうがいいかもしれません。
プログラムかけてもデバッグできないのかーと思ったらブラウザ上でしっかり行うことができました。設定画面で設定できます。
facebookやdropboxとも連携できるので、自分の作ったプログラムをsnsにアウトプットして共有することもできます。
最近ではスマホでもプログラミングができるツールが増えてきたのですが、自分は現在javascriptを使っているのでたまたまこのアプリを見つけて紹介させていただきました。
スマホでプログラミングをしたいと思ったとき、ちょっとしたtipsを見つけたときにはいいのではないでしょうか。
今回は再びコルドバの話題に戻ります。
先日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で表示されるようになってしまいました。原因は調査中です。
解決方法が見つかり次第このブログに書いていきたいと思います。
reactを使ったcordovaアプリの開発環境を作っている時の話です。
reactのチュートリアルで開発環境を作っていて、config.xmlを違うフォルダにコピーする必要があったので
コマンドプロンプトでcp tutorial-cordova/config.xml tutorial/でコピーをしようとしたところ、おなじみのエラーが出ました。
ディレクトリのパスが間違っている若しくは環境変数にパスが設定されていないので実行できないよというエラーです。
しかし、筆者はどちらも正規の手順で設定済みで特に間違いはありませんでした。解決方法が分からないので、仕方なくcpコマンドを使わずにそのままコピーをしました。手動です。
このconfig.xmlを
このtutorialフォルダにコピーします。↓
考えてみたらただコピーするだけのコマンドなので手で直接コピーしてしまっても何の支障もなかったのです。
環境変数の設定ミスなどがなければ、これでも全然コピーできるので同じエラーで悩んでいる方はやってみてください。
少し前に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回回しているので、回を追うごとに値は減っていき最終的には値がない配列が出力されることになります。
使い方は分かるのですが、やはり実用性があまりないです。なのでこのページを見た方は配列の勉強程度に思っていただくと幸いです。
夕ご飯の計画が決まってない、自分で決めるのが億劫という方に向いてるアプリを見つけました。
名前そのままですが、「今日の晩御飯」というアプリです。
このアプリは、真ん中の押すというボタンを押すだけで、ランダムに料理名を出してくれます。画像ではエビフライとでています。(気に入らなければもう一度押してください)
で、料理名そのままの状態でレシピというボタンを押すと、なんとAPIを叩いてクックパッドのページに飛んでレシピを教えてくれます。
作ったことないなーとか余計な心配は一切しなくていいのでこれは助かります・・・!
更に、外食ボタンを押すと、googleに飛んで近くの店名(ここではジョイフルです)を教えてくれます。素晴らしすぎる・・・
友達や家族と何を食べるか意見が分かれた場合とかこのアプリを使えば盛り上がること間違いなしだと思います。
独身でも迷いを打ち消してくれるたのもしいアプリだと思います。
以上、優柔不断をスパっと打ち消してくれるアプリでした。短めですが今日はこれで終わります。
P.S.地元を離れてしばらく外食andスーパーのお惣菜ばかりだったので、もう少し早く出会いたかったです。
前回は、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でアプリを作ってみたいというかたはぜひともマスターしておきたいところですね!
自分もレイアウトは見様見真似だったので引き続きレイアウトの勉強も欠かさずしていきたいと思います。
今日は渡された文字列をint型で受け取りたい時の方法を書いていきます。
intentなどで渡された値の照合などをしたい時は結構あると思います。自分もすっかり忘れてしまっていたので備忘録として下記に残します。ほんの少しですが。
<pre>num = Integer.parseInt(intent.getStringExtra(MainActivity.EXTRA_MESSAGE));
MainActivityから受け取った値をInteger.parseIntで変換していますね。この処理の後はもうint型の値として使うことが出来ます。
最近はandroiddevelopmentとか見なくなったので細かい変更などがされているか分からなくて不安でしたが、上記の処理でも問題なく動きます。もしよろしければ参考にしてみてください。
P.S.alt+Enterキーさんは偉大だったと改めて感じました。
firebaseはcloudを使ってデバイス同士のやりとりを高速で体現できることが特徴で、主にチャットの機能にも使われています。オフラインからオンラインになったタイミングで通知を流したりとプラグインと組み合わせることで好きなタイミングで機能を追加することができるなど、モバイルアプリを開発するユーザーにとってはありがたい機能がそろっております。
今回はfirebaseのcloud massegingを使ってデバイスにプッシュ通知を送信できなかったときの対策を備忘録として書きます。
例えば、メッセージ送信の際に突然めせーじが遅れなくなり送信失敗と赤いアイコンが出てしまったとき。
そのような時は、FCM登録トークンに着目しましょう。赤く囲んだところです。
このエラーは、デバイスのトークンがアプリを消してしまった際に違うトークンIDに変わってしまったことが原因です。
回答としては、現在のトークンIDをconsole.log(xxx)で調べ、それを先ほどの赤く囲んだところにコピペするだけです。
開発中のアプリを新しくインストールしたりアンインストールしたり繰り返していると、トークンIDがすり替わっているのを忘れてしまいがちなので、そこは気を付けたいと感じました。