GeminiCLIでウェブサイトを作成する方法について

 あまプロでは授業でAIを使う事が有ります。
先日、無料プランでGeminiCLIの環境を構築してウェブサイトを作成したので、あメログ。

先ず、LXDでGeminiCLI用のコンテナを作成します。
ホスト（パソコン）に直接GeminiCLIをインストールしても良ぇけど、アンインストール時にあっちこっち削除して回るのが面倒なので、コンテナ内にインストールします。

LXDが未インストールの場合は

#インストール
sudo apt install lxd
#初期化
lxd init

を実行します。

GeminiCLIの利用には無料プランであってもGoogleアカウントが要りますので、作成しておいて下さい。
アカウントの作成方法は…Geminiに聞こう（最近は携帯番号が要るみたいです）。 

LXDでコンテナを作成します。

# イメージはお好みで何となくアルパインの最新版
lxc init images:alpine/edge container-name
#コンテナが作成されている事を確認
lxc list
#コンテナの5173ポートをホストの5173へ転送
sudo lxc config device add container-name http proxy listen=tcp:0.0.0.0:5173 connect=tcp:127.0.0.1:5173 bind=host
#転送設定確認
lxc config device show container-name
#コンテナ起動
lxc start container-name
#コンテナにログイン
lxc exec container-name ash
#アップデート
apk -U upgrade
#nodeとnvmをインストール
apk add nodejs nvm
#バージョン確認
node --version
npm --version
#GeminiCLIインストール
npm install -g @google/gemini-cli
#GeminiCLI起動
gemini
#初回起動時に認証を求められるので、1. Login with Googleを選択します
#選択するとめっちゃ長いURLが表示されますのでそれをコピーして、ホストのブラウザでアクセスします。
#（複数アカウントを持っている場合）どのアカウントを使います？許可します？と訊かれるので、許可します。
#ブラウザにちょっと長い認証コードが表示されるので、コピーしてコンテナのターミナルに貼り付けて、認証完了です
#完了するとこんな感じで表示されます。

表示は英語ですけど、日本語も通じます。
日本語でプロンプト（指示とか質問とか）を入力すると、作業や回答を返してくれます。
例えば

おしゃれなプログラミング教室のウェブサイトを作成して下さい。

と入力すると、カレントディレクトリにウェブサイトを生成してくれます。
生成作業中にセキュリティ上の確認が要る場合は、都度回答する必要があります（基本、日本語で訊いてきます）。
例えばウェブサイトを作成する際にBootstrapやReactやViteを使って良いか？等です。

取り敢えず、全部の確認に許可で答えると、２〜３分程で下記のファイル群が生成されました。 

.
├── index.html
├── src
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

サイトをビルドする為にnpmコマンドを実行する必要があるのですが、GeminiCLIはコマンドを実行できなかったので、GeminiCLIを終了します（これは設定で回避できるかも）。
GeminiCLIを終了するには、Ctrl+Dを２回押し（または/quit）です。
終了時にどれだけGeminiCLIを利用したかが表示されます。
無料プランには限りが有りますので、ご注意を。

GeminiCLIを終了後、手動で下記コマンドを実行します。
というか、GeminiCLIが「実行できなかったんで、自分で下記を実行して」と出力しています。

#必要なパッケージインストール
npm install
#ビルドしてウェブサーバ起動　外部からのアクセスを許可
npm run dev -- --host 0.0.0.0

では最後にホストのブラウザで確認します。 
http://localhost:5173/

ちゃんと生成されてますね。
レスポンシブデザイン（スマホ表示）も問題なさそうです。

以上、GeminiCLIでウェブサイトを作成する方法でした。

最後に使用したコンテナを削除して終了（継続して使用する場合は不要）です。

#コンテナ停止
lxc stop container-name
#コンテナ削除
lxc delete container-name

Ubuntuでモニタをミラーリング・キャスティングする方法について

あまプロではパソコンのOSにUbuntuを使っています。

UbuntuはオープンソースのOSで、誰でも自由に使う事ができます。

先日、さんとしょに設置されてますAladdinのプロジェクタにUbuntu22.04を接続する際に、けっこうハマりましたのであメログ。

先ず、プロジェクタに無線接続（ミラーリングとかキャスティングとか呼ばれてます）するにはMiracast方式を用います。
UbuntuではGNOMENetworkDisplaysというパッケージがありまして、こちらを使います。
只、こちらのパッケージは絶賛開発中でして、未だUbuntuの標準のリポジトリには取り込まれていません。
自力で数多有るパッケージの依存関係を解決して、ビルドして、インストールできない事もないんですが、結構難しいです…自信がある方は是非どうぞ。
なので、今回はFlatpakというUbuntu標準のパッケージには未だ取り入れられてへんけど、先進的なパッケージを使える仕組みを利用します。

０．プロジェクタとUbuntuを同じネットワーク（恐らくWi-Fi）に接続します。
１．先ずはUbuntu側の設定を行います。
　　Flatpakをインストールします。
　　手順は公式サイトに掲載されています。
　　ターミナルで
　　sudo apt install flatpak
　　sudo apt install gnome-software-plugin-flatpak
　　flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
　　flatpakとそのプラグインをインストールして、aptのリポジトリ一覧にflatpakリポジトリを追加します。
２．設定を反映する為に再起動します。
３．再起動後に、FlatpakでNetworkDisplaysをインストールします。
　　ターミナルで
　　flatpak install flathub org.gnome.NetworkDisplays
４．NetworkDisplaysを起動します。
　　ターミナルで
　　flatpak run org.gnome.NetworkDisplays


　　Network Displaysのアプリが起動します。
５．共有ボタンを押下します。

　　接続可能なデバイスが一覧表示されます。
　　Ubuntu側の設定は一旦これで終わりで、次にプロジェクタ側の設定に移ります。
６．プロジェクタでMiracastの接続を行います。ここではAladdinの例ですが、他のプロジェクタでも殆ど同じやと考えます。
　　Aladdinの場合は、ホームメニューでシステム環境設定を押下します。

７．その他の設定を押下します。

８．Miracastを押下します。

９．Aladdinが接続待機になります。

１０．数秒待つと、Ubuntu側の接続可能なビデオデバイスにAladdinが表示されます。

１１．Aladdinを押下します。

　　接続中になります。
１２．数秒待つとAladdin側に接続への招待が表示されますので、同意するを押下します。

１３．数秒待つと、接続され配信中になります。

１４．以上で映像はプロジェクタから出力される筈です。
　　　偶にエラーになる場合がありますので、何度か試してみて下さい。
　　　致命的なエラーの場合はターミナルにログが出力されますので、検索してみると何か解決方法が見付かるかもしれません。

１５．NetworkDisplaysの初期設定では音声の出力がパソコンになっているので、プロジェクタから出力する様に切り替えます。
　　システム設定のサウンドでNetwork-Displaysを選択します。

これで、Ubuntuの映像と音声がプロジェクタから出力される様になりました。
多分、他のディストリビューションでも応用できると考えますので是非ご活用を〜

Scratchで使用しているブロックの数を数える方法について

 あまプロではScratchでプログラミングを教えています。

ScratchはMITが開発したビジュアルプログラミング言語で、どなたでも無料で利用可能です。
１つの機能がブロックで表現されており、視覚的直感的にプログラミングを行う事ができ、あまプロでも重宝しています。

スクラッチはプログラムの単位を「作品」と呼んでいるのですが、ふと１つの作品内で幾らブロックを使用しているのかが気になりました。
Scratchでは簡単に調べる方法は提供されてへん様でしたので、あメログ。

先ず、スタートすると音が鳴るだけの簡単な作品を作ってみました。

ステージに２ブロック

続けて、ねこに３ブロック

この作品をメニューのファイル > コンピュータに保存する、で保存します。

すると、作品名.sb3というファイルがダウンロードできます。

 この*.sb3はzip圧縮されているので、unzipなどで解凍します。

すると、下記の様にproject*.json、*svg、*.wavが生成されます。

 *.svgがコスチュームで、*.wavが音になります。
ブロックについてはproject.jsonに記述されています。

エディタなどでproject.jsonを開いてみると、JSON形式で色々と載っています…。
これだと何の事か解りませんが、よくよく見てみると、opcodeというキーがブロックを表してそうです。

opcodeと仮定して、opcodeの数を数えてみましょう。

grepコマンドとwcコマンドで数える事ができます。

ステージ数１＋スプライト数１＋ステージのブロック数２＋ねこのブロック数３＝７
なので、合ってそうです。

以上、スクラッチでブロック数を数える方法でした。

美味しい珈琲屋さんを見付けたら☕

あまぷろの仕事ではないですが、個人的にプログラミング教室間の移動はチャリ🚲なので、色々な地元のお店に遭遇する機会があります。
そして、美味しい珈琲屋さんを見付けたら、必ず地図に載せる様にしています。
そんな珈琲と地図好きには堪らない記事になります。

地図のご紹介

地図といえば、皆さんOpenStreetMapをお使いの事と考えます。
大抵の商用の地図サービスは自由にスクリーンショットをウェブにアップロードできへんので、共有せぇへんよね？あれもこれも有名所を色々探してみたけど、どれもあかんと明記されています。
オープンストリートマップは©OpenStreetMap contributorsのクレジットさえ明記すれば、無料で無断でシェアし放題なんで、良く使わせてもろてます。
地図職人（マッパー）に感謝。
只この地図、美味しい珈琲屋さんが載ってへん場合が多いです。商用地図に載ってへん場合もあるけど、頻度が段違い。
何故ならOSMは地図職人達が地道に描いた地図データの集合体プロジェクトやからです。
なもんで、自由に見れるし、共有できるし、描けるし、変えれるし…ほんま自由なオープンデータの地図になります🗺

地図の描き方

ＯＫ👍地図の事は解った。
ほな、どないして描くねんと言いますと。
こちらからユーザ登録して、左上の編集ボタンをクリックするだけです。

スマホは画面が小さ過ぎるので無理です。タブレットは遣った事ないけど、多分できる筈。
上記編集ボタンをクリックすると、編集モードとなります。
では一例として、ここに美味しい珈琲屋さんが在ります。

地図に載ってないので、載せましょう。

現地に行ったのであれば、ついでに写真を撮りましょう。
（何でも良いのですが）私はいつもKartaViewという写真共有サービスを利用しています。
スマホアプリが在りますので、是非インストールしてご利用下さい。
撮った写真はこちらになります。

ちなみに美味しい珈琲はこちら☕

写真を撮ってアップロードして、暫く（２〜３分）待つと、OSMの編集画面から表示できる様になります。
初期設定ではKartaViewの写真は表示されませんので、サイドメニューの「写真の重ね合わせ」で「KartaView」にチェックを付けて下さい。

地図上に青いピンが表示されますので、クリックすると左下に先程アップした画像が表示されます。
写真を撮った場所やカメラの向きも判るので便利です。
次にポイント（ノード）をクリックします

追加したい地図上の場所をクリックします。
次にそのポイントが何を表すかを選択します。種類が多いので、喫茶店やカフェで検索すると良いです。

これだけでも構へんのですが、店名などの他の情報（タグ）があれば追記します。

詳しくはwikiをご参照下さい。
今回は14のタグを記入してみました。元ネタは許可を頂いたお店の名刺などになります。

残念ながら、現在のOSMのタグでは珈琲の抽出方法を表すタグがありません。サイフォン式なのか、ドリップ式なのか、フレンチプレス式なのか、インスタントなのか… が地図に載らないという意味です。
しかし、タグは提案する事ができ、議論の上、採用されれば堂々と載せる事ができます。かなり上級者向けになりまずか、興味がある方は挑戦してみて下さい。
brew=dripとかbrew=siphonとかbrew=frenchpressとか載せれる日が来るかもしれません。

 では、保存しましょう。右上の保存ボタンをクリックして

何か適当な文章を入力して下さい。

コメントは無しでも構いませんが、「伊丹のミネラルムールを追加」など解り易い文章にするのが一般的です。

最後にアップロードボタンをクリックすると、早ければ数分後に地図に反映されます。
せっかちな方はブラウザのスーパーリロード（ Ctrl + Shift + R）を行って下さい。

お目出度う御座います。これで新たな珈琲屋さんが地図に載りました。

色々な楽しみ方

如何でしたでしょうか？
この様にして地元の魅力的なお店を地図に載せて楽しむ事ができます。
他にも未開の地に道路や建物を追加したり

overpass turboで市内の喫茶店を検索してみたり。
（遣った事ないけど）位置ゲーで遊んでみたり。
ネットにアップしたり印刷して配ってみたり…などなど自由に楽しめますので、是非美味しい珈琲片手に楽しんでみて下さい。

 あまプロではIRISを用いたシステム開発を行う事が有ります。
IRISの開発ではまったんであメログ。

IRISのSQLで当日日付のYYMMDD形式の文字列を取得するにはCONVERT( )とNOW( )（またはCURRENT_TIMESTAMP）を使う

CONVERT( CHAR, NOW( ), 12)
231204

YYYYMMDD形式の場合は

CONVERT( CHAR, NOW( ), 112)
20231204

 

ちなににTO_CHAR( )で

TO_CHAR( NOW( ), 'YYYYMMDD')

でもできるが

TO_CHAR( NOW( ), 'YYMMDD')

はできへん…

なもんで、統一したいならCONVERT( )

LibreOfficeで良く行う操作をマクロで自動的に行う方法について

 あまプロではLibreOfficeのマクロ( LibreOfficeBasic）をお教えする事があります。
LibreOfficeBasicの記事は少なくて検索しても出でこない場合が多いのであメログ。

 何らかの表で、月ごとにシートを作成して管理するというのはお仕事でも多いと考えます。
例えば支出一覧とか出勤簿などです。

良く有るシート

この良く有るシートを毎月右クリックでコピーしてシート名を翌月に変えてたら…結構大変です。
それだけなら未だ良いですが、シート内に月日のセルがあれば、そちらも毎月更新しなければならず…相当大変です。
そんな時は、LibreOfficeの数式機能とマクロ機能を使って楽をしましょう。

まず、シート内の月日ですが、毎月１日, ２日, ３日, ４日...と入力するのは大変です。
この場合、先頭の１日のみ値を入力して、残りは数式にします。

数式で左のセル＋１にする

例えば１日がB2のセルで２日がC2のセルの場合は=B2+1とします。
それだけでC列は２日になります。
Ｄ列Ｅ列にもコピーすると３日４日になります。
ちなみにコピーはセルの右下にマウスカーソルを載せて、マウスカーソルが＋の形に変わった状態でドラッグアンドドロップすると連続コピーできて便利です。

数式を使って当月の表は簡単に作れました。
しかし、このシートをコピーしても同じシート（の別名）ができるだけで、来月のシートになりません。
そこで、マクロ（LibreOfficeBasic）を使います。

まず、LibreOfficeでマクロの記録機能を有効化します。
メニューのツール > オプションのLibreOffice > 詳細で「マクロの記録を有効にする（限定的）」にチェックを入れます。

オプションで設定します

次にメニューのツール > マクロ > マクロの記録を押下してマクロを記録します。
小さな「マクロの記録」ダイアログが表示されます。

マクロの記録中にはこれが表示される

この状態で、シートを右クリックして「シートの移動またはコピー」を押下します。

翌月のシートを作成したいので、恐らく末尾に挿入で良いと考えます。
そしてコピーボタンを押下すると、当月のシート名に_2が付いた翌月のシートが作成されます。
これでシートのコピーができました。
次に記録の終了ボタンを押下します。

すると「BASICマクロ」というダイアログが表示されますので、新規モジュールボタンを押下します。
すると「新しいモジュール」ダイアログが表示されますので、ＯＫボタンを押下します。

モジュールにはMainというサブルーチンが自動的に作成されますので、この状態で保存ボタンを押下します。

上書きを尋ねられますので、はいボタンを押下します。
これで、シートのコピーの操作をマクロとして記録できました。

では続きまして、シート名の変更作業もマクロに記録しましょう。
先程と同じくマクロの記録を開始して、シート名を右クリックして名前を変更します。

ここでは「5年9月_2」のシート名を「5年10月」に変更します。
シート名を変更したら、記録の終了を押下して、先程と同じく次はModule2にマクロを保存します。
これで、シートのコピーのマクロと、シート名の変更のマクロが記録されました。

保存したマクロを確認してみましょう。
メニューのツール > マクロ > マクロの編集を押下して、LibreOfficeBasicのIDEを起動します。

IDEが表示されます

左側のオブジェクトカタログのツリーにModule1とModule2があり、タブルクリックで選択すると、LibreOfficeBasicのコードが表示されます。
コメントや空行などが入っていますが、正味シートのコピーもシート名の変更も10行程のコードになります。

では次にこの記録されたLibreOfficeBasicのコードを応用して、

1. 当月のシートをコピーして翌月のシートを作成する
2. シート名を「当月_2」から「来月」に変更する（例えば当月が「5年9月」の場合「5年10月」）
3. 起点となる１日の月日を「当月１日」から「来月１日」に変更する （例えば当月１日が「2023/09/01」の場合「2023/10/01」）

の処理を自動的に行うマクロを作成してみましょう。

IDEのメニューのツール > モジュールの選択を押下して「Basicマクロ管理」ダイアログを表示します。

次に表のファイルのStandardを選択して、新規作成ボタンを押下します。

「新しいモジュール」ダイアログが表示されますので、ＯＫボタンを押下します。
Module3のSub Main〜End Subの間に、Module1とModule2のSub Main〜End Subの間をコピペします。
コピペしただけでは変数名の重複によるコンパイルエラーが発生しますので、不要な変数定義はコメントアウトや削除またはredimに変えて下さい。

次にシート名を変更している箇所を

args1(0).Value = "5年10月"

から

dim odsSheet As Object: odsSheet = ThisComponent.CurrentController.ActiveSheet
dim nextMonth As Integer: nextMonth = CInt( Mid( odsSheet.Name, InStr( odsSheet.Name, "年") + 1, InStr( odsSheet.Name, "月") - 3)) + 1
args1(0).Value = Mid( odsSheet.Name, 1, InStr( odsSheet.Name, "年")) & nextMonth & "月"

に変更します。
こちらはシート名の月の部分を加算して来月にしています。
当然12月に加算すると13月になってしまうのですが、年毎に表を作るという前提で省略します。

次に下記のコードを追加します。

ThisComponent.CurrentController.ActiveSheet.getCellByPosition( 1, 1).FormulaLocal = "=DATE( "& YEAR( NOW) &", " & nextMonth &", 1)"

こちらはB2セル（getCellByPosition( 1, 1)）に、コピー作成年の来月の１日を数式で指定してます。
日付の数式を用いる場合はFormulaLocalを指定します。
Formulaを用いると生成された数式で予期せぬエラーが発生します。

ちなみにLibreOfficeBasicで文字列はダブルクォート"で括ります。
文字列内でダブルクォートを指定したい場合は""でエスケープします。
例えば

Dim s As String: s = "=CELL( ""filename"")"

などです。

さて、これでModule3のMainサブルーチンが完成しました。
コード全体は以下の様になった筈です。

コメントや空行などありますが、正味20行程度のコードになります。
コードが完成しましたら、IDEのメニューの実行 > コンパイルを行うを押下して、コンパイルエラーがない事を確認して下さい。
エラーが有ればエラーが表示され、エラーが無ければ何も表示されません。

このマクロはメニューから実行させる事が可能ですが、毎回メニューを開くのは面倒です。
そこで、ボタンを追加し、ボタンクリック時にマクロを実行する様に設定します。
メニューの挿入 > フォームコントロール > ボタンを押下して、適当な大きさのボタンを挿入します。
ボタンを右クリックして「コントロールのプロパティ」を押下して「属性」ダイアログを表示します。

全般タブのタイトルに適当な名前を設定します。
次にイベントタブの実行時の…ボタンを押下します。

「アクションの割り当て」ダイアログが表示されますので、マクロボタンを押下します。

「マクロセレクター」ダイアログが表示されますので、Module3のMainサブルーチンを選択して、ＯＫボタンを押下します。

割り当てられますので、ＯＫボタンを押下します。

これでボタンにマクロの割り当てが完了しました。

割り当てたマクロを実行してみましょう。
メニューのツール > フォーム > デザインモードのチェックを外して、デザインモードを終了します。これでボタンの押下が可能になります。

ボタンをクリックすると

見事、来月のシートが作成されて、シート名も加算され、月日も来月1日から始まっています。

サンプルのodsファイルはGithubに上げております。
是非ご参考に楽しいLibreOffice生活をお楽しみ下さい。