vue-cliでpwaの設定のやり方
iOSのステータスバーの色、もといステータスバーを消そうとして、設定の仕方がわからなかったメモ
通常の設定方法
metaタグに入れればおｋ
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
vue-cliの構築時にpwaを有効にした場合
プロジェクトルートにvue.config.jsを作成し、以下を記述
module.exports = { pwa: { themeColor: '#000000', msTileColor: '#000000', appleMobileWebAppCapable: 'yes', appleMobileWebAppStatusBarStyle: 'black' } };
cliにて構築している場合、metaタグを入れてあっても、上記の設定(してない場合はデフォルト値)が反映されてしまい、タグが反映しない模様
その他
apple-mobile-web-app-status-bar-styleにて、透過させるblack-translucentオプションをした場合に上に白いバーが出てしまうのはノッチのせいらしい…
viewportタグで位置を変えても上か下に残ってしまって、おとなしくblackかwhiteを使うことにした。
以前はできたが、現在はピンチのズームも無効にできない模様。
Pythonの切り捨て・切り上げ
AtCoderでPython3で競技プログラミングをやっていたときに、WA判定食らったので今後やらかさないようにメモ
切り捨て・切り上げ
演算子を使って行うのが一番早くてかんたん
# 切り捨て 45 // 2 # 切り上げ -(-45 // 2)
パット見切り上げ何やっとんじゃい！って思いますがきちんと算出されます
mathモジュールより高速です
round()とprint+formatでは切り上げできない
試しに以下を実行してもらえるとわかります
print(-(-45 // 2)) print(round(45 / 2)) print("{:.0f}".format(45 / 2))
round()とformatは偶数を優先とした値になります
切り上げた結果が偶数であればround()もformatも同じ結果になりますが、奇数となる場合は挙動が異なるので要注意
macOSでスタートアップ時にスクリプトを常駐させる
macOSにてサイネージ向けにバックグラウンドでアプリケーションを起動しておきたかったときのメモ
仮想環境などの大掛かりにならずに、ウインドウを消してもしっかりと起動状態を保ってくれる方法を探すのに地味に時間がかかった…
メイン
以下のファイルを作成し、自動起動に入れると指定したスクリプトをバックグラウンドで実行させることができる
server.command
nohup 任意のスクリプトファイル &
設定ファイルを使う場合はcdで移動してからnohupで起動
※ターミナルのウインドウは残ってしまうので消すための処理を入れるか、手動で消す必要あり
サブ
その他の手法として以下
- Automator.appを利用し、任意のスクリプトかコマンドを実行させる
- 表示させるターミナルウインドウを消したら止まる
- Dockerで
restart: alwaysを指定する- 他、仮想環境も似たように
- cronに設定する
おわりに
今回、プログラム内にMySQLに書き込む処理を入れていたことが原因で、起動速度が早すぎるタイミングで実行させるとMySQLよりも先に起動してエラーすることがあった。
可能であればdocker-composeで環境ごと動かすのがストレスフリーで一番いいと思う。
VS CodeとPrettierで快適にVue.jsを書く
巷で話題のコードフォーマッター(Prettier)を使ってみたところ、フロントエンドの開発が気持ちよくなったので、その布教と設定について
Prettierについては公式などをご参照ください。
この記事でやること
Visual Studio Code(VS Code)でVue.js(.vue)ファイルを保存する際に、Prettierを適応し、自動的にフォーマットしてもらう。
前置き
コードフォーマッターや校正ツール(なんちゃらLintなど)などは、複数人での開発する場合はプロジェクトディレクトリに入れるのが吉だと思います。
プロジェクト全員で同じエディタ環境を構築するよりも、プロジェクトファイルと一緒に置いておき、commit前にそのプロジェクト用に設定された全員共通の設定でフォーマットをかけるのが統一が保てるうえ、導入がスムーズです。
またはcommitやpush、marge時に自動的に適応されるようにするなどなど…
今回は主に個人で開発する際に快適になるようにエディタにPrettierの設定を入れていきます。
エディタに設定しておくと、エラーにならない程度の殴り書きを保存するたびにきれいに整形してくれるのでとても開発楽になります。
VS Codeの設定
VS Codeのバージョンを確認
- バージョン 1.34.0
現在(2019/05/28)の最新バージョンです。
VS Codeのバージョンが古いと最新のプラグインが適応できず、以下の方法でPrettierがVueファイルに適応できないので注意。
プラグインのインストール
以下の2つが必要です。
Prettier - Code formatter
Vetur
設定ファイルを記述
VS Codeの設定ファイル(JSON)を開き、以下の設定を追記する。
// 保存時の自動フォーマット設定を切り、下記で言語別に設定する "editor.formatOnSave": false, // 以下のVSCodeのバージョンやプラグインのバージョンが古いと以下のprettierが設定できず警告が出る "vetur.format.defaultFormatter.html": "prettier", // 好みの設定を入れる "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": true, "semi": true } }, "[html]": { "editor.tabSize": 2, "editor.formatOnSave": true }, "[css]": { "editor.tabSize": 2, "editor.formatOnSave": true }, "[javascript]": { "editor.tabSize": 2, "editor.formatOnSave": true }, "[vue]": { "editor.tabSize": 2, "editor.formatOnSave": true },
上記の設定を反映したら、vueのファイルを開き、ファイルを保存するかコマンドパレットよりFormat Documentを行うと自動でPrettierにてフォーマットが行われる。
これで快適なVue.jsライフの完成！
vue-cliで作ったWebアプリケーションをElectron化させる
最近フロントエンドを触る機会が多く、Vueを使って開発してます。
特にFirebaseと組み合わせると、簡単に認証なども組めるのでとても便利です。
vue-cliはこちらの記事が綺麗にまとまってます。
そんなvue-cliで構築したプロジェクトが、簡単にElectronのアプリケーションにできるようだったので試してみたメモです。
ほぼ公式のドキュメントのままで、一点だけ躓いた点です。
プロジェクトにElectronを導入する
公式のドキュメントを参照し構築
vue add electron-builder
サーバー起動
yarn electron:serve
ビルド
yarn electron:build
ビルドにコンポーネントが読み込まれない
テストで実行させたときはすんなり動いたのですが、ビルド後のアプリケーションの初回起動時にコンポーネントが読み込まれない問題がありました。
原因
どうやらRouterをヒストリーモードにしていると初回の起動時にうまく読み込まれないようです。
Electron化してしまえばヒストリーモードの有無は影響がないはずなので、この設定している一行を消して終了です！
サブスクリプション大掃除2018
mohikanzアドベントカレンダー#2の11日目です。
家の掃除だけでなくPC内部も少しお掃除しようと思い、利用しているサブスクリプションを洗い出そうと思います。
大掃除っと題しておきながら、ただの布教です。
いらないもの洗い出してお財布削減だ！って思っておいて何も減らなかった
リスト
適当にジャンル分け
日常
Inkdrop
https://blog.odoruinu.net/2016/10/04/inkdrop/
Markdownのノートアプリ
BoostnoteとQuiverを乗り継いでたどり着いた桃源郷
割といい値段だが、クロスプラットフォーム(iOS, Android含む)で、同期もスムーズで最高
※お試し期間あり
Todoist
言わずとしれたToDoリストアプリ
タスク入れるときに今日Software Design買うや毎月18日Software Design買うっと入れると自動的に期限を設定してくれたり、繰り返しタスクとして登録してくれて便利
別に無料のまま使っててもそこまで困らないが、プレミアムにすると使えるラベル機能とタスクにファイルを突っ込める機能が優秀
ソフトウェア
Parallels Desktop Pro Edition
https://www.parallels.com/jp/products/desktop/pro/
買い切り式のノーマル版使ってたら、ほぼ同額でProの案内が届いたので飛びついた
利用頻度としてはあまり使わないが、ほぼストレスなくWindowsが快適に動くのがすごい
使うとしてもA5:SQL Mk-2あたりのWinでしか使えないものを試すときぐらい
重すぎないゲームならリソース多く食わせれば普通にできる。
Adobe フォトプラン
https://www.adobe.com/jp/creativecloud/photography.html
AdobeのPhotoshopとLightroomの利用に絞ったプラン
MAXプランは使わないけれど、RAW現像や画像編集だけする人にはうってつけ
動画
Netflix(スタンダードプラン)
動画サービス
通勤時間にアニメ消化する民には必須のサービス
ベーシックプランでも十分な気もしたが、家で見る際に確実に気になっちゃう気がしたのでスタンダード
Amazon Prime
https://www.amazon.co.jp/amazonprime
動画サービスというかなんというかAmazon
動画から音楽、ストレージまでと幅広い上にとても安い
多分この記事読んでる人でプライムじゃない人いないんじゃないかな？
サービス
ESET
https://eset-info.canon-its.jp/
ウィルス対策ソフト
特にこだわりがあるわけではなく、値段とPCリソース的に軽いのでESET利用中
Amazonのセール中に5台3年版がとっても安くてGOOD
はてなブログ
独自ドメインのためPro会員
2年コースで登録してたけど、次の更新タイミングまでにWordpress移行を検討中
お名前.com
ドメイン用
その他
Zwift
ロードバイクを持っている人はZwift対応のローラー買おう！
リアルで自転車をこいで画面内でキャラが走ってくれるゲーム？
インドア人間がロードにハマってアウトドアが増えたのに、家の中でも走れるようになったせいでインドアに戻った元凶
多分一番単価高い気もするが、これのおかげで体重がキープされているのは事実…
まとめ
なんだかんだ毎年4万以上飛んでいっているらしいことがわかった
今後も自分が生きていく上で快適なツールや、今後も活用していきたいっと思えば投資していきたい(お財布が死ない程度に
macOS 10.14 Mojaveに更新したらOpenCV(Webカメラ)が動かなくなった件
更新されました！
先日のiTerm2の更新でこちらの件対応されました！(2018/10/18)
現在はダイアログを許可することで普通に動作します。
以前までの状態
今まで動かしていたOpenCVのプログラムがOSをアップデートした途端に動かなくなったので、原因のメモ。
原因
OpenCV自体が駄目だったわけではなく、iTerm2にてWebカメラの制御を行うプログラム操作しようとしていたことがダメだった。
解決策
Mojaveより、アプリケーションがWebカメラやマイクを制御する際にセキュリティとプライバシーよりアクセスの許可を与える事が必要になった。
現状iTerm2だと、この権限を与えることができないようです。
そのため、macOS備え付けのターミナルを利用してプログラムを動かし、表示されるアクセス許可のダイアログより許可を行うことで、無事に利用することができるようになる。
RaspberryPiをデジタルサイネージとして使う際の設定
デジタルサイネージに限ったことではないが、開発をしているとちょっと気になる部分の備忘録。
音声出力をアナログ出力のみに
HDMIで接続していると、アナログよりも優先してHDMIの方で出力されてしまい、アナログ出力ができないためその設定。
HDMIからの出力を行いたい場合は不要です。
アナログ出力に固定
amixer cset numid=3 1
出力の確認
speaker-test -t sine -f 600
画面をスリープさせない
自動的に画面がスリープになってしまうため設定。
設定ファイルを編集
sudo vi ~/.config/lxsession/LXDE-pi/autostart
末尾に以下を追記
@xset s 0 0 @xset s noblank @xset s noexpose @xset dpms 0 0 0
ラズパイを再起動
スワップファイルの無効化
ここまでしなくても良いと思うのですが、スワップを使うほどのことはないと思うので無効化しておいたほうがSDカードの延命に繋がります。
かなりの長期稼働が予測される場合は、ログ出力等も止めておいたほうがSDカードにとっては良いです。
無効化の設定
sudo insserv -r dphys-swapfile
スワップファイルの確認
free -m
おわりに
本当に映像を流すだけで長期安定稼働を考えるとラズパイよりもBrightSignを使うのが良いとは思います。
値段が10倍ぐらい違いますが…
OLEDディスプレイとArduinoで丁半ゲームを作る
秋月電子で売っている小型OLEDディスプレイを使って何かできないかと考えて簡単に作ってみました。
しっかりとパッケージングはしてないのでプロトタイプ状態です。
OLEDディスプレイの活用
いろいろと考えてみたメモ。
- 掲示板的に永続的に同じのを流す
- 加速度センサーなどを利用し、動きに応じて出力を変える
- デバック時のシリアルモニタの代わり
- 長期稼働などの際のArduinoの稼働状況の出力計
- 温度や稼働時間を表示するのは割とありかも
環境
- Arduino Uno
- OLEDディスプレイ
- 超音波距離センサー
- 安いのでこちらを使用
- その他、ブレットボード、ジャンパワイヤなど
超音波距離センサーは丁半を再現する際に、籠がかぶさっているか否かを判定するために利用。
正直、フォトリフレクタやCdSセルあたりで良かった気がしないでもない。
完成品
こんな感じです。
ブレッドボードとこの検証ボードごと覆い被せれる籠がなかったので、被さった想定でセンサーを手で動かしてます。
最終的に、ArduinoをNanoあたりにして、配線をすっきりさせれば紙コップぐらいにきれいに収まり、「張った張った！」っと丁半を楽しめるのではないかと思います。
電子化した時点で、この手のゲームイカサマ仕組み放題だなっと思いますが…
配線は割愛で。
大した配線していないので、ほぼほぼプログラムから読めるとおりです。
プログラム
GitHubにあげました。
今までデモ的に作ったプログラム等も整理して、全部GitHubにまとめました。
丁半ゲーム以外の既に作ったプチ工作系はいくつか記事にしたいなっとは思います。
おわりに
たぶんこの時期にするまでの過程で時間がかかった順が、
- リポジトリ整理 > ブログ執筆 > Gif作成 > 丁半作る
こんな感じです(笑)
やっぱ何事も環境の基盤となる部分の整理整頓は大事ですね。
ちなみにGif作成に利用したソフトはPicGIF Liteっというもので、無料とはいえかなり充実した設定ができおすすめです。
