カテゴリーアーカイブ 言語

村上 著者:村上

【Cordova】アプリアイコンにバッヂを表示する方法【解決済み】

以前、アプリのアイコンにバッヂを表示するCordovaのプラグインをご紹介しました。
その時は、何故かバッヂが表示されず、解決方法についても調べきれていなかったのですが、先日対処法が判明しましたのでご紹介。

ちなみに、前回の記事はこちらから。

【Cordova】アプリアイコンにバッヂを追加するプラグイン「cordova-plugin-badge」
https://cpoint-lab.co.jp/article/201807/【cordova】アプリアイコンにバッヂを追加するプラグ/

 

さて、気になるその解決策ですが…単にAndroidとiOSのプラットフォームを一度削除し、再度追加するだけでした。
本当にそれだけでした!
何らかの原因で、プラグインがうまく各プラットフォームに追加できなかったのかな、と思われます。

ちなみに、こちらに気が付いたきっかけはブラウザで実行した時のエラー内容です。
実際のエラー文は保存し忘れてしまいましたが、「プラグインの関数が存在しない」という意味のエラーでした。
で、もしかして…と思い至り、プラグインの再インストールをしたところ、解決したという流れです。

 

以上、cordova-plugin-badge プラグインが動かない時の対処方法でした。
同じことでお悩みの方は、是非お試しください。

  • この記事いいね! (0)
asabakento 著者:asabakento

文字化け系エラーをつぶしてみよう

terapadとその周りを整理していたらたまたま文字化けtipsを見つけたので今回はその文字化けの修正方法と原因を投稿します。


public class sample{

private String str = "Hello";

public static void main(String... args){
sample s = new sample();
s.show(",world");
}

public void show(String str){
System.out.println(this.str + str);
}
}

terapadを開いて適当に上記のコードを書いてコンパイルをすると


?サソpublic class sample{

のっけから文字化けしてますね。プログラミングでterapad使っている人ってあまり見たことないですが一応載せておきます。

ウィンドゥー>オプションー>文字コードでSHIFT-JISをUTF-8Nに変更してください。これで治ります、絶対。

こいつはterapadをインストールした後に初期設定で何らかの節でSHIFT-JISにしてしまったときに出てくるので、設定したら使う前に一回閉じてから開いて使ってください。

あと、terapadで作ったファイルをcordwriterなどの他のエディタで開いても出てくるので極力他のエディタで開かないようにしてくださいね。

terapadでコーディングしている人、特に入門中の方はいきなりこんな分かりにくいエラーを見るとやる気が失せてしまいますので忘れずに上記の設定を済ませてしまいましょう。それでは!

 

  • この記事いいね! (0)
著者:杉浦

頻繁に変わる一部分を抽出することによる関数化

 プログラミングを行う時、何を関数やクラスにすると楽ができるか、のちに使いやすくなるか、という判断のために抽出による判断ができます。抽出という言葉は抽出とは – 難読語辞典 Weblio辞書では次の様に載っています

ちゅう しゅつちう- [0] 【抽出】

( 名 ) スル

全体の中から、ある物を抜き出すこと。 「リストから条件を満たす物を-する」
固体または液体混合物溶媒加え混合物中の特定の成分溶媒中へ分離する操作。この操作後に得られる溶媒部分を抽出液という。溶媒抽出



 何らかの大きな問題を解く時、頻繁にある一部分のみが変わる同じような小さな問題を解くことになりやすいです。例えば問題が”Weblio辞書で数字の1から10までの意味を調べる”なら”Weblio辞書で数字の1の意味を調べる”,”Weblio辞書で数字の2の意味を調べる”,…です。これを更にブラウザ上の操作に分解すると”Weblio辞書を開く。”、”Weblio辞書で数字の1を検索バーに入力する。”、”検索ボタンを押す。”、”意味を読む。”になります。”Weblio辞書を開く”は最初の一度のみですが他を繰り返すだけで書き下されたコードは大変なことになります。


"Weblio辞書を開く。"
"Weblio辞書で数字の1を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の2を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の3を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の4を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の5を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の6を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の7を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の8を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の9を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"
"Weblio辞書で数字の10を検索バーに入力する。"
"検索ボタンを押す。"
"意味を読む。"

 読み難いです。分解した小さな問題の頻繁に変わる1~10の部分のみを抽出して、”Weblio辞書で数字の$nの意味を調べる”という関数に適宜挿入するコードは次の様になります。

function look_up_number_in_weblio($n){
	"Weblio辞書で数字の$nを検索バーに入力する。"
	"検索ボタンを押す。"
	"意味を読む。"
}
"Weblio辞書を開く。"
look_up_number_in_weblio(1);
look_up_number_in_weblio(2);
look_up_number_in_weblio(3);
look_up_number_in_weblio(4);
look_up_number_in_weblio(5);
look_up_number_in_weblio(6);
look_up_number_in_weblio(7);
look_up_number_in_weblio(8);
look_up_number_in_weblio(9);
look_up_number_in_weblio(10);

 さっくり全部読めるようになりました。

  • この記事いいね! (0)
著者:杉浦

if文の様な正規表現である先読み、戻り読み

 正規表現の文法には先読み、戻り読みと呼ばれる記法があります。戻り読みは後読みとも呼ばれます。ここではサクラエディタのヘルプファイルに倣って戻り読みと記述します。

(?=式) 先読み
(?!式) 否定先読み
(?<=式) 戻り読み
(? 否定戻り読み

 この記法は英語ではlookahead,lookbihindと呼ばれます。正規表現の途中でこの記法が現れた時、正規表現エンジンは先読み後読みで括られた部分式が文字列のまだ読んでいない先の方やもう読み終わった戻った方にマッチするかしないかを判断します。このマッチング判断は読んでいる文字列の位置を変えません。(?=)(?!)(?<=)(?
 この正規表現はhogeを含まない文字列中のfugaにマッチする正規表現です。先読みはまだ読んでいない先の方を見るだけ、lookaheadするだけで文字列を消費しない記法です。そのため、以下の様なマッチもできます。

 ハイライト部分がマッチしている部分です。行頭から見て.*hogeが成り立たない行のfugaをマッチしているわけです。

  • この記事いいね! (0)
著者:杉浦

OnlinePHPFunctionsの紹介

 OnlinePHPFunctions – Test PHP functions onlineはPHPのオンライン実行環境です。要は自分でサーバを立てずともPHPを実行できる簡単な環境です。
 OnlinePHPFunctionsの主な機能はSandboxとPHP Functionsです。Sandboxでは下図の様な簡単なエディタでPHPを記述、実行できます。

 OnlinePHPFunctionsの特に好きな点は様々なverのPHPを容易に動かせる点です。4.4.9~7.2.4まで様々な環境があり、コードが使えるか使えないかを試せます。例えばPHPにおいて配列の定義構文としてarray()の代わりに[]が使えるようになったのはPHP5.4からです。そのため先ほどのコードの設定をRun on PHP version:5.3.0に変更すると次の様になります。

 使えない構文として文法エラーをもらうことなりました。PHP Functionsではこのサンドボックス機能を活かして実際に動くPHPの関数を見ることが出来ます。

  • この記事いいね! (0)
著者:杉浦

問題の細分化とソースコードの関数化

 よく関数にまとめることでソースコードが読みやすくなる、再利用しやすくなると言われますが、いきなりその様ことだけ知ってもすぐにできるものではありません。関数化の指針の一つに問題の細分化というものがあります。これは分割された小さな問題ごとに関数にしていくというやり方です。例えば次のコードがあります。

// 与えられた緯度経度に最も近い 'array' の要素を返す。
// 地球が完全な球体であることを前提としている。
var findClosestLocation = function (lat, lng, array) {
	var closest;
	var closest_dist = Number.MAX_VALUE;
	for (var i = 0; i < array.length; i += 1) {
		// 2 つの地点をラジアンに変換する。
		var lat_rad = radians(lat);
		var lng_rad = radians(lng);
		var lat2_rad = radians(array[i].latitude);
		var lng2_rad = radians(array[i].longitude);
		// 「球面三角法の第二余弦定理」の公式を使う。
		var dist = Math.acos(Math.sin(lat_rad) * Math.sin(lat2_rad) +
				Math.cos(lat_rad) * Math.cos(lat2_rad) *
				Math.cos(lng2_rad - lng_rad));
		if (dist < closest_dist) {
			closest = array[i];
			closest_dist = dist;
		}
	}
	return closest;
};
Dustin Boswell; Trevor Foucher. リーダブルコード (Kindle の位置No.1930-1939). 株式会社オライリー・ジャパン. Kindle 版. 

 これはコードの最上部のコメントにあるように、与えられた緯度経度に最も近い 'array' の要素を返す、ことが最終目的の関数です。この目的を達成するためにこのコードは、2地点間の距離を算出する、最小の距離になる'array'の要素を発見する、という二つの問題を解いています。前者の2地点間の距離を算出する、という問題は最終目的から分割して考えられます。分割するという考えに沿ってコードを改造すると次の様になります。

// 与えられた緯度経度に最も近い 'array' の要素を返す。
// 地球が完全な球体であることを前提としている。
var findClosestLocation = function (lat, lng, array) {
	var closest;
	var closest_dist = Number.MAX_VALUE;
	var dist = spherical_distance(lat, lng, array[i].latitude, array[i].longitude);
	for (var i = 0; i < array.length; i += 1) {
		if (dist < closest_dist) {
			closest = array[i];
			closest_dist = dist;
		}
	}
	return closest;
};
function spherical_distance(lat, lng, lat_2, lng_2){
	//地点(lat,lng)と地点(lat_2,lng_2)の球面距離を返す
	// 2 つの地点をラジアンに変換する。
	var lat_rad = radians(lat);
	var lng_rad = radians(lng);
	var lat2_rad = radians(lat_2);
	var lng2_rad = radians(lng_2);
	// 「球面三角法の第二余弦定理」の公式を使う。
	return Math.acos(Math.sin(lat_rad) * Math.sin(lat2_rad) +
		Math.cos(lat_rad) * Math.cos(lat2_rad) *
		Math.cos(lng2_rad - lng_rad));
}

 最初より簡単な関数であるfindClosestLocationとspherical_distanceの二つが出来ました。また、この関数化は再利用等のコードの変更を容易にします。例えば、findClosestLocation中のspherical_distance(lat, lng, array[i].latitude, array[i].longitude)という部分は呼び出す関数名の変更だけで同じような度単位の二地点の緯度経度を引数にする別の関数を用いることが出来ます。二地点間の球面距離の算出というのは多用します。
 問題の細分化の基準として意図と実装の乖離があります。あるコードを書いている時、そのコードに当初と別の目的が存在するならば、それは別の問題である、というものです。

  • この記事いいね! (0)
asabakento 著者:asabakento

画面タッチ無効化について

アプリを操作中にあるダイアログが出ているときに画面を操作できてしまうと

ダイアログが閉じてしまい進捗が分からなくなるので、アプリのユーザーを不安にさせてしまいます。

 

ダイアログ表示中に画面タッチを無効化したいときは

 

下記のメソッド を使います。

 

  imageDownloadDialog.setCanceledOnTouchOutside(false);
 

アプリのダウンロード中やデータの保存中はプログレスバーを用いて進行具合を表しますが

この処理中に画面を触ってバーが消えてしまうと、ダウンロードが何%進んでいるか分からなくなってしまい

ユーザーの視覚的にも印象が良くないので、処理をしているコードの中にこのメソッドを突っ込んで画面タッチを無効化しましょう。

 

自分は良く使っているアプリのレビューを見ていますが、起動時の挙動に対してはシビアな評価がかなり多いです。

 

アプリを開発する側の立場として、入りから好印象を持たせてユーザーに長く使ってもらえるようなアプリを目標に

これからも細かいtipsを見つけて載せていきたいと思います。

 

 

 

 

 

  • この記事いいね! (0)
村上 著者:村上

【CSS】要素内のテキストの改行や空白を操作するプロパティ「white-space」

久しぶりに感じるCSSについての記事です。
今回紹介するのは、テキストの改行や空白を操作できる「white-space」というプロパティについて。
新しく使用したプラグインのせいか、テキストが改行されなくなったので、その対処法です。

 

まず、プロパティの値と、その説明については下記をご覧ください。
なお、参考にさせていただいたサイトはこちらから。

white-spaceとは|コーディングのプロが作るCSS辞典
https://html-coding.co.jp/annex/dictionary/css/white-space/

プロパティの値 説明
normal(初期値) テキスト内の連続する半角スペース、タブ、改行を一つの半角スペースにまとめ、自動的に折り返しをして表示
nowrap テキスト内の連続する半角スペース、タブ、改行を一つの半角スペースにまとめて表示。なお自動的な折り返しは行わない
pre テキスト内の連続する半角スペース、タブ、改行をそのまま表示。なお自動的な折り返しは行わない
pre-wrap テキスト内の連続する半角スペース、タブ、改行をそのまま表示し、それに加えて自動的な折り返しも行う
pre-line ソース中の連続する半角スペース、タブを一つの半角スペースにまとめて表示する。しかし、改行している箇所は改行して表示し、それに加えて自動的な折り返しも行う

以前は normal のままだったのですが、プラグインの影響なのか、改行コードが無効になっていたため、pre-wrap に変更しました。
すると、問題なく改行されました。
改行やスペースをそのまま表示するのなら、pre でもいいのですが、これだと文字の折り返しが行われないため、pre-wrap がおすすめです。

 

以上、改行コードが向こうになってしまった場合の対処法でした。
皆様も、もし何らかのライブラリやプラグインの影響で、テキストが改行されなくなったり、スペースがおかしいと思った時は、こちらのプロパティを調整してみてください。

ちなみに、使用したプラグインは「react-string-replace」です。
リッチテキストを使用するために導入しました。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリアイコンにバッヂを追加するプラグイン「cordova-plugin-badge」

今回はCordovaのプラグインのご紹介。
お客様からのご要望で、LINEやFacebookのように、アプリのアイコン右上に赤丸や数字で通知数を表示させたいとのことでした。

現在試しているプラグインは「cordova-plugin-badge」というものです。
GitHubのページは下記から。

GitHub – katzer/cordova-plugin-badge: Access and modify badge numbers
https://github.com/katzer/cordova-plugin-badge

 

プラグインの導入方法ですが、まず下記のコマンドでプラグインを追加します。

cordova plugin add cordova-plugin-badge

なお、もしエラーが発生した場合は、下記のコマンドをお試しください。

cordova plugin add https://github.com/katzer/cordova-plugin-badge.git

上記のコマンドで、プラグインの追加まではできたので、今度はソースに下記のようにコードを追加します。

document.addEventListener('deviceready', function () {
    cordova.plugins.notification.badge.set(10);
}, false);

なお、セットしている数値が、バッヂに表示される値になります。

…が、何故か、私の環境では Android、iOS共にバッヂが表示されず…!
現在原因を調査中です。
…アプリを開いた時にリセットされているとかかな?

 

ということで、アプリアイコンにバッヂを表示するためのプラグイン「cordova-plugin-badge」でした。
まだ動いてはいませんが、導入自体はすごく簡単だったので、正常に動作すればかなりおすすめできるプラグインだと思います。
とりあえず、バッヂが表示されるように調整頑張ります…!

  • この記事いいね! (0)
asabakento 著者:asabakento

Handlerクラスtips

今日は処理を遅延させるコードを紹介します。

 

アプリのデザインに合わせて決められたタイミングで

処理をしたいなって思う時があると思います。

そんな時はhandlerクラスのpostDelayedメソッドを呼びましょう。

 

 

上の画像のようにHandlerインスタンスを生成した後に

run関数のスコープ内に遅延させたい処理を書きます。

これだけ。

{}外の700は、0.7秒後にrun内の処理をしますよという意味になります。

複雑な計算の処理は時間がかかりがちなので

このHandlerクラスを使って処理をさせましょう。

非同期通信の際にも応用されている非常にメジャーな技法なので

これからandroidアプリを開発をする!という人はぜひとも抑えておきたいですね。

 

  • この記事いいね! (0)