Alpine Linuxのapkで旧バージョンパッケージをインストール

DockerやWindowsのWSLなど使っていると軽量なLinuxを使いたくなります。その代表格となるのはやはりAlpine Linuxではないでしょうか。ただ個人的にはパッケージマネージャーであるapkに慣れていないため使い方が分からなくなります。

今回は以前書いたエントリーでScratchの独自ブロックの開発環境を作成する際にNode.jsのバージョンが最新のLTSであるバージョン18系では動作できず、1つ前のLTSバージョンである16系でしか動かないという現象があり、その設定の時に迷ってしまった特定のバージョンのアプリのインストールについてメモをしておきます。システムによっては固定したバージョン以外では動かないものもありますし、軽量なLinux環境にGitやビルドツールを入れるのが面倒だったり、イメージの肥大化を避けたいこともあるかと思いますのでそんなときに使えるかなと思います。

【参考（Node.jsのバージョンを下げる必要があった例）】

uepon.hatenadiary.com

方法論

UbuntuやDebianで使用されているaptではバージョン指定したインストールも可能ですが、apkでも同様なことができます。

しかしながら、単にバージョン指定を行っても、Alpine Linuxのcurrentバージョンのパッケージが選択されるという癖があります。単純ではありません。例えば、Node.jsのバージョンを16と指定しても、Alpine Linuxのcurrentバージョンのパッケージでは18となっているため、指定を行ってもバージョン18系がインストールされるということになります。

では、どうするかというと3つの方法があります。

過去のアーカイブからapkパッケージをダウンロードして、ローカルストレージからインストールを行う。
apkが参照するリポジトリ情報（URL）を編集して過去のバージョンのリポジトリを参照可能にする。
コマンドラインからリポジトリ先を指定してインストールを行う。

どちらにしても過去のアーカイブからどのバージョンが含まれているかを調べるといった作業が必要な点が少し面倒です。リポジトリ先は以下のリンクから探すことになるでしょう。

http://dl-cdn.alpinelinux.org/alpine/

こちらのバージョン以下の階層に（例：/alpine/v3.17/main/x86_64/）各アーキテクチャ用のパッケージがまとまっているのでディレクトリの階層の行ったり来たりする必要はありますが、確実に探せると思います。

では、それぞれを見てみようと思います。

方法1

wgetやcurlを使用して該当するパスからファイルを取得し、ローカル環境に保存。その後、apkコマンドに--allow-untrustedオプションをつけてインストールを行います。

# wget https://dl-cdn.alpinelinux.org/alpine/v3.16/main/x86_64/nodejs-16.19.1-r0.apk #ファイルの取得例、OSのデフォルトではwgetもcurlも無いのでインストール必須 
# apk add --no-cache --allow-untrusted nodejs-16.19.1-r0.apk

【参照】 superuser.com

方法２

apkが参照するリポジトリは/etc/apk/repositoriesになります。このファイルを編集することになります。 /etc/apk/repositoriesを編集するしてからインストールを行います。

# cat /etc/apk/repositories
# http://dl-cdn.alpinelinux.org/alpine/v3.4/main #コメント化
# http://dl-cdn.alpinelinux.org/alpine/v3.4/community #コメント化
http://dl-cdn.alpinelinux.org/alpine/v3.16/main #参照されるように編集

# apk update
# apk add --no-cache nodejs~=16

方法3

パッケージファイルのあるURLがわかるのであれば、--repositoryオプションをつけてURL指定すると指定が可能です。ワンライナーで記載できるため、このやり方が一番スマートかも。

下記の例ではNode.jsはバージョン16でインストールを行っています。

# apk add --no-cache --repository http://dl-cdn.alpinelinux.org/alpine/v3.16/main nodejs~=16

おわりに

あまり馴染みのないAlpine Linuxのパッケージシステムapkですが、基本的には他のパッケージシステムと同様のことはできるようにはなっていると思います。このメモがなにかの参考になれば。

2023-03-13

Scratchでオリジナルのブロックを開発する（１）

Windows node.js コンピュータ開発 JavaScript scratch

前回のエントリではscratch-guiというリポジトリを使用してScrach3をWindows11のNode.jsの環境で動作させてみるという試みでした。

uepon.hatenadiary.com

最終的にはScrath3のオリジナルブロックを作成するというのが目的なのですが、そのままではまだオリジナルブロックを作成することはできません。実際にはscratch-guiとscratch-vmというリポジトリを組み合わせることが必要になります。

以降では、オリジナルブロックのことをExtensionと呼ぶことにします。

まだ、理解がそこまでできていないので今回はその前段として他の方が作られ、公開されているリポジトリ環境を使用してExtensionを作るための理解を深めようと思います。内容を理解しながらとなるので、間違っている場合には参考元をご確認いただければと思います。

【今回参考にした内容】 blog.champierre.com

【さらに大本の参考にした内容（こちらは次回以降で参照）】 qiita.com

拡張機能テストができるScratch開発環境

参考元の情報をみると、

Scratch のフォーラムを見ていたら、3.0の拡張機能にあたるExtensionのスクリプトを簡単に試せるバージョンが公開されていたので、3.0の Extension を試してみました。

【フォーラムの内容】

scratch.mit.edu

こちらはオリジナルで開発環境を公開されている形になるので、こちらで理解を深めていきます。（sheeptesterさん公開ありがとうございます）このようオリジナルのScratch開発環境も、自分で環境を整備した後に公開までできるようになるようです（これは楽しみです）

では、以下のリンクへアクセスしてみます。

sheeptester.github.io

すると少し画面上部が異なるScratchの画面が表示されます。

画面上部を拡大するとロゴが違っていますね！

こちらを使用していきます。

なお、この情報はScratch3.0のアンオフィシャルな情報なので、試す場合は自己責任でお願いします。

あとで使用するので画面を最小化しておきましょう。これでScratch側の準備はできました。

Extentionの素材準備

`Extension`のスクリプト(JavaScript)

今回の開発環境で動作するExtensionはWebサーバ上にあるJavaScriptを動作させる形を取っています。そこでExtension用のソースコードファイルtest.jsを作成します。このExtensionはブラウザのデベロッパツールのコンソール上にログにhelloという文字列を表示する処理を行います。

test.js

class Test {

  constructor() {}

  getInfo() { // 拡張機能の各種情報
    return {
      id: 'test',
      name: 'Test', // 拡張機能の名前
      blocks: [ // 各ブロックの定義
        {
          opcode: 'hello', // このブロックが実行されると、クラス内のhelloというメソッドが呼ばれることを意味しています
          blockType: Scratch.BlockType.COMMAND,　// 「10歩動かす」のような通常の命令ブロック
          text: 'hello' // ブロックに表示されるテキスト
        }
      ]
    }
  }

  hello() {
    console.log('hello'); // console log に hello と出力
  }
}

Scratch.extensions.register(new Test());

あとはこのファイルをhttp経由でアクセスできるようにWebサーバを準備する必要があります。このWebサーバはローカル環境にあればいいのでNode.jsやPythonなどのワンライナー系のWebサーバを立ち上げてアクセスできればよいでしょう。

ローカルのWebサーバの起動

折角Node.jsがインストールされているのでNode.jsを使います。Node.jsの場合にはワンライナーのWebサーバをインストールを行い、CLI環境で以下の様に実行することで起動できます。パスのこともあるので先程作成したtest.jsファイルのあるパスで実行するとわかりやすくなるでしょう。

注）Windowの場合にはhttp-serverでは起動せずhttp-server.cmdやhttp-server.ps1で動作します。http-server.cmdはPowerShellでも動作するのでこちらのほうがおすすめかもしれません。

ワンライナーのWebサーバのインストール

> npm install -g http-server

Webサーバーのインストール（Windows以外）

> http-server

Webサーバーのインストール（Windowsの場合）

> http-server.cmd

以前は80ポートで起動していたのですが、最近では8080ポートがデフォルトでListenするようになっているのでファイルへのアクセスのリンクはhttp://localhost:8080/test.jsとなります。（参照ページとは異なります）

起動後にはWindowsのファイアウォールの設定が出てくるので設定をしておきましょう。

Scratchの拡張機能の設定

ローカルにWebサーバの起動ができたら次は拡張機能を追加します。先程ブラウザで開いたScratchの画面のパレットの中にある左下のボタンをクリックすると拡張機能の追加画面に進みます。

拡張機能を選択する画面が表示されたら一番最初にある【？】のアイコンのついた【Choose an extension】をクリックすると

アクセス先の設定のダイアログが表示されます。

この入力値は先程のWebサーバを使ってhttp://localhost:8080/test.jsを入力して【OK】ボタンをクリックします。

これで設定は終了です。設定後は、パレットの中に新しく【Test】のグループができます。この名前などは先程のExtensionのスクリプト(JavaScript)に記載されたものが表示されます。

設定したブロックを実行してみる

ここまでで設定が完了しました。あとはこれを実行していきます。先程追加したExtensionはブラウザのコンソールにログとしてHelloを出力するものです。

では、Webブラウザの【開発者ツール】を【F12キー】（Chrome系）または【Ctrl＋Shift+I】起動します。マウス操作の場合には以下の様に選択してください。以下の操作ではChromeベースのEdgeを使用しています。

【開発者ツール】が画面右側に表示されたら、上部のタブで【コンソール】を選択します。

コンソールを開いた画面

後は、実行して結果を確認します。以下のようなブロックを作成して、実行すると

コンソールにhelloの文字列が表示されます。

出力の末尾にはファイル名が表示されていますが、test.jsとなっているので設定したファイルが実行されたことがわかります。

ここまでできてしまえば、あとはJavaScriptで記載されたものは問題なく動作できそうです。

getInfo()メソッドで返されるJSONデータでExtentionの見た目、引数、処理先のメソッドの名前を指定する事ができそうです。もう少し研究の余地がありそうですが、とりあえずオリジナルのExtensionを作ることができるようになりました。

まとめ

簡単な方法でもオリジナルExtention（ブロック）を作る体験ができました。基本的には似たようなことをするわけですが、環境の設定は行う必要があります。そこさえ終われば、基本的な考え方は変わらないと思います。今後はもう少し今回のJavaScriptファイルの編集をしてどんな事ができるかと試してみたいと思います。

参考情報

【今回参考にした内容】 blog.champierre.com

【さらに大本の参考にした内容（こちらは次回以降で参照）】 qiita.com

2023-03-04

Scratchをローカルで動作させる

node.js コンピュータ開発 scratch Windows

Scratchは基本的にはWeb経由やWindowsストアにあるローカルアプリを使用することで使用するのが一般的です。

アプリ版Scratch

ですが、カスタムのブロックなどを開発したいというときには、この使用用途ではこのような環境を使用するのは難しいかと思います。そこで、今回はGitHubに公開されているソースコードからScratchを起動させる事ができます。ということでまず今回はGitHubに公開されたscratch-guiを使用してローカル環境にScratchを起動させてみようと思います。

とはいえ、現在使用しているPCでやるのは色々な開発環境もあるため素の状態から始めたほうがいいかなと思います。

ということで今回は以前紹介したWindows Sandboxを使用して素の状態から開始をしてみようと思います。

WindowsSandboxについて【参考】

uepon.hatenadiary.com

Windows SandBoxの環境設定（事前のインストール作業）

Windows Sandboxは全くの素の状態（ネットワーク接続まではできています）なので、少しだけ開発環境の準備をします。

必要になるのは以下のものでしょうか。

VisualStudioCode（厳密にはいらない）
Node.js
Git

これらをWindows Sandbox上にインストールしておきます。Windowsでなければこのあたり全く不要かも… それぞれ以下からダウンロードしてインストールを行います。

VisualStudioCode

code.visualstudio.com

Node.js

nodejs.org

Git

git-scm.com

下記のファイルをダウンロードしてインストールしておきました。

ターミナルでバージョンを確認して以下のようになっています。

scratch-guiのインストール

開発環境準備ができたらscratch-guiをインストールします。

github.com

単にインストールを行うだけをするのであれば以下で良いのですが

> npm install https://github.com/LLK/scratch-gui.git

今後開発するのであれば以下で実行してインストールします。 ※公式サイトのGitのコマンドには--depth 1が入っていませんが、最新のリポジトリだけで良いと思いますので追加しておきます。むしろ入れないとものすごく時間がかかります。

You may want to add --depth=1 to the git clone command because there are some large files in the git repository history.

> cd 【インストールパス】
> git clone  --depth 1 https://github.com/LLK/scratch-gui.git
> cd scratch-gui
> npm install

これでインストールは完了します。

scratch-guiの実行

今回使用しているscratch-guiはリポジトリ名にはguiと含まれているのですが実際にはサーバープロセスになるので起動によってブラウザが立ち上がってくることはありません。ブラウザを別途起動してURLを開く必要があります。Windows Sandbox内の環境であればhttp://localhost:8601を開くことになります。

サーバープロセスは以下のように起動します。

> npm start

ですが、起動すると以下のようなエラーが発生し起動ができません。Node.jsでエラーが出ているような雰囲気なのでバージョンを変えて（バージョンダウンして）再度試してみます。※このとき、Firewallの設定が出た場合には、【アクセスを許可】ボタンをクリックして選択してください。（２回目以降は表示されません）

現在はNode.js v18.14.2がインストールされているので、これの一つ前のLTSバージョン（Node.js 16.19.1）に変更します。以下のURLから検索するとNode.jsの過去リリースを使用する事ができます。

nodejs.org

最新のNode.jsのLTSをアンインストールして、バージョンダウンを行います。

Node.jsのバージョンダウンが終了したら再度以下を実行して起動を行います。

> npm start

今回はエラーは発生せずにコンソール画面に以下の表示がでていれば起動成功です。

 ｢wdm｣: Compiled successfully.

※起動時にFirewallの設定が出た場合には、【アクセスを許可】ボタンをクリックして選択してください。（２回目以降は表示されません）

あとはブラウザを開いて以下にアクセスをします。

http://localhost:8601

また、Windows Sandbox側のIPアドレスにポート指定を行うことでWindows側からもこの開発環境へアクセスすることができます。

IPアドレスはipconfigコマンドで調べて

IPアドレスとポートを指定することでブラウザ上で起動が行われます。

おわりに

これで、ネットワークを使用しないにScratchのローカル環境を作成することができました。あとは、サーバ側の更新を行うことでオリジナルブロックを作成することができるので、その連携についても後日記載してみようと思います。

そちらについては今回のscratch-guiも使用していますが、サーバープロセス側を別のリポジトリ（scratch-vm）とリンクすることで使用できるというものです。

今回はNode.jsのバージョンによるエラーが発生してしまったためすんなりと行かなかったという事はありましたが、まあ、これくらいであれば…😂

2023-02-25

Windows11でワイヤレスディスプレイの接続機能を有効にする

Windows コンピュータ

以前、Windows10を2台使用して1台をワイヤレス接続でリモートディスプレイにしていました。

とても便利な機能だったのですが、Windows11でも同じことをしようと思ったのですが、接続を待機するアプリがクリーンインストールしたWindows11では存在していないようでした。もしや機能がなくなったのかと思ったのですが、実は現在のWindows10のアップデートでは標準の機能ではなくなり、オプション機能扱いになってしまったようです。そして、このオプション機能扱いはWindows11でも同様になっているようです。そのため、デフォルト状態のWindows11には接続アプリとそれに付随するアプリも存在していません。

そこで、今回はオプション機能となっている同機能のワイヤレスディスプレイアプリを設定アプリから有効化、インストールしてみます。

手順

スタート画面からWindowsの設定アプリを起動します。

左側のペインから【アプリ】を選択します。そして【アプリ】の右側のメインのペインから【オプション機能】を選択してクリックします。

続く画面で【オプション機能を追加する】の項目内にある【機能を表示】ボタンクリックします。

すると、以下のようなダイアログが表示されるので【オプション機能を追加する】のリストを下にスクロールしていき、

【ワイヤレスディスプレイ】の項目にチェックを入れて【次へ】ボタンをクリックします。

【インストールされるもの】のに【ワイヤレスディスプレイ】が表示された状態で【インストール】ボタンをクリックします。

暫く待つとインストール処理が実行されて

ワイヤレスディスプレイの接続アプリが利用できるようになります。このときWindows11から再起動は要求されませんでしたが、機能を使用することはできました。

あとはこのアプリをスタートから選択して起動すればワイヤレスディスプレイの接続待ちの状態となります。

あとはもう一台のPCから【田＋Ｋ】を押下して、キャストするPCの名前を選択すれば、無事に画面をリモート表示させる事ができるようになります。

おわりに

個人的には便利な機能だなと思っていたのですが、まさかのデフォルト機能からオプション機能への降格。アプリもインストールしないと行けないとは思っても見ませんでした。逆に接続する側はデフォルト機能のままですので、プロジェクタなどへの接続には特に作業がいらないです。

2023-02-13

iPhone、iPadの画面をWindowsデスクトップ上に表示する

Windows iPad コンピュータ

前回のエントリでAndroidの画面をWindowsのデスクトップに表示させるという内容でやっていましたが、その後いろいろ教えていただいた情報でiPhone、iPadに関してもチャレンジしてみます💪

iOS系とMacOSとの連携に関してはデフォルトの機能でなんとかなってしまうので苦労は全くないと思いますが、Windowsになると途端にハードル上がるというのはツライです😥

そういう意味ではAndroidのscrcpyは秀逸な出来だと思います。

【参考】

uepon.hatenadiary.com

今回は調査内容も含めて3つのアプリを使ってみました。いちいち読むのも面倒かもしれないので、自分の評価も書いちゃいます。

DouWan（個人評価：😫）
LonelyScreen（個人評価：😀）
LetsView（個人評価：🥰）

実は自分はビジネス系でiPadをWindowsデスクトップに表示する必要があるので有料アプリも使用しています。アプリはApowerMirrorです。割と安定しているのですが、たまに上手くつながらない点や有線接続の認識がおかしい（Windowsとの相性か？）点があるので、できればいいものがあればなあと感じています。

www.apowersoft.jp

【参考エントリ】

uepon.hatenadiary.com

なぜ？有線？と思われるかもしれませんが、Apple製品は画面を別デバイスに飛ばすときにAirPlayを使用することが多いのですが、その時にローカルLAN接続を求めるものがあります。その状況ではiPadなどからインターネット接続が切り離されてしまうため、使えない機能が発生するため有線接続をしているという理由になります。インターネット接続が可能なLANの下での使用が可能であれば有線接続でなくても問題ないとは思います。

uepon日々の備忘録

日々メモ

Alpine Linuxのapkで旧バージョンパッケージをインストール

方法論

方法1

方法２

方法3

おわりに

Scratchでオリジナルのブロックを開発する（１）

拡張機能テストができるScratch開発環境

Extentionの素材準備

`Extension`のスクリプト(JavaScript)

ローカルのWebサーバの起動

Scratchの拡張機能の設定

設定したブロックを実行してみる

まとめ

参考情報

Scratchをローカルで動作させる

Windows SandBoxの環境設定（事前のインストール作業）

scratch-guiのインストール

scratch-guiの実行

おわりに

Windows11でワイヤレスディスプレイの接続機能を有効にする

手順

おわりに

iPhone、iPadの画面をWindowsデスクトップ上に表示する

方法論

方法1

方法２

方法3

おわりに

拡張機能テストができるScratch開発環境

Extentionの素材準備

Extensionのスクリプト(JavaScript)

ローカルのWebサーバの起動

Scratchの拡張機能の設定

設定したブロックを実行してみる

まとめ

参考情報

Windows SandBoxの環境設定（事前のインストール作業）

scratch-guiのインストール

scratch-guiの実行

おわりに

手順

おわりに

`Extension`のスクリプト(JavaScript)