Vue.jsの開発環境構築
「そうだ、Vue.jsで遊ぼう」
Vue.jsの環境構築を行ったのでメモしておく。 前提条件は下記
以前Node-REDの開発環境を作成する際にNode.jsをインストールしていたが、nodebrew等のパッケージ管理ツールを通さずに直接インストールしてしまっていた。そこで、今回一度Node.jsのアンインストールを行って、パッケージ管理ツールを用いて改めてNode.jsを導入してから、Vue.jsのインストールを行った。
Node.jsのアンインストール
- 公式ページからインストーラをダウンロードしてストールを行っていた
- Node.jsの実行ファイルの存在場所を確認
$which node - ディレクトリを削除
rm -rf /usr/local/bin/node - Node.jsが消えたか確認
node -v - npmが消えたか確認
npm -v - npmのディレクトリを削除
rm -rf ~/.npm(本来はnpmのアンインストールと削除を最初に行うべきかもしれない)
Node.jsのインストール
- Homebrewでnodebrewをインストール
brew install nodebrew - nodebrewが入っているかを確認
nodebrew -v - PATHを通す
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile - 再読み込み
source ~/.zprofile - インストール用のディレクトリを作成
mkdir -p ~/.nodebrew/src - インストール可能なバージョンの確認
nodebrew ls-remote - Node.jsのインストール
nodebrew install v12.16.2 - インストールできているか確認
nodebrew list - 利用するバージョンを指定
nodebrew use v12.16.2 - Node.jsが使えるか確認
node -v - yarnをインストール
npm install -g yarn - yarnが使えるか確認
yarn -v
Vue.jsのインストール
- Vue.jsをインストール
yarn global add @vue/cli - Vue.jsが使えるか確認
vue --version
Vue.jsの動作確認
- プロジェクトの作成
vue create myprojects - 出来上がったディレクトリに移動
cd myprojects - 動かす
yarn serve
Mac OS Catalinaに上げてから引っかかったこと
ネット接続ができなくなった
入れてるネットウイルス対策ソフトIntego製NetBarrierがCatalinaに対応していなかったのが原因だった。
対策を待ち、アップデートした
NetBarrierを一旦切って、アップデートしたら直った。
標準がzshになった
標準ターミナルじゃなくてiTermを使え、bashじゃなくてzshを使えという囁きは前から聞いていたのだけれど、ついに逃げられなくなった。
zshに移行した
- ターミナルで勧められるまま
$ chsh -s $(which zsh) $cat .bashrc >> .zshrc$cat .bash_profile >> .zprofile- 互換性のない機能をとりあえずオフ
Homebrewが動かなくなった
brew doctorしたらbrew cleanupしろと言われたのでしたら動かなくなった。
zshに切り替えた直後だし、なんならCatalinaに上げてから初めてのbrew操作だったから、もはや何が原因かわからない。
再インストールした
- 再インストールする際にインストールしてあるものを確認しようと思って
brew listしたが一覧表示すらできなかった。かなしみ。 - F&Qを参考にHomebrewをアンインストール
- 改めてインストール
- 復活
Python環境構築しなおしになった
そういえばHomebrewで入れたPython3を使っていたのだった、ということをHomebrew再インストールしてから思い出した。
pyenvを試してみる
２つ前まではpyenv-virtualenvを使っていたのだけれど、整理整頓ができない人間なので仮想環境の収集がつかなくなってしまい、新しいPCを買ってからは潔く仮想環境を放棄した。 バージョン管理しないなら、ということで１つ前はHomebrewでPython3を入れてしまうという力技を採用していたのだけれど、システム標準のPython3とHomebrewのPython3が共存している感じがややこしかった。 そこで今回はpyenvを使ってpython3環境を整えることにする。
- Homebrewを整える。
brew doctorなどして医者のゴーサインを得る。 brew install pyenv※Homebrewでpyenvをインストールするときの手順は、公式GitHubを参考にした。echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n eval "$(pyenv init -)"\nfi' >> .zshenvもうbashでは無いので...。zshって設定ファイル多くありませぬか...？exec "$SHELL"pyenv install 3.8.0折角なのでfor MacOSXの最新版をインストールpyenv global 3.8.0でシステム標準から切り替え。pyenv versionsで確認。pythonして、python3.8.0が起動することも確認。pipすると、python3.8.0と一緒にインストールされたpipが立ち上がった。upgradeを勧められたので安易にupgradeしてみた。
豊橋の宇宙ハッカソン に参加したのでメモ
NASA Space Apps Challenge Toyohashi 2019
NASA(米国航空宇宙局)などが公開している宇宙・地球環境・衛星関連のデータを使ったハッカソン『Space Apps Challenge』の豊橋会場。
過去の経験から、ちゃんと関われないハッカソンには参加しないようにしよう...と思っていたのだけれど、色々あって１日目のみ参加した。
ご講演内容メモ
講演者自己紹介
- 西野瑛彦さん
- 慶應義塾大学大学院 SDM
- システムデザインマネジメント研究科
- Sensing & Design Lab
- センシングデータをデザインして社会課題解決を試みる系の研究室。
- システム思考とデザイン思考を組み合わせて新たな価値を作る。
- 修士論文『情報伝達網羅性向上のための公共インフラを活用した準天頂衛星早期警報システムの設計と評価』今回のハッカソンに深く関連。慶應義塾大学学術情報リポジトリ（KOARA） - XooNIps
なぜ登壇か
宙畑『GISデータを活用して理想のカレシを探そう！』の記事を出した人。 その縁でCodeFor岐阜経由にて今回の登壇となった。
宇宙ハッカソンに関係ありそうな研究紹介
- 衛星データ（高精度測位）を利用したオイルパームを植林する人の支援アプリ
プランテーション作業効率向上のためのRTK- GNSS高精度測位を利用した植樹支援システムの設計と評価 - ラグビー選手がGPSセンサ持ってる話
実測値に基づく試合・訓練における戦略検討、学校の体育の授業への導入事例 - スタジアム内のセンサ測位値を用いたスタジアム観戦客の課題解決
ハッカソン発ムーブメントが変える社会｜NTTデータ
システム思考とデザイン思考の紹介
- システム思考とは
- デザイン思考とは
- 顧客価値連鎖分析、カスタマージャーニーマップ
※知らない内容だったのでメモできた情報が簡素。
参加感想
SW豊橋で得た「製作過程でもどんどん人に話してアドバイスを受け取れば、短期間でもブラッシュアップを重ねられる」っていう知見を実践するべく、（当者比）アウトプット＆フィードバックを心がけてみた。
専門家のお二人から有益なアドバイスを沢山頂くことができて、持ち込んだアイディアが更に現実味を帯びた気がした。
運営の皆さん、大変お世話になりました。ゲストの方々も、たくさん勉強させていただきました。ありがとうございました。
プリンの背景を消してみました
『いらすとや』よりもさらにゆる可愛い『いらすとん』というのがある。
そこで見つけたプリンの画像が可愛すぎたので思わずダウンロードしたのだけれど、 いらすとやと違って白背景が付いたJPEG画像だった。
可愛い。 けど白背景だとヘッダには使えない。
そこで先日友人に紹介してもらった背景削除サイトを利用してみた。
このサイトの威力が分かるのはもっとごちゃっとした背景から物体を抜き出したいときなのだろうけど、、、
知ったことか、思い立ったが吉日だ。全力でプリンを抜き出してもらうことにする。
できた。
このサイトは、処理結果として背景透過pngファイルを出力してくれるのだけれど、 記事背景が白いせいで透明だと何のことだか分からなくなるので、見やすさのために壮大な自然と夢の共演を果たしてもらった。
...よく見ると、お皿のところが透けてしまっている。
でも大丈夫。 切り取りすぎてしまったところを手で補正できる機能もついているから。
はい、綺麗に抜き出せました。
友人、教えてくれてありがとう。今後バイト先で使う予感しか無いです。
はー、プリン食べたい。
Google ChromeのCookieをSQLite3で見てみた
ネットでの行動を如何様に収集しているか、について読んでいて感じた違和感
デジタル・ポピュリズム 操作される世論と民主主義 (集英社新書)
- 作者: 福田直子
- 出版社/メーカー: 集英社
- 発売日: 2018/05/17
- メディア: 新書
- この商品を含むブログ (1件) を見る
たとえば、ジェーンという民主党支持の有権者がいたとする。ジェーンのツイッターには、オバマのウェブサイトへ誘導を促すリンクが送られる。ジェーンが自発的に名前、住所、郵便番号に相当する五桁の"Zip Code"などの基本データを入力すると、ジェーンのコンピュータには「クッキー」が送られ、ジェーンがどのようなサイトを見ているかなどの情報が集積される。 （p.56）
まずこれを読んで、「Cookieって送られるものだっけか」と思った。
それから、「どのようなサイトを見ているかなどの情報」ってフォーム入力を受け付けた程度で取ってこれるものなのかな、ということも疑問に思った。
違和感の正体は「クッキー」の指すものの違いだったみたい
簡単にまとめると、Cookieとは、アクセスされた際にWebサイトのサーバがクライアントに送るテキストデータを、ローカル環境にあるDBに保存しておくというWebブラウザの仕組みの事、もしくは保存されたデータ自体のことを指す。
基本的には、サーバAがクライアントBに保存したデータは、サーバAだけが利用できる仕様なので、サーバCが取得することはできない。
しかし、広告バナー等の埋め込みを利用すると、（バナーが埋め込まれたサイトの）閲覧履歴を取得することができるらしい。
参考： - トラッキングCookie | 日経 xTECH（クロステック） - 2種類のcookie～サードパーティとファーストパーティの違い | マーケティングを支援するDigital Cloud Platform
私が感じた違和感の原因は、「クッキー」をデータそのものではなく仕組みのことだと思って読んでいたことだったと分かった。 また、3rd party製Cookieによるトラッキングの仕組みを知らなかったことにより、見当違いな疑問を抱いていたことも分かった。
実際に見てみた
macの場合、Google ChromeのCookieは~/Library/Application\ Support/Google/Chrome/Default/Cookiesに保存されている。
sqlite3 Cookies
実際に開いて中身や構造を確かめることができた。
- creation_utc INTEGER NOT NULL
- host_key TEXT NOT NULL
- name TEXT NOT NULL
- value TEXT NOT NULL
- path TEXT NOT NULL
- expires_utc INTEGER NOT NULL
- is_secure INTEGER NOT NULL
- is_httponly INTEGER NOT NULL
- last_access_utc INTEGER NOT NULL
- has_expires INTEGER NOT NULL DEFAULT 1
- is_persistent INTEGER NOT NULL DEFAULT 1
- priority INTEGER NOT NULL DEFAULT 1
- encrypted_value BLOB DEFAULT ''
- samesite INTEGER NOT NULL DEFAULT -1
だいたい読めるのだけれど、encrypted_valueが暗号化されていて意味不明な文字列が表示されていた。 軽く調べたら、復号化の方法があるらしい。
蛇足
同じDefaultディレクトリにHistoryという名前のDBがあった。これが所謂閲覧履歴を保存しているDBらしい。
ということは、例えばこのDBを常時バックアップするように工夫すれば、ブラウザで消去ボタンを押してHistoryの中身を空にされても、ひそかに全履歴を集めておくことができるという訳ですね〜()
