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

村上 著者:村上

【Cordova】ダイアログを表示するためのプラグイン「cordova-plugin-dialogs」

今回は、Cordovaで開発しているアプリでダイアログを表示させる方法です。
使用したプラグインは、「cordova-plugin-dialogs」です。
GitHubのページは下記からご確認ください。

GitHub – Apache Cordova Plugin dialogs: apache/cordova-plugin-dialogs
https://github.com/apache/cordova-plugin-dialogs

シンプルなダイアログを簡単に表示することができます。

 

インストールは、下記のコマンドを実行してください。

cordova plugin add cordova-plugin-dialogs

次に使い方ですが、まず一般的なダイアログの表示には、navigator.notification.alert メソッドを使います。
サンプルコードは下記の通りです。

navigator.notification.alert(
    '[ダイアログのメッセージ]',
    function(){
        // ダイアログのボタンが押下された後に実行する処理
    },
    '[ダイアログのタイトル]',
    '[ボタンのテキスト]'
);

サンプルはこんな感じ。
なお、ボタンのテキストのデフォルトは「OK」です。
ボタンのテキストがこちらで問題がなければ省略しても大丈夫です。

次に、「OK」「キャンセル」など、ボタンが複数あるダイアログの表示方法です。
メソッドは、navigator.notification.confirm を使います。

navigator.notification.confirm(
    '[ダイアログのメッセージ]',
    function(buttonIndex){
        // ダイアログのボタンが押下された後に実行する処理
    },
    '[ダイアログのタイトル]',
    '[ボタンのテキスト(配列で指定する)]'
);

navigator.notification.alert とほぼ同じですが、違う点はボタンのテキストを配列で指定しているところと、コールバック関数に引数があるところですね。
ちなみに、ボタンは最初に指定した方が右側に表示されますのでご注意ください。
また、コールバック関数の引数には、押されたボタンのインデックスが渡されます。
ボタンごとに処理を変えたい場合は、この数値を参考にしてください。

最後は、navigator.notification.prompt メソッドです。
こちらは、テキストの入力欄があるダイアログです。
サンプルコードはこちら。

navigator.notification.prompt(
    '[ダイアログのメッセージ]',
    function(result){
        // ダイアログのボタンが押下された後に実行する処理
        // ボタンのインデックス:results.buttonIndex
        // テキストエリアの入力値:results.input1
    },
    '[ダイアログのタイトル]',
    '[ボタンのテキスト(配列で指定する)]'
    '[入力欄のデフォルトテキスト]'
);

コードにも記載しましたが、このメソッドのボタン押下後のコールバックでは、ボタンのインデックスと入力エリアのテキストが取得できます。
それぞれ、result.buttonIndexresult.input1 と指定して取得します。

ダイアログのメソッドについては以上です。
他にも、ビープ音を鳴らせたりもしますが、今回は使わなかったので割愛します。

 

以上、ダイアログを表示する方法でした。
このプラグインで表示できるダイアログはかなりシンプルなものなので、使い勝手はいいと思います。
ただ、デザインのカスタマイズをしたい!という場合には向かないですね。
どちらかと言うと、ちょっとデザインに手を加えたりしたいので、他にもダイアログを表示できるプラグインがないか調べてみたいと思います。

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

YAGNIの原則

 YAGNIは”You aren’t gonna need it”の略でコーディングの方針になる原則です。コーディングの原則にはDRY(Don’t repeat yourself)、KISS(Keep it simple, stupid)、の様に言い聞かせるような言い方がたびたび現れます。YAGNIの、それは必要にならないだろう、という言葉は転じて、必要になるまで書かないという意味です。YAGNIの原則の目的は、余分なものを作る資源(時間、PCの容量など)は無駄だから必要なものがわかるまでその周りを作らない、そうすることで消費されるはずだった資源を節約する、という点にあります。
 YAGNIの原則を用いた場合のデメリットは完成像が歪なものになりがちということです。これは完成像をあまり予想しないまま突き進むコーディングになるからです。このデメリットは多くのタイミングでコードの修正が容易な場合、歪さが許容できる場合、総じて規模の小さなプログラムを作る際に最小限になります。またYAGNIの原則は必要なものが何度も突然現れる際に、必要になってから作るという方針がキレイに当てはまります。YAGNIの原則が特に上手く働く場合は規模が小さく、要望が流動的なものを作る場合です。一方で、規模が大きなものを作る際にYAGNIの原則用いた場合、デメリットは膨れ上がり見事なスパゲティコードの山ができあがるでしょう。

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

JavaScriptの多彩な日時表現関数Date.prototype.toLocaleString()

 Date.prototype.toLocaleString() – JavaScript | MDN

 toLocaleString() メソッドは、言語に合わせた日時の文字列を返します。新しい locales 引数と options 引数により、アプリケーションは、使用される書式変換の言語の指定や、関数の振る舞いのカスタマイズができます。古い実装のアプリケーションは、locales 引数と options 引数を無視します。使用されるロケールや返される文字列の書式は、完全に実装依存です。

 古い実装に無視される、完全に実装依存、と実験的機能の気もしますが対応状況は次の画像の通り致命的なエラーを起こすことなく、多くの範囲に対応しています。
 
 toLocaleString()はtoLocaleString(String locale,Object options)と使います。この関数はとにかく便利で、表示される日時の種類とフォーマットの大部分を制御できます。区切り文字は残念ながら制御できませんがそれだけなら正規表現でちょちょいです。locale,optionsに何が入るかは実装したコードを見た方が早いでしょう。

 これはVueで書いていますが生のJSでも問題なくtoLocaleString()は使えます。ここに表記したオプションはよく使うであろうちょっとしたものでリファレンスの中にはより多彩なオプションの説明があります。

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

【javaScript】税込み商品の計算アプリ

プログラミングを始めた時に既に作りたいものがたくさんあったのですが、まだ技術も基礎もない自分でも何か作れない

かなと試行錯誤していた時に作ったアプリです。題名は、税込み商品計算アプリです。

消費税が上がることを思い出したことをきっかけに作ったアプリです。使い方は単純で、商品と現在の消費税を入力して計算ボタンを

押すと税込み価格をテキストで表示する、本当にそれだけのアプリです。


<form name="text">
<input type="text1" id="okt1"name="add1"> ×
<input type="text2" id="okt2"name="add2">
</form>
<input type="button" id="cb" value="お会計"onclick="cash()">
<input type="button" id="res" value="リセット"onclick="reset()">
<p id="result"></p>
<script>
var num1 = document.text.okt1.value;

var num2 = document.text.okt2.value;

var res = document.getElementById("result");

function cash(){

num1 = document.text.okt1.value;

num2 = document.text.okt2.value;

res = document.getElementById("result");

sum = Math.round(num1 * num2);

if(num1==="" || num2 ===""){

res.innerHTML = "数値を入力してください。";

}else if(!isNaN(num1) && !isNaN(num2)){

res.innerHTML = "税込みで" + sum + "円になります。";

}else{

res.innerHTML = "数値以外が入力されています";

}
}

//データを削除する処理
function reset(){

document.text.okt1.value="";

document.text.okt2.value="";

res.innerHTML = "";
}
</script>

 

 

 

 

適当にコピーしていただいてchromeで開けばすぐに動きます。

プログラミングを経験しているかたにとってはものすごくチープに感じてしまうくらいしょぼい出来ですが

javaScriptでは必須スキルのフォームを作る方法を詰め込んでいるので、初心者がありがちなこのコードは何をしているか

分からない、何のための関数なのか理解できないといった最初の壁をぶち破ることができます。

reactやvue.jsではこの作法を応用してコンポーネントを作りますが、これら流行りのフレームワークも簡単なアプリを

つくっていく中でめきめきと覚えることができるのではないでしょうか。(筆者は容量が悪いので時間がかかりました)

初心者のかたで何が分からないか分からないという方は、もしjavaScriptでググってこのサイトを見つけたら何かの縁かと

思って試しに動かしてみてくださいね。

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

【Android】アプリ内にデータを保存できる「SharedPreferences」

Androidでアプリを開発する際、ちょっとしたデータを保存したいときがあるかと思います。
Webであれば、Cookie や LocalStorage が使えますが、Android の場合でもよく似た仕組みがあります。
それがこちらの「SharedPreferences」です。

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

[Android] データを保存し Android Studio で確認 SharedPreferences
https://akira-watson.com/android/sharedpreferences.html

 

早速使い方はこちら。

SharedPreferences dataStore = getSharedPreferences("DataStore", MODE_PRIVATE);
Editor editor = dataStore.edit();
// 保存するデータを追加
editor.putString("input", "abcdefg");
editor.apply();

なお、getSharedPreferences() の第2引数で指定している MODE_PRIVATE とは「このアプリからのみ読み書き可能」という意味になります。
基本的には、これでOKだと思います。

また、データはほかにも下記の型を保存できます。

editor.putInt("DataInt", 123);
editor.putBoolean("DataBoolean", true);
editor.putLong("DataLong", 12345678909876L);
editor.putFloat("DataFloat", 12.345f);

そして、読み出しは下記のようになります。

String dataString = dataStore.getString("input", null);

読み出しについてはいたってシンプルですね。
なお、第二引数には、データを取得できなかった場合の代用値を指定します。

他の型の取得については下記のとおりです。

int dataInt = dataStore.getInt("DataInt", 0);
boolean dataBoolean = dataStore.getBoolean("DataBoolean", false);
long dataLong = dataStore.getLong("DataLong", 0);
float dataFloat = dataStore.getFloat("DataFloat", 0);

 

以上、アプリ内にデータを保存できる SharedPreferences の使い方でした。
データベースに保存するまでもないような、小さなデータなどでしたらこれで事足りるかと思います。
是非、便利に使ってください。

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

Laravelのデバッグ用関数dd()

 dd()はdump and dieの略です。何をやるかというとLaravel用の便利なvar_dump();exit;です。
 dd()の使い方はシンプル。Laravelフレームワークのphpコード内で次の様に記述するのみです。

dd(変数名A,変数名B,..)

 これを実行した場合、次の図の様に渡した変数を読みやすい形で表示するhtmlコードが返されます。
 
 特に便利なのは図にあるquery builderの様な巨大な構造体を読みたい時です。通常のvar_dump()で表示しようとした場合、とても読めたものではありません。var_dumpでは常に全展開の為、長いkeyと深いネストを持ってしまった場合、表示すら難しいです。
 dd()の定義はvendor/laravel/framework/src/Illuminate/Support/helpers.phpにあります。

    /**
     * Dump the passed variables and end the script.
     *
     * @param  mixed  $args
     * @return void
     */
    function dd(...$args)
    {
        foreach ($args as $x) {
            (new Dumper)->dump($x);
        }

        die(1);
    }

 dieはexitと同じなので読み飛ばしです。Dumperの中を追うとvendor/laravel/framework/src/Illuminate/Support/Debug/Dumper.phpを読むことになります。

use Symfony\Component\VarDumper\Cloner\VarCloner;
use Symfony\Component\VarDumper\Dumper\CliDumper;

class Dumper
{
    /**
     * Dump a value with elegance.
     *
     * @param  mixed  $value
     * @return void
     */
    public function dump($value)
    {
        if (class_exists(CliDumper::class)) {
            $dumper = in_array(PHP_SAPI, ['cli', 'phpdbg']) ? new CliDumper : new HtmlDumper;

            $dumper->dump((new VarCloner)->cloneVar($value));
        } else {
            var_dump($value);
        }
    }
}

 ここでSymfonyのvar_dumperに渡してLaravel自身のコードは終わります。Symfonyのvar_dumperの中は満足いくeleganceな表示を行うためにいくらか大きな処理をしています。CliDumper.phpだけで600行程、htmlDumperは900行程で記事に書き起こす程読み込む気力はありませんでした。

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

【Android】XMLをJSONに変更できるライブラリ「JSONIC」

結論から言うと、私の環境ではうまく使えなかったので、実際の使用は見合わせました。
が、かなり便利そうだったので、いつか使うとき用に備忘録としてまとめます。

今回紹介するのは、「JSONIC」というJava用のシンプルかつ高機能なJSONエンコーダー・デコーダーライブラリです。
GitHubはこちらから。

GitHub – hidekatsu-izuno/jsonic: simple json encoder/decoder for java
https://github.com/hidekatsu-izuno/jsonic

…しかし、よく見たら、今後機能強化が行われることがないメンテナンスモードに移行するとのこと。
もし利用する場合は、jackson への移行をおすすめしているとのことでした。

 

使い方のサンプルコードはこちら。

import net.arnx.jsonic.JSON;

// POJOをJSONに変換します
String text = JSON.encode(new Hoge());

// JSONをPOJOに変換します
Hoge hoge = JSON.decode(text, Hoge.class);

いたってシンプルです。

また、XMLをJSONに変換したい場合は、下記のようにします。

Document doc = builder.parse(new File([変換したいXMLファイル]));
String xmljson = JSON.encode(doc);

例えば、下記のようなXMLファイルを変換すると、

<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Feed Title</title>
  <entry>
    <title>Entry Title</title>
  </entry>
</feed>

変換後のJSONは下記のようになります。

["feed", {"xmlns": "http://www.w3.org/2005/Atom"},
    ["title", "Feed Title"],
    ["entry",
        ["title", "Entry Title"],
    ]
]

なお、この時、タグ間の空白文字も TextNodeとして出力されるらしいので、これが不要な場合は、DOM作成時に取り除く必要があるとのことでした。

 

以上、簡単ではありますが、JSONIC ライブラリの使い方でした。
もし、JSONのエンコード・デコードをシンプルに行えるライブラリをお探しでしたら、参考にしていただければと思います。
が、最初に書いたように、JSONIC は今後機能強化を行わないとのことでしたので、利用する場合は、jackson を使用するようにしてください。

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

【Cordova】初回起動時にcordova-plugin-ibeaconが表示するAlertを非表示にする方法

タイトル通り、cordova-plugin-ibeacon プラグインが表示しているアラートを非表示にする方法です。
実際に表示されるアラートはこちら。

表示されているメッセージ自体は「このアプリケーションがビーコンを検出できるようにアクセスを許可してください」なので、これ自体に問題はないのですが、文章はプラグインの中で指定されているものですし、このアラートとは別に、位置情報の取得許可を求めるダイアログが表示されるので、表示させないほうが綺麗かなと思います。
表示/非表示はお好みかもしれませんが、私の場合、現在開発中のアプリは日本語表記のみなので、英語のアラートは非表示にしようと思います。

 

さて、このアラートを表示させないようにする方法ですが、このプラグインを追加した時に追加される LocationManager.java というファイルの中を修正します。

で、このLocationManeger.java の302行目辺りに、AlertDialog の設定をしている記述がありますので、そこを確認します。
AlertDialog もしくは、アラートメッセージの「Please grant location access so this app can detect beacons.」で調べれば、すぐに見つかると思います。
そして、その記述の下の方に、builder.show(); という記述があり、ここで Alert を表示しています。
なので、これをコメントアウトします。

作業としては以上です!
あとは、一旦アプリを削除して再インストールするか、Android の設定 > アプリ からこのアプリの設定を開き、データを削除してから再度起動すれば、アラートが表示されないことを確認できるかと思います。

 

以上、cordova-plugin-ibeacon が表示しているアラートを非表示にする方法でした。
良かったら参考にしてください。

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

JavaScriptを試し、公開するwebサービスJSFiddleの紹介

 Create a new fiddle – JSFiddle
 JSFiddleはオンラインのJavaScriptテスト環境です。JSFiddleにはコードを簡単に書き、共有できるような環境が整っています。JSFiddleを開いた画面が下です。
 
 赤で囲ったチェックボックスだけでjQuery、Vue、React等のモダンなjs,cssにコンパイルされる言語、フレームワークの環境を整えてくれます。右下のresultとある部分に実行結果が出力され、リアルタイムに更新をかけるようにも設定できます。このおかげで規模によってはローカルよりも楽にコーディングができます。
 コードを保存し、リンクに貼ること、webページに埋め込むことも簡単です。Embedを開くだけで、リンク、簡潔な完成した状態のiframeタグが出力されます。
 
 Vueのテストコードを埋め込んだ結果が次です。
 https://jsfiddle.net/ken3desu/oyhefw6j/
 iframe出力もあっさりできます。
 

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

【Cordova】現在の位置情報を取得できる「cordova-plugin-geolocation」プラグイン

タイトル通り、Cordovaで開発中のアプリで現在地の緯度・経度を取得する方法です。
今回使用したプラグインはこちら。

GitHub – apache/cordova-plugin-geolocation: Apache Cordova Plugin geolocation
https://github.com/apache/cordova-plugin-geolocation

このプラグインでは、現在の位置情報を1度だけ取得したり、もしくは定期的に位置情報をし続けることができます。

インストールコマンドはこちら。

cordova plugin add cordova-plugin-geolocation

実際のコードはこちら。

// 成功した時の処理
var onSuccess = function(position) {
    console.log('Latitude: ' + position.coords.latitude);
    console.log('Longitude: ' + position.coords.longitude);
};
// 失敗した時の処理
function onError(error) {
    console.log('code: ' + error.code);
    console.log('message: ' + error.message);
}

var option = { timeout: 30000 };
// 現在の位置情報を1度だけ取得
navigator.geolocation.getCurrentPosition(onSuccess, onError, option);

成功時の処理、失敗時の処理に加えて、オプションを追加することができます。
上記のコードではタイムアウトの時間を指定しています。
他にも、enableHighAccuracy : true を指定すると、高精度な位置情報を取得できます。
もし、なるべく正確な位置情報を取得したい場合は、こちらのオプションを追加してください。

定期的に位置情報を取得し続けたいときは、navigator.geolocation.watchPosition() を使います。
なお、引数は navigator.geolocation.getCurrentPosition() と同じです。

 

ちなみにおまけですが、2点間の距離を求める方法について、リンクを張っておきます。

地球上の2点間の直線距離を求める – Qiita
https://qiita.com/s-yoshiki/items/b0a6f2143db0e1a191e8

主に自分の備忘録のためのメモですが、恐らく緯度・経度を取得した時に行うことが多い処理ではないかなと思います。
こちらも是非参考にしてください。
 
以上、Cordovaのアプリで現在地の緯度・経度を取得する方法でした。

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