著者:asaba
【souretree】ソースツリーの認証が失敗してプッシュできなくなった※【解決】
久々に別のアプリに変更点をプッシュしようとしたところエラーに遭遇。
fatal: Authentication failed for ‘https://○○○○corporation.backlog.jp/git/アプリ名/アプリ名.git/’
問題となっているURL
https://○○○○corporation.backlog.jp/git/アプリ名/アプリ名.git
エラーの内訳：不正なユーザー名とパスワードを使っている
対処法
①ツールを開く
————————-
②オプションを選択
————————-
③Gitを選択
————————-
④Gitバージョンの「System」を選択
————————-
⑤再度プッシュ。
エラーがおきなければ成功です。
恐らくバージョン更新した際に問われたソースツリーのユーザー名と
パスワードが間違っていたために起きたのだと思われます。
最初にbacklogのユーザ名・パスワードを入力してしまったのがまずかった。
ソースツリーはまた別にアカウントを持っていたので
そちらが正解だったみたいです。
この問題に関しては無駄に厳しくなっており、一度間違えるとそれ
以降問いてくれないのが難儀なところ。
一回間違えただけでここまで修正を強いられるのは
改善してほしいところです。
参考にさせていただいたサイト↓
著者:asaba
【webpack】webpack3でUglifyjsWebpackPluginを使う方法
UglifyjsWebpackPluginとは、webpackに自動でjavascriptを圧縮させるプラグインです。
公式によるとbundleでまとめたjavascriptを、更に改行や不要なコード削除を行うことで
読み込み速度を改善させることができるみたいですね。
webpack4ではwebpack.config.jsで以下のようにして使うことが出来ます。
ｃ
//webpack.config.js
<pre>const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: { minimizer: [new UglifyJsPlugin()],
},
}</pre>
webpack3の場合はoptimizationで書くことが出来ないので
npmで必要なプラグインをダウンロードした後に以下のように
定義をします。
//webpack.config.js
const webpack = require("webpack");
plugins: [new webpack.optimize.UglifyJsPlugin(),],
著者:asaba
【react】Loading chunk failedでdynamic importができなくなったときの対処法
コードを分割して初回読み込みをチューニングする手段の中の一つに
dynamic importというものがあります。
こちらは、あらかじめ読み込みたいファイルのみを読み込み、ボタンを押したときや
render時などの特定のタイミングで別のファイルを読み込ませるテクニックの一つです。
先に主要部分のファイルだけ読み込んでおけばユーザーを待たせることなく
、後でボタンをタップなどのアクションに合わせてコンポーネント
を出せばいいだけなのでかなりお手軽だなと思い実装。
ところが関数を作ってビルドをするとLoading chunk 0 failedで読み込みエラー発生。
原因は、app.jsのRouteで作成漏れでした。
Dynamic Importをするときは、必ず
</pre>
import Test from './test';
<HashRouter>
<Switch>
<Route exact path="/test" component={Test} />
</Switch>
</HashRouter>
<pre>
と定義する必要がありました。
後は主要ファイルの中で切り離したいコンポーネントを
以下のように組み立ててコンポーネントとして差し込めば
完成です。
</pre>
main.js
render() {
const SubConponent = Loadable({
loader: () => import('./subcomponent'),
loading: Loading,
});
return(
<SubConponent/>
);
}
<pre>
著者:asaba
【create-react】npmのバージョンが古い状態でwebpackをインストールするとエラーが起きて読み込み終了する
webpackを更新したくてnpm install –save-dev webpackで最新のwebpackをインストールすることに。
npm run webpackしたところで
Cannot read property ‘thisCompilation’ of undefined npm ERR! というエラー出現
原因はnpmのバージョンとインストールしたwebpackのバージョンのズレでした。
npmが古すぎるとwebpack読み込み時にエラーが起きて読み込み中断してしまう
みたいです。
解決方法は、一旦ダウンロードした新しいwebpackをnpm remove webpackで
アンインストール→その後バージョン@3.11.0をインストール。赤文字でERRと出なければ解決です！
同じことではまっている方は今使っているnpmのバージョンを確認してみてください。
著者:asaba
【android】古いandroidStudioを消したらマニフェストが狂った
新しいandroidStudioに触れて早三か月となったある時、Cドライブが圧迫
し始めていることに気づいた。
要らないファイルを少しずつ消していたところ、もう使っていない
androidStudioのファイルを発見。
2.0と3.0だったのでもう使わないからいいやと思い軽い気持ちで削除。
ここまでは良かった。ところが翌日になって現行のandroidStudioを
立ち上げるとこんなエラーが起きていた。
<span style="color: #800000;"><strong>The minSdk version should not be declared in the android manifest file. You can move the version from the manifest to the defaultConfig in the build.gradle file</strong></span>
マニフェストにminSDKのバージョンを書くなとのこと。なん・・・だと・・・。
つい昨日までマニフェストに明記していたはずのminSDKが今のバージョンで
読み込めなくなっていた。
原因は消したandroidStudioファイルの中のキャッシュも一緒に
消したためだと思われる。
書いておいたminSDKのバージョンを消すと正常にビルドできた。
これ以降はandroidstudioを復元しなくても普通に動いてくれたので
このまま明記しなくても良さそう。
著者:asaba
【html5】Resource Hintsを使ってページを高速で読み込む
Resource Hintsとは、読み込みたいファイル(jsとかcss)を予め先に読ませておくことで
ページの高速化を計ることができるプロパティです。
dns-prefetch、preconnect、prefetch、prerenderと全部で四つあるのですが
今回自分が使ったのはdns-prefetchとprefetchの二つ。
ではどんな役割を担っているかというと、まずは
【dns-prefetch】
こちらは、外部ファイルを読み込みたい時に用いられます。
</pre> <link rel="prefetch" type="text/css" href="css/jqMini.css" /> <pre>
gitなどで欲しいプラグインがあったときにhref=http://git○○とかで定義するアレのこと。
このurlからipアドレスを検索する時間を削減することで、ページの高速化が
見込めます。
続いては
【prefetch】
こちらはjsやcssを先に読んでおいてキャッシュをする役割を持っています。
</pre> <link rel='dns-prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' /> <pre>
アプリ起動時に最初にprefetchで格納したcssを取り出すことで、
ページのロード時間を軽減することが出来ます。
クライアント側でできることは以上。
developerToolでscriptの読み込みに時間がかかっていたのが気がかりで
使ってみたのですが、初回以降の読み込みで分かる程度の速さに
調整することができました。
ただ、機種によってはまちまちでしたのでまだ改善の余地
ありといったところです。
著者:asaba
【next.js】next.jsの環境構築方法
今回はreactのレンダリングを高速化してくれるというフレームワーク、next.js
についてです。
reactでは、通常ではscriptはクライアント側で読み込むのですが、
これが大規模になってくるとクライアント側だけでは処理が重く
パフォーマンスに悪影響が出てしまいます。
そんな中開発されたnext.jsは、reactのscriptをサーバーサイドで読み込むことができるため
レンダリングでの早いレスポンスを期待することができます。
今回はそのnext.jsの開発環境の構築方法を記載します。
（結構簡単でした。）
構築方法
①まずcreate-react-app sampleでreactを作ります。
②cd sampleで移動
③npm i nextでインストールをします。npmのバージョンは
6.13.0でした。
④npm iで再度インストールをします。
まず、sampleフォルダの中のpackage.jsonを開いて
コマンドが打てるようにスクリプト群の一番下に”dev” : “next”を追加します。
</pre>
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "next"
},
<pre>
⑤最後にnpm run devをしてttp://localhost:3000/でローカル
サーバーにアクセスをします。
画面のような文字が表示されたら環境構築成功になります。
以上でnext.jsの環境構築は終了です。
ちょっとしか書いていないので使用感は分かりませんが、
使いにくいという印象はなかったです。
reactを使ったことのある方はそこまで苦労しなそう・・・。
ただ、一つ感じたのが、reactでのcssの書き方で保存をしていると
cannot resolveになってしまうので、もう完成してしまったアプリを
next.jsに合わせて書き直すのは骨が折れそうだなと思いました。
また、npm i とuninstallを繰り返していてもwebpackでライブラリが欠落したり
してしまうのでそちらの考慮しないと書き直しは怖くてできないです。
著者:asaba
【npm】packeage.jsonの手動で弄った時に気を付けること
npmのパッケージやコマンドを新しく追加したい時にpackage.jsonを
よくいじると思います。ところが、jsファイルと違って誤字に寛容でないので
少しのタイポも見逃してくれない厳しい仕様となっています。
例えば、このエラー↓
npm ERR! code EJSONPARSE
npm ERR! file C:\Users\swift0910\Documents\tutorial\package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token } in JSON at position 2367 while parsing near '....js --env=jsdom",
npm ERR! JSON.parse },
npm ERR! JSON.parse "jest": {
npm ERR! JSON.parse "...'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
よく見ると、4行目でUnexpected tokenでカッコの前後に不適切な文字列が
混入しているよ～って言われています。
で、package.jsonを見ると、
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
},
4行目の最後で「,」を打っているのが分かります。これは、新しい
コマンドを試したときに”test”: “node scripts/test.js –env=jsdom”の後ろの
「,」を消し忘れていたのが原因ということになります。
これを消して保存することで無事ビルドさせることができました。
以上でpackage.jsonのエラーは解決となります。タイピングミス気を付けましょうネ！
著者:asaba
【cordova】scriptタグを高速で読み込む方法
アプリの高速化を計るため、devToolでどこが遅いか調べていたところ、
ログインページ辺りでjavascriptの読み込みがやや遅くなっていたので
performancesタブで詳細を取ってみました。するとやはり最初にscriptタグを
読んでいた辺りが怪しかったのでindex.htmlの中のscriptタグの
読み込みを少し修正。。。
修正箇所は、”text/javascript” src=”cordova.js”async>
の赤文字の部分。
text/javascriptの部分を抜き取ります。
</pre> <script src="cordova.js"async></script> <pre>
HTML5では、scriptタグのtypeのデフォルト値が 最初から”text/javascript” に
設定されており、これが付いている状態で読み込むと、同じ属性”text/javascript” を
二回読むことになってしまい読み込み時間にラグが生まれるという訳です。
ここは省略して–script src=”cordova.js”async</script>–のようにすることで
速度の改善を見込むことができます。
正しくはこんな感じ↓
</pre> <script src="cordova.js"async></script> <pre>
scriptタグが多く設定している時ほど威力を体感できるのではないでしょうか。
後は古い機種（android5.0とか）でも感度良さげですね。
著者:asaba
【cordova】FCMPrugin is not foundの解決法
cordovaでプラグインを入れ直した直後に
ビルドしたところ、FCMPrugin is not foundのエラーに遭遇。
デバッグした結果、この中で一つ当てはまった場合に起きるエラー
のようです。
①FCMPruginが正常に読み込まれていない
②tokenが無効な値
③onDeviceReady内で処理をしていない
④FCMPruginが他のプラグインとせり合いを起こしている
自分の場合は④で、FCMPruginのバージョンが古かったため
他のfirebaseのプラグインと役割が被っていたのが原因でした。
④に関してはFCMPruginのバージョンを下げて追加
することで解決させることができます。
それでも解決しない場合は、platformsを削除、そのあとfirebaseに関わるプラグインを
全て消して再び追加、最後にplatformsを追加
をしてください。
以上がFCMPrugin is not foundの解決方法になります。
plugin関係は依存度の理解とかプラグインのエラーの原因と
なったファイルを探す探索力が必要になってくるのですが、
まだまだそこが理解できていない部分があるので
慣れておく必要があると感じました。