Microsoft Web Template Studio

オープンソースの「Visual Studio Code」拡張機能の「Microsoft Web Template Studio」を試してみました。

Github

• WebTemplateStudio
  https://github.com/microsoft/WebTemplateStudio
• VisualStudioCode
  https://github.com/microsoft/vscode

Visual Studio Codeのインストール

Visual Studio Codeは以下からダウンロード＋インストールしてください。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Microsoft Web Template Studioのインストール

以下のショートカットで拡張機能を表示します。

OS	ショートカット
Mac	⇧⌘X
Windows	Ctrl+Shift+X

テキストボックスに「Web Template Studio」を入力します。
「Web Template Studio」が出てきたら「Install」ボタンクリックでインストールされます。

※既にインストール済みのスクショで申し訳ない

Web Template Studioでプロジェクト作成

コマンドパレットから開始

以下のショートカットでコマンドパレットを表示します。

OS	ショートカット
Mac	⇧⌘P
Windows	Ctrl+Shift+P

コマンドパレットが表示されたら「Web Template Studio」を入力して開始です。

プロジェクト名＋保存先設定

「Project Name」と「Save To」を設定したら「Next」をクリックします。

JavaScriptフレームワークの設定

React、Angular、Vue.jsから選択が可能です。
今回はAngularを選択しました。

バックエンドフレームワークの選択

Node/Express、Flask、Moleculerから選択が可能です。
今回はNode/Expressを選択しました。

JavaScriptフレームワークとバックエンドフレームワークを選択したら「Next」をクリックします。

ページテンプレートの選択

とりあえずなんでもいいかなと思ったので、選ばれているやつをそのままにして「Next」をクリックします。
※好みのを選択・追加して下さい

Azure Cloudの設定

とりあえず今の所スルーでいいかなと思ったので、「Next」をクリックして次へ。

プロジェクト作成！

設定したものに問題がなけれ、「Create Project」をクリックしてプロジェクト作成を完了します。

プロジェクト作成が完了すると以下のウィンドウが表示されるので、「Open Project」をクリックします。

プロジェクトを開くと以下のようか画面になるかと思います。

サーバーを起動する

ターミナルを起動

以下のショートカットでターミナルを表示します。

OS	ショートカット
Mac	⇧⌃`
Windows	Ctrl+Shift+`

npmを初期化

表示されたターミナルで以下のコマンドを入力し実行します。

npm install

npmでサーバー起動

npmでサーバーを起動するコマンドを入力し実行します。

npm run start

サーバー起動完了！！
あとは、以下のURLにアクセスすれば良いです。

http://localhost:3000/

感想

楽だなと思うのですよ。
最初から全て入れようとしたら
nodeインストールして
フレームワークインストールして
フォルダ構成考えて
etc・・・
となんやかんややらなきゃいけないのを手軽にWebページ表示（ローカル）できるので便利です。
いいオモチャを手に入れた気分です。
※nodeインストールとか最初だけだけど

とりあえず今回はここまで。

railsで新しいアプリのDBを作成するべくrake db:createをしたところ、以下のエラーメッセージが表示。

LoadError: dlopen(/Users/（ユーザー名）/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/mysql2-0.5.2/lib/mysql2/mysql2.bundle, 9): Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
  Referenced from: /usr/local/opt/mysql@5.6/lib/libmysqlclient.18.dylib
  Reason: image not found - /Users/（ユーザー名）/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/mysql2-0.5.2/lib/mysql2/mysql2.bundle
/Users/（ユーザー名）/projects/（アプリ名）/config/application.rb:7:in `<top (required)>'
/Users/（ユーザー名）/projects/（アプリ名）/Rakefile:4:in `require_relative'
/Users/（ユーザー名）/projects/（アプリ名）/Rakefile:4:in `<top (required)>'
/Users/（ユーザー名）/.rbenv/versions/2.5.1/bin/bundle:23:in `load'
/Users/（ユーザー名）/.rbenv/versions/2.5.1/bin/bundle:23:in `<main>'
(See full trace by running task with --trace)

rake routesなどのコマンドでも同様のエラーが出るため、ニッチもサッチも行かず困った事態に。

bundle doctorを行いエラーが出たgemを再インストールしたり、 opensslを再インストールしてもダメ。

色々と探した結果、最終的にはこちらの記事の対処法で上手く行きました。
https://github.com/kelaberetiv/TagUI/issues/86

brew update && brew upgrade

でHomebrewとインストールしたパッケージ（Formula）のアップデートを実施。

改めてrake db:createをしたところDB作成に成功しました。他のコマンドもちゃんと実行できます。

直前にHomebrewで色々と入れたので、それが問題だったのかもしれません（node.jsが怪しい）。

同様のエラーが出た場合はご参考までにどうぞ。

---

参考にさせていただいた記事：brewのupdateとupgradeの違い
https://qiita.com/okhrn/items/aa71b066a525456550c0
（こちらの記事によればbrew upgradeだけで大丈夫かもしれません。)

要望

実機のiPhoneで特定のWebページに対し、Webインスペクタで中身を書き換えたり、コンソール経由でスクリプトを叩いて実行した結果を見たい。

-> Android版

iPhoneのSafariにもWebインスペクタがある

iPhone単体ではView Sourceなどのアプリを使うことで、Webページのソース確認はできるものの、Webインスペクタやコンソールによるスクリプト実行が出来ない。

また、MacのSafariやiOSエミュレーターでもある程度の表示確認はできるが、やはり実機での操作感や見た目の確認は重要である。

少し調べてみたところ、MacとiPhoneを接続することで、PCと同様に実機での動作確認が可能なことが判明したため、実際に試してみた。

iPhone Safariの設定

事前準備としてiPhone側の設定を行う。「設定」を開き「Safari」をタップ。

画面下の「詳細」をタップ。

「Webインスペクタ」をONにする。

iPhone側の設定はこれで完了。

Mac Safariの設定

Safariの「環境設定」を開き、「詳細」タブの「メニューバーに"開発"メニューを表示」にチェックを入れる。

MacとiPhoneをケーブル接続。Safariの「開発」から実機iPhoneを選択し、対象サイトを選択。

Mac上のWebインスペクタが開く。

通常と同じ操作感で要素検証や書き換えが可能。

もちろんコンソールも使えるのでスクリプトを叩いて実行することも可能。

いえーい

Macに接続したiPhoneが認識されないことがあるけど、ケーブル抜き差ししてると出てくる。

要望

実機のAndroid端末で特定のWebページに対し、Webインスペクタで中身を書き換えたり、コンソール経由でスクリプトを叩いて実行した結果を見たい。

-> iPhone版

Android 端末のリモート デバッグを行う

MacのChromeやAndroidエミュレーターでもある程度の表示確認はできるが、やはり実機での操作感や見た目の確認は重要である。

少し調べてみたところ、MacとAndroid端末を接続することで、PCと同様に実機での動作確認が可能なことが判明したため、実際に試してみた。

Android 端末のリモート デバッグを行う | Tools for Web Developers

Developer ToolsのRemote devicesを使う

MacとAndroid端末をケーブル接続。Chromeのデベロッパーツールを開き、[Main Menu] > [More tools] > [Remote devices] を選択。

[Remote Device] タブの [Settings] で [Discover USB devices] のチェックボックスがオンになっていることを確認。

[Devices] から対象のAndroid端末を選択。

[New tab] テキストボックスで、URL を入力して [Open] ボタンをクリック。

Android端末のChromeで対象ページが開くので [Inspect] をクリックすると、デベロッパーツールが立ち上がる。

スクリーンキャストで実機Android端末と同期。要素検証や書き換えもでき、コンソールでスクリプト叩いて実行することも可能。

便利。

Rust とは

https://ja.wikipedia.org/wiki/Rust_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E)

Rust（ラスト）はMozillaが支援するオープンソースのシステムプログラミング言語である。

特徴

• 静的型付言語
• 高速(C++並だとか)
• メモリ自動管理(GCのことかと思ったがまた別物らしい)
• 他いろいろ

下記の記事がわかりやすくておすすめです。
プログラミング言語Rustのススメ - Qiita

けっこう周りに Rust 推しが増えてきたし一度は触ってみようと思ったので、会社からいただいた勉強会の時間をつかって、ひとまず新言語入門時恒例の Hellow World 出力くらいまでやってみようと軽い気持ちではじめたものです。ただ、インストールするだけでいろいろ試行錯誤したのでひとまずここまでで一旦記事にしてみました。

ちなみに環境

• Macbook Pro
  • macOS Sierra

余談：
「コンパイル言語なら C# でもいいけど、.NETFramework 必須だから Mac だとちょっとつらいかなー」と思って避けてたら、今は .NETCore がありましたね。こっちはまた今度やろうw

というわけでインストール

https://www.rust-lang.org/tools/install
上記公式サイトに従って行えばいいので楽ちんそうですね。
ところが Mac のOSが古いのが原因なのか接続にコケました。

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
curl: (35) SSL peer handshake failed, the server most likely requires a client certificate to connect

OpenSSL のバージョンが古いですね。これが原因の可能性は高そうです。

$ openssl version
OpenSSL 0.9.8zh 14 Jan 2016

OpenSSL のバージョンを上げます

そもそも入っていないとか言われる。

$ brew upgrade openssl
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).

(中略)

Error: openssl not installed

which コマンドで確認したところ入っているようです。わけがわからないよ。

$ which openssl
/usr/bin/openssl

インストールされてないと言われたのでインストールから実施してみました。するとさっき確認した実行パスと違うところに入りました。

$ brew install openssl

(中略)

==> Summary
?  /usr/local/Cellar/openssl/1.0.2t: 1,795 files, 12.4MB

Homebrew でインストールすると別のところに入るんですね。であれば実行パスを Homebrew でインストールしたほうに変えれば万事おkそうです。

$ echo 'export PATH=/usr/local/Cellar/openssl/1.0.2t/bin:$PATH' >> ~/.bash_profile

OpenSSLのバージョンアップが確認できました。

$ which openssl
/usr/local/Cellar/openssl/1.0.2t/bin/openssl

$ openssl version
OpenSSL 1.0.2t  10 Sep 2019

インストールを再開します

進捗、ダメです(　ﾟдﾟ)

$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
curl: (35) SSL peer handshake failed, the server most likely requires a client certificate to connect

curlで OpenSSL が使われていないっぽい。。。そもそもそういう話か。

$ curl --version
curl 7.54.0 (x86_64-apple-darwin16.0) libcurl/7.54.0 SecureTransport zlib/1.2.8
Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp smb smbs smtp smtps telnet tftp
Features: AsynchDNS IPv6 Largefile GSS-API Kerberos SPNEGO NTLM NTLM_WB SSL libz UnixSockets

諦めて別の方法にします

Other Installation Methods - Rust Forge

On Unix, run curl https://sh.rustup.rs -sSf | sh in your shell.

curlに OpenSSL が使われていなくて、さてどうしたものかと考えていましたが、Macならこれでも良さそうです。ちなみにWindowsはインストーラーがあるみたいです。

早速実行してみます

おお…うまくいくやん。
セキュリティの警告はひとまずスルーします。途中でインストールオプションを聞かれるので、特に理由がなければデフォルトである 1 を入力してエンターを押すとインストールが継続します。

$ curl https://sh.rustup.rs -sSf | sh
info: downloading installer
Warning: Detected OS X platform older than 10.13
Warning: Not forcing TLS v1.2, this is potentially less secure

Welcome to Rust!

This will download and install the official compiler for the Rust
programming language, and its package manager, Cargo.

It will add the cargo, rustc, rustup and other commands to
Cargo's bin directory

(略)

1) Proceed with installation (default)
2) Customize installation
3) Cancel installation
>1

下記メッセージが表示されればインストール完了です。

Rust is installed now. Great!

To get started you need Cargo's bin directory ($HOME/.cargo/bin) in your PATH
environment variable. Next time you log in this will be done
automatically.

To configure your current shell run source $HOME/.cargo/env

一応コマンドで動作確認

前項で cargo, rustc, rustup のコマンドが追加されることがメッセージ内に書かれていました。なのでこれを実行して確認してみます。

$ cargo --version
cargo 1.39.0 (1c6ec66d5 2019-09-30)

$ rustc --version
rustc 1.39.0 (4560ea788 2019-11-04)

$ rustup --version
rustup 1.20.2 (13979c968 2019-10-16)

OKそうですね！

最後に

なんだかインストールひとつにえらい手間どってしまいました。たぶん Mac の OS が少し古いせいかとは思いますが、もし私と似たような境遇で Rust のインストールに困っている方は同じようにするとうまくいくかもしれません。よかったら試してみてください。

参考

• Install Rust - Rust Programming Language
• Other Installation Methods - Rust Forge
• プログラミング言語Rustのススメ - Qiita
• OS X Yosemite の cURL で TLS 1.2 を使って接続してみる | SG Labs
  • だいたいのケースはこれで解決できそうに見えます。

次はRustを使って何かやってみようかと思います。

環境
OS : macOS Catalina
SQLCipher : 4.2.0
SQLite : 3.30.1
Openssl : 1.1.1d

SQLiteを暗号化/復号化したくてSQLCipherのコンパイル手順を探していたけど、
情報が散り散りになっていて、手順を確実に忘れるのでキーリングの設定から
コンパイル完了までをまとめてみました。

手順の中にOpenSSLのインストール方法は書いていません。
僕の場合はHomebrewを使ってインストールしました。
ちなみに、元々OpenSSL1.1が入っていたようなので、SQLCipherのconfigureを
する際に、オプションで1.1.1dのフォルダを見に行くようにしているので、ちゃんと
最新版のフォルダを見に行っているか確認願います。

拙い英語で説明を書いたので、記述ミスや誤字脱字等ありましたらご指摘お願いします。

SQLCipher Community Editionのコンパイル手順
https://github.com/ponono-ponono/configure_SQLCipher/wiki

背景

Macbookを作業専用として使っているが、僕は意志薄弱なのですぐにTwitterやYouTubeを開いてしまう。
これらのサイトドメインへのアクセスをブロックすることで作業中の集中力を上げたい。
ブラウザ（Chrome）のブックマークや拡張機能は他のPCと同期しているので、その辺りは利用したくない。

環境

OS: macOS Catalina v10.15.1
ブラウザ: Google Chrome v78.0.3904.108（Official Build） （64 ビット）

対応

hostsファイルを編集し、対象ドメインの名前解決先を127.0.0.1にすることでアクセスをブロックする。

$ vi /etc/hosts

# 以下追記
127.0.0.1 twitter.com
127.0.0.1 tweetdeck.twitter.com
127.0.0.1 www.youtube.com

設定反映のためにDNSキャッシュを削除する必要がある。
DNSキャッシュはmDNSResponderプロセスが保持している。
Chromeでは、このプロセスへのSIGHUP送信では設定が反映されなかったため、一旦プロセスをKILLする。

$ killall mDNSResponder

確認

ブラウザから今回ブロックしたサイトにアクセスできなくなっていることを確認する。