著者:村上
【CSS】短いコードで実装できるCSS小技まとめ
とても便利そうなサイトの記事を見つけたので、備忘録としてまとめ。
短いコードで実装できる CSS の小技まとめです。
見つけた記事はこちら。
【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス
https://www.webcreatorbox.com/tech/css-tips-3
ぬるぬる動くスムーズスクロールの実装方法や、Webフォントの表示遅延を回避する方法などがまとめられています。
以前紹介した CSS で計算式を扱える calc() や、画像をトリミングできる object-fit プロパティも紹介されていました。
確かに、上記 2つには大変お世話になりました…！
記事はこちらから。
【CSS】スタイルシート内で計算式が使えるcalc()が便利
【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利
で、紹介した記事で個人的に面白いと思ったのが、テキストを円形に回り込ませる方法です。
円形要素、例えば円形の写真に対して shape-outside: circle(); を指定すると、画像の周りにテキストを丸く回り込ませることができるそうです。
サンプルは記事に載っているので、そちらをご参考にしてください。
なお、画像自体が円形である必要はなく、border-radius プロパティで円形したものでもOKみたいです。
以上、CSS の小技集についてのおすすめ記事のご紹介でした。
著者:村上
【Xcode】「No space left on device Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/dsymutil failed with exit code 1」エラーの対処法
今回は、Xcode でアプリを実行した際に遭遇したエラーについて。
ビルドは問題なく通ったので、いざ実機で実行しようとしたところ、タイトルにあるようなエラーが発生しました。
エラー全文はこちら。
IO failure on output stream: No space left on device Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/dsymutil failed with exit code 1
で、エラーメッセージを検索したところ、ヒットした記事がこちら。
Xcode「fatal error: error in backend: IO failure on output stream」への対処｜MaryCore
https://marycore.jp/prog/xcode/clang-file-errors/
こちらの記事によると、ハードディスクの容量が足りなくなっているため、ディスクエラーなどが起こっているとのことでした。
そのため、不要なファイルなどを削除して、ゴミ箱を空にし、念のため使用していないアプリなどを終了して実行したところ、問題なくビルドできました。
以上、アプリを実行できなかった時の対処法でした。
解決方法はとても簡単なのですが、エラーメッセージがちょっとわかりにくかったので、今後の自分のためにまとめました。
もし、誰かの参考になれば幸いです。
著者:村上
【Android】WebViewの動作が遅い・重い時の対処法
端末にもよるのですが Android の WebView の動きが悪かったので、その対処法について。
ただ、後述しますがメリット・デメリットがあるのでお気を付けください。
今回参考にさせていただいた記事はこちらから。
AndroidのWebViewが死ぬほど重い – やしのブログ
http://vayacico.hatenablog.com/entry/2017/10/03/092603
対処法は、AndroidManifest.xml にて、WebView の Activity か application に対して、下記を追加するだけ！
android:hardwareAccelerated="true"
これを追加することで、ハードウェアアクセラレーション機能が有効になるそうです。
そうすると、Canvas などの描画の処理を GPU で実行するため、速度がアップするとのこと。
ただし、前述したとおりデメリットもあり、このハードウェアアクセラレーション機能は、通常よりもメモリを多く消費するのだとか。
そのため、動きが遅いと感じる Activity や WebView の Activity のみで有効にするなど、工夫が必要だそうです。
どんなアプリかにもよりますが、application タグで指定して、アプリすべてで有効にする、というのは控えたほうが良さそうな気がします。
なお、詳しくはこちらの記事が参考になります。
Yukiの枝折: ハードウェアアクセラレーションのメリットとデメリット
http://yuki312.blogspot.com/2011/12/blog-post_15.html
以上、Android の WebView の動きが遅い・重い時の対処法でした。
使用する場所は吟味したほうが良さそうではありますが、あまりにもページの動きが重い時は、まず実装を試してみると良いと思います。
著者:村上
【Android】AndroidStudioのエミュレータが起動しない時の対処法
今回はAndroid Studio で発生したエラーについて。
エミュレータでアプリの動作確認をすることになり、新しくエミュレータ端末を作成して実行しようとしたところ、エラーが発生してエミュレータが起動できませんでした。
エラーメッセージは「Emulator: Process finished with exit code 1」というものでした。
が、こちらを調べてもよく分からず…後輩君に助けを求めたところ、下記の記事を教えてもらいました。
VT-x を有効にしたく て 3 日程できなかったのだが、Windows が余計なお世話をしてた件｜ピックワールド（PIC World）
http://picworld.jp/2016/03/28/vt-x-を有効にしたく-て-3-日程できなかったのだが、Windows/
こちらの記事によると、VT-x を有効にしないとエミュレータを起動できないとのこと。
で、このVT-x を有効にするには Hyper-V を無効にすればいいとのこと。
こちらを無効にするには「Windows の機能の有効化または無効化」を開きます。
Windows のスタートメニューから検索すればヒットしますので、クリックして起動してください。
すると、下記のようなウィンドウが表示されるので、ここから Hyper-V という項目を探します。
あとは、これを無効にすればOKです。
これのチェックを外すと PC の再起動を促されますので、指示に従って再起動を行います。
以上で作業は完了です。
あとは、Android Studio でエミュレータを起動してみてください。
私の環境では、問題なく起動し、アプリを実行できました。
以上、Android Studio でエミュレータを起動できない時の対処法でした。
私だけだと、数日悩みそうだったので、後輩君のフォローはとても助かりました！
著者:村上
【Android】FCM導入時にFirebaseInstanceIdServiceがエラーになった時の対処法
Cordova アプリを開発中に遭遇した FCM のエラーについて。
ちょっとしたトラブルで、一度プラットフォームを削除し、cordova-plugin-fcm を再インストールしたところ、Android Studio でアプリを起動した際にエラーが発生しました。
なんでも、FirebaseInstanceIdService が廃止予定で、使用が非推奨になったためでした。
今回の修正で参考にさせていただいた記事はこちらから。
FirebaseInstanceIdServiceがDeprecatedになった件 – Qiita
https://qiita.com/keijumt/items/d45ea0da3dfa6284ad90
対処法としては、まず非推奨の FirebaseInstanceIdService を FirebaseMessagingService に置き換えます。
私の環境では、別のクラスに extends で継承されていたため、こちらを下記のように書き換えました。
public class MyFirebaseInstanceIDService extends FirebaseMessagingService {
...
}
次に、MyFirebaseInstanceIDService クラス内で、onTokenRefresh() をオーバーライドしていたのですが、FirebaseMessagingService では、この関数のかわりに onNewToken() が用意されているので、こちらも変更します。
public class MyFirebaseInstanceIDService extends FirebaseMessagingService {
@Override
public void onNewToken(String old_token) {
...
}
}
さらに、onNewToken()（旧 onTokenRefresh()）内では、FirebaseInstanceId.getInstance().getToken() が使われていましたが、こちらも非推奨らしく、コードに打ち消し線が引かれてしまったため、併せて修正します。
と言っても、引数を追加して、try/catch で囲むだけなんですけどね。
修正後のコードは下記のとおりです。
String sender_id = [FCM の送信者ID（数字12桁）];
String refreshedToken = null;
try {
refreshedToken = FirebaseInstanceId.getInstance().getToken(sender_id, "FCM");
} catch (IOException e) {
e.printStackTrace();
}
修正は以上で完了です。
あとは、通常通り Build → Run を実行したところ、エラーも発生せず、問題なく起動できました。
ただ、その時は起動確認だけを行っただけなので、FCM の機能については、これから入念にチェックしたいと思います。
以上、FCM の FirebaseInstanceIdService がエラーになったときの対処法でした。
導入したプラグイン等については、定期的に関数の廃止などをした方が良さそうですね。
著者:村上
【Android Studio】アプリを実行する端末を変更する方法
今回はAndroid Studio でアプリを実行する際に、実行する対象の端末を変更する方法についてです。
Android Studio でアプリを実行するときに、下記のようなウィンドウが表示されると思います。
ここのウィンドウで、私は毎回実行端末を選ぶのが面倒で、ウィンドウ左下のチェックボタンにチェックを入れ、巨魁起動時以降は実行端末を選ばなくて済むようにしていました。
「use same selection for future launches」というチェックボックスです。
これを選択しておくと、以降のアプリ実行時に同じ端末を選んでくれます。
が、これを選択した後、実機ではなく、エミュレータで起動しようとしたところ、切り替え方法が分からなくなりました…。
試しに、接続していた端末をPCから抜いたのですが、その状態で実行しようとすると、デバイスが見つかりませんというようなメッセージが表示され、アプリが実行できず。
ということで、前置きが長くなりましたが、アプリの実行端末を変更する方法についてです。
今回参考にさせていただいた記事はこちらから。
起動しようとしたら No Target Device Found が出てきた｜せんべいって美味しいよね
http://clc.gonna.jp/2017/05/%E8%B5%B7%E5%8B%95%E3%81%97%E3%82%88%E3%81%86%E3%81%A8%E3%81%97%E3%81%9F%E3%82%89%E3%80%80no-target-device-found%E3%80%80%E3%81%8C%E5%87%BA%E3%81%A6%E3%81%8D%E3%81%9F/
方法と言ってもとても簡単で、まずメニューバーの「Run」から「Edit Configurations」をクリックします。
そうすると、下記のウィンドウが表示されますので、中央辺りにある「Target」を「Open Select Deployment Target Dialog」に変更します。
あとは、OK ボタンを押して、設定を反映させれば完了です。
アプリを実行したところ、問題なく実行端末の選択画面が表示されました。
以上、Android Studio でアプリを実行する端末を変更する方法についてでした。
「use same selection for future launches」にチェックは入れないほうが良さそうですが…結局今後も使うと思うので、この手順を覚えておくようにしたいと思います。
著者:村上
【Android】GooglePlayで公開していたアプリが公開停止された時の対処法
本当は対処せずに済むのが一番良いのですが…GooglePlay に公開していた Android アプリが突如公開を停止されたときの対処法です。
ちなみに、こちらの方法はポリシーに違反していないはずなのに停止された時の対処法になります。
今回参考にさせていただいた記事はこちらから。
GooglePlayで配信していたアプリが公開停止（リジェクト）された時にGoogleに異議申し立てをWEBから行う方法 ≫ 使い方・方法のまとめサイト usedoor
https://usedoor.jp/howto/web/google-play/app-koukaiteishi-reject-igimoushitate-from-web/
なお、今回アプリが公開を停止された理由は「賭博行為に関するポリシーに違反している」と判断されたためでした。
なんでも、アプリ内に賭博ウェブサイトへのリンクが含まれているとのことでしたが…そんなものを設置した記憶もなく。
正直、心当たりが何もなかったので、Google へ「異議申し立て」を行いました。
Google への異議申し立ては下記から行えます。
https://support.google.com/googleplay/android-developer/answer/2477981
ページにアクセスすると、下の方に「再審査請求」という項目があり、そこに「異議申し立て」のボタンがあるので、それをクリックします。
いくつか質問が表示されるので、現状に合致した項目を選択します。
すると、下記のようなページが表示されると思うので、文章中の「申し立てリクエスト」をクリックします。
画像では、分かりやすいように赤い下線を引いています。
そうすれば、名前や連絡先、あとはアプリ再審査への詳細な説明を書き込む項目などがあるので、それに必要事項を書き込んで申請すればOKです。
あとは、Google からの返信を待ちましょう。
作業は以上で終了です。
思っていたよりもあっさり終わりましたね。
が、そう言えばまだメールが返ってきてない…。
いかんせん初めての作業で入力漏れもあり得るかもしれませんので、もう少し待っても返答がないようだったら、再度申請してみます。
以上、GooglePlay に公開していたアプリが公開停止になったときの対処法でした。
何故？心当たりが全くない！という方は、こちらの方法をお試しください。
著者:村上
【CSS】Androidでボタンをタップした時に表示される枠線を削除する方法
ボタンに限ったことではありませんが、Android 端末でボタンをタップした際に表示されるオレンジの枠線を削除する方法についてです。
ページデザインが全体的に青で統一されていたので、オレンジ色がそぐわなくて消したかったんですよね。
あと、ボタンは円形なのに枠は正方形なので、それも違和感がありました。
ちなみに、Webページではなく、Cordova アプリです。
今回参考にさせていただいた記事はこちらから。
[CSS] Androidでタップ時、オレンジの枠が消えない場合｜metrograph.jp
https://metrograph.jp/css_android_orange/
さて、実装のためのコードは下記のとおりです。
button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline: none;
}
記事に乗っていたサンプルコードでは、box-shadow: none; という記述もありましたが、現行のデザインに影響するので、そちらは削除しました。
なお、削除してもオレンジの枠線は消えましたので、問題なし！
記事によると、2行目の -webkit-tap-highlight-color: rgba(0,0,0,0); だけでは消えないらしいので、
outline: none; も重要なのかも？
Android では動作確認できたので、後ほど iOS でも、きちんと動作するか確認する予定です。
以上、Android でボタンタップ時に表示されるオレンジ色の枠線を削除する方法でした。
どなたかのご参考になれば幸いです。
著者:村上
【Android】アプリのパッケージ名を変更する方法
ちょっと手こずったので、備忘録としてまとめます。
Android Studio でアプリのパッケージ名を変更する方法です。
参考にさせていただいた記事はこちらから。
【Android】パッケージ名をさっと変更したい場合の手順 – Brew the Mash
https://mashmorgan.hatenablog.com/entry/2018/06/06/160823
手順は上の記事にありますが…まず、Android Studio でアプリを開き、左サイドメニューの「1:Project」の表示を「Android」に切り替えます。
次に、app > java 以下のプロジェクト名が書かれたディレクトリを右クリックし、Refactor > Rename を選択します。
警告が出てきますが、気にせず「Rename package」ボタンをクリック。
そして表示されたウィンドウで変更後の名前を入力し、決定ボタンをクリック。
途中で、変更するファイル一覧が表示されるので、「Do Refactor」して、名前の変更を実行します。
あとは、build.gradle や場合によっては AndroidManifest.xml に記載してあるパッケージ名についても変更します。
全ての変更が完了したら、アプリをビルド・実行してみてください。
なお、もしすべてのパッケージ名を変えたのにビルドエラーが発生する場合は、一度アプリをクリーンするか、Android Studio を一度終了し、再度起動させてみてください。
私の場合は、これらを行うことで無事ビルド・実行することができました。
以上、アプリのパッケージ名を変更する方法でした。
参考にした記事のように、手こずらずにさっと変更することはできませんでしたが、ドツボにハマるほどではなかったので一安心でした。
著者:村上
【CSS】Cordovaアプリでスクロールがカクつく時の対処法
現在開発中のアプリで作成してもらったデザインを反映したところ、スクロールした時にガクガクと画面が揺れて、画面上と下にそれぞれ固定してあるヘッダーとフッターも一瞬ズレたりしたのでそれの修正方法についてです。
なお、実行環境は Android でした。
今回参考にさせていただいた記事はこちら。
IEとEdgeのスクロールのガタつきは楽しくカスタマイズしながら直そう！ – More⁺Design – ホームページ制作
https://moreplus-design.com/blog/blog02/
タイトルに、IE とか Edge とありますが、Cordova アプリにも適用できました。
修正方法は、htmlに overflow: hidden;、bodyに overflow: auto; を指定することでした。
CSS で記述すると下記のとおりです。
html {
overflow: hidden;
}
body {
overflow: auto;
}
これを追加して再度アプリを実行したところ、スクロールした時のカクつきが解消され、実にスムーズに動きました！
私の環境では、HTML には特に指定なしで、body に overflow: hidden; が指定されていたので、それが悪さをしていたんですね。
以上、Cordova アプリでスクロールがカクつく時の対処法でした。
どなたかのご参考になれば幸いです。