著者アーカイブ 村上

村上 著者:村上

【Windows10】PC起動時にアプリを自動的に起動する方法

今日の記事は、タイトル通り、WindowsのPCを起動した時に、メールソフトなどの特定のアプリを自動的に起動する方法についてです。
Macだとアプリのアイコンを右クリック → メニューから簡単に設定できるのですが、Windowsだと少々面倒だったので、備忘録もかねてメモ。

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

Windows10 起動時にアプリを自動起動 – スタートアップに登録 – PC設定のカルマ
https://pc-karuma.net/windows-10-app-startup/

 

作業ですが、まず事前準備として、デスクトップなどのアクセスしやすい場所に、PC起動時に自動起動したいアプリのショートカットを作成しておきます。
次に、画面左下のWindowsスタートボタン(四角形が4つ組み合わさったボタン)を右クリックします。
で、メニューから「ファイル名を指定して実行」をクリック。
そうすると、下のようなウィンドウが表示されるので、そこに「shell:startup」と入力してOKをクリック。

すると「スタートアップ」フォルダーが表示されるので、ここに先程準備しておいたアプリのショートカットを移動させます。
作業としては以上で完了です。

 

PC起動と同時に、自動的に必須アプリが立ち上がるのは便利ですね。
パソコンを使うときに毎回必ず起動させているアプリがある人は、この方法を使って自動起動の設定をしておいてはいかがでしょうか。

村上 著者:村上

【JavaScript】Mapboxの「There is already a source with this ID」エラーの対処法

先日投稿したMapboxのエラーについて、対処法が分かったのでご紹介!
というか、まさにほぼ同じことにお悩みの方がいらっしゃり、そこで対処法が紹介されていたので、それをコピー&ペーストしたら、動きました。
検索が下手だったようです…反省。

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

【JavaScript】Mapboxで「There is already a source with this ID」エラーが発生【未解決】
https://cpoint-lab.co.jp/article/201808/【javascript】mapboxで「there-is-already-a-source-with-this-id」エラーが発生【未解決】

ざっくりと状況を説明すると、Mapboxで追加できるナビゲーション機能を追加してから一旦削除し、もう一度追加しようとすると、「There is already a source with this ID」という IDの重複エラーが発生し、ナビゲーション機能を追加できない状態でした。

 

さて解決策ですが、ナビ機能を削除する、removeControl() を実行したタイミングで下記の項目も削除するだけでした。

map.removeLayer('directions-route-line');
map.removeLayer('directions-route-line-alt');
map.removeLayer('directions-hover-point-casing');
map.removeLayer('directions-hover-point');
map.removeLayer('directions-waypoint-point-casing');
map.removeLayer('directions-waypoint-point');
map.removeLayer('directions-origin-point');
map.removeLayer('directions-origin-label');
map.removeLayer('directions-destination-point');
map.removeLayer('directions-destination-label');
if (map.getSource('directions')) map.removeSource('directions');

なお、この解決策が紹介されていた投稿はこちらから。

Error when adding controls dynamically #5089・mapbox/mapbox-gl-js・GitHub
https://github.com/mapbox/mapbox-gl-js/issues/5089

実際に、ソースコードに追加するとこのような感じ。

var directions;
function navi() {
    if(['条件:ナビ機能が追加済みだったら']) {
        map.removeControl(directions);

        /* ここから */
        map.removeLayer('directions-route-line');
        map.removeLayer('directions-route-line-alt');
        map.removeLayer('directions-hover-point-casing');
        map.removeLayer('directions-hover-point');
        map.removeLayer('directions-waypoint-point-casing');
        map.removeLayer('directions-waypoint-point');
        map.removeLayer('directions-origin-point');
        map.removeLayer('directions-origin-label');
        map.removeLayer('directions-destination-point');
        map.removeLayer('directions-destination-label');
        if (map.getSource('directions')) map.removeSource('directions');
        /* ここまで */

        directions = null;
    } else {
        directions = new MapboxDirections({
                        accessToken: mapboxgl.accessToken
                    });
        map.addControl(directions, 'top-left');
    }
}

どれか一つがなくてもダメなようで、試しに2行ほど削除してみたのですが、当然ながらその行でエラーが発生し、実行できませんでした。

作業は以上で完了です。
画面をリロードして動作確認をしたところ、問題なく動作しました!

 

以上、Mapboxのエラーの対処法でした。
前回の記事でも書いたのですが、Mapboxのナビ機能ってそこそこサイズが大きいので、特にスマートフォンでは表示/非表示を行いたかったんですよね。
最初はCSSを操作して、ナビゲーションウィンドウを消すことも考えたのですが、ウィンドウが見えないだけでナビ機能は有効だったので、どうしても機能自体のON/OFFを切り替えたかったんです。

あとは…ラベルとか、ナビの道順のところを日本語化できないかな…と考えています。
こちらもとっかかりが見つかったら、改めてご紹介したいと思います。

村上 著者:村上

【イベント】第5回 WRO Japan 浜松予選会2018が開催されました

本日、可美総合センターで「第5回 WRO Japan 浜松予選会2018」が開催されました。
小学生・中学生のミドル競技と、同じく小学生・中学生のエキスパート競技が行われました。

WROについて詳しくはこちらから。

WRO Japan2018公式サイト-小中学生のロボットコンテスト
https://www.wroj.org/2018/

私は今回もスタッフとして参加し、コースの映像をモニターに投影していました。

こんな感じで白い壁と、写真には写っていませんが奥の方でもスクリーンに投影しています。
なるべくぶれないように、かつ全体が移るようにカメラを操作するのはなかなか難しかったですが、途中から足をたたんだ状態の三脚を使うようにしたら扱いやすかったです。

 

こちらは車検後のロボットです。

後ろに少し映り込んでいますが、コースの上の黒いラインを手掛かりに進んでいって、途中にあるブロックを指定通りに動かしていきます。
が、これがなかなか複雑なルールで…!
最初のラインとレースで4つの色を読み込んで、それに応じて右にあるブロックを反対側に運んだり、逆に左においてあるブロックを右に運んだり、はたまたそのライン上のブロックはスルーしたりします。
ミドル競技なら、ロボットのプログラミング経験のない私でも組めそうですが…中学生のエキスパート競技になったら、正直かなり厳しい…というか無理かもしれません。
が、その難しいエキスパートのコースを満点でクリアしたチームがあり、思わず会場から拍手が起こりました。
かく言う私も、その動作の綺麗さに思わず拍手をしていました。
今どきの小中学生さんは本当にすごい人ばかりですね…!
私も頑張らないと、あっという間に抜かれてしまいそう…いっそもう抜かれているのかも?と、少し不安になってくるほどでした。
こういう大会を見ていると、危機感を感じつつも、良い刺激になります。

 

今回優勝した、小学生・中学生のミドル及びエキスパート競技の第一位のグループは、9月に開催されるWRO Japan決勝大会に進みます。
そして、この日本大会を勝ち抜くと世界大会に勧めます。
今年はタイで行われるとのことです。
是非頑張っていただきたいですね!

村上 著者:村上

【Excel】Excelファイルに張り付けてある画像の元データを抜き出す方法

偶然見つけて、「こんな方法あるんだ!」と驚いたので、備忘録としてご紹介。
Excelファイルに張り付けてある画像の元データを取り出す方法です。
記事で紹介している状況としては、人から送ってもらった画像が何故かすべてExcelファイルに張り付けてある!これを取り出したい!ということでしたが…まずこの状況に遭遇しないことを祈りたいものです。

もとの記事はこちらから。

【Excel】必要な画像がシートに張り付けられて送られてきた!エクセル文書に含まれる画像の元データを手に入れる裏ワザ – いまさら聞けないExcelの使い方講座 – 窓の杜
https://forest.watch.impress.co.jp/docs/serial/exceltips/1137566.html

 

データを取り出す方法ですが、まず前準備として、ファイルの拡張子を表示されるように設定を変更する必要があります。
Windows10の場合では、エクスプローラーを開き、「表示」タブから「ファイル名拡張子」のチェックマークにチェックを入れます。
操作としてはこれで完了です。

あとは、抜き出したい画像の入ったExcelファイルの拡張子を、「ファイル名.xlsx」から「ファイル名.zip」に変更します。
なお、この時ファイルが壊れても大丈夫なように、元ファイルをコピーしておくなど、バックアップは必ず取っておきましょう。
あとは、このZipファイルを展開し、展開後のファイルの「xl」という名前のフォルダを開きます。
さらにその中に、「media」という名前のフォルダがあるので、それを開くと、Excelファイルに張り付けられていた画像の元データがあります!
以上の手順で、Excelファイルから画像データを取り出すことができます。

 

以上、Excelファイルに張り付けられた画像の元データを抜き出す方法でした。
Excelファイルに張り付けられているものをコピーしようとしても、画質が粗いことがあるとのことでしたので、少々手間はかかりますが、こちらの方法で確実に元データを抜き出すことをおすすめします。

…冒頭でも書きましたが、こんな状況がそもそも発生しないことを祈りつつ…!
もしこの状況に遭遇した不運な方は、是非この方法をお試しください。

村上 著者:村上

【JavaScript】Mapboxで「There is already a source with this ID」エラーが発生【未解決】

タイトルにも書いてありますが、未解決です。

先日からMapboxを触っているのですが、その中でナビゲーション機能を追加・削除したいと考えています。
で、追加して削除までは成功したのですが、その後もう一度追加しようとすると、「There is already a source with this ID」というエラーが発生している状況です。
Google翻訳に掛けたところ「このIDを持つソースが既に存在します。」とのことだったので、削除したコントローラのデータが一部残っているのではと思っております。

ちなみにエラーが発生しているソースコードはこちら。

var directions;
function navi() {
    if(['条件:ナビ機能が追加済みだったら']) {
        map.removeControl(directions);
        directions = null;
    } else {
        directions = new MapboxDirections({
                        accessToken: mapboxgl.accessToken
                    });
        map.addControl(directions, 'top-left');
    }
}

このコードを実行すると、1回目の追加と削除が成功した後、10行でエラーになります。

まだしっかりと読めてはいないのですが、下記の記事が同じ原因で発生しているように見えるので、時間をとってしっかり確認したいと思います。

layers don’t show up after removing them and adding them again・issue #5440・mapbox/mapbox-gl-js
https://github.com/mapbox/mapbox-gl-js/issues/5440

 

CSSでの単なる表示・非表示の切り替えも考えたのですが、検索窓が見えないだけで実行されてしまうので、結局この方法がベストかな、と考えています。
解決策が分かったら、また改めてご紹介したいと思います!

村上 著者:村上

【JavaScript】Mapboxを使って場所の検索機能を実装する方法

最近、Mapboxを業務で使っているので、今回もMapboxで実装できる機能の紹介を。
できることが多すぎて、いっそ何ができるのかわかりにくいので、個人的に使えそうだと思った機能をピックアップしていこうと思います。
前回はナビゲーション機能でしたが、今回は場所の検索機能について。

公式サイトのサンプルはこちらから。

Add a geocoder|Mapbox
https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/

 

まず、実装できる画面はこちら。

画面左上に検索窓が表示されるので、こちらに検索したいキーワードを入力します。
試しに「浜松駅」と入力しましたが、問題なく機能しました。

実装方法ですが、まず下記のJSファイルとCSSファイルを読み込みます

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'https%3A%2F%2Fapi.mapbox.com%2Fmapbox-gl-js%2Fplugins%2Fmapbox-gl-geocoder%2Fv2.3.0%2Fmapbox-gl-geocoder.min.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />

次に、下記のコードを追加します。

map.addControl(new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
}),"top-left");

何と実装は以上で完了です!
とても簡単ですね!
また、第2引数の「top-left」を変更することで、表示位置も調節できます。
例えば、右下に配置したい場合は「bottom-right」と指定します。

 

以上、Mapboxのマップに検索窓を追加する方法でした。
ただ、検索後、その場所に移動はしますが、マップピンが立つなどの機能はないので、そこは自分で実装する必要がありますね。
が、簡単な検索ならこれで十分すぎるくらいの機能だと思います。

村上 著者:村上

【Excel】改ページプレビューのシートを印刷したらページが小さかった時の対処法

今日まさにやらかしてしまったので、自分への戒めも込めてまとめます。

印刷を前提として表やグラフなどを作成するとき、私はExcelのウィンドウ右下から設定できる「改ページプレビュー」という見た目でシートを操作するのですが、今回このシートを印刷したところ、妙に小さい…。

 

今回の原因は、ページレイアウトの拡大縮小の指定が間違っていたことが原因でした。
設定しているのは、上のメニューの「ページレイアウト」の「拡大縮小印刷」の箇所です。
実際の画面はこちら。

ここの設定で、横幅を「1ページ」にすると、印刷するときに印刷用紙の横幅一杯に印刷することができます。
今回は、何かの拍子にこの横幅が「自動」になってしまっており、拡大・縮小のパーセントが狂っていたため、用紙に対してシートが妙に小さく印刷されてしまいました。
特にこの辺を変更した記憶はなかったのですが…高さを調節したときに何かをいじってしまったのかな?

 

ということで、Excelを印刷したときにレイアウトが崩れてしまった場合の対処法でした。
原因を探すのも、修正する方法も特に難しくないですが、意外と盲点なのでお気を付けください

村上 著者:村上

【JavaScript】Mapboxを使ってルート検索を行う方法

Mapboxでルート検索を行いたかったので調べてみたところ、プラグインがあったので試してみました。
導入もとても簡単で、しかも無料とのこと!

なお、今回参考にさせていただいたサイトはこちらから。

Mapbox でルート検索を試してみた – マルティスープ株式会社
https://maps.multisoup.co.jp/blog/2818/

なお、GitHubはこちらから。

GitHub – mapbox/mapbox-gl-directions: Directions plugin for mapbox-gl-js using Mapbox Directions API.
https://github.com/mapbox/mapbox-gl-directions

 

さて、ルート検索プラグインの導入方法ですが、まずMapboxのアカウントを作成し、画面上に地図を表示させるところから行ってください。
こちらの方法については、下記の公式サイトをご確認ください。

Welcome to Mapbox | Mapbox
https://www.mapbox.com/install/

上記の方法で地図が表示出来たら、下記のコードを追加します。

まずは、プラグインを使用するためのJavaScriptファイル及びCSSファイルの読み込みです。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'https%3A%2F%2Fapi.mapbox.com%2Fmapbox-gl-js%2Fplugins%2Fmapbox-gl-directions%2Fv3.1.1%2Fmapbox-gl-directions.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />

次に下記のJavaScriptコードを追加します。

// アクセストークン設定
mapboxgl.accessToken='xxxxxxxxxxxxxxxxxxxxx';
// 地図生成
var map = new mapboxgl.Map({
    container: 'map',
    center: [地図の中心座標],
    zoom: 10,
    styles: 'mapbox://styles/mapbox/streets-v10'
});

// ここから下のコードを追加
map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }), 'top-left');

なお、地図生成のコードは既に追加されているはずなので、12行目以降のコードを追加してください。

そうすれば、下記のようにルート検索用のメニューが表示されるはずです。

ルート検索を行いたい場合は、地図上で出発地点と到着地点をクリックすればOKです。
ルート検索後は、車や徒歩、自転車から移動手段を選択できます。
また、ルートも3候補くらい出してくれます。

ただ、Googleマップのように建物名や住所では検索できないのが少し難点ですね。

 

以上、Mapboxでルート検索をする方法でした。
検索機能は少し限定的ですが、導入は簡単だし、何よりも無料なので、簡単なルート検索機能の導入でしたら是非お試しになってはいかがでしょうか。

村上 著者:村上

【Cordova】AndroidのSDKバージョン数の記述場所まとめ

AndroidアプリをCordovaで開発中なのですが、Android StudioでSDKバージョンを記述している箇所が多く、ちょっと苦労したのでまとめ。
現在、Androidアプリのリリースを行う際、アプリのSDKのバージョンを26以上にするようにとの変更があったのですが、このバージョンが何故か上げられず…。
原因は、複数あるSDKバージョンを記述している箇所の一か所を更新し忘れていたことが原因だったのですが、そもそもその記述箇所多くない?と。
ということで、ほぼ自分の備忘録のために、SDKバージョンを記述している箇所をまとめてみました。

 

まず、Android Studioのメニューバーの「File」から「Project Structure」を選択します。

すると、下のようなウィンドウが表示されるので、サイドバーのメニューの Modules グループから、それぞれのSDKのバージョンを確認します。

なお、ここで指定しているバージョンについては、build.gradle からも確認できます。

で、あとは忘れがちな AndroidManifest.xml
ちなみに、私はここの記述を見逃していました。
このファイルの中に、「uses-sdk」というタグがあり、そこでSDKのバージョンを指定しています。
なので、こちらの値を build.gradle でも指定しているSDKのバージョンと揃えます。

作業としては、以上で完了です。

 

以上、Corodvaで開発中のAndroidアプリのSDKバージョンを確認する方法でした。

ちなみにAndroidアプリをリリースする際のSDKバージョンですが、2018年の8月(つまり今月)に新しいアプリを公開する場合、アプリのターゲットAPIレベルは26(Android 8.0)以降が必須になります。
そして、2018年11月には、既に公開済みの既存のアプリのアップデートで、ターゲットAPI レベルは26以降が必須になります。
なお、この変更はアップデートを行っていない既存のアプリには影響しないとのこと。

上記について、参考にさせていただいた記事はこちらから確認できます。

Google Developers Japan: 今後の Google Play でのアプリのセキュリティおよびパフォーマンスの改善について
https://developers-jp.googleblog.com/2017/12/improving-app-security-and-performance.html

こちらはアプリを公開する際に、条件を満たしていない場合は警告として表示されるので、もし警告が表示されてしまった場合は修正するようにしましょう。

村上 著者:村上

【JavaScript】部分一致のある複数のキーワードをそれぞれ置換する方法

JavaScriptで複数の文字列を置換するとき、置換したいキーワードの一部が他のキーワードと重複しているため、置換後の文字列が意図しない結果になるという状況に陥りました。
例えば、「#○○○」などのハッシュタグをタグで囲もうとしたとき、ハッシュタグに「#浜松」と「#浜松市中区」というキーワードが一部重複している箇所があるため、「#浜松」の部分が意図せずに2回も置換されてしまうという感じです。

今回は、それの対処法です。
もしかしたらもっといい方法があるのかもしれませんが…個人的に一番しっくり来たのでこの方法を採用しました。

 

対処法ですが、まず置換したい文字列(ここではハッシュタグ)をいったん別の文字に置き換えます。
この時、他のキーワードと一致しないように特殊な文字列にするようにしましょう。
例えば、%をキーワードの頭と末尾に2つずつつけてみるとか。
サンプルコードは下記のとおりです。

var text = '[ハッシュタグを含む置換したい文字列]';
var result = str.replace(/(#\S+)/g, '%%$1%%');

上記のコードを実行すると、ハッシュタグが2つの%で囲まれた特殊な文字列に置き換えられます。
なお、正規表現でグループ化を使うと、$1 に一致した文字列が代入されるので、これを利用して文字列を置換していきます。

あとは、この文字列を最終的に置き換えたい文字列の形になるように置換します。
ここでは、タグでハッシュタグを囲んでいます。
サンプルは下記に。

result = result.replace(/%%(#\S+)%%/g, '<a href="[リンク先]">$1</a>');

全部通しで書くと下記のようになります。

var text = '[ハッシュタグを含む置換したい文字列]';

// %%[ハッシュタグ]%% となるように置換
var result = str.replace(/(#\S+)/g, '%%$1%%');

// %%[ハッシュタグ]%% を <a href="[リンク先]">[ハッシュタグ]</a> に置換
result = result.replace(/%%(#\S+)%%/g, '<a href="[リンク先]">$1</a>');

作業は以上で完了です。

 

以上、部分一致のある複数のキーワードをそれぞれ置換する方法でした。
今回はJavaScriptで紹介しましたが、もちろんPHPなどでも使うことができます。
是非、ご活用ください。