カテゴリーアーカイブ JavaScript

村上 著者:村上

【Cordova】端末内のファイルを開くプラグイン「cordova-plugin-file-opener2」

前回、端末に画像や音声ファイルをAndroidなどの端末にダウンロードするプラグインを紹介したので、今回は端末内のファイルを開く方法について。
使用したプラグインは「cordova-plugin-file-opener2」です。

GitHubは下記からご確認ください。

GitHub – pwlin/cordova-plugin-file-opener2: A File Opener Plugin for Cordova
https://github.com/pwlin/cordova-plugin-file-opener2

 

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

cordova plugin add cordova-plugin-file-opener2

使い方はとても簡単で、下記のように開きたい端末内のファイルのパスと、その MIMEタイプを指定するだけ。

cordova.plugins.fileOpener2.open(
    [開きたいファイルのパス], 
    [ファイルのMIMEタイプ], 
    {
        error : function(){
            // ファイル展開 失敗時に実行する処理
        }, 
        success : function(){
            // ファイル展開 成功時に実行する処理
        } 
    } 
);

ファイルのパスは、/storage/emulated/0/Pictures/[ファイル名].jpg のような感じで指定します。
こちらのパスの値については、私の環境では、ファイルダウンロードに成功した時に取得できる file:///storage/emulated/0/Pictures/[ファイル名].jpg から、file:// を取ったものを使っています。

ご覧の方の環境に合うかは分かりませんが、参考にコードを記載しておきます。

window.document.addEventListener('DOWNLOADER_downloadSuccess', function(event) {
  const data = event.data;
  const filePath = data[0].nativeURL.replace(/^file:\/\//, '');

  if (fileMIMEType !== null) {
    window.cordova.plugins.fileOpener2.open(
      filePath,
      'image/png',
      {
        error: function() {
          // ファイル展開失敗時の処理
        },
        success: function() {
          // ファイル展開成功時の処理
        },
      }
    );
  }
});

こちらはとりあえずAndroidで動作するようにしてあるだけなので、iOS には対応していません。これからやります。
なお、MIMEタイプについても、とりあえず png 形式のみ対応なので、もし扱うファイル種類が定義されていない場合は、拡張子で jpg、gif くらいは判断できるようにしたほうが良さそう。

ちなみに、動作確認中に、うっかり音楽ファイル(mp3)を imgae/png で開いてしまいましたが、エラーにはならず、ファイルが壊れているような表示になりました。
その後、きちんと audio/mp3 にしたら、開くアプリの選択肢が表示され、再生もできるようでしたので、音声ファイルも問題なさそうです。

 

以上、Android端末内のファイルをアプリで開く方法でした。
とりあえず、Androidに問題がなかったので、iOS でも使えるように修正していきたいと思います。

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

【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)
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)
村上 著者:村上

【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)
村上 著者:村上

【React】JavaScriptでポップアップを実装する方法

今後、再び使う機会がありそうなので、備忘録としてまとめ。
今回は、JavaScript でポップアップを表示させる方法についてです。
なお、使用しているフレームワークは React です。

参考に…というかコードをコピペさせていただいたサイトはこちら。

Simple react popup example
https://codepen.io/bastianalbers/pen/PWBYvz

なお、こちらは、下記の記事からリンクされていたサイトです。

JavaScriptを使ったポップアップウィンドウの表示方法|CodeCampus
https://blog.codecamp.jp/programming-javascript-pop-up

上記の記事では、CSS や jQuery、React だけでなく、AngularJS や WordPress のプラグインについてのリンクもあり、かなり種類豊富です。
また、Reactについてはコピー&ペーストで使えるので、かなり助かりました…!

 

実装のためのコードは下記のとおりです。
■HTML


<div id="content"></div>

■CSS

h1 {
  margin: 0;
  padding: 0;
}
html, body, .app {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100vh;
}
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(0,0,0, 0.5);
}
.popup_inner {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
  margin: auto;
  background: white;
}

■JavaScript

class Popup extends React.Component {
  render() {
    return (
      <div className='popup'>
        <div className='popup_inner'>
          <h1>{this.props.text}</h1>
          <button onClick={this.props.closePopup}>close me</button>
        </div>
      </div>
    );
  }
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      showPopup: false
    };
  }
  togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup
    });
  }
  render() {
    return (
      <div className='app'>
        <button onClick={this.togglePopup.bind(this)}>show popup</button>
        {this.state.showPopup ? 
          <Popup text='Close Me' closePopup={this.togglePopup.bind(this)} />
          : null
        }
      </div>
    );
  }
};

ReactDOM.render(
  <App />,
  document.getElementById('content')
);

必要なさそうなところは割愛させていただきました。
上記のコードを追加して実行すると、画面に「show popup」というボタンが表示されるはずです。
で、そのボタンをクリックすると、ポップアップが表示されます。
ポップアップを閉じるときは、「close me」ボタンをクリックします。

簡単に解説すると、ポップアップの表示・非表示は、showPopup という state で制御しており、この値が true だとポップアップを表示し、false だとポップアップが非表示になります。
で、「show popup」がクリックされると、showPopup が true に、「close me」クリックで showPopup が false になります。
ちなみに、「close me」ボタンが押されたときの処理は、App クラス内の togglePopup 関数で定義していますので、処理の内容を変更したい場合はこちらを確認してください。

 

以上、Reactでポップアップを実装する方法でした。

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

【Cordova】アプリで簡単にトーストを表示できる「Toast-PhoneGap-Plugin」

今日は、Cordovaアプリでトーストを表示するプラグインについてご紹介。
使用したのは「Toast-PhoneGap-Plugin」というプラグインで、コードも単純で分かりやすかったです。
GitHubのページは下記からご確認頂けます。
EddyVerbruggen/Toast-PhoneGap-Plugin: A Toast popup plugin for your fancy Cordova app
https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin

 

プラグインのインストールは下記のコマンドで行います。

cordova plugin add cordova-plugin-x-toast

トーストを表示するためのコードは下記のとおりです。

window.plugins.toast.showWithOptions(
    {
        message: "[メッセージ内容]",
        duration: "short",  // 表示する時間
        position: "bottom",  // 表示位置
    }
);

表示位置は、’top’, ‘center’, ‘bottom’ のいずれかを選択します。
表示時間は、’short’, ‘long’ もしくは ミリ秒単位で数値を指定することもできます。

また、表示に成功・失敗した時の処理を追加することもでき、その場合は下記のように記述します。

window.plugins.toast.showWithOptions(
    {
        message: "[メッセージ内容]",
        duration: "short",  // 表示する時間
        position: "bottom",  // 表示位置
    },
    //Success callback
    function(args) {
        // 成功した時の処理
        console.log(args.event);
    }, 
    function(error) {
        // 表示に失敗した時の処理
        console.error('toast error: ', error);
    }
);

また、トーストエリアの背景色を変更したり、文字色を変更したり、更には背景の透明度や四隅の丸みを指定することもできるようです。
指定の方法例は下記のとおりです。

window.plugins.toast.showWithOptions({
    message: "[メッセージ内容]",
    duration: "short",  // 表示する時間
    position: "bottom",  // 表示位置
    styling: {
        opacity: 0.75, // エリアの透明度
        backgroundColor: '#FF0000', // 背景色
        textColor: '#FFFF00', // 文字色
        textSize: 20.5, // 文字サイズ
        cornerRadius: 16, // 四隅の丸み
    }
});

こう見ると、かなり自由度が高いですね。
アプリの配色に合わせてカスタマイズしてもいいかもしれません。

最後に、トーストは時間経過で自動的に消えますが、もし手動で消したい場合はこちらを実行します。

window.plugins.toast.hide();

こちらはあまり使用する機会はないかも?

 

以上、Cordovaアプリでトーストを表示する方法でした。
分かりやすいし、カスタマイズもかなり自由に行えるのでお勧めです。
是非、ご活用ください。

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

【cordova-react】チェックボックス実装

reactを勉強してから今に至るまで数多くのコンポーネントを作っていました。今作っているアプリにチェックボックスが必要ということ

が分かり色々参考にしながら実装することになりました。チェックボックスとはアンケートなどでよく使われる一般的なコンポーネント

で、クリックするとレ点が出現します。これをtrueの状態と呼び、レ点が入っていない時はfalseになっている状態と頭の隅に置いておき

ましょう。今回のポイントとしては以下の2点に重点を置きました。↓

・チェックボックスが一つだけあるフォーム

・trueになった時にある値をsetStateする

チェックボックスが複数ある時はmapでまとめてrenderに描画できるよな、でも単体でも機能してくれるのかな?みたいな疑問が浮かび

ましたが杞憂に終わりました。チェックボックス一つだけの実装はそんなこと考えるまでもなくさくっとできてしまいました。

前置きで黒く箇条書きで書いてしまいましたが大したことではなかったです、すみません・・。


<input type="checkbox" value="1" onChange = {this.onPermission} defaultChecked={this.state.checked} ></input>利用規約に同意する

こんな感じです。もしよかったらコピペして使ってみてください。defaulCheckedで初期値がtrueかfalseか選べます。

 

2点目もそこまで大したことない・・・ですがコンポーネントの作り方自体分からなくて躓いている初心者の方々のためにあえて簡単に

抽象的に説明します。字面通りですがtrueになった時にsetstateで値を飛ばしてあげるという単純明快な行為です。

<pre>  onPermission(e) {
    this.setState({checked: !this.state.checked});
    if (this.state.checked) {
      return;
    } else {
      console.log('success');
      const date = new Date();
      this.setState({permission: date});
    }
  }
</pre>

長ったらしいのは好きでないのでコード載せちゃいますね。(#^^#)

動作はそのまま、onPermissionが押されたらcheckedの値がsetStateされます。手前のビックリマークは現在のcheckedパラメータではない

ほう、つまりデフォルトの値falseの逆の値のtrueをsetStateしますよ!という意味になります。

falseのままだとreturnで何もせず、trueならば現在時刻をsetStateするコードだとはっきり見て取れると思います。

 

確実にこれより綺麗なコードは存在するのですが、僕みたいにreact始めたばかりの方は経験が浅いうちはこれくらいの雑多なコードのほ

うが覚えやすい気がします。

 

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

【Cordova】外部サイトをアプリ内ブラウザで表示する方法

実際に試してはいないのですが、今後実装すると思われるので、その備忘録としてまとめ。

見つけた記事はこちらです。

PhoneGap/Cordovaでの外部サイトリンク 内部表示/アプリ内ブラウザ/標準のブラウザ – Qiita
https://qiita.com/tsunet111/items/272f3e052c332ddf9b9d

 

実装方法ですが、Cordova の初期テンプレートに最初から追加済みのプラグイン「cordova-plugin-whitelist」を使います。
まず、config.xml にアプリ内で表示したいアドレスを追加します。
記述例は下記のとおりです。

<allow-navigation href="https://cpoint-lab.co.jp/*" />

上の例では、このサイト全体の表示を許可しています。

<a href="https://cpoint-lab.co.jp/">株式会社シーポイントラボ</a>

あとは、aタグでリンクを設置します。
作業としては以上です。
こちらを実行すると、ホワイトリストに追加したアドレスであれば、内部ブラウザで表示されます。
なお、それ以外のアドレスにアクセスした場合は、端末のデフォルトブラウザが起動しますので、ご注意ください。

 

以上、Cordovaアプリのアプリ内ブラウザで外部サイトを表示する方法でした。
もし、上記の方法でうまくいかない場合は、「cordova plugin add cordova-inappbrowser」を使う方法もあるとのこと。
ホワイトリストが働かない場合は、こちらのプラグインもお試しください。

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