著者アーカイブ asaba

asaba 著者:asaba

【cordova/react】create-react-app内でもjqueryしたい!!

jqueryは通常、ファイルをダウンロードしてhtmlに組み込むかcdnでリンクを作り(下のコード参照)

これをそのまま貼って使う方法があります。

 

create-react-appで作ったアプリでもhtmlで組み込めそうだと思い、jquery公式ページでダウンロードしたjquery3.3.1ファイルを

index.htmlが入っている場所publicフォルダ内に入れて、生成されたindex.htmlのコードに埋め込もうとしましたが$ is not defined

怒られてしまいました。

 

最初からcreate-react-appで作ったindex.htmlは、タグ内の要素を組み込んで表示することしかしてくれないので読み込んでくれないみたいです。

 

共存させるには、npmを使ってjqueryをインストールする必要があります。

コマンド内でnpm install jqueryと入力してenterキーを押せばすぐに最新版をダウンロードしてくれます。

そして、jqueryを使いたいjsファイルに下のように定義します。


import $ from 'jquery';

これでreact内でもjqueryを使ったajaxの通信も問題なくできるはずです。

同じjqueryでもzeptoのほうが軽く、最初はそっちを入れたのですがcreateelement辺りでバグっぽいのがあったのでやめました。

reactでもjquery使いたい!という方は是非試してみてください、それでは。

asaba 著者:asaba

【cordova react】index.htmlをいじってヒヤッとなった話

jqueryを入れたくてpublic内のindex.htmlをいじっていたのですが、中々上手く導入いかずタグら辺をころころいじっていたら

Parse error:syntax errorというエラーに遭遇。

本来はphpでみるタイピングミスの際に吐かれるエラーみたいです。

どうやら、index.html内のや

http://src/jquery.3.3.1.jsの上に

持ってきてしまい、タグを読み込めなくなったのが原因みたいです。

jqueryを中々読み込めないからとむやみにタグを動かすと思わぬエラーに遭遇するので、これからjquery系を入れようとする人は

上記のことを意識しながらjqueryやzepto.jsを入れてみてください。

 

asaba 著者:asaba

FileReaderAPIの使い方

FileReaderは、自分の写真やギャラリーにアクセスしてその画像を取得することができるオブジェクトで、最近のアプリを作るのに必ずと言っていいほど必要になります。

今日は、そんなFileReaderを使い始めた人の目線で説明していきます。

まずは、コードの全貌から。。。

PhotoSelect(e) {

const file = e.target.files[0];

const fr = new FileReader();

fr.onload = () => {

const imgNode = this.refs.image; imgNode.src = fr.result;

};

fr.readAsDataURL(file);

}

上記のスクショがデバイスで画像をアップロードするコードのひな型になります。表示するだけならこれだけです。

まず、PhotoSelectでイベントハンドラを作ります。

その後にconst fileにてアップロードする画像の配列の大きさを決めています。target.files[0]なので、ここでは配列を一つと決めています。

その後に、const fr = new FileReader();でオブジェクトを生成します。

そして、onload関数で画像を取得しています。ちなみにリサイズや向きの変更もこの関数内で行います。

最後のreadDataURLでアップロードするファイルを決めてアップロードをします。

 

短めですが、これでテンプレートの説明は終わりです。

このままではスマホで撮った画像がそのままアップロードされるので、実用性はあまりありません。

しかし、onload内でプラグインを使ったりキャンバスオブジェクトを使ってjpgやpngを操作したりと自由にカスタマイズができるので

慣れてしまえばすぐに実装できてしまったりします。

しかし、reactのバージョンなどで使い方が変更されている、或いは使えなくなったプラグインも存在するので最初は結構苦労するかもしれないです。

やはり本実装の前に自分が開発しているnpmやreactのバージョンを確認をしてみるといいかもですね。

 

asaba 著者:asaba

【react】BrowserRouterを使って実機でビルドすると画面が描画されない件

今開発中のReactでreact-router-domライブラリのBrowser-routerでこけました。

どのような現象かというと、npm startで起動するとコンポーネントがちゃんと描画されるのですが、yarn run buildでビルドしてから

cordova run android(browser)で反映させてた時に真っ白になります。しかもログにエラー扱いで表示されないので解決するのに時間が

かかってしまいました。

解決方法はというと、まず下記のスクショを見てください。

importでHasuRouterを定義した後に、<BrowserRouter>で<switch>タグで囲んだ遷移のリストを囲んでいるのが分かります。

本来はこれを使って<switch>タグで<Route>タグのpathと一致した場合にそのページに遷移するというベーシックな

画面遷移ですが、実機だとうまく描画してくれなかったです。

どうしようかなと思いネットを漁っていたら見つかりました解決方法が見つかりました。(リンク先は忘れてしまいました、すみません。。)

v4に移行した後は、<HushRouter>で囲むとsuccessするよー!みたいなことが書いてあったことは覚えています。

とりあえず下記の画像のようにタグ名を変えてビルドー>無事コンポーネント描画され大成功!!です。

ものすごくざっくりですが、v3で慣れていた方はこれに限らず色々と書き方が変わっていたのでv4マイナーチェンジぶりにいらいらするかもしれないですね。

詳細をうまく伝えられなかったのは残念ですが、もう少しreactに詳しくなった後に説明したいと思います。

 

 

asaba 著者:asaba

【iosアプリ】これで必勝!?危険物乙四過去問アプリ

App storeを漁っていたら危険物乙四免許過去問のアプリが・・・

試しに見てみました。

中身は、結構簡略に作られており、冊子のような分厚くて持っていくのも面倒ではないのでカフェとかで勉強するにはよさそうですね。

広告が頻繁にでてきますが、質は間違いなく良いので試してみる価値はあると思います。

P.S.筆者が受けたときにこんなのがほしかったです。

asaba 著者:asaba

【create-react】Cannot read property ‘thisCompilation’ of undefined npm ERR!

npm install –save-dev webpackで最新のwebpackをインストールしてnpm run webpackしたところで

Cannot read property ‘thisCompilation’ of undefined npm ERR! というエラー出現

npmのバージョンとインストールしたwebpackのバージョンに開きがあったのが原因でした。

なので、一旦ダウンロードした新しいwebpackをnpm remove webpackでアンインストールして

一回り古い@3.11.0をインストールして解決。同じことではまっている方は今使っているnpmのバージョンを確認してみてください。

それでは!

 

asaba 著者:asaba

【create-react】入力した文字を出力する方法

またまたcreate-reactについてです。今回は、テキストボックスに入力した値を画面上に出力する方法です。

reactは、通常親コンポーネントから子コンポーネントに渡した値をthis.stateで更新しますが、render()内に書き込んでも値を更新することができます。

初級ですがreactを触ったばかりという方の力になれたらなと思います。

いきなりですが、まずconstractorで初期値”james”を定義します。その後にpropで子コンポーネントに渡しています。

その後に自由に値を入力することができるコードがこちらです。

スクショのようにonchangeでイベントを定義することで、name: e.target.valueでnameの中身jamesに続く値をsetstateで更新することができます。

アプリのログイン時にパスワードを入力するときに●が後追って表示されるけどあんな感じに使われるのかな?

イメージしやすいので簡単ですね。今日もこんな感じで少ないですが少しずつ情報を増やしてアウトプットしていきたいと思います。

reactは画面遷移の手段が面倒だったりes5とes6の書き方で大きく変わったりと最初のうちは手がかかりますが、決まり事を守って書いていけばプログラミング歴の浅い方でもクオリティの高いアプリを作ることができそうです。

良いUIフレームワークも揃っているので、こちらもぜひともマスターして使いこなしたいですね、それでは!

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で表示されるようになってしまいました。原因は調査中です。

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