月別アーカイブ 9月 2019

takahashi 著者:takahashi

iPhone11 発表!

先日のApple Spetial Eventで、ついにiPhone11が発表されました!

Google がPixel 3を発表した際に、前世代のiPhoneのカメラ性能をGoogleに比較されたためか、Apple公式のサイトではPixel 3に搭載されている夜景撮影モード”Night Sight”と同等の機能にあたる”ナイトモード”や、ポートレート機能の強化など、カメラ機能の進化をアピールしています。

また特徴的なのがリーク情報でもあったリアカメラの個数。

iPhone 11 の場合は2個、iPhone 11 Pro/Pro Max は3つ搭載されています。

ただ個人的には、カメラの個数が多すぎるような気がしたので、レンズが目立たないような配置にしてほしかったと感じました。

とりあえず、iPhoneユーザーでカメラにこだわる人にとってはいい端末になるかもしれません。

iPhone 11 – Apple

iPhone 11 Pro -Apple

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

Windows Update 2019年9月の失敗とロールバック

今日の Windows Update は失敗に終わりました。

帰り際に Windows Update をしておこうと思い、「更新と再起動」を選択して待つこと30分。何%くらい進んだかな、どんな状況かな、と画面をみてみると。

最悪。「変更を元にもどしています」とのこと。

更に1時間かけて戻されました。おいっ。

原因見てみると。
「更新サービス」止めてませんけどね。
HDD おそすぎるからタイムアウトしたのか? HDDの人もいるよ。
1903 更新、先にしろというのか?

KB4516115、KB4514601 共に失敗している様子。

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

【android・googlemap】ドラッグしたマーカーの位置取得について

前回はgooglemapのパーミッションを許可して実際に使うまでの流れを説明しましたが

、今回はgooglemapをカスタマイズするのに必須であるマーカーについて説明

していきます。

googlemapは、初期状態の時はマーカーも現在地取得ボタンも何もない状態であり、

初期位置がアフリカの状態でスクリーン表示されます。

しかしながらせっかくgooglemapを使ってアプリを作るので、今いる自分の

場所をピックアップして実際に中心位置に設定していきたいと思います。

 

まず、onMaoReady関数の中にaddMarkerのコールバック関数を書いていきます。

googlemapはこれを書くだけで中心位置を決めてくれます。なお、latlongがnullだったり

数値でなかったりすると大西洋の端に勝手に位置が決まるので注意してください。


mMap.addMarker( new MarkerOptions()
.title( "ピンのタイトル" )
.draggable(true)
.position( latLng ) );

 

potisionのカッコ内はこんな感じ。お好みで緯度経度を決めてください。

 

<pre>latLng = new LatLng(latitude, longitute);</pre>

 

これでマーカーの位置は決定することができました。

主題である「どうやって動かしたマーカーの位置情報を取得するか」ですが、

マーカーのドラッグ位置を感知するための関数が用意されているのでまずは

そちらを使います。

説明のためにもうコードを出してしまいましょう。

<pre>mMap.setOnMarkerDragListener(new GoogleMap.OnMarkerDragListener() {
    @Override
    public void onMarkerDrag(Marker marker) {
        // TODO Auto-generated method stub
        // Toast.makeText(getApplicationContext(), "マーカードラッグ中", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onMarkerDragEnd(Marker marker) {
        // TODO Auto-generated method stub
        Toast.makeText(getApplicationContext(), "マーカードラッグ終了", Toast.LENGTH_LONG).show();
        LatLng d = marker.getPosition();
        double newlat =d.latitude;
        double newlong =d.longitude;
        System.out.println(newlat);
        System.out.println(newlong);
    }

    @Override
    public void onMarkerDragStart(Marker marker) {
        // TODO Auto-generated method stub
        Toast.makeText(getApplicationContext(), "マーカードラッグ開始", Toast.LENGTH_LONG).show();
    }
});</pre>

関数にはそれぞれonMarkerDrag、onMarkerDragEnd、onMarkerDragStartと

ありますが、肝心の位置情報はマーカーを離したときに取得したい。つまり、

onMarkerDragEndの中に処理を書いていきます。

 

肝はこのmarker.getPosition()で、このメソッドでマーカーのドラッグ終了時の位置を

読み取りLatLngに格納しているのが分かります。

取得後d.latitudeとd.longitudeそれぞれの位置情報をdouble変数で抜き取れば後は

こっちのものなので自由に使うことができます。

ここまで短いですがこれでマーカーの位置取得の説明を終わります。

必要なコードもそこまでないのでgooglemap初心者のかたでもさくっとできそうです。

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

npmでインストールしたパッケージのセキュリティチェックと修正をする方法

以前、「【Windows】npmがアップデートできない時の対処法」についての記事を投稿しましたが、若干それに関係する記事です。
というのも、npm を更新したかった理由が、npm 6.1.0 でリリースされた npm audit fix コマンドを使いたかったからなんです。
こちらは、npm でインストールしたパッケージのセキュリティチェックと、それで判明した脆弱性のある箇所を自動修正してくれるコマンドです。
こう言った管理が苦手なのですごく助かりますね!

詳しくはこちらのサイトを参考にしました。

脆弱性の警告を受けたnpmパッケージの依存関係を力技で直す – Qiita
https://qiita.com/hibikikudo/items/0af352acac85fce28ec2

 

こちらのコマンドは、npm のバージョンを 6.1.0 にアップデートすると使用できます。
使用する際は、パッケージをチェックしたいプロジェクトのルートディレクトリに移動し、npm audit fix を実行するだけです。
問題がなければ、問題のあるパッケージをチェックし、脆弱性を修正してくれます。

が、場合によっては、手動で修正を行わなければいけないこともあります。
その場合は、上記の Qiita の記事を参考にして問題を解決してください。
私の環境では、運良く? npm audit fix コマンドだけで問題が解決できました。

 

以上、npm でインストールしたパッケージのセキュリティチェックと脆弱性を自動修正する方法でした。
ご参考になれば幸いです。

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

【Vue.js】Vue.extend()でVue.jsらしい記述のままTypeScriptを適用する

 Vue.jsは素のwebページ用コード(HTML, JavaScript, CSS)の雰囲気を保ったままいい感じに動いてくれるJavaScriptフレームワークです。特に単一ファイルコンポーネントはHTMLをHTMLのまま、VueオブジェクトをVueオブジェクトのまま、CSSをCSSのまま表現してまとまったデザインのコンポーネントを作り上げます。

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

単一ファイルコンポーネント — Vue.js
 これは便利なのですが、TypeScriptとはどうにも相性が悪いです。少なくとも2点問題点がありそれはJavaScriptコード部で定義された値をテンプレートに当てはめた時に型定義を持ち越すのが難しい点とJavaScript部の定義がほとんどが素朴なオブジェクトのためTypeScriptの型構文を記述する余地が少ない点です。
 上記の問題を解決する方法の一つとしてvue-property-decoratorがあります。下記の引用の様にclass構文と@以下によるデコレートでVueコンポーネントであることを表現します。

    @Component
    class Test extends Vue {
      @Prop(Number) [propertyName]!: number // @Propでpropsの一つであることを表現
    }

 kaorun343/vue-property-decorator: Vue.js and Property Decorator
 これはこれでありですし言語実装としては簡単(何がどこに現れるのか、どこからどこまでが区切りなのか厳密)なのでしょうが、Vue.jsからいくらか離れた記法を用いる点でIDE、ESlint、storybookなどと組み合わせることと機能の把握に面倒が起きます。こうなるならばReactを使って新たにJavaScriptでまとめ切る方が便利な気がします。
 vue-property-decoratorの難点を解決する方法としてVue.extend()というやり方があります。これはvue-property-decoratorからいくらか後の実装で追加されたようです(また聞きで一次ソース未確認)。
 API — Vue.js#Vue-extend
 このやり方とTypeScriptを組み合わせると次のように記述できます。素の状態では素朴なオブジェクトしか返せませんでしたがVue.extendの引数としての型であるComponentOptionsを得ました。

<template>
  <p>{{ greetingToTarget }}</p>
</template>

<script lang="ts">
import Vue, {ComponentOptions, PropType} from 'vue';

type HelloWorldDataType = {
    greeting: string,
    modalLevel: string,
}
export default Vue.extend({
  props: {
    target: {type: String as PropType<string>, required: true},
  },
  data: function (): HelloWorldDataType {
    return {
      greeting: 'Hello' // data全体の返り値の型を決めるのでなく、ここでas stringとするのも手
    }
  },
    computed: {
      greetingToTarget():string {
        return `${this.greeting} ${this.target}!`;
      }
  },
} as ComponentOptions);
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

 上述のようにするとIDEの型に関する機能や予測補完が強く働きだし便利な上、想定外の挙動をした時には厳しく警告を飛ばしてくれます。

 webpackのプロダクト用変換などの方法で純粋なJavaScriptに圧縮変換するとなんやかんや動くJavaScriptの特徴も復活させられます。

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

Appleの発表会イベントがいよいよ深夜2時からスタート

いよいよ今夜(9/11)夜中2時からAppleの発表会イベントであるAppleSpectialEventsが開催されます。

Apple Special Events – Apple

今回は、なんとApple公式でYouTubeチャンネルから配信を行うようです。

また今回も、毎回Appleイベントの同時通訳を”macwebcaster.com”さんが行うそうです。

英語しかわからない、という方も安心ですね。

今回の発表では、非常に多くの記事で新型iPhoneが発表されるのではと言われています。

個人的にはサプライズ的に最近噂としてでているiPhone SEの後継機種が出てほしいなーと思っているので、そのあたりもどうなるのか、楽しみですね。

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

【PHP】exec()関数で非同期処理を行う方法

ちょっとハマったので備忘録も兼ねてまとめ。
…まあ、結局別の方法を使っちゃったんですけどね。

 

使用する関数は、タイトルにもある通り exec() 関数です。
PHP マニュアルのページは下記からご確認ください。

PHP: exec – Manual
https://www.php.net/manual/ja/function.exec.php

サンプルコードは下記のとおりです

exec('[実行するコマンド] > /dev/null &');

> /dev/null & を追加すると戻り値がなくなります。
また、末尾に & を付けると、バックグラウンド処理で実行するという意味になります。

基本的にはこんな感じですが、個人的に覚えておきたいのはパラメータを渡す方法です。
例えば、ただコマンドを実行するだけでなく、$_GET や $_POST のように値を渡したい時があるかと思います。
そんなときのコードの書き方がこちら。

まず、呼び出すときの書き方。

exec("php [実行したいPHPファイル] [値1] [値2] > /dev/null &");

で、こちらが呼び出されるときの書き方です。

$value1 = $argv[1];  // 値1
$value2 = $argv[2];  // 値2

$argv を使うと、渡されたパラメータを呼び出される側で受け取ることができます。
なお、$argv[0] には実行されたコマンド、今回のサンプルでは php [実行したいPHPファイル] が入ります。

 

以上、PHP の非同期処理の書き方でした。
他にもライブラリを使う方法なんかもありましたが、開発環境の都合上、自由にライブラリの追加が出来なかったので、こちらの方法を試してみました。
ご参考になれば幸いです。

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

【TypeScript】TypeScriptの型定義の仕方

 TypeScriptはJavaScriptの拡張言語です。Microsoftがメインのコントリビューターでサポートも充実しています。TypeScriptはAltJSの中でも穏やかな方でJavaScriptに独自の型定義機能と変数、プロパティと結合した型宣言機能といった型関連の機能を付けただけです。変化が少なく汎用的なためかVue.js+TypeScriptやRact+TypeScriptといったフレームワークとの結合を解決するパッケージも盛んに開発されています。型が付くことによりIDEの予測や補完、バグの潜在性アラートなどが強力に働きます。

TypeScript – JavaScript that scales.
microsoft/TypeScript: TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

 始めるならQuick Start · TypeScript試すならTypeScript playgroundがやりやすかったです。特にクイックスタートでは各パターンのテンプレがGitリポジトリに用意されており、それをひな型に手を動かすだけで慣れていけます。
 TypeScriptは基本的に変数、プロパティ、関数の宣言時に宣言部の後に:をつけて型を決めます。

const a: number = 1;

function hoge(): string {
    return 'hoge'
}

class Bar {
}

interface FooBar {
    foo: Date;
    bar: Bar;
}

class Fuga implements FooBar {
    foo!: Date;
    // !はnullになることはないとTypeScriptに伝える.
    // フレームワーク中のコンストラクタっぽいもので初期化される時とかに便利.
    bar: Bar;

    constructor(bar: Bar) {
        this.bar = bar;
    }
}
type StringOrStrings = string|string[];
const char: StringOrStrings = 'ch';
const chars: StringOrStrings = ['c', 'h'];

 この様にすると、それぞれの部分に型が定義され値の型を追うことができます。上記のみならずEnum等さらに拡張することもできます。
 厳密な型定義から外れますが利便性のために型定義を変数を介さず文中に入れたい時があります。そういった時は次のようにします。

(document.head.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content

 この様にすると括弧でくくった部分の型を定義できます。セレクタで特定の種類の要素(metaタグ、inputタグなど)を参照するときなど特に便利です。

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

【androidjava】googlemapで使用するapi-keyが正常に読み込まれない時の対処法

2018年度からgooglemapをアプリで使う際はgoogleCnosoleDeveloperでgoogleMapApi

ライブラリを有効にしないとgooglemapが正常に起動できなくなりました。

自分が今作っているアプリも例外でなく、表示する際に灰色のスクリーン

がでてきてしまいます。登録だけならいけるだろと思っていたのですが

これがまためんどくさい仕様でかなり沼ったので書き置きしていきます。

ちなみにここでは、googleアカウントを作成してある前提で

説明していきますのでご容赦ください。

 

まず、googlemapを正しく使うには、登録の際にはパッケージ名とフィンガプリント

(証明書)の二点が必要になります。パッケージ名はactivityの一番上にあるので

分かりやすいですね。一方でフィンガプリントはどうやって見るかというと、

まずcmdに移動して

keytool -list -v -keystore “C:\Users\ユーザー名\.android\debug.keystore”

-alias androiddebugkey -storepass android -keypass android”

と打ち込みます。すると、ずららっと色々な署名系の暗号が

書いてあるのが分かります。その中でsha1:から始まるローマ字と数字が合わさった

文字列がこれからgoogleCnosoleDeveloperで使うフィンガープリントに

なるので間違えないようコピーをしておいてください。

 

 

これでフィンガプリントの確保はできたので、実際にgoogleCnosoleDeveloperでgooglemap

を使えるようにしていきたいと思います。

 

まず、ログイン後ダッシュボードに移動したら画面上にあるAPIの有効化をクリックします。

 

 

移動後にMapsSDKForAndroidをクリックします。その後管理ボタンをクリック。

この時点でAPIKeyを取得できます。

 

その後apiとサービスの認証情報で新しい認証情報を作成し、外部からの悪用を

避けるためのapiキーの制限を設定します。

設定ページに移動したら、パッケージとフィンガプリントを入れるフォームがあるので

そちらに自分のパッケージとフィンガプリントを入れていきます。完了後に保存します。

 

 

 

適用されるまで少し時間がかかりますが(最長で5分)これが終わればgoogleApiが有効に

なっているので少しづつマニフェストに書いていきます。

 

上記の設定を全て終わらせたら、androidManifestに必要事項を書いていきます。

まず、applicationタグ内にmeta-dataタグを設定していきます。

(自分はここでハマりました。なのでこちらは後で説明します。)

</pre>
<pre><meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="AIzaSyBc5xjIzF1vpeS2Kt1_vAXFRQGdeebZNLQ"/></pre>
<pre>

 

上記のmeta-dataには、先ほど取得したapiキーを入れていきます。

その後下記のようにgoogle-play-serviceのパーミッションを設けます。

 

</pre>
<pre><meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />
<meta-data</pre>
<pre>

最後に、googolemapのパーミッションを書いて終了です。

こちらの作業後にビルドしてマップが出れば成功です。が、自分の場合はマップが

グレースクリーンで返されました。一通りパーミッション等を見ても設定漏れも

パッと見ない・・・。よくわからず。

 

仕方がないのでandroidStudioで吐かれたエラーを見てみることに。

すると、googleCnosoleDeveloperに登録したパッケージ名とログで吐かれたパッケージ名

が異なることに気づきました。

 

activityの一番上にあるpackage com.なんとかかんとか;って書いてあるのが

パッケージじゃないんかい!!と突っ込みつつandroidStudioログ側のパッケージ

をgoogleCnosoleDeveloper内の新しいアイテムにて登録。

これで、晴れてマップを表示させることができました。

以上でgooglemapの使用法とエラー対処法は終わりです。

似たような悩みがある方はまずandroidStudioで吐き出されるパッケージ名と

フィンガプリントを確認してみてください。以上です。

 

androidStudioで吐かれたログがこちら↓

</pre>
<a href="https://cpoint-lab.co.jp/wp-content/uploads/2019/09/googlemaperror.jpg"><img class="alignnone size-medium wp-image-11563" src="https://cpoint-lab.co.jp/wp-content/uploads/2019/09/googlemaperror-300x33.jpg" alt="" width="300" height="33" /></a>
<pre>
  • この記事いいね! (0)
著者:ym

32ビットアプリとVirtualStore

よく探す事があるので、メモ。

32bit アプリケーションで Program Files 等に保管しようとすると、いつの間にか権限の関係で C:\Users\username 配下に VirtualStore 機能でシームレスに保管されてます。

C:\Users\(username)\AppData\Local\VirtualStore

Windows Vista から搭載された機能ですが、いまいちヤヤコシイ。

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