著者アーカイブ 村上

村上 著者:村上

【Xcode】ビルド時の「[プロジェクト名] has conflicting provisioning settings.」エラーの対処法

今回はXcodeでアプリをビルドしようとしたときに遭遇したエラーについて。
長文エラーって、英語が苦手な身からしては読む気すら失せるので、それだけで億劫かつ憂鬱になります。

エラー全文はこちらから。

[プロジェクト名] has conflicting provisioning settings. [プロジェクト名] is automatically signed for development, but a conflicting code signing identity iPhone Distribution has been manually specified. Set the code signing identity value to “iPhone Developer” in the build settings editor, or switch to manual signing in the project editor.

ざっくり翻訳したところ、プロビジョニング設定が競合していることが問題とのことでした。
本来であれば、自動的に署名が行われている箇所に、手動で異なる設定が指定されているのだとか。
が、このあたりの設定を変更した記憶がないので、心当たりがありません…。

今回参考にさせていただいた記事はこちら。

iOS – iOSアプリ申請時のArchiveでconflicting provisioning settingsエラーが出る(56698)|Teratail
https://teratail.com/questions/56698

 

肝心な対処法ですが…「Automactically manage signing」のチェックを一度外し、再度チェックするだけ。
下の画像の下あたりにあるチェックボックスがそれです。

あとは、通常通りビルドを行ったところ、なんの問題もなくビルドが完了し、実機・Simulator のどちらでもアプリを実行することができました。
エラー文が長いので、最初に遭遇した時は身構えましたが、対処方法としてはなんてことはなかったですね。
チェックの解除・設定をおこなうと、プロビジョニングの設定がリセットされるので、今回のエラーが解消されるとのことでした。

以前も書いた気がしますが、とりあえず原因がわからないエラーに遭遇したら、丸々コピーして検索しましょう。

村上 著者:村上

【CSS】複数行の長い文章の文末を省略する方法

以前紹介した、長い文章の文末を省略して末尾に「…」を表示させる方法の複数行対応バージョンです。
前回のやり方では、一行のみの表示しかできないので、複数行で文末を表示させたいときはこちらの方法をお試しください。
ただし、ChromeSafari 限定ですので、その点はご注意ください。

今回参考にさせていただいた記事はこちら。

【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー(…)にする方法いろいろ – PSYENCE:MEDIA
https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/

ちなみに、以前投稿したCSSで文末を省略する方法はこちら。

【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法
https://cpoint-lab.co.jp/article/201805/【css】長い文章の文末を省略して末尾に「」を

 

コードはこちら。

<p>春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。</p>
#text{
    width: 300px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

overflow: hidden; を使うところは、前回と同じです。
-webkit-line-clamp を使うことで、指定した行に三点リーダー(クランプ)を追加することができます。
こちらのプロパティの値は、三点リーダを追加したい行数を指定します。
display: -webkit-box; は、-webkit-line-clamp と併用することにより、-webkit-line-clamp で指定した行数までを表示するようにしてくれます。

 

以上、複数行の行末尾を省略する方法でした。
上で紹介したサイトでは、ChromeSafari 以外のブラウザでも同じことを行う方法もありますので、IEでもこの表示にしたいときは参考にしてみてはいかがでしょうか。
ちなみに、少しトリッキーな方法とのことです。

村上 著者:村上

【jQuery】FastClickライブラリを特定の要素のみ無効にする方法【iOS】

Cordova開発をしているとお世話になるライブラリが、この「FastClick」だと思います。
これを使うことで、モバイルでアプリを実行したときのクリックの反応速度がかなり改善されます。
が、ものによっては、この FastClick ライブラリと競合を起こすライブラリもあるようで、今日、まさにその現象に遭遇しました。

 

競合を起こしたライブラリは、OpenstreetMap を使用した地図を表示できる「MapBox」です。
地図の表示の全てに影響するわけではなく、地図に表示したマップピンをクリックして、吹き出しを表示するロジックに影響が出ており、iOS でのみ吹き出しが表示できない状態でした。
クリックの動作をする箇所でのエラーだったので、最初は Click イベントを取得できていないことを疑いましたが、エラーログを見たところ、FastClick との競合が原因でした。

 

解決方法ですが、こちらのサイトを参考にしました。

JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくす|ITハット
http://ithat.me/2016/11/06/js-jquery-smartphone-click-event-300ms-delay-fastclick

サンプルに書くほどでもないのですが…対策方法は、FastClick を無効化したい aタグなどの要素に、needsclick というクラスを追加するだけです。

<a class="needsclick">FastClickを無効にしたい要素</a>

特定の要素のみに FastClick を適用する方法もありますが、現在開発中のシステムでは、無効化したい要素がここのみだったので、この方法を採用しました。
ちなみに、特定の要素のみに適用する方法は下記の通りです。

<div>
    <div class="fastclick">
        <!-- FastClickを適用する要素 -->
    </div>
    <div>
        <!-- FastClickを適用しない要素 -->
    </div>
</div>
$(function(){
    FastClick.attach($('.fastclick')[0]);
});

全てに FastClick を適用するときには、下記のように記述します。

$(function(){
    FastClick.attach(document.body);
});

対策としては以上です。

 

ということで、FastClick を一部無効化する方法でした。
ライブラリの競合はやはり厄介ですね。
最悪、FastClick を無効化しなければいけないのでは…と思ったので、解決策があって良かったです。

村上 著者:村上

【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】使用しているモバイル端末の種類を判定する方法

今回は、どの端末を使用しているかを判定する方法について。
ちなみに、AndroidiOS の判定しかしていません。

参考にさせていただいたサイトはこちらから。

使用してるブラウザを判定したい – 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の言語が英語なのが悪いのでは?とも思い、設定から変えたのですが、それも効果なしでした。

 

結局解決策は見つかりませんでした…。
時間を見つけてまた探したいと思います…。