月別アーカイブ 9月 2018

asaba 著者:asaba

【create-react】Cannot read property ‘thisCompilation’ of undefined npm ERR!

npm install –save-dev webpackで最新のwebpackをインストールしてnpm run webpackしたところで

Cannot read property ‘thisCompilation’ of undefined npm ERR! というエラー出現

npmのバージョンとインストールしたwebpackのバージョンに開きがあったのが原因でした。

なので、一旦ダウンロードした新しいwebpackをnpm remove webpackでアンインストールして

一回り古い@3.11.0をインストールして解決。同じことではまっている方は今使っているnpmのバージョンを確認してみてください。

それでは!

 

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

Google検索でヤマト運輸の荷物追跡ができるようになっていた件

先日、Amazonで注文した荷物の状態を確認しようと、Google検索でヤマト運輸のサイトを検索していたところ、

いつの間にこんな機能が…
早速試してみました。

ヤマト 追跡番号
のように入力して検索すると…

こんな風に、ヤマト運輸の追跡結果ページへの直リンクを表示してくれます。

毎回ヤマト運輸のホームページから機能をたどらなくても、一発で結果ページを表示してくれるので便利です。
よくネットショップなどでヤマト運輸を使用する方は是非試してみてはいかがでしょうか。

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

【create-react】入力した文字を出力する方法

またまたcreate-reactについてです。今回は、テキストボックスに入力した値を画面上に出力する方法です。

reactは、通常親コンポーネントから子コンポーネントに渡した値をthis.stateで更新しますが、render()内に書き込んでも値を更新することができます。

初級ですがreactを触ったばかりという方の力になれたらなと思います。

いきなりですが、まずconstractorで初期値”james”を定義します。その後にpropで子コンポーネントに渡しています。

その後に自由に値を入力することができるコードがこちらです。

スクショのようにonchangeでイベントを定義することで、name: e.target.valueでnameの中身jamesに続く値をsetstateで更新することができます。

アプリのログイン時にパスワードを入力するときに●が後追って表示されるけどあんな感じに使われるのかな?

イメージしやすいので簡単ですね。今日もこんな感じで少ないですが少しずつ情報を増やしてアウトプットしていきたいと思います。

reactは画面遷移の手段が面倒だったりes5とes6の書き方で大きく変わったりと最初のうちは手がかかりますが、決まり事を守って書いていけばプログラミング歴の浅い方でもクオリティの高いアプリを作ることができそうです。

良いUIフレームワークも揃っているので、こちらもぜひともマスターして使いこなしたいですね、それでは!

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

【Android】画像のExif情報から緯度・経度を取得する方法

先日ご紹介した、写真のExif情報から写真の向きを取得する方法に続き、今回は位置情報を取得する方法についてです。
なお今回も、「ExifInterface」というライブラリを使っています。

ちなみに、以前紹介した写真の向きの取得方法についてはこちらの記事から。

【Android】写真のExif情報から写真の向きを取得する方法
https://cpoint-lab.co.jp/article/201809/【android】写真のexif情報から写真の向きを取得する方法

 

早速ですが、コードはこちら。

// 写真から緯度経度を取得
File f = new File([画像のファイルパス]);
Uri uri = Uri.fromFile(f);
InputStream in = null;
try {
    in = getContentResolver().openInputStream(uri);
    ExifInterface exifInterface = null;
    if (in != null) {
        exifInterface = new ExifInterface(in);
        String latitude = exifInterface.getAttribute(ExifInterface.TAG_GPS_LATITUDE);
        String longitude = exifInterface.getAttribute(ExifInterface.TAG_GPS_LONGITUDE);
        String latitudeRef = exifInterface.getAttribute(ExifInterface.TAG_GPS_LATITUDE_REF);
        String longitudeRef = exifInterface.getAttribute(ExifInterface.TAG_GPS_LONGITUDE_REF);
        // 緯度経度の値を変換
        Double lat = ExifLatitudeToDegrees(latitudeRef, latitude);
        Double lng = ExifLongitudeToDegrees(longitudeRef, longitude);
    }
} catch (IOException e) {
    e.getStackTrace();
    Log.e("ExifActivity", e.getMessage());
}

取得できた緯度経度は、それぞれ lat変数、lng変数に代入されています。
が、この関数では、緯度経度が度分秒という60進数で表現されています。
そのため、場合によってはこの値を10進数に変換する必要があります。

変換はこちらの関数を使いました。
参考サイトのURLをメモしておくのを忘れてしまいました…。
第一引数に、北緯・南緯、もしくは東経・西経を指定し、第二引数に緯度もしくは経度の値を指定します。
上のコードでは、11行目と12行目でそれぞれ緯度経度を変換しています。

// 60進数を10進数に変換
private double ExifHourMinSecToDegrees(String exifhourminsec) {
    String hourminsec[] = exifhourminsec.split(",",0);
    String hour[] = hourminsec[0].split("/",0);
    String min[] = hourminsec[1].split("/",0);
    String sec[] = hourminsec[2].split("/",0);

    double dhour = (double)Integer.parseInt(hour[0]) / (double)Integer.parseInt(hour[1]);
    double dmin = (double)Integer.parseInt(min[0]) / (double)Integer.parseInt(min[1]);
    double dsec = (double)Integer.parseInt(sec[0]) / (double)Integer.parseInt(sec[1]);
    double degrees = dhour + dmin / 60.0 + dsec / 3600.0;

    return degrees;
}

// 緯度の変換
private double ExifLatitudeToDegrees(String ref, String latitude) {
    return ref.equals("S") ? -1.0 : 1.0 * ExifHourMinSecToDegrees(latitude);
}

// 経度の変換
private double ExifLongitudeToDegrees(String ref, String longitude) {
    return ref.equals("W") ? -1.0 : 1.0 * ExifHourMinSecToDegrees(longitude);
}

 

以上、写真から位置情報を取得する方法でした。
なお、当然ですがExifに位置情報が保存されていなければ取得できません。
その場合は、現在の位置情報を取得するなり、もしくは「位置情報を取得できませんでした」というメッセージを取得するなどの処理を追加するほうが良さそうですね。
このあたりはお好みで実装してください。

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

SQLを試すwebサービスSQL Fiddle

 SQL Fiddleは様々なSQLを簡単に試せるオンラインサービスです。下図の様な画面で、任意のSQL環境を選び、テーブルを定義し、SQLを実行する、といったものです。
 
 左の赤丸は実行環境、右の赤丸はテキストからData Definition Languageへの変換機能です。下図の様に、ヘッダ、データを用意するとテーブル作成とそのテーブルにデータを入れる構文が出力されます。
 
 この図では半角スペースで区切っていますが、様々な区切り方に対応しています。詳しくはDDLBuilder/fixture.html at master · jakefeasel/DDLBuilder · GitHubを参照です。入力したデータはBrowserボタンから開くと見やすいです。
 データを入力したら、任意のSQLを右側に入れて実行、下側に出力される結果を見るだけです。

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

各ブラウザで”about:”(chrome://)で指定できるコマンドの一覧を表示する方法

ブラウザのシステム情報や隠し機能の一覧を表示させたりする際、”about:”から始まるコマンドをURL欄に入れたりすることがあるかと思います。
特にGoogleChromeではabout:flags(chrome://flags)とアドレスバーに入れるとアクセスできる実験機能有効/無効画面はよくお世話になっています。

この”about:”コマンドですが、搭載しているブラウザほぼ共通で、利用できる”about:”コマント一覧を表示させることができるコマンドがあります。

一覧画面はアドレスバーに
about:about
と入力すると確認できます。


Firefox


Google Chrome

最近のモダンブラウザは機能面ではどれも徐々に似た作りになっているものが多くなっていますが、このabout:で指定できる内容にはまだブラウザ毎にそこそこ異なっていることもあるようです。

こういった部分で、それぞれのブラウザの違いを探してみるのも面白いかもしれませんね。

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

nginxでnet::ERR_CONTENT_LENGTH_MISMATCHが出た時の対処法

今まで普通に動いていたサイトが、ある日突然正常に表示されなくなるという問題に遭遇。
Chromeの開発者ツールで調べると

net::ERR_CONTENT_LENGTH_MISMATCH

上記のメッセージが大量に発生しており、サイトのアセットの読み込みに失敗していたようでした。
ERR_CONTENT_LENGTH_MISMATCHはヘッダーのContentLengthと実際に受け取ったバイト数が違うと発生するようです。

nginxでのERR_CONTENT_LENGTH_MISMATCHの解決法 – Qiita

いろいろなサイトを見てみると、サーバーにNginxを使っている場合、サイトのキャッシュの保存が失敗したときに先程のエラーが出現するようで、その場合は指定パスに書き込み可能なディレクトリを用意すれば解消するようです。

しかし、今回問題が発生した環境では、該当のログが見当たらなかったため、問題が発生していたサイトのキャッシュを禁止する方法で対策してみました。
変更としてはnginxの設定ファイルを下記のように修正します。

server {
  server_name  .example.com;

  listen          443;

  ssl on;
  ssl_certificate       /path/to/hoge.crt;
  ssl_certificate_key   /path/to/hoge.key;

  client_max_body_size 1g;
  proxy_set_header Host $host;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  proxy_set_header X-Forwarded-Host $host; 
  proxy_set_header X-Forwarded-Server $host; 
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Fowarded-Proto \$scheme;
  proxy_max_temp_file_size 0; #この記述を追加
  location / {
    proxy_pass https://localhost:8081;
  }
}

これでnet::ERR_CONTENT_LENGTH_MISMATCHエラーが消滅し、とりあえず無事サイトが表示されるようになりました。
しかしなぜ突然こんなエラーが出るようになってしまったのか…原因は分かっていないので、さらに調査が必要そうです。

参考サイト
Consul Web UIで画面が表示されない時の対処法 – Qiita

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

【cordova react】Invariant Violation: You should not use Route> or withRouter() outside a Router>

reactのチュートリアル中にハマりました。

 

チュートリアル中せっかくなのでアプリを画面遷移させるところまで試してみようと思い、index.jsとMyComponentをコーディングしてyarn run buildでビルド。

そしたら下のエラーに遭遇。


<span style="color: #ff0000;">Invariant Violation: You should not use Route> or withRouter() outside a Router>
</span>

訳すと、ルーターの外でwithRRouterを使ってはいけません。です。

export default withRouter(MyComponent)ってスコープ内だっけと思いましたがそんな訳ないよなと思いスタックオーバーフローへ。

するとありました。解決方法と原因。めっちゃシンプルでした。↓

https://stackoverflow.com/questions/47314541/you-should-not-use-route-or-withrouter-outside-a-router-when-using-react-route

 

 

<BrowserRouter></BrowserRouter>を定義していない・・・だと・・・

 

 

考えてみたらコンポーネントを上記のタグで囲まない限りいつまでも場外扱いですよね。

Routerを使いたいのにRouterを定義していないならそりゃ使えないよねと(汗)反省して下記のようにindex.jsを編集しました。

画面遷移はreact-routerの使い方を理解すれば大丈夫そう。筆者もここにきてようやくstateとpropなどのライフサイクルが分かってきたので、複数のコンポーネントで値を渡していじれるようになれば少しは楽に開発できるかなと感じました。

長いですが頑張て行きたいと思います。

 

 

 

 

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

簡単な置換を簡単に書く

 置換と言えば正規表現ですが、正規表現の処理は複雑です。複雑さ同様、正規表現による置換は往々にして純粋な文字列のみの置換より重くなりがちです。PHP: str_replace – Manual にも

(正規表現のような) 技巧的な置換ルールを必要としない場合、 preg_replace() の代わりにこの関数を常用するべきです。

とあります。
 この技巧的な置換ルールを必要としない置換でよく行いたい置換は、AをB,CをDに置き換える、といった1対1の置換です。複数の置換の記述例は次の通りです。

$str = '置換対象';
$arr = [
	'置換' => 'ちかん',
	'対象' => 'taisyou'
];
$str_replaced = str_replace( array_keys($arr), array_values($arr), $str);

 上の書き方で$str中の’置換’を’ちかん’、対象を’taisyou’に置き換えた$str_replacedができあがります。
 str_replace,preg_replaceは引数の置き換え対象のパターン、置き換え後の語に配列を指定できます。またarray_keysは引数の配列のキーを格納した配列を、array_valuesは引数の配列の値を、配列にして返します。これらを組み合わせることで、置換対象と置換後の文字列を一つの配列内に格納できます。延々と同じ変数を対象にreplaceを繰り返すよりすっきりします。
 実行速度もこちらの書き方の方が高速です。私の環境では、aをaaに置換するという動作を’a’に対して100000回繰り返す動作にかかる実行時間はstr_replaceの重ね書きがおおよそ1*1e-3秒、上記の書き方が7*1e-6秒でした。雑な計り方ですが、ここまで極端な差があるので高速と言っていいでしょう。
 余談な上、勘ですがこの速度差はおそらく関数呼び出しによるオーバーヘッドです。計算コストの異なりそうな違いはstr_replaceの呼び出し回数、文字列変数をどこに保存するかの扱い、あたりにあります。

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

【Android】写真のExif情報から写真の向きを取得する方法

タイトル通り、今回は写真の Exif 情報を取得する方法についてです。
ちなみに Exifとは、デジカメやスマートフォンで撮影した画像データに、撮影条件に関するメタデータを追加して保存できる、画像ファイル形式の規格のことをいいます。
例えば、撮影日時とかカメラの機種、カメラの向きなどが保存されています。

で、AndroidでExifを扱うときには、ExifInterface というサポートライブラリを利用します。

Android Developers Blog: Introducing the ExifInterface Support Library
https://android-developers.googleblog.com/2016/12/introducing-the-exifinterface-support-library.html

 

さて、使い方ですが、まず build.gradle に下記を追加します。

implementation "com.android.support:exifinterface:26.1.0"

追加する場所は dependencies{} の中です。
build.gradle を変更すると、Sync Now というリンクが表示されるので、これをクリックします。
エラーが表示されなければ、無事にライブラリが追加できました。

あとは、Activityにコードを追加してきます。

File f = new File([画像のファイルパス]);
Uri uri = Uri.fromFile(f);
int orientation = 1;
InputStream in = null;
try {
    in = getContentResolver().openInputStream(uri);
    ExifInterface exifInterface = null;
    if (in != null) {
        exifInterface = new ExifInterface(in);
        orientation = exifInterface.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_UNDEFINED);
    }
} catch (IOException e) {
    e.getStackTrace();
    Log.e("ExifActivity", e.getMessage());
} finally {
    if (in != null) {
        try {
            in.close();
        } catch (IOException ignored) {
        }
    }
}

結果は orientation という変数に入ります。
もし正常だったら 1 の値が入りますが、左に90度回転していた場合は 6 が、右に90度回転していた場合は 8 が、180度回転していた場合は 3 が入ります。
これに関しては、下記の記事を参考にしました。

iPhoneからアップロードしたJPEG写真が横向きになる問題(EXIF, Orientation)
https://qiita.com/RichardImaokaJP/items/385beb77eb39243e50a6

 

画像の回転については、以前紹介したこちらの記事を参考にしてください。
【Android】ImageViewの画像を180度回転させる方法
https://cpoint-lab.co.jp/article/201809/【android】imageviewの画像を180度回転させる方法/

 

以上、Exifから画像の向きを取得する方法でした。
次回は、位置情報の取得について説明できたらと思います。

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