言語 – ページ 12 – 株式会社シーポイントラボ

著者:asaba

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

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

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

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

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

  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)

著者:asaba

Handlerクラスtips

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

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

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

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

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

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

これだけ。

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

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

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

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

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

この記事いいね！ (0)

著者:杉浦

正規表現の難題、入れ子構造

　正規表現は便利な技法です。一行ほどの短い文字列で様々な文字列を表現できます。一行で動作させる単純な動作のためか実装されている正規表現の多くは後方参照以外の参照可能な記憶領域を持ちません。入れ子構造を正規表現で表そうとした場合、この記憶領域が無いという仕様が大きくのしかかってきます。
　単純に()の入れ子を考えてみます。

(()(()))

　人間が見やすいようにインデントを付けます。


(
	()
	(
		()
	)
)

　入れ子が正しく結ばれているか、どの始点がどの終点に対応しているかを考えるためには記憶領域が必要になります。
　正しく結ばれているかは、次のルールを守ったまま文字列の終わりまで読み取り切れるか否かで確認できます。
・終点を読み込んだ時、対応する始点が存在する
・読み取り終わった時、今まで読み取った始点、終点の数が等しい
最新以外の始点についての情報が無い場合、対応する始点が存在するか否かがわからず、入れ子の確認ができません。正規表現は後方参照以外に記憶領域を持ちません。このため多くの正規表現は入れ子構造を読み取ることができません。余談ですがデータ構造のひとつであるスタック構造を用いると簡単に入れ子を読み取ることが出来ます。下図はスタック構造のgifです。始点を積み、終点を読んだら始点を一つ取り出す、という動作を繰り返すことで実装できます。
　正規表現には方言がある、と言われるほど、実装が多種多様で様々な拡張がなされています。perlやphpの様なプログラミング言語の一部では正規表現の再帰呼び出しが実装されています。再帰は自身の処理中に自身を呼び出すことが可能な動作です。これで始点を積み上げ、終点で始点を打ち消す、というスタック処理をそのままできます。
　再帰を用いた正規表現の説明書：PHP: 再帰的パターン – Manual

この記事いいね！ (0)

著者:杉浦

phpの型の比較表

　詳しく知りたい方はPHP: PHP 型の比較表 – Manual を読みましょう。
　phpは暗黙の型変換を行う言語です。これは一々明示的に型変換を行う手間を省く便利さを持ちながらも想定外の動作の原因にもなります。

if($a)

という条件文が

$a = 0

の時に偽と判定されるバグり方は定番らしいです。別言語で私もやりました。その様な曖昧な動作ですが仕様は一律で決められています。マニュアルで確認しましょう。
　下の表はどちらもPHP: PHP 型の比較表 – Manual からの引用です。上の表は直感的に様々な対応をしてくれています。数字==”数字”⇒TRUEなんかは特に便利です。下の表は誤解が生じない明確な形です。失敗がまずい時、誤解を招かないコードを書きたい時なにかに良いです。

**== による緩やかな比較**
	`TRUE`	`FALSE`	1	0	-1	“1”	“0”	“-1”	`NULL`	array()	“php”	“”
`TRUE`	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`TRUE`	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`
`FALSE`	`FALSE`	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`TRUE`	`TRUE`	`FALSE`	`TRUE`
1	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
0	`FALSE`	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`TRUE`	`TRUE`
-1	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
“1”	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
“0”	`FALSE`	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
“-1”	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
`NULL`	`FALSE`	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`TRUE`	`FALSE`	`TRUE`
array()	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`TRUE`	`FALSE`	`FALSE`
“php”	`TRUE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`
“”	`FALSE`	`TRUE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`TRUE`

*===* による厳密な比較
	`TRUE`	`FALSE`	1	0	-1	“1”	“0”	“-1”	`NULL`	array()	“php”	“”
`TRUE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
1	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
0	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
-1	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
“1”	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
“0”	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
“-1”	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`
`NULL`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`	`FALSE`
array()	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`	`FALSE`
“php”	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`	`FALSE`
“”	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`FALSE`	`TRUE`

この記事いいね！ (0)

著者:takahashi

PostgreSQL “対向(peer)認証に失敗しました” エラーが出るときの対処法

PostgreSQLでちゃんとユーザーにログイン権限とパスワードを設定しているのに、

psql: FATAL:  ユーザ "postgres" で対向(peer)認証に失敗しました

のようなエラーが出てしまった場合の対処法です。

そもそもPeer認証とは

CentOS6でPostgreSQLインストール – My Octopress Blog

Peer認証とは、カーネルからクライアント上のシステムユーザ名を取得し、PostgreSQLデータベースユーザと同一である場合のみ接続が許可される仕組みです。

つまり、Postgresql内のユーザーとUNIXユーザで、ユーザー名が一致してさえいれば認証情報なしでログイン出来てしまう仕組みです。

パスワードを打たなくてもいいのは楽ですが、例えばユーザーごとに権限を変えて置いて、場合によって使い分けたいときや一時的に別のpsqlユーザーとしてログインしたいときなどはかなりやりづらいですし、psql側でユーザーを作る際に、同名のUNIXユーザーも追加する必要が出てくるのでとてもめんどくさいです。

この挙動を変更するには、pg_hba.conf （だいたいpsqlのデータフォルダか/etcにあるはずです。）を編集します。
ファイルを開くと

#ローカルで動いているpsqlへアクセスする場合
local   all             all                                     peer
#他のクライアントからpsqlへアクセス可能にする場合(例)
host    all             all             127.0.0.1/32            peer

などとなっているか、あるいはコメントアウトされているかと思いますので、これを書き換えます。

#ローカルで動いているpsqlへアクセスする場合
local   all             all                                     md5
#他のクライアントからpsqlへアクセス可能にする場合(例)
host    all             all             127.0.0.1/32            md5

パスワード認証させたい場合は”peer”の部分を”md5″に変更して保存し、psqlのデーモンを再起動させます。

これで再度ログインを行えば、今度はパスワードを求められ、正しい情報を入力すればどのユーザーでもログインできるようになるかと思います。

この記事いいね！ (0)

著者:村上

【PHP】「Parse error: syntax error」の対処法

学生さんが書いたプログラムを修正する機会があり、その時に遭遇したエラーです。
分かってみればとても初歩的なミスだったのですが、その時は気が付くのに時間がかかってしまいました。

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

「Parse error: syntax error」とは？ \ PHPプログラミングの教科書 [php1st.com]
https://php1st.com/1263/

さて、今回のエラー「Parse error: syntax error」ですが、こちらは構文エラーが原因です。
入力ミスなどで、PHPの解釈（分析・翻訳）がうまくいかなかったときに発生します。

なお、今回のエラーは全角スペースが含まれていることが原因でした。
使用しているエディタが全角スペースと半角スペースが少しわかりにくい表示だったので、気が付くのが遅くなってしまいました…。
半角スペースに直したところ、無事問題なく実行できました。

で、このエラーですが、エラー文の最後に行数が表示されるのですが、この行数は、必ずしもエラーが発生した行の位置を示しているとは限らないとのこと。
私の遭遇した状況では、エラー文で示された行数と、実際ミスをしていた行数が一致していましたが、場合によっては、表示されている行数よりも上でエラーが発生していることもあるようです。
なので、エラー文の行数はあまり信用しないほうがよさそうです。

以上、初心者がやらかしがちなPHPのエラーでした。
今回の状況も踏まえまして、特に初心者の皆さんは今使っているエディターの半角スペースや全角スペースをきちんと可視化しておくことをおすすめします。

この記事いいね！ (0)

著者:杉浦

多くのcdnリンクを持つcdnjsの紹介

　cdn（contents download link）はjs,cssのライブラリを簡単に読み込む手法です。オープンソース配信サービス、Google Hosted Librariesの紹介で紹介したGoogle Hosted Librariesの様にcdnは多くの場所で配信されています。cdnjsはそのようなcdnの配信リンクをまとめて検索できるサイトです。
　下の画像の様に検索してリンクをコピーするだけでとりあえず使えます。特定のフォーマットで単一のデータを返してくれるAPIも備わっています。
　

　また、cdnjs上でリンクがコピーされた回数をランキングしています。人気が高く、汎用性の高いライブラリが上位に連なっています。jqueryは格別ですね。

この記事いいね！ (0)

著者:asaba

mapboxのポップアップについて

今回は、mapbox上でピンをタッチすると、画像がポップアップとして出てくるコードを紹介します。

ポップアップを付けるときに、画像を撮影した場所にピンを付与して、それをクリックすると

画像がポップアップとして出てくる機能を追加する作業をしていたので備忘録として載せておきます。

ざっくりですが説明します。

ポップアップを表示するメソッドを作ったあとに


var el = document.createElement('div');

でピンのオブジェクトを生成します。

その後に

 
popup = new mapboxgl.Popup({offset: [16, 0]})

で、ポップアップオブジェクトを生成して使用可能にします。

次に、画像をポップアップとして扱うコードなのですが

.setHTMLメソッドを使って表示します。

本来は、htmlの文字列を表示する役割ですが、ここでは

 
src = '+image+'

引数のimageを取って中の画像のurlを渡すことができます。

ピンが複数立っている時は、そのピンをクリックするときに引数に画像のurlを持たせて

そのurlに合わせて表示するポップアップを変えていると考えるとわかりやすいかもしれません。

後は

setLngLat([lmg,lat])

で、引数のlatとlngを渡せば撮影した場所にピンが立ちま

す。

以上ですが、ここでは肝だけ説明させていただきました。

mapboxは柔軟性が高く、細かい箇所まで地図をカスタマイズできるので

慣れてきたらシムシティ感覚で楽しくなってくると思います！

この記事いいね！ (0)

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

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

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

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

Handlerクラスtips

正規表現の難題、入れ子構造

phpの型の比較表

PostgreSQL “対向(peer)認証に失敗しました” エラーが出るときの対処法

【PHP】「Parse error: syntax error」の対処法

多くのcdnリンクを持つcdnjsの紹介

mapboxのポップアップについて

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報

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

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報

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