raspberry pi zeroを起動してみた
材料
Raspberry Pi Zero W - ヘッダー ハンダ付け済み - ラズベリー・パイ ゼロ W ワイヤレス
- メディア: Personal Computers
Amazonベーシック HDMIケーブル 0.9m (タイプAオス - ミニタイプCオス) ハイスピード
- メディア: エレクトロニクス
参考
Raspberry Pi OS (Raspbian)のインストール – 公式Imager対応 – Indoor Corgi
Pi/OS/Raspbian・Stretchの初期セットアップ手順 - ミニPC&シングルボードコンピュータ活用術
raspberry pi用SDカードインストーラーツール
Raspberry Pi OS – Raspberry Pi へアクセス
インストール
起動
「CHOOSE OS」を選択
OSを選択
書き込みdiskを選択
SDカードを選択
書き込み
↓
↓
うーん、遅い
セットアップ
接続
電源接続
キター
言語設定
よくわからんので一応日本語にする
パスワードを設定
スクリーン設定
なんか、画面の周りに枠があったらチェックすると良いらしい
wifi設定
ソフトウェアアップデート
しばらく待つ
再起動
設定
設定画面を開く
切り替え
再起動
IP確認
↓
% ssh pi@192.168.10.18 The authenticity of host '192.168.10.18 (192.168.10.18)' can't be established. ECDSA key fingerprint is SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Are you sure you want to continue connecting (yes/no/[fingerprint])? yes Warning: Permanently added '192.168.10.18' (ECDSA) to the list of known hosts. pi@192.168.10.18's password: Linux raspberrypi 5.10.17+ #1414 Fri Apr 30 13:16:27 BST 2021 armv6l The programs included with the Debian GNU/Linux system are free software; the exact distribution terms for each program are described in the individual files in /usr/share/doc/*/copyright. Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent permitted by applicable law. Last login: Sat May 22 08:14:40 2021 SSH is enabled and the default password for the 'pi' user has not been changed. This is a security risk - please login as the 'pi' user and type 'passwd' to set a new password. pi@raspberrypi:~
一旦はここまで
play frameworkをVSCodeで開発環境を整える
VSCodeでコードを書く
できなくはないはず、 ただJavaの開発環境とかの問題もあるから試す
javaの拡張機能を導入
拡張の初期設定
Java11をインストール
play2のプロジェクトを作成
前回と同じ
% cd % cd work/java/play2 % sbt new playframework/play-java-seed.g [info] welcome to sbt 1.5.1 (N/A Java 15.0.2) [info] loading global plugins from /Users/xxxx/.sbt/1.0/plugins [info] set current project to play2 (in build file:/Users/xxxx/work/java/play2/) [info] set current project to play2 (in build file:/Users/xxxx/work/java/play2/) This template generates a Play Java project name [play-java-seed]: app01 organization [com.example]: Template applied in /Users/xxxx/work/java/play2/./app01 %
ディレクトリ構成
% tree -L 1 app01 app01 ├── app ├── build.sbt ├── conf ├── project ├── public └── test
初回起動を行う
% cd app01 % sbt run
↓
VSCodeで開くと
原因としては
まあ、jarとかが連携されていないことが問題 以下に設定することで対応はできると思われるが、数が多いとめんどくさいのでやりたくない
一旦、eclipse形式に変換する
project/plugins.sbt
// The Play plugin
addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.8.8")
// Defines scaffolding (found under .g8 folder)
// http://www.foundweekends.org/giter8/scaffolding.html
// sbt "g8Scaffold form"
addSbtPlugin("org.foundweekends.giter8" % "sbt-giter8-scaffold" % "0.11.0")
// 追加
addSbtPlugin("com.typesafe.sbteclipse" % "sbteclipse-plugin" % "5.2.4")
eclipse用の形式に変換する
% sbt [app01] $ [app01] $ eclipse [info] About to create Eclipse project files for your project(s). [info] Successfully created Eclipse project files for project(s): [info] app01 [app01] $
VSCodeを開き直す
VSCodeのワークスペースに入れる
「ファイル」＞「フォルダをワークスペースに追加」
ワークスペースを保存する
{
"folders": [
{
"path": "."
}
],
"settings": {
"workbench.colorTheme": "Monokai Dimmed",
"files.exclude": {
"**/.classpath": false,
"**/.project": false,
"**/.settings": false,
"**/.factorypath": false
},
"java.home": "/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home",
"files.watcherExclude": {
"**/target": true
}
}
}
classpathに以下を追加
<classpathentry kind="lib" path="target/scala-2.13/classes"/>
※viewsのテンプレートを新規に作成しても参照ができずにエラーとなるため ※viewsのテンプレートは一度、画面を表示して再ビルドすることが必要
あとは色々いじってみる まあ、Intelij Ideaやeclipseの方がやりやすいかもしれんがwww
playframeworkを試す（helloworldのみ）
環境
インストール環境
Javaのみ
sbtをインストール
brew install sbt
↓
% sbt version [info] welcome to sbt 1.5.1 (N/A Java 15.0.2) [info] loading project definition from /Users/xxxx/project [info] set current project to shigeharu (in build file:/Users/shigeharu/) [info] 0.1.0-SNAPSHOT %
helloworldを取得して、実行
手順
wget https://example.lightbend.com/v1/download/play-samples-play-java-hello-world-tutorial -O play-java-helloworld.zip unzip play-java-helloworld.zip cd play-samples-play-java-hello-world-tutorial sbt run
↓
デフォルトのポートは9000のよう
ディレクトリ構成
. ├── LICENSE ├── NOTICE ├── README.md ├── app ├── build.sbt ├── conf ├── logs ├── project ├── public ├── sbt ├── sbt-dist ├── sbt.bat ├── scripts ├── target └── test
テンプレートを利用して、プロジェクトを作成
手順（テンプレートをwebから拾ってくるため、多少時間がかかります）
mkdir sample1 cd sample1 sbt new playframework/play-java-seed.g8 cd sample1 cd sample1 sbt run
↓
うーん、寂しい
ディレクトリ構成
.
├── project
│ └── target
├── sample1
│ ├── app
│ ├── build.sbt
│ ├── conf
│ ├── logs
│ ├── project
│ ├── public
│ ├── target
│ └── test
└── target
├── global-logging
└── task-temp-directory
とりあえず、ここまで
golangのv1.16の開発環境を準備する
いつの間にか
v.1.16まで上がっていた、なんか以前とパッケージの扱い？ とか変わっているので少し見直し
なんかgo modulesとかいうのがあるらしい
当時は各モジュールの最新バージョンが適用されやすくなっていて 新しい環境でビルドした際にコンパイルエラーとなっていたことがある。 多分、revelとか・・・
そのため、バージョンを固定にして対応していた このgo modulesを使用するとバージョンを各プロジェクト毎に管理できるらしく、 ちょっと楽になるらしい
参考情報
ローカル環境のみでの Go Modules と自作パッケージ - Qiita
WindowsにGo言語開発環境をインストールする - Qiita
goの再インストールから
インストール
% brew install go % go version go version go1.16.3 darwin/amd64 %
GOPATH設定
srcは管理されなくなったような気がするが、pkgとbinは使われているみたい
GOPATH用準備
% mkdir -p $HOME/work/go/{src,pkg,bin}
% export GOPATH=$HOME/work/go
サンプルプロジェクト
ディレクトリ作成
% mkdir -p $HOME/work/golang/sample1 % cd $HOME/work/golang/sample1
go modules初期化
% go mod init sample1 go: creating new go.mod: module sample1 %
※モジュール名はローカルならプロジェクト名で良い、githubmなどに公開する場合はgithub/xxxxとかにしないといけない
go.modの中身
% cat go.mod module sample1 go 1.16 %
なんかパッケージを入れてみる
% go get github.com/labstack/echo/v4 go: downloading github.com/labstack/echo v1.4.4 go: downloading github.com/labstack/echo/v4 v4.2.2 go: downloading github.com/labstack/echo v3.3.10+incompatible go: downloading github.com/labstack/gommon v0.3.0 go: downloading golang.org/x/crypto v0.0.0-20200820211705-5c72a883971a go: downloading golang.org/x/net v0.0.0-20200822124328-c89045814202 go: downloading github.com/mattn/go-colorable v0.1.7 go: downloading github.com/mattn/go-isatty v0.0.12 go: downloading github.com/valyala/fasttemplate v1.2.1 go: downloading golang.org/x/sys v0.0.0-20200826173525-f9321e4c35a6 go: downloading github.com/valyala/bytebufferpool v1.0.0 go: downloading golang.org/x/text v0.3.3 go get: added github.com/labstack/echo/v4 v4.2.2 %
↓
% cat go.mod module sample1 go 1.16 require github.com/labstack/echo/v4 v4.2.2 // indirect %
直接、go.modに編集しても良いらしい
サンプルコード
sample1.go
package main
import (
"fmt"
echo "github.com/labstack/echo/v4"
"sample1/src/car"
)
func main() {
fmt.Println("aaa")
fmt.Println(echo.Version)
a := new(car.Car)
a.Init()
a.Msg()
}
src/car/car.go
package car
import "fmt"
type Car struct {
name string
}
func (p *Car) Msg() {
fmt.Println(p.name)
}
func (p *Car) Init() {
p.name = "くるま"
}
以前はローカル環境の場合は相対パスでも動いていた気がしますが、 go modulesの場合はNGになったかもしれない
ディレクトリ構成
% tree . ├── go.mod ├── go.sum ├── sample1.go ├── src ├ └── car ├ └── car.go └── workspace.code-workspace
おまけ
vscode設定（setting.json）
"settings": {
"go.gopath": "/Users/xxxx/work/go", ⇦ GOPATHの場所
"go.formatOnSave": true,
"go.goroot": "/usr/local/Cellar/go/1.16.3/libexec" ⇦ GOROOTの場所
}
初回にデバッグ用ツールが入っていない場合はインストールするので定義した方が良い goparthを定義しないとデフォルトのGOPATHの場所になるので注意
react-native-configで環境変数を参照する3（android編）
前回
今回やること
前回って環境変数を読むのにENVFILEとか設定していましたよね？ あれだけではビルド時のアプリ名とか各環境のアプリ名などの調整が困難なので その辺の設定周り
補足
flavorとか利用しますが、厳密に理解はしていないため、 今回はこの設定でできたようなものとなります
参考
ReactNative製アプリのリリースTips（Android編） | スペースマーケットブログ
ReactNativeのAndroid側でFlavorで環境を切り分ける - Qiita
ReactNative(Android)でビルドバリアント毎にapk出力(署名つき) - Qiita
ReactNative 0.60.4、react-native-config を使って環境構築、リリースまで１ - LOCAL-C BLOG
【ReactNative】Androidリリースビルド時のメモ(2019/10/28 追記あり) - Qiita
react-nativeで初めてのnativeアプリリリース(android編)│tech1000+
【ReactNative】Androidリリースをイチからメモ - メモメモメモ
flavorを利用します
android/app/build.gradleへの設定１：defaultConfigにbuild_config_packageの設定を追加
defaultConfig {
applicationId "com.sampleconfig01"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
// 追加
resValue "string", "build_config_package", "com.sampleconfig01"
}
android/app/build.gradleへの設定２：signingConfigsにrelease用の設定を追加
signingConfigs {
debug {
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
}
// 任意のキーストアファイルを利用
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}
android/app/build.gradleへの設定３：buildTypesにrelease用の設定を追加
buildTypes {
debug {
signingConfig signingConfigs.debug
}
release {
// Caution! In production, you need to generate your own keystore file.
// see https://reactnative.dev/docs/signed-apk-android.
signingConfig signingConfigs.release
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
android/app/build.gradleへの設定４：flavorの設定を追加
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// https://developer.android.com/studio/build/configure-apk-splits.html
// Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
defaultConfig.versionCode * 1000 + versionCodes.get(abi)
}
}
}
// flavor追加
flavorDimensions "default"
productFlavors {
dev {
versionName = android.defaultConfig.versionName + '-dev'
applicationIdSuffix ".dev"
}
stg {
versionName = android.defaultConfig.versionName + '-staging'
applicationIdSuffix ".stg"
}
prd {
versionName = android.defaultConfig.versionName
}
}
}
dependencies {
・
・
・
android/gradle.propertiesにrelease用のキーストアの設定を追加
今回はセキュリティ的な面も含めてデバッグ時のものをコピー
# releaseキーストア設定 MYAPP_RELEASE_STORE_FILE=release.keystore MYAPP_RELEASE_KEY_ALIAS=androiddebugkey MYAPP_RELEASE_STORE_PASSWORD=android MYAPP_RELEASE_KEY_PASSWORD=android
アプリのアイコン名などを環境別に作成
android/app/src配下のディレクトリに以下の構成を追加
※mainやdebugなどはそのままで削除しなくて良い
android/app/src
├── dev
│ └── res
│ └── values
│ └── strings.xml
├── prd
│ └── res
│ └── values
│ └── strings.xml
└── stg
└── res
└── values
└── strings.xml
android/app/src/dev/res/values/strings.xml
<resources>
<string name="app_name">アプリ開発</string>
</resources>
android/app/src/stg/res/values/strings.xml
<resources>
<string name="app_name">アプリ受入</string>
</resources>
android/app/src/prd/res/values/strings.xml
<resources>
<string name="app_name">アプリ本番</string>
</resources>
とりあえず設定は完了
実行
開発用
npx react-native run-android --variant=DevDebug --appIdSuffix dev
検証用
npx react-native run-android --variant=StgDebug --appIdSuffix stg
本番用
npx react-native run-android --variant=PrdDebug
↓
本番用ビルド
デバッグ時はデバッグアプリとして動作するため、実行時のマシンとデバッグ監視サーバとかが動作し、 また、スマホから実行する際もhttp系で証明書なしでも通信が可能となる
assetsディレクトリ準備
作成されていない場合は作成しておく
android/app/src/main/assets
バンドル作成
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest --assets-dest android/app/build/intermediates/res/merged/release/
アプリ作成
cd android ./gradlew assembleDev ./gradlew assembleStg ./gradlew assemblePrd
作成場所
% tree app/build/outputs/apk/
app/build/outputs/apk/
├── debug
│ ├── app-debug.apk
│ └── output-metadata.json
├── dev
│ ├── debug
│ │ ├── app-dev-debug.apk
│ │ └── output-metadata.json
│ └── release
│ ├── app-dev-release.apk
│ └── output-metadata.json
├── prd
│ └── debug
│ ├── app-prd-debug.apk
│ └── output-metadata.json
└── stg
└── debug
├── app-stg-debug.apk
└── output-metadata.json
アプリインストール
adb [-s デバイスID] install app/build/outputs/apk/dev/release/app-dev-release.apk
※apkファイルは環境に合わせて読み替える ※デバイスID未指定の場合は有効なデバイス全てにインストールする
package.json改修
"scripts": {
"android": "react-native run-android --variant=DevDebug --appIdSuffix dev",
"android_dev": "react-native run-android --variant=DevDebug --appIdSuffix dev",
"android_stg": "react-native run-android --variant=StgDebug --appIdSuffix stg",
"android_prd": "react-native run-android --variant=PrdDebug",
"android_bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest --assets-dest android/app/build/intermediates/res/merged/release/",
"android_release": "yarn android_bundle && cd android && ./gradlew assembleDev && ./gradlew assembleStg && ./gradlew assemblePrd",
"ios": "react-native run-ios",
"ios_dev": "echo '.env' > /tmp/envfile && yarn ios",
"ios_stg": "echo '.env.staging' > /tmp/envfile && yarn ios",
"ios_prd": "echo '.env.production' > /tmp/envfile && yarn ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
react-native-configで環境変数を参照する2
前回の続き
今回やること
環境別のファイルを作成して、それぞれのファイルで読み込むようにする
環境別ファイルを作成する
.env
MODE=dev APP_NAME=TEST VERSION=0.0.1
.env.staging
MODE=staging APP_NAME=STAGING VERSION=0.0.1
.env.production
MODE=production APP_NAME=RELEASE VERSION=0.0.1
簡単な実行方法
android
シェル変数の「ENVFILE」に環境変数ファイルを設定することで対応可能 またはENVFILEを環境変数名（export）化しても良い
ENVFILE=.env yarn android または ENVFILE=.env.staging yarn android または ENVFILE=.env.production yarn android
ios
「/tmp/envfile」に環境変数ファイルを設定することで対応可能 またはENVFILEを環境変数名（export）化しても良い
echo '.env' > /tmp/envfile && yarn ios または echo '.env.staging' > /tmp/envfile && yarn ios または echo '.env.production' > /tmp/envfile && yarn ios
※iosを実機で動作させる場合はyarnコマンドではなく、Xcodeで動作させることになるため、別途対応が必要
package.json設定
簡略化したコマンドを作成
"scripts": {
"android": "react-native run-android",
"android_dev": "ENVFILE=.env yarn android",
"android_stg": "ENVFILE=.env.staging yarn android",
"android_prd": "ENVFILE=.env.production yarn android",
"ios": "react-native run-ios",
"ios_dev": "echo '.env' > /tmp/envfile && yarn ios",
"ios_stg": "echo '.env.staging' > /tmp/envfile && yarn ios",
"ios_prd": "echo '.env.production' > /tmp/envfile && yarn ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
補足
androidやiosのリリース用時のセットアップ方法などはちょっと複雑なので次回以降にする androidの場合はbuildTypesとかproductFlavorsとかいじることになりそう iosはXCode主体で対応する
react-native-configで環境変数を参照する
react-native-config
１つのプロジェクトで開発、検証、本番などを行う際、 それぞれ別のプロジェクトで運用するのはたいへんなため、環境変数などで APIの向き先などを調整する
今回やること
react-native-configで環境変数を参照するところまで
参考情報
GitHub - luggit/react-native-config: Bring some 12 factor love to your mobile apps!
GitHub - Clintal/react-native-config at ios-manual-linking
react-nativeで環境ごとに定数を切り替える(react-native-config) | I am mitsuruog
ReactNativeConfig使ってみた&使い方 - Qiita
React Nativeにおける環境別ビルド設定 | エンジニアブログ | 株式会社スクーラー
手順
プロジェクトを作成
npx react-native init sampleConfig01 cd sampleConfig01
react-native-configを導入
yarn add react-native-config
pod install（iosのみ実施）
npx pod-install
手動設定（android）
/android/settings.gradleにreact-native-configを追加
rootProject.name = 'sampleConfig01'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
// react-native-config用追加
include ':react-native-config'
project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
/android/app/build.gradleにreact-native-configを追加
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+" // From node_modules
// react-native-condig用追加
implementation project(':react-native-config')
・
・
・
}
/android/app/build.gradleの先頭から２行目あたりに以下を追加
project.ext.envConfigFiles = [
debug: ".env",
dev: ".env.dev",
stg: ".env.staging",
prd: ".env.production",
anycustombuildlowercase: ".env",
]
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
手動設定（ios）
workspaceを開く
node_modules配下のreact-native-configのプロジェクトをドラッグして参照を紐付ける
一旦、ビルドを行う
プロジェクトのpod配下にコンパイルされたreact-native-configのモジュールを紐付け
再度、ビルドを行う
.envファイルを作成
.env
APP_NAME=TEST VERSION=0.0.1
react-nativeへ実装
App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import {Text, View} from 'react-native';
import Config from 'react-native-config';
const App = () => {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>APP_NAME: {Config.APP_NAME}</Text>
<Text>VERSION: {Config.VERSION}</Text>
</View>
);
};
export default App;
結果
補足
自動リンクではファイルからデータを取得できなかったため、手動で設定して取得するように対応 環境別の指定方法とかは今度かく
