月別アーカイブ 11月 2018

村上 著者:村上

【Cordova】端末にファイルをダウンロードするプラグイン「cordova-plugin-file-downloader」【解決済】

昨日投稿した、「cordova-plugin-file-downloader」について、問題なく動作させることができたので…というか、ダウンロードできていたことが分かったので、それのご報告です。

昨日の記事はこちらから。

【Cordova】端末にファイルを保存するプラグイン「cordova-plugin-file-downloader」【未動作】
https://cpoint-lab.co.jp/article/201811/【cordova】端末にファイルを保存するプラグイン「cordova-plugi/

 

ダウンロードしたファイルの確認方法ですが、私の端末(Android 7.0)では「ダウンロード」アプリから確認ができました。
まず、アプリ一覧から「ダウンロード」アプリを開き、サイドメニューから、端末のローカルストレージを選択します。
画面イメージは下記のとおりです。

ローカルストレージを選択すると、フォルダ一覧が表示されるので、ここからプラグインの初期設定時に folder で指定したフォルダ名を探します。
無事見つかれば、このフォルダ内にダウンロードしたファイルが保存されているはずです。

ちなみに、そのコードはこちら。

downloader.init({folder: "[端末の保存先ファイル名]"});

ということで、ただ単に私がダウンロードが完了したファイルを探せなかっただけでした!
大変失礼致しました…!

 

さてしょうもない結末だったので、ダウンロード後の処理を記述する方法についてご紹介したいと思います。
オプションに onSuccess とかの指定ができなかったので、てっきり出来ないかとも思いましたが、ちゃんとありました!
コードは下記のとおりです。

document.addEventListener('DOWNLOADER_downloadSuccess', function(event) {
  const data = event.data;
  console.log(data[0].name);
  console.log(data[0].fullPath);
  console.log(data[0].nativeURL);
});

document.addEventListener の第一引数で、DOWNLOADER_downloadSuccess を指定すると、ファイルのダウンロードに成功した時にこの関数が呼び出されます。
で、変数 event に、データが入っているので、上記のように指定すると、ファイル名や保存先のパスなどが取得できます。

第一引数は、他にも DOWNLOADER_downloadErrorDOWNLOADER_downloadProgress なんかもあるので、ご要望に合わせて使い分けてください。

 

以上、cordova-plugin-file-downloader を使ったダウンロード方法とダウンロードしたファイルの確認方法でした。

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

PHPのNull合体演算子

 PHPはユーザの投げてきた値、DBから取得した値といった、存在するかも怪しい値を扱うことが多いです。この問題への対策の定番は条件文とissetです。issetは変数がセットされていること、そして NULL でないことを検査する関数です。
PHP: isset – Manual
PHP: PHP 型の比較表 – Manual
条件文とissetを用いて真面目に素朴な書き方をするならば次の様になります。

if(isset($_GET['user'])){
    $user = $_GET['user'];
} else {
    $user = 'nobody';
}

 5行になりました。この処理と同じ処理を何度も記述する場合、ソースコードは巻物の様に長くなります。条件文がシンプル、行う処理もシンプル、であるならば三項演算子がきれいに記述をしてくれます。三項演算子を用いた例は次になります。

$user = isset($_GET['user']) ? $_GET['user'] : 'nobody';

 1行に収まりずいぶんましになりました。しかしながら、ある値が存在するならばその値を扱うという処理は定番であり、三項演算子を用いた場合、二重にある値――例ならば$_GET[‘user’]の繰り返し――が冗長です。Null合体演算子はこれを解決します。Null合体演算子による記述は次です。

$user = $_GET['user'] ?? 'nobody';

PHP: 比較演算子 – Manual
 もうこれ以上ないくらいシンプルな記述になりました。最初のif文と同じ働きをしますが行数は1行、横の長さも大して変わりません。長大な参照名がついてしまっていても変数を増やさず二行で書けます。

$user_point_total = User::findOrFail($_POST['primary_key'])->userPointTotal->point_total
   ?? UserPointTotal::$default_points;
  • この記事いいね! (0)
asaba 著者:asaba

【cordova-react】エラー備忘録:propTypeの型を間違えた

コンポーネントのpropの値を渡すときはpropTypeパッケージを使いますが、proptypeの方の指定を間違えるとエラー(Warning: Failed

propType: Invalid prop of type `array`)で怒られてしまいます。これはjsonで受け取る時の型が定義した型と違う時に起きるエラーです。

例えばですが[]javascript]

"point": [
{
"math": 1,
"math": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
},

jsonファイルを見ると、上のmathはkeyと値で定義しただけなので下のように定義をします。



itemKeys: PropTypes.string.isRequired

ところが下のmathは、配列で値を囲んでおり、これをproptypes.stringで定義してしまうと型が違うよと怒られてしまう訳ですね~。

配列の時は下記のように定義して上げましょう。


itemKeys: PropTypes.array.isRequired

stringのところがarrayに変わっただけなので 形式はあまり変わらないです。日本語の記事が少なかったのでもし同じエラーで悩んでいる

かたがいたら参考にしてみてください。

参考URL->https://stackoverflow.com/questions/37063418/warning-failed-proptype-invalid-prop-of-type-array-expected-object-with-re

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

ペアリング済みの端末がPCから離れたときに自動でWindowsをロックする標準機能「動的ロック」

Windows10にはアップデートで知らないうちにとても便利な機能が追加されていることがよくあります。

今回ご紹介する標準機能「動的ロック」もその一つです。

設定は下記手順で行います。(※あらかじめスマートフォンやタブレットをPCとBluetoothでペアリングしておく必要があります。)
まず、スタートメニュー(Windowsアイコン)から歯車アイコンをクリックします。

開いた設定画面から
アカウント->サインインオプション
と辿っていくと、画面の中に”動的ロック”
という項目が見えるかと思います。

項目内の
“その場にいないときにWindowsでデバイスを自動的にロックすることを許可する”
にチェックを入れます。

“ペアリングしたデバイスを探しています”
と出てくるので消えるまで待ちます。

文字が消えれば設定完了です。

この状態で、PCとペアリングしたスマホやタブレットをもってPCから離れると、一定以上の距離に離れてから約1分で自動的にロックされます。
なお、スマートフォンを再び近づけてもロックは解除されませんので注意してください。。

第三者に触られると困るPCを使用していて、いつもついついロックを忘れてしまう方、ロック操作を毎回するのはめんどくさい…という方は是非一度試してみてください。

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

【Cordova】端末にファイルを保存するプラグイン「cordova-plugin-file-downloader」【未動作】

Cordovaアプリにて画面にダウンロードボタンを配置し、それをタップしたら、あらかじめ指定しておいた画像ファイルをダウンロードする、という処理を行いたいのですが…現在、絶賛苦戦中です。
今回使用しているプラグインは「cordova-plugin-file-downloader」です。
コードがとてもシンプルで簡単だったので、指定ミスはないはずなのですが…。
エラーが発生しない、私の苦手なパターンにハマっています。

公式ページはこちらから。

GitHub – mramonlopez/cordova-plugin-file-downloader: Phonegap plugin to download a list of files or a single file to the phone, check consistency and unzip if necessary (Android and ios)
https://github.com/mramonlopez/cordova-plugin-file-downloader

cordova-plugin-file-downloader – npm
https://www.npmjs.com/package/cordova-plugin-file-downloader

 

プラグインの導入時は、下記のコマンドを実行します。

cordova plugin add cordova-plugin-file-downloader

もっともシンプルな実装方法は下記のとおりです。

downloader.init({folder: "[端末の保存先ファイル名]"});
downloader.get("[保存したいファイルのパス]");

1行目の初期化については、オプションがいくつかありますが、folder については必須事項なので、必ず指定してください。
例えばアプリ名などの文字列を指定すればよいかと。
他にも、zipファイルをダウンロードした際に、ダウンロード完了後に解凍する unzip や、展開後の zip ファイルを削除する delete オプションもあります。
また、wifiOnly という、Wi-Fiに接続されているときのみダウンロードを行うというオプションもあります。
なお、これはデフォルト値が true なので、あえて指定する必要はなさそうです。

 

プログラムとしては以上なので、こちらを実行すれば動作するはずが…何故かダウンロードできず。
ログには、download [ダウンロードしたファイルのパス] to [端末に保存したファイルのパス] とか、Saved file: [端末に保存したファイルのパス] というメッセージがあったので、ダウンロードできているようにも見えたのですが、いくら探してもダウンロードした画像が見つかりませんでした。
なおインストール時に、下記を config.xml の タグ内に追加しろとあったので、それについては対応しました。

<preference name="AndroidPersistentFileLocation" value="Compatibility" />

こちらのコードの意味は、以前の設定(Compatibility)をそのまま使用してファイルの保存するという意味になるとのこと。
value は Internal という値を指定することも可能で、こちらでは内部の保存場所を使用します。

 

幸い、若干の時間的猶予はあるので、引き続き調査したいと思います。
もしくは、違うプラグインを使うことを検討してもいいかもしれませんね。

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

【javaScript】readDataURLのエラー解決備忘録

inputタグで’file’と設定すると、ギャラリーから画像を選択してそれをimgタグに紐付けてあげれば選択した画像をアップロードすることが

できますが、ギャラリーから画像を選んでいてそれをキャンセルした時にエラーが起きました。アプリの機能面では影響がなかったもの

のメンテナンスの時にこのままでは可読性が下がるし追加した機能がバグを起こすかもしれないと思ったので修正を試みました。

画像はnpm startで起動したものです。

Filereaderで読み取った値がblobでなかったので実行できませんでしたという訳でしょうか。画像を選ばなかった時のreadDataURLの

進路先が用意されていなかったために起きたのだと思われます。とりあえずifで分岐点を作ってあげて、falseの時はreturnで処理を終える

宣言を用意してあげることで解決させることができました。めでたしめでたしです。

 

<pre>    if (file) {
      fr.readAsDataURL(file);
    } else {
      return;
    }
</pre>

 

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

ESLintのJSDoc用プラグインeslint-plugin-jsdoc

End-of-Life for Built-in JSDoc Support in ESLint – ESLint – Pluggable JavaScript linter
 ESLintはJavaScriptの詳細で厳密なチェックをし、簡単なものによっては修正も行ってくれる検証ツールです。JSDocは次の様なJavaScript中のコメントのテンプレートです。

    /**
     * 現在のソートの状態からアイコンを表示するべきかを判断する
     * @param {String} column カラム名
     * @param {String} ascOrDesc 昇順か降順か
     * @return {Boolean} アイコンを表示するべきならtrue
     */
    shouldDisplayIcon: function(column, ascOrDesc) {

 JSDocは読みやすいことの他にもIDE等ソースコードを対象としたアプリ―ケーションで利用でき便利です。ESLintもJSDocを素でサポートしていたのですが、ESLintとJSDocの発展とメンテナ(スタッフみたいなもの)の規模の関係からJSDocのサポートが打ち切られました。これに従って、既存のJSDoc用ルールが非推奨ルールになりました。ESLintが勧めるJSDoc関連ルールを設定できる移行先プラグインがeslint-plugin-jsdocです。
eslint-plugin-jsdoc – npm
 eslint-plugin-jsdocはESLint本体よりもJSDocに詳細なルールが用意されており、より厳密なルールによってJSDocを検証できます。readmeに載っていませんがrecommendedによるルールのプリセットも用意されています。次の様に.eslintrc.jsonに記述してサクッと使えます。

  "plugins": [
    "jsdoc"
  ],
  "extends": [
    "plugin:jsdoc/recommended",
  ],
  • この記事いいね! (1)
takahashi 著者:takahashi

【要注意】WIndows に iCloud をインストールしているユーザーはWindowsUpdate経由でOctober Updateを適用できない可能性

WindowsにiCloud for Windows 7.7をインストールしていると、互換性の問題でWindows Update経由のOctober Updateの適用がブロックされるようです。

iCloud for Windows7.7はOctober updateとの互換性がなく、アップグレードツールを用いて手動で行った場合は、October Update適用後にiCloud for Windows 7.7が起動できなくなります。

「iCloud for Windows 7.8.1」を公開 ~「Windows 10 October 2018 Update」に対応 – 窓の社

上記記事によると、リリースノートに修正履歴はないものの、修正が確認されている iCloud for Windows7.8.1 がAppleから公開されており、更新することで問題を回避できるそうです。

iCloud for Windowsを使用されている方で、WindowsにOctober Updateを適用する予定の方は、先にiCloud for Windowsの更新を必ず行ってからWindowsをアップグレードした方がよさそうです。

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

Windows10で起動直後にも関わらず勝手にサインインされる問題の対策法

複数アカウントがあるWindows10で、起動直後でサインイン操作をしていないにも関わらず、サインイン済みになってしまっていることがあります。

この挙動は、起動後から各ユーザーアカウントに設定されている処理などをバックグラウンドで行わせたいときに有効ですが、シャットダウンの際はそれぞれのアカウントをひとつづつサインアウトさせてからでないと正常なシャットダウンができないため面倒です。

今回はこの機能を無効化する方法をご紹介します。

左下のスタートメニュー(Windowsマーク)をクリックしてメニューを表示し、中から歯車アイコンを選択します。
開いたウインドウから
アカウント->サインインオプション
を開きます。

中の”プライバシー”という項目中に”サインイン情報を使用してデバイスのセットアップを自動的に完了し、更新または再起動後にアプリを再び開くことができるようにします。”のチェックをオフにします。

これで以降は自動でログインされなくなります。

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

laravelのモデルであるEloquent ORMのCRUDに使うための便利な機能

Eloquent:利用の開始 5.6 Laravel
 Eloquent ORM(Object Relational Mapping)はPHPのフレームワークlaravelで実装されているSQLによるデータ操作をするモデル部分のことです。laravelでモデルを記述する際、多くの場合で以下の様に継承をします。

use Illuminate\Database\Eloquent\Model;

class Flight extends Model
{
    //
}

 このIlluminate\Database\Eloquent\Model;の中にあるCRUDに使える特に便利な機能を少し紹介します。少し詳しくは冒頭のリンクの説明書、とても詳しくはソースコード参照です。laravelのソースコードはとても丁寧で読みやすいためソースコードだけでも理解が進みます。
 全件取得をする時は次の様に記述できます。

$flights = Flight::all();

 これでSELECT * FROM Flights;の結果をCollection(配列の拡張形式)に変換した相当です。カラムを絞ることも簡単です。

$flights = Flight::all('primary_key', 'created_at');

 これでSELECT primary_key,created_at FROM Flights;の結果をCollection(配列の拡張形式)に変換した相当です。この様によく使われるパターンにはシンプルな回答が大体用意されています。
 ある1件を主キーを頼りに取得する時は次の様に記述できます。

$flight = Flight::find(1);

 これでSELECT * FROM Flights WHERE id = 1;の結果をモデルクラスFlightに変換した相当です。findした場合、対象が存在しないことも考えられます。そのためfindOr***の形で処理が用意されています。

$flight = Flight::findOrFail(2);
$flight = Flight::findOrNew(2);

 前者は見つからなかった場合、404エラーがユーザに返されます。後者は見つからなかった場合、新たにレコードを作成します。
 レコードを作成する時は次の様に記述できます。

$new_flight = [
    'name' => 'hoge',
    'mail' => 'fuga@example.com'
];
Flight::create($new_flight);

 create([‘カラム名’=>値の連想配列])これだけで新たにレコードがFlightsテーブルに追加されます。
 更新する時は次の様に記述できます。

$update_data = [
    'name' => 'fuga',
];
$flight = Flight::findOrFail(1);
$flight->fill($update_data)->save();

 これもcreateに似ています。fillでは渡されたカラム名のデータのみを更新します。createと違ってこちらはより複雑な操作を繰り替えすことも考えられており、save()と命令する必要があります。
 論理削除をする時はモデルにtraitを増やす必要があります。増やさない場合は物理削除です。

class Flight extends Model
{
    use SoftDeletes;
}

 実際に削除する時は次です。

$flight = Flight::findOrFail(1);
$flight->delete();

 これで作成、読み取り、更新、削除でCRUD制覇です。いずれも非常にシンプルに記述でき、大変便利です。

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