著者:村上
【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 アプリでスクロールがカクつく時の対処法でした。
どなたかのご参考になれば幸いです。
著者:村上
【Cordova】「Current working directory is not a Cordova based project」エラーの対処法
新しいパソコンで現在開発中のプロジェクトを実行しようとしたときに遭遇したエラーです。
初期化されたPCだったので、色々設定などがされておらず、1から設定をし直していました。
で、Cordova アプリだったので、プラットフォームを追加しようと、下記のコマンドを実行した時にこちらのエラーに遭遇しました。
cordova platform add [プラットフォーム名]
エラーは「Current working directory is not a Cordova based project」というもので、要は現在のディレクトリは Cordova プロジェクトではないと言っています。
今回参考にさせていただいた記事はこちら。
“Current working directory is not a Cordova based project”のエラーが表示されたらとりあえずルートにwwwフォルダを作成する。 – overmorrowのコメント / はてなブックマーク
http://b.hatena.ne.jp/entry/306218340/comment/overmorrow
GitHub で全く同じエラーについての投稿があったようで、それに対するコメントでした。
これによると、「Current working directory is not a Cordova based project」エラーに遭遇した場合、プロジェクトのルートディレクトリに「www」というディレクトリを作成すると解決できるとのこと。
そう言えば、このディレクトリが無かったですね…。
ということで、指示に従って www ディレクトリを作成後、再度 cordova platform add [プラットフォーム名] を実行したところ、問題なく実行できました！
…まあ、他のエラーが発生しましたが、これはこのエラーとは無関係なので割愛します。
以上、Cordova コマンドが実行できなかった時の対処法でした。
一発解決できる投稿にたどり着けて良かったです。
ご参考になれば幸いです。
著者:村上
【Windows】Windows Helloの指紋認証機能が使えなくなった時の対処法
先日、会社で使っている Windows PC の指紋認証機能が急に使えなくなったのでその対処法について。
誤認識とか挙動がおかしいというよりも、うんともすんとも言わなくなりました。
で、再設定を試すべきか…と悩んでいたところ、後輩君がサクッと直してくれました！
なので、その対処方法を備忘録としてまとめます。
全てのPCで同じように使えるわけではないと思いますが…もし、適用したらラッキーということで。
まず、画面左下のスタートボタンを右クリックし、「デバイスマネージャー」をクリックします。
そうすると、下のウィンドウが表示されるので、最下部にあった「生体認証デバイス」から指紋を管理しているデバイスを選択し、右クリックで無効にします。
で、再度同じデバイスを選択し、有効に戻せばOKです。
試しにログイン画面に行って、指紋認証によるログインを行ったところ、無反応だったのが嘘のようにあっさり認識してくれました！
これで、今後もし似たような現象が起こっても大丈夫そうですね！
以上、Windows の指紋認証機能が使えなくなった時の対処法でした。
同じ現象でお困りの方で、もしその環境で同じ操作が行えそうでしたら、是非お試しください。
著者:村上
【CSS】iOSでテキストフォームの内部の影を消す方法
前回に引き続き、CSS での影の取り扱いについて。
さて、iOS で text タイプの input 要素を表示した場合、要素内部に影が表示されていると思います。
今回は、その影を消す方法についてです。
別に影ありでも良かったのですが、Android で見ると影がないのでデザインを統一したい＆input要素に指定した border の色合いが影響して謎の隙間があるように見えるため、削除することにしました。
影を削除するにあたり、参考にさせていただいた記事はこちらから。
CSS：iOSのフォームのボックスシャドウはbox-shadowではなかった件｜PressStocker
http://pressstocker.com/ios-box-shadow/
で、今回初めて知ったのですが、iOS で input 要素に追加される影って、box-shadow プロパティによるではないんですね。
最初、影を消すために box-shadow の記述を探してしまいました…。
では何で指定しているかというと -webkit-gradient というプロパティが使われているとのこと。
なので、影の濃さなどを調節したい場合は、このプロパティの値を変更しましょう。
なお、私の場合のように、影を削除したい場合は -webkit-appearance プロパティを利用します。
影を消したい input 要素に対して下記の CSS を追加すると、サクッと影を削除できました。
-webkit-appearance: none;
以上、iOS で input 要素の影を削除する方法でした。
最初、box-shadow が効かない！どうすれば？となったのですが、無事解消できてよかったです。
著者:村上
【CSS】box-shadowが効かない時の対処法
久しぶりな気がする CSS ネタ！
今回は、div要素 に追加していた box-shadow プロパティが効いたり効かなかったりしたので、その対処法についてです。
参考にさせていただいた記事はこちらから。
box-shadowがうまく適用されない｜memopad
http://memopad.noor.jp/html-css/post-452/
記事によると、コンテンツに指定していた overflow: hidden; が原因とのことで、私の場合も、box-shadow プロパティを指定していた要素の親要素に overflow: hidden; を指定していました。
なお上記の記事では、コンテンツの中にあるサムネイル画像に float を適用していて、それを overflow と position で解除していたのが原因だったとのことです。
なので、overflow: hidden; を親要素から削除したところ、解決しました！
他の記事では、filter: drop-shadow(); を代わりに使うとか、box-shadow の第4引数？の広がり距離を指定するとか、z-index を定義するとか、position:relative; を定義する…などがありましたが、私の環境ではこれでは解決できませんでした。
以上、CSS の box-shadow が効かない時の対処法でした。
これが当てはまらない場合もあるとは思いますが、同じように box-shadow で要素に影がつけられない場合は、とりあえず overflow: hidden; を指定しているかどうかを確認してみることをおすすめします。
著者:村上
【JavaScript】正規表現で文字列からHTMLのaタグを抜き出す方法
今後も絶対に使う機会があると思うので、備忘録としてまとめます。
HTMLの aタグ を正規表現で抜き出す方法についてです。
と言っても、JavaScript は match() もしくは replace() を使えばOKなので、aタグ かどうかを判断するための正規表現そのものを記載しておきます。
今後使うかもしれないものでも、こうしてメモしておかないと忘れるので…。
今回参考にさせていただいた記事はこちらから。
正規表現でHTMLタグを<a.*?</a>でマッチさせるのは間違っている｜iwb.jp
https://iwb.jp/javasctipt-html-regexp-match/
タイトルにもある通り、aタグを <a.*?</a> という正規表現で判断するのは間違っているとのこと。
上記の正規表現でも aタグを抜き出すことはできますが、仮に addressタグがあった場合、こちらにも一致してしまうため、正しい結果にならないことがあるとのことでした。
幸い、私が開発しているプロジェクトでは、addressタグを使うことはないと思いますが、念には念を入れ、この記述方法は却下しました。
で、正しい記述がこちら。
const result = [aタグを抜き出したい文字列].match(/<a(?: .+?)?>.*?<\/a>/g);
上記を実行すれば、変数 result に文字列から抜き出した aタグが格納されます。
なお、正規表現最後の g は繰り返しマッチングを行うかどうかを指定するものです。
これがないと、もし文字列に複数の aタグがあった場合、最初の aタグだけしか抜き出さないので、もし文字列に複数の aタグが含まれ、かつそれらをすべて抜き出したい場合は、g を指定しておく必要があります。
以上、JavaScript の正規表現で HTML の aタグを抜き出す方法でした。
なお、今回のサンプルコードでは match() を使い、aタグを抜き出しましたが、置換を行いたい場合は replace() を用いてください。
著者:村上
【React】テキスト読み上げ機能を実装するためのパッケージ「speak-tts」
昨日の記事、【React】テキストを読み上げるためのコンポーネント「react-speech」 でも書いていた通り、react-speech というコンポーネントを触っていましたが、どうにも無理そうだと悟り、違うパッケージにも手を出してみました。
それが、「speak-tts」というパッケージです。
インストール手順及び実装方法については、こちらのページをご確認ください。
インストールは下記のコマンドを実行します。
npm install speak-tts
実行後は、下記でプロジェクトにインポートします。
import SpeechTts from 'speak-tts'
まずは、使用している環境が、音声合成をサポートしているかをチェックします。
チェック方法は下記を実行。
const speech = new SpeechTts();
if (speech.hasBrowserSupport()) {
// サポートされている
}
で、サポートされていたら、下記で初期化を行います。
const speech = new Speech();
speech.init(
'voice':'Google UK English Male',
'lang': 'en-GB'
).then((data) => {
// 初期化成功
}).catch(e => {
// 初期化失敗
});
なお、init() 内で、上記のようにオプションを設定することも可能です。
あとは、任意のタイミングで下記コードを実行し、テキストを読み上げます。
speech.speak({
text: '[読み上げさせたいテキスト]',
}).then(() => {
// テキスト読み上げ成功
}).catch(e => {
// テキスト読み上げ失敗
})
なお、上で紹介した初期化を実行しないで speak() メソッドを実行すると、警告が出るので注意してください。
こちらも簡単で使いやすいと思ったのですが…Cordova アプリには実装できませんでした…。
Android で実行したところ、サポートされていないとのこと。
PC の Google Chrome で動作したので、Android でも使えるかも！と期待したのですが、残念でした。
なお、昨日の react-speech コンポーネントもPC のブラウザで実行したところ、正常に動作しました…。
うーん、そういう落ちか…。
以上、テキスト読み上げを実装するためのパッケージ「speak-tts」のご紹介でした。
触った感じとしては、react-speech よりも speak-tts の方が使いやすそうな印象を受けましたね。
オプションや機能はほぼ同一なので、お好きな方を導入ください。