2018-10-10

Vue CLI 3（vue-cli v3）を使用してVue開発環境を整える

Vue

1. vue-cli v3を使用する

$ npm install -g @vue/cli
$ vue --version
3.0.5

2. Vueプロジェクトを作成する

$ vue create vue_test

f:id:satouyousuke:20181010144444p:plain
対話形式で環境を整える
デフォルトではbabel, eslintが選択されている
マニュアル選択で必要なものをいれていく

f:id:satouyousuke:20181010144454p:plain
スペースキーで使用するか否かを決定する

f:id:satouyousuke:20181010144512p:plain
ルーターでヒストリーモードを使用するか聞かれる
見栄えがいいので使用する
ヒストリーモードの詳細は以下
https://router.vuejs.org/ja/guide/essentials/history-mode.html

f:id:satouyousuke:20181010144516p:plain
SASS/SCSSを選択した

f:id:satouyousuke:20181010144520p:plain
ESLint + Pretterを選択した

f:id:satouyousuke:20181010144523p:plain
Lintを使用するタイミング
コミット、セーブ時両方を選択した

f:id:satouyousuke:20181010144526p:plain
設定の保存先をpackage.jsonへ

f:id:satouyousuke:20181010144529p:plain
一連の設定を保存するか否か
保存しない
これでとりあえず終了

3. ブラウザで確認する

$ cd vue_test
$ npm run serve
($ npm run build でプロダクションビルド)
止め方がわからなかった「ctrl + c」

ブラウザでlocalhost:8080にアクセス

f:id:satouyousuke:20181010144532p:plain
vueが表示される

ファイル構成
f:id:satouyousuke:20181010144535p:plain

2018-07-19

MacにてLaravelをComposerからプロジェクト作成するとOpenSSLエラーが発生する

Laravel mac composer

久しぶりにLaravelをMacのComposerからプロジェクト作成しようとしたところ、以下のメッセージが表示されました。

Failed to download laravel/laravel from dist: The "https://api.github.com/repos/laravel/laravel/zipball/xxx" file could not be downloaded: SSL operation failed with code 1. OpenSSL Error messages:
error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version
Failed to enable crypto
failed to open stream: operation failed
    Now trying to download from source

OpenSSLのエラーでリポジトリからデータを取得出来なかったみたいです。調べてみると、古いOpenSSLのままだとNGのようです。

PHPのバージョンを確認してみる。

$ php -v
PHP 5.6.10 (cli) (built: xxx)

ふっる。

続けてOpenSSLの情報を確認してみる。

$ php -i | grep OpenSSL
SSL Version => OpenSSL/0.9.8zd
OpenSSL support => enabled
OpenSSL Library Version => OpenSSL 0.9.8zh 14 Jan 2016
OpenSSL Header Version => OpenSSL 0.9.8y 5 Feb 2013
Openssl default config => /System/Library/OpenSSL/openssl.cnf
Native OpenSSL support => enabled

OpenSSL 0.9.8は2015年までで、これが問題らしく、差し替える必要があるようです。ついでにPHPも最新版にします。

brewを使用してPHP7.2をインストールする。

$ brew install php@7.2

.bash_profileへPATHを追加する。

export PATH="/usr/local/opt/php@7.2/bin:$PATH"
export PATH="/usr/local/opt/php@7.2/sbin:$PATH"

PHPのバージョンを確認する。

$ php -v
PHP 7.2.7 (cli) (built: xxx) ( NTS )

OpenSSLのバージョンを確認する。

$ php -i | grep OpenSSL
OpenSSL support => enabled
OpenSSL Library Version => OpenSSL 1.0.2o  27 Mar 2018
OpenSSL Header Version => OpenSSL 1.0.2o  27 Mar 2018
OpenSSL support => enabled

これでLaravelプロジェクトを作成できるようになりました。

2018-06-07

VS CodeにPlantUMLを設定してUMLを表示する

VS Code UML

f:id:satouyousuke:20180616164359p:plain クラス図や状態遷移図を書きたいけど、2018/06現在のトレンドが何か分からない。
とりあえず検索に掛かったmarmaid.jsが面白そうだったけど、VS CodeとPlantUMLの組み合わせを見つけてしまった。
まずはこちらの組み合わせから試してみたい。

Windows環境とMac環境へのインストールを試しました。

たくさんの情報があるので写経です。

Windwos環境へのインストール

VS Codeのインストール

Visual Studio Code - Code Editing. Redefined

Javaのインストール

java.com: あなたとJava

Graphvizのインストール

Graphviz - Graph Visualization Software

downloadのwindowsのところから「Stable 2.38 Windows install packages」の「graphviz-2.38.msi」をダウンロードしてインストールする。

PlantUML拡張のインストール

VS Codeのアクティビティバーから拡張を選択する。
検索窓に「PlantUML」と入力する。
jebbsさんが作った拡張機能を選択する。
導入が完了したら一度VS Codeを再起動する。
vscode 拡張機能 plantuml検索 jebbs

PlantUMLを表示する

PlantUMLの拡張子を使用してファイルを作成する。（test.puml）
PlantUMLからクラス図のサンプルソースをお借りして記載しました。
PlantUMLのタブをアクティブにして「Alt+D」を押下する。

Mac環境へのインストール

VS Codeのインストール

Visual Studio Code - Code Editing. Redefined
windows環境と変わらず

Javaのインストール

ターミナルから実行する

brew cask install java

Graphvizのインストール

ターミナルから実行する

brew install graphviz

PlantUML拡張のインストール

VS Codeのアクティビティバーから拡張を選択する。
検索窓に「PlantUML」と入力する。
jebbsさんが作った拡張機能を選択する。
導入が完了したら一度VS Codeを再起動する。

※windows環境と変わらず

PlantUMLを表示する

PlantUMLの拡張子を使用してファイルを作成する。（test.puml）
PlantUMLからクラス図のサンプルソースをお借りして記載しました。
PlantUMLのタブをアクティブにして「Option+D」を押下する。

所感

visioとか使いたくなかったし、Gitにもあげられるし、VS Codeだけで編集リアルタイムプレビューもできちゃう。
20分程度で環境整っちゃうし、素敵。

2018-06-06

Markdown記法の基礎

markdown

はてなブログの編集方法をMarkdownに変更してみました。
基本的な記述をおさらい。
はてブにはMdのリアルタイムプレビュー機能がないので、VS Codeで記述したやつを貼り付けました。

見出し

# を複数個付ける

# h1
## h2
### h3
#### h4
##### h5
###### h6

h1

h2

h3

h4

h5

h6

段落

空行を挟む

あいうえお
(空行)
あいうえお

あいうえお

改行

半角スペースを２つ付けて改行する

あいう（半角スペース２つ）
えお

あいう
えお

斜体

* _ で囲う

*TEST*  
_TEST_

TEST
TEST

強調

** __ で囲う

**TEST**  
__TEST__

TEST
TEST

箇条書き

- + * を先頭に付ける

- TEST1
    * TEST1-1
    * TEST1-2
- TEST2
    + TEST2-1
        - TEST2-1-1
    + TEST2-1
- TEST3

TEST1
- TEST1-1
- TEST1-2
TEST2
- TEST2-1
  - TEST2-1-1
- TEST2-1
TEST3

連番

数値. を先頭に付ける

1. TEST1
    1. 連番でなくてもよい
    1. 間に項目が追加時に連番を振り直さなくてよい
    1. 場合に応じて使い分ける
2. TEST2
3. TEST3

TEST1
1. 連番でなくてもよい
2. 間に項目が追加時に連番を振り直さなくてよい
3. 場合に応じて使い分ける
TEST2
TEST3

区切り

---
***
___

引用

>を先頭に付ける

>あいうえお

あいうえお

リンク

()

[]()

[]( "")

リンクのみ
(https://satouyousuke.hatenablog.com/)

https://satouyousuke.hatenablog.com/
文字へリンク
[佐藤洋介のログ](https://satouyousuke.hatenablog.com/)

佐藤洋介のログ
文字へリンクしマウスホバー時に説明を表示
[佐藤洋介のログ](https://satouyousuke.hatenablog.com/ "タイトル")

佐藤洋介のログ

画像

![]()
![]( "")

画像のみ
![佐藤洋介](https://cdn.profile-image.st-hatena.com/users/satouyousuke/profile.png)
画像にマウスホバー時に説明表示
![佐藤洋介](https://cdn.profile-image.st-hatena.com/users/satouyousuke/profile.png "タイトル")
画像へリンク
[![佐藤洋介](https://cdn.profile-image.st-hatena.com/users/satouyousuke/profile.png "タイトル")](https://satouyousuke.hatenablog.com/)

テーブル

| - で区切る

|test2 |test1 |test3 |
|------|------|------|
|1     |2     |3     |
|4     |5     |6     |

test2	test1	test3
1	2	3
4	5	6

コード

```で囲う。

(```で囲う)
if(a == b){
　a += b;
}
(```で囲う)

if(a == b){ a += b; }
半角スペース4つを先頭に付ける。

(半角スペース4つ)　if(a == b){
(半角スペース4つ)　　a += b;
(半角スペース4つ)　}
```
  if(a == b){
    a += b;
  }  
```
インラインは ` で囲う。
分岐の`if(a == b)`はテストコードです

分岐のif(a == b)はテストコードです

2018-05-22

VRChatのキャッシュ保存先を変更する

VRChat

VRChatで遊んでいたところ、Cドライブ容量不足の警告が表示された。

プログラム本体はCドライブに設置していないけど、キャッシュファイルなどはCドライブのAppData\LocalLowに保存されているようだ。

キャッシュファイルのサイズを確認してみると6GBもあった。

これはVRChatのワールドなどのデータだろうか。

一度訪れたワールドの読み込みが格段に早くなっているのでローカルのどこかにキャッシュしてるんだろうなあとは思っていたけれど、さすがに３Dデータだ、キャッシュファイルサイズがデカい。

遊び初めてまだ1週間も経過してないとおもうんだけれど、今後、このキャッシュファイルは相当量になっていきそう。

という訳で本題、AppData\LocalLowに保存されているVRChatのフォルダをごっそりCドライブから移動させます。VRChatの設定にキャッシュ保存先を変更する項目がなかった為、手順は以下の通りに行いました。

前提：OS,Windows7

１．AppData\LocalLow内のVRChatフォルダを移動する

私の場合には「C:\Users\ユーザ名\AppData\LocalLow」にありましたので、これを「I:\_symbolic_link」に移動させました。（ゲーム用のドライブ：Iです）

２．元々VRChatフォルダがあった場所にシンボリックリンクを作成する

シンボリックリンクの説明については割愛します。Windows7によるシンボリックリンク作成方法は以下の通り。

「スタート」→「プログラムとファイルの検索」入力欄にcmdと入力します。

検索結果リストに「cmd.exe」が出てくるのでそれを右クリックして、「管理者として実行」を選択します。

真っ黒なコマンドプロンプト画面が開くのでそこへ以下のコマンドを入力します。

「mklink /D 移動元移動先」

私の場合には以下の通りになりました。

「mklink /D C:\Users\ユーザ名\AppData\LocalLow\VRChat I:\_symbolic_link\VRChat」

f:id:satouyousuke:20180522150312p:plain

以下のようにもともとVRChatのフォルダがあったAppData\LocalLowにシンボリックリンクが作成されます。ショートカットのように見えますが別物です。

プロパティをみてみると種類がファイルフォルダーとなっています。ショートカットならここにショートカットと出ます。

リンク先が移動先になっていますね。

f:id:satouyousuke:20180522150453p:plain

作成されたシンボリックリンクをクリックすると、新しく設定した移動先に移動します。

これで無事にVRChatのキャッシュフォルダをCドライブからゲーム用のIドライブに移動させることが出来ました。

参考にしたサイト

情報ありがとうございます。とても参考になりました。

vrcworld.wiki.fc2.com

dev.classmethod.jp

2017-08-17

windows版 Laravelの開発環境構築（xampp、composer使用）

Laravel atom

忘れる前にメモ。環境構築は間を置いてまた構築する際によく忘れてる。

1.xamppインストール

2.composerインストール

3.Laravelインストール

4.Atomインストール

1.xamppインストール

以下のサイトからexeをダウンロードしてインストールする

2.composerインストール

以下のサイトからexeをダウンロードしてインストールする

コマンドプロンプトから以下のコマンドを実行する。

composer --version

インストールが完了していると以下の返答がある。

Composer version 1.4.2 2017-01-01 00:00:00

3.Laravelインストール

Laravelプロジェクトを作成する場所に移動する。（例はxampp/htcos配下）

コマンドプロンプトから以下のコマンドを実行する。

cd [任意]\xamp\htdocs

Laravelをインストールする

コマンドプロンプトから以下のコマンドを実行する。

composer create-project laravel/laravel --prefer-dist プロジェクト名

作成したプロジェクトを確認する

xampp-controlからApacheをスタートする。

「http://localhost/プロジェクト名/public」をブラウザで開く。

Laravelが表示されていればOKです。

4.Atomインストール

ここは必須ではありません。エディタやIDEはお好みで。

以下のサイトからexeをインストールする。

PHP開発に便利なパッケージを導入する。

以下のサイトを参考にしました。

とても参考になりました。情報ありがとうございます。

phpmd、phpcsで以下のようなエラーが出た場合

[Linter] Error running PHPMD

[Linter] Error running PHPCS

composerを使用してphpmdとphpcsをインストールする。

composer global require phpmd/phpmd=*

composer global require squizlabs/php_codesniffer=*

インストール確認は以下のコマンド

phpmd --version

phpcs --version

特に環境変数を設定しなくても上記コマンドは通りました。

macの場合は.bash_profileに以下を追加する必要がある場合もあります。

PATH = $HOME/.composer/vendor/bin:$PATH

以下のサイトが参考になりました。

情報ありがとうございます。

2016-08-13

kindle unlimitedの解約方法について

kindle unlimited

kindle unlimitedは何も設定していないと申し込んでから１ヶ月経つと自動的に有料になる。

申し込み直後は、どんな本があるのだろう、この本面白い、とスッカリこのことを忘れてしまう。

kindle unlimited開始直後数日は利用していたけれども、好みの本をあらかた見渡してしまったのでここ数日触っていなかったのだけど、kindle unlimitedに公開されている本のラインナップがガラリと変わって酷いみたいな記事を見つけたことで思いだす。

そこで、また忘れないうちにkindle unlimitedの解約方法を調べておくことにしたら、無料期間終了と同時に自動的に解約することができた。

申し込み後、何も設定しなければサービス無料期間終了と同時に使えなくなる。というのが普通な気がするのだけれども、最近のサービスは無料期間終了と同時に有料サービスになり、気がつくと請求がきている系が多いね。

とりあえず前置きがながくなったので、解約方法について。

1. Amazonトップページのページ下部、フッター部分にある、「ヘルプ＆ガイド」のカテゴリーにある「コンテンツと端末の管理」を選択する。

2. 「コンテンツ」、「端末」、「設定」とタブがあるので「設定」タブを選択する。

3. 「Kindle Unlimitedの設定」から「登録を管理」ボタンを選択する。

4. 「Kindle Unlimitedの会員登録をキャンセル」ボタンを選択する。

5. メンバーシップを何月何日終了のボタンを選択する。

以上で無料期間ぎりぎりまで使えて、自動的に解約される設定になります。