小さなエンドウ豆

まだまだいろいろ勉強中

NativeScript-Vue でログが見たい

NativeScript-Vue で console.log の内容を見る方法

NativeScript を使って開発していて不便に思ったので記す。

外部 API にリクエストを送る際、レスポンスが返ってきているか普段の JS での開発では console.log などにはいて確認すると思われるが、NativeScript で同じことするとなぜか出力されない…

どこかログファイルなどに書きに言っているのかと思いきやそれも見つからず八方塞がりだったのだが、ある設定を付け足すと見れた。

Vue.config.silent = false

これをプロジェクト配下の main.js に書いたところ使っているターミナル上にログとして console.log の内容が表示されるようになった!

この silent という属性がデフォルトで true になっていると Vue が何も教えてくれなくなるらしい…

他にもいろんな設定が下記のページに記されてあったため、今後使っていこうと思う。

API — Vue.js

Javascript (Webpackプロジェクト) で .env

JS で環境変数を管理する

dotenv による環境変数の管理

先日環境変数周りで失敗をしてしまったため .env を使った環境変数の管理について学んでいく。
Rails プロジェクトだと dotenv という gem があって、それを使って .env ファイルに書いた変数の値を読み出すって方法がある。

dotenv | RubyGems.org | your community gem host

もちろん .env は .gitignore に書いてパブリックにさらされることを防ぐ必要がある。

Javascript でも同じようなやり方で .env で環境変数を管理できるようなので試してみる。

やり方

1 dotenv をインストール

$ npm install --save-dev dotenv

# yarn の方
$ yarn add dotenv

2 dotenv を記述

TEST_ACCESS_TOKEN=xxxxxxxxxxxxxx

3 webpack の plugins に設定

require('dotenv').config();

const dotenvPlugin = new webpack.DefinePlugin({
  'process.env': {
    'TEST_ACCESS_TOKEN': JSON.stringify(process.env.TEST_ACCESS_TOKEN)
  }
});


# config の中の plugins の配列の中に関数を入れる
plugins: [dotenvPlugin]

4 JS 側から呼び出す

console.log(process.env.TEST_ACCESS_TOKEN);

docker-compose run で bundle install を動かす

docker-compose run で bundle install

地味に忘れてしまうのでここで記録。
docker-compose.yml を以下のように記述するととりあえず動いた。

version: '3'
services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/research_app
      - bundle:/usr/local/bundle # bundleの設定
    ports:
      - "3000:3000"
    depends_on:
      - db
volumes:
  bundle:
    driver: local

ボリュームにグローバルで gem が追加される /usr/local/bundle を追加すればよいらしい

Native Script + Vue.js + Mapbox で地図アプリを作ってみた

Native Script + Vue.js + Mapbox で地図アプリ

Native Script とは

Javascript もしくは Angular もしくは Vue を使って Web アプリとAndroidiOSアプリを同時に作れる統合開発環境

↑らしいw
これなら Web 屋さんの自分でも触れると思い使ってみることにした。
今回作るアプリには地図を表示することがマストだったため Mapbox で作った地図を表示させることをゴールとして作っていく!

Mapbox とは

簡単にいうと Google map みたいな地図サービスのことをいう。
Mapbox でアカウントを作ると開発者用にダッシュボードが表示される。
そこで地図のレイアウトを独自に作ることができ、その地図をアプリケーションで使用することができる。
具体的な組み込み方は後述。

Native Script で Hello World

まずはローカルで開発するために専用の npm パッケージをインストール。

$ npm install -g nativescript

次にプロジェクトを作る。

$ vue init nativescript-vue/vue-cli-template mapbox-app

vue-cli と同じような感じですね。 一旦プロジェクト内に移動し、以下のコマンドらを実行するとアプリが立ち上がるはず。

$ cd mapbox-app

$ npm run watch:ios

iOSエミュレータの設定は以下を参考に行ったら、できた。

NativeScript Advanced Setup—macOS

Hello World は以上

Mapbox を組み込む

Mapbox を組み込むために以下の npm パッケージをインストール。

$ npm install nativescript-mapbox --save

これは Mapbox 社が用意したものらしい…すばらしい!
このあと以下の構文をプロジェクト配下の src/main.js に追加。

Vue.registerElement("Mapbox", () => require("nativescript-mapbox").MapboxView)

次に地図を表示させるコンポーネント src/compoents/Map.vue を作っていきます。 内容は以下のような感じです。

<template>
    <Page class="page">
        <ActionBar class="action-bar" title="Vue Mapbox Example"></ActionBar>
        <GridLayout>
            <Mapbox
                accessToken="{自分のアクセストークン}"
                mapStyle="traffic_day"
                latitude="52.3833160"
                longitude="4.8991780"
                hideCompass="true"
                zoomLevel="4"
                showUserLocation="false"
                disableZoom="false"
                disableRotation="false"
                disableScroll="false"
                disableTilt="false"
                @mapReady="onMapReady($event)">
            </Mapbox>
        </GridLayout>
    </Page>
</template>

<script>
    import * as utils from "utils/utils";
    export default {
        data () {
            return { };
        },
        methods: {
            onMapReady(args) {
                // 地図上に線を塗る
                args.map.addPolyline({
                    id: 1, // optional, can be used in 'removePolylines'
                    color: '#F00', // Set the color of the line (default black)
                    width: 7, // Set the width of the line (default 5)
                    opacity: 0.6, //Transparency / alpha, ranging 0-1. Default fully opaque (1).
                    points: [
                        {
                            'lat': 52.3833160, // mandatory
                            'lng': 4.8991780 // mandatory
                        },
                        {
                            'lat': 52.3834160,
                            'lng': 10.8991880
                        },
                        {
                            'lat': 30.3835160,
                            'lng': 10.8991980
                        }
                    ]
                });
            }
        }
    };
</script>

<style scoped></style>

Mapbox に別途アカウント登録をしてアクセストークンを得る必要がありますが、たったこれだけで地図コンポーネントが作れちゃう。

次にこれを src/main.js で include して画面に表示。

import Map from './components/Map';

Vue.registerElement("Mapbox", () => require("nativescript-mapbox").MapboxView)
new Vue({
  render: h => h(Map),
}).$start();

こんな感じです。もともと HelloWorld.vue が記述されていたところを Map.vue に置き換えただけ。

この状態で iOSエミュレータを起動させると以下のように表示される。

f:id:h-piiice16:20180825121410p:plain

センスのない線だが、これで完成!

参考

Include Feature-Rich Maps in a NativeScript-Vue App with Mapbox

ほとんどこれの日本語訳って感じです。

1 つのモデル(テーブル)に複数の外部キーをもたせる

テーブルの同じモデルの外部キーを複数もたせる

バージョン rails: 5.1.4

Railsマイグレーションで外部キーを持たせるために必要な記述として以下のように reference を使った方法がある

def change
    create_table :records do |t|
      t.references :users, index: true, foreign_key: true
      t.timestamps null: false
    end
end

ただ、以下のようなモデル(テーブル)を作りたいときにどのようにすればよいかわからなかった…

user_id start_station_id end_station_id
1 2 3
  • user_id は User モデルを参照している
  • start_station_id は Station モデルを参照している
  • end_station_id は Station モデルを参照している

ま、要は 1つのテーブルを複数のカラムで参照したい ということ。

以下のように書くとできたため、記録しておく

class CreateRecords < ActiveRecord::Migration[5.1]
  def change
    create_table :records do |t|
      t.references :users, index: true, foreign_key: true
      t.references :start_station
      t.references :end_station
      t.timestamps null: false
    end
    add_foreign_key :records, :stations, column: :start_station_id
    add_foreign_key :records, :stations, column: :end_station_id
  end
end

参考:

Railsマイグレーションのindex、foreign_keyの設定

複合外部キーなども設定できるらしく知らなかった…
Rails は直感的に書くとできるのでありがたい

Safari で SVG の画像が表示されない

SafariSVG の画像が表示されない

表題のまんま。
D3.js でこねこねした SVG 要素の中に image タグを用いて画像を扱う際になぜか Safari だけ表示されなかった。
D3.js のコードは以下のようなもの

svg.append('image')
            .attr("id", icon.name)
            .attr("href", IMAGE_PATH)
            .attr("class", "icon")
            .attr("x", x)
            .attr("y", y)
            .attr("width", ICON_WIDTH)
            .attr("height", ICON_HEIGHT)

解決策

Stack Overflow に同様の問題を抱えた人がいてその回答を試すことによって解決した。

stackoverflow.com

自分の場合は href の部分を xlink:href に変更することによってなんとか表示できた。
あとあと調べてみると Safari では SVG で href をサポートしていないらしい…
IE で辛い思いをしたことは多々あるが、Safari ではあまりないため、今後のためにも残しておこう。

WordPress の記事に D3 で作ったグラフを挿入する

WordPress に D3 で作ったグラフを挿入する

wp-d3 というプラグインを使って d3 で作ったグラフを載せてみました。 使い方などをここに示しておきます。

プラグインをインストール

WPのダッシュボード > プラグイン > 新規追加 > 「wp-d3」で検索 > インストール!

記事にグラフを載せる

適当に新規で記事を作ります。
ここで「WPD3」のボタンを押します。 f:id:h-piiice16:20171231160506p:plain

すると新たにウィンドウが開かれます。
ここにD3のコードを書いていきます。 f:id:h-piiice16:20171231160802p:plain

今回作ったコードは下記のようなものです。
ただの黒い円ですね。

var svg = d3.select('.wpd3-18850-0')
    .append('svg')
    .attr({
        width: 500,
        height:500
    });
 
svg.append('circle')
    .attr({
        cx:150,
        cy:150,
        r:80,
        fill: "black"
    });

コードを書き終わったら「insert」を押し、「save」を押し保存します。
「insert」を押すことで記事に下記のようなタグが埋め込まれます。
f:id:h-piiice16:20171231160745p:plain

これはさっき開かれたウィンドウのタブに振られていた番号です。(わかりにくいので下記の画像の赤い部分です) f:id:h-piiice16:20171231160802p:plain

これで記事を見てみると… f:id:h-piiice16:20171231161339p:plain

できてたー!簡単ですね!
ただ、d3 のバージョンがこのプラグインに内包されているものに依存してしまうためあまり凝ったものは載せれないかも… ちなみに d3 は3系で、wordpress は4系です。