青ポスの部屋

旅と技術とポエムのブログ

01_テック

GitHub Pages + GitHub ActionsでCI/CDする

概要 Vue.js(Vue CLI)で作ったwebサイトをGitHub Pagesにデプロイし、GitHub Actionsで自動更新できるようにします。GitHubリポジトリはVueプロジェクトを管理するのに使い、pushされると自動でbuild、GitHub Pagesにデプロイするようにします。 プロジェ…

GitHub ActionでCI/CDする

概要 GitHub Actionで、特定リポジトリにコードがプッシュされたときにコンパイルするように設定する。 GitHub Actionとは 「特定ブランチにpushされたとき、これこれの処理を行う」といったイベント駆動の処理を実行できる機能。 使い方 今回はひとまずActi…

Vue.js (6) Vue RouterでSPAを実現する

webにおけるルーティングとは ルーティング(routing)とは、「経路を指定すること」。ネットワークの分野でよく使われる用語で、そこではパケットの送受信の経路を指定するという意味で使われる。 webアプリでは「どのURLが指定されたときにどのような応答…

Vue.js (5) flaskサーバにデプロイする

概要 vue-cliで作成したプロジェクトをPythonのwebサーバライブラリのflaskでデプロイしてみる。 flaskを使うメリット webサーバはApacheやnginx、express(Node.js)などたくさんあり、どれでもVueプロジェクトをデプロイすることはできる(はず)。Flaskは…

Vue.js (4) vue-cliと単一ファイルコンポーネント(vueファイル)

vue-cliとは npmのモジュールで、Vue.jsを使ったプロジェクトを管理するツール。テストサーバを立てたり、デプロイするためにbuildしたりすることができる。 インストール node.jsがインストール済みとして、npmで下記のコマンドでインストールする。node.js…

Vue.js (3) Vue Components

Vue ComponentsはVueの機能を再利用するための仕組み。 globalに定義する Vue.componentsに記述する。 dataには初期化処理の関数を書く。dataメンバに関数を指定するのは違和感もあるが、そういう仕様。 templateメンバにはcomponentが置き換えるhtml文を書…

Vue.js (2) 「はじめに」にあるいろんな機能をフォローする

今回はVue公式ドキュメントの「はじめに」の章をフォローしてみる。 jp.vuejs.org 見えるか見えないかを制御する(v-if) v-ifディレクティブにtrue/falseで指定することで、要素が見えるか見えないかを指定できる。 <span v-if="message_is_seen"> message </span> リストの要素をforループで全…

Vue.js (1) hello world

概要 ゼロの状態からVue.jsでhello worldしてみる。 自分の前提知識 htmlがどういうもので、簡単な静的ページを作るくらいならできる。 JavaScriptはクライアントサイドの言語で、htmlからどうやって呼び出されてどういう動きをするかくらいはわかる。 flask…

ATOM Matrix (4) Wi-Fiにつなぐ

ここからが今流行りのIoT*1っぽいことをやります。 Wi-Fiにつなぐ ATOMはWi-Fiを使うとき、ATOM自身がAPとなるAPモードと、既存のAPにつなぐSTAモードがあります。今回はSTAモードで既存のAPに接続します。Wi-Fiを使うことでATOMはインターネットへ出ること…

flaskでformのデータを受ける

概要 formからGET、POSTメソッドでデータを送る。 flaskでデータを処理する。 formでデータを送る formでデータを送るのはwebの基本です。静的ページでやり取りする場合、具体的には次の流れになります。 ブラウザでサーバにアクセスする サーバはformのペー…

ATOM Matrix (3) 温度センサの値を読む

GPIOを扱う練習として、GROVE温度センサの値を読んでみます。 www.switch-science.com 本当はM5シリーズ謹製の環境センサがよかったのですが、ディスコンで入手不可ということでこれにしました。まさか買うときにこんなどつぼにはまるとはつゆしらず...。 は…

ATOM Matrix (2) Lチカ

githubリポジトリ githubにまとめました。ご自由にどうぞ。 github.com イントロ 前回はほぼコーディングなしで触っただけなので、もっと突っ込んで触ってみます。マイコンの世界で最初に書くコードと言えば、Lチカです。ATOM MatrixはLEDを25個も積んでいる…

ATOM Matrix (1) インプレ

先日スイッチサイエンスで取り扱いを開始したATOM Matrixが届いたので、簡単にレビューします。 www.switch-science.com ATOMシリーズとは M5Stackシリーズの最新機種です。ESP32-PICOというArduino互換のチップを積んでおり、非常に小さく安価なのが特徴で…

私のコード履歴書

下記を見て、自分もやってみる。 https://rabbitfoot141.hatenablog.com/entry/2020/03/17/190235 大学1年のとき、夏の1ヶ月くらいfortranの講義を受けて、初めてプログラミングに触れた。VirtualBox上にVine Linuxをインストールしていた。冬は講義がなかっ…

【インプレ】iPod Touch(2019年モデル)を買った

目次 背景 開封の儀 アプリ デレステ iTunes その他 カメラ 充電 まとめ 背景 僕にとってAppleは酸っぱいブドウ*1でした。Apple製品はどれも高価なので正直どれも手が出ません。共用のものを触らせてもらったことはたびたびありましたが、そこまで高価な費用…

Ecosiaで検索して木を植える

前書き Ecosiaとは 感想 前書き 地球温暖化が叫ばれて久しい。アマゾンやオーストラリアで森林火災が相次いだり、日本にも巨大台風が来たり冬なのに春みたいな気候が続いたり、気候変動への危機感が高まっている人も多いと思う。 でも、なかなか今以上何かで…

tesseractでOCR改札

概要 tesseractとは インストール テスト tesseractで改札 写真 結果 ちゃんとした画像 まとめ 概要 tesseractで切符の画像が読めないか試してみた。 tesseractとは いわゆるOCRのライブラリで、画像から文字を読解するライブラリ。 https://github.com/UB-M…

Grapesの話

grapesとは windowsで簡単に数式からグラフを書けるソフト。 tomodak.com データからグラフを書くならExcelでもできるし、数式からグラフを書くのもgnuplotやmatplotlibを使えばできる。ただし両方数式のデータを生成しないといけない。例えば「y=(log(8x))2…

ネスペ合格とネットワーク経験

令和元年秋期試験でネットワークスペシャリストに合格したので、合格体験記。 ネットワークの経験、知識 実務経験 学生時代に3年くらい、サークルのボックス棟のネットワークでIT便利屋ボランティアで作業していた時期がある。 大学のサークル棟のネットワー…

デザインパターンの原則

デザインパターンとは 大規模コードを書くときに見られるパターン。いわゆるGoF本と呼ばれるごついテキストで提唱されている。 https://www.amazon.co.jp/dp/4797311126 デザインパターンは言語によらない根本思想の話なので勉強しようという人も多いが、正…

ハコスコダンボールでデレスポ

果てしなく時間が空いてしまったが、百均VRの続き。 bluepost69.hatenablog.com ハコスコダンボール セリアで購入。スマホケースコーナーの近くに平積みされていた。 感想 普通によい。キャンドゥの眼鏡タイプとちがって周りが見えないので、ちゃんと没入感…

公理的数学論とオブジェクト指向プログラミング

公理とは プログラミングで公理に当たるもの オブジェクト指向の数学的根拠 先日公理系について書かれた良記事を見つけた。 arai-no-math.hatenablog.jp 自分は数学系ではないが、インスピレーションを受けたので、まとめてみたい。 公理とは 議論を始めるに…

【インプレ】moto G7

概説 デレステ プレイ MV AR(デレスポ) VR(デレスポ) カメラ その他 付属品 動作 その他 これまで、スマホはASUSのzenfone goを使っていたのだが、最近USB端子が物理的に壊れてきて、接触不良で充電できないことが増えてきた。 bluepost69.hatenablog.co…

【インプレ】キャンドゥVRメガネ

最近はスマホでもVRゴーグル・グラスを買えばVRコンテンツが楽しめるようになってきた。それを受けて、各百円均一チェーンも格安VRグッズを出している。今回はキャンドゥのVRグラスをレビューしようと思う。 VRコンテンツ 百均VRグッズ 百均以外 レビュー ま…

【Android】電源キーを摩耗させずにスクショを撮る

Androidでスクショを撮る場合、Android OSの機能としては電源キーとボリューム下キーを同時押しするということになっている。 しかしハードウェアキーはUSB端子と並んでスマートホンで消耗しやすい場所であり、デレステでスクショを撮りまくるような場合に、…

【bash】プロンプトのパス表示を切り詰める

bashのプロンプト プロンプトは環境変数$PS1で編集する bashのプロンプト bashのプロンプトはいろいろだが、入力部分より前側が長すぎると見づらいことがある。たとえば user@node /home/workspace/mywork1/temp/test $ のように長いと、入力した文字列がわ…

【win10】bash on windowsが強くなっていた

先日アップロードした記事の続き。 bluepost69-tech.hatenablog.com これまでと困ってること そもそも別窓でエディタが開くのは嫌 Atomは重い vimは嫌 ターミナルを使いたい 一瞬Powershellに落ち着いた 久しぶりにbashを触ったらはまった これまでと困って…

Haskell-stackを触ってみた

タイトル通りHaskellを触ってみたのだが、Hello worldのような簡単なコードを実行するまででも「これにしたがってやればいい」みたいなドキュメントが見つからなかったので、メモ書きとして残しておく。 環境:windows10 + powershell 1.インストールとセッ…

VOCALOID3でのVOCALOID2のライブラリインポート

いろいろつまづいたのでメモ。元々VOCALOID2(以下V2)のライブラリはVOCALOID3(以下V3)のものとは別であり、V2のライブラリをV3で使うにはライブラリインポートツールというものを使わなければならない。このライブラリインポートツールは2016年末でYAMAH…

【win10】立体音響にしたら音割れするようになった

windows10には立体音響っぽくする機能があるらしく、プロパティに「立体音響」なるタブがある。方式を選択して適用すると、仮想的に立体音響となるらしい。ところがそれが落とし穴で、Windows Sonic for Headphonesを選択して適用を押すと音割れするようにな…