- 投稿日:2020-05-29T21:04:23+09:00
Raspberry Pi 4 入門 セットアップ編(モニター不要版)
はじめに
Raspberry Pi 4から、モニター出力がmicroHDMI端子になりました。
しかし、私のようにIoT機器としてRaspberry Piを利用する人にとってはかなり無縁な代物なので、リモート操作のみでモニター同様のセットアップする手順を、備忘録として残します。
準備物
RaspberryPiを動かすには以下を揃えれば、起動できます。
- Raspberry Pi 4 ModelB 2GB
- ケース
- USB-Type C 電源アダプター
- microSDカード 64GB
- PC
OSイメージの書き込み
Raspberrypi公式サイトからRaspberry Pi Imagerをダウンロードします。
WindowsはRaspberry Pi Imager for Windows
、MacはRaspberry Pi Imager for macOS
を選択します。ダウンロードしたらインストール作業は短調なので省略。
起動すると以下のような画面が表示されるのでSDカードへOSをインストールするための設定をします。
Operating System
からRaspbery Pi OS
を選択SD Card
から書き込むSDカードを選択- 書き込む準備ができたら
WRITE
から書き込みを開始書き込みが完了したら
CONTINUE
からSDカードが取り出されます。初回設定
再度、SDカードをマウントし、
boot
というデバイスが表示されることを確認します。Raspberry Pi 初回起動時から以下のことを解決するためにファイルを作成します。
作成するファイル 内容 boot/ssh ssh起動するためのファイル boot/wpa_supplicant.conf 無線LAN接続を設定するためのファイル まず、空ファイルの
boot/ssh
を作成します。Windows
1. 右クリックから新規作成 > テキストドキュメント
を選択
2. ファイル名ssh(拡張子の .txtは不要)
を作成Mac
1.コマンドでtouch /Volumes/boot/ssh
を実行します。同じ要領で無線LAN接続用に
boot/wpa_supplicant.conf
を作成したら、中身を各環境に合わせて記述し保存します。
以下の例では、WiーFiのSSIDをssid_name
、パスワードをpassword
として設定しています。wpa_supplicant.confcountry=JP ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1 network={ ssid="ssid_name" psk="password" }SSH接続
SDカードをRaspberry Piに装着し起動後に、SSH接続します。
raspberrypi.local
というホスト名に対してユーザーpi
で接続します。Windows
WindowsはTeraterm等のSSH接続用ソフトウェアを使って接続します。
Tera Termを起動し、ホストにraspberrypi.local
と入力し、OK
をクリックします。ユーザ名に
pi
、パスフレーズにraspberry
を入力し、OK
をクリックします。Raspberry PiにSSH接続した画面が表示されます。
pi@raspberrypi:~ $Mac
ssh ユーザー名@ホスト名
でSSH接続できます。ssh pi@raspberrypi.local初回接続時に証明書関係の応答メッセージが返ってくるので
yes
を入力します。Are you sure you want to continue connecting (yes/no/[fingerprint])? yes初期パスワード
raspberry
を入力します。pi@raspberrypi.local's password:Raspberry PiにSSH接続した画面が表示されます。
pi@raspberrypi:~ $初期パスワード変更
SSH接続できたらパスワードを変更します。
$ sudo raspi-configセキュリティ観点からWi-Fiに接続する前にpiユーザーの初期パスワードを変更するため、
1 Change User Password
を選択します。
OK
を選択します。新しいパスワードを2回入力します。
New password: Retype new password:以下の画面が表示されれば、パスワード変更が完了します。
Ok
を選択します。
Finish
を選択してraspi-configを終了します。ソフトウェアアップデート
初期アップデート、アップグレードします。
$ sudo apt-get update $ sudo apt-get upgrade -yvimインストール
Raspbianに標準で入っているvimはvim-tinyという最小構成版なので、矢印キーやバックスペースキーが使えません。
そのため、標準のvimを再インストールし、キーボード操作を受付けるためのvimrcファイルを作成します。$ sudo apt-get install vim -y $ cat <<EOF > ~/.vimrc set nocompatible set backspace=indent,eol,start set autoindent set nowrap set ruler syntax on EOFIPアドレス固定化
VNCでリモートデスクトップ接続する際にIPアドレスを固定化が必要となるため、その設定を行います。
IPアドレス固定化に必要となる情報は以下の通り。
- プライベートアドレスのCIDR
- ゲートウェイIP
- インターフェース名
これらの情報を取得するために、
route -n
から情報を取得します。$ route -n Kernel IP routing table Destination Gateway Genmask Flags Metric Ref Use Iface 0.0.0.0 192.168.0.1 0.0.0.0 UG 303 0 0 wlan0 192.168.0.0 0.0.0.0 255.255.255.0 U 303 0 0 wlan0取得した情報から次のような結果であることがわかりました。
項目 値 備考 プライベートアドレスCIDR 192.168.0.0/24 サブネットマスク:255.255.255.0=CIDR:24 ゲートウェイIP 192.168.0.1 ルーターのIPアドレス インターフェース名 wlan0 Raspberry Piの無線LAN接続口 CIDRは24なので固定IPアドレスとしては192.168.0.2~192.168.0.254の中から選べるわけですね。
もちろん、その他デバイスが接続しているIPアドレスと被らない範囲で設定する必要があります。※現在のRaspberry Piに割り当てられているプライベートIPアドレスはWi-FiからDHCPで割り当てられたIPアドレスのため、DHCPで振られない範囲のIPアドレスを割り当てるのが一番の得策ですが、各ご家庭のルーター設定によるので、ここでは割愛。
IPアドレスを固定化するための設定ファイルをvimで修正します。
$ sudo vi /etc/dhcpcd.conf取得した情報を基に固定IPアドレスを最下部に設定します。
今回は既に割り当てられているプライベートアドレスを固定します。
vimの使い方についてはviエディタの使い方を参考にしてください。dhcpcd.confinterface wlan0 static ip_address=192.168.0.100 static routers=192.168.0.1 static domain_name_servers=192.168.0.1Raspberry Piを再起動します。
$ sudo shutdown -r 0再度、IPアドレス経由でSSH接続できれば設定完了です。
VNCサーバーインストール
モニター無しでもGUI操作するためのリモートデスクトップ可能な環境を作ります。
その建前として必要になるVNCサーバーをインストールします。$ sudo apt-get install tightvncserver -yVNCサーバーを起動すると、初回はリモートデスクトップするためのパスワード設定を求められますので、これを設定します。
$ tightvncserver Password: Warning: password truncated to the length of 8. Verify:閲覧用のパスワードも設定するか求められますが、好みで設定してください。
筆者は設定しないためn
を選択しました。Would you like to enter a view-only password (y/n)? nVNCサーバー自動起動設定
VNCサーバーはRaspberry Piが再起動したりすると、VNCサーバーが終了してしまうので、自動起動するための設定をする必要があります。
VNCサーバーを自動起動するための起動スクリプトを作成します。$ cd /etc/init.d/ $ sudo vi vncbootvncbootの中身は以下の通りです。
ちなみに-geometry 1280x720
の部分でデスクトップの解像度を指定していますので、好みで調整します。vncboot#! /bin/sh ### BEGIN INIT INFO # Provides: vncboot # Required-Start: $remote_fs $syslog # Required-Stop: $remote_fs $syslog # Default-Start: 2 3 4 5 # Default-Stop: 0 1 6 # Short-Description: Start VNC Server at boot time # Description: Start VNC Server at boot time. ### END INIT INFO # /etc/init.d/vncboot USER=pi HOME=/home/pi export USER HOME case "$1" in start) echo "Starting VNC Server" #Insert your favoured settings for a VNC session su $USER -c '/usr/bin/vncserver :1 -geometry 1280x720 -depth 24' ;; stop) echo "Stopping VNC Server" su $USER -c '/usr/bin/vncserver -kill :1' ;; *) echo "Usage: /etc/init.d/vncboot {start|stop}" exit 1 ;; esac exit 0vncbootを作成したら実行権限を割り当て、自動起動させるためのシンボリックリンクを付与します。
$ sudo chmod 755 /etc/init.d/vncboot $ sudo update-rc.d vncboot defaults再起動し、VNCで接続ができるか確認します。
$ sudo shutdown -r 0VNC接続
VNCクライアントソフトを用いて、PCからリモートデスクトップする準備をします。
ここではVNC Viewerをインストールした接続方法を記述しています。VNC Viewer起動後、以下のような画面が表示されるので
Raspberry Piの固定IPアドレス:5901
と入力しアクセスします。
Unencrypted connection
が表示されますが、(フリーのVNCクライアントを使うと暗号化したコネクションは出来ないので)そのままContinue
で進みます。パスワードを要求されるのでVNCサーバーインストール時に設定したパスワードを入力し
OK
をクリックします。初回時は以下のような画面が表示されるので
Give access
をクリックします。すると、Raspberry Piへリモートデスクトップで接続することができます。
以上で、モニターやmicroHDMIがなくてもRaspberry Piのセットアップができた。
RaspberryPiを新たに触る人たちの助けになれば幸いです。
- 投稿日:2020-05-29T18:49:27+09:00
React Native for macOS で新しく追加されたファイル
React Native と React Native for macOS の差分
2020年5月19日、MicrosoftからReact Native for macOS公開についてブログでアナウンスがありました。
Announcing React Native for macOS and more · React Native for Windows + macOS
Microsoftは2019年5月7日に多くのコンポーネントをC++で書き直したReact Native for Windowsを公開しており、今回はmacOS用のネイティブライブラリなどが追加されています。
今回、本家FacebookのReact Nativeと比べてどのようなファイルがコミットされているかを調べてみました。
調査は2020年5月29日のmasterで行いました。
- https://github.com/facebook/react-native/tree/f438a6e8f60a5cd10b06f19bc5248f5805fbb739
- https://github.com/microsoft/react-native-macos/tree/9232ace99d095a793bddf00ffda3238cc7078820
トップディレクトリの差分
+ .ado + .appveyor + Folly + ReactApple + android-patches + danger - docs + double-conversion + follybuild + glog + jsc + metadata + processor + stubs/glog + v8-docker-build + website/server + flowconfig.macos + Brewfile + CHANGELOG.json + CODE_OF_CONDUCT.md + KeepingRecent.md - index.js - interface.js概要
トップディレクトリの主な差分は
- ライブラリの追加
- Microsoftの管理用と思われるファイル
の2つです。
1. ライブラリの追加
React Native for macOSには以下のライブラリが追加されてました。
ライブラリ名 開発チーム 概要 Folly C++ ライブラリ Infer annotations Java アノテーションライブラリ glog C++ ロギングライブラリ double-conversion C++ binary-decimal convertライブラリ 2. Microsoftの管理用と思われるファイル
ファイル / ディレクトリ 概要 .appveyor/config.yml OSにWindowsを使っていることを特徴としたCI、AppVeyorの設定ファイル ReactApple/ReactApple.nuspec .NET用パッケージNuGetのメタファイル android-patches "patches-droid-office-grouped" というディレクトリから推測すると、AndroidのOffice用のパッチファイルか。 metadata/repo.json リポジトリ管理用のjsonファイル。 docsList.js Websiteのドキュメント管理用? 補足: metadata/repo.json
{ "description": "Fork of facebook's react-native implementation. Include additional platform implementations for Mac, Win32 and UWP. And implementation of the JS bridge against Chakra.", "schema": { "office": "1.0.0" }, "deployedToProduction": true, "complianceTypes": [], "inventoryId": ["684c3345-709f-474d-9f83-726e63a64237"], "contacts": ["acoates@microsoft.com"] }"description": "Fork of facebook's react-native implementation. Include additional platform implementations for Mac, Win32 and UWP. And implementation of the JS bridge against Chakra."
ChakraはIEなどで使われていたJSエンジン。Microsoft EdgeはChromiumベースなのでV8なはず。WindowsのJSエンジンとしてのChakraと思われる。
その他追加されているファイル
ファイル / ディレクトリ 概要 danger/dangerfile.js GitHub拡張用のJSファイル。bots/dangerfile.js のバックアップ? jsc Appleが開発したJSエンジンであるJSC ( JavaScriptCore ) のヘッダーファイルたち。initial コミットから修正なし。 .ado ローカルにnpmレジストリを作成できる Verdaccio とCI関連のファイル Reactディレクトリ以下の差分
% diff -rq react-native/React/ react-native-macos/React/ | grep 'Only in react-native-macos' Only in react-native-macos/React/Base: RCTBridge+Cxx.h Only in react-native-macos/React/Base: RCTBridge+Cxx.mm Only in react-native-macos/React/Base: RCTPlatformDisplayLink.h Only in react-native-macos/React/Base: RCTUIKit.h Only in react-native-macos/React/Base: macOS Only in react-native-macos/React/CoreModules: RCTImageEditingManager.h Only in react-native-macos/React/CoreModules: RCTImageEditingManager.m Only in react-native-macos/React/CoreModules: RCTImageLoader.h Only in react-native-macos/React/CoreModules: RCTImageLoader.mm Only in react-native-macos/React/CoreModules: RCTImageStoreManager.h Only in react-native-macos/React/CoreModules: RCTImageStoreManager.m Only in react-native-macos/React/DevSupport: RCTDevLoadingView.h Only in react-native-macos/React/DevSupport: RCTDevLoadingView.m Only in react-native-macos/React/DevSupport: RCTDevMenu.h Only in react-native-macos/React/DevSupport: RCTDevMenu.m Only in react-native-macos/React/Modules: RCTAccessibilityManager.h Only in react-native-macos/React/Modules: RCTAccessibilityManager.m Only in react-native-macos/React/Modules: RCTAlertManager.h Only in react-native-macos/React/Modules: RCTAlertManager.m Only in react-native-macos/React/Modules: RCTAppState.h Only in react-native-macos/React/Modules: RCTAppState.m Only in react-native-macos/React/Modules: RCTAsyncLocalStorage.h Only in react-native-macos/React/Modules: RCTAsyncLocalStorage.m Only in react-native-macos/React/Modules: RCTClipboard.h Only in react-native-macos/React/Modules: RCTClipboard.m Only in react-native-macos/React/Modules: RCTDevSettings.h Only in react-native-macos/React/Modules: RCTDevSettings.mm Only in react-native-macos/React/Modules: RCTDeviceInfo.h Only in react-native-macos/React/Modules: RCTDeviceInfo.m Only in react-native-macos/React/Modules: RCTI18nManager.h Only in react-native-macos/React/Modules: RCTI18nManager.m Only in react-native-macos/React/Modules: RCTKeyboardObserver.h Only in react-native-macos/React/Modules: RCTKeyboardObserver.m Only in react-native-macos/React/Modules: RCTRedBox.h Only in react-native-macos/React/Modules: RCTRedBox.m Only in react-native-macos/React/Modules: RCTSourceCode.h Only in react-native-macos/React/Modules: RCTSourceCode.m Only in react-native-macos/React/Modules: RCTStatusBarManager.h Only in react-native-macos/React/Modules: RCTStatusBarManager.m Only in react-native-macos/React/Modules: RCTTVNavigationEventEmitter.h Only in react-native-macos/React/Modules: RCTTVNavigationEventEmitter.m Only in react-native-macos/React/Modules: RCTTiming.h Only in react-native-macos/React/Modules: RCTTiming.m Only in react-native-macos/React/Profiler: RCTFPSGraph.h Only in react-native-macos/React/Profiler: RCTFPSGraph.m Only in react-native-macos/React/Profiler: RCTPerfMonitor.m Only in react-native-macos/React/Views: RCTFontSmoothing.h Only in react-native-macos/React/Views: RCTModalManager.h Only in react-native-macos/React/Views: RCTModalManager.m Only in react-native-macos/React/Views: RCTProgressView.h Only in react-native-macos/React/Views: RCTProgressView.m Only in react-native-macos/React/Views: RCTRefreshControl.h Only in react-native-macos/React/Views: RCTRefreshControl.m Only in react-native-macos/React/Views: RCTRefreshControlManager.h Only in react-native-macos/React/Views: RCTRefreshControlManager.m概要
macOS用のネイティブライブラリ群が追加されてます。macOSプラットフォーム関連として React/Base/macOS ディレクトリが追加されました。
% ls React/Base/macOS RCTDynamicColor.h RCTDynamicColor.m RCTPlatform.m RCTPlatformDisplayLink.m RCTUIKit.m
RCTUIKit.m
React Native はUI描画のOSによる差分を吸収し、同じレイアウト構成(YogaによるFlexbox)を構築することが大きな特徴の一つです。
macOSのUIクラスであるUIKitについて、UIImage / NSImageを扱うために書かれたファイル。
NSImage *UIGraphicsGetImageFromCurrentImageContext(void) { NSImage *image = nil; NSGraphicsContext *graphicsContext = [NSGraphicsContext currentContext]; NSValue *sizeValue = objc_getAssociatedObject(graphicsContext, &RCTGraphicsContextSizeKey); if (sizeValue != nil) { CGImageRef cgImage = CGBitmapContextCreateImage([graphicsContext CGContext]); if (cgImage != NULL) { image = [[NSImage alloc] initWithCGImage:cgImage size:[sizeValue sizeValue]]; CFRelease(cgImage); } } return image; } CGFloat UIImageGetScale(NSImage *image) { if (image == nil) { return 0.0; } RCTAssert(image.representations.count == 1, @"The scale can only be derived if the image has one representation."); NSImageRep *imageRep = image.representations.firstObject; if (imageRep != nil) { NSSize imageSize = image.size; NSSize repSize = CGSizeMake(imageRep.pixelsWide, imageRep.pixelsHigh); return round(fmax(repSize.width / imageSize.width, repSize.height / imageSize.height)); } return 1.0; }React Native for macOS の歴史
年月 出来ごと 2019年3月6日 v0.0.1-microsoft.0がリリース 2019年5月7日 MicrosoftがReact Native for Windowsを公開 2020年5月19日 MicrosoftのReact Native BlogでReact Native for macOSをアナウンス
- 投稿日:2020-05-29T13:05:55+09:00
クリップボードの画像を出力するpngpasteコマンドとEmacsの連携 (macOS)
クリップボードにコピーした画像を出力したいシーンは多々ある。Preview使うとか方法はさまざまだが、Alfredとかターミナルとかから手軽に使うためにはコマンドになってると便利だ。そんなこんなでおすすめなのはpngpaste。インストール方法としてbrewもサポートしてる。
brew install pngpaste
クリップボードの画像を出力するpngpasteコマンドとEmacsの連携 (macOS) https://t.co/lj31DvncHi pic.twitter.com/DPXNTBB3hC
— ladicle (@Ladicle) May 29, 2020画像のドラック&ドロップ等、Emacsでは殆どのケースをorg-downloadで解決できるが、クリップボードの画像貼り付けはサポートされていない。
そこで、次のようにpngpaste
を呼び出す関数を定義して、C-M-y
あたりにバインドすると...Emacsのorg-modeでinline-imageを楽に挿入できる。(便利!(with-eval-after-load "org" (defun org-insert-clipboard-image () "Generate png file from a clipboard image and insert a link to current buffer." (interactive) (let* ((filename (concat (file-name-nondirectory (buffer-file-name)) "_image/" (format-time-string "%Y%m%d_%H%M%S") ".png"))) (unless (file-exists-p (file-name-directory filename)) (make-directory (file-name-directory filename))) (shell-command (concat "pngpaste " filename)) (if (file-exists-p filename) (insert (concat "[[file:" filename "]]"))) (org-display-inline-images))) (global-set-key (kbd "C-M-y") 'org-insert-clipboard-image))
- 投稿日:2020-05-29T11:23:00+09:00
ショートカットの学校(Mac編)
はじめに
Windows編( https://qiita.com/yoshi_yast/items/b3e4d2a310a5005e0352 )に続き、Mac編として、ショートカットをまとめておきたいと思います。普段はWindowsを使うことが多いので、自分の備忘録がメインとなります。
※下記のレベルは私見です。覚えたいもの優先して列挙しています。
幼稚園から高校まで
幼稚園
基礎の基礎。必須のショートカットだと思います。
キー 説明 command & A すべて選択 command & C コピー command & V 貼り付け command & X コピー&切り取り command & Z 操作を元に戻す command & S 上書き保存 command & F 検索 command & W 最前面のウィンドウを閉じる command & Q アプリを終了する command & D WindowsのDeleteキーに相当 command & Tab アプリやウィンドウを切り替える 小学校
ここまで知れば快適なMacライフを過ごせると思っています。
キー 説明 command & D 選択したファイルを複製する command & delete 対象ファイルをゴミ箱へ捨てる command & M 最前面のウィンドウを最小化する command & T 新しいタブを開く command & N 新規ウィンドウを開く command & ctrl & F フルスクリーン表示の使用 command & ctrl & Q コンピュータをロックする command & shift & 3 全体のスクリーンショットをファイルに保存 command & shift & 4 選択した範囲のスクリーンショットをファイルに保存 中学校
下記のショートカットを使っていると、ショートカット使っているなぁ自分で感じたりします。
キー 説明 Ctrl & F3 + Enter エクスプローラを開く Ctrl & F3 + 矢印で選択後 Enter Dockからアプリを起動する command & spaceバー spotlight検索フィールドの表示/非表示 command & カンマ (,) 最前面のアプリの環境設定を開く command & shift & N Finderで新しいフォルダを作成する F11 ディスクトップ表示(もう一度押すと元に戻る) 高校
個人的には、Nice to haveだと思います。
キー 説明 command & 1 Finder ウインドウの項目をアイコン形式で表示にする command & 2 Finder ウインドウの項目をリスト形式で表示にする command & 3 Finder ウインドウの項目をカラム形式で表示にする command & 4 Finder ウインドウの項目をギャラリー表示にする command & option & esc App を強制終了する command & option & D Dock の表示/非表示を切り替える command & option & L 「ダウンロード」フォルダを開く おまけ
ショートカットを使うならキーボードを自在に操らないといけないです。タイピング練習ソフト&サービスはたくさんありますが、タイピングクラブはとてもわかりやすく練習を進められるので、初心者にお勧め。
タイピングクラブ
参考URL
- Macキーボードショートカットキー https://support.apple.com/ja-jp/HT201236
- 投稿日:2020-05-29T02:46:03+09:00
unable to import django
vscode で unable to import djangoと言われた
解決の参考にしたサイトはこれ
Unable to import 'django.db'
Ctrl+Shift+P
を押しPython:Select Interpreter
を選択、その後pythonのバージョン選択を求められる。
自分はwhich python
で出力されたバージョンを選択しました。
-> Select Interpreter select the environment that starts with ./env or .\env run Ctrl+Shift+` to activate itshare improve this answer follow
- 投稿日:2020-05-29T02:19:47+09:00
Macデフォルトでインストールされているアプリを削除する
Mail.app
とかSiri.app
とか、要らないので削除。1. Macをリカバリーモードで再起動する
(もしくは再起動時に [Cmd] + [Option] + [R])
sudo nvram "recovery-boot-mode=unused" sudo reboot2. MacのSystem Integrity Protectionを無効にする
Utilities > Terminal
から実行# csrutil disable3. リカバリーモードを終了して、再起動
# nvram -d recovery-boot-mode # reboot4. Terminalから削除
$ sudo rm -rf /Applications/Mail.app