著者アーカイブ 村上

村上 著者:村上

【Webサービス】配色に悩んだ時に「単語から連想される色」を挙げてくれる「Picular」

偶然見つけた記事で紹介されていたWebサービスが便利そうだったのでご紹介します。
サイト名は「Picular」で、単語を入力するとその単語からイメージされる色をあげてくれるというサービスです。
Webサイトの制作時など、配色に悩んだ時に活用できそうですね。

サイトのリンクはこちらから。

Picular
https://picular.co/

 

利用方法はとても簡単で、サイトにアクセスすると表示される入力欄に、単語を入力するだけ。
あとは、単語に応じた色を一覧で表示してくれます。

試しに「girl(女の子)」と入力してみるとこんな感じの結果でした。

思ったよりも、大人っぽいというか、シックな色合いが並びました。
個人的には、もっとピンクとかオレンジなどの華やかな明るい色が並ぶかと思いましたが…ちょっと意外な結果となりましたね。

ちなみに、検索する単語は日本語でもエラーは出ませんでした。
ただ、3文字以上を入力する必要があるので、英単語を前提としているようですね。

 

色々試してみましたが、大抵は想像通りの色が表示されるようでした。
ただ、時折何故?とも思える色がヒットすることもあり、例えば「moon(月)」と入力した際、オレンジ色が入っていたのは少し意外でした。
補色とかが関係しているのかな?

ということで、もし配色に困ったら、こちらのサイトに頼ってみるのもいいと思います。
特に、Webサイト制作の時など、どの色をベースカラーにするか迷っているときに使えそうですね。
候補がたくさん表示されるのも嬉しいです。

村上 著者:村上

【MySQL】テーブルのデータのみをダンプする方法

少し前に、データベースのテーブルの構成情報のみを mysqldumpコマンドでエクスポートする方法についてまとめましたが、今回はデータのみを insert文で抽出する方法について。
めったに使わないので、なかなかオプションが覚えられず…。
なので、あとあと自分がコピー&ペーストして使えるようにまとめます。

なお、前回の記事はこちらから。

【MySQL】テーブルの情報をエクスポート・インポートする方法
https://cpoint-lab.co.jp/article/201808/【mysql】テーブルの情報をエクスポート・インポー/

 

さて、データのみを抽出するコマンドは下記のとおりです。

mysqldump -u [ユーザー名] -p -t [データベース名] [テーブル名] > [エクスポートするファイル名]

-t のオプションがポイントで、こちらがあるとテーブル構成情報を除いて、データのみをエクスポートできます。
なお、-t ではなく –no-create-info でも同じことができます。
が、個人的には、短い -t オプションの方が使いやすいかなと思います。

 

以上、データベースのテーブルからデータのみを抽出する方法でした。
本当は、MySQLの INTO 構文を使ってデータをCSVで抽出したかったのですが、どうやらそれを実行するための権限がなかったのでこのような方法をとることになりました。
ほんの少しデータを整形する必要はありましたが、こちらの方法でも簡単にデータ抽出を行えましたので、場合によってはこちらの方法を使ってもいいのかもしれません。

村上 著者:村上

【Android】「Cannot add task ‘:processDebugGoogleServices’ as a task with that name already exists.」エラーの対処法

本日遭遇したエラーの対処法です。
状況はというと、Cordovaでアプリを開発中、プラグインの追加・削除のため、どうしてもブラウザやAndroidなどのプラットフォームを削除しなくてはならなくなり、削除 → 再インストールを実行したところ、Androidで上記エラーが発生しました。
なお、build.gradle ファイル内で発生したエラーです。

 

エラー文を色々検索し、ヒットした解決策を試したのですが、状況に一致しなかったり、解決しなかったり…。
で、エラー文に戻って、「already exists(=もう存在している)」とあったので、なら Google Services という名前のものを削除すればいいのか?と安直に試したところ…なんとビンゴでした。

具体的には、下記の記述をコメントアウトし、「Try again」を実行しました。

apply from: "cordova-support-google-services/[プロジェクト名]-build.gradle"

こんなに単純なことだったとは…ちょっと拍子抜けでした。
でも、解決できたので良しとします!

 

以上、Cordovaのプラグインの影響で発生した(と思われる)Android Studio のエラーの対処法でした。
なお、今回のエラーは Firebase関連のプラグインが原因のようでした。
もし同じことにお困りの方は、参考にしていただければ幸いです。

村上 著者:村上

【Cordova】QRコードリーダーを実装するプラグイン「phonegap-plugin-barcodescanner」

今回はCordovaで開発しているアプリに、QRコードリーダーの機能を実装する方法について。
コードがかなり分かりやすかったのでおすすめのプラグインです。
使用したプラグインは「phonegap-plugin-barcodescanner」。
phonegap という名前が付いていますが、Cordovaでも問題なく使えます。

GitHubはこちらから。

GitHub – phonegap/phonegap-plugin-barcodescanner: cross-platform BarcodeScanner for Cordova / PhoneGap
https://github.com/phonegap/phonegap-plugin-barcodescanner

 

早速実装方法ですが、まず下記のコマンドでプラグインを追加します。

cordova plugin add phonegap-plugin-barcodescanner

プラグインの追加が終ったら、config.xml を確認します。
もし、下記の1行が追加されていなかったら追加してください。

<preference name="android-build-tool" value="gradle" />

また、iOSの場合は、info.plist に 「Privacy – Camera Usage Description」の項目を追加しないと、アプリからカメラが起動できないので、こちらも追加します。
設定はこのくらいです。

あとは、下記のコードを記述するだけです。

cordova.plugins.barcodeScanner.scan(
    function (result) {
        // QRコードの読み込み成功
        // 成功時の処理
        // Result: result.text
        // Format: result.format
        // Cancelled: result.cancelled
    }, 
    function (error) {
        // 読み込み失敗
        // 失敗時の処理
    }
);

上記のコードが実行されると、自動的にカメラを使用するかを尋ねるダイアログが表示され、許可を選択すると、画面内に四角形が表示されているQRコードリーダーが起動します。
で、カメラを適当に作成したQRコードにかざしたところ、無事コード内の情報を取得できました。

ちなみに、試しに作ったQRコードは、本記事のアイキャッチ画像でも使用しています。
なお、取得できるのはこのブログのURL https://cpoint-lab.co.jp/です。
このURLは、上記のコードでは、result.text で取得できます。
適当なコードが見つからない場合は、是非ご利用ください。

 

以上、CordovaアプリでQRコードリーダー機能を実装する方法でした。
最初はカメラを扱うということで、難しいのでは…と思っていましたが、実装が楽なプラグインのおかげでかなり簡単でした!
もし似たようなことを行いたいとお考えでしたら、是非ご参考にしてください。

村上 著者:村上

【Cordova】iBeaconを扱うための「cordova-plugin-ibeacon」が動作しない時の対処法

先日投稿した、「【Cordova】アプリでiBeaconを扱うための「cordova-plugin-ibeacon」が動作しない【未解決】」という記事の、解決策が見つかりました…!
解決策というより、原因はコードに一部抜けがあったせいなんですけどね!

 

早速ですが、正常に動作したコードはこちら!

    // 位置情報を取得
    cordova.plugins.locationManager.requestWhenInUseAuthorization();
    cordova.plugins.notification.local.registerPermission(function (granted) {
        // console.log('Permission has been granted: ' + granted);
    });

    // delegateの作成と設定
    var delegate = new cordova.plugins.locationManager.Delegate();
    delegate.didDetermineStateForRegion = function(pluginResult) {
        console.log('didDetermineStateForRegion', pluginResult);
    }
    delegate.didStartMonitoringForRegion = function(pluginResult) {
        console.log('didDetermineStateForRegion', pluginResult);
    }
    
    // ビーコンを検知している間呼ばれる
    delegate.didRangeBeaconsInRegion = function(pluginResult) {
        document.getElementById("rangeDiv").value = JSON.stringify(pluginResult);
    }
    
    // ビーコンをキャッチ
    delegate.didEnterRegion = function(pluginResult) {
    }

    // ビーコンの範囲外に移動
    delegate.didExitRegion = function(pluginResult) {
    }

    // delegate の設定
    cordova.plugins.locationManager.setDelegate(delegate);

    // 監視するビーコンの設定
    var uuid = '00000000-1d4e-1001-b000-001c4dbec041';
    var identifier = 'ibeacon';
    var major = 1;
    var minor = 3;
    var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(identifier, uuid, major, minor);
    beaconRegion.notifyEntryStateOnDisplay = true;

    // 監視の開始
    cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
        .fail(function(e) { console.log(e); })
        .done();
    cordova.plugins.locationManager.startMonitoringForRegion(beaconRegion)
        .fail(function(e) { console.log(e); })
        .done();

変更点は、49行目の下記の記述を追加した点です。

cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
    .fail(function(e) { console.log(e); })
    .done();

様々なサンプルコードを見比べたところ、ここの記述が不足していました。
で、コードを追加したところ、問題なくビーコンの信号を取得できました!
というわけで、ただの私のポカミスだったわけです。
…凡ミスで恥ずかしい限りです。
今後は気を付けなければいけませんね。

 

ということで、以上、iBeaconを扱うための「cordova-plugin-ibeacon」が動作しない時の対処法でした。
可能であれば、きちんと動作するサンプルコードを改変してアプリ開発を行った方が安全かもしれません。

村上 著者:村上

【Cordova】JavaScript上のConsole.log()をXcodeのデバッグエリアに表示する方法

以前からCorodvaアプリを開発していましたが、最近になって便利なプラグインを発見したのでご紹介。
というか、何故これを開発初期に入れていなかったのか…ちょっと後悔しています。

 

おすすめしたいプラグインは「cordova-plugin-console」です。
タイトルにもあるように、こちらのプラグインを導入すると、JavaScript上で記述した console.log() などの結果を、Xcodeのデバッグエリアに表示させることができます。
なお、参考にさせていただいたサイトはこちらから。

Cordova アプリの console.log() を XCode に出力する cordova-plugin-console – Corredor
http://neos21.hatenablog.com/entry/2017/07/10/080000

そして、GitHubのリンクはこちらから。

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

導入方法は、下記のコマンドを実行するだけ。

cordova plugin add cordova-plugin-console

あとは、devicereadyイベントの後に console.log() を記述すれば、それがデバッグエリアに表示されます!
また、試してはいませんが、Android Studio でも同様に使えるそうです。

 

以上、Console.log() をXcodeのデバッグエリアに表示する方法でした。
プラグインの導入だけなので、かなり簡単に行えます!

今まで alert() をメインで使ってきて、そこまで不便は感じていなかったのですが…やはりできるとかなり楽ですね。
Cordovaアプリの開発者はぜひインストールをご検討ください。

村上 著者:村上

【Cordova】アプリでiBeaconを扱うための「cordova-plugin-ibeacon」が動作しない【未解決】

今回は、「cordova-plugin-ibeacon」という、CordovaアプリでiBeaconを取り扱うためのプラグインについてです。
Android端末では思い通りに動作したのですが、何故かiOSでは、ビーコンの信号をキャッチできず…。
色々サイトを見て、設定等を変更しているのですが、残念ながら、まだ未解決です。

 

使用したプラグインはこちらから確認できます。

GitHub – petermetz/cordova-plugin-ibeacon: An iBeacon plugin for Phonegap / Cordova 3.x and upwards. Supports both iOS and Android (contributions are welcome)
https://github.com/petermetz/cordova-plugin-ibeacon

で、実際に記述したコードはこちら。

var uuid = '[使用するビーコンのUUIDを指定]';
var identifier = 'ibeacon';
var major = 0;
var minor = 0;
var beaconRegion = null;
// 監視するビーコンの設定
beaconRegion = new cordova.plugins.locationManager.BeaconRegion(identifier, uuid, major, minor);
    
// delegateの作成と設定
var delegate = new cordova.plugins.locationManager.Delegate();
delegate.didStartMonitoringForRegion = function(pluginResult) {
    // ビーコンの観測の開始に成功
};

delegate.didDetermineStateForRegion = function(pluginResult) {
    // 領域への入退場のステータス変化を検知
};

delegate.didEnterRegion = function(pluginResult) {
    // ビーコンをキャッチした時に呼ばれる
    cordova.plugins.notification.local.schedule({
        title: "iBeacon",
        text: "didEnterRegion",
        foreground: true
    });
};

delegate.didRangeBeaconsInRegion = function(pluginResult) {
    // ビーコンを検知している間呼ばれる
};

// delegate の設定
cordova.plugins.locationManager.setDelegate(delegate);

// パーミッションチェック
cordova.plugins.locationManager.requestAlwaysAuthorization();
cordova.plugins.notification.local.requestPermission();
cordova.plugins.backgroundMode.enable();

// 監視の開始
cordova.plugins.locationManager.startMonitoringForRegion(beaconRegion)
    .fail(function(e) { })
    .done();
}

19行目で、ビーコンが発信している信号をキャッチしたら、通知を飛ばす、という処理を行いたかったのですが、これが動作せず…。
もしや、通知の設定が間違っているのか?と思い、別の箇所で動作確認をしたところ、問題なく動作したので、通知の問題ではなさそう。

また、11行目や15行目の関数内でも、試しに通知の処理を記述して見ましたが、こちらでも問題なく通知がされたので、プラグインにも問題はないようです。
ただ、15行目のビーコンの通知領域への入退場ステータス変化を検知した時に実行される関数では、引数 pluginResult.state が「CLRegionStateOutside(通知範囲から退場)」しか取れていないようだったのが気にかかっています。
どうやら範囲内に入った検知が行えていないようで…でも、その対処法がわからず、悩み続けております。

 

GitHubに、おそらく同じことでお悩みの方の投稿があったので見てはいるのですが、それでも解決できず。
ちなみに投稿はこちら。

IOS Plugin not working…・Issue #167・petermetz/cordova-plugin-ibeacon・Github
https://github.com/petermetz/cordova-plugin-ibeacon/issues/167

こちらの投稿では、locationManager のパーミッションのリクエストをしているかや、XCodeでの設定についての確認があり、それらに対応したのですが、それでも動かず…。
…根が深そうな気がしますね。
一度、プラットフォームの削除と再インストールを試してみようかな?

 

なお、サンプルコードはきちんと動作したので、私のコードもしくは設定が間違っているのは間違いなさそう。
原因がわかったら、また改めてご紹介したいと思います!
それまでしばしお待ちを!

村上 著者:村上

【Webサービス】PDF上の画像を抽出できるサイト「iLovePDF」が便利!

このサイトにかなり助けられたので、皆様にもご紹介したく、今回まとめてみました。
iLovePDF」という、PDFファンの為の完全無料のオンラインツールです。

今回使用したのは、このサイトの「PDFから画像を抽出する」機能です。
ページはこちら。

PDFをJPGに変換。PDFから画像を抽出
https://www.ilovepdf.com/ja/pdf_to_jpg

この機能を使うと、PDFの中にある全ての画像を一枚ずつ抽出することができます!

 

作業手順ですが、上記のページにアクセスし、「PDFファイルを選択」から、画像を抜き出したいPDFを選択します。
そうすると、下記のようにページが切り替わるので、「画像抽出」を選択して「JPGに変換」をクリックします。

そうすると、画像を抽出したファイルをダウンロードできます。
ファイルを開くとこんな感じで画像が抽出されています。

きちんとすべての画像が抽出できています!

 

以上、PDFファイル内の画像のみを抽出する方法でした。
使いたい画像がPDFでしかない!という状況に陥ったときに是非ご活用ください。
…できれば、そんなことがないことを祈りたいものですが。

村上 著者:村上

【JavaScript】GoogleMapのルート検索機能で経由地追加する方法

タイトル通り、GoogleMapのナビゲーション機能で、経由地を追加する方法です。
HTMLに直接マップを埋め込み、検索する方法と、Maps URLを利用する方法がありますが、今回は前者についてまとめます。

 

まず、GoogleMapを使用する事前準備として、APIキーを取得します。
下記のページから取得できますが、クレジットカード情報を入力する必要がありますので、ご用意ください。

Google Maps Platform
https://cloud.google.com/maps-platform/?hl=ja

また、無料トライアル期間がありますが、それを過ぎると有料になりますので、その点もご承知おきください。

なお、操作をしないと有料サービスには移行しませんので、ご安心ください。

無事APIキーが取得出来たら、あとは下記コードをコピー&ペーストするだけ。
参考にさせていただいたサイトがあったのですが、どのサイトなのかメモをし忘れてしまいました…。

まず、headタグ内で、下記を指定します

<script src="http://maps.google.com/maps?file=api&v=2&key=[APIキー]&sensor=false" type="text/javascript" charset="utf-8"></script>

body は下記のように記述しました

<body onload="initialize()" onunload="GUnload()">
    <form>
        <input type="text" size="20" id="from" value="出発地点" />
        --><input type="text" size="20" id="step1" value="経由地1" />
        --><input type="text" size="20" id="step2" value="経由地2" />
        --><input type="text" size="20" id="to" value="到着地点" />
        <input type="button" id="btn1" value="ルート案内" onclick="dispRoute()" />
    </form>
    <div id="map_canvas" style="width: 100%; height: 350px"></div>
    <div id="route" style="width: 100%; height: 200px;overflow: scroll"></div>
</body>

JavaScrip は以下のとおりです。

var map;
var directions;

function initialize() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(35.681379,139.765577), 13);
        directions = new GDirections(map, document.getElementById('route'));
    }
}
function dispRoute() {
    var from = document.getElementById("from").value; // 出発先
    var step1 = document.getElementById("step1").value; // 経由地1
    var step2 = document.getElementById("step2").value; // 経由地2
    var to = document.getElementById("to").value;     // 目的地

    directions.clear();

    var pointArray = [from, step1, step2, to];
    directions.loadFromWaypoints(pointArray, {locale: 'ja_JP'});
}

bodyが読み込まれたタイミングで initialize() を実行してマップを表示し、ルート検索ボタンをクリックすると、dispRoute()が実行されます。
なお、今回はテストとして、経由地を2か所指定してあります。
で、上記を実行したところ、当然ではありますが、2点の経由地を通るルート検索を無事に行うことができました。

 

以上、JavaScriptを使ってGoogleMapで経由地ありのルート検索を行う方法でした。
機能としては、やはりGoogleMapはとても優秀ですね。
デザインを凝るならMapboxがおすすめですが、ナビゲーション機能とか、あとは日本語対応している点では、GoogleMapが優れていると思います。
ナビゲーション機能重視なら、GoogleMapをおすすめします。
開発したい機能に応じて使い分けてください。

村上 著者:村上

【MySQL】テーブルの情報をエクスポート・インポートする方法

毎回忘れるので、いい加減備忘録としてまとめます。
今回は、MySQLでテーブルの情報をエクスポートし、異なるデータベースにインポートする方法です。

 

まず、エクスポートについてですが、手順については、こちらの記事を参考にさせていただきました。

MySQLでデータをエクスポートする – Qiita
https://qiita.com/katsukii/items/c7709fc501c1eb11603f

実行する命令はこちら。

mysqldump -u [ユーザー名] --no-data -p [データベース名] [テーブル名] > dump.sql

なお、最後のファイル名「dump.sql」は、分かりやすい任意の名前に変更できます。
が、拡張子はそのまま .sql にしておいてください。

上記の命令を実行すると、パスワードを聞かれるので、入力してください。
そうすると、dump.sql ファイルに、指定したテーブルの構成情報のみが書き込まれます。
なお、テーブル内のデータもコピーしたい場合は、オプションの「–no-data」を削除してください。

エクスポートの手順については以上です。

 

次に、インポートする方法について。
インポートについては、こちらの記事を参考にしました。

MySQLのデータインポート・エクスポート – Qiita
https://qiita.com/rato303/items/2e614f23e5feee150ffc

前のエクスポートの段階で作成した SQLファイルを任意の場所に置き、こちらを読み込みます。

実行する命令はこちら。

mysql -u [ユーザー名] -p [データベース名] < [ダンプしたファイル]

上記を実行すると、mysqldump を実行した時と同様にパスワードを聞かれますので、有効なパスワードを入力してください。
エラー文などが表示されなければ、問題なくダンプしたファイルに書かれていたテーブルを追加できているはずです。

 

以上、MySQLでテーブルをエクスポート・インポートする方法でした。
作業の手順は難しくはないのですが、使用頻度が低いので、使いたい!というときに忘れてしまうことが多く…。
特に、mysqldump がすんなり出てきません…。
今回こうして記事にまとめたので、今後、頭の片隅にでも引っかかってくれることを祈っています。