My days of...

生活のことなど、がんばろう

FirefoxでもVueJS DevToolなどがAddonで提供されてた

インターネット Web

久しぶりにFirefoxを使ってみた。なんか軽く感じる。あくまで個人の感想ですけど。

前の記事にも書いたようにVueJSを勉強するのに、Vue DevToolというのがあるので、それを使うといいよーとVueJSの公式などで書かれていて、そのDevToolはChromeのAddonだから、という風にあったので、勝手にChromeの拡張機能しかないと思い込んでいたので、Chromeじゃないと無理かとおもっていたら・・・

FirefoxのAddonに普通にあった。

addons.mozilla.orgFirefoxも普通にDevloper Toolあるし、Chromeである必要がない？もしかして。

たまにレイアウトが崩れるページがあるのは、Firefoxに対応できてないだけかな。そういうのは仕事として受注して作成している場合、どうなのだろう？？

 

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるHTML&CSSのきほん 第2版

 
HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本

 
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

 

 

Vue.JSのチュートリアルでComponentなど

javascript

Vueの初心者向けチュートリアルを実施中。JavaScriptのフレームワーク（？でいいの？）のVueはとっつきやすいという感じがしていて、本を購入しなくともオンラインのチュートリアルなどでそれなりに使えそうな気持ちになります。

マスターできた、という訳ではないところが注意。
ComponentでTemplateとMethodsを利用して割と簡単にボタンを押して、コンテンツの表示・非表示ができました。

Vue.component('message', {
props: [
'title',
'body'
],

data() {
return {
isVisible: true
}
},
template: `
<article class="message" v-show="isVisible">
<div class="message-header">
{{ title }}
<button @click="hideModal">X</button>
</div>

<div class="message-body">
{{ body }}
</div>
</article>
`,
methods: {
hideModal() {
this.isVisible = !this.isVisible;
}
},
});
new Vue({
el: "#root"
});

 HTML部分は

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root" class="container">
<message title="hello World" body="Loren ipsum dolor sit amet..."></message>

<message title="hello VUE" body="This is Body of message template!"></message>

</div>
<script src="main.js"></script>
</body>
</html>

こんな感じです。CSSフレームワークのBulmaを利用しています。

Learn Vue 2: Step By Step: Practical Component Exercise #1: Message

を観ながら、そのままコピーしたため。

 

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

 
速習Vue.js 速習シリーズ

速習Vue.js 速習シリーズ

 

 

Netflixでアンブレラアカデミーを観た

ドラマ

Netflixオリジナルのスーパーヒーローもののドラマ「アンブレラ・アカデミー」を観ました。全10話。未来で起こるアポカリプス（人類滅亡）をどうやって止めるか、が目的で進んでいくドラマ。毎回表示されるUnbrella Academyの文字がちょっと工夫されてます。

www.netflix.com

メインのキャラクター達は、昔スーパーヒーロー（子供グループ？）だった7人兄妹。それにチンパンジーと母親で進みます。発端は父親の死。

今はヒーローをやめてしまったかつての兄妹たちですが、父親の死を切っ掛けに、再び実家に集います。そこで兄弟の1人が未来から帰ってきて、人類滅亡するから、それを阻止する！というところから始まりですが、すでにヒーローを引退しそれぞれの生活を始めている面々。それぞれの日常生活ダラダラっと進みます。

ナンバー1は月で生活していたり、ナンバー2は1人で悪党を退治するヴィジランテ（自警団）、ナンバー3は女優として芸能界で活躍、ナンバー4はドラッグ中毒、ナンバー5は未来から戻ってくる、ナンバー6は既に死亡、ナンバー7はオーケストラでバイオリンを弾いていたりします。

アポカリプスな未来を変えようとするナンバー5を追って、過去からやってくる暗殺コンビやその組織などアクションと静かなドラマパートがあっていい感じで緩急がついており、割とテンポよく進みます。話が進むにつれて、過去の問題や、なぜそうなったか、過去から現在につながるサイドストーリーが描かれています。とってつけた感はしょうがないですが。

1話から10話に行くにつれ明らかにされる謎や事柄と、最後まで謎のままのもの、新しい謎のような感じのものが増えたりして、え？もしかして・・・

シーズン2を楽しみにしたいですね

 

アンブレラ・アカデミー ~組曲「黙示録」~ (ShoPro books)

アンブレラ・アカデミー ~組曲「黙示録」~ (ShoPro books)

 
Wsky 折りたたみ傘 ワンタッチ自動開閉 Teflon加工 10本骨 118cm 210T高強度グラスファイバー 耐風撥水 晴雨兼用 収納ポーチ付き (ブラック)

Wsky 折りたたみ傘 ワンタッチ自動開閉 Teflon加工 10本骨 118cm 210T高強度グラスファイバー 耐風撥水 晴雨兼用 収納ポーチ付き (ブラック)

 
改良耐風構造 Valife 長傘 超軽量 全グラスファイバー材質 撥水耐風 丈夫 大型 自動開けステッキ傘 紳士傘 大きな傘 男性 通勤 通学

改良耐風構造 Valife 長傘 超軽量 全グラスファイバー材質 撥水耐風 丈夫 大型 自動開けステッキ傘 紳士傘 大きな傘 男性 通勤 通学

 

 

最初のOSがLionだったiMacが起動しなくなった

IT インターネット パソコン ライフスタイル

iMacが壊れたっぽい。ログイン画面が表示されなくなってしまいました。何が原因？

PRAM/NVRAMリセットをしても、Shift押しながら起動（セーフモード）させてもログイン画面が出てこない。

NVRAM/PRAMリセットの方法は以下より

support.apple.com

電源を入れてすぐにoption+command+p+rを同時に押す

support.apple.com

WifiではなくLANケーブルにつないでやってもダメでした。OS X Lionのころ（2010年くらい？）のiMacだったので愛着もあったのですが、OSのアップデートからは外れてしまったこともあるのでどうしようか？

 次のiMacはいつ発表されるのだろう？すぐ？

Apple MacBook Pro (13インチ, 2.3GHzデュアルコアi5プロセッサ, 256GB) - スペースグレイ

Apple MacBook Pro (13インチ, 2.3GHzデュアルコアi5プロセッサ, 256GB) - スペースグレイ

 
Apple iMac (27インチ, Retina 5Kディスプレイモデル, 3 .4GHzクアッドコアIntel Core i5)

Apple iMac (27インチ, Retina 5Kディスプレイモデル, 3 .4GHzクアッドコアIntel Core i5)

 

 

YAMLファイルの注意点

Laravel Web

Laravelの開発環境にVirtualBox＋Vagrantの仮想環境を利用するHomesteadがあります。これを利用しようとして、詰まりました。

Homesteadの設定ファイルであるHomestead.yamlファイル内で、自分のマシン側のファイルを変えたかったため、

folders:
    - map: ~/code
      to: /home/vagrant/code

と書かれている部分を

folders:
#    - map: ~/code
    - map: ~/vagrant/dev/folder
      to: /home/vagrant/code

 と変更してvagrant upをすると

/opt/vagrant/embedded/lib/ruby/2.4.0/psych.rb:377:in `parse': (<unknown>): found character that cannot start any token while scanning for the next token at line 14 column 1 (Psych::SyntaxError)
from /opt/vagrant/embedded/lib/ruby/2.4.0/psych.rb:377:in `parse_stream'
from /opt/vagrant/embedded/lib/ruby/2.4.0/psych.rb:325:in `parse'
from /opt/vagrant/embedded/lib/ruby/2.4.0/psych.rb:252:in `load'
....

な感じのエラーが表示されてしまい、~/code以下でないと移動できない？と疑問に思い検索。キーワードで「homestead」「フォルダ 」「変更」などで探しても出てこず。初期設定で~/code以下でないと動作しない？バージョンアップで変わった？と勘違いしていました。

解決としては、YAMLの書き方の注意点よりYAML（yml）ファイルではタブを使うとエラーとなる、でした。適当に自分のMacのターミナルからvi Homestead.yamlをしてファイルを開き、いつものVSCodeを利用するようにタブでスペースを開けていたためのエラーでした。

YAMLファイルを扱う際のインデントには気をつけましょう、ということで。勉強になりました。

yosi.webcrow.jp

yaml.org

#100DaysOfCodeの記事になります

PHPフレームワーク Laravel入門

PHPフレームワーク Laravel入門

 
Homestead　ウォッシュベイシン

Homestead　ウォッシュベイシン

 

 

VagrantのProvisioningについて

インターネット Web

VagrantでProvisioningの方法について。よくわかっていなかったので、メモ。

Vagrantfile内に

# boxes at https://vagrantcloud.com/search.
config.vm.box = "pristine/ubuntu-budgie-18-x64"
config.vm.provision : shell, :inline => 'echo hello world' <=追加部分
# Disable automatic box update checking. If you disable this, then
# boxes will only be checked for updates when the user runs
# `vagrant box outdated`. This is not recommended.
# config.vm.box_check_update = false

と書いて、vagrant upをすると、起動後のterminal画面に

hello world

と表示される。

複雑な設定は、設定ファイルを別途作成してそのファイルを読み込ませる

provision.shという名前でファイルを作成し

sudo apt -y install apache2
etc....

Vagrantfile内に追記

#ファイルの作成（ファイルに追加）
config.vm.provision: shell, :path => "provision.sh"

これでvagrant upした際、またはupした後vagrant provisionとすると実行。

【参考】

https://anz-note.tumblr.com/post/105946767956/vagrantのprovisionでローカル開発環境をupと同時に整える-ω-ゞ

anz-note.tumblr.com

ドットインストール：#09 Provisioningを使ってみよう（1）

 

実践 Vagrant

実践 Vagrant

 

 

JavaScriptでサイコロを振る、シンプルなチュートリアル

javascript オモシロ

本日はJavaScriptのトレーニング。色々手を出しすぎてよくわからなくなっているのはさておき、setIntervalとclearIntervalで遊んでいました。サイコロを動かして止める、という感じのシンプルなもの。

コードはこんな感じにできました。

<script>
var dice = [];
function getDice1() {
var dice1 = Math.floor(Math.random() * 6);
var number = dice1 + 1;
document.getElementById("condice1").innerHTML =
'<img src="./images/' + number + '.png" width="480">';
}

function switchDice1(t) {
if (t.id == "start") {
dice.push(setInterval(getDice1, 10));
console.log(dice);
}
if (t.id == "stop") {
console.log(dice);
clearInterval(dice.shift());
}
}
</script>

HTMLは

<p>
<input
id="start" type="button" value="スタート" onclick="switchDice1(this);" />
<input
id="stop" type="button" value="ストップ" onclick="switchDice1(this);" />
</p>
<p><span id="condice1"></span></p>

 スタートボタンを複数回押した時にどうやって止まらなかったので、Googleで検索したら、配列に格納して、それを1つづつshift()で出してしまえばいいらしいです。

 

改訂新版JavaScript本格入門 ?モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ?モダンスタイルによる基礎から現場での応用まで