ソースに絡まるエスカルゴ

貧弱プログラマの外部記憶装置です。

【VSCode】Visual Studio CodeでPlantUMLを使う

VSCode Windows 環境構築

　過去にVSCodeで図形を書くための拡張機能としてDraw.ioの記事を書きました。

　このDraw.ioでもシーケンス図やクラス図など書けなくはないですが、基本的には自分で図形を書いていく形になります。
　この他にドキュメントを書くような形で図形を書くことができるPlantUMLというのがあります。

　今回はそのPlantUMLをVSCodeで使うための手順の備忘録となります。

　基本的には参考資料に挙げているページ様の内容の通りなので、詳しくはそちらを参照してください。


　では、始めます。


１：Java JDKのインストール
　Plant UMLをプレビューするためにJavaが必要なのでJava JDKをインストールします。

　以下のMicrosoftのページを開きます。

　ページを少しスクロールするとJDKのダウンロードファイルのリンク一覧が出てくるので、環境に合ったものを選択してダウンロードします。自分の場合はWindows11の64bitなので赤枠の部分のインストーラ形式のものを選択しました。

　ダウンロードしたインストーラファイルをダブルクリックで起動させます。

　インストーラが起動するので「次へ」をクリックします。

　契約関係の文面が出てくるので「使用許諾契約書に同意します」にチェックを入れて「次へ」をクリックします。

　インストール先の選択画面になります。特に変える必要はないと思うのでデフォルトのまま「次へ」をクリックします。

　インストールするかの確認画面が出てくるので「インストール」をクリックします。

　インストールが終わると以下の画面になるので「完了」をクリックして終了させます。

　これでJava JDKのインストールは終わりです。


２：Plant UMLのVSCode拡張のインストール
　VSCodeを起動させ、左側メニューにある「拡張機能」アイコンをクリックして検索欄に「plantuml」と入力して出てきた一番上の「インストール」をクリックします。

　インストールが完了すると以下のような画面が表示されます。アンインストールのボタンが出ていればインストールは完了しています。


３：実際に試してみる
　新規ファイルとして「test.pu」と作成して、以下の内容を記述して保存します。

@startuml
title シーケンス図
アリス -> ボブ: リクエスト
ボブ --> アリス: レスポンス
@enduml

　そのファイルをVSCodeで開いて「Alt + Dキー」を押下すると、右側にUMLとしてプレビューすることができます。

　プレビュー画像が表示されない場合はJavaが入っていないので、１の手順でJava JDKをインストールしてください。


　以上がVSCodeでPlantUMLを使う方法になります。

　ドキュメントのように記述していく形で差分も取りやすいので、Gitなどで管理するのであればかなり有用だと思います。


・参考資料

【M+FONTS】M+FONTSをインストールしてみる

Windows 環境構築

　今までフォントというものを意識してなかったのですが、新しいフリーフォントをインストールしてみようと思い立って「M+FONTS」を入れてみました。

　今回はその備忘録になります。


　では、始めます。


０：M+FONTSについて
　フリーで使用でき、商用利用や再配布も許可されているフォントです。

　詳しくは以下のM+FONTSの公式サイトを確認してください。


１：フォントファイルのダウンロードとインストール
　ファイル自体のダウンロードはやっているそうですが、開発のメインはGitHubに移っているようなので今回はそちらからダウンロードとインストールを行います。

　以下のM+FONTSのGitHubページを開きます。

　右上にある「Code」をクリックして出てきた「Download ZIP」をクリックしてzipファイルをダウンロードします。

　ダウンロードされたzipを解凍します。

　解凍した中にある「fonts」→「otf」フォルダの中にあるフォントファイルを「Ctrl + A」キーで全選択します。

　その状態で右クリックし「すべてのユーザーに対してインストール」を選択するとインストールが始まります。現在のユーザのみにインストールしたい場合は「インストール」の方を選択します。

　インストール中に出てくるダイアログが閉じたらインストールは完了です。


２：フォントの確認
　ちゃんとフォントがインストールできているかを確認します。

　フォント選択と文字入力ができるものであればなんでも良いですが、今回は「ペイント3D」で確認してみます。

　ペイント3Dを起動させ、上部メニューの「テキスト」を選択した状態で「フォントの選択」プルダウンをクリックします。

　選択できるフォント一覧が出てくるので、その中に「M PLUS ～」と書かれたフォントが追加されていればフォントのインストールができています。


　以上がM+FONTSをインストール方法になります。

　今回はotfフォルダに入っているotf形式のフォントをインストールしましたが、これとは別にttf形式のフォントも入っています。
　ちょっと調べた限りではotf形式のフォントの方が互換性や種類が多いとのことだったので、otf形式の方をインストールしています。

　DavinciResolveなどで動画編集をする際にフォントを意識することもあるかもしれないので、記事にしてみた次第です。


・参考資料

【KiCad/Library Loader】Library Loaderを使ってKiCadに電子部品を追加する

KiCad 電子回路 環境構築

　KiCadの勉強をしていたところ、必要な電子部品がデフォルトのライブラリになくちょっと困っていました。
　検索していると自作をする方法が出てきたのですが、できる限り楽をしたいと探したところ、KiCadで読み込むための電子部品データがすでに色々あることがわかりました。

　そしてそれらのデータはLibrary Loaderというのを使えば楽にKiCadに取り込めることがわかったので、今回はその備忘録になります。


　では、始めます。


１：Library Loaderのインストール
　以下のページを開きます。

　赤枠で囲った「Download」ボタンをクリックしてzipファイルをダウンロードします。

　ダウンロードしたzipファイルを解凍すると以下のように2つのフォルダができますが「Library Loader」の方のフォルダを開きます。

　Library Loaderフォルダ内にあるインストーラをダブルクリックして起動します(画像のバージョンとは違っている場合があります)。

　インストーラを起動すると以下のような画面が表示されるので「Next」をクリックします。基本的にデフォルトのまま進んで問題ありません。

　インストール先と使用ユーザの選択画面になるので、特に変更する必要がない場合はデフォルトのままで「Next」をクリックします。

　インストールが始まったら終わるまで待ちます。

　インストールが終了すると以下のような表示になるので「Close」をクリックしてインストーラを終了させます。

　デスクトップに以下のアイコンが追加されていればインストール完了です。


２：Library Loader初回起動時のアカウント登録と設定
　デスクトップのショートカットアイコンをダブルクリックして「Library Loader」を起動させます。

　初回起動時には以下のようにSamacSysのアカウント登録を求められます。このアカウント登録を行わないとLibrary Loaderが使えないので、各項目を入力して登録を行ってください。

　すでにSamacSysアカウントを持っている場合は「Login/Reset Password」のタブから各項目を入力してログインします。

　アカウント登録後、Library Loader画面の「Downloads Folder」の「Browse」をクリックして、電子部品のファイルが置かれたときに自動的に追加してくれるフォルダを指定します。基本的にはデフォルトのダウンロードフォルダを指定するのが楽かと思います。

「Your ECAD Tool」のプルダウンから使用するソフトを設定します。今回はKiCadなので「KiCad EDA」を選択します。

　次にLibrary Loaderの「Settings」ボタンをクリックします。

　以下の画面が表示されるので「Browse」ボタンを押して、Library Loaderの部品追加ファイルの保存先を指定し「OK」をクリックします。

　これでLibrary Loader側の設定は完了です。


３：KiCadでのライブラリ読み込み設定
　２まで終わったらKiCadにシンボルとフットプリントの追加設定をします。

　KiCadを起動させて「シンボルエディター」を開きます。

　シンボルエディター画面が立ち上がったら「設定」→「シンボルライブラリーを管理」をクリックします。

　シンボルライブラリー画面の下の方にある「テーブルに既存ライブラリーを追加」のアイコンをクリックします。

　２で設定した保存フォルダにできた「SamacSys_Parts.lib」を選択して「OK」をクリックします。

　追加されていることを確認し「OK」をクリックします。

　これでシンボルの追加設定が終わったので、シンボルエディターを閉じます。

　次に「フットプリントエディター」を開きます。

　フットプリントエディター画面が立ち上がったら「設定」→「フットプリントライブラリーを管理」をクリックします。

　フットプリントライブラリー画面の下の方にあるフォルダのアイコンをクリックします。

　２で設定した保存フォルダにできた「SamacSys_Parts.pretty」を選択して「OK」をクリックします。

　追加されていることを確認し「OK」をクリックします。

　これでフットプリントの追加設定も終了です。


４：Library Loaderを使って電子部品を追加する
　ようやく設定がすべて終わったので、実際にLibrary Loaderを使って電子部品を追加してみます。

　まずはLibrary Loaderを起動させます。

　Library Loaderのメニューにある「Search for Part(Change)」をクリックし、出てきたダイアログから探したいサイトを選択して「OK」をクリックします。今回はデフォルトの「SamacSys」を選択しています。

　するとブラウザが開いて以下のパーツ検索のサイトが表示されます。

　なんでも良いのですが、今回は秋月にあるTVDP01-G73BB with Black capの部品を検索してみます。

　ヒットしたので商品名をクリックして詳細ページを開きます。

　型番や形が合っているかを確認して「Download ECAD Model」をクリックします。

　サインインしてない場合は以下のページに飛ぶので、右上の「Sign In」をクリックします。

　２のLibrary Loader初回起動時に作成したSamacSysアカウントのメールアドレスとパスワードを入力し、「Sign In」をクリックします。

　サインインできない場合は新規にアカウント登録を行ってください。

　Library Loaderが起動した状態でECAD Modelのzipファイルのダウンロードが終了するとパーツが追加されます。

　ちなみにすでにパーツが登録されている場合は、以下のように上書きするかどうか尋ねられるでどちらにするかを選択します。

　あとはKiCadを開けばシンボルとフットプリントが追加され、使えるようになっています。


　以上がLibrary Loaderを使ってKiCadに電子部品を追加する方法になります。

　設定は面倒ですが、すでに作られているモデルをダウンロードするだけで楽に追加できるので何かと便利だと思います。
　また今回はSamacSysで部品を検索しましたが、他にも以下のサイトでもアカウント登録すれば電子部品のECAD Modelをダウンロードできるようなので、アカウントを作っておくと良いかもしれません。


・参考資料

【GAS/Googleスプレッドシート】Googleドライブのフォルダ内のファイル一覧とファイルリンク、最終更新日時を取得する

GoogleAppsScript Googleスプレッドシート javascript プログラミング

　Googleドライブのとあるフォルダでファイルを管理しようと思っていたのですが、煩雑になりがちなのでフォルダ内のファイル一覧のスプレッドシートが欲しいと思うようになってきました。
　その一覧のファイルでファイルへのリンクと最終更新日時とかをGoogle Apps Script（GAS）の処理で簡単に見れるようにしたいと色々調べて試行錯誤したところ、実現できたので今回はその備忘録になります。


　では、始めます。


１：新規にスプレッドシートを作成する
　どこでも良いので、Googleドライブ上で右クリックして「Googleスプレッドシート」をクリックして作成します。

　何でもよいですが、ここでは新規作成したスプレッドシートの名を「ファイル一覧取得」として開き、以下のように表のひな形を作成します。各表の中身は空にしておきます。

　最終更新日時の列のデータ部分は以下のように「日時」の表示にしておきます。

　これでGASを実行して入力する表ができました。


２：Drive API ドキュメントのサービスを追加する
　表のひな形を作ったら、スプレッドシートのメニューにある「拡張機能」→「Apps Script」をクリックします。

　無題のプロジェクトのGASの画面が開くので、何でもよいですがここではプロジェクト名を「ファイル一覧取得」として「名前を変更」をクリックします。

　次に今回必要なサービスを追加します。左側メニューの「サービス」と書かれている横にある「＋」をクリックします。

　サービスを追加の画面が表示されるので「Drive API ドキュメント」を選択した状態で「追加」ボタンをクリックします。

　サービスの下に「Drive」が表示されていれば、サービスの追加はできています。


３：GASを記述する
　サービスを追加できたら、左側メニューにある「コード.gs」をクリックし、以下のスクリプトを記述します。

// 定数
const FOLDER_URL_ROW = 1; // フォルダURL行番号
const FOLDER_URL_COL = 2; // フォルダURL列番号
const START_ROW = 4;      // データ入力開始行番号
const START_COL = 1;      // データ入力開始列番号
const NO_FILE_CELL = -1;  // ファイル名が見つからなかった時の行番号


// スプレッドシートを開いたときに実行される関数
function onOpen() {
  // ファイルをOpenした時にメニューを追加
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var menuEntries = [];

  menuEntries.push({name: "ファイル一覧取得", functionName: "getFilesInfo"});

  // メニューを追加
  ss.addMenu("追加メニュー", menuEntries);
}

// 構造体(ファイル名, リンクURL, 最終更新日時)
function fileInfo(name, link, lastUpdate) {
  this.name = name;
  this.link = link;
  this.lastUpdate = lastUpdate;
}

// ファイル情報を取得して対象シートに記入する関数
function getFilesInfo() {
  let fileNames = [];
  let fileLinks = [];
  let fileLastUpdate = [];

  // シートを取得
  let ss = SpreadsheetApp.getActiveSpreadsheet();
  let activeSheet = ss.getActiveSheet();

  // フォルダのリンクからフォルダのIDを取得
  let folderLink = activeSheet.getRange(FOLDER_URL_ROW, FOLDER_URL_COL).getValues()[0][0];
  let split = folderLink.split('/');
  let folderId = split[split.length-1];

  // ファイル一覧を取得(降順)
  let files = DriveApp.getFolderById(folderId).getFiles();

  // ファイル名、URL、最終更新日を取得
  while (files.hasNext()) {
    let file = files.next();
    fileNames.push(file.getName());
    fileLinks.push(file.getUrl());
    fileLastUpdate.push(file.getLastUpdated());
  }

  // ファイルの個数を取得
  const size = fileNames.length;

  // 行を追加して履歴をコピー
  activeSheet.insertColumnAfter(START_COL+2);
  const copyRange = activeSheet.getRange(START_ROW-1, START_COL+2, activeSheet.getMaxRows(), 1);
  const destination = activeSheet.getRange(START_ROW-1, START_COL+3, activeSheet.getMaxRows(), 1);
  copyRange.copyTo(destination, SpreadsheetApp.CopyPasteType.PASTE_NORMAL);
  activeSheet.getRange(START_ROW-1, START_COL+3).setValue("ファイル更新履歴");

  // 最終行を取得(対象行の最終行から上に検索して最初に出てきたデータ行)
  let lastRow = activeSheet.getRange(activeSheet.getMaxRows(), START_COL).getNextDataCell(SpreadsheetApp.Direction.UP).getRow();

  // セルに記入
  for (let i = size-1; i >= 0; i--) {
    let targetRow = getFileNameRow(activeSheet, lastRow, fileNames[i]);
    if (targetRow == NO_FILE_CELL) {
      // 新規ファイルの場合は行を追加
      lastRow++;
      activeSheet.getRange(lastRow, START_COL).setValue(fileNames[i]);
      activeSheet.getRange(lastRow, START_COL+1).setValue(fileLinks[i]);
      activeSheet.getRange(lastRow, START_COL+2).setValue(fileLastUpdate[i]);
    } else {
      // 既存ファイルの場合はURLと更新日時を更新
      activeSheet.getRange(targetRow, START_COL+1).setValue(fileLinks[i]);
      activeSheet.getRange(targetRow, START_COL+2).setValue(fileLastUpdate[i]);
    }
  }

  SpreadsheetApp.getUi().alert("記入処理が終了しました。");
}

// ファイル名の行を取得する関数
function getFileNameRow(activeSheet, lastRow, filename) {
  for (let i = START_ROW; i <= lastRow; i++) {
    let cellValue = activeSheet.getRange(i, START_COL).getValue();
    if (cellValue == filename) {
      return i;
    }
  }
  return NO_FILE_CELL;
}

　詳しくは内容を読んでいただきたいのですが、簡単に説明します。

　onOpen()関数でスプレッドシートのファイルが開いたとき、スプレッドシートの上メニュー部分に「追加メニュー」というのを追加しています。そしてその中の「ファイル一覧取得」をクリックするとメインとなるスクリプトが実行されるように設定しています。

　getFilesInfo()がメインとなる関数で、フォルダのURLからID部分だけを抜き出してファイル一覧を取得しています。「let files = DriveApp.getFolderById(folderId).getFiles();」でファイル一覧を取得しているのですが、どうやら降順に取得しているようなので最後の記入するところで逆から処理するようにしています。
　ファイル名、URL、最終更新日時を取得した後、最終更新日時の列を丸ごとコピーして一つとなりの行に追加しています。このようにすることでファイルの更新履歴も追えるようにしています。
　更新日時列のコピー後、新規ファイルであれば新しく行を追加、既存のものはURLと更新日時を更新、という処理にしています。

　またエラー処理は細かくやっていないので、そのあたりは注意してください。


４：実際に実行する
　３のスクリプトを記述できたら、一度スプレッドシート自体を開き直します。

　フォルダURLのセル(B1)に一覧として表示させたいURLを記入します。以下のようなxxxx...となる部分が固有の値になっているものをコピペして入力してください。

https://drive.google.com/drive/folders/xxxxxxxxxxxxxxxxxxxxxxxxxxx

　入力できたら今回GASで追加した「追加メニュー」→「ファイル一覧取得」をクリックします。

　初回の場合は以下のように承認が必要になるので「承認」をクリックします。

　クリックすると以下のようにアカウント一覧が表示されるので、承認したいアカウントを選択します。

　このアプリはGoogleで確認されていません、という画面が出てくるので左下の「詳細」をクリックします。

　「ファイル一覧取得（安全ではないページ）に移動」をクリックします。

　許可を求める画面になるので、確認して「許可」をクリックします。

　これで使用できるようになったので、もう一度「追加メニュー」→「ファイル一覧取得」をクリックして実行します。

　スクリプトがエラーなく終了すると、以下の画面が出てくるので「OK」をクリックします。

　以下のようにファイル一覧とURL、最終更新日時が記入されています。

　ちなみに今回対象としたGoogleドライブの中身は以下のようになっています。対象フォルダ内にあるフォルダは対象外となっています。


　以上が、GASでGoogleドライブのフォルダ内のファイル一覧とファイルリンク、最終更新日時を取得する方法になります。

　例えば定期的なcsvなどのファイル一覧をこのように管理する、というのも一つの方法だと思います。
　色々と使える幅は広いように感じているので、この記事を読んでいただいた方の参考になれば幸いです。


・参考資料

【KiCad】KiCadをインストールしてみる

KiCad 環境構築 Windows 電子回路

　今までちょっとした電子回路を作成しユニバーサル基板にはんだ付けをして色々と作ってきましたが、ちゃんとした基板を一度作ってみたいと思うようになってきました。

　KiCadと呼ばれるオープンソースでちゃんとした発注用の基板を作成できることを知ったので、今回はKiCadをインストールしてみる記事になります。


　では、始めます。


１：KiCadのインストール
　まずは以下の公式ページを開きます。

　ページを開いたところにある「Download」をクリックします。

　インストール対象のOS一覧が表示されるので選択します。今回はWindows11にインストールしたいのでWindowsを選択しました。

　ダウンロードするサーバを選択ですが、どこを選んでも問題ないと思います。今回は一番上のところを選択しました。

　クリックすると寄付をお願いする画面になりますが、自動的にインストーラのダウンロードが始まります。インストーラは1GBほどあるので気長に待ちます。

　ダウンロードしたインストーラをダブルクリックで起動させます。

　インストーラの指示に従ってインストールを行います。基本的にはデフォルトのまま「Next」をクリックしていくだけで問題ないです。

　最後に「Finish」をクリックすればKiCadのインストールは完了です。


２：KiCadを起動してみる
　デスクトップに追加されたKiCadのアイコンをダブルクリックして起動させます。

　初回起動時に以下のような表示が出るので、過去バージョンを使っていた場合は上の方を選択して設定をインポートしてください。初めてKiCadを使う場合は下の方を選択します。今回は初めて使うので下の方を選択しています。

　初期設定が完了すると以下のような画面になります。


　以上がKiCadをインストールしてみるまでになります。ただインストールしただけですが、色々と機能があるようなので勉強して自作基板を発注するところまでやってみたいと思っています。


・参考資料

【git】勝手に改行コードが変更される場合の対処

git コマンド

　Windowsにgitを入れちょうどシェルスクリプトを書いている時に「いつの間にか改行コードが変わっている」ことに気が付きました。

　今回はその改行コードの自動変更の設定を解除したりする方法の備忘録になります。詳しい説明は参考資料に挙げているページ様が詳しいのでそちらを参照してください。


　では、始めます。


１：gitでの改行の設定
　gitの公式サイトからインストーラをダウンロードし、それをWindowsでインストールした場合、特に何も設定を変更していない場合は以下のような設定になっているはずです。

チェックアウト時 コミット時
LF → CRLF CRLF → LF

　またGitのインストール後に以下のコマンドを実行した中の「core.autocrlf」の項目から今の設定を確認することができます。

$ git config -l


２：gitでの改行設定の変更
　gitの改行設定を変更する場合は以下のコマンドを実行します。

$ git config --[スコープ] core.autocrlf [設定値]

　設定値のところはtrue/input/falseのいずれかを設定します。それぞれどのようになるかは以下の表の通りになります。

設定値 チェックアウト時 コミット時
true LF → CRLF CRLF → LF
input 変更しない CRLF → LF
false 変更しない 変更しない

　自分の場合は改行コードが変換されると嫌なので、現在ユーザ共通としてfalseを設定するために以下のコマンドを実行しました。

$ git config --global core.autocrlf false

　確認ちゃんとglobalに設定されているかを確認するために以下のコマンドを実行します。

$ git config -l --global

　この結果に「core.autocrlf=false」が含まれていれば設定完了です。


　以上がgitで勝手に改行コードが変更される場合の対処方法になります。

　シェルの場合、改行コードが変更されると動かなくなるので気づかないうちにそういう変換なされていてかなり混乱しました。

　改行コードが自動的に変換される方が楽な場合もありますが、デフォルトでは改行コードは変換されないようにしてほしかったですね…。


・参考資料

【python】関数の引数として関数を渡す

python プログラミング

　pythonを書いていて関数の引数として関数を渡したい時が出てきたので調べたところ、できるようだったので今回はその備忘録になります。


　では、始めます。


１：関数の引数として関数を渡す方法
　やり方は簡単で、以下のように引数として関数名を指定するだけです。

#-*- coding:utf-8 -*-
# 引数で渡したい関数
def called_func():
    print("called_func")

# 引数の関数を実行する関数
def call_func(func):
    func()

# 引数に関数を渡して実行
call_func(called_func)

　やり方がわかったので実際に簡単なサンプルソースを動かしてみます。


２：サンプルソース
　以下のソースコードを実行してみてください。

・sample.py

#-*- coding:utf-8 -*-
def add(a, b):
    return a + b

def multiply(a, b):
    return a * b

# 引数の関数を実行して結果を表示する関数
def run_func_print(func, a, b):
    print(func(a, b))

def main():
    run_func_print(add, 1, 2)
    run_func_print(add, 8, 9)

    run_func_print(multiply, 1, 2)
    run_func_print(multiply, 8, 9)

if __name__ == '__main__':
    main()

　実行するとちゃんと引数の関数が実行されていることがわかると思います。


３：注意すべき点
　引数に関数を渡せることを知っていれば便利だとは思いますが、注意すべきところがあります。

　例えば以下のソースコードを実行するとエラーになります。

・sample2.py

#-*- coding:utf-8 -*-
def add2(a, b, c):
    return a + b + c

def run_func_print(func, a, b):
    print(func(a, b))

def main():
    run_func_print(add2, 1, 2)

if __name__ == '__main__':
    main()

　これは引数として渡した関数(add2)の引数は3つであるのに、実行する関数(run_func_print)では引数を2つしか渡していないためにエラーとなっています。

　このように引数に関数を渡した場合、渡す関数の引数に何らかの変更があるとその影響をそのまま受けるため、引数の関数を実行する関数にも修正が必要となります。

　関数同士がかなり密接に影響し合うため、注意していないとバグやエラーを出してしまうことになります。


　以上がpythonで関数の引数として関数を渡す方法になります。

　個人で開発する場合には裏技的な感じで使用するのもアリかもしれないですが、チームや仕事としてやる場合にはバグを誘発したりメンテナンス性や可読性が著しく下がると思うのでやらない方が良いかと個人的には思います。

　そもそも関数を渡して処理させるような設計にしない方がよほど重要だと思います。


・参考資料