著者:村上
【Cordova】iOSの「The GOOGLE_APP_ID either in the plist file ‘GoogleService-Info.plist’ or the one set in the customized options is invalid.」エラーの対処法
タイトルが長くてすみません。
今回は、Cordovaで開発中のアプリが、Simulator・実機問わず、急に実行時に落ちる様になってしまったので、その対処法についてです。
ちなみに、エラー全文はこちらです。
The GOOGLE_APP_ID either in the plist file ‘GoogleService-Info.plist’ or the one set in the customized options is invalid. If you are using the plist file, use the iOS version of bundle identifier to download the file, and do not manually edit the GOOGLE_APP_ID. You may change your app’s bundle identifier to ‘(null)’. Or you can download a new configuration file that matches your bundle identifier from https://console.firebase.google.com/ and replace the current one.
凄く長いので、読むのも一苦労ですが、Google翻訳にかけてみたところ、「‘GoogleService-Info.plist’またはカスタマイズされたオプションに設定されているGOOGLE_APP_IDは無効です。」とのこと。
エラー文の中にもある「GoogleService-Info.plist」が何らかの理由で壊れていることが原因らしいです。
なお、今回参考にした投稿はこちら。
iOS : invalid GOOGLE_APP_ID in GoogleService-Info.plist or set in the customized options #308 − fechanique/cordova-plugin-fcm
https://github.com/fechanique/cordova-plugin-fcm/issues/308
今回のエラーと全く同じ質問でした。
どうやら「GoogleService-Info.plist」ファイルは壊れやすいようです。
対処法は至って簡単です。
私の環境では、platforms/ios/[プロジェクト名]/Resources/Resources にある GoogleService-Info.plist が壊れていたことが原因だったため、その一つ上のディレクトリの platforms/ios/[プロジェクト名]/Resources/ にある「GoogleService-Info.plist」をコピーするだけでした。
なお、すでにファイルが有る場合は上書きします。
あとは、通常通り実行すれば、問題なく起動・動作しました。
これで一件落着です。
以上、iOSの実機でアプリが実行できなかったときの対処法でした。
とりあえず、わからないエラーは丸々コピーして、Googleなどで検索しましょう。
大概の投稿者は、投稿記事にエラー文を載せているので、2〜3記事も見れば、解決策がヒットするはずです。
著者:村上
【JavaScript】使用しているモバイル端末の種類を判定する方法
今回は、どの端末を使用しているかを判定する方法について。
ちなみに、Android か iOS の判定しかしていません。
参考にさせていただいたサイトはこちらから。
使用してるブラウザを判定したい – Qiita
https://qiita.com/sakuraya/items/33f93e19438d0694a91d
コードはこちら。
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf("android") != -1){
// Android の時の処理
}
if ((userAgent.indexOf("iphone") != -1)||(agent.indexOf("ipad") != -1)){
// iOS（iPhone、iPad）の時の処理
}
navigator.userAgent でユーザーエージェントを取得します。
そして、取得できた結果は .toLowerCase() メソッドを使って全て小文字に変換します。
で、.indexOf() メソッドで、指定された値が最初に現れたインデックスを取得します。
なお .indexOf() メソッドは、指定した値がなかった場合、-1 を返します。
あとは、Android、iOSごとに行いたい処理を ifで分岐した先に記述すればOKです。
思っていたよりも簡単ですね！
以上、使用しているデバイス端末の種類を判定する方法でした。
ちなみに、私はこちらをアプリのアップデートを促す際の処理で使っています。
もし、インストールされているアプリが最新のバージョンよりも古かったら、端末を判定し、Google Play もしくは App Store のそれぞれのページに遷移させています。
使っているのはその箇所のみですね。
端末ごとに分けなければいけない処理は意外と少なく、この程度で済むようです。
なお、参考にさせていただいた記事では、ブラウザの判定も紹介されています。
今のところ、ブラウザで分け無ければいけない処理はありませんが、機会があったらこちらも参考にさせていただきたいと思います。
著者:村上
【Cordova】端末にインストールされたアプリのバージョンを確認する方法
以前、JavaScriptでストアに公開されたアプリのバージョンを取得する方法について投稿しましたが、今回はアプリ自体のバージョンを確認する方法です。
これらを組み合わせれば、端末にインストールされているアプリのバージョンが、最新なのかどうかをチェックすることができます。
使うプラグインはこちら。
GitHub – whiteoctober/cordova-plugin-app-version: Cordova plugin to return the version number of the current app
https://github.com/whiteoctober/cordova-plugin-app-version
Cordova AppVersion plugin というプラグインです。
で、以前のストアに公開済みのアプリのバージョンを取得する方法がこちら。
【JavaScript】App Storeに公開済みのアプリのバージョンを取得する方法
https://cpoint-lab.co.jp/article/201804/【javascript】app-storeに公開済みのアプリのバージョンを取得/
さて、プラグインの使い方ですが、まず下記のコマンドを、コマンドプロンプトやiTermなどのターミナルアプリで実行し、プラグインをインストールします。
cordova plugin add cordova-plugin-app-version
インストール後は、下記のコードを、アプリのバージョンを取得したいタイミングで実行します。
cordova.getAppVersion.getVersionNumber(function (version) {
// アプリのバージョンチェック処理を記述
}, function(error){
// エラー時の処理
});
なお、私は下記のようにプログラムしました。
$.ajax({
url: 'https://itunes.apple.com/lookup?id=[iOSのアプリID]',
method: 'GET',
dataType: 'jsonp',
success: function(data, textStatus, xhr) {
var storeVer = data.results[0].version;
cordova.getAppVersion.getVersionNumber(function(appVer) {
if(appVer != storeVer){
// アプリのバージョンが最新でなかった時の処理
} else {
// アプリが最新バージョンだった時の処理
}
}, function(error){
// アプリのバージョンが取得できなかった時の処理
});
}, error: function(xhr, textStatus, error){
// ストアのアプリバージョンが取得できなかった時の処理
}
});
で、バージョンが一致しない＝アプリが最新ではないと判断し、アップデートを促すようにしています。
以上、アプリのバージョンを確認する方法でした。
Google Playのアプリのバージョンが取得できないのがネックですが、そこは Android と iOSのバージョンを合わせて、かつほぼ同じタイミングでアプリを更新するようにしたので、何とかなりました。
ということで、Cordovaアプリを開発中の方は、是非参考にしていただければ幸いです。
著者:村上
【Git】よく使うGitコマンドまとめ【初心者向け】
昨日の記事に引き続き、今日もGitについてです。
万一、SourceTreeが固まったときに、コマンド上で基礎的な操作ができるように押さえておきたいコマンドだけをリストアップしました。
とりあえず、ここだけ押さえておけば何とかなる…はず。
なお、今回はこちらの記事を参考にさせていただきました。
Gitコマンド早見表 – Qiita
https://qiita.com/kohga/items/dccf135b0af395f69144
| Gitコマンド | コマンドの内容 |
| git pull | リモートから変更を取得する |
| git branch -a | 全てのブランチを確認する |
| git checkout [ブランチ名] | 指定したブランチに切り替える |
| git branch -b [ブランチ名] | ブランチを作成して切り替える |
個人的に抑えておきたいコマンドは上記のとおりです。
なお、コミットに関しては、現在開発しているシステムの関係上、変更したファイル全て、で指定するととんでもないことになるので、SourceTree上で行うようにしています。
あとは、どうしても二進も三進もいかなくなった時に、git clean コマンドで、未コミットのファイルを削除したりもしますが、これはそんなに使わないですね。
以上、私的抑えておきたいGitコマンドでした。
徐々にでも、コマンドでのGit操作にも慣れていきたいと思います。
著者:村上
【Windows】SourceTreeが頻繁に固まるときの対処法
ソースコードの管理でSourceTreeを使用しているのですが、これがよくに固まって「応答なし」を頻発することがあります。
で、先日あまりに固まり過ぎたので、ようやく対処法がないか調べてみました。
見つかった対処法はこちら。
Windows版SourceTreeが遅いときのチェックポイント – foohogehoge’s blog
http://foohogehoge.hatenablog.com/entry/2016/04/23/125909
投稿によると、表示しているブックマーク数を減らすといいのだとか。
なんでも、自動でリモートの更新を取得しない設定にしておいても、ブックマークの更新はチェックしているのだそうです。
そのため、現在操作しないブックマークは消しておきましょう。
私の場合は、やけに遅かったのがその日のみで、その後は特に問題もなく動いています。
が、他の対処法として、以下のようなものもあるそうです。
Windows10 64bit でgitBashやSourceTreeがやたら遅い 重い – Qiita
https://qiita.com/sin_w/items/9ffbc30a39155f52cc54
こちらはデバイスマネージャーから特定のドライバーを無効にしています。
投稿者によると、「サクサク動くようになりました」とのことだったので、上の方法で解決しなかった人はこちらを試してみるのもいいかもしれませんね。
私も今度SourceTreeが極端に重くなったら、こちらの方法を実行してみたいと思います。
が、個人的にはそろそろgitコマンドでの操作を覚えるべきかな…とも考えています。
ついついGUIの方が楽なのでこちらを使ってしまいますが、以前少し使ったときに、コマンドの方が早く感じたので、スピードを重視するならコマンドを使うべきですね。
…すぐには無理かもしれませんが、ボチボチ頑張りたいと思います。
著者:村上
【JavaScript】jQueryなしでappend()と同じことを実行する
DOM操作をするときに jQuery の append() を使うことが多いのですが、場合によっては jQuery が使用できないことがあるかと思います。
なので、今回はタイトル通り、jQueryなしで append() と同じことを行う方法についてです。
参考にさせていただいた記事はこちら。
innerHTML より insertAdjacentHTML を使う – Qiita
https://qiita.com/amamamaou/items/624c22adec32515e863b
実際のコードはこちら。
今回使うメソッドは、insertAdjacentHTML() というものです。
<div id="parent">
<p>p要素 その1</p>
</div>
// id=parendの子要素の最下部に要素を追加 append()
var element = document.getElementById("parent");
element.insertAdjacentHTML("beforeend", "<p>p要素 その2</p>");
上記のコードを実行すると、ID が parent の要素の子要素の一番下に、指定したp要素が追加されます。
動作としては、jQuery の append() と全く一緒です。
ちなみに、insertAdjacentHTML() メソッドの第一引数を変更することで、append() 以外の動作を行わせることができます。
簡単に表でまとめてみました。
| jQuery | insertAdjacentHTML() |
| append() | “beforeend” |
| prepend() | “afterbegin” |
| before() | “beforebegin” |
| after() | “afterend” |
jQuery で行えるDOM要素の挿入は、こちらの方法でも問題なくできるようです。
なお、もしHTML文字列ではなく、HTML要素を指定したい場合には、insertAdjacentElement() が利用できます。
第一引数は、insertAdjacentHTML() と全く同じで、追加したい要素を指定する第二引数のみが違います。
こちらは、実装しているコードで使い分けてください。
ということで、jQueryなしで append() などと同じことを実行する方法でした。
システムによっては、jQueryを使えないこともあるかと思うので、この方法は覚えておきたいと思います。
著者:村上
【Mac】Simulator使用時にMacのキーボードから＠が入力できない【未解決】
今回は、Macのキーボード入力についてです。
タイトル通りですが、何故かSimulatorで「アットマーク＠」が入力できません。
別に「アットマーク」と日本語入力して、それを変換すれば入力できないこともないのですが…流石に手間すぎるので、解決策を模索している最中です。
ちなみに、タイトルにあるとおり、まだ解決できていません。
解決には至りませんでしたが、今回参考にさせていただいた記事はこちら。
Macで@が打てない＆JISキーボードがUSキーボードと認識される現象の原因と解決策
https://fiv-nd.com/mac-keyboard-usjis.html
こちらは Simulator ではなく、通常の入力時にアットマークが入力できないときの対処法でした。
ちなみに、こちらの原因は、キーボードが JIS ではなく US で認識されていることが原因とのことでした。
私の環境でも確認したのですが、ご覧の通り、
キーボードの配列はJISとなっていました。
キーボードの設定は問題ないようでしたね。
もしかしたら、Simulatorの言語が英語なのが悪いのでは？とも思い、設定から変えたのですが、それも効果なしでした。
結局解決策は見つかりませんでした…。
時間を見つけてまた探したいと思います…。
著者:村上
【Windows】PDFのデータをAdobeソフトなしで2in1で印刷する方法
今日困ったことを備忘録としてまとめ。
やりたいことは、Excelから変換したPDFを2 in 1で印刷する方法についてです。
Excelでの印刷なら、やり方は分かるのですが、そのExcelデータはページが複数に分かれており、以前複数ページにまたがって選択・印刷をしたところ、変な空ページができたのでなるべく避けたいところ。
そしてPDFで印刷する方法を調べても「Adobe ○○」を使って～という方法ばかりがヒットし…。
で、やっとたどり着いた方法がこちら。
まず、印刷したいPDFを Google Chromeで開きます。
そして、下の画像のような印刷メニューを開きます。
なお、印刷ボタンは、画面の右上辺りにあります。
そうしたら、一番下の方にある「システムダイアログを使用して印刷」をクリックします。
そうすると、見慣れたウィンドウが表示されるので、「詳細設定」をクリック。
そして、ページレイアウトから「2 in 1」を選択し、それ以外の設定もあれば適宜変更して、エンターキーを押せば設定完了です！
ウィンドウが大きすぎるようで下の方が隠れてしまったのですが、何故かサイズを変更できず…。
まあ、設定できたから良しとします。
あとは、通常通り印刷ボタンを押すだけでOKです。
ただPDFを印刷するだけなのに、2面付になった途端に難易度が若干上がりました。
今後も使う機会がありそうなので、これは覚えておきたいですね。
著者:村上
【JavaScript】長い文章の文末を省略して末尾に「…」を表示させる方法
昨日の記事とほぼ同じタイトルですが、今回はCSSではなくJavaScriptで文章の文末を省略して末尾に三点リーダーを追加する方法です。
こちらは範囲からはみ出たかどうかではなく、文字数で判断をしています。
ちなみに、昨日の記事はこちらから。
【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法
https://cpoint-lab.co.jp/article/201805/【css】長い文章の文末を省略して末尾に「」を/
こちらの記事では、CSSで指定した範囲からはみ出した文章の文末を省略しています。
複数行の表示には対応しておらず、省略後は1行の表示になります。
コードはこちら。
<p id="text"></p>
var text = "春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。";
var slicetext = text.length > 20 ? (text).slice(0,20)+"…" : text;
document.getElementById('text').innerHTML = slicetext;
文字数をカウントし、20文字以上だったら、slice メソッドを使って21文字目からをカットして、三点リーダーを追加しています。
そして、pタグの中に、そのカット後の文章を表示しています。
行っている処理はこれだけです！
JavaScriptで文末を省略する方法でした。
好みにもよりますが、明確に○文字以下で表示することが決まっている場合や、表示する範囲が不変で、かつ複数行で表示したいときなどに使えそうです。
1行だけ表示するなら、表示範囲も可変が可能なCSSで指定する方がよさそう。
このあたりは実装する内容によって使い分けてください。
著者:村上
【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法
よく使うので、コピー＆ペーストしやすいようにまとめ。
タイトル通り、改行されるような長い文章を自動で省略して、末尾に三点リーダーを追加する方法です。
参考にさせていただいたサイトはこちらから。
CSSのみで文末をカットし、…を代入する方法｜スターフィールド株式会社
https://sterfield.co.jp/designer/cssのみで文末をカットし、-を代入する方法/
早速紹介しますが、コードはこちら。
#text_area {
width: 400px;
}
.text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div id="text_area">
<p class="text">春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
</div>
text_area ID で、テキストの表示幅を指定しています。ここで指定した横幅を超えた分の文章が省略され、末尾に「…（三点リーダー）」が表示されます。
そして、text Class で指定されている text-overflow で、文字が指定した範囲から超えた場合の表示方法を指定しています。
今回は、ellipsis が指定されているので、範囲からはみ出た文章は切り取られ、切り取られた部分に省略記号「…」が表示されます。
white-space は、半角スペース・タブ・改行の表示の仕方を指定する際に使用するプロパティです。
今回指定した nowrap では、連続する半角スペース・タブ・改行を、1つの半角スペースとして表示する、という指定になっています。
これだけ見ると、もしかしてこのプロパティを省略されても表示されるのでは？と思ったのですが、この white-space プロパティがないと、文章の省略は無効化されました。
どれも必須の項目のようなので、自己判断で省略したりしないように注意してください。
ちなみに、今回の方法では、省略後の文章は1行で表示されます。
確か複数行の方法もあったように思いますが…気になる方は、調べてみてください。
機会があったら、このブログでも紹介するかもしれません。
以上、長い文章を省略して、末尾に三点リーダーを追加する方法でした。
スマートフォンなど、表示できる範囲が少ないときなどにおすすめのCSSですね。
もしくは PCでも、表示項目が多い表などでも活用できそうです。
お好みや要望に応じて使ってみてください。