はじめに

世界中の絶景を投稿できるアプリが作れます。
マップの表示方法はGoogleMapsAPIを使いました。
投稿した内容から自動的に軽度と緯度を取得してGoogleMapsAPIのマップ上に表示させます。
完成形はこんな感じ

環境

• Ruby 2.5.1
• Rails 5.2.3
• MySQL 5.6

目次

• GoogleMapsAPIのKEYを取得
• 簡単なアプリを作成しとりあえずGoogleMapsをアプリ上に表示させる
• 投稿機能を作り軽度、緯度取得し、マップ上に表示

GoogleMapsのKEYを取得

(グーグルアカウントにログインしてから始めてください)
まずGoogle Map PlatformからKEYを取得します

使ってみるを選択。

全て選択し続行。
プロジェクト名はなんでもいいですが今回はMyProjectを選択
支払い方法を入力します。
topページに移動しますので下の方のMaps Platfomを選択

Maps JavaScript APIを選択し有効を押します

画面上にあるAPI とサービスの認証情報

認証情報を作成を選択しAPIを作成。
画面にでてくるのがAPIキーになるので保存しといてください。（必要な場合はキーの制限をしてください）

簡単なアプリを作成しgooglemapをアプリ上に表示させる

アプリ名はここではgmapにします
ここの部分は自分のアプリ名にしてください。
まずアプリの雛形とデータベース設計します

ターミナル上で

rails _5.2.3_ new gmap -d mysql
cd gmap
rails g controller maps
rails db:create
rails db:migrate

erbになっているのでhamlに変換します。
ここは任意で大丈夫です。
※erbをhamlに簡単に変えてくれるサイトです

Gemfile

gem "haml-rails", ">= 1.0", '<= 2.0.1'

bundel install
rails haml:erb2haml

マップを表示させます
rails5.2以上なので今回はcredentialsを使います

routes.rb

Rails.application.routes.draw do
  root to: "maps#index"
end

views/maps/index.html.haml

%div{:style => "width: 100%;"}
  #map{:style => "width: 100%; height: 100vh;"}


:javascript
  function initMap(){
    let map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
    });
  }

%script{:src => "https://maps.googleapis.com/maps/api/js?key=#{Rails.application.credentials[:GOOGLE_MAP_KEY]}&callback=initMap"}

先ほどのAPIキーをcredentialsで隠しておきます
ターミナル上で

EDITOR="vi" bin/rails credentials:edit

GOOGLE_MAP_KEY: MyAPIKey

MyAPIKeyの部分は先ほど取得したkeyを入力してください
これで一応マップ表示ができたと思います！

投稿機能を作り軽度、緯度取得

まずは投稿機能を作るためにpostsのviewとcontroller,modelを作ります。

rails g scaffold posts name:string description:string latitude:float longitude:float
rake db:migrate

表示をgmaps4railsのgemを使って表示する方法に変えます。

Gemfile

gem 'gmaps4rails'

underscore、gmaps/googleをapplicaton.jsに追加します。

//= require underscore  //追加
//= require gmaps/google　　//追加
//= require_tree .

app/assets/javascripts/underscore.jsを作り
こちらの中身を全部コピペ

views/maps/index.html.haml

%div{:style => "width: 100%;"}
  #map{:style => "width: 100%; height: 100vh;"}

:javascript
  handler = Gmaps.build('Google');
  handler.buildMap({ 
    provider: {mapTypeId: 'hybrid'},
    internal: {id: 'map'}
    }, 
    function(){
    markers = handler.addMarkers(#{raw @hash.to_json})
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    handler.getMap().setCenter(new google.maps.LatLng(35.681298, 139.7640582));
    handler.getMap().setZoom(4);
  });

provider: {mapTypeId: 'hybrid'}の部分でマップのタイプを変えることができます。
何もなければ最初のタイプです。
他のタイプは下記を参照してください。

　ROADMAP 道路や建物などが表示される地図です
　SATELLITE 衛星写真を使った地図です
　HYBRID ROADMAPとSATELLITEの複合した地図です
　TERRAIN 地形情報を使った地図です

applicationにkeyを移してどこでも使えるようにします。

application.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Gmap
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    %script{:src => "//maps.google.com/maps/api/js?key=#{Rails.application.credentials[:GOOGLE_MAP_KEY]}"}
    %script{:src => "//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"}

    = yield

コントローラーに投稿した場所にmarkerが立つようにします。

maps_controller.rb

class MapsController < ApplicationController
  def index
    @posts = Post.all
    @hash = Gmaps4rails.build_markers(@post) do |post, marker|
      marker.lat post.latitude
      marker.lng post.longitude
      marker.infowindow post.description
    end
  end
end

marker.infowindow post.descriptionのところに表示させたいカラムを変えれば表示内容を変えれます。
今回はdescriptionにします。

これでマーカーが立つようになりました。
あとは新規投稿で軽度、緯度を取得できるようにします

gem 'geocoder'

post.rb

class Post < ApplicationRecord
  geocoded_by :name
  after_validation :geocode
end

名前のカラム名で軽度と緯度が取得できるようになったので
あとは送信する時に余計なカラムを消しておきます。

posts/_form.html.haml

  .field
    = f.label :name
    = f.text_field :name
  .field
    = f.label :description
    = f.text_field :description
  .field
    = f.label :latitude
    = f.text_field :latitude
  .field
    = f.label :longitude
    = f.text_field :longitude
  .actions
    = f.submit 'Save'

のlatitudeとlongitudeの項目を消します。
これで完成です！

最後に

間違っているところがあったら教えてください…

はじめに

備忘録・理解目的。
おかしいところ等あればご指摘いただけるとありがたいです(^_^;)

環境

・ Mac OS Catalina：　v10.15.3
・ VScode： v1.42.1
・ C/C++： v0.26.3
・ Code Runner： v0.9.15
　
表示させたいコード(ハローワールド)

helloworld.cpp

#include <iostream>

using namespace std;

int main(){
  cout << "Hello World!" << endl;
  return 0;
}

手順

C/C++ extension for VS Code のインストール

VScode拡張機能としてExtentionから「 C/C++ extension for VS Code 」をインストール。

https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools

Code Runner のインストール

同じくExtentionから「 Code Runner 」をインストール。

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

実行 & 結果

コード画面右上に表示される 「 ▷ 」 をクリックするとコンパイルされて別ファイル（↓）ができ、VScodeのターミナルで実行される。

����    �      �  ��!     ...

　
実行結果

[Running] cd "ファイルパス" && g++ helloworld.cpp -o helloworld && "ファイルパス"helloworld
Hello World!

[Done] exited with code=0 in 1.362 seconds

コマンド・ショートカット 等

・起動
　「 Ctrl 」 + 「 Alt 」 ＋ 「 N 」

・停止（読み取り表示のみのため、実行中はctrl+C、killコマンドができない）
　「 Ctrl 」 + 「 Alt 」 ＋ 「 M 」

参考

Run C++ Code in macOS Visual Studio Code! (2019)
Visual Studio CodeでC/C++プログラミング
Visual Studio Codeにてコードを実行することができる拡張機能

社内で、Slack bot で AWS Lambdaを起動する仕組みがあり
「このコマンドで行けるよ」と教えられ、コマンドをコピペしてSlackに投稿したところ
以下のエラーが出た

@aws lambda invoke --payload {"foo": "bar"} --function-name awesome-function --region ap-northeast-1
but unfortunately the service returned an exception:
Could not parse request body into json: Unexpected character ('“' (code 8220 / 0x201c)): was expecting double-quote to start field name

しばらく意味がわからず悩んでいたのだが、code 8220 / 0x201c のあたりをみて
引用符が勝手に変換されてるのでは？と気づいた。
（Microsoft Wordとかでデフォルトで使ってるとなる、引用符を自動的に変換するやつ）

調べてみると予想通り、Slackにコマンドをペーストしたタイミングで、
Macの「スマート引用符」の機能がはたらいて
ASCIIのダブルクウォートではない文字に置き換わってしまっていたのが原因。

キーボードの設定から「スマート引用符とスマートダッシュを使用」をOffにしたら解決した。

インストール

brewインストールか、公式サイトからダウンロードする。
私は、brewでインストールしました。

パターン1.brewでインストール

brew install github/gh/gh

パターン2.公式サイトからダウンロード

https://cli.github.com/

試してみる

認証

issueのリストを表示したい時に、以下のコマンドを使います。

gh issue list

しかし、Githubとの連携を先に要求されます。
指示に従って、エンターキーを押すと、ブラウザが起動します。

Notice: authentication required
Press Enter to open github.com in your browser... 
Authentication complete. Press Enter to continue... 

許可されたら、コマンドが使えるようになります。
なお、認証情報を削除したい場合は、以下のコマンドが良いかと思います。

rm ~/.config/gh/config.yml

issueのリストを表示する

gh issue list

もしくは

gh issue list -R [organization]/[repo name]

結果

gh issue list -R goda-kazuki/laravel-practice

Issues for goda-kazuki/laravel-practice

#2  さんぷるissue2          
#1  さんぷるissue        

プルリクエスト確認

gh pr list

その他コマンド

あまり種類は無いですが、公式を御覧ください

問題点

一部の日本語が文字化けする

ターミナルの幅が短く、全てを表示することができないときに、以下のような表示になりました。

幅が広いときは問題ありませんでした。

感想

まだ機能的に少ないので、アップデートをチェックしようと思います。
issueやPRに特化したものになるんですかね

目的

• Docker Desktop for Mac導入後に確認としてApacheのコンテナを作りブラウザから接続を確認する方法をまとめる
• とにかくちゃんとDockerが導入できているかの確認なのでディレクトリマウントなどは行わない

実施方法

1. Docker Desktop for Macの入ったPCで下記コマンドを実行する。

   $ docker run -d -p 8080:80 httpd
   

2. 下記にアクセスして「It works!」と表示されるか確認する。

• http://localhost:8080/

まえおき

mac Catalina上にRedashを構築したときにいろいろとはまったので手順をメモ

リポジトリをクローン

$ git clone https://github.com/getredash/redash.git
$ git checkout refs/tags/v8.0.0

構築に必要なコマンドをインストール

$ brew install pwgen

Dockerをダウンロードしてインストール

https://download.docker.com/mac/stable/Docker.dmg

ディレクトリの作成

$ sudo mkdir /opt/redash
$ sudo chown $USER:staff /opt/redash
$ mkdir /opt/redash/postgres-data

docker-compose.ymlのコピー

$ cd /opt/redash
$ cp <クローンしたパス>/redash/setup/docker-compose.yml .

DockerのFile sharingにフォルダを追加

<クローンしたパス>/redash/setup/setup.shの書き換え

#!/usr/bin/env bash
# This script setups dockerized Redash on Ubuntu 18.04.
set -eu

REDASH_BASE_PATH=/opt/redash

create_config() {
    if [[ -e $REDASH_BASE_PATH/env ]]; then
        rm $REDASH_BASE_PATH/env
        touch $REDASH_BASE_PATH/env
    fi

    COOKIE_SECRET=$(pwgen -1s 32)
    SECRET_KEY=$(pwgen -1s 32)
    POSTGRES_PASSWORD=$(pwgen -1s 32)
    REDASH_DATABASE_URL="postgresql://postgres:${POSTGRES_PASSWORD}@postgres/postgres"

    echo "PYTHONUNBUFFERED=0" >> $REDASH_BASE_PATH/env
    echo "REDASH_LOG_LEVEL=INFO" >> $REDASH_BASE_PATH/env
    echo "REDASH_REDIS_URL=redis://redis:6379/0" >> $REDASH_BASE_PATH/env
    echo "POSTGRES_PASSWORD=$POSTGRES_PASSWORD" >> $REDASH_BASE_PATH/env
    echo "REDASH_COOKIE_SECRET=$COOKIE_SECRET" >> $REDASH_BASE_PATH/env
    echo "REDASH_SECRET_KEY=$SECRET_KEY" >> $REDASH_BASE_PATH/env
    echo "REDASH_DATABASE_URL=$REDASH_DATABASE_URL" >> $REDASH_BASE_PATH/env
}

setup_compose() {
    cd $REDASH_BASE_PATH
    echo "export COMPOSE_PROJECT_NAME=redash" >> ~/.bash_profile
    echo "export COMPOSE_FILE=$REDASH_BASE_PATH/docker-compose.yml" >> ~/.bash_profile
    export COMPOSE_PROJECT_NAME=redash
    export COMPOSE_FILE=$REDASH_BASE_PATH/docker-compose.yml
    sudo docker-compose run --rm server create_db
    sudo docker-compose up -d
}

create_config
setup_compose

setup.shの実行

$ sh <クローンしたパス>/redash/setup/setup.sh

redashにアクセス

ブラウザでhttp://localhost:5000

参考文献

• 最新のRedashをMac上で起動する