【Vue CLI 3】プロジェクトテンプレートを作りたくて

Vue CLI 3になってプラグイン&プリセットというコンセプトになった。

これに沿う形でプロジェクトテンプレートを作りたい。

 

 

リモートプリセットを作ってみた。

 vue create --preset yoko0180/vue-cli-preset-basic-project hello-vue

このコマンド1つでプロジェクトがテンプレートから作成できる。

ただしオンラインが条件。

はじめはローカルで動作すれば十分と考えていたが、スッキリしない部分があったので路線変更した。スッキリしない部分は後述。

 

プロジェクトのテンプレートとして次を使う。

  • Vuex
  • stylus
  • pug

vuexとstylusはvue cliが設定を提供してくれる。

pugはローダーを追加してくれるプラグインがnpmにあった。

https://www.npmjs.com/package/vue-cli-plugin-pug

ローダーを追加してくれるだけなので.vueコンポーネントの記述をpugに変換してはくれない。

今回は変換するプラグインを作るのは難しいので、予め用意したテンプレートの.vueファイルに差し替えることでpug記述にするプラグインを作ってみた。

 

冒頭のコマンドができるまでのアウトラインは次のようなもの。

  1. ローカルでpub記述に差し替えるcliプラグインを作る
  2. 1をサンプルプロジェクトにローカルで適用して動作を確認する
  3. 1をnpmにpublishしてvue add <plugin name>で実行できるようにする
  4. cliプリセットを作成してgithubにpushする

 

(前述のスッキリしない部分)

上記2では次のようにコマンド実行する。

yarn add -D file:..\vue-cli-plugin-pug-template

vue invoke vue-cli-plugin-pug-template

Vue CLI 3 プラグインのコンセプトとして次のようなコマンドでプラグインを適用できる。

vue add pug-template

これが動作するためにはvue-cli-plugin-pug-templateがnpmにpublishされている必要がある。

 とにかくプロジェクトを作るときにごちゃごちゃしたくなかったのでpublishしてみた。

publishするにはnpmにユーザ登録してnpm publishすればいいのだが、ユーザ登録としてメール認証(メールにリンククリックしてとくるやつ)をする前にpublishしようとしてエラーになるということをやらかしたが、結果よしとする。

 

 

 

サブモニタでGoogle Chromeでフルスクリーンにするとスクリーンにフィットせず右下にずれる現象

現象

YouTubeなどで全画面表示をサブモニターで見ると、スクリーンにフィットせず右下にずれる

Chrome以外のブラウザでは発生しない

・メインモニタでは発生しない

 

回避策1

Chromeのウィンドウを最大化していない状態からフルスクリーンにする

 

回避策2

Chromeのテーマをデフォルトに戻す

 

 

ググってもあまり情報がなく、環境固有の現象なのかもしれない。

 

2018.06.15 追記

Chromeがアップデートしてこの問題も解消された。

やっぱりChromeの問題だったよね。そういうことだと思うきっと。

node.jsで環境変数Pathに設定済みか確認する

path_search.js

var word = process.argv[2]
if (!word) process.exit(0)
var reg = new RegExp(word, 'i')
console.log(process.env.Path.split(';').filter(p => p.match(reg)))

使用例

node path_search.js windows
[ 'C:\\Windows\\system32',
  'C:\\Windows',
  ...(※省略) ]

Windows環境変数管理が非常にとても極めて実に使いづらくてパス設定を確認するのにうんざりした。 なので最近よく使っているnode.jsで確認用スクリプトを書いた。それだけ。

bitbucketでプライベートリポジトリにnpmモジュール置いて使う

シチュエーションは限られるけどメモ。

1.Bitbuketで公開鍵登録しておく

プライベートリポジトリの場合なので。

(参考)
SSH認証鍵をBitbucketに設定 - Qiita

2.プロジェクトに追加する

yarn add ssh://git@bitbucket.org/<アカウント名>/<リポジトリ名>.git

バージョン選択する場合が多いからこっちか。

yarn add <git remote url>#<branch/commit/tag>

(参考)
yarn add | Yarn

※追記
なんだか、Windows環境でも特に気にせず認証できていたのにできなくなった・・
そもそもできていたのが不自然なのか・・?
忘れているだけで以前にごにょごにょしていた結果使えていたのか・・
とりあえず参考ページを貼っておく。

ssh-agentの使い方 - Qiita

ssh-addできなかったときへの対処 - Qiita

CSS transitionに触れる

CSS transitionに触れてみた

※「触れる」と書いて、「ふれる」「さわれる」と読めるのって紛らわしい・・

 

See the Pen transition by yoko0180 (@yoko0180) on CodePen.

 

アニメーション関連の技術は自分の中で優先度が低いのだが、

機会があったのでやってみた。

 

記述例1
transition: background-color 1s linear 0

 

記述例2
transition: width 1s linear 0 , height 1s linear 0;

 

シンタックス

transition [property] [duration] [timing] [delay]
  property 効果を適用するCSSプロパティ名を指定する
  duration 変化に掛かる時間を指定する
  timing-function 変化のタイミング・進行割合を指定する
    ease 開始と完了を滑らかにする(初期値)
    linear 一定
    ease-in ゆっくり始まる
    ease-out ゆっくり終わる
    ease-in-out ゆっくり始まってゆっくり終わる
  delay 変化がいつ始まるかを指定する

 

考え方

基本スタイルにtransition書いて、変化後のスタイルを用意してそれをクラス適用して変化させる

 

transformプロパティで変化をスタイルできるので変化後のスタイルとして定義する


記述例
transform translateX(300px)


主な関数
scale(X方向の縮尺比率, Y方向の縮尺比率)
rotate(回転角度)
translate(X方向の移動距離, Y方向の移動距離)
translateX(X方向の移動距離)
translateY(Y方向の移動距離)

 

ついでにCodePenの埋め込みもしてみたかったのでそれもやってみた。

CodePenの埋め込みは該当ページで画面右下の「Embed」をクリック。

ポップアップがでるのでデフォルトビューなどを設定して

下部に表示されているコードをコピペする。

ローカルにプロジェクトフォルダが多くてどこに何があったかわからなくなるのでElectronでなんとかしようとしてみている

問題点

  • Vue.jsやらPythonやら.NETやら規模も大小様々なプロジェクトフォルダが多数あってどこにどのようなプロジェクトがあるのか把握が難しくなっていた
  • VS CodeやらPycharmやらで開くのにも最近のアクセス一覧から外れてしまったり、プロジェクトフォルダ名だけで探すことが辛くなってきていた

作ってみているもの

f:id:yoko0180:20171107230030p:plain

概要

  • コメントとパスをアイテムとして登録できる
  • ストア先はlocalStorage
  • アイテムを文字列フィルターできる
  • アイテムにはイメージファイルをつけて表示できる
  • アイテムごとにワンクリックでパスをVS Code、pycharmによって開ける
  • 開いた日時をアクセス日時として記録して表示順に反映
  • パスが示すファイル、ディレクトリの物理削除ができる
  • (ついでに実装)git cloneがリポジトリURLペースト、クリックでできる。同時にアイテム登録

現状

まだまだ感はあるが、それなりに便利。
とりあえずでもいいからブログにでも記録して少しでも達成感をだしておく。

所感

この手のOSネイティブに動作する必要があるものをなんとかしようとすると 今までこれといった解決策が見つけられなかった。 Vue.jsのような技術に慣れてしまうと.NETのような手続きはとても煩雑に感じる。 ネイティブかつ簡潔に実現できる手段としてElectronは期待している。 Webpack + Vue.js + Vuex + Electron + Pug + Stylus この辺は素晴らしい技術である。

【翻訳】npm-scripts

npm-scriptsのドキュメント冒頭が読みにくかったので整形ついでに翻訳。

マークダウン変換サービスも便利なので一応手順もメモ。

(手順)

1.ドキュメントをテキストエディタにペースト  

2.テキストエディタで適当に絡む区切りをタブに置換するなどしてざっと整形

3.エクセルペースト

4.説明部分をGoogle翻訳にペースト

5.翻訳結果をエクセルにペースト

6.マークダウン変換サービスを利用して変換 Markdown Tables generator - TablesGenerator.com

7.ブログにペースト

ドキュメント整形と翻訳結果
キーワード 和訳 説明
prepublish パッケージがパックされて公開される前に実行します。ローカルのnpm installにも引数はありません。 (下記参照) Run BEFORE the package is packed and published, as well as on local npm install without any arguments. (See below)
prepare パッケージがパッキングされパブリッシュされる前と、引数なしでローカルのnpmにインストールされる(下記参照)の両方で実行します。これはprepublishの後に実行されますが、prepublishOnlyの前に実行されます。 Run both BEFORE the package is packed and published, and on local npm install without any arguments (See below). This is run AFTER prepublish, but BEFORE prepublishOnly.
prepublishOnly パッケージが準備され、パックされる前に実行します.npmでのみ公開します。 (下記参照。) Run BEFORE the package is prepared and packed, ONLY on npm publish. (See below.)
prepack tarballがパックされる前に実行します(npm pack、npm publish、およびgit依存関係のインストール時) run BEFORE a tarball is packed (on npm pack, npm publish, and when installing git dependencies)
postpack tarballが生成されて最終目的地に移動した後に実行します。 Run AFTER the tarball has been generated and moved to its final destination.
publish, postpublish パッケージが公開された後に実行します。 Run AFTER the package is published.
preinstall パッケージがインストールされる前に実行します Run BEFORE the package is installed
install, postinstall パッケージがインストールされた後に実行します。 Run AFTER the package is installed.
preuninstall, uninstall パッケージがアンインストールされる前に実行します。 Run BEFORE the package is uninstalled.
postuninstall パッケージがアンインストールされた後に実行します。 Run AFTER the package is uninstalled.
preversion パッケージのバージョンをバンプする前に実行します。 Run BEFORE bumping the package version.
version パッケージバージョンをバンプしてから、コミットする前に実行します。 Run AFTER bumping the package version, but BEFORE commit.
postversion AFTERでパッケージ・バージョンをバンプし、コミット後に実行します。 Run AFTER bumping the package version, and AFTER commit.
pretest, test, posttest npm testコマンドで実行します。 Run by the npm test command.
prestop, stop, poststop npm stopコマンドで実行します。 Run by the npm stop command.
prestart, start, poststart npm startコマンドで実行します。 Run by the npm start command.
prerestart, restart, postrestart npm restartコマンドで実行します。注意 再起動スクリプトが提供されていない場合、npm restartはstopスクリプトとstartスクリプトを実行します。 Run by the npm restart command. Note npm restart will run the stop and start scripts if no restart script is provided.
preshrinkwrap, shrinkwrap, postshrinkwrap npm shrinkwrapコマンドで実行します。 Run by the npm shrinkwrap command.