今回はrailsを用いたポートフォリオ作成の為に今までcloud9で開発していたのをローカル環境で行う。その備忘とアウトプットです。
今後も掲載していくので何か気付きがありましたら報告よろしくお願いします！

rails ruby などなどはすでにインストールを以前済ませた為mysqlの起動から

mysqldのターミナル上での起動
mysql.server start

mysqldのターミナル上での起動ステータスの確認
mysql.server status

mysqlが起動していなかった場合
ERROR! MySQL is not running

mysqlが起動していた場合
Starting MySQL
.. SUCCESS!

となるmysqlが起動されステータスokであれば
rails sでrailsサーバーを起動するtと以下のログが時発生するので

https://gyazo.com/35a5d81be14535389ca6fce42a2b62e3

最終行の://localhost:3000をコピーしhttp://localhost:3000
ネットワークで検索をかける

見覚えのあるこちらの画面が出ればローカル環境でのrails起動が完了する。

Fonts Install

ダウンロードします

$> curl -L https://github.com/adobe-fonts/source-han-code-jp/archive/2.011R.tar.gz | tar zx

最新リンクは下記からコピーします。
https://github.com/adobe-fonts/source-han-code-jp/releases

$> mv source-han-code-jp-2.011R/OTC/SourceHanCodeJP.ttc ~/Library/
$> mv source-han-code-jp-2.011R/OTC/SourceHanCodeJP.ttc ~/Library/Fonts
$> rm -rf source-han-code-jp-2.011R

Terminalに適用させる

menu の Preferences をクリックします。

Font の Change をクリックします。

Souce Han Code JPを選び、サイズなどを選択します.

以上で導入完了です。

背景

基本的に以下の先行事例と同じ動機。

• Running Lilypond on MacOS 10.15 (Catalina) | Kyle W. Baldwin
• macOS Catalinaで死んだLilypondをDocker上で動かす - Qiita

楽譜作成ソフトlilypondはmacOSの64bit版が存在しないためCatalina以降では実行できない。公式サイトには非公式バイナリも紹介されているが、いつまでメンテナンスされているかわからない。

ただし上記２サイトはdockerhubでイメージが管理され、いまいち現時点ではDockerfileの作り方もわからないDocker初心者にはよくわからないところもあったので、特に１つ目を参考にしつつ０から作れる方法を以下にメモ。

たぶんDocker hubを理解すればそちらの方が楽に思えるのだろうけれど。

環境はMacBook Air 13-inch 2018。

Dockerをインストールしてイメージを作成

Running Lilypondのページで紹介されているように Install Docker Desktop on MacからDockerのインストーラをダウンロードし、ドラッグアンドドロップでインストールしてDocker hubにアカウントを作成してログイン。ログインは必要ないかもしれない。

次に

% docker pull ubuntu

でイメージをダウンロードし、

% docker run -it ubuntu

でそのubuntuイメージからコンテナを作成・起動・アタッチ。オプション-itはそれぞれ標準入力利用可能と端末(TTY)利用可能。起動したままdettachしたい場合はCtrl+P, Ctro+Q。停止させたい場合はexit。

参考: Dockerコンテナの作成、起動〜停止まで - Qiita

lilypondをDockerコンテナ上にインストール

アタッチしたコンテナ上で
Kyle Baldwinさんのgithubにあるように、

• apt-get update
• apt-get install locales
• apt-get update
• apt-get install wget
• lilypondのバイナリをwget
• shでインストール。

% sh lilypond-2.20.0-1.linux-64.sh

以上でこのコンテナ上では普通にlilypondが実行できるようになった。

lilypondがインストールされたUbuntuコンテナをイメージとして保存する

Ctrl+P, Ctrl+Qでコンテナからdettachする。

Docker ps で起動しているコンテナの一覧を表示し、ハッシュ値を得て、docker コミットしてdocker-lilypondという名前のimageを作成。

% docker commit <hash> docker-lilypond

参考: Dockerでcommitしてみる - Qiita

Dockerイメージ一覧にdocker-lilypondが表示された。

% docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
docker-lilypond     latest              b77f9ee3467e        4 days ago          303MB
ubuntu              latest              4e2eef94cd6b        2 weeks ago         73.9MB

Mac上からDockerコンテナ上のlilypondを実行して楽譜を取り出す

以下のコマンドで一回ごとにイメージを起動してlilypond を実行できる。カレントディレクトリ(pwd)を/app にマウントし、sample.lyファイルに対してlilypondコマンドを実行する。

% docker run --rm -v $(pwd):/app -w /app docker-lilypond lilypond sample.ly

すると端末にlilypondのメッセージが表示され、カレントにsample.pdfが作成される。このコマンドをファイルに保存してchmod +xして/usr/local/binに置く。

lilypond.sh

#! /bin/bash
docker run --rm -v "$(pwd)":/app -w /app docker-lilypond lilypond "$@"

以降は

lilypond.sh aaa.ly

でaaa.pdfが作成できる。 lilypond.sh --version のような実行も可能。

はじめに

YouTube Data API を使って、YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみました。

JavaScriptのYoutube用ライブラリもいくつかあるみたいですが、
今回はURLを直打ちする形で実装しました。

GET URLやJSONの仕様は下記を参照しました。
https://developers.google.com/youtube/v3/docs

環境は下記になります。
macOS Catalina 10.15.6
Node.js v14.8.0
(Node.js Library)request 6.14.7

コードと実行結果

コードは下記になります。

youtube.js

const request = require('request');

const URL_YOUTUBE_API='https://www.googleapis.com/youtube/v3/';
const YOUTUBE_APP_KEY=process.env.YOTUBE_APP_KEY;
const MY_YOUTUBE_CHANNEL_ID=process.env.YOUTUBE_CHANNEL_ID;
const URL_YOUTUBE_CHANNELS=URL_YOUTUBE_API + 'channels?key=' + YOUTUBE_APP_KEY + '&part=snippet,statistics,contentDetails&id=' + MY_YOUTUBE_CHANNEL_ID;
const URL_YOUTUBE_PLAYLISTITEMS=URL_YOUTUBE_API + 'playlistItems?key=' + YOUTUBE_APP_KEY + '&part=snippet,contentDetails&playlistId=';
const URL_YOUTUBE_VIDEOS=URL_YOUTUBE_API + 'videos?key=' + YOUTUBE_APP_KEY + '&part=player&id=';

var get_yotube_options_base = {
    url: '',
    method: 'GET',
    json: true
};

var html_data = [];

var get_youtube_options_1 = get_yotube_options_base;
get_youtube_options_1.url = URL_YOUTUBE_CHANNELS;
request(get_youtube_options_1, function (error, response, ch_info) {

    var playlistId = ch_info.items[0].contentDetails.relatedPlaylists.uploads;
    var get_youtube_options_2 = get_yotube_options_base;
    get_youtube_options_2.url = URL_YOUTUBE_PLAYLISTITEMS + playlistId;
    request(get_youtube_options_2, function (error, response, playlist_info) {
        var videoId_list = [];
        playlist_info.items.forEach(item => {
            videoId_list.push(item.snippet.resourceId.videoId);
        });
        var get_youtube_options_3 = get_yotube_options_base;
        get_youtube_options_3.url = URL_YOUTUBE_VIDEOS + videoId_list.join(',');
        request(get_youtube_options_3, function (error, response, video_info) {
            video_info.items.forEach(item => {
                html_data.push(item.player.embedHtml);
            });
            console.log(html_data);
        });
    });
});

実行結果は下記になります。
「XXXXXXXXXXXXX」の部分は自分の情報に書き換えてください。

% export YOTUBE_APP_KEY=XXXXXXXXXXXXX
% export YOUTUBE_CHANNEL_ID=XXXXXXXXXXXXX
% node youtube.js
[
  '<iframe width="480" height="270" src="//www.youtube.com/embed/uRML4cHJKsE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
  '<iframe width="480" height="270" src="//www.youtube.com/embed/BuHrzydYE2s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
]

コードの説明

YouTubeに対して3回HTTPリクエストをする形になってます。

(1回目) チャンネルIDから再生リストIDを取得 => URL:「URL_YOUTUBE_CHANNELS」
(2回目) 再生リストIDから動画IDを取得 => URL:「URL_YOUTUBE_PLAYLISTITEMS」
(3回目) 動画IDから埋め込みHTMLを取得 => URL:「URL_YOUTUBE_VIDEOS」

事前準備が必要です。
・App Keyについては、
「Google APIs Console」というサイトで発行しておきます。

・YouTube Channel IDはIDを取得したいチャンネルのページに行って、ソースを表示=>「CHANNEL_ID」で文字列検索すると出て来ます。

下記の画像で言うと「UCD0it6kq_2HBn3uMACiX_3A」の部分です。

以上です。

なぜこんなことをしたのか

発端は、この方と同じような状況です。
VPNがsoftetherで作成されたのが発端でした。

当初はiSSTPが信頼できるアプリケーションなのかが判断つかなかったので、softetherのL2TP接続でmacから接続できないか、VPN作成側に依頼をしていました。

残念ながら接続はうまくいかず、結局iSSTPを導入して接続してみました。

• CONNECTを連打しないと繋がらない
• つながっても速度が異常に遅い
• macの調子が悪いので再起動したら、Appleマークが出て起動に時間がかかる

など不安なことが多く発生し、「家にWindowsがあるのだからこれをproxyにして接続できるはずだ」という思いつきから始まりました。

Windowsをproxyサーバーにする

まずWindowsをどうproxyサーバーにすればいいかです。
導入の手間が最小のdockerイメージに、何かないかを探してみたところ、ちょうどよさそうな sameersbn/docker-squidがみつかりました。

以下の手順でdockerを導入し、Windowsをproxyサーバー化します。

1.Windowsに docker for Windows のインストール
2.Windowsの power shell を開く
3.以下のコマンドでdockerイメージを起動

docker run --name squid -d --restart=always --publish 3128:3128  sameersbn/squid:3.5.27-2

これで、power shellから

curl example.com -Proxy localhost:3128

でプロキシ経由でアクセスできるか試したのですが、エラーが発生。。。

以下のコマンドでsquidのログを確認。

docker exec -it squid tail -f /var/log/squid/access.log

すると

...(略)... 172.17.0.1 TCP_DENIED/403 ...(略)...

というエラーが出ていました。

このエラーをググってこの方の記事に辿り着き、squid.confにhttp_accessとaclの指定がないとダメそうだなとわかりました。

dockerイメージのsquid.confの差し替え

まずコンテナ内の既存のconfをホストにコピーします。

docker cp squid:/etc/squid/squid.conf .

コピーしたsquid.confに、ログに出力されていたIPを通すように以下を追記します。

acl docker src 172.17.0.1
http_access allow docker

変更したconfでdockerを再起動します。
($pwdに関してはこの方の記事を参考)

# 既存に動作しているイメージを削除
docker rm -f squid

# pwdの指定
$pwd = "/$((pwd).Drive.Name.ToLowerInvariant())/$((pwd).Path.Replace('\', '/').Substring(3))"

# conf付きでイメージ起動
docker run --name squid -d --restart=always \
  --publish 3128:3128 \
  --volume ${pwd}/squid.conf:/etc/squid/squid.conf \
  sameersbn/squid:3.5.27-2

これで先ほどの以下のコマンドが成功するようになりました。

curl example.com -Proxy localhost:3128

macのproxyにWindowsを指定する

ここの公式の説明を参考に、

ネットワーク環境設定 > WiFi > 詳細 > プロキシ の

• Webプロキシ（HTTP）
• 保護されたWebプロキシ（HTTPS）

それぞれに {WindowsのIPアドレス}:3128 を指定することで、proxyの設定は完了です。

これでブラウザからはVPN経由で接続でき、アクセス元のIP制限がされているWebページがmacから閲覧できるようになりました。

gitもproxy経由で接続する

本プロジェクトのgitも接続元IPが制限されていました。

上記のmacの設定では、gitはproxyを経由しないので、この方の記事を参考に、以下の指定をします。

git config --global http.[https://{gitドメイン}/].proxy http://{WindowsのIPアドレス}:3128

これで git clone でソースを落としてくることができるようになりました。

まとめ

同じように困っている方の助けになれば嬉しいです。

macからsoftetherにL2TPで接続する方法を教えてください 泣

概要

.gitignoreファイルを使い、指定のファイルをgit hubにアップしないようにする方法です。

rubyでbitcoinの自動売買システムを作成しています。ただ、bitflyerのAPI_KEYをgit hubにアップすると、セキュリティ上まずいです。色々調べると、.gitignoreファイルで対処可能であることが分かったので、記録しておこうと思います。

ruby on railsだと、環境変数でgit hubの管轄外にできることは知っていたのですが、今回は別の方法で。

手順

手順はざっとこんな感じです。

1 .gitignoreファイルをアプリケーション直下に作成
2 git statusで状況確認
3 .gitignoreファイルに除外したいファイルを記述

1.gitignoreファイルをアプリケーション直下に作成

アプリケーションの直下に「.gitignore」ファイルを作成します。
拡張子と勘違いされて、保存する前に警告が出ますが、「.gitignore.」で保存すればいいみたいです。それと合わせて、bitflyerのAPI_KEYを記述するkey.rbの作成します。

2 git statusで状況確認

git statusはcommitされていないファイルを確認するみたいのものです。
（間違っていたらすみません笑)
すると、先ほど作成した2つのファイルが確認できます。これをこのままリポジトリにpushするとAPI_KEYが公開されてしますので、「key.rb」を隠したいと思います。

$ git status

Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        key.rb

nothing added to commit but untracked files present (use "git add" to track)

3 .gitignoreファイルに除外したいファイルを記述

API_KEYの書いているkey.rbファイルを.gitignoreに記述すれば、git hubからの除外に成功です。

key.rb

API_KEY = "ここにkeyが書いています"
API_SECRET ="secret keyが書いています"

gitignore.

key.rb