カテゴリーアーカイブ 未分類

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使いたい!という方は是非試してみてください、それでは。

  • この記事いいね! (0)
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のバージョンを確認をしてみるといいかもですね。

 

  • この記事いいね! (0)
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に詳しくなった後に説明したいと思います。

 

 

  • この記事いいね! (0)
asaba 著者:asaba

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

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

試しに見てみました。

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

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

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

  • この記事いいね! (0)
著者:杉浦

画像を扱う多機能なCLIツールimagemagick

 imagemagickは画像を扱うソフトです。imagemagickの特長は多彩な動作と多様な対応形式にあります。以下は最近使ったコードです。

magick convert -density 200 *.pdf -set filename:src %t %[filename:src].png //pdfファイルをpngファイルへ変換
magick convert -crop 128x128 x.jpg output.jpg//x.jpgを128x128サイズで切り分けてoutput-n.jpgへ出力
magick convert output-0.jpg -resize 256x256 ..\output\out.jpg//output-0.jpgを256x256サイズへ拡大してoutput以下へ保存
magick convert -size 128x128 -gravity center -font "Meiryo-&-Meiryo-Italic-&-Meiryo-UI-&-Meiryo-UI-Italic" -pointsize 60 label:%%i -transparent white %%i.png//batchでiをイテレーターにループ。中央に数字のiを描いた128x128の画像を生成
magick convert base.png %%i.png -gravity center -compose over -composite icon_%%i.svg//base.pngを背景にして↑で作った画像を重ね合わせ、svg形式で出力
magick convert -append 137.715136_*.gif output.gif//縦に結合
magick convert +append output*.gif all.gif//横に結合
magick convert +adjoin ss.gif pic.gif//gifをフレームごとに分解

 もちろん、この他にも様々なことができます。
 大変便利なimagemagickですが、ベクトル形式の画像の扱いは苦手です。imagemagickは知る限りbitのmapとして画像を扱います。このせいかsvgを生成する際もドットをラッピングするという手法を取っており、拡大してもジャギーが出ないというベクトル画像の利点が死にやすいです。

  • この記事いいね! (0)
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のバージョンを確認してみてください。

それでは!

 

  • この記事いいね! (0)
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などのライフサイクルが分かってきたので、複数のコンポーネントで値を渡していじれるようになれば少しは楽に開発できるかなと感じました。

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

 

 

 

 

  • この記事いいね! (0)
著者:杉浦

タスク管理ツールtrelloとその拡張

 trelloは視覚的なタスク管理ツールです。画面の様にボード、リスト、カードを増やし、タスクが完了したら画面からどかす、という動作を繰り返すのが基本の使い方になります。
増やす、どかすはマウスのドラッグや簡単なキーボード操作ででき、扱いやすいです。

 このままでも便利なのですが、多くのカードを扱おうとするとデフォルトの設定では問題があります。上の画像はリストが折り返されていますが、デフォルトでは折り返されておらず、リストを増やすと延々と横に伸びていきます。List Layouts for Trelloは上の画像の様な折り返しを追加するChrome拡張ツールです。主にflex、flex-wrap、overflowあたりのStyleを自動で弄ってくれます。
 また、なにかからデータを移行する際には視覚的にわかりやすいことよりも簡単に入力できる事が優先されます。ここでいう移行はcsvからexcelシートに移すぐらいの気楽な移行です。Trello DevelopersにはTrelloのAPIに関する情報が詰まっています。もちろんこのAPIからカードの作成もできます。
 APIの使い方はリファレンスが非常に親切です。
 前準備としてhttps://trello.com/1/appKey/generateでキー、https://trello.com/1/authorize?key=<前述のキー>&name=&expiration=never&response_type=token&scope=read,writeでトークンを取得します。
 GETにkey=<取得したKey>&token=<取得したToken>を追加してリファレンスの通り使うだけです。このリファレンスは次の画像の様にパラメータを入れた場合、投げるべきコードを自動で生成してくれます。数行で済むAPIならではですがとても使いやすいです。

 このリファレンスを参考に文字列生成、パラメータあてはめ、送信の繰り返し処理を書くだけで簡単にデータの移行が出来ました。

  • この記事いいね! (0)
asaba 著者:asaba

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

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

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

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

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

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

このconfig.xmlを

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

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

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

 

 

 

  • この記事いいね! (0)
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回回しているので、回を追うごとに値は減っていき最終的には値がない配列が出力されることになります。

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

 

 

  • この記事いいね! (0)