月別アーカイブ 9月 2019

著者:杉浦

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

OpenVPN 2.4.5 以降と SSL バージョン

OpenVPN の 2.4.7 をインストールした所、昔から稼働している VPN サーバへの接続ができなくなってしまいました。

調査したところ、2.4.5 以降では古い脆弱な SSL 暗号鍵を使用している場合に接続が出来ない様です。

本来であれば、サーバ側、クライアント側、共にレガシーフリーになるのが良いのですが、やむを得ず 2.4.7 で回避策を選びました。

接続定義ファイル (*.ovpn) の最下部とかに以下の 1 行を追加します。

tls-cipher “DEFAULT:@SECLEVEL=0”

この指定によって接続自体はできる様になります。
しかし今や、脆弱な接続なのでご担当者の責任の元、注意して使用しましょう(w)

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

SoftBankが2年縛りの廃止を発表

Softbankが2年縛りの廃止を発表したようです。

ソフトバンク、「2年縛り」を契約満了月から無料で解除可能に – マイナビニュース

以前、総務省によって新たに”解約違約金は1,000円が上限”という規定に基づいた変更のようです。

これでどのタイミングで解約やMNPを行うか…といったように悩む必要がなくなるのはとてもありがたいですが、一方で端末料金の値上げや料金プランの複雑化などのデメリットも懸念されているようです。

とくに、端末料金については、契約時の端末料金の割引額を20,000円を上限とする規定も出たため、今後キャリアによる端末料金の割引は期待できなくなりそうです。

自分はY!Mobileを契約しているのですが、機種が少ないこと以外は非常に満足していて、例え解約料金がなくなったとしてもキャリアを変える予定はとくにありません。

さらに、規制適用後に今のプランをやめてしまうと元に戻せなくなる、となるとなおさらほかのキャリアに変更するメリットが見いだせないのも事実ですし、今のキャリアをずっと使い続けようと考えているひとにっては、当分のあいだは今回の変更によるメリットを感じることはなさそうです。

au2年縛りの違約金が1000円へ|総務省令で値下げの新料金プランを解説 – bitWave

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

【Laravel】Laravel Mixにそこそこ複雑な仕事を任せる

 Laravel MixはLaravelプロジェクト組み込みのwebpackラッパーです。webpackの基本的な設定やコンパイル用のスクリプトを準備しておいてくれる点とLaravel用のバージョニングやら環境変数やらと結びついている点が利点になります。普通に使う分には以下の様なコンパイル対象を宣言するだけで問題ないです。これだけで十分便利です。

const mix = require('laravel-mix');

mix.sass('src/app.sass', 'dist')
   .js('src/app.js', 'dist');

 しかしフロントエンド側の開発環境を凝ろうとするとこれだけでは少々不便です。vuejs/vue-clifacebook/create-react-appの様なフロントエンドに注力する開発環境を別途用意しSPAを作るやり方についての記事もググればまあまあ出てきます。SPAを作る時はLaravelをAPIに注力させます。
 Laravel Mixは前述の二種ほどでないにせよ、いくらか複雑なこともできます。ドキュメントはLaravelそのものとは別にあります。Laravel Mix
Laravel Mix Extensions
 とりあえずで使える広範なカスタマイズはwebpack本来のconfigを注入する方法で以下のコードの通りです。

mix.webpackConfig({
    resolve: {
        modules: [
            'node_modules',
            path.resolve(__dirname, 'vendor/laravel/spark/resources/js')
        ]
    }
});

Quick Webpack Configuration | Laravel Mix Documentation
 webpackConfig関数の中身にはwebpack.config.jsでexportされるobject同様のモノを入れればOKです。その様にすればLaravel Mix側でうまい具合にマージしてくれます。
Configuration | webpack
 Laravel自身バックエンド用ということもあり任せられる仕事は程々です。それぐらいはできるので気持ち複雑程度の課題ならばわざわざフロントエンド開発用フレームワークを用いるのでなくLaravel Mixで済ませたいです。

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

【xml】textのbackgroundを調整して重複したように見せる方法

以前まではimageViewの上にテキストを載せる手法を載せたのですが、今回はテキストの

backgroundの色を変えてレイアウトが重なったようにみせかけるレイアウト方法を

載せていきます。

方法は簡単で、textviewを通常通りに定義して各方向のpaddingを使うことで

重なったようなレイアウトにすることができます。

この手法はrelativeLayoutでも使うことができるので、アプリの見出しとかにもがんがん

使えそうです。

<pre><RelativeLayout
    android:id="@+id/relativeLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:ignore="MissingConstraints">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:paddingBottom="10dp"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        android:paddingTop="10dp"
        android:text="是非もないよね!"
        android:gravity="center"
        android:textSize="16sp"
        android:textStyle="bold" /></pre>
<pre></RelativeLayout></pre>

 

ポイントは各四方のpaddingで、bottomとtopの値を調整することで均等に

テキストを見せることができるので使い慣れておきましょう。

imageviewと組み合わせるよりも、書く時のコードもメンテナンス時の直すコードも

少ないので、特殊なカスタムボタンを作る時以外はこっちのが断然おすすめです。

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