カテゴリーアーカイブ JavaScript

著者:杉浦

(Now More Than Ever) You Might Not Need jQueryの紹介

 (Now More Than Ever) You Might Not Need jQuery | CSS-TricksはjQueryなしのJavaScriptコード集です。
 jQueryは2006年に発表され、現在も更新がなされ続けているJavaScriptのライブラリです。jQueryは古い時代のブラウザによる拙いDOM操作を大きくカバーしてきました。このDOM操作はとても強力でcdnとしてもよく引っ張りまわされています。Most copied libraries on cdnjs.com by @thomasdavis – Listiumによれば2015年6月~2017年6月の間、2位に大差をつけてcdnjs.com内で最もcdnのリンクがコピーされたとのことです。
 2013年にYou Might Not Need jQueryという記事が公開されました。これはほんのjQueryなしでちょっとしたDOM操作をするサンプルコードの集まりです。ブラウザの発展やフロントエンドライブラリの充実により少なくない状況でjQueryは必要でなくなったという背景があります。(Now More Than Ever) You Might Not Need jQuery | CSS-Tricksは2017/7/12に公開されたjQueryなしのJavaScriptコードの集まりです。(これまで以上に)の名が示す通り、You Might Not Need jQueryより洗練され、時にはjQuery以上の柔軟性を持った簡単な記述が載っています。
 ReactやVueの様なテンプレートを用いるフロントエンドライブラリによってwebページを作成した場合、DOM操作はほとんど必要なくなり、DOM操作のためにファイルの大部分を費やしているjQueryはむしろ邪魔になります。またjQueryを使わないことによってアンチパターンであるNodelistとjQueryオブジェクトの混在から完全に解放されます。jQueryのオブジェクトとChrome、FirefoxのNodelistには.append()が存在するがIEには存在しない為jQueryオブジェクトでないものにつないでしまった.append()はIEでのみこける、というバグには苦戦しました。

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

CentOS 7 でepelリポジトリのnpmでアップデートを行うとnpmが消されてしまう問題の回避方法

CentOS 7 の新環境を作り、epelリポジトリからyumでnpmをインストール。

sudo yum -y install epel-release
sudo yum -y install npm

npmのバージョンを確認すると
3.10.10
と古かったため

sudo npm -g update npm

としたところ

- fstream-npm@1.2.0 node_modules/npm/node_modules/fstream-npm
- normalize-git-url@3.0.2 node_modules/npm/node_modules/normalize-git-url
- realize-package-specifier@3.0.3 node_modules/npm/node_modules/realize-package-specifier
/usr/lib
└── (empty)

npm ERR! Linux 3.10.0-862.el7.x86_64
npm ERR! argv "/usr/bin/node" "/bin/npm" "-g" "update" "npm"
npm ERR! node v6.14.3
npm ERR! npm  v3.10.10
npm ERR! path /usr/lib/node_modules/npm/node_modules/fs-write-stream-atomic
npm ERR! code EEXIST
npm ERR! errno -17
npm ERR! syscall mkdir

npm ERR! EEXIST: file already exists, mkdir '/usr/lib/node_modules/npm/node_modules/fs-write-stream-atomic'
npm ERR! File exists: /usr/lib/node_modules/npm/node_modules/fs-write-stream-atomic
npm ERR! Move it away, and try again.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/username/npm-debug.log
npm ERR! code 1

のようなエラーが出てしまい、更新に失敗します。
そればかりか…

$ npm -v
-bash: npm: コマンドが見つかりません

$ which npm
/usr/bin/which: no npm in (/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/home/username/.local/bin:/home/username/bin)

なんとnpm本体が消えてしまいました。
そんな馬鹿な…

流石にちょっと困ってしまったので、いろいろ調べたところ、npm公式のGitHubページのIssueでも同様の報告が上がっていました。

Try to update the npm cli and got an error #15821 – GitHub

内容を見ていくと、epelではなくnodejs公式のnodesourceというリポジトリを使用したら成功したという記述が。
半信半疑ながらも、nodesourceを使うことにしました。

とりあえず、一旦npmをアンインストールします。

sudo yum -y remove npm
$ sudo yum -y remove npm
読み込んだプラグイン:fastestmirror
依存性の解決をしています
--> トランザクションの確認を実行しています。
---> パッケージ npm.x86_64 1:3.10.10-1.6.14.3.1.el7 を 削除
--> 依存性の処理をしています: npm = 1:3.10.10-1.6.14.3.1.el7 のパッケージ: 1:nodejs-6.14.3-1.el7.x86_64
--> 依存性の処理をしています: npm = 1:3.10.10-1.6.14.3.1.el7 のパッケージ: 1:nodejs-6.14.3-1.el7.x86_64
--> トランザクションの確認を実行しています。
---> パッケージ nodejs.x86_64 1:6.14.3-1.el7 を 削除
--> 依存性解決を終了しました。

依存性を解決しました

========================================================================================================================
 Package                 アーキテクチャー        バージョン                                リポジトリー            容量
========================================================================================================================
削除中:
 npm                     x86_64                  1:3.10.10-1.6.14.3.1.el7                  @epel                  9.8 M
依存性関連での削除をします:
 nodejs                  x86_64                  1:6.14.3-1.el7                            @epel                   16 M

トランザクションの要約
========================================================================================================================
削除  1 パッケージ (+1 個の依存関係のパッケージ)

インストール容量: 26 M
Downloading packages:
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
  削除中                  : 1:npm-3.10.10-1.6.14.3.1.el7.x86_64                                                     1/2
警告: ファイル /usr/lib/node_modules/npm/scripts/update-authors.sh: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/scripts/relocate.sh: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/scripts/release.sh: 削除に失敗しました: そのようなファイルやディレクトリはあり ません
警告: ファイル /usr/lib/node_modules/npm/scripts/publish-tag.js: 削除に失敗しました: そのようなファイルやディレクトリは ありません
警告: ファイル /usr/lib/node_modules/npm/scripts/maketest: 削除に失敗しました: そのようなファイルやディレクトリはありま せん
警告: ファイル /usr/lib/node_modules/npm/scripts/install.sh: 削除に失敗しました: そのようなファイルやディレクトリはあり ません
警告: ファイル /usr/lib/node_modules/npm/scripts/index-build.js: 削除に失敗しました: そのようなファイルやディレクトリは ありません
警告: ファイル /usr/lib/node_modules/npm/scripts/gen-changelog: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/scripts/doc-build.sh: 削除に失敗しました: そのようなファイルやディレクトリはあ りません
警告: ファイル /usr/lib/node_modules/npm/scripts/dev-dep-update: 削除に失敗しました: そのようなファイルやディレクトリは ありません
警告: ファイル /usr/lib/node_modules/npm/scripts/dep-update: 削除に失敗しました: そのようなファイルやディレクトリはあり ません
警告: ファイル /usr/lib/node_modules/npm/scripts/clean-old.sh: 削除に失敗しました: そのようなファイルやディレクトリはあ りません
警告: ファイル /usr/lib/node_modules/npm/scripts/changelog.js: 削除に失敗しました: そのようなファイルやディレクトリはあ りません
警告: ファイル /usr/lib/node_modules/npm/scripts: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/package.json: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules/realize-package-specifier: 削除に失敗しました: そのようなファイル やディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules/normalize-git-url: 削除に失敗しました: そのようなファイルやディレ クトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules/fstream-npm: 削除に失敗しました: そのようなファイルやディレクトリ はありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/write-file-atomic/package.json: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/write-file-atomic/index.js: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/write-file-atomic/README.md: 削除に失敗しました: そのよう なファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/write-file-atomic/LICENSE: 削除に失敗しました: そのような ファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/write-file-atomic: 削除に失敗しました: そのようなファイル やディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/wrappy/wrappy.js: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/wrappy/package.json: 削除に失敗しました: そのようなファイ ルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/wrappy/README.md: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/wrappy/LICENSE: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/wrappy: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/which.js: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/package.json: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules/isexe/windows.js: 削除に失敗しました:  そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules/isexe/package.json: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules/isexe/mode.js: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules/isexe/index.js: 削除に失敗しました: そ のようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules/isexe/access.js: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules/isexe/README.md: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules/isexe/LICENSE: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules/isexe/.npmignore: 削除に失敗しました:  そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules/isexe: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/node_modules: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/bin/which: 削除に失敗しました: そのようなファイルや ディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/bin: 削除に失敗しました: そのようなファイルやディレ クトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/README.md: 削除に失敗しました: そのようなファイルや ディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/LICENSE: 削除に失敗しました: そのようなファイルやデ ィレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which/CHANGELOG.md: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/which: 削除に失敗しました: そのようなファイルやディレクト リはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/package.json: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/node_modules/builtins/package.json: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/node_modules/builtins/builtins.json: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/node_modules/builtins/Readme.md: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/node_modules/builtins/History.md: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/node_modules/builtins/.travis.yml: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/node_modules/builtins: 削除に失 敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/node_modules: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/index.js: 削除に失敗しました: そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/README.md: 削除に失敗しました:  そのようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/LICENSE: 削除に失敗しました: そ のようなファイルやディレクトリはありません
警告: ファイル /usr/lib/node_modules/npm/node_modules.bundled/validate-npm-package-name/.npmignore: 削除に失敗しました: そのようなファイルやディレクトリはありません
(省略)

大量の”ファイルが見つかりません”エラーが。
やっぱり本当に消えてしまってるようです…

アンインストールが完了したらnodesourceリポジトリをインストールします。

curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -

処理が完了したら、”npm”ではなく”nodejs”パッケージをインストールします。

sudo yum install -y nodejs

パッケージ名はnodejsですが、実際には同時にnpmもインストールされているため、インストールが完了すればnpmも使えます。

$ npm -v
6.4.1

バージョンも新しくなっています。

$ sudo npm -g update npm
$ which npm
/usr/bin/npm

アップデートも問題なく動作するようになったようです。

しかし、安定性の高いはずのepelリポジトリのnpmが致命的なバグを抱えたままになっているというのは…大丈夫なんでしょうか…

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

【Cordova】ローカル通知機能を実装するためのプラグイン「cordova-plugin-local-notifications」

今回は、アプリにローカル通知を送る方法について。
アプリから通知を送るには、以前にも何度か記事に取り上げた cordova-plugin-fcm など、インターネット経由で外部サービスと連携してプッシュ通知を送る方法がありますが、ローカル通知はアプリ自身が通知を送る仕組みです。

プラグインは「cordova-plugin-local-notifications」を使用しています。
GitHubはこちらから。

GitHub – katzer/cordova-plugin-local-notifications: Cordova Local-Notification Plugin
https://github.com/katzer/cordova-plugin-local-notifications

 

まずインストール方法ですが、下記のコマンドを実行します。

cordova plugin add cordova-plugin-local-notification

ローカル通知を送るには、下記のコードを実行します。

cordova.plugins.notification.local.schedule({
    title: '[タイトル]',
    text: '[メッセージ]',
    foreground: true
});

最低限、上記のタイトルやメッセージテキストなどを指定すれば、即時に通知が送付されます。
他にも指定できる項目があり、添付ファイルや、”Yes”、”No” などのボタン、更には文字の入力欄を追加することもできます。

また、trigger という項目を指定することで、送付するタイミングや、繰り返し通知することもできます。
現時点では使ってはいませんが、こちらも便利そうですね。
サンプルコードはこちら。

// 指定した時間にローカル通知を送付
cordova.plugins.notification.local.schedule({
    title: '[タイトル]',
    text: '[メッセージ]',
    trigger: { at: new Date([年], [月], [日], [時]) }
});

// 指定した回数だけ毎日通知する
cordova.plugins.notification.local.schedule({
    title: '[タイトル]',
    text: '[メッセージ]',
    trigger: { every: 'day', count: [回数] }
});

個人的には、あるエリアに行くと通知する、という下記のコードも便利そうだと思います。

cordova.plugins.notification.local.schedule({
    title: '[タイトル]',
    text: '[メッセージ]',
    trigger: {
        type: 'location',
        center: [lat, long],
        radius: [通知半径],
        notifyOnEntry: true
    }
});

ただし、こちらの位置による通知は iOS 未対応のようです。
ご利用になる際には、その点だけご注意ください。

 

以上、アプリにローカル通知を送信する方法についてでした。
予定のリマインドなど自分自身に通知を送りたいだけの時には、こちらのプラグインで十分だと思います。

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

【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)
著者:杉浦

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

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

GoogleChrome 70 がリリース HTTPページの警告の厳格化やPWAの正式対応などが追加

いつの間にかGoogleChrome Ver.70がリリースされていたようですね。

New in Chrome 70 – Google Developers

米国現地時間の10月16日にリリースされたVer.70では、幾つか大きな変更がされているようです。

・非SSLサイトで文字入力を行うと、アドレスバーに赤文字の”保護されていない通信”が表示されるように変更

ついに、SSL通信(アドレスがhttps://から始まるもの)に対応していないサイトで、フォームなどのテキストボックスに文字を入力すると、無効なSSLが設定されたサイトと同様にアドレスバーの”保護されていない通信”の表示が赤文字に変化するように変更されました。

これは以前から予告されていた変更で、Chromeの”常時SSLが基本”という考え方を反映した物にするために、段階的に変更されてきたものです。

Moving towards a more secure web – Google Security Blog

入力フォームのない非SSLサイトでは、黒文字の”保護されていない通信”が表示されるだけですが、入力フォームの存在する非SSLサイトの場合は入力フォームに一文字でも何か文字を入力した時点で、アドレスバーの”保護されていない通信”が無効なSSL証明書を搭載したサイトと同様に赤文字に変わります。

事情を知っているユーザーならまだしも、こういった事情を知らない一般ユーザーからすると、セキュリティ的に問題のあるサイトとして見られてしまう可能性があります。

そもそもChromeがこういった対応をする前から、ユーザーになにか情報を入力させる機能を提供する場合はSSLに対応するのが常識でしたし、最近はLet’s Encryptのような無料のSSL証明書もでていますので、まだSSLに対応されていないサイトをお持ちの方はすぐにSSL対応化していただくことをお勧めします。

・Windows版ChromeがPWAに正式に対応

いままで実験的機能として実装されていたPWA(プログレッシブウェブアプリ)ですが、ついにWindows版Chromeで正式に有効化されたようです。
PWAとはWebアプリとして提供されているインターネット上のWebサイトを、あたかもネイティブ(OSにインストールしたような)アプリとして動いているかのように動作させるできることができる機能です。

通常、Webサイトとして作られたWebアプリは、インターネットにつないでいないと起動できないうえ、ユーザーがWebサイトを開かないと何もできない受動的な仕組みでした。
PWAが有効になることで、こういったWebサイトをPWAに対応させることで、対応ブラウザを通してOSのアプリの一つとしてインストールできたり、インターネットに接続していなくても起動できたり、Webサイトを閉じていても通知が受け取れたり、といった恩恵が受けられるようになります。
またPWAの本質はWebサイトなので、各OS用にプログラムを書き直したり、ビルドし直したり、といった作業をほとんどすることなくクロスプラットフォームアプリを作れるのも大きな利点です。

有名どころでは、現時点でTwitter LiteGoogle PhotoなどのサービスがPWAに対応していますので、早速体験してみたい!という方は是非試してみてはいかがでしょうか。

Twitterにアクセスできなくなった「Twitter for Mac」の代わりはChromeのPWAで「Twitter Lite」を使うのが最適? – AAPL.Ch

なお、公式ブログによると、macOS版ChromeではVer.72で正式対応予定とのことですが、早く試したいという方は従来通り実験機能を有効にすることで現時点でも利用できるようになります。(有効化の方法は上記記事をご覧ください。)

・WebWorkerで実装した各処理に名前を付けることが可能に。

WebWorkerとは、javascriptの処理をバックグラウンドで行わせることができる仕組みです。

Javascriptは少し特殊で、基本的にすべての処理をメインスレッド(メインのプロセス)だけで行います。
そのため、Javascriptで書いたプログラムのどこかで重い処理を行ってしまうと、その処理が終わるまでほかの処理を行うことができないため、結果的にWebアプリがフリーズしたような状態になってしまうことがありました。

こういった処理にWebWorkerを使用することで、その部分の処理はメインスレッドとは別のスレッド(プロセス)で行わせることができるため、重い処理を行わせてもWebアプリがフリーズしにくくなり、快適な動作をさせることができます。

今回のアップデートで、WebWorkerで書かれた各処理ごとに名前が付けられるようになったようで、これにより複数のWebWorkerを使用した場合のデバッグがしやすくなるようです。

ほかにも多くの修正が行われたChrome Ver.70。
今回は魅力的な機能もいくつか正式実装されているようですので、Chrome使いの皆さんは変更点を是非チェックしてみてください。

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