20210505のMacに関する記事は6件です。

(Mac) Wi-Fiが切れたら自動で再接続するメニューバー常駐アプリケーション

背景 うちの賃貸マンションはNuro光が無料で使えるのですが、手持ちのMacと相性が悪いのか、突然接続が切れることが度々あります。1日に1回以上の頻度で発生するため、さすがに対策が必要でした。 単にこちらをShell scriptあるいはApple Scriptで実装してもよいのですが、稼働している様子がわかるようにしたく、メニューバーに常駐するタイプのアプリケーションとして実装することにしました。 方法 基本的には、こちらのチュートリアルの通りに進めてメニューバー常駐アプリを作りました。 Swiftからshellコマンドを実行する方法としてこちらを使いました。 完成コード AppDelegate.swift import Cocoa protocol CommandExecuting { func run(commandName: String, arguments: [String]) throws -> String } enum BashError: Error { case commandNotFound(name: String) } struct Bash: CommandExecuting { func run(commandName: String, arguments: [String] = []) throws -> String { return try run(resolve(commandName), with: arguments) } private func resolve(_ command: String) throws -> String { guard var bashCommand = try? run("/bin/bash" , with: ["-l", "-c", "which \(command)"]) else { throw BashError.commandNotFound(name: command) } bashCommand = bashCommand.trimmingCharacters(in: NSCharacterSet.whitespacesAndNewlines) return bashCommand } private func run(_ command: String, with arguments: [String] = []) throws -> String { let process = Process() process.launchPath = command process.arguments = arguments let outputPipe = Pipe() process.standardOutput = outputPipe process.launch() let outputData = outputPipe.fileHandleForReading.readDataToEndOfFile() let output = String(decoding: outputData, as: UTF8.self) return output } } @NSApplicationMain class AppDelegate: NSObject, NSApplicationDelegate { @IBOutlet weak var menu: NSMenu! //メニューバーに表示されるアプリケーションを作成 let statusItem = NSStatusBar.system.statusItem(withLength:NSStatusItem.variableLength) func applicationDidFinishLaunching(_ aNotification: Notification) { // メニューバーに表示されるアプリ。今回は文字列で設定 statusItem.title = "NURO" statusItem.highlightMode = true statusItem.menu = menu //アプリ終了ボタンを作成 let quitItem = NSMenuItem() quitItem.title = "Quit Application" quitItem.action = #selector(AppDelegate.quit(_:)) menu.addItem(quitItem) // WiFi再接続のループ開始 startLoop() } func applicationWillTerminate(_ aNotification: Notification) { // Insert code here to tear down your application } @objc func quit(_ sender: Any) { NSApplication.shared.terminate(self) } func startLoop() { Timer.scheduledTimer(withTimeInterval: 3, repeats: true, block:{ (timer) in let bash: CommandExecuting = Bash() var result = "" do { try result = bash.run(commandName: "networksetup", arguments: ["-getinfo", "Wi-Fi"]) }catch { print("failed to networksetup -getinfo") return } if (!result.contains("Subnet mask")) { do { try result = bash.run(commandName: "networksetup", arguments: ["-setairportnetwork", "en1", "HG8045-D94E-bg", "cuayh5ks"] ) } catch { print("failed to networksetup -setairportnetwork") } } }) } } ポイント .entitlementsファイルで、App SandboxをNOにする必要がある。 動作の様子
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Typescript環境でReactを使ったWebアプリを作ろう

事前準備 開発に入る前に以下が入っていない場合は先にインストールをしてください Node.jsがインストールされている確認 Node.jsのバージョン確認 node -v yarnがインストールされているか確認 yarnのバージョン確認 yarn -v プロジェクトの作成 プロジェクト名:react_practice プロジェクトの作成 npx create-react-app react_practice --template typescript 確認 作成したアプリケーションのディレクトリに移動し、下記実行 確認 yarn start ブラウザが立ち上がり、Reactのロゴマークがクルクル回っていれば成功 初期化 不要なファイルを削除し、整理します。 またそれに伴いそれらを使っていたところでエラーが発生するのでそれを修正します。 削除する一覧 以下のファイルごと削除します。 publicフォルダ favicon.ico logo192.png logo512.png manifest.json robots.txt srcフォルダ App.test.tsx logo.svg react-app-env.d.ts reportWebVitals.ts setupTests.ts 削除する箇所 ファイルを以下のように書き換えます App.tsx App.tsx import React from 'react'; import './App.css'; export const App = () => { return ( <div>リセット済</div> ); } index.tsx index.tsx import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import {App} from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); ここでもう一度正常に動作するかどう確認してください。 正常に表示ができればOKです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Mac】VSCodeでLaTeXが使えなくなったときの意外な対処法

使用環境 OS: MacOS Catalina 10.15.7 デバイス: MacBook Air 2020 ソフト: VSCode, MacTeX 2020 突如として起こったエラー ある日,大学の課題レポートをLaTeXで作成しようとしたらとしたら… Recipe terminated fatal error: spawn latexmk ENOENT. ログを確認したら「パスが通ってねえよ」って言われてた. じゃあ,パス通せばいいじゃんって思うよね.通したんだ. その回答がこちら env: perl: No such file or directory 「は????」 これでは何の解決にもならない…! これやる前にもVSCodeやMac本体の再起動もしたけどダメだった… 対処法 VSCodeをHomebrew経由で入れてたのを思い出して,ダメ元で次のコマンドを叩いてみた. $ berw reinstall --cask visual-studio-code その後VSCodeを開いてビルドしたら通った… 「は???」 よくわかんないけど解決しました. 心当たりがあるとすればMacOSのセキュリティアップデートかな… 偶然治ったと思ってるので,これで全てが解決するわけではないことだけは断っておきます. ただ,このパターンはネット上を走り回っても見つからなかったのでここに載せようと思いました!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails6で開発中にスマホからアクセスする方法

はじめに Railsでアプリケーション開発していると、スマートフォンから動作を確認したいことがあるかと思いますので、方法を簡単にご紹介します。 環境 MacOS : Big Sur Ruby : 3.0.1 Rails : 6.1.3.1 ① IPアドレスの確認 まずMacbookの システム環境設定 > ネットワーク からIPアドレスを確認します。 ② rails s の実行 普段であれば、 コマンドで rails s を実行しますが、このコマンドではスマートフォンからアクセスできません。 rails s -b 'IPアドレス' コマンドを使用します。 IPアドレスが、 192.168.68.106 であれば、 rails s -b 192.168.68.106 を実行します。 rails s -b 192.168.68.106 成功すると、ネットワーク受信接続の確認が表示されるので、許可をクリックします。 ③ スマホからアクセス スマホのブラウザから、IPアドレス:3000 又は http://IPアドレス:3000 とURLを入力し表示させます。 最後に スマートフォンの表示や、動作を気軽に確認できますので、ぜひ参考にしてみてください。 以上、Rails6で開発中にスマホからアクセスする方法のご紹介でした。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

anyenv + nodenv で Mac に Vue.js の開発環境を構築する

自分用のメモを兼ねて, 環境構築シリーズです. 今回は Vue.js, 特に Vue CLI の開発環境を構築していきます. Homebrew は導入済みとします. 例によって M1 チップ/Big Sur では挙動が異なるかもしれません. 環境 macOS Catalina 10.15.7 Homebrew 3.1.5 この記事で導入するもの anyenv ○○env 系のパッケージをまとめて管理してくれるパッケージです. 今回のように nodenv だけであれば特に必要ありませんが, 他に pyenv (Python) や rbenv (Ruby) など env 系パッケージが増えてきたときにそれらを一元管理するため, 今回は anyenv を経由することにします. nodenv Node.js のバージョンを管理するのに使います. nodebrew も定番ですが, Node のバージョンを切り替えるのに毎回コマンドが必要だったり, また anyenv で管理できなかったりという点を考慮して今回は nodenv を用います. 実用上は nodebrew でも問題はありません. また ndenv というものもありますが, そちらは非推奨になったようです. Node.js 本来ブラウザ上で動作する言語である JavaScript をサーバー (今回は普通の PC) 上で動作するようにしたものです. Vue.js に限らず, JavaScript のフレームワークを使うときは PC に Node.js をインストールして, 様々な Node 製のツールを活用して開発を進めることが多いです. npm Node.js 用のモジュール管理ツールです. nodenv で Node をインストールしたときに自動的に導入されます. Vue CLI JavaScript フレームワークである Vue.js を用いて SPA (Single Page Application) を開発するために, ビルド設定などが含まれたツールです. Vue.js は通常の JavaScript のように HTML からプラグイン的に読み込んで使うこともできますが, 実際には Node ベースの Vue CLI 環境で開発を行い, 最終的にビルドされた静的ファイルをデプロイすることが多いです. インストール anyenv まずは 公式の手順 に従って anyenv をインストールします. Homebrew からインストールできます. $ brew install anyenv $ anyenv --version anyenv 1.1.2 以下のコマンドを叩くと eval "$(anyenv init -)" を使っているシェルの設定ファイルに書くよう指示が出るので, 従います (以下は zsh の場合です). $ anyenv init # Load anyenv automatically by adding # the following to ~/.zshrc: eval "$(anyenv init -)" $ echo 'eval "$(anyenv init -)"' >> .zshrc インストール用のディレクトリを作成します. $ anyenv install --init [y/N] で確認されるので, y を入力して進んでください. Completed! と出れば大丈夫です. nodenv anyenv を使って nodenv をインストールします. 無事にインストールできたら設定ファイルを読み込み直すよう指示が出るので, 従います. $ anyenv install nodenv ... (省略) Install nodenv succeeded! Please reload your profile (exec $SHELL -l) or open a new session. $ exec $SHELL -l Node.js nodenv でインストールできる Node.js の一覧は以下で確認できます. $ nodenv install --list 今回はせっかくなので最新の Node 16 をインストールしてみましょう (執筆時点での LTS は 14 系 です. バージョン 16 系は秋から LTS になるようです). $ nodenv install 16.0.0 インストールした Node のバージョンは以下で確認できます. $ nodenv versions 16.0.0 標準で使うバージョンを切り替えるには nodenv global で指定します. versions で表示される一覧に * が付いていれば大丈夫です. $ nodenv global 16.0.0 $ nodenv versions * 16.0.0 (set by /Users/ユーザー名/.anyenv/envs/nodenv/version) ここまでで npm も自動的に導入されています. $ npm --version 7.10.0 なお, 特定のディレクトリでのみ Node のバージョンを切り替えたい場合は nodenv local コマンドを使います. 一度設定すると .node-version というファイルが生成され, 以降はディレクトリに移動するだけで自動的にバージョンが切り替わります. $ mkdir node-test $ cd node-test $ nodenv local 16.0.0 $ nodenv versions * 16.0.0 (set by /Users/ユーザー名/node-test/.node-version) set by 以下の表示が切り替わったのがわかります. Vue CLI いよいよ Vue CLI をインストールします. 今回はグローバルに入れることにします. $ npm install -g @vue/cli オプション -g はグローバルにインストールすることを表します. グローバルにインストールしたくない場合はこのオプションを外し, 以下で実行する vue コマンドを npx vue に置き換えてください. なお, npm でインストールできる Vue CLI には @vue/cli の他に vue-cli がありますが, 後者は古いものです. Vue 自体のバージョンなどはプロジェクト作成時に選べますので, 基本的には前者をインストールすれば問題ないと思います. これでコマンドラインから vue コマンドが使えるようになりました. command not found となる場合は $ nodenv rehash を試してみてください. $ vue --version @vue/cli 4.15.2 のように表示されれば OK です. 動作確認 Vue CLI でプロジェクトを作成するには $ vue create <プロジェクト名> です. プロジェクト名と同じ名前のディレクトリが生成されます. カレントディレクトリをそのままプロジェクトのルートとして使いたい場合は vue create . とします. Generate project in current directory? (Y/n) と聞かれるので Y を入力してください. $ vue create vue-test Vue CLI v4.5.12 ? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features create コマンドを実行するとプリセットを選ぶ画面になります. 今回は動作確認なので真ん中の [Vue 3] babel, eslint を選ぶことにします. 矢印キーで選択して Return です. Manually select features では Vue のバージョンを含め設定を細かくカスタマイズできます. ここで選ばなくても後から追加することは可能ですが, 移行が面倒だったりするので仕様が決まっている場合はあらかじめ選んでしまうのがいいかと思われます. プロジェクトが生成されたら開発用のサーバーで確認してみましょう. プロジェクトのルートで npm run serve です. $ cd vue-test $ npm run serve ... (省略) DONE Compiled successfully in xxxxms xx:xx:xx App running at: - Local: http://localhost:8080/ - Network: http://192.168.x.x:8080/ Note that the development build is not optimized. To create a production build, run npm run build. となれば立ち上がっています. ブラウザで localhost:8080 にアクセスしてみましょう. のような画面が表示されれば成功です. サーバーを停止するには Ctrl + C です. VSCode で開発する VSCode はデフォルトでは Vue のファイルをうまく扱えませんが, Vetur という拡張機能を入れると便利になります. Marketplace から検索して追加してみてください. Vue ファイルがシンタックスハイライトされ, Cmd + Return で参照元に飛んだりできるようになっていればひとまず OK です. まとめ これで Mac に Vue CLI の開発環境が構築できました. 具体的な開発の進め方についてはインターネットに素晴らしい記事がたくさんあるので, それらを参考にバリバリ開発を進めていきましょう!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

MacBookに接続しているArudinoのSerialポートを調べる方法

MacBookPro 2012を使ってpythonを学んでます 現在 PythonプログラムでArudinoUNo制御するのにトライ中 Serialポートを調べる方法につまづいたので 備忘録としてSerialポートを調べる方法を書いておきます。 今回使うボードはMakerUNO選んだ理由は 2から13にLEDが付いていてデバックするのに便利だからです。 Pythonプログラムを自由に扱えるようになってから他のボードも試します。 今回はcodehero.jp のこちらにあった回答を参考にさせてもらいました。 Mac OS Xでシリアルポート番号を見つける方法は? ターミナルで下記のコマンドを打ちます ls /dev/cu.* 結果としてこのようなのが帰って来ました /dev/tty.Bluetooth-Incoming-Port /dev/cu.usbserial-1410 Arudino IDEと同じ物が表示されました。 後は、ターミナルの結果をコピーし Pythonプログラムに貼り付けます。 やってみた感想は ターミナル使って探した方が キーボード打ち込みよりも早くて確実でした。 Pythonプログラムは完成してからまた書きます。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む