https://ysko909.github.io/ Recent content on 頑張らないために頑張る Hugo -- gohugo.io ja © Copyright ysko Mon, 13 Jul 2026 10:03:04 +0900 https://ysko909.github.io/posts/editing-committed-messages-in-git/ Mon, 13 Jul 2026 10:03:04 +0900 https://ysko909.github.io/posts/editing-committed-messages-in-git/ 概要 Git でコミットした直後に「メッセージを間違えた……」というケースは誰にでもあります。直近のコミットから過去のコミット、さらにマージコミットまで、メッセージを変更するための正しい手順と、チーム開発で安全に運用するためのベストプラクティスをまとめます。 重要：コミットメッセージの変更は 履歴の書き換えです。そのため、とくにチームで開発している場合において、共有ブランチ（例：main）で履歴を変えると、他メンバーのローカル履歴を壊す恐れがあります。リモートのブランチ保護設定次第では、強制プッシュが禁止されている場合もあります。作業前にチーム内で合意を形成するか、ルールについて確認してください。 直前（最新）のコミットメッセージを修正する エディタを使ってメッセージを修正する 直近のコミットは git commit --amend で置き換えます。-m を付けるとエディタを開かずにメッセージを指定できます。 # 直近のコミットメッセージだけを差し替える git commit --amend -m "修正後のメッセージ" ```` `--amend` は 直前のコミットを新しいコミットで置き換えるため、コミット ID が変わります。 よく使うバリエーション： ```bash # コミットし忘れたファイルを追加（メッセージは変更なし） git add <<忘れたファイル>> git commit --amend --no-edit # 既にコミットしたファイルを直前コミットから除外（メッセージは変更なし） git rm --cached <<いらないファイル>> git commit --amend --no-edit # 署名付きコミットを維持して再生成（署名必須なリポジトリ向け） git commit --amend -m "修正後のメッセージ" # 著者情報を修正 git commit --amend --author="Correct Name <correct@example.com>" --no-edit これらのオプションは公式ドキュメントで定義されています。 リモートへ反映する（安全な強制プッシュ） --amend でコミット ID が変わると、通常の git push は 非 fast-forward として拒否されます。そこで 安全な強制プッシュである --force-with-lease を使うのが推奨です。 https://ysko909.github.io/posts/list-of-github-copilot-models-and-recommended-models-by-use-case/ Mon, 15 Jun 2026 09:58:15 +0900 https://ysko909.github.io/posts/list-of-github-copilot-models-and-recommended-models-by-use-case/ 概要 〜コストと性能から考える最適な使い分け戦略〜 GitHub Copilotでは複数のAIモデルが選択可能ですが、用途に応じて最適なモデルを選択することが重要です。しかし、「結局どれを使えばいいのか？」に悩む方は多いはずです。以下に、GitHub Copilotのモデル一覧と、用途別の推奨モデルをまとめました。 なお、この一覧は2026年6月時点のもので、モデルの追加や価格変更がある可能性があります。最新情報は公式ドキュメントを参照してください。 はじめに ～モデルの違い～ Copilotはモデルごとに以下が大きく異なります。 精度（推論力・コード品質） 速度（応答の速さ） コスト（トークン単価） 特に重要なのはコスト差で、モデルによっては最大50倍の価格差があります（後述）。 モデルコスト一覧（昇順） 以下は入力トークン単価ベースで並べたものです。 最安クラス モデル 入力 出力 特徴 GPT-5.4 nano $0.20 $1.25 最安・最低性能 GPT-5 mini $0.25 $2.00 コスパ最強 Raptor mini $0.25 $2.00 高速補完 低コストクラス モデル 入力 出力 特徴 Gemini 3 Flash $0.50 $3.00 軽量・高速 MAI-Code-1-Flash $0. https://ysko909.github.io/posts/fundamentals-of-reverse-proxy/ Mon, 11 May 2026 13:58:47 +0900 https://ysko909.github.io/posts/fundamentals-of-reverse-proxy/ Web アプリを運用していると、ある時点で「外からのアクセスをどうさばくか」「HTTPS をどう終端するか」「複数台構成をどう見せるか」といった課題にぶつかります。そこで登場するのが リバースプロキシ（Reverse Proxy） です。 本記事では、リバースプロキシの基本と実務での使いどころを整理します。 リバースプロキシとは何か 一言で言うと リバースプロキシは「サーバ側の代理人」です。クライアント（ブラウザや API 呼び出し元）からのリクエストをいったん受け取り、裏側にあるアプリサーバへ中継します。 Client ---> Reverse Proxy ---> App Server(s) クライアントは「本当のアプリサーバ」の存在を意識せず、常にリバースプロキシにアクセスします。 「受付カウンター」のようなもの 大きなオフィスに訪問すると、最初に受付があります。来訪者（クライアント）は受付（リバースプロキシ）に要件を伝え、受付が担当部署（バックエンド）へ案内します。 受付が 「どの部署へ案内するか」決める（ルーティング） 受付が 入館手続きをする（認証やアクセス制御） 受付が 来訪者数をさばく（負荷分散） 受付が 受付で荷物検査をする（WAF/セキュリティ） フォワードプロキシとの違い プロキシには大きく 2 種類あります。 種類 代理する対象 典型例 フォワードプロキシ クライアント側の代理 社内ネットワークからの外部 Web アクセス制御 リバースプロキシ サーバ側の代理 Web サービスのフロントに置く Nginx/Apache/ALB 見分け方のコツ フォワード：クライアントの代理で外へ出る リバース：サーバの代理として表に立つ リバースプロキシを置くメリット：実務で効くポイント HTTPS（TLS）終端を一箇所に集約できる バックエンドが複数あっても、TLS 証明書の管理をリバースプロキシに集められます。アプリ側は HTTP だけで動かし、フロントで HTTPS を受ける構成が一般的です。 https://ysko909.github.io/posts/windows-ftp-does-not-support-passive-mode/ Wed, 04 Mar 2026 12:01:25 +0900 https://ysko909.github.io/posts/windows-ftp-does-not-support-passive-mode/ TL;DR Windowsのコマンドプロンプトで使う標準FTPクライアントftp.exeは パッシブモード（PASV/EPSV）に対応していません。quote pasvを送れてもクライアント側はアクティブのままです。 パッシブ必須のサーバーに接続したいなら、Windowsでは WinSCP / FFFTP などのGUIクライアントか、curlを使いましょう。 curlはデフォルトでパッシブ。必要なら--ftp-pasv（明示）、--disable-epsv、--ftp-skip-pasv-ipなどで挙動を調整できます。 なぜftp.exeではダメなのか FTPは 制御用（通常21/tcp） と データ転送用 の2本のTCPコネクションを使うプロトコルです。データ側コネクションを「誰が張るか」でアクティブとパッシブに分かれます。 アクティブ：クライアントがPORTを通知し、サーバー→クライアント にデータ接続を張ってくる。クライアント側FW/NATで止まりがち。 パッシブ：クライアントがPASV/EPSVを送り、クライアント→サーバー にデータ接続を張る。FW/NAT下でも通りやすく、現在の主流。 Windows標準のftp.exeはパッシブモード非対応であるため、quote pasvでサーバー側をPASV状態にしてもクライアントは結局PORTを投げることになります。そのため、FW/NAT越しの一般的なサーバーでは、ディレクトリ一覧や転送が失敗しやすいという実害につながります。 代替手段の選択肢 WinSCP / FFFTP（GUI）：標準でパッシブ。WinSCPはスクリプト/CLIもあり、-passive=onで明示可能。一番早い解決法。 curl：Windows 10/11には標準搭載 されており（PowerShellのcurlは別名エイリアスなのでcurl.exeとして呼ぶのが確実）、デフォルトがパッシブ。 File Explorer（エクスプローラー）：既定でパッシブ（必要に応じてインターネットオプションの「パッシブFTP」設定）。 補足（SFTP/FTPSの話） FTPは平文プロトコルです。機微情報には FTPS または SFTP を推奨します。なお、Windows同梱のcurlはSFTPが無効化されているビルドなので、SFTPが必要なら公式ビルドやWinSCPを検討してください。 curlでやるFTP Windowsにおいては、WinSCPやFFFTPなどのソフトウェアをインストールしてFTPを利用するのが簡単かつ便利です。が、「とりあえずFTPの接続確認だけできればいい」という場合は、わざわざインストールしなくてもcurlを使うことで実行できます。 以降の例はパッシブモードで動きます。curlにおいて、ユーザー名/パスワードは--userで指定します。 0) 事前チェック（Windowsでの呼び出しとバージョン） REM PowerShellなら 'curl' はInvoke-WebRequestのエイリアス。 REM 紛らわしい場合は常に 'curl.exe' を使う。 curl.exe --version 1) ディレクトリ一覧を取得（LIST） curl.exe -u USER:PASSWORD ftp://ftp.example.com/ URLがディレクトリの場合、標準出力に一覧が流れます。バッチ処理なら> listing.txtで保存。 $ curl -u myuser:mypassword ftp://localhost/ -rw------- 1 ftp ftp 15 Feb 25 05:58 foo. https://ysko909.github.io/posts/how-to-commit-only-a-specific-file-from-multiple-changes/ Tue, 13 Jan 2026 18:49:05 +0900 https://ysko909.github.io/posts/how-to-commit-only-a-specific-file-from-multiple-changes/ 複数のファイルを並行して編集しているとき、いま確定できる1ファイルだけをコミットしたい場面はよくあります。この記事では、安全に1ファイルだけをコミットする方法をまとめます。いつもはなるべく細かくコミットするようにしてるので、たまにこういうシチュエーションになると「どうやるんだっけ・・・」ってなるので、個人的にメモしておくっていう話でもあります＿(　_´ω`)_ﾍﾟｼｮ シチュエーション 次の3ファイルに変更があるものの、まずは config.js の変更だけをコミットしたい・・・こんなケースを想定してみます。 config.js（設定の修正：コミットしたい） app.js（機能開発中：まだコミットしたくない） style.css（デザイン調整中：まだコミットしたくない） 基本手順（最短・安全ルート） 1) 変更状況の確認 git status 出力例 On branch main Changes not staged for commit: modified: config.js modified: app.js modified: style.css no changes added to commit 2) 対象ファイルだけをステージング git add config.js 3) ステージングの確認 git status 出力例 On branch main Changes to be committed: modified: config.js Changes not staged for commit: modified: app.js modified: style.css 4) コミット git commit -m "config. https://ysko909.github.io/posts/how-to-output-to-the-browser-console-using-blazor/ Wed, 10 Dec 2025 10:20:05 +0900 https://ysko909.github.io/posts/how-to-output-to-the-browser-console-using-blazor/ 概要 Blazor Serverアプリケーションを開発していると、デバッグのためにブラウザのコンソールにデータを出力したくなることよくがあります。まぁ「デバッガー使えばいいじゃん」はたしかにそうなのですが、単純に「ここの処理通過してるか見ておきたいなー」程度の確認のとき、パッと「********hoge処理通過********」とか適当な文字列をコンソールに出したりします。 しかし、ことBlazorでの開発の場合、コンソールに出力するSystem.Diagnostics.Debug.WriteLine()やConsole.WriteLine()を使っても、ブラウザのコンソールには表示されません。今回はこの点について書きたいと思います。 なぜ表示されないのか 結論から言えば、Blazor Serverの仕組みに起因しています。 Blazor Serverでは、C#のコードはサーバー側で実行されます。 System.Diagnostics.Debug.WriteLine() → （サーバー側である）Visual Studioのデバッグコンソールに出力 Console.WriteLine() → サーバーのコンソール(ターミナル)に出力 上記のようにそれぞれ「サーバー側」で実行され出力されます。しかし、ブラウザはクライアント側で動作しているため、サーバー側のコンソール出力は見えないのです。考えれば当たり前体操なのですが、つい忘れがち。 解決方法: JSInteropを使う 出力されているところはわかったのですが、「確認したいんだよぉ、ブラウザのコンソールでよぉ！」を実現するにはまあまあ面倒です。というのも、ブラウザのコンソールに出力するにはJavaScript Interop (JSInterop) を使って、JavaScriptのconsole.log()を呼び出す必要があります。 方法1: IJSRuntimeを直接使用する 最もシンプルな方法は、IJSRuntimeを使ってJavaScriptのconsole.logを直接呼び出すことです。 @page "/console-example" @inject IJSRuntime JS <h3>ブラウザコンソール出力のデモ</h3> <button @onclick="LogToConsole">ブラウザコンソールに出力</button> @code { private async Task LogToConsole() { await JS.InvokeVoidAsync("console.log", "Hello from Blazor Server!"); } } この方法には以下のようなメリットがあります。 InvokeVoidAsync() を使用(戻り値が不要な場合) 第一引数に"console.log"を指定 第二引数以降に出力したいデータを指定 方法2: 複数の値やオブジェクトを出力する @code { private async Task LogMultipleValues() { var user = new { Name = "田中太郎", Age = 30 }; await JS. https://ysko909.github.io/posts/fundamentals-of-naming-objects/ Tue, 02 Dec 2025 11:51:16 +0900 https://ysko909.github.io/posts/fundamentals-of-naming-objects/ はじめに プログラミングにおいて、変数やメソッド、クラスの命名は「コードを書く」行為の中でも特に重要な要素です。適切な命名はコードの可読性を高め、保守性を向上させ、チーム開発を円滑にします。 本記事では、プログラミング言語に依存しない普遍的な命名の指針を、オブジェクトごとに整理して解説します。 命名における基本原則 1. 意図を明確に伝える なぜこのルールが必要か コードは書く時間よりも読まれる時間の方が圧倒的に長いものです。命名は「将来の自分や他の開発者へのメッセージ」であり、その意図が明確でなければ、コードの理解に余計な時間がかかります。 メリット コメントなしでもコードの意図が伝わる バグの発見が容易になる リファクタリングの際に影響範囲を把握しやすい 悪い例 d = 86400 calc(a, b) data = getData() 良い例 secondsPerDay = 86400 calculateTotalPrice(unitPrice, quantity) userProfile = fetchUserProfile() 2. 省略語は慎重に使う なぜこのルールが必要か 過度な省略は可読性を損ないます。一方で、業界で広く認識されている省略語は積極的に使うべきです。 メリット 初見の開発者でも理解しやすい ドメイン知識の共有が促進される 一般的に許容される省略語 id (identifier) num (number) max / min (maximum / minimum) src / dst (source / destination) btn (button) - UI関連 msg (message) tmp (temporary) ctx (context) config / cfg (configuration) 避けるべき省略 usrMgr → userManager getPrdLst → getProductList 3. https://ysko909.github.io/posts/why-is-the-oninitializedasync-executed-twice/ Wed, 19 Nov 2025 14:13:03 +0900 https://ysko909.github.io/posts/why-is-the-oninitializedasync-executed-twice/ 概要 Blazorを用いてコンポーネントを書き始めると、「あれ？」と思う現象があります。それが、OnInitializedAsyncメソッドが2回実行されるという現象です。これのせいで、「データを2回も取得してる」「ログが二重に記録されてる」という事象が発生します。 これはバグではなく、Blazorの「プリレンダリング (Prerendering)」という機能による意図的な動作です。この記事では、なぜこの現象が起きるのか、そしてそれにどうスマートに対処すればよいのかを、Microsoftのドキュメントを基に解説します。 TL;DR OnInitializedAsync は2回実行される挙動は、Blazorのプリレンダリング（Prerendering）という機能によって引き起こされます。つまり仕様です。 ランダムな値の生成やデータベースへの問い合わせなどを単純に書くと、1回目と2回目で異なる結果になったり処理が2重に走ったりして、「画面が一瞬ちらつく」「表示される値が変わる」という現象が起きます。 この現象を抑制するには PersistentComponentState （永続コンポーネント状態）サービスを利用します。 そもそも「プリレンダリング」とは？ Blazor (特にBlazor ServerやBlazor Web App) には、ユーザー体験を向上させるための「プリレンダリング」という仕組みがデフォルトで備わっています。 これは、ユーザーがページにアクセスした際、まずサーバー側でコンポーネントを実行し、その結果を静的なHTMLとして先にブラウザに送信する技術です。 プリレンダリングのメリット 初期表示が高速: JavaScriptの読み込みやSignalR接続が完了する前に、ユーザーはページのコンテンツを見ることができます。 SEOに有利: クローラーが静的なHTMLを読み取れるため、検索エンジン最適化（SEO）に役立ちます。 OnInitializedAsyncが2回実行されるメカニズム このプリレンダリングの仕組みこそが、OnInitializedAsyncが2回呼ばれる原因です。 1回目（静的プリレンダリング）: ユーザーがページにアクセスした瞬間、サーバー側でページのHTMLを高速に生成し、ブラウザに返します。これにより、ユーザーは待機時間なく画面を見ることができます（SEO対策にもなります）。この時、最初のOnInitializedAsyncが走ります。 2回目（対話的接続の確立）: HTMLが表示された直後、ブラウザはサーバーとのWebSocket接続（SignalR）を確立（またはWASMをロード）し、改めて「動的なアプリケーション」としてコンポーネントを再構築します。ここで2回目のOnInitializedAsyncが走ります。 1回目の実行: サーバーでのプリレンダリング時 目的：できるだけ早く静的 HTML を返す（SEO/初期表示の体感向上） 特徴：OnAfterRender{Async} は呼ばれない（JS Interop 不可） いつ？：ユーザーがページをリクエストした直後、サーバーサイドで。 何が起こる？：Blazorはコンポーネントをインスタンス化し、OnInitializedAsync を実行します。ここでAPIからデータを取得するコードがあれば、それが実行されます。 結果：取得したデータを含む静的なHTMLが生成され、ブラウザに送信されます。 状態：この時点では、ボタンをクリックしても何も起こりません。まだインタラクティブ（操作可能）ではありません。 2回目の実行: クライアントでのインタラクティブ化（ハイドレーション）時 目的：イベント ハンドラ有効化／実動状態へ昇格（Server は SignalR、WASM はランタイムでの起動） 特徴：OnInitialized{Async} が再度実行、この後に OnAfterRender{Async}(firstRender=true) が初めて呼ばれる いつ？：ブラウザが静的HTMLを受け取った後、必要なJavaScriptファイル（Blazor ServerならSignalR接続、Blazor WebAssemblyならWASMランタイム）の読み込みと実行が完了した時、クライアントサイドで。 何が起こる？：Blazorは再度コンポーネントをインスタンス化し、OnInitializedAsync をもう一度実行します。 結果：プリレンダリングされたDOM（HTML）と、クライアント側で実行されたコンポーネントの状態が関連付けられ（これをハイドレーションと呼びます）、ページが完全にインタラクティブになります。 状態：これ以降、ボタンのクリックなどに反応するようになります。 要するに: https://ysko909.github.io/posts/can-not-run-without-creating-launchi-json-file/ Fri, 14 Nov 2025 14:36:17 +0900 https://ysko909.github.io/posts/can-not-run-without-creating-launchi-json-file/ 概要 GitHubから面白そうなプロジェクトを見つけてcloneし、Visual Studio Code（以下、VSCode）で開いて実行しようとした瞬間、エラーがでてきたことがあります。 上記のメッセージはMarkdownをデバッグしようとしています（何しようとしてるのよ）が、PythonやC#でも似たようなエラーメッセージが出たことがあります。これについては、言語に対応する拡張機能をインストールしていたとしても同様に、エラーメッセージが出現してきます。許さん。 結論から言うと、「実行に必要なファイルlaunch.jsonが存在しないから実行できないぜ！」なのです。 なぜ launch.json が無いの？ GitHubなどで公開されているリポジトリには、通常 launch.json ファイルが含まれていません。launch.json というのは、VSCodeが「このプロジェクトをどうやって実行・デバッグすればいいか」を理解するための設定ファイルです。実行のためのガイドのようなものです。例えば、「Pythonのこのファイル（main.py）を実行してね」とか、「C#のこのプロジェクトをビルドしてデバッグしてね」といった具体的な指示が書かれています。 このファイルは、開発者個人の環境（ローカルPCのどこにファイルがあるか、など）に依存する設定を含むことが多いため、リポジトリに含めない（.gitignore で除外する）のが一般的です。つまり、cloneしてきたばかりの状態は、VSCodeから見れば「ファイルはたくさんあるけど、ガイドがないからどれをどう実行すればいいか分からんよ！」という状態なんです。 launch.json を作成しよう 解決策は至ってシンプル。「どう実行すればいいか」をVSCodeに教えてあげるために、launch.json を作成すればOKです。つまり、「ないなら作ればいいじゃない」です。 作成方法には、VSCodeの機能を活用する方法と、手動で作る方法があります。 VSCodeの機能で自動生成する (推奨) 一番簡単でオススメな方法です。 VSCodeの左側にあるアクティビティバーから、「実行とデバッグ」のアイコン（虫のマーク）をクリックします。 「実行とデバッグ」ビューが開きます。もし launch.json がまだ存在しない場合、「launch.jsonファイルを作成します（create a launch.json file.）」という青いリンクやテキストが表示されているはずです。 これをクリックすると、VSCodeがプロジェクトの中身をスキャンして「これはPythonプロジェクトっぽいですね？」とか「Node.jsですか？」といった感じで、デバッグ環境の候補（デバッガ）をいくつか提示してくれます。 自分のプロジェクトに合った環境（例えば Python File や .NET Core Launch など）を選択します。 たったこれだけで、VSCodeがプロジェクトのルートディレクトリに .vscode というフォルダを自動で作成し、その中に基本的な設定が書き込まれた launch.json ファイルを生成してくれます。 手作業で作成する もちろん、手作業でファイルを作成することも可能です。 プロジェクトのルートディレクトリ（.git フォルダがある場所）に、.vscode という名前のフォルダを作成します。もし既にあれば、この作業はスキップできます。 作成した .vscode フォルダの中に、launch.json という名前のファイルを新規作成します。 launch.json ファイルを開き、JSON形式で設定を記述します。 例えば、最低限の構成はこんな感じです（内容はダミーです）： { "version": "0. https://ysko909.github.io/posts/using-grep-on-docker-logs-does-not-change-the-output/ Fri, 07 Nov 2025 09:51:11 +0900 https://ysko909.github.io/posts/using-grep-on-docker-logs-does-not-change-the-output/ 概要 Dockerでコンテナを立ち上げて、いざ動作確認をば・・・あれ、何か動かない。そんなとき、とりあえず「ログを見る」ためにdocker logsを叩くのは、エンジニアの条件反射みたいなもの。 でも、出力されるログが多すぎる！「grepでエラーログだけ絞りゃええやろ」と思ってコマンドを打ち込みます。 docker logs my_container | grep error ところがどっこい。 grepをつけたはずなのに、全量出力されてしまう。あるいは、エラーが出ているはずなのに何も表示されない。パイプ（|）が仕事をしていない？ これ、実はDockerあるあるの一つなんです。今日はこの現象の原因と、解決する方法について書きたいと思います。 なぜgrepが効かないのか 結論から言うと、多くの場合、その原因は「標準エラー出力（STDERR）」にあります。 docker logsの仕組み：docker logsコマンドは、コンテナが「標準出力（STDOUT）」に出力した内容と、「標準エラー出力（STDERR）」に出力した内容の両方を表示してくれます。 アプリケーションの習性：コンテナ内で動いているアプリケーションは、多くの場合、通常のログ（「処理Aを開始しました」など）はSTDOUTに、エラーログ（「致命的なエラーが発生しました！」など）はSTDERRに、律儀に分けて出力するように作られています。 パイプ（|）の落とし穴：普段何気なく使っているパイプ（|）は、デフォルトではSTDOUT（標準出力）だけを次のコマンドに渡す、という性質を持っています。 つまり。 探したい「error」という文字列は、STDERR（標準エラー出力）に出力されている。 でも、パイプ（|）はSTDOUT（標準出力）しかgrepに渡してくれない。 結果、grep君は「STDOUTからはerrorなんて来なかったよ？」と判断し、何も表示しない（あるいは、STDERRの内容はそのままスルーされてターミナルに表示され続ける）・・・という事態が発生するわけです。 grepがサボっていたわけではなく、そもそもフィルタリングすべきデータが渡っていなかったんですね。 解決策 原因がわかれば対処は簡単です。要するに、STDERRの内容もgrepに渡してあげれば良いのです。 対処法1：STDERRをSTDOUTにまとめる（王道） これが一番メジャーな解決策です。シェルの機能を使って、「標準エラー出力（STDERR）も標準出力（STDOUT）に合流させてから」パイプに流します。 bashやzshを使っている場合 (簡単な記法)： docker logs my_container |& grep error |& という記法が、「STDOUTとSTDERRの両方を次のコマンドに渡す」という意味になります。なので、この記法が使えるシェルであれば、この方法が一番早いです。 sh（標準的なシェル）でも動く記法： docker logs my_container 2>&1 | grep error 2>&1 というのは、前述の簡単な書き方ができないシェルでも有効な記法です。これは「2番（STDERR）を 1番（STDOUT）と同じ場所（&）に向けてね」という意味になります。これをパイプの手前に書くことで、STDOUTとSTDERRが合流した状態でgrepに渡されます。 どちらを使っても、今度こそgrepが意図した通りに「error」を含む行だけをフィルタリングしてくれるはずです。 対処法2：docker logsのオプションを活用する そもそもログが多すぎるという問題に対して、grepを使うのではなくdocker logs自体のオプションで絞り込むという方法です。 直近のログだけ見る: docker logs --tail 100 my_container （直近100行を表示。grepと併用ももちろんOK） 時間で絞り込む: https://ysko909.github.io/posts/fundamentals-of-tdd/ Fri, 17 Oct 2025 15:40:48 +0900 https://ysko909.github.io/posts/fundamentals-of-tdd/ TL;DR テスト駆動開発（以下、TDD）は「テストを先に書く→最小のコードで通す→安全にリファクタ」の短いサイクルで、品質・設計の健全性・変更耐性を高めます。アジャイルの一部で使われることが多いですが、目的が異なる独立のプラクティスです。 本記事では、TDDの基本的な考え方から、他の開発手法との比較、そしてPythonとpytestを使った具体的な実践例までを解説します。 TDDとは システム開発では、「品質の高いコードを、いかに効率よく書くか」という課題に日々向き合っています。その解決策の一つとして、テスト駆動開発（TDD: Test-Driven Development）という手法があります。 2000年代にTDDが登場してからすでにかなり時間が経っているため、なんで今さらTDD？と思うかもしれません。それは、昨今生成AIのコード生成能力が上がったことで、「コードを書く」ことより、求める仕様を明確化することが重要になってきたからです。これからの開発者には、「良いコードを書く」こと以上に、「良い設計を育てる」「品質を保つ」スキルが求められます。そこでこのTDDは、そのための強力な武器となるわけです。TDDの手法上、先にテストを書くことで求める仕様を明確にできることから、生成AIの力を最大限に引き出すことができます。ということで、生成AIとの相性が良いTDDを改めて学んでみる価値が出てきたというわけです。 「レッド・グリーン・リファクタリング」のサイクル TDDは、プログラムの実装コードを書く前に、そのコードが満たすべき仕様をテストコードとして先に記述する開発手法です。このアプローチの核心は、以下の3つのステップを短いサイクルで繰り返すことにあります。 レッド (Red): まず、失敗するテストを書きます。これから実装したい機能に対するテストコードを記述しますが、まだ機能自体は存在しないため、このテストは必ず失敗します。テストフレームワークが赤色でエラーを示すことから「レッド」と呼ばれます。これは「何を達成すべきか」を明確に定義するステップです。 グリーン (Green): 次に、レッドフェーズで書いたテストが成功する（パスする）ための最小限の実装コードを書きます。ここではコードの綺麗さや効率は一旦無視し、とにかくテストをパスさせることだけを目指します。テストが成功すると緑色で示されることから「グリーン」と呼ばれます。 リファクタリング (Refactoring): テストが成功しているという安心感を「セーフティネット」として、コードの構造を改善します。重複したコードをまとめたり、変数名を分かりやすくしたりと、設計をより良くするためのリファクタリングを行います。リファクタリング後も、テストが成功し続けることを随時確認します。 この「レッド → グリーン → リファクタリング」という小さなサイクルを繰り返すことで、一つひとつの機能を確実に、かつクリーンな設計で実装していくのがTDDの基本的な流れです。 他開発手法との比較 TDDは他の開発手法とどう違うのでしょうか。代表的なものと比較してみましょう。 開発手法 特徴 TDDとの関係性 ウォーターフォール 「要件定義→設計→実装→テスト」という工程を順番に進める。後戻りは原則しない。 対照的。 TDDでは実装とテストが非常に短いサイクルで行われるのに対し、ウォーターフォールではテストは実装がすべて完了した後の独立した工程として扱われます。 アジャイル開発 小さな機能単位で「計画→設計→実装→テスト」のサイクルを繰り返す。TDDはこのアジャイルの文脈で採用されることが多い。 補完的。 TDDはアジャイル開発の各イテレーション（反復）の中で、個々の機能の実装品質を高めるための具体的なプラクティス（実践方法）と言えます。アジャイル開発でも、必ずしもTDDが採用されるわけではありません（実装後にテストを書く場合もあります）。 BDD (ビヘイビア駆動開発) TDDから派生した手法。テストを「システムの振る舞い（Behavior）」という観点から、より自然言語に近い形で記述する。「顧客やPMも読める仕様書」としての側面が強い。 発展的。 TDDが「開発者の視点」で関数の入出力などをテストするのに対し、BDDは「ユーザーやビジネスの視点」でシステムの振る舞いを記述します。使うツールもGherkin（Given-When-Then形式）などが有名です。 この中で、TDDとアジャイルは比較的近い位置にいるため、TDDがアジャイルで採用されることもあります。しかし、これらは厳密に言うと目的が異なる別軸の手法です。 観点 アジャイル開発 TDD 目的 短いイテレーションで価値提供を最大化 コードの品質・設計の健全性を担保 中心 ユーザーストーリー／バックログ テスト（仕様の明文化） 適用範囲 プロセス・チーム運営 実装の手法・設計の育て方 主な効果 変更への柔軟性、早いフィードバック バグの早期発見、リファクタの安全網 課題 テスト戦略が薄いと品質リスク 初期コスト、学習曲線、過剰テストのリスク そのため、アジャイル（プロセス）とTDD（実装プラクティス）は併用が理想的と言えます。そうすれば、プロセスで速く回しつつ、TDDで設計品質を底上げすることが可能です。 https://ysko909.github.io/posts/regex-when-search-and-replace-in-vscode/ Wed, 17 Sep 2025 11:58:41 +0900 https://ysko909.github.io/posts/regex-when-search-and-replace-in-vscode/ コードを書いていると、こんな作業にぶち当たることがあります。 特定のフォーマットの文字列を、すべて別のフォーマットに書き換えたい… 大量のログから、特定のエラーコードを含む行だけ抜き出したい… 単純な単語検索では見つけられない、複雑なパターンの文字列を探したい… そんな面倒なテキスト操作を解決してくれるのが「正規表現」です。Visual Studio Code (以下、VSCode) の検索・置換機能で正規表現を使えば効率は劇的に向上します。 この記事では、基本的な使い方から一歩進んだテクニックまで、実用的な例を交えながら分かりやすく解説します。 準備：正規表現モードをONに まずはVSCodeで正規表現を使うための準備です。 Ctrl+F (Windows/Linux) または Cmd+F (Mac) で検索ウィンドウを開きます。 ウィンドウの右側にある .* というアイコンをクリックして、青く点灯させます。 これで準備は完了です。入力したテキストが正規表現として解釈されるようになります。 基本的な表現 ここでは、頻繁に使う基本的な正規表現の記号（メタ文字）についてです。 記号 意味 使用例 . 任意の1文字（改行を除く） a.c は abc, aec, a3c などにマッチします。 * 直前の文字の0回以上の繰り返し ab*c は ac, abc, abbbc などにマッチします。 + 直前の文字の1回以上の繰り返し ab+c は abc, abbbc にはマッチしますが、 ac にはマッチしません。 ? https://ysko909.github.io/posts/generate-sql-in-vba-to-count-non-null-records/ Wed, 03 Sep 2025 08:29:15 +0900 https://ysko909.github.io/posts/generate-sql-in-vba-to-count-non-null-records/ 概要 データの整合性や品質は、開発するシステムの生命線です。特に、大規模なデータ移行や外部システムとの連携プロジェクトでは、「このテーブルのこの列、どれくらいデータが埋まっているんだっけ？」といった確認作業が頻繁に発生します。このような場合、SQLのSELECT COUNT(*)を使って非NULL・非空データの件数を調べたりします。しかし、テーブル内には何十、何百と列が存在し、これらに対して調査のために一つひとつSELECT COUNT(*) を実行するのは、正直なところ骨が折れる作業です。というか、手作業でSQLを書くのはミスの元ですし、時間もかかります。なんなら、そもそもやりたくない＿(　_´ω`)_ﾍﾟｼｮ そこで今回は、そんな地道なデータ品質チェックを効率化するための、Access MDBで指定されたテーブルの全列に対して非NULL・非空データの件数を集計するSQLを動的に生成・実行するVBAスクリプトを作成しました。 背景 このスクリプトが生まれた背景には、あるデータクレンジングプロジェクトでの切実な課題がありました。基幹システムから連携された数十のテーブルには、残念ながら多くの「データの抜け漏れ」や「不正確なデータ」が存在していました。 プロジェクトの初期段階でこの課題に気づいていたため、「どのテーブルの、どの列に、どれくらいの有効データが存在するのか」という現状を網羅的に把握することとしました。この「有効データ」の定義は、列のデータ型によって異なります。 テキスト型なら、NULLだけでなく空文字やスペースのみのデータも「無効」としたい。 数値型の場合、NULLは無効だが、0は有効なデータとして扱いたいケースもあれば、0も「未入力」と見なしたいケースもある。 日付型やブール型は、シンプルにNULLでないことを確認したい。 これらの要件を満たすSQLを各列に対して手作業で記述するのは、時間がかかるだけでなく、ヒューマンエラーの温床にもなります。この定型的かつ重要な作業を自動化し、誰でも迅速かつ正確にデータ品質の概況を把握できるようにする。それが、このスクリプトを開発した最大の目的です。とはいえ、背景としてはまぁまぁヘビーな話ですが、コード自体は簡単に使えるようシンプルで汎用性の高いコードを心がけました。 コード 実際に使用するVBAコードは以下の通りです。 Option Compare Database 'このVBAスクリプトは、Access MDBで指定されたテーブルの全列に対して非NULL・非空データの件数を集計するSQLを動的に生成・実行します。 Sub GenerateAndExecuteColumnCountQuery(tableName As String) Dim db As DAO.Database Dim tdf As DAO.TableDef Dim fld As DAO.Field Dim sql As String Dim selectClause As String Dim rs As DAO.Recordset Set db = CurrentDb() Set tdf = db.TableDefs(tableName) ' SELECT句を動的に構築 selectClause = "SELECT " & vbCrLf For Each fld In tdf. https://ysko909.github.io/posts/how-to-check-whether-an-excel-cell-contains-a-formula/ Tue, 02 Sep 2025 17:08:56 +0900 https://ysko909.github.io/posts/how-to-check-whether-an-excel-cell-contains-a-formula/ 概要 Excelのセルには数値や文字列のデータだけではなく、=SUM(A1:C1)のような合計や平均を算出するような数式を格納できます。このとき、セルには数式が格納されていても表面上は計算結果が表示されるため、パッと見だとそのセルに格納されているのは「データなのか数式なのか」が判断できません。 あまり頻繁にあるケースではありませんが、「そのセルに含まれるものはデータか数式か？」を判断しなければならない場合に利用できる方法があります。今回はそんな方法についてメモしておきます。 まぁこういう記事を書いてるってことは、そういうレアなケースに遭遇したってことです・・・＿(　_´ω`)_ﾍﾟｼｮ ISFORMULA関数（Excel 2013以降） 最も直接的な方法で、セルに数式が入っているかどうかを判定し、真偽値（TRUEまたはFALSE）で結果を返します。 基本構文 =ISFORMULA(セル参照) 使用例 =ISFORMULA(A1) TRUE: A1セルに数式が入っている FALSE: A1セルに数式が入っていない（値や文字列） 実践例 A列 B列（判定結果） 説明 100 =ISFORMULA(A1) → FALSE 数値のため =SUM(C1:C5) =ISFORMULA(A2) → TRUE 数式のため Hello =ISFORMULA(A3) → FALSE 文字列のため =AVERAGE(D1:D10) =ISFORMULA(A4) → TRUE 数式のため 複合的な判定方法 数式かどうかを判定したうえで、結果に応じてメッセージを表示する方法です。 パターン1：シンプルな判定 =IF(ISFORMULA(A1),"数式","値") パターン2：詳細な判定 =IF(ISFORMULA(A1), "数式: " & FORMULATEXT(A1), IF(ISNUMBER(A1),"数値: " & A1, IF(ISTEXT(A1),"文字列: " & A1,"その他"))) FORMULATEXT関数との組み合わせ 数式かどうかを判定したうえで、数式であればどんな式が格納されているかをメッセージで表示する方法です。 https://ysko909.github.io/posts/made-a-python-script-to-convert-text-files-in-sjis-format/ Wed, 27 Aug 2025 15:01:23 +0900 https://ysko909.github.io/posts/made-a-python-script-to-convert-text-files-in-sjis-format/ はじめに WindowsとMac、あるいはLinuxとの間でテキストファイルをやり取りしたとき、文字化けに遭遇して「うわっ・・・」ってなった経験ありますか？自分はあります、しこたまあります。 原因の多くは、Windowsが標準で使うShift_JIS (SJIS)と、MacやLinuxで標準のUTF-8という文字コードの違いです。メモ帳で書いた文章が、別の環境だと謎の記号の羅列になってしまう、あの現象です。 毎回テキストエディタで開き直して、エンコーディングを指定して保存し直すのも面倒くさい・・・。特にそういうファイルが大量にあるときは、もう考えただけでうっとりうんざりします。 そこで、この面倒な作業をコマンド一発で解決するために、シンプルなPythonスクリプトをざっと作ってみました。今日はその紹介です。 作成したスクリプトの概要 今回作ったのは、テキストファイルのエンコーディングをSJISとUTF-8で相互変換できるCUIツールです。 主な機能はこんな感じです。 SJIS ⇔ UTF-8の双方向変換: デフォルトはSJISからUTF-8へ、オプション指定で逆もOK。 ファイル・フォルダ対応: 単一のファイルはもちろん、フォルダを指定すれば中の.txtファイルや.mdファイルをまとめて一括変換します。 上書き・新規作成モード: 元ファイルを直接上書きするか、変換後のファイルを別名で新規作成するかを選べます。（デフォルトは安全な新規作成） エンコーディング自動検出: 変換元のファイルのエンコーディングを自動で判別しようと試みます。 追加ライブラリ不要: Python 3.6以降の標準ライブラリだけで動くので、環境構築も楽ちんです。 「ちょっとこのフォルダのテキスト、全部UTF-8にしておきたいな」なんて時に、サッと使えるツールを目指しました。 Pythonスクリプトのコード 作成したスクリプトのコードは以下の通りです。 import os import sys import glob import argparse from pathlib import Path def detect_encoding(file_path): """ファイルのエンコーディングを検出する""" encodings = ['utf-8', 'shift_jis', 'cp932', 'euc-jp', 'iso-2022-jp'] for encoding in encodings: try: with open(file_path, 'r', encoding=encoding) as f: f.read() return encoding except UnicodeDecodeError: continue except Exception: continue return None def convert_file_encoding(input_file, from_encoding, to_encoding, overwrite=False, quiet=False): """ファイルのエンコーディングを変換する""" try: # ファイルを読み込み with open(input_file, 'r', encoding=from_encoding) as f: content = f. https://ysko909.github.io/posts/basics-of-blazor-web-app-settings-about-interactivity/ Tue, 26 Aug 2025 18:19:34 +0900 https://ysko909.github.io/posts/basics-of-blazor-web-app-settings-about-interactivity/ 概要 .NET 8 からの Blazor Web App テンプレートには、作成ウィザードで Interactivity render mode（どの相互運用モードを有効にするか）と Interactivity location（どこにそのモードを適用するか）という2つの重要な設定があります。 上記のスクショはその作成ウィザードです。日本語化されているためなんだか妙な感じですが、「インタラクティビティ型」が「Interactivity render mode」に、「インタラクティビティ場所」が「Interactivity location」に相当します。単純に直訳しただけじゃん・・・。 この記事では、その概要と仕組み、選択肢ごとの動作や注意点・実装例をまとめます。 Blazor の「レンダーモード」とは Blazor Web App（.NET 8 以降）では、各 Razor コンポーネントが「レンダーモード」を持ちます。これにより「どこで（サーバー／クライアント）」「どの方式で（静的／対話）」描画・イベント処理するかを柔軟に切り替えられます。 モード 説明 レンダー場所 インタラクティブ Static Server 静的 SSR（HTML をサーバーで描画して返すのみ） サーバー いいえ Interactive Server Blazor Server による対話的 SSR サーバー はい Interactive WebAssembly Blazor WebAssembly によるクライアント側描画（CSR） クライアント はい Interactive Auto 初回は Server、以降は WASM（バンドル取得後に CSR） サーバー→クライアント はい なお、対話コンポーネントでは 既定でプレレンダリング（prerendering）有効です。必要ならオフにもできます（一部の例外やWASMのみの構成など、手動調整が必要な場合もあります）。 https://ysko909.github.io/posts/fundamentals-of-git-stash/ Mon, 25 Aug 2025 13:36:03 +0900 https://ysko909.github.io/posts/fundamentals-of-git-stash/ 「機能開発の途中だけど、急ぎで別のバグ修正を頼まれた」「まだコミットしたくないけど、他のブランチの様子をちょっと見たい」などなど、開発現場ではこんなふうに作業を中断せざるを得ない場面が頻繁に訪れます。そんな時、あなたはどうしていますか？ 中途半端な状態で無理やりコミットしたり、変更内容をどこかに手動でコピーしたりしていませんか？ そんな悩みを一発で解決してくれる魔法のような機能が、Gitの git stash（スタッシュ） です。 git stashとは git stashとは、まだコミットしていない作業内容（変更）を、一時的に別の場所に退避させておく ための機能です。 たとえば、あなたは今、机の上でプラモデルを作っています。パーツを切り出し、接着剤でくっつけ始めたところです（＝コーディング中）。そこへ急な来客があり、机をすぐに片付けなければならなくなりました（＝緊急の修正依頼）。この時、作りかけのプラモデルを箱にしまって、机の上を一旦まっさらにしますよね。来客対応が終わったら、また箱から取り出して作業を再開できます。 この「一時的に箱にしまう」という行為が、まさにgit stashです。git stashを使うと、作業ディレクトリを最後にコミットしたきれいな状態に戻せるので、安心して別の作業に取り掛かることができます。 git stashの基本的な使い方 git stashの操作は非常にシンプルです。基本的な流れは以下の3ステップです。 退避 確認 復元 作業を退避する (git stash / git stash push) 現在のブランチで行った変更を一時退避させます。最も基本的なコマンドは git stash ですが、これは git stash push の省略形です。 どの作業を退避させたか後で分かるように、メッセージを付けておくことを推奨します。メッセージを付けるには push サブコマンドと -m ( --message ) オプションを使います。メッセージを付与しておかないと、後で見返したときに「これなんの履歴だっけ？」となること請け合いです。とくに、git stash popせずstashリストに残りっぱなしだとこうなりがち。 # メッセージを付けてstashに退避 $ git stash push -m "WIP: ログイン画面のUI調整中" Saved working directory and index state On feature/new-login: WIP: ログイン画面のUI調整中 もちろん、メッセージ無しで退避することも可能です。 https://ysko909.github.io/posts/fundamentals-of-migration-on-entity-framework/ Fri, 22 Aug 2025 14:41:09 +0900 https://ysko909.github.io/posts/fundamentals-of-migration-on-entity-framework/ 概要 マイグレーションとは何か マイグレーション（Migration）とは、データベースの構造変更を安全かつ自動的に行うためのEntity Frameworkの機能です。 C#のモデルクラス（設計図）の変更を検出し、それに合わせてデータベースの実際のテーブル構造を更新するプロセスを指します。「移行」という意味の通り、データベースを現在の状態から新しい状態へと段階的に移行させる仕組みです。この機能を利用することで、データベースに対する操作やSQLの作成と実行と言った、従来だと当たり前のように行っていた作業を簡素化することが可能です。 最近はBlazor絡みのシステムに携わることが多いのですが、データベースをいじるときはEntity Framework（以下、EF）を使っています。今回はこのEFを利用する際に必要になるマイグレーションに関して、基本的な知識や実行方法についてまとめてみました。 EF＆マイグレーションのメリット SQL不要：C#だけで完結 エラー減少：自動生成でヒューマンエラー防止 開発スピードUP：数分でDB更新 事前準備：プロジェクトにEF Coreを導入する マイグレーションを始める前に、まずはBlazorプロジェクトにEntity Framework Core (EF Core) を導入し、データベースと通信できるように設定しましょう。ここが全ての土台となります。 ステップ1：必要なパッケージのインストール Visual Studioの「パッケージマネージャーコンソール」で以下のコマンドを実行し、EF Coreに必要なツールをインストールします。 # データベースプロバイダー (ここではSQL Server) Install-Package Microsoft.EntityFrameworkCore.SqlServer # EF Coreのコマンドラインツール Install-Package Microsoft.EntityFrameworkCore.Tools ステップ2：接続文字列の設定 データベースの場所や認証情報を定義します。プロジェクトルートにあるappsettings.jsonファイルに、以下のようにConnectionStringsを追加します。 { "ConnectionStrings": { "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=MyBlazorAppDb;Trusted_Connection=True;" }, "Logging": { // ... }, "AllowedHosts": "*" } Server=(localdb)\\mssqllocaldb: Visual Studioと一緒にインストールされる開発用のSQL Serverです。 Database=MyBlazorAppDb: これから作成するデータベース名です。 ステップ3：DbContextの登録 アプリケーション全体でデータベース接続を使い回せるように、Program.csにDbContextを「サービス」として登録します。これは「依存性の注入（DI）」と呼ばれる仕組みで、「必要な時に自動でDbContextを準備してください」と.NETにお願いするおまじないのようなものだと思ってください。 Program.csファイルを開き、builder.Build()の前に以下のコードを追加してください。 // using Microsoft.EntityFrameworkCore; をファイルの先頭に追加 var connectionString = builder. https://ysko909.github.io/posts/remote-desktop-disconnected-with-error-code-0x3-in-windows11/ Tue, 22 Jul 2025 10:57:43 +0900 https://ysko909.github.io/posts/remote-desktop-disconnected-with-error-code-0x3-in-windows11/ 概要 2025年6月ごろ？あたりから、Windows 11のPC環境へのリモートデスクトップ接続時に、「エラーコード 0x3」エラーメッセージと共にセッションが突然終了する事象が発生するようになりました。この切断ですが、リモートデスクトップ接続を開始してから短い場合だと30秒くらいでエラーを吐きつつ切断されてしまうため、かなりストレスです。いつまで経ってもエラーが出ず、正常に接続が継続されるケースもあるので、余計鬱陶しさに拍車がかかります。 というわけで、このエラーをどうにかすべく調査した備忘録です。結果的に自分の環境では接続状況が改善しましたが、他の環境で改善することを保証するものではないので、その点ご了承ください。 エラー内容 表示されるエラーは、下記のようなメッセージです。 [Window Title] リモート デスクトップ接続 [Content] リモート デスクトップ サービス セッションが終了しました。次のいずれかが原因と考えられます: 管理者がこのセッションを終了させました。 接続の確立中にエラーが発生しました。 ネットワークに問題が発生しました。 この問題を解決するためのヘルプ情報については、ヘルプとサポートで、リモート デスクトップに関するセクションを参照してください。 [^] 詳細の非表示(D) [OK] [Expanded Information] エラー コード: 0x3 拡張エラー コード: 0x11 タイムスタンプ (UTC): mm/dd/yy hh:mm:ss xx 上記はアクセスしている側のPC、つまりアクセス元に表示されるエラーですが、アクセス先のPCにも内容は異なるもののエラーがイベントに記録されていました。 「Microsoft Remote Display Adapter」・・・？知らんぞ、そんなもの。調べてみると、デバイスマネージャーのディスプレイアダプター内に存在するデバイスでした。 コイツか・・・どうしてくれよう(/・ω・)/ 原因を探る この場合では、グラフィックスドライバーの不具合と判断しました。上記のエラーメッセージにも「ユーザーモードドライバーのクラッシュのため」というメッセージが存在し、「デバイスに一時的にアクセスできない」という状況から、この「Microsoft Remote Display Adapter」というデバイスについて何らかの異常が発生している、と考えます。 リモートデスクトップは、アクセス先PCのグラフィックスドライバー（特にWDDM: Windows Display Driver Model）を利用して画面をレンダリングします。このドライバーに何らかの問題や不具合があると、セッションが不安定になり切断の原因となります。 なお、クラッシュしたあとでデバイスマネージャーを確認すると、「Microsoft Remote Display Adapter」が表示されていませんでした。これもドライバーに問題があることを示していると考えられます。 解決策 ドライバーが原因なら、基本的な対処はドライバーを更新するか修復するかです。つまり、アクセス先PCのグラフィックスドライバーが古い、または破損している可能性を考慮し、グラフィックスカードの製造元から最新のドライバーをダウンロードしてインストールを実行することで、エラーを解消するわけです。なお、今回ドライバーインストールを実施する対象は、リモートデスクトップ接続のアクセス先PCです。 製造元の公式サイトにアクセスし、最新のドライバーをダウンロードします。 インストーラーの指示に従い、インストールを実行します。 インストール後、PCを再起動します。 今回はDell製のPCを使用していたため、Dellの公式サポートページからドライバーをダウンロードしました。製造元が異なる場合は、NVIDIA、AMD、Intelなど、各社の公式サイトからダウンロードしてください。 ここで、既存のドライバーがインストールしようとしているドライバーと同じバージョンだったとしても、既存のドライバーが破損している可能性を考慮して必要なドライバーはすべてインストールすることをオススメします。 また、インストーラーによっては「クリーンインストール」か「カスタムインストール」を選択できる場合があるかもしれませんが、この場合はクリーンインストールのほうがいいかもしれません。というのも、グラフィックスドライバーに含まれるもののうち何が原因でこのエラーが出ているかがはっきりしないため、特定のドライバーのみをピックアップしてインストールする「カスタムインストール」とは相性が悪いためです。 上記の方法に従いドライバーを再インストールしたところ、リモートデスクトップ接続が安定するようになりました。よかった。 他の対処法 リモートデスクトップの設定変更 デバイスマネージャーを確認した際、「Microsoft Remote Display Adapter」がそもそも存在しない、というケースを確認しました。このプロセスがクラッシュした際、クラッシュしたままで再起動されなかった場合に発生するようです。 https://ysko909.github.io/posts/blazor-web-app-configration/ Mon, 14 Jul 2025 12:23:15 +0900 https://ysko909.github.io/posts/blazor-web-app-configration/ 概要 自分はメインのエディタをVisual Studio Codeを使ってたせいで、Blazorアプリを新規作成するときは大抵dotnet new blazorwasm -o MyBlazorAppのようにコマンドラインで実行しちゃってます。が、BlazorアプリをVisual Studio 2022（以下、VS2022）を使って開発する際はこの方法じゃなくて、ウィザードを利用する方法が主流です。その際は、開発するアプリの仕様についてウィザードに設定する必要があります。 この記事では、これらの項目をどのように設定すればいいか、作成したいアプリケーションとともに考えます。かなり自分目線の備忘録的意味合いが強いので、その点ご了承ください。 入力項目 フレームワーク (Framework) アプリが動作する基盤となる.NETのバージョンを選択します。 .NET 8.0 (長期的なサポート - LTS): Long-Term Supportの略で、長期間にわたってセキュリティパッチやバグ修正が提供される安定バージョンです。商用プロジェクトや長期間運用するシステムでは、こちらを選択するのが一般的です。 その他のバージョン (例: .NET 9.0): Standard-Term Support (STS) やプレビュー版が含まれます。最新の機能を試したい場合や、短いライフサイクルのプロジェクトに適していますが、サポート期間はLTSより短くなります。 なお、現状ではサポート期間は以下の通り設定されています。 バージョン 開始日 終了日 .NET 9 2024年11月12日 2026年5月12日 .NET 8 (LTS) 2023年11月14日 2026年11月10日 基本的に.NETのLTSは偶数バージョンに設定されており、奇数バージョンはSTSです。そのため、直近の偶数バージョンを選択することで自動的にLTSを選択できます。これについては、直近偶数バージョンの指定で決め打ちして問題ないと思います。 認証の種類 (Authentication type) ユーザー認証の方式を選択します。 なし (None): 認証機能を組み込みません。 個別のアカウント (Individual Accounts): ASP. https://ysko909.github.io/posts/create-code-to-analyze-access-mdb-reports/ Sun, 22 Jun 2025 10:21:55 +0900 https://ysko909.github.io/posts/create-code-to-analyze-access-mdb-reports/ 背景と目的 Microsoft Accessで長期間運用されているデータベースシステムでは、レポート機能が業務上重要な役割を担っていることが多くあります。とくに紙ベースで運用されてきた現場などでは顕著でしょう。しかし、システムの改修やWebアプリケーションへの移行などを検討する際、これらのレポートの正確な仕様を把握することは大きな課題となります。ドキュメントが古くなっていたり、そもそも存在しなかったりする場合、手作業で各レポートのデザインやVBAコードを調査するには膨大な時間と労力が必要です。 つまり、これも大抵の場合はメチャクチャ大変ってことです＿(　_´ω`)_ﾍﾟｼｮ このVBAスクリプトは、このような背景から既存のAccessデータベース内に存在するすべてのレポートオブジェクトの技術的な仕様を自動的に調査・分析し、その結果をMarkdown形式のレポートとして出力することを目的としています。 このコードは、これらの課題に対応するため、以下のニーズに応えることを目指しています。 レポート仕様の効率的な把握: プロジェクト内の全レポートについて、データソース、レイアウト、表示項目、VBAコードやマクロの利用状況、ページ設定といった技術仕様を自動的に抽出し、一覧化します。 標準化されたドキュメントの自動生成: 分析結果を、構造化され視覚的に理解しやすいMarkdown形式で、レポートごとに出力します。これにより、システム仕様書や移行ドキュメントの基礎資料を効率的に作成できます。 移行・改修計画の支援: Webアプリケーションなど新しいシステムへレポート機能を移行する際に、既存レポートの機能を正確に理解し、新システムでの要件定義や設計を行うための客観的な情報を提供します。 現状把握とブラックボックス化の軽減: 詳細な仕様が不明なレポートについても、その構造や設定の概要を可視化し、理解の一助とします。 実行環境 今回のソースコードは、以下の環境で動作を確認しています。 Office Professional 2021 Visual Basic for Applications 7.1 ソースコード Option Compare Database Option Explicit ' 統合MDB分析ツール (全フォームのVBAコード分析対応) ' データベース構造の包括的な把握と、新システム移行のための機能分析を支援 Sub AnalyzeAllReportSpecificationsToMarkdown() ' プロジェクト内の全レポートの仕様を調査し、個別のMarkdownレポートを生成する Dim rptObj As AccessObject Dim reportName As String Dim strFilePath As String Dim intFileNum As Integer Dim vbProj As Object ' As VBIDE.VBProject Dim vbCrntProj As Object ' As Application. https://ysko909.github.io/posts/create-code-to-analyze-access-mdb-forms/ Mon, 09 Jun 2025 10:33:54 +0900 https://ysko909.github.io/posts/create-code-to-analyze-access-mdb-forms/ 背景と目的 Microsoft Accessで開発されたアプリケーション、特に多くのフォームを持つものは、時間と共に内部のVBAコードが複雑化し、その全体像を把握することが難しくなる傾向があります。ドキュメントが古くなったり、存在しなかったりすると、システムのメンテナンス、改修、さらには将来的な移行計画において、大きな困難とリスクを伴います。 つまり、大抵の場合はメチャクチャ大変ってことです＿(　_´ω`)_ﾍﾟｼｮ 小規模なシステムならともかく、年月を経るに従って大抵は規模が大きくなります。そのため、手作業で各フォームのVBAコードを調査し、その内容を理解・整理するには膨大な時間と労力が必要です。 そこで、現状のシステムに含まれるフォームについて、構文的・構造的な特徴を抽出する分析用コードを作成しました。このVBAスクリプトは、以下のニーズに応えることを目指しています。 網羅的な現状把握の自動化: Accessデータベース内に存在する全てのフォームを対象とし、それぞれのVBAコードに含まれる構造や特徴を自動的に抽出します。 標準化されたドキュメント生成: 分析結果を、構造化され視覚的に理解しやすいMarkdown形式のレポートとして、フォームごとに出力します。これにより、手作業によるドキュメント作成の負担を軽減し、一貫性のある基礎資料を提供します。 移行・改修の意思決定支援: 各フォームのVBAコードの複雑さ、特定のAccess機能や外部連携の使用状況、イベント処理のパターンなどを明らかにすることで、移行や改修の優先順位付け、工数見積もり、リスク評価のための客観的な情報を提供します。 コード品質に関する洞察: GoToステートメントの使用頻度やエラー処理の実装状況など、コード品質に関連する情報を収集し、改善点を見つけるための手がかりを提供します。 開発・保守の効率化: 既存コードの理解を助け、開発者間の情報共有を促進することで、開発・保守作業の効率化に貢献します。 これにより、構造的な分析はコードに任せて、人間は意味的な分析に注力できます。あくまでも、このコードが分析できるのは構造的な部分ですので、その点はご承知おきください。 なお、このコードの調査対象はフォームのみであり、Accessプロジェクトの包括的な調査は別の記事にて公開しています。良ければご参照ください。 実行環境 今回のソースコードは、以下の環境で動作を確認しています。 Office Professional 2021 Visual Basic for Applications 7.1 ソースコード Option Compare Database Option Explicit ' 統合MDB分析ツール (全フォームのVBAコード分析対応) ' データベース構造の包括的な把握と、新システム移行のための機能分析を支援 Sub AnalyzeAllFormsVBACodeToMarkdown() ' プロジェクト内の全フォームのVBAコードを分析し、個別のMarkdownレポートを生成する Dim frmObj As AccessObject Dim formName As String Dim strFilePath As String Dim intFileNum As Integer Dim vbProj As Object ' As VBIDE. https://ysko909.github.io/posts/analyze-access-file/ Wed, 04 Jun 2025 09:48:55 +0900 https://ysko909.github.io/posts/analyze-access-file/ 背景と目的 Accessデータベースは、その手軽さから広く利用されていますが、長期運用や複数人による改修、ドキュメントの不備などにより、内部構造が複雑化し、現状把握が困難になることがあります。よくあります。このような状況は、メンテナンス性の低下やシステム移行時のリスク増大に繋がります。このVBAソースコードは、そんなMicrosoft Accessデータベース（.mdbまたは.accdbファイル）の包括的な分析を行い、その結果をMarkdown形式のレポートとして出力します。 具体的には、データベースの構造を詳細に把握し、将来的なシステム移行や改修を検討する際に重要となる機能的な側面を特定するための情報を、Markdown形式で出力します。利用方法も簡単で、このソースコードを分析したいMDB内にコピぺして実行するだけで良いので、あとは実行結果が出力されるまで待って分析作業に着手するだけです。 このコードは、これらの課題に対応するため、以下のニーズに応えることを目指しています。 視覚的に分かりやすいドキュメント作成：データベースの構成要素や主要なプロパティを、Markdown形式で見出し、リスト、コードブロックなどを用いて整理し、可読性の高いドキュメントを自動生成します。 効率的な現状把握：既存データベースの構造や機能概要を、整形されたレポートを通じて迅速に把握できるようにします。 移行計画・改修の初期情報収集：新システムへの移行や大規模な改修を検討する際、どの機能が重要で、どこに複雑なロジックが集中しているか、外部システムとの連携はどうか、といった初期分析情報を、より理解しやすい形式で提供します。 ブラックボックス化の軽減：詳細な仕様が不明なデータベースでも、その構造や機能の概要を、構造化されたレポートを通じて把握する手がかりを提供します。 なお、実行時間はAccessプロジェクト内オブジェクトの数やサイズに依存します。そのため、大規模なものほど処理に時間がかかりますので、処理中はコーヒーブレイクでも取ることをお勧めします(/・ω・)/ 実行環境 今回のソースコードは、以下の環境で動作を確認しています。 Office Professional 2021 Visual Basic for Applications 7.1 ソースコード Option Compare Database Option Explicit ' 統合MDB分析ツール ' データベース構造の包括的な把握と、新システム移行のための機能分析を支援 Sub GenerateMdbAnalysisReportMarkdown() ' メインプロシージャ: レポート生成の起点 ' レポート出力先を設定 Dim strFilePath As String strFilePath = CurrentProject.Path & "\MigrationAnalysisReport.md" ' ファイルをオープン Dim intFileNum As Integer intFileNum = FreeFile Open strFilePath For Output As #intFileNum ' レポートヘッダー (Markdown形式) Print #intFileNum, "# MDB総合分析レポート (構造把握 & 移行検討)" Print #intFileNum, "" Print #intFileNum, "**データベース:**`" & CurrentProject. https://ysko909.github.io/posts/how-to-unlock-password-protected-vba-code/ Fri, 16 May 2025 11:33:37 +0900 https://ysko909.github.io/posts/how-to-unlock-password-protected-vba-code/ 概要 VBAコードが、パスワードで保護されたMDBファイルを保守しなければならない。なのに前任者が退職しておりパスワードがわからない・・・というケースは往々にしてあります。このようなとき、VBAコードの保護を解除する方法について、解除できる可能性が高いと考えられる順に、いくつかの方法を検討してみます。 免責事項 ここに記載した情報は、あくまで技術的な可能性に関するものであり、特定の方法の成功を保証するものではありません。また、これらの方法の実行によって生じたいかなる損害についても責任を負いかねます。パスワード解除ツールの使用やファイルの直接編集などは、ご自身の責任と判断において、関連する法律や倫理規定を遵守の上、慎重に行ってください。 また、以下の方法における「解除できる可能性」は、完全に個人的な経験に則しています。そのため、その順番や実現可能性についても、必ずしも正確ではないことにご留意ください。 重要な前提 これから説明する方法は、もっぱら技術的な可能性に基づくものです。そのため、実行にあたっては組織内において規定されたセキュリティポリシーや法務・倫理規定を遵守することが最優先になります。 作業前には、対象のMDBファイルの完全なバックアップを必ず作成し、作業はバックアップしたコピーファイルに対して行ってください。オリジナルファイルは絶対に直接編集しないでください。 以下の方法は、パスワード保護の解除を保証するものではない点にご留意ください。ただし、パスワードロックを解除できる可能性が高いと思われる順で言及しています。 パスワード解除の方法 サードパーティ製 VBAパスワード解除・回復ツール 先ほど、「こういうケースは往々にして存在する」と述べたとおり需要は多いのでしょう、インターネット上にはVBAのパスワード解除をうたったツールが多数存在します。これらは、Access VBAのパスワードを解除したり、回復したりすることを目的とした専用のサードパーティ製ソフトウェア（有償・無償あり）です。 これらのツールは、AccessのVBAパスワード保護メカニズムの既知の弱点や特定のアルゴリズムを解析して作られていることが多く、比較的高い成功率が期待できます。前任者が設定したパスワードの複雑さやAccessのバージョンにもよりますが、多くの場合、最も手軽かつ成功の可能性が高い方法と言えます。 一般的な動作原理 ツールによって異なりますが、一般的には以下のようなアプローチを取るようです。 パスワード情報を直接ファイルから削除または無効化する。 パスワードを特定の値（例：空文字や既知の文字列）にリセットする。 総当たり攻撃や辞書攻撃を組み合わせてパスワードを特定する（回復ツールの場合）。 手順 信頼できるVBAパスワード解除/回復ツールを選定し、入手します。 ツールをPCにインストールまたは実行します。 ツールに対象のMDBファイル（コピー）を指定します。 ツールの指示に従って、パスワード解除または回復処理を実行します。 処理後、MDBファイルを開き、VBAエディタ（Alt + F11）でコードにアクセスできるか確認します。 この方法の注意点 ツールの信頼性：インターネット上には多くのツールがありますが、中にはマルウェアやスパイウェアが含まれているものも存在します。評判の良い、信頼できる開発元やレビューの多いツールを選んでください。公式の配布元からダウンロードすることが重要です。 試用版の機能：無償版や試用版は機能が制限されている（例：パスワードの最初の数文字しか表示しない、解除機能がないなど）場合があります。 作業PCの隔離：もしツールの安全性が完全に確認できない場合は、インターネットから隔離されたテスト環境や仮想マシン上で作業することを検討してください。 アンチウイルスソフト：最新のアンチウイルスソフトでツール自体をスキャンすることも推奨されます。 データベースファイルのバイナリ編集 この方法は、MDBファイルをバイナリエディタ（Hexエディタとも呼ばれます）で直接開き、VBAプロジェクトのパスワードが格納されている特定の部分を書き換えることで、パスワード保護を無効化しようとするものです。Accessのファイル構造やVBAパスワードが格納される仕組みに関する知識があれば、直接的なアプローチとして成功する可能性があります。しかし、高度な知識と細心の注意が必要です。 手順 信頼できるバイナリエディタを入手します。 対象のMDBファイル（コピー）をバイナリエディタで開きます。 VBAプロジェクトのパスワードに関連する特定のバイトパターンやオフセットを探し出し、それを無効な値や既知の値に書き換えます。（この特定箇所を見つける情報は、インターネット上の技術フォーラムなどで共有されている場合がありますが、Accessのバージョンによって異なることがあります。） 変更を保存し、MDBファイルを開いてVBAコードにアクセスできるか確認します。 この方法の注意点 ファイル破損の非常に高いリスク：この方法は、一歩間違えるとMDBファイルを完全に破損させ、二度と開けなくなる可能性があります。作業は必ずコピーファイルに対して行い、編集箇所や元の値を正確に記録してください。 専門知識が必須：MDBファイルの内部構造や16進数データに関する深い理解が必要です。知識がないまま試みるのは極めて危険です。 情報の正確性：インターネット上で見つかる編集箇所の情報が、お使いのAccessのバージョンや状況に適合するとは限りません。誤った情報を元に編集すると、ほぼ確実にファイルを破損させます。 社内ポリシー：このような直接的なファイル編集は、社内のITセキュリティポリシーで禁止されている場合があります。事前に確認が必要です。 VBAコード抽出ツール これらのツールは、必ずしもパスワードを「解除」するわけではなく、MDBファイルからVBAコードのテキスト部分を「抽出」することを試みます。パスワードによってVBAプロジェクトへのアクセスがブロックされていても、コードデータ自体はファイル内に特定の方法で格納されているため、それをサルベージしようとするアプローチです。抽出に成功すれば、パスワード解除の手間なしでコードの内容を確認したり、新しいMDBファイルに再実装したりできる可能性があります。 手順 VBAコード抽出ツールを選定し、入手します。 ツールに対象のMDBファイル（コピー）を指定します。 ツールを実行し、VBAコードの抽出を試みます。 抽出されたコード（通常はテキストファイルなどに出力される）の内容を確認します。 この方法の注意点 ツールの信頼性：サードパーティ製解除ツールと同様に、マルウェアのリスクに注意し、信頼できるソースから入手してください。 抽出コードの完全性：抽出されたコードが完全である保証はありません。一部が欠けたり、文字化けしたり、破損している可能性があります。特にフォームやレポートに関連付けられたモジュールなど、複雑な構造の場合は正確な抽出が難しいことがあります。 パスワードは解除されない：この方法はコードを見るための一時的な手段であり、MDBファイル自体のパスワード保護が解除されるわけではありません。コードを修正して元のファイルに戻すには、やはりパスワード解除が必要です。 推測可能なパスワードの試行 もしコードの保護に用いるパスワードについて、前任者がたとえば「0000」のように非常に単純な文字列だったり、会社名、プロジェクト名など、推測しやすいものを設定していた場合に限り、成功する可能性がある方法です。つまり、正解に行きつくまで思い当たる選択肢すべてを試行する「総当たり」的な方法です。 https://ysko909.github.io/posts/create-iso-file-in-powershell/ Fri, 02 May 2025 11:28:47 +0900 https://ysko909.github.io/posts/create-iso-file-in-powershell/ 概要 この記事では、Windows 10/11環境下において、標準搭載されたPowerShellの機能のみでフォルダの内容をISOファイルとして退避しアーカイブする方法についてメモします。 従来、New-ISOFileコマンドレットがISOファイル作成の簡便な手段として存在しました。が、現在では標準的な提供はされていません。しかしながら、コミュニティによって開発された代替スクリプトを活用することで、PowerShell単体でフォルダからISOファイルを生成することが今でも可能だったりします。ブータブルISOファイルの作成などの高度な機能には対応していませんが、単純にフォルダの内容をISOファイルとして保存したい場合には十分実用的です。 今回はその代替スクリプトを利用し、PowerShellのみでフォルダからISOファイルを生成する手順を解説します。 PowerShellによるISOファイル作成の利点 セキュリティ: どんなアブない機能が搭載されているかわからない第三者製ソフトウェアを回避可能なので、セキュリティ上のリスクを低減できます。 簡便性: 基本的にWindowsにはPowerShellが既にインストールされているため、追加のソフトウェアは不要です。 自動化: スクリプトによる実行により、ISOファイル作成処理自体は勝手にパソコンがやってくれます。 必要なスクリプトの取得 今回解説する方法では、以下の2つのPowerShell関数を使用します。 New-ISOFileFromFolder: 指定されたフォルダの内容に基づいてISOファイルを作成する主要な関数。 Write-IStreamToFile: ストリームデータをファイルに書き出すための補助関数。 これらの関数は、PowerShell Galleryにて公開されています。以下の手順に従い、これらの関数を利用可能な状態にしてください。 PowerShellの起動 まずPowerShellを起動します。スタートメニューから「powershell」を検索し実行してください。この際、管理者権限である必要はありません。 スクリプトの定義 次に、以下の2コードをそれぞれPowerShellコンソールにコピー＆ペーストし、実行（改行キーを押下）します。これにより、New-ISOFileFromFolder関数とWrite-IStreamToFile関数が現在のPowerShellセッションで使用可能になります。 まずWrite-IStreamToFile関数です。 function Write-IStreamToFile([__ComObject] $istream, [string] $fileName) { # NOTE: We cannot use [System.Runtime.InteropServices.ComTypes.IStream], # since PowerShell apparently cannot convert an IStream COM object to this # Powershell type. (See http://stackoverflow.com/a/9037299/223837 for # details.) # It turns out that .NET/CLR _can_ do this conversion. https://ysko909.github.io/posts/fundamentals-of-visual-basic-dot-net/ Fri, 11 Apr 2025 16:24:08 +0900 https://ysko909.github.io/posts/fundamentals-of-visual-basic-dot-net/ はじめに 令和のこの世になって、Visual Basic .NET（以下、VB.NET）で開発された資産をメンテする必要が出てきたため、勉強がてら資料を作成しました。 この記事の最終的な目標は、VB.NETの基本的な仕組みを理解し、簡単なプログラムを作成できるようになることです。 Visual Basic .NETとは Visual Basic .NETは、Microsoft社が開発したプログラミング言語の一つです。特に、私たちが日常的に使っているWindows上で動作するアプリケーション（ソフトウェア）を作成するのに適しています。 VB.NETの大きな特徴は、他のプログラミング言語と比較して、人間にとって読み書きしやすい構文（文法）を持っていることです。まるで、箇条書きで指示を出すように、比較的直感的にプログラムを記述することができます。 また、VB.NETは「.NET」（ドットネット）という、Microsoftが提供する大きな開発基盤の上で動作します。この.NETは、プログラム開発を助けるための様々な機能（部品や道具箱のようなもの）を提供しており、VB.NETはその恩恵を受けて、効率的にプログラムを作成することができます。例えるなら、VB.NETは「.NET」という名の、非常に設備の整った大きなキッチンで使える、使いやすい調理器具の一つ、といったところでしょうか。 対象読者 この記事は、以下のような方を対象としています。 プログラミングに初めて触れる方 他のプログラミング言語の経験はあるが、VB.NETは初めて学ぶ方 業務でVB.NETを使用する必要があり、基礎から学びたい方 開発環境について この記事では、プログラムを作成するための統合開発環境（IDE：Integrated Development Environment）として、「Visual Studio 2022」を使用します。Visual Studioは、プログラムの記述、間違い探し（デバッグ）、実行などを効率的に行うための、高機能なソフトウェアです。次の章で、このVisual Studioの準備について説明します。 開発環境のセットアップ プログラミングを始めるには、まずそのための道具、つまり「開発環境」を整える必要があります。料理をするのにキッチンや調理器具が必要なのと同じですね。VB.NETでの開発では、主に「Visual Studio」というソフトウェアを使用します。この章では、Visual Studioの準備と基本的な使い方について学びましょう。 Visual Studio 2022とは Visual Studioは、Microsoft社が提供する「統合開発環境（IDE: Integrated Development Environment）」と呼ばれるソフトウェアです。 「統合開発環境」と聞くと難しく感じるかもしれませんが、要するにプログラム開発に必要な様々なツールが一つにまとまった、非常に高機能な作業台のようなものです。 コードを書く（エディター）: プログラムの指示を書き込むためのテキストエディター機能です。文字の色分けや入力補助など、書きやすくするための機能が充実しています。 デザインする（デザイナー）: Windowsアプリケーションの画面（見た目）を、まるで絵を描くように部品を配置して作成できます。 間違いを探す（デバッガー）: プログラムが思った通りに動かない場合に、どこに問題があるのかを探し出す手助けをしてくれます。虫眼鏡で問題箇所を探すようなイメージです。 組み立てる（コンパイラー）: 人間が書いたプログラムコードを、コンピューターが理解できる言葉（機械語）に翻訳してくれます。 管理する（ソリューションエクスプローラー）: 作成するプログラムに関連するファイル（設計図や部品リストなど）を整理・管理してくれます。 このように、Visual Studioがあれば、プログラム作成の様々な工程をスムーズに進めることができます。 Visual Studioのインストール Visual Studio 2022は、Microsoftの公式サイトからダウンロードしてインストールできます。インストール時には、「ワークロード」と呼ばれる、開発したいものの種類に応じた機能セットを選択する必要があります。VB.NETでWindowsアプリケーション（Windows Formsなど）を作成する場合は、「.NET デスクトップ開発」というワークロードを選択してください。なお、必要なワークロードが不明である場合は、リーダーなどの上席者に確認してください。 インストール手順 Microsoftの公式からインストーラーをダウンロードして実行します。開発環境という性質上、インストール準備のためのダウンロードもそこそこ時間がかかります。 インストールするワークロードを選択する。 前述のとおり、ここでは「.NET デスクトップ開発」を選択してください。なお、他にインストールすべきコンポーネントがある場合、個別にインストールするコンポーネントを選択可能です。 3. https://ysko909.github.io/posts/fundamentals-of-roo-code/ Mon, 17 Mar 2025 09:48:05 +0900 https://ysko909.github.io/posts/fundamentals-of-roo-code/ 概要 近年、AI技術の進化により、プログラミングの現場でもAIを活用した開発支援ツールが注目を集めています。その中でも、Visual Studio Code（VSCode）の拡張機能である「Roo Code（旧Roo Cline）」は、AIによるコード生成や編集を支援し、開発効率を大幅に向上させるツールとして人気です。 この記事では、Roo Codeの概要、導入方法、メリット・デメリット、そしてGoogleのGemini APIと連携した具体的な活用方法について解説します。 Roo Codeとは？ Roo Codeは、VSCode上で動作するAIコーディング支援ツールです。自然言語による指示やコードのコンテキストを理解し、適切なコードの生成、編集、補完などを実行します。 以前は「Roo Cline」という名称でしたが、バージョン3.2以降で「Roo Code」に名称変更されました。 Roo Codeの主な機能 コード生成: 自然言語による指示から、コードを自動生成します。 コード編集: 既存のコードに対して、修正やリファクタリングを提案します。 コード補完: コードの文脈から、次のコードを予測して補完します。 ドキュメント生成: コードのドキュメントを自動生成します。 テストコード生成: コードに対応するテストコードを自動生成します。 Roo Codeのメリット 開発効率の向上: コード生成や編集の自動化により、開発時間を短縮できます。 コーディング品質の向上: AIによるコード提案により、品質の高いコードを作成できます。 学習コストの削減: 新しい言語やフレームワークの学習コストを削減できます。 アイデア出しの支援: コードのアイデア出しや設計を支援します。 Roo Codeのデメリット 生成されるコードの品質: 常に高品質なコードが生成されるとは限りません。生成されたコードは、必ずレビューとテストが必要です。 セキュリティ: APIキーなどの機密情報を適切に管理する必要があります。 インターネット接続: Roo Codeの利用には、インターネット接続が必須です。 Gemini API連携によるRoo Codeの活用 Roo Codeは、様々なAIモデルと連携可能ですが、ここではGoogleのGemini APIと連携した活用方法について解説します。 Gemini APIの準備 Google Cloud Platform（GCP）アカウントを作成し、Gemini APIを有効化します。 Gemini APIのAPIキーを取得します。このキーはあとでRoo Codeに設定します。 Roo Codeの導入 VSCodeを開き、拡張機能ビューを開きます。 検索ボックスに「Roo Code」と入力し、拡張機能をインストールします。 Roo Codeの設定 VSCodeでRoo Code拡張機能をインストールします。 Roo Codeの設定画面を開き、Gemini APIのAPIキーを設定します。 拡張機能の指示に従い、必要な設定を行います。基本的にはデフォルトの設定で問題ないかと思います。 https://ysko909.github.io/posts/fundamentals-of-gitignore/ Tue, 14 Jan 2025 12:01:18 +0900 https://ysko909.github.io/posts/fundamentals-of-gitignore/ はじめに Gitでプロジェクトを管理する際、すべてのファイルをバージョン管理する必要はありません。むしろ、適切に管理対象を選別することで、効率的で安全なプロジェクト運用が可能になります。本記事では、.gitignoreファイルの基礎から実践的な運用方法まで、GitHub公式テンプレートを活用しながら詳しく解説します。 .gitignoreファイルの基本 .gitignoreとは .gitignoreファイルは、Gitのバージョン管理から除外したいファイルやフォルダを指定するための設定ファイルです。テキスト形式で記述され、指定されたパターンに一致するファイルは自動的に無視されます。 なぜ.gitignoreが必要か Gitでプロジェクトを管理していると、「このファイルは管理したくないな…」と思うことがありますよね。そんなときに活躍するのが.gitignoreファイルです。では具体的に、なぜこのファイルが必要なのでしょうか？ リポジトリをスッキリと保つため 「リポジトリの容量が大きくなりすぎて、クローンに時間がかかる…」なんて経験ありませんか？ コンパイルして生成されるファイルや、node_modulesのような依存パッケージは、その度に自動生成できるので管理する必要がありません これらを除外することで、リポジトリのサイズを適切に保ち、git cloneやpullの操作がサクサク動くようになります 結果として、ストレージの使用量も最適化できます 機密情報を守るため 「あっ！APIキーをうっかりコミットしちゃった！」…こんなヒヤッとする経験は誰にでもあるはず。 APIキーやパスワードなどの機密情報を含むファイルを自動で除外 開発環境ごとに異なる設定ファイルも、誤ってコミットされるのを防げます チーム全体のセキュリティレベルを保つことができます 開発をスムーズに進めるため 「自分の環境では動くのに、チームメンバーの環境だと動かない…」というトラブル、よくありますよね。 各開発者の環境に依存するファイル（IDEの設定ファイルなど）を除外できる ビルド時に生成されるファイルやキャッシュを管理対象から外せる その結果、チームメンバー間での余計な競合を防ぎ、開発に集中できます 具体例を見てみましょう 普段の開発で遭遇する、こんな場面で.gitignoreが活躍します。 # 例えば、こんなファイルは管理したくないですよね /node_modules # npmパッケージ（数百MBになることも！） .env # 環境変数（APIキーなどの機密情報） .vscode/ # VSCodeの設定（人によって違う） *.log # ログファイル（その場限りの情報） dist/ # ビルド成果物（自動生成できる） これらのファイルを.gitignoreで除外することで、リポジトリは必要なソースコードだけをスッキリと管理でき、チーム開発もスムーズに進められます。つまり、.gitignoreは「不要なものを適切に除外する」ことで、プロジェクトの管理を効率的にしてくれる、とても便利な道具なんです。 .gitignoreファイルの書き方 基本的な記法 # コメント行 file.txt # 特定のファイルを無視 *.log # 特定の拡張子を持つすべてのファイルを無視 build/ # フォルダ全体を無視 /node_modules # ルートフォルダの特定フォルダを無視 **/*.tmp # すべてのフォルダ下の特定パターンを無視 !important.log # 無視リストから除外（管理対象として追加） パターンマッチングのルール / で始まる場合：プロジェクトルートからの相対パス * : 任意の文字列（フォルダ区切り文字を除く） ** : 任意のフォルダ階層 ! https://ysko909.github.io/posts/can-not-access-to-10080-on-web-browser/ Wed, 27 Nov 2024 15:54:02 +0900 https://ysko909.github.io/posts/can-not-access-to-10080-on-web-browser/ 概要 ChromeやFirefoxといった主要なブラウザでは、10080ポートがデフォルトでブロックされています。今回はそんな数年前の話のリバイバルです（それは、単に忘れていたと言う）。 とあるwebシステムを作成していたとき、考えなしにポート10080を指定してブラウザからアクセスしました。ところが、ブラウザ側でこのポートへのアクセスがブロックされてしまいました。ブラウザにこの仕様が追加されたのは2021年ごろと記憶していますが、そんなことすっかり忘れて今回の事態に陥って「そういえばそんな仕様あったな」って思い出すまで若干時間を無駄にした次第なので、ここでメモしておこうと思います。また忘れた頃に同じことすると思うので(;´Д｀) 10080ポートがブロックされる理由 簡単に言うと、セキュリティ対策のためです。10080ポートは、NAT Slipstreaming攻撃という（当時の）新たな攻撃手法に対するセキュリティ対策として、ブラウザがブロックするような仕様になっています。この攻撃は、特定のポートを利用してネットワーク内の他のデバイスに不正アクセスを試みるものです。 ブロックされるポートは10080だけではありません。Fetch StandardでBad portという扱いになっているポートは、このようにブロックされる対象です。このあたりのポートはBugzillaにも記載のあったポートです。 69 137 161 1719 6566 10080 このポートブロックに関してはFireFoxが先行していたようですが、Google Chromeもバージョン91以降からFirefoxに倣って、10080ポートをデフォルトでブロックするようになりました。 10080ポートへのアクセス方法 ここからはこのポートブロックを解除する方法について検討します。 webアプリ側のポートを10080以外に変更する 10080ポートをブロックする機能は、基本的にはセキュリティ対策のためのものですので、そのままブロックしておくのがベストな対応です。となると、アクセスする先のポートを変更し、ブロックされないポートに変更すべきでしょう。たとえば10080で指定していたポートを10085にする、などです。これであればブロック機能を確保しつつ、アクセスできるようになります。 ブラウザのブロックを解除する 何らかの理由で「どーー－しても10080ポートを利用する必要がある」というケースでは、ブラウザ側のブロック機能を解除する必要があります。ここではChromeにおいてブロック機能を解除する方法を記述します。記述しますが、推奨しません。 Chromeでの解除方法 デスクトップまたはタスクバーにあるChromeのショートカットを右クリックし、「プロパティ」を選択します。 「ショートカット」タブの「リンク先」欄の末尾にスペースを空けて--explicitly-allowed-ports=10080を追加します。 変更を適用し、Chromeを再起動します。 Firefoxでの解除方法 アドレスバーにabout:configと入力し、エンターキーを押します。 警告が表示されたら「危険を承知で使用」を選択します。 設定名検索欄にnetwork.security.ports.banned.overrideと入力し、新しい文字列として「10080」を追加します。 Firefoxを再起動します。 これらの手順により、一時的に10080ポートへのアクセスが可能になります。が、セキュリティの面からすれば、先述のとおり10080以外のポートを使用することが望ましいでしょう。 参考 Google Chrome blocks port 10080 to stop NAT Slipstreaming attacks Google deploys Chrome mitigations against new NAT Slipstreaming attack NAT Slipstreaming v2.0 NAT Slipstreaming v2 攻撃とブラウザ側の対策 Issues with Port 10080 【IBM i情報】Zend Server標準ポート10080のブラウザブロックについて Web Application開発に10080番ポートは使ってはいけない 10080ポートにつながらない原因、解決方法について分かりやすく解説 2. https://ysko909.github.io/posts/how-to-migrate-a-existing-wsl-to-a-new-pc/ Fri, 22 Nov 2024 14:30:47 +0900 https://ysko909.github.io/posts/how-to-migrate-a-existing-wsl-to-a-new-pc/ Windows上でのWSL（Windows Subsystem for Linux）の既存環境を別のWindowsパソコンへ移行する手順は、主にエクスポートとインポートのプロセスを通じて行います。また、WSLのバージョンによっては、少し簡単な方法で環境の移行が可能です。 前提条件 > wsl -l -v NAME STATE VERSION * Ubuntu-20.04 Running 2 移行元PCおよび移行先PCの双方で、上記のコマンドが実行できることを確認してください。実行できない場合は、WSL2の環境セットアップを実行してください。 ここでは、上記のとおりWSL2を対象としています。WSL1では動作しません。 > wsl --version WSL バージョン: 2.3.26.0 カーネル バージョン: 5.15.167.4-1 WSLg バージョン: 1.0.65 MSRDC バージョン: 1.2.5620 Direct3D バージョン: 1.611.1-81528511 DXCore バージョン: 10.0.26100.1-240331-1435.ge-release Windows バージョン: 10.0.22631.4317 PCによっては、上記のようにwsl --versionのコマンドが有効な場合があります。これは、もともとWindowsに組み込まれているWSLではなく、最新版の「WSL」です。この環境を利用するには，MicrosoftストアやGitHubからインストーラーをダウンロードし、インストールする必要があります。最新版の環境でも以下の手順は可能ですが、もう少し簡単な手順で移行できる--import-in-placeオプションが利用できます。 WSL環境の移行手順（エクスポートとインポート） 現在のWSL環境のエクスポート まず、移行元のPCでWSL環境をエクスポートします。これにより、WSLディストリビューションを.tarファイルとして保存します。 wsl --export <ディストリビューション名> <保存先のパス>\<ファイル名>.tar 例: wsl --export Ubuntu-22.04 D:\WSL\バックアップ\Ubuntu-22.04.tar なお、エクスポートの際に--vhdオプションを付与すると、tarファイルではなくvhdxファイルで出力されます。tarは圧縮ファイルであり、圧縮してから出力するため処理に時間がかかります。対して、vhdxファイルは現行環境のvhdxファイルから単純コピーするため、出力処理時間は短めです。ただし、tarファイルと比較すると出力されたvhdxファイルは非圧縮であるためサイズが大きくなり、記憶媒体を圧迫する可能性があります。ストレージの容量やネットワーク環境の具合を見て、どちらを利用するか決めると良いでしょう。 エクスポートしたファイルを移行先へコピー エクスポートした.tarファイルを、移行先PCにコピーします。環境の運用状況次第ですが、ファイルサイズが10GBを超えるケースもあります。この場合は、ファイルのコピーをrobocopyなどの専用ツールにより実行したほうがいいでしょう。エクスプローラーを使ったコピーでは失敗するケースもあるからです。とくにファイルサイズが大きいと、その傾向が強くなります。vhdxファイルで出力した場合、1つのファイルサイズが数十GBを超えることもあるため、エクスプローラーではなくツールによるコピーをオススメします。 移行先PCでのWSL環境のインポート 次に、移行先のPCでエクスポートした.tarファイルをインポートします。これにより、WSLディストリビューションが新しいPCにインストールされます。 wsl --import <ディストリビューション名> <インストール先のフォルダ> <エクスポートした.tarファイルのパス> 例: wsl --import Ubuntu-22. https://ysko909.github.io/posts/fundamentals-of-conditional-operator/ Mon, 07 Oct 2024 16:42:48 +0900 https://ysko909.github.io/posts/fundamentals-of-conditional-operator/ 概要 三項演算子（条件演算子、条件式）は、条件に基づいて異なる値を返すことができる演算子です。言ってしまえば、「簡易的なIF文」という感じです。if-else文と同様の機能を持ちますが、より簡潔な記述に振った機能が特徴的。そのため、「簡単な判定文をパッと書きたい」というシチュエーションでよく使われます。 一般的な記述形式は、条件 ? 値1 : 値2です。条件が真の場合、値1 が返されます。偽の場合は値2 が返されます。 各言語における三項演算子の書き方 プログラミング言語 if文 三項演算子 備考 Python if condition: action() action() if condition else other() Ruby if condition then action end condition ? action : other JavaScript if (condition) action() あるいは condition && action() condition ? action() : other() PHP if ($condition) action(); $condition ? action() : other(); Java if (condition) { action(); } condition ? https://ysko909.github.io/posts/fundamentals-of-docker-logs/ Wed, 06 Mar 2024 16:25:46 +0900 https://ysko909.github.io/posts/fundamentals-of-docker-logs/ 概要 docker logsコマンドは、Dockerコンテナのログを表示するために使用されます。以下では、docker logsコマンドの基本的な使い方と利用可能なオプションについて解説します。 基本的な使い方 docker logsコマンドの一般的な構文は以下の通りです。 docker logs [オプション] <コンテナ名またはID> 具体的な使用例として、コンテナ名がmy-containerの場合、以下のようにコマンドを実行します。 docker logs my-container このコマンドは、my-containerコンテナのログを表示します。 利用可能なオプション docker logsコマンドには、以下のオプションが利用可能です。 --details: ログに提供する詳細情報を表示します。 -f, --follow: ログの末尾を追跡し、新しいログが追加されるたびに表示します。 -n, --tail <数値>: 直近の指定した数値のログ行を表示します。デフォルトはすべてのログ行を表示します。--tailだから省略版は-tかなって思ったら-nなので注意。 --since <日時>: 指定した日時以降のログ行のみを表示します。日時はISO 8601形式（例: “2022-01-01T00:00:00Z”）で指定します。 --until <日時>: 指定した日時以前のログ行のみを表示します。日時はISO 8601形式で指定します。 -t, --timestamps: ログ行の前にタイムスタンプを表示します。省略版の-tはこっちで、--tailじゃないので注意。 これらのオプションは、必要に応じて組み合わせて使用できます。以下に具体的な使用例を示します。 ログの追跡とタイムスタンプの表示 docker logs -f --timestamps my-container 直近の10行のログの表示 docker logs --tail 10 my-container 特定の日時以降のログの表示 docker logs --since "2022-01-01T00:00:00Z" my-container 特定の日時以前のログの表示 docker logs --until "2022-01-01T00:00:00Z" my-container 備考 grepへのパイプはリダイレクトを併用する docker logsコマンドは、デフォルトでコンテナの標準エラー出力（stderr）に出力されるログを表示します。この仕様が、ログの出力結果をgrepでの抽出と食い合わせが悪いのです。 https://ysko909.github.io/posts/make-a-routine-time-with-phaser-js/ Sun, 25 Feb 2024 23:19:55 +0900 https://ysko909.github.io/posts/make-a-routine-time-with-phaser-js/ はじめに 朝のルーティンは、時計が読める大人でもなかなか上手くこなすのは難しいものです。これが時計がまだ読めない幼児の場合だと、ルーティンをこなすのが一層困難になるでしょう。 そこで、JavaScript（以下、JS）とJSのゲームライブラリであるPhaser.jsを使ったルーティンタイマーを作成することで、時計が読めない子供でもスムーズに朝のルーティンをこなせるようにしたケースを紹介します。 いきさつ 始まりは、実家に帰省した際に弟（既婚、子持ち）から聞いた「朝の子どもの支度がめちゃくちゃ大変」という話です。 弟「子供が全然登園準備できなくて、朝が超忙しい。」 俺「何歳だっけ？5歳？」 弟「そうそう。一応、自力で着替えも食事もできるはずなんだけど。」 俺「オメーとかが見てやればいいんじゃね？」 弟「オレもヨメさんも朝出るのが早いから、ずっとは見てやれないんだよ」 俺「んじゃ、その1人になったタイミングでボーっとしちゃうわけか」 弟「そうそう。」 俺「5歳じゃ時計読めないだろうから、XXXXってテレビ番組が始まったら着替え開始！って指示するのとかは？」 弟「もう試した。テレビをずっと見ちゃってダメだった。」 俺「うーん、じゃあアラームアプリ入れてスマホ持たせ・・・たらもっとダメだな。それこそずっと遊んでそうだ」 弟「そうなんだよねー。まだひらがなもちょっとしか読めないし、文字で指示するようなやつはダメだね」 俺「Amazonのアレクサとか、ああいうスマートスピーカーは？アラーム機能使って喋らせればいいんじゃね？」 弟「そんなんウチないもん」 俺「そうかぁ(´・ω・｀)」 彼の子はまだ時計が読めないため、出かけるまでどのくらい時間があるのかわからない状態です。その結果、朝食をゆっくり食べすぎてしまい、着替えや歯磨きなどの準備に手間取ってしまう模様。 こんな感じですかね。ちなみに、上記のイラストはCopilotのデザイナーに生成してもらいました。関係ないですが、AIすごいですね。 そのため、弟夫婦はそれを急かす形で厳しい表情をすることも多いようです。まぁ無理もないよね、朝は誰でも忙しい時間帯だし。なお、ひらがなやカタカナは勉強中のようで、読めたり読めなかったりする模様。 ちなみに、朝はテレビのリモコンを子供の手が届かないところに置いているそうです。なんでも、リモコンは使い方をなんとなく覚えているそうで、EテレとかYouTubeアプリを起動したりして勝手に見始めちゃうとか。すごいな5歳児。 課題 ここで解決すべき課題を整理します。 時計が読めないため、あとどのくらい猶予があるかわからない。 両親が見ておらず子供が1人で食事するタイミングがあり、その間は誰の目もない完全なフリー。 文字をまだ満足に読めないため、文章で指示されても理解が難しい。 そのため音声で指示できればいいが、自宅にスマートスピーカーがない。 まぁ、小さい子がいるご家庭あるあるじゃないかなーと思います。あるあるだよね？ 次は、これらの課題をクリアするための方法を検討します。 解決方針 先ほど挙げた課題をどう解決するか、方針を具体的に考えてみましょう。 ルーティンタイマーの作成：朝のルーティンをスムーズにこなせるようなタイマーを作成します。ただし、前述の通り普通に大人と同様の仕様でタイマーを実装すると、子供にはわかりにくいでしょう。そのため、子供向けの対策を用意する必要があります。 タスクの可視化：朝食や歯磨き、着替えなどの実行時にオプションタスクをすべて表示します。「これらのタスクをすべて完了すればOK！」という、朝のルーティンにおける明確なゴールを表現します。 簡単な指示の表示：タスクには、文字だけでなく、イラストやアイコンなどを使ってもわかりやすく表示します。保育園児がまだ文字を完全に理解できない場合でも、イラストで指示を理解できるようにします。 タスク消化を促す：子供が1人でタスクをこなせるよう働きかけます。また、画面操作ではなくタスクの消化を優先させるため、誰かが操作しなくても自動で画面更新される仕組みとします。 これらを実現することが解決の方針です。これにより、時計が読めない子供でも1人で朝のルーティンをスムーズにこなせるようになるでしょう。なるんじゃないかな。なるといいな。 既存のアプリは使えるのか 「そもそも作らなくても既存であるんじゃない？」とお思いでしょう。自分もそう思いました。なので、世のルーティンタイマーアプリをざっくり調べてみましたが、経過時間をプログレスバーや円弧が伸びることで表現するものがありました。この方法を使えば、残り時間の表現はできそうです。 ただ、さすがに音声で案内をしてくれるものは発見できませんでした。実行すべき行動の指示については、文字で指示したところで子供は読めないので、音声が無理ならイラストなどを使ってわかりやすく表現するしかなさそうです。が、ユーザーがアイコンを任意に設定できるアプリは見つけられませんでした。 まぁ、スマホのようなデバイスを幼児が使うような想定はしてないわけで、既存でアプリでどうにかするのは無理があります。そもそも、デバイスをむやみに触らせることは、あまり勧められたものではないでしょう。実際の功罪はともかく、少なくともベネフィットよりリスクのほうが高そう、というようにここでは判断しました。 ちなみに、アレクサのようなスマートスピーカーを導入することも考えました。が、「あれくしゃー、きょうのぽけもんはー？」と聞く子供をYouTubeかX（旧Twitter）で見かけた気がするので、多分あっさりとスマートスピーカーと喋ることを覚えて、ロクに指示を聞かないんじゃない？という気がします。特定の音声にだけ反応するように設定できるんだっけ？アレ。 そのため、「既存でないなら作るしかないよね」という結論になります。しょうがない、作るかー。 実装方法方法 解決方針は決まりました。作ります。あとはどのように実装するかです。 結論から言えば、Phaser.jsを活用して、ルーティンタイマーを作成する方向で実装します。 ルーティンタイマーとはなんぞや まぁここまででたくさん言及しましたが、改めて定義しておきましょう。 ルーティンタイマーは、朝のルーティンの各タスクごとに制限時間を設定し、タイマーが経過すると次のステップに進む仕組みです。たとえば、朝食の時間を10分、着替えの時間を5分と設定することで、自分の進捗状況をタイマーで確認しながらルーティンを進めることができます。タイマーが経過した場合には、次のタスクへ自動的に進むことで、タスクの進行具合を確認しながらスムーズなルーティンの実行が可能となります。 ルーティンタイマーを実装することで、以下の課題を解消することが期待できます。 朝の準備をスムーズに行うための時間配分の目安が欲しい 視覚的にどのくらい時間が経過したかが一目でわかるUIが必要 タスクごとに個別の時間を設定したい 準備にかかる時間のゆとりを視覚的に示したい 準備に遅れている場合はそれが一目でわかる演出が必要 なお、タスクは画面に一覧表示する方法と、現在のタスクのみを表示する方法があります。今回はタスク自体が少ないことから、一覧表示するものとしました。実行すべきタスクがすべて表示されていることで残りのタスクが明確になるから、という理由もあります。最初からすべて出てる方が、どんどん小出しにされるよりゴールが明確になっていいよね、という判断です。 どんなUIにしようか 結論から言うと、イラストとプログレスバーによる表現を採用しました。 ユーザーインターフェイス（以下、UI）のデザインは、幼児たちにとってわかりやすいUIを実装することが大切です。少なくとも文字を多用したUIはどうにもならない、ということはわかって頂けると思います。そりゃそうです、だって読めないんだもん。じゃあどうするかというと、文字以外でどうにかするしかないわけですね。 タスクはイラストで表現 タスクの表現はイラストを多用することで、幼児たちが直感的に理解できるようになります。たとえば、朝ごはんの時間では、食事をしている人のイラストを表示することで、何をするべきかをわかりやすく伝えることができます。また、歯磨きの時間では、歯ブラシや歯磨き粉のイラストを表示することで、何を使って何をするべきかを示すことができます。 時間経過はプログレスバーで表現 時間の経過は、文字による時間表記ではなく、プログレスバーなどの表現を採用します。幼児たちはまだ時計を読むことが難しいため、具体的な時間の表記よりも、時間がどれくらい経過したかを視覚的に理解しやすい方法が求められます。プログレスバーは、時間が経つにつれてゆっくりと進んでいくため、幼児たちに時間の経過を感じさせることができます。 https://ysko909.github.io/posts/copy-files-from-other-branch/ Wed, 10 Jan 2024 23:19:23 +0900 https://ysko909.github.io/posts/copy-files-from-other-branch/ 概要 たまに「任意のブランチに、他ブランチからファイルをコピーしたいなー」という場面があります。 たとえば、GitHub Pagesで公開するためにgh-pagesブランチにビルド済みのファイルのみ置いておきたい、という場合がそうでしょうか。この場合、mainブランチではビルド前のソースコードやアセット用ファイルなどの他に、npmやyarnでビルドしたビルド済みファイルがあると思います（これらのファイルやフォルダが.gitignoreの対象だったら、この限りではない）。gh-pagesブランチには、このビルド済みのファイルだけが必要なので、mainブランチから必要な分だけのファイルをコピーしたいわけです。 ここでは、別ブランチからファイルをコピーするときの手順についてメモしておきます。 コピー手順 ここで想定している操作としては、「任意のブランチに対して、mainブランチからファイルをコピーする」です。つまり、これから紹介する手順だと、mainブランチがコピー元になります。 別ブランチにファイルをコピーするには、git checkoutを利用します。一応、いったんコピー前にファイルのアドレスなどをgit showを使って確認しておいた方が良いと思います。 任意のブランチを新規作成する。 作成したブランチに切り替える。 git showコマンドでコピー元のファイルのアドレスを確認する。 git checkoutコマンドでファイルを新しいブランチにコピーする。 変更をコミットする。 ざっくり手順を書き出すと上記のようになります。このように、git checkoutを使ったファイルのコピーは、今いるブランチがコピー先になるのでこの点は注意が必要です。 任意のブランチを新規作成する git checkout -b new_branch おなじみの、ブランチを作成するコマンドを実行します。これで新規ブランチが作成できます。 作成したブランチに切り替える git checkout new_branch コピー先である、新規ブランチに移動します。 git showコマンドでコピー元のファイルのアドレスを確認する いったんコピー元のファイルについて、その在り処を確認しておきます。「もう場所もファイル名もバッチリわかってるぜ！」という場合は、この手順を飛ばしてしまってもいいと思います。 git show main:path/to/file1 git show main:path/to/file2 コピー元ブランチ名:ファイルパスの形式で指定します。 上記のコマンドを実行すると、指定したファイルの内容が表示されます。このとき、参照する対象についてファイルでなくフォルダを指定した場合は、そのフォルダに格納されているファイルの一覧が表示されます。 git checkoutコマンドでファイルを新しいブランチにコピーする いよいよ別ブランチからファイルをコピーしてきます。 git checkout main -- path/to/file1 path/to/file2 git checkoutを利用し、前の手順で確認したファイルパスを指定します。 上記を実行すると、現在のブランチにフォルダ構造ごとファイルがコピーされます。ファイル単体だけでなく、フォルダ構成もコピー対象であることに注意です。上記であれば、path/to/file1というフォルダ構成で現在のブランチにコピーされます。 もし、現在のブランチではコピー元とは別のフォルダ構成にしたい場合、いったんコピーしたあとでフォルダを新規作成しファイルを移動するなどして、フォルダ構成を変更する必要があります。ここだけは若干面倒かもしれません。 変更をコミットする git commit -m "Add some files from main" 現在のブランチでの変更をコミットします。これで今までの操作が当ブランチに反映されました。 参考 git show git checkout Git で特定のブランチからファイルをコピーする https://ysko909.github.io/posts/setup-raspberry-pi-from-remote/ Thu, 23 Nov 2023 22:54:44 +0900 https://ysko909.github.io/posts/setup-raspberry-pi-from-remote/ 概要 Raspberry Piは安価で購入できるシングルボードコンピュータです。さまざまなバージョンがありますが、現時点での最新かつ最速のものはRaspberry Pi 4シリーズです。 なお、上記の画像はラズパイのProductsから取得しました。 ラズパイは見た目通り、コンピュータ本体のみで販売されています。そのため、通常のコンピュータに必要な入出力装置や電源コードは含まれていません。ただ、一部の販売形態では、電源アダプターなどがセットになっている商品もあります。今回は、このようなパッケージされたものを購入しました。が、単体でラズパイを用意した場合は、これらの外部機器を別途自分で用意する必要があります。 ACアダプター ディスプレイ キーボード マウス 記憶媒体（MicroSD） （必要に応じて）LANケーブル （必要に応じて）スピーカーなどの音声デバイス ちなみに、リモート経由ではなくラズパイ単体でセットアップを実行する場合は、キーボードやマウスを有線のものにすることをオススメします。これらは「単純につなげるだけで使える」ので、ドライバーの用意やらインストールやらを考えなくて良いというのが理由です。自分は、大昔にどこかで買った有線のデバイスを引っ張り出してきました。 上記に挙げたリストのうち、LANケーブルなどは無線接続を設定するなどすれば必要ありません。そのため、ラズパイ単体でセットアップするなら上位5つが必須です。 しかし、VNC（Virtual Network Computing）を利用することでリモート経由でのインストールを実施することで、上記の入出力装置を省略し最低限「電源アダプターと記憶媒体」さえあればラズパイのセットアップができます。 ここでは、ラズパイとMacとVNCを使ったリモート経由によるセットアップの手順を記述します。 環境 今回のセットアップは以下の環境で実施しました。 MacBook Pro Raspberry Pi 3B+ 現在のラズパイにインストール可能なOSの最新版はBullseyeですが、今回はLegacyOSのBusterをインストールします（理由は後述）。 必要なもの リモート経由なら「デバイスは不要」と言いつつも、さすがに最低限のものは用意する必要があります。 ラズパイ本体 当然ですが、これがないと始まりません。 MacやWindows端末 今回はMacを使用しますが、Windows端末でも似た手順でセットアップできます。 MicroSD ラズパイは本体にSSDなどの記憶媒体を持っていないため、OSはMicroSDにインストールします。 カードリーダー 端末からMicroSDに必要なファイルをコピーするのに使用します。 電源アダプター ラズパイはUSBケーブル経由で電源を供給するため、ラズパイに適したアダプターが必要です。 MicroSDや電源アダプターがセットになっている商品も販売されています。ですので、自分で選定するのが手間だったり、とくにこだわりがない場合はセットを購入する方が楽かもしれません。場合によっては、ラズパイ用のケースやOSがインストール済みのMicroSDもセットに含まれていることもあります。 その他に、有線でネットワークに接続する場合はLANケーブル、音声の入出力を行いたい場合はスピーカーなども必要になります。今回はいったん無線でネットワークに接続し、音声の入出力は行わない前提で話を進めます。つまり、LANケーブルとスピーカーなどは利用しません。 手順 大まかな手順は以下の通りです。 OSの準備 ネットワーク設定 SSH有効化 Raspberry Piへ接続 VNC有効化 （必要に応じて）アプリケーションの設定など この手順を、ディスプレイやキーボードなどのデバイスをラズパイに接続することなく、Macとラズパイだけで行います。 https://ysko909.github.io/posts/fundamentals-of-scp-command/ Sun, 29 Oct 2023 23:21:48 +0900 https://ysko909.github.io/posts/fundamentals-of-scp-command/ 概要 scpコマンドは、ローカルマシンとリモートマシンの間で、ファイルをセキュアにコピーするためのコマンドです。場合によっては、ラズパイに対しても使うことがあるかもしれません。自分はよく使います。 基本的な使い方 このコマンドの基本的な形式は以下のとおりです。 scp 送信元のファイル 送信先のアドレス 基本はこの形なのですが、リモートとという「相手」がいることと認証を行う都合上、実際はもう少しごちゃごちゃした書き方になります。 scp ユーザー名@リモートホストのアドレス:リモートのファイルパス ローカルのディレクトリパス たとえば「リモートのファイルをローカルのフォルダへコピーする」場合、上記のように入力します。たしかに「送信元のファイル」と「送信先のフォルダ」を指定していますが、ユーザー名や相手のアドレスを入力したりするので、まぁ、ぱっと見がちょっとごちゃごちゃしがちだと思います・・・思わない？ 上記のコマンドを実行すると、パスワードの入力画面が表示されるはずです。パスワードを入力し承認されると、そのままファイルの転送が開始されます。ファイルの転送が終了次第、プロンプトが戻ってきます。 基本のコマンド例 たとえば、リモートのRaspberry Pi（以下、ラズパイ）の /home/user/file.txt をローカルの ~/downloads/ ディレクトリにコピーする場合は、次のように入力します。 scp pi@raspberrypi.local:/home/user/file.txt ~/downloads/ 逆に、ローカルのファイルをリモートのラズパイにコピーする場合は、次のように入力します。 scp ~/downloads/file.txt pi@raspberrypi.local:/home/user オプション scpコマンドでは、オプションを指定できます。代表的なところを挙げます。 -r: ディレクトリを再帰的にコピーする -P: SSH接続時のポート番号を指定する -q: Quiet modeで実行する -C: 圧縮転送を有効にする -v: 詳細出力を表示する たとえば、ポート2222を指定してリモートホストの /home/user/docs ディレクトリ全体をローカルにコピーする場合は、次のようにします。 scp -r -P 2222 user@remote:/home/user/docs ~/localdocs 利用シーン このコマンドは、以下のようなシーンで利用できます。 リモートとローカル間でファイルを転送する リモートにあるファイルをローカルでバックアップする、なんてのも含まれるかも。 暗号化通信が必要なファイルを転送する とくに「セキュアに転送したいよー」っていうときに利用すると思います。というか、他にないよね？ メリットとデメリット このコマンドのメリットは以下の通りです。 SSHを利用しており暗号化通信が可能。 簡単なコマンドで送受信が可能。 ファイル転送が結構高速。 一方で、デメリットとしては次の点があります。 https://ysko909.github.io/posts/korg-nutekt-nts-2-oscilloscope-kit-review/ Sat, 28 Oct 2023 21:36:47 +0900 https://ysko909.github.io/posts/korg-nutekt-nts-2-oscilloscope-kit-review/ 概要 Nu:Tekt NTS-2 Oscilloscope Kit（以下、NTS-2）は、Korgが開発したDIYキットのオシロスコープです。音楽制作者向けに設計されており、オシロスコープ、FFT/スペクトルアナライザー、波形ジェネレーター、チューナーなど、多機能が搭載されています。 シンセサイザーなどの音楽機器を使用する上で、視覚的に信号を確認できるのは非常に有用です。NTS-2を使用することで、音声信号の動きをリアルタイムに確認しながら、正確な操作ができます。とくにアナログシンセサイザーを扱うとき、音を耳で確認することはもちろん波形をビジュアルで確認できると、理解度がより深まります。組み立ても簡単で、初心者でも扱える設計となっていながら上級者も満足な機能だと思います。 このNTS-2を買ってみたので、ちょっと感想を書いておこうと思います。結論から言ってしまうと、シンセを使って演奏するだけでなく「音作り」までこだわりたい人にとっては、必須って言ってしまってもいいんじゃない？という出来に仕上がっている製品でした。 特徴 4チャンネルオシロスコープの搭載 2つのステレオ入力により、最大4つの音源を同時に表示できます。表示モードは複数用意されており、2.8インチのカラーLCDで鮮明に表示されます。各チャンネルが別の色で表示され、見やすくデザインされています。 オシロスコープとは何か オシロスコープは、電気信号を視覚的に表示するための計測器です。電流や電圧の波形をグラフとして表示できます。これにより、音楽の波形や周波数特性を解析し、詳細な情報を得ることができます。 オシロスコープは、音楽制作の現場で広く利用されています。たとえば、楽器の音色やエフェクトの設定の際に、音声信号の解析などに活用されます。また、音響機器の故障やトラブルの原因を特定するためにも使用されます。 オシロスコープのメリットは、音の波形を直感的に確認できるため、音色やエフェクトの微妙な変化を視覚的に把握することができることです。また、高周波や高速な信号の解析が可能であり、音声信号のクリアさや応答性を向上させることができます。さらに、複数の信号を同時に表示することができるため、楽器の相互作用や音響システムのバランスを調整できます。 FFT/スペクトラムアナライザの搭載 リアルタイムのスペクトル解析ができるので、音の周波数特性をグラフィカルに確認できます。 スペクトラムアナライザって何よ スペクトラムアナライザは、音楽や音響信号の周波数成分を解析し、可視化するための計測器です。音声信号を周波数ごとに分解し、各周波数成分の強さをグラフとして表示します。 スペクトラムアナライザは、音楽制作やライブ演奏の現場で幅広く利用されています。たとえば、音楽のマスタリングやミキシングの際に、各楽器の周波数バランスを調整するために使用されます。また、ライブ会場や劇場などの音響設定でも使用され、音響環境の調整やフィードバックの抑制に役立ちます。 スペクトラムアナライザを使うことで、各楽器や音声の周波数バランスを正確に把握できます。それにより、音楽の明瞭さやパンチのあるサウンドを実現できます。また、フィードバックやノイズの問題を早期に検出できます。異常なピークやエネルギー分布の不均一さを視覚的に確認し、問題を解決する手助けをします。さらに、複数の周波数成分を同時に表示することができるため、音楽全体の周波数特性を把握し、バランスの調整やエフェクトの設定に役立ちます。 波形ジェネレーターの搭載 矩形波、三角波、ノイズなど、さまざまな波形を2チャンネル出力できます。他のシンセに入力して、LFOやエンベロープジェネレータとしても利用可能です。 ジェネレータって何よ ジェネレーターは、音楽的な要素を生成するための機器やソフトウェアです。エンベロープジェネレータをはじめ、さまざまな種類が存在します。 エンベロープジェネレータは、音の始まりや終わり、音量の上下など、音の変化を制御するためなどに使用されます。たとえば、シンセサイザーの音にエンベロープジェネレータを使うことで、VCOで発生させた音に対し音の立ち上がりや減衰を調整し、音に膨らみフェードアウト効果のような表情を加えることができます。 また、ジェネレーターはLFO（Low Frequency Oscillator）としても利用されます。LFOは、低い周波数で振動する信号を生成し、それを他のパラメーターに適用することで、音楽的な効果を生み出します。たとえば、LFOを使って振動するフィルターやパンニング効果を作り出すことができます。 エンベロープジェネレータを使うことで、音の表現力を豊かにできます。音の立ち上がりやフェードイン・フェードアウトなど、細かな音の変化を自由に調整できます。これにより、音楽の表現力やダイナミクスを向上させることができます。 チューナーの搭載 正確なチューニングができるチューナー機能が搭載されています。 NTS-2のチューナーは、利用するシチュエーションから鑑みるとアナログシンセサイザーのチューニングに利用するケースが多いかもしれません。昨今は、アナログシンセサイザーといえども「シンセサイザー自身がオートチューニングできます」みたいな機材もありますが・・・。 DIYする機材 NTS-2は自分自身で組み立てます。とは言え、はんだ付けなどは必要ありません。基本的には、説明書にしたがってビス止めや基盤の接続を行えば完成するはずです。自分は、組み立てにかかった時間はだいたい15分くらいだと思います。 なお、組み立てに極小のビスを扱うので、小さいお子さんがいらっしゃるご家庭では注意してください。 箱の外観は、いつものKORG仕様。統一感があっていいですよね。 横から見ると若干フタが浮いてますが、多分仕様です。仕様だと思いますｗ 開けるとこんな感じ。少し赤いプチプチに入っているのは、NTS-2の基盤です。 基盤は2つはいってますが、大きい方が本体の外側にあたるものです。小さいのは入力端子が配置された、内部に結束するための基盤です。 基盤を取り出したところ。見た目、薄い板にディスプレイなどの部品が載っているような感じです。が、そこまで軟な感じではないので安心。 紙の取り扱い説明書付き。組み立て方の手順が各言語で書いてあります。組み立て方自体はこの説明書に記載されているとおり進めれば、20分程度で終了すると思います。 組み立ててみた感じ。 ディスプレイの保護フィルムを剥がすの、忘れてますね（恥 利用シーン 矩形波や三角波などの基本波形の特性を観察できる フィルターを通したときの波形の変化をリアルタイムに確認できる LFOの波形や速度を視覚的に確認しながら、モジュレーションを調整できる エンベロープの動きを目で追えるので、ADSRの設定がしやすい ノイズの時間的な振舞いが分かりやすい シンセサイザーを使用する際に、音声信号の動きをリアルタイムに確認しながら操作できるので、非常に理解が深まります。とくにセミモジュラーまたはモジュラーシンセを使用する際、各パラメータの変更が即座に視覚的に確認できるのは大変便利です。実際、KORG製品にはminilogueのように、シンセサイザー自体に波形を表示するシンセサイザーが存在します。 しかし、これはこれらの製品が特殊なのであって、たいていのシンセサイザーには波形表示の機能が存在しません。もちろん、楽器なので「耳で音を確認すりゃいいじゃん」はたしかにその通りです。とは言え、耳だけでなく目でも確認できる手段があるのですから、利用しない手はありません。それにVolca Modularのように比較的安価なモジュラーシンセが売られている昨今、モジュラーシンセを買ってはみたけど操作に対して音の変化がいまいち分かりにくい・・・なんて悩みもNTS-2で視覚化することで解決するかもしれません。 総じてユーザーフレンドリーながら良心的な価格で、シンセサイザーを理解する一助になってくれる良い製品だと感じました。 Nu:Tekt NTS-2の気に入った点 オシロスコープ機能の搭載、スペクトラムアナライザ機能の搭載、ジェネレーター機能の搭載が1つの機材で実現 コンパクトなサイズで持ち運びに便利 機能を考えるとかなり良心的な価格 Nu:Tekt NTS-2のイマイチな点 極小ネジが多く、組み立てには注意が必要（とくに小さいお子さんがいるご家庭は気をつけてください） 品薄な傾向（最近は改善された模様） 「ジェネレーター機能を使いつつオシロスコープを見たい」というのはできない まとめ Nu:Tekt NTS-2は、音楽制作者にとって大変有用なオシロスコープキットです。信号をリアルタイムに確認しながら音声を操作できるので、音声の理解が深まります。シンセサイザーを学習するには最適なツールだと言えます。とくに、モジュラーシンセを使い始めたユーザーにはだいぶ助かるのではないでしょうか。コンパクトサイズで持ち運びもラクラクです。Korgユーザーはもちろん、音楽制作に興味がある方にオススメの一品です。 https://ysko909.github.io/posts/get-error-externally-managed-environment/ Sat, 28 Oct 2023 18:45:07 +0900 https://ysko909.github.io/posts/get-error-externally-managed-environment/ 概要 pip installコマンドでライブラリをインストールしようとした時に、次のようなエラーが発生することがあります。 $ pip install -U pygame --user error: externally-managed-environment × This environment is externally managed ╰─> To install Python packages system-wide, try apt install python3-xyz, where xyz is the package you are trying to install. If you wish to install a non-Debian-packaged Python package, create a virtual environment using python3 -m venv path/to/venv. Then use path/to/venv/bin/python and path/to/venv/bin/pip. Make sure you have python3-full installed. For more information visit http://rptl. https://ysko909.github.io/posts/fundamentals-of-claude2/ Wed, 25 Oct 2023 19:01:27 +0900 https://ysko909.github.io/posts/fundamentals-of-claude2/ 概要 「Claude2（「クロード2」と読むらしい）」は、アメリカのスタートアップである「Anthropic」が開発したAIチャットサービスです。Anthropicは、ChatGPTを展開する「OpenAI」の元エンジニアが独立して創業した企業だそうです。へぇー。 ChatGPTの対抗馬と目されているこのAIは、現状無料で利用できる生成AIの中では結構出色の出来栄えで、ChatGPTのv3.5くらいは上回る精度で生成してくれるようです。しかも、PDFやテキストファイルなどを入力として読み込んでくれます。すげぇ。 そこで今回は、ざっくりとしたClaude2の概要や使い方、実際に生成してみた結果をメモします。 まずはClaude2自身に聞いてみましょう。 Claude2とは何ですか？どんな機能を提供してくれますか？ティーンエイジャーにもわかるよう、平易な言葉を使って説明してください。 ティーンエイジャーという部分は余計かもしれませんが、とりあえず入れてみました。どんな回答が返ってくるでしょうか。 はい、私はクロード2として機能します。クロード2とは、人工知能アシスタントの1つです。名前が示すとおり、クロードを引き継ぐ存在として設計されています。ティーンエイジャーの友だちにとって、クロード2は日常生活の様々な質問に答えてあげる相談役のような存在だと思います。学校の宿題の解説、友達関係のアドバイス、興味のあるトピックについて話を聞いてあげることができます。私には人権や倫理面での問題を正しく理解する能力と、個人情報を適切に扱う訓練を受けています。つまり相手の感情にも配慮した上で、回答を提供します。使い方としては、スマホアプリやウェブサイトから質問文を送ってください。できる限り丁寧に説明し返答いたします。質問があればいつでも聞いてください! 「ティーンエイジャーの友だち」ってなんか大きいお友だちみたいな言い回し・・・。 上記はClaude2の機能にアクセスできる、Poe AIにてClaude-2を実行した結果です。 どこで使えるの claude.aiです。 claude.aiでClaude2は利用できます。が、アカウント作成の際に電話番号による認証が必要です。 前述のPoe AIはメールアドレスを登録するだけなので、すぐ使えるようになります。Claude2以外にもさまざまなモデルがあるので、いろいろ試してみるのもおもしろいかもしれません。 ただ、上記のスクリーンショットにある通りPoeでClaude2を実行するには会話回数に制限があるので、Claude2を使い込みたい場合はclaude.ai/で利用するほうがいいかもしれません。 使ってみる ここからは、実際にClaude2を使ってみます。なお、以降はclaude.ai/でClaude2を利用していますのでご了承ください。 ChatGPTで使っているプロンプトがClaude2でも有効か試してみましょう。 # 命令書 あなたはプロのPythonエンジニアとして振舞ってください。以下の制約条件にしたがって、Pygameを使ったゲーム開発のチュートリアルを出力してください。# 制約条件 - 具体的なサンプルコードを複数提示すること。- 開発環境の構築から手順を説明すること。- ティーンエイジャーにもわかるよう平易な言葉を使うこと。- 出力文はMarkdownの形式に準拠させること。# 出力文 ChatGPTで有効だった「役割を明確化し制約条件を課す」プロンプトを入力してみます。どんな感じになるでしょうか。 はい、プロのPythonエンジニアとしてPygameを使ったゲーム開発のチュートリアルをMarkdown形式で作成いたします。ご要望の制約条件に従って平易な言葉で分かりやすく説明させていただきます。# Pygameを使ったゲーム開発のチュートリアル ## 開発環境の構築 Pygameを使ったゲーム開発をするには、PythonとPygameをインストールする必要があります。``` # Pythonのインストール # Pygameのインストール pip install pygame ```エディタはVisual Studio Codeなどを使うとコーディングしやすいです。## サンプルプログラム まずは簡単なサンプルから。画面に四角形を表示させましょう。```python import pygame pygame.init() screen = pygame.display.set_mode((400, 300)) pygame.draw.rect(screen, (255, 0, 0), (30, 30, 60, 60)) pygame.display.flip() running = True while running: for event in pygame. https://ysko909.github.io/posts/use-open-interpreter-with-code-llama-on-colab/ Fri, 13 Oct 2023 22:57:00 +0900 https://ysko909.github.io/posts/use-open-interpreter-with-code-llama-on-colab/ 概要 相変わらず話題のOpen Interpreter（以下、OI）を、今回はGoogle Colab上で動かしてみようというお話です。相変わらず、ローカルやColab上の限定された環境での動作を想定しているので、Code Llama（以下、Llama）を利用します。 以前の記事では、OIをは手元にあったショボショボPCを使ってローカルで動作させることをやってみました。このPCは、CPUはともかくロクなGPUも積んでないようなPCなので、OIを動作させたところでその真価を発揮できたかと言われると甚だ疑問です。そこで、「GPUをもうちょっと盛大に使ってOIを動作させたいー」という欲求を満たすため、Google Colaboratory（以下、Colab）を使います。 Google Colaboratoryとは 最初にGoogle Colaboratory（通称：Colab）について触れておきます。Colabは、Googleが提供するクラウドベースのPython開発環境です。 Colab は、学生からデータ サイエンティスト、AI リサーチャーまで、皆さんの作業を効率化します。 ブラウザ上でJupyter Notebookを記述し実行できる 環境構築が不要 GPUに料金なしでアクセス可能 簡単に共有可能 ColabではJupyter notebookの形式で基本的に記述するため、Pythonの理解がある人はすぐ使いこなせるでしょう。notebookは、実行可能コードやMarkdownによるテキストを、1つのドキュメントでそれぞれ記述できます。Colabで作成したnotebookは、GoogleドライブにColabのドキュメントとして保存されます。また、作成したドキュメントはリンクなどにより簡単に共有が可能で、コメントの記入や編集をしてもらうことも可能です。とりあえず作ってみると、使用感がわかるかと思います。 環境 先述のとおり、今回はColabを利用します。そのため、OIを動作させる環境の準備は、「Googleアカウントを取得してColabにログインする」で終わりです。あとは必要はライブラリやパッケージをインストールし、実行するだけです。この簡単さがColabの最大の利点ですね。 なお、Colabには無料プランと有料プランで使えるリソースに差があります。また、無料プランだとGPUが割り当てられるかは結構運任せで、だいたい割り当ててもらえません。CPUオンリーでも動作は可能ですが、それはローカルPCでもできることなので、今回はしっかりGPUを使いたいわけです。とは言え、先述のとおり無料プランだとGPUが割り当てられるかは確定しませんし、だいたいダメです。運に頼らずGPUを使いたいので、ここは素直に課金します。おかねのちからってすげー！ まぁ、課金するっていっても「Pro」です。さすがに「Pro＋」はオーバースペックじゃね・・・？いや、石油王とかならワンチャン？ ちなみにGPUが割り当てられると、上記のようにどんなGPUが割り当てられているか、CPUなどのリソースがどの程度利用されているかが小さく表示されます。ここではV100というGPUが割り当てられています。 OIを実行する方法 OIのインストール これは簡単です。pip installするだけですから。 !pip install open-interpreter 上記のコードを入力して実行します。少し待てば実行が終わり、ライブラリがインストールされたはずです。 OIの実行・・・ができない OIをインストールしたので、早速実行するぜ！・・・と行きたいところなんですが、残念。使えません。 実は、ここまで言っておいてなんですが、Colab上でCode Llamaで動かそうとしても動作しません。というか、そもそもOIの起動ができません。それはLlamaを実行するのに必要な--localオプションを付与した際の環境設定で、キー入力を受け付けずパラメータを指定できないからです。 !interpreter --local [?] Parameter count (smaller is faster, larger is more capable): 7B > 7B 13B 34B OIをLlamaで動作させる場合、上記のようにLlamaのオプション指定するよう表示され、任意の選択肢1つを指定します。するのですが、その際はカーソルキーで選択してから改行キーを押す必要があります。単純にColab上で!interpreter --localを実行してしまうと、Llamaのオプション設定をしたくともColabがキー入力を受け付けてくれません。そのため、Llamaのオプション指定ができない＝先に進まない＝Colab上でLlamaによるOIが実行できないとなるわけです。 また、OI公式を確認したところ、Open InterpreterのCode Llama利用については「Colabでの実行をサポートしていない」と書いてあります。 ターミナルの導入 とはいえ、ここで引き下がったらエンジニアの名折れです（暴言）。サポートされてないってだけで、完全にダメってことじゃないでしょうからどうにかなるはずです。なんとかなれー！ じゃあ、キー入力を受け付けてくれるにはどうするか？が問題になります。ここではColab上で動作するターミナルを導入します。 !pip install colab-xterm %load_ext colabxterm %xterm 最後の%xtermを実行すると、Colab上にターミナルが表示されます。ターミナルが表示されたら、改めてOIを起動します。 https://ysko909.github.io/posts/use-returntype-for-generating-return-type-on-typescript/ Tue, 03 Oct 2023 16:59:48 +0900 https://ysko909.github.io/posts/use-returntype-for-generating-return-type-on-typescript/ 概要 ライブラリ内の関数を利用する場合において、その関数の戻り値がオブジェクトであるとき、自分でtypeやinterfaceを記述しなくても、関数の戻り値を参照して自動的に型情報を生成してくれる機能があります。それがUtility Typesの一機能でReturnTypeというもの。 ReturnTypeはTypeScriptのユーティリティ型で、指定した関数の戻り値の型を確定する機能を提供します。これにより、関数の戻り値の型をプログラマーが明示的に指定することなく、すでにある関数の仕様から抽出して戻り値の型を使用できます。これにより、型の安全性を提供し、バグの防止と修正しやすさを支援することで、コード品質の向上が期待できます。 メリット 型の安全性：ReturnTypeを使用することで、想定している型と実際に関数から返ってくる値の型が一致するため、実行時のエラーを防止できます。 コードの可読性：ReturnTypeは、関数の期待される戻り値の型を抽出してくれるため、型情報を記述する必要がなくなります。オブジェクトの型情報を記述しなくてよいので、全体的な記述を削減でき可読性の向上が期待できます。 リファクタリング：関数の戻り値の型を変更すると、ReturnTypeは自動的に変更後の型宣言を参照してくれます。そのため、とくに複数人でリファクタリングしなければならない場面などで役立ちそうです。 エラーの検出：たとえば、あるライブラリが更新され関数の戻り値の型が変わったことに気付かなかったとします。それでも、ReturnTypeで変更後の型情報を取得しておけば、IDEの機能などにより型が異なる不具合を表示してくれるため、プログラマーが不具合に気付ける可能性が高まります。このように、プログラミング時における不具合を早期発見が期待できそうです。 サンプルコード ReturnTypeを使ったサンプルコードを考えます。 type Hoge ={ foo: string; bar: number; baz: Array<string | number>; } function hoge(): Hoge{ return { foo: 'eggs', bar: 1, baz: [2, 'ham', 3, 4, 'spam'] }; } type HogeReturnType = ReturnType<typeof hoge> let resultOfHoge: Hoge = hoge(); let resultOfHoge2: HogeReturnType = hoge(); 型情報のHogeは自分で記述したものです。対して、関数hogeの戻り値をtypeofで調べ、結果をReturnTypeを用いて格納したのがHogeReturnTypeです。こうすることで、型情報を記述する手間を省き、誤った内容を記述したり誤った値が格納されるリスクを軽減しています。 使いどころ 複雑なオブジェクトを扱う場合 プロパティが多かったり複雑なオブジェクトを返す関数がある場合、ReturnTypeを使用することで戻り値の型を明確に定義し強制することが可能です。 function calc(a: number, b: number) { return { add: a + b, sub: a - b, mul: a * b, div: a / b, mod: a % b, formula: 'Calculation result using the values of ' + a. https://ysko909.github.io/posts/use-open-interpreter-with-code-llama-in-docker-container/ Tue, 03 Oct 2023 16:03:44 +0900 https://ysko909.github.io/posts/use-open-interpreter-with-code-llama-in-docker-container/ 概要 今回は、話題のOpen InterpreterをCode Llamaを使ってローカル環境で使ってみようという話です。 Open Interpreterとは Open Interpreter（以下、OI）は、自然言語による対話からPythonやTypeScriptなどのプログラミングコードを生成し、実行する環境も整備してくれるオープンソースのソフトウェアです。OpenAIのChatGPTや、MetaのCode LlamaのLLMに基づいて動作します。 An open-source, locally running implementation of OpenAI’s Code Interpreter. ここまで聞くと、ChatGPTの「Advanced Data Analysis」とよく似てるなーと思いますが、それのオープンソース版だと思ってもらえればいいかもしれません。ただ、このソフトはAdvanced Data Analysisと違ってローカル環境で動くことです。ChatGPTのAPIを利用することでGPT-3.5などを使って生成する場合、当たり前ですがインターネット環境は必須です。その点、Code Llamaを利用した場合は、完全にローカル環境で動作するため、ネット接続がない環境でも動作させることが可能です。 そのため、OIとCode Llamaの組み合わせを使えば、ブラウザの制御やファイル操作などのさまざまな作業を、チャット形式で生成し実行できます。しかもローカル環境で、です。 今回は、「ローカルで動かす」という部分にフォーカスしてOIを利用してみようと思います。さて、そもそもちゃんと動作してくれるんでしょうか。 環境 環境は手近にあった、ロクなGPUのないショボショボPCを利用しました。この時点で大分「ちゃんと動作する感」がしませんが、まぁそのなんだ、こまけぇこたぁいいんだよ！ CPU: Intel® Core™ i9-11900 @ 2.50GHz 2.50 GHz RAM: 16.0 GB OS: Windows 10上のWSL Ubuntu20.04 WSLのUbuntu上にDockerコンテナでOI用の環境を構築して、そのコンテナ内でOIをいじってみます。これでOIが何らかのライブラリをインストールしたり、あるいはファイルを削除するなどしても、コンテナ内に限定された出来事になります。 Dockerによる環境構築 入力したプロンプトによっては、環境構築のためにOIが勝手に各種のライブラリをインストールするらしいです。そのため、Dockerコンテナを構築してほかの環境を汚さないよう対処します。 Dockerfileの内容 とりあえずOIが動く程度の準備をざっくりします。 FROMpython:3.10-bookwormRUN apt-get update && \ apt-get upgrade -y && \ rm -rf /var/lib/apt/lists/*RUN pip install open-interpreter==0. https://ysko909.github.io/posts/fundamentals-of-gpio-of-raspberry-pi/ Wed, 13 Sep 2023 21:39:05 +0900 https://ysko909.github.io/posts/fundamentals-of-gpio-of-raspberry-pi/ 概要 Raspberry PI（以下、ラズパイ）には「GPIO」と呼ばれるコネクタが搭載されており、そこに接続した外部機器と簡単に信号をやりとりできるよう設計されています。今回は、GPIOに接続したボタンが押されると特定のプログラムが実行されるような仕組みの構築を通じて、ラズパイのGPIOにちょっと触れてみようという話です。 GPIOとは GPIOの概要 ラズパイのGPIO（General-Purpose Input/Output）は、ラズパイボード上に備わっている汎用入出力ピンのことを指しています。GPIOピンは、ユーザーがデジタル信号を入出力するためのピンで、ラズパイにさまざまな信号を入出力させるのが目的です。 ラズパイのGPIOピンは、ユーザーがデジタル信号を制御するために使用できる40本のピンから構成されています。これらのピンは、低電圧（0V）と高電圧（3.3Vまたは5V、モデルに依存）の2つの電圧レベルで動作します。 GPIOピン GPIOピンの主要な用途には以下のものがあります。 電源ピン（Power Pins） 下記の2つが存在します。 3.3V（3.3ボルト電源）：このピンは、外部デバイスを駆動するための3.3ボルトの電源を提供します。 5V（5ボルト電源）：このピンは、5ボルトの電源を提供し、高電力デバイスを駆動するために使用されます。 GNDピン（Ground Pins） GND（グランド）：これらのピンは、グランドを提供します。グランドに接続するために使用されます。 DNC（Do Not Connect） 古いラズパイにはDNCというピンがありました。最近のモデルにはないはずです。 DNC（Do Not Connect）：このピンは使用しないでください。将来のボードバージョンのために予約されています。 I/Oピン（Input/Output Pins） 残りのGPIOピンは、デジタル入出力ピンとして使用されます。これらのピンは、ユーザーがデジタル信号の入力と出力を制御するために利用できます。各ピンには固有の番号（BCM番号と物理ピン番号）が割り当てられています。使用例に応じて、これらのピンを制御するためのPythonコードを書くことができます。 GPIOピンで何ができるのよ どんな信号を入力したり出力したりするかにより、さまざまな利用用途が考えられます。 デジタルセンサーの接続とデータの読み取り デジタルアクチュエータ（LED、モーター、リレー）の制御 ピン間のデジタル通信（SPI、I2C、UART）のサポート PWM（Pulse Width Modulation）制御によるアナログデバイスの制御 ボタンやスイッチの状態の監視 特定のイベントの検出とリアルタイム制御の実現 実装方法 必要な機器、デバイスなど 今回の実装に必要な機器やデバイスを考えます。 ラズパイ本体 ブレッドボード タクトスイッチ ジャンパーワイヤー ラズパイ本体 ラズパイ本体は任意のモデルで問題ありません。新しい方がもちろん良いですが、今回動かす処理はさほど重くないので、ラズパイZeroなんかでも多分大丈夫だと思います。 $ cat /etc/os-release PRETTY_NAME="Raspbian GNU/Linux 10 (buster)" NAME="Raspbian GNU/Linux" VERSION_ID="10" VERSION="10 (buster)" VERSION_CODENAME=buster ID=raspbian ID_LIKE=debian HOME_URL="http://www. https://ysko909.github.io/posts/fundamentals-of-enum-in-python/ Tue, 11 Jul 2023 15:08:38 +0900 https://ysko909.github.io/posts/fundamentals-of-enum-in-python/ 概要 Pythonにおいて、Enumは列挙型クラスをサポートしています。列挙型とは「定義された値の有限集合を表すデータ型」です。 これだけ読むと何のこっちゃという感じですが、たとえば血液型の「A型・B型・O型・AB型」のように、あるいはトランプのスートのようなもの、と考えればいいかもしれません。「あるカテゴリに属し、限られた選択肢の中から1つを取る」値たちのことを集合として扱えるデータ型、とという感じでいいでしょうか。血液型について言えば、1人の血液型は前述の4つ以外に存在しませんし、トランプで「スペードでありハートでもある」なんて状況はないはずです。 プログラムではこれらを「順序を持たない識別子」として利用したいのですが、「スペード」や「AB型」のように文字列として持つとプログラム上の取り回しが非常に悪いです。そのため、識別子を一括管理できる列挙型で扱おうというわけです。 なお、列挙型を実装する際は識別子に任意の整数値を割り当てることが多いです。これにより、コード上は文字列っぽい識別子として振舞っても、実際はその中身である整数値によって管理されている、という感じになります。このように実装することで、コードを管理しやすくなります。 まとめると、列挙型を利用することで以下のようなメリットがあります。 コードを簡潔にして、保守性や可読性を向上 「あるカテゴリや集団に属する要素」として表現できる 値を限定することで入力ミスを防止し例外を予防 利用方法 定義 Enumをインポートし継承することで、オリジナルの列挙型を定義できます。 >>> from enum import Enum >>> class BloodType(Enum): ... O = 1 ... A = 2 ... B = 3 ... AB = 4 ... >>> BloodType <enum 'BloodType'> >>> type(BloodType) <class 'enum.EnumMeta'> 血液型の列挙型のクラスを作成してみました。メンバーには列挙したい値を設定し、メンバーに対応する値に何らかのオブジェクトを代入します。クラスBloodTypeには上記の4つ以外に値が存在しないため、この集合は有限であると言えます。また、OやABというメンバーは「血液型」というカテゴリに属する識別子である、ということを表現できます。これにより、ある集団とそれに属する要素を表現できるわけです。 前述のように列挙型では整数値を入力することのほうがおおいので、上記の例では数値を入力しています。ただ、上記のように連番で振る場合は、手書きでなくauto()関数を使う場合がほとんどだと思います。 >>> class BloodType(Enum): ... O = auto() ... A = auto() ... B = auto() ... AB = auto() ... 上記のようにauto()関数を利用することで、手書きする必要なく連番を付与できます。 https://ysko909.github.io/posts/deprecations-in-python-and-libs/ Wed, 28 Jun 2023 19:45:51 +0900 https://ysko909.github.io/posts/deprecations-in-python-and-libs/ 概要 Pythonやそのライブラリを含む他の要素においても、バージョンアップが行われるたびに、これまでの書き方が非推奨とされるケースが相当あります。ただし、インターネット上には古いコードや非推奨の情報が存在しています。それが非推奨であるということを知らない場合には、新しい書き方があるにもかかわらず古い書き方を使用してしまうケースが考えられます。 「この書き方は何だ？見たことないぞ」と思って調査してみると、現在では非推奨になった昔ながらの書き方だったりすることがあります。時間を費やして調査した結果、それが非推奨だったりすると困るわけです。ムダな時間を省くためにも、そのような「現在は使えない、または将来的に使えなくなる（非推奨）」の書き方についてメモします。 とはいえ、気付いた時に追記する予定ですので、増えすぎることはないでしょう。 書式化演算子%を使った文字列の書式設定 文字列のフォーマットを定義する際、format()やf文字列を使った記法が現在の主流です。ただ、C言語のprintf()に準拠したような演算子を使った記法で表現する方法もあります。 古い方法: 書式化演算子 % name = "山田" age = 30 print("私の名前は%sで、%d歳です。" % (name, age)) 現在の主流: f-strings (Python 3.6以降) name = "山田" age = 30 print(f"私の名前は{name}で、{age}歳です。") こちらも現役: str.format() name = "山田" age = 30 print("私の名前は{}で、{}歳です。".format(name, age)) C言語のprintf()では、任意の文字列において「値を出力する位置にどんな型で出力するか」をパーセント付の識別子で表現します。%sだった場合、文字列を指定された箇所に出力する、といった具合です。この記法がPythonでも使えます。 ただ、「せっかく動的型付け言語なのに、文字列編集をするときに型を気にしないといけないのは面倒だぜ！」と思ったのかはわかりませんが、前述のとおりf-stringsが主流だと思います。こっちは読みやすく、式の評価もサポートしているため、f"結果: {2 * 3}"のように直接計算結果を埋め込むことができます。format()関数も一応見かけますね、%ほどは廃れていない印象。 ファイルの操作 古い方法: 明示的なクローズ f = open("example.txt", "r") content = f.read() f.close() # 忘れると問題が発生する可能性あり 現在の主流: with文（コンテキストマネージャ） with open("example.txt", "r") as f: content = f.read() # 自動的にクローズされる withはそのブロックを抜けるときに、closeメソッドを勝手に呼び出してクローズしてくれるので、クローズ忘れがなくなりますしコードも読みやすくなります。しかし、withには更なる利点があります。 https://ysko909.github.io/posts/get-error-import-lib-could-not-be-resolved-on-vscode/ Sun, 18 Jun 2023 10:24:44 +0900 https://ysko909.github.io/posts/get-error-import-lib-could-not-be-resolved-on-vscode/ 概要 とあるFlask向けのコードをVisual Studio Code（以下、VS Code）で書いていたら、こんなエラーが出力されました。 Import "flask" could not be resolved Import "pandas" could not be resolved from source Import "numpy" could not be resolved ﾊｧ？（うさぎ） $ pip list Package Version ------------------------- ------- Flask 2.3.2 numpy 1.24.3 pandas 2.0.2 上記はインストール済みライブラリの一部を抜粋したもの。Flaskもnumpyもpandasもインストール済みです。そりゃ、ライブラリがなかったらもうちょっと違うエラーメッセージでるよなぁ？ from flask import Flask, jsonify, request, abort, json import pandas as pd import numpy as np # 以下、コード 上記はそのコードの一部分を抜粋したものです。えー、なんも変なことしてないんだけど。 なお、これ以外のエラーメッセージは表示されませんでした。謎。 回避策 VS Codeでインタプリタを別のものに変更します。自分の場合は、なぜかこの方法でこのエラーを回避できました。 VS CodeでF1を押し、表示されるメッセージウィンドウに「Python: Select Interpreter」と入力します。全部入力しなくても途中まで入力したら、表示されている一覧の中から該当のものを選択してしまっても問題ありません。 すると上記のような画面が表示されます。これらは現状の環境で選択可能なインタプリタの一覧が表示されているため、他の環境ではまた違った内容で表示されるはずです。現状は/usr/bin/python3が選択されています。これを別のものに変えます。usr/local/bin/pythonに変えてみます。 エラーメッセージが消えました。ﾊｧ？（うさぎ） https://ysko909.github.io/posts/type-annotation-in-python-and-type-checking-with-mypy/ Wed, 14 Jun 2023 00:16:55 +0900 https://ysko909.github.io/posts/type-annotation-in-python-and-type-checking-with-mypy/ 動的型付け言語のおさらい ご存じの通り、Pythonは動的型付け言語ですので、関数や変数などのオブジェクトに対して型の宣言を強制することはありません。動的型付け言語では、値自体に型情報が含まれており、変数には固定された型情報が存在しません。 hoge = 123 fuga = 'ham' ここでは変数hogeに数値が、fugaには文字列が格納されています。 hoge = 123 hoge = 'ham' 先述の通り、Pythonのような動的型付け言語では、変数には型情報が付与されません。そのため、上記のようなコードもエラーになりません。 一方、静的型付け言語であるC言語やJavaでは、変数hogeの宣言時に型情報を指定します。 #include <stdio.h>#include <stdlib.h> int hoge(int num) { return num * 2; } int main() { char str[BUFSIZ]; sprintf(str, "%d", hoge(3)); printf("%s", str); return 0; } たとえばC言語だと、上記のように関数や変数の宣言時に型を指定します。 そのため、先述のPythonコードの例において、もし変数hogeに数値型であるという型情報が付与されている場合、文字列を代入しようとする行でエラーが発生するわけです。 型が想定と違ったら def piyo(foo): return foo * 2 上記の例だと、関数piyo()は引数を取りそれを2倍した結果を返しています。その実装から推測すると、引数fooはおそらく数値が入ることを前提としているように見えます。 ところが、関数piyo()の引数に文字列を入れても動作します。つまり、本来想定しているであろう型以外の型を代入することが可能です。たとえば真偽値とかリストとか辞書とか。これって大丈夫？ もちろん、大丈夫ではありません。しっかり実行時にエラーを吐きます。 ただし、エラーを吐かないケースもあります。 >>> def piyo(foo): ... return foo*2 ... >>> piyo(13) 26 >>> piyo('hoge') 'hogehoge' >>> piyo(['a', 'bc', 3]) ['a', 'bc', 3, 'a', 'bc', 3] >>> piyo({'ham': 10, 'eggs': 20, 'spam': 30}) Traceback (most recent call last): File "<stdin>", line 1, in <module> File "<stdin>", line 2, in piyo TypeError: unsupported operand type(s) for *: 'dict' and 'int' 上記の例ですと、文字列やリストはとりあえず結果が返ってきます。ただ、辞書などはエラーになります（これは後述）。 https://ysko909.github.io/posts/invisible-character-in-unicode/ Thu, 16 Mar 2023 02:19:03 +0900 https://ysko909.github.io/posts/invisible-character-in-unicode/ もともとの経緯 ある日、Linuxで実行するためのとあるコマンドをとあるwebページからコピペし実行しようとしましたが、「そんなフォルダもファイルもねぇよ」と怒られてしまいました。存在するのに。 細かい内容は割愛しますが、実行したのはcd /hoge/fuga/...(結構長いアドレス).../みたいなコマンドです。このアドレスのフォルダは、特定のアプリケーションをインストールしていると自動的に作成されるため、アプリケーションが導入されているのにこのフォルダが存在しない、ということはあり得ません。 この移動先のアドレスがそこそこ長く、手で入力するのも面倒なので入力間違いがあると困るので、webにあるものをコピペして実行したわけです。コピペしているので、もともとの状態から一言一句変更しておらず、先述のとおりフォルダは存在しているのでエラーが出るようなコマンドでもないはずです。 しかし、なぜかエラーになってしまいました。 ただ、ここでふと気付きました。コピペしたコマンドは動かない。けれど、自分で同じ内容を手で入力すると動く。もちろん、見た目はまったく一緒なのに。怪奇現象かなにかかいな。 ・・・ちょっと待って。見えない何かがいるんじゃない？ ZWSPって何者よ 結論から言うと、います。見えなくても「ヤツ」はそこに。その「ヤツ」は「ゼロ幅スペース」という文字です。ええ、文字です、文字じゃないけど。 UnicodeにはZWSP（ゼロ幅スペース）という文字コードが存在しており、webページの組版に用いられることがあります。これはゼロ幅なので一見しただけでは存在しないように見えますが、文字コードとしては確かに存在するデータです。 Wikipediaのゼロ幅スペースによると・・・。 通常、英語などのわかち書きをする言語において、文の途中で改行を入れる場合はスペースの位置で行われる。しかし、スラッシュなどの記号の後などスペースは入らないが改行をしても良い箇所や、日本語などのわかち書きをしない言語において、改行できる位置を明示するためにゼロ幅スペースが用いられる。 とのこと。 たとえば・・・ WordPress「めっちゃ長い文字列・・・改行したい・・・でもスペースで区切られてないからどこで改行すべきかイマイチわからん。せや、スラッシュあるからその直後で改行すりゃ見た目にそんな大きな影響ないやろ」 ・・・と、スラッシュの後にZWSPを代入してこれを基準に改行することで、見た目に影響を及ぼさないまま改行する位置を明確に指定することが可能です。 大抵の場合、改行位置という見た目だけの問題なので、それ以外の影響を及ぼすようなことはないでしょう。大抵の場合は。 例外は、たとえば「めちゃ長いアドレスを含むコマンドをコピペしたとき」などです。 上記の例で行くと、「めちゃ長いからスラッシュの後にZWSP入れて、それ基準で改行しよ」と処理されるため、見た目には何もないのに実際にはZWSPが存在するせいで、「見た目と実際のデータの内容に差がある」ことになってしまいます。webからコピペしたコマンドが見た目正しいのにエラーを吐くなんていうケースは、このZWSPが悪さをしているかもしれません。許さん。 ZWSPの影響例 一例をば。 cdを使ってフォルダ移動するのですが、移動先フォルダのアドレスが長いため、webページからコピペするとしましょう。ここではcd /usr/hoge/...なんかもうめちゃくちゃ長いアドレス.../testとしています。なお、ここでは移動先フォルダは存在するものとします。 $ cd /usr/hoge/...なんかもうめちゃくちゃ長いアドレス.../test -bash: cd: /usr/hoge/...なんかもうめちゃくちゃ長いアドレス.../test: No such file or directory ← 存在するのに？ このように、移動先フォルダは存在するという前提にもかかわらず、「そんなフォルダないけど」とエラーが返ってきてしまいました。 webからコピペしたコマンドには、たまたま移動先フォルダ部分にZWSPが含まれていたため、本来意図したフォルダ名とは異なった「ZWSPを含むフォルダ」に向かってcdしようとしてしまい、「そんなフォルダないぞ」を怒られたわけです。やっぱり許さん。 対処法 エラーの原因がZWSPであると思われる場合は、文字コードを指定して除外するのが最速です。ただし、ZWSPの文字コードにもいくつかパターンがあり、どれに該当しているかを調査するのは少し手間かもしれません。また、そもそも文字コードベースでの指定ができないエディタでは、この方法が利用できません。 「それなら同じ内容を手で入力すればいいじゃん」は、まぁ、単純かつ有効な方法ではあります。ただ、今回はそもそも手入力したくないような長い文字列をコピペしようとしているのに、手入力するってのは本末転倒になってしまうのが悩ましいところ。 なお、意図せずZWSPを含ませないようにするには、Markdownならコマンドやプログラムコードをバッククォートで囲うべきでしょう。HTMLであれば<code>タグを利用すれば良いかと。よくコマンドやコードをバッククォートで囲うのは、CMSやSSGがHTMLを生成する際にコードであることを主張するようなレイアウトでページを生成するほか、余計なコードを埋め込まないよう制御できる利点があるわけなんですね。 まとめ 余計な文字を入れんな。いや、ホント。 見えないとかどんなトラップよ？ただ、こういう制御を行う文字があるっていうのを知っているなら対処は可能です。実際にトラブルになっても、知っているのと知らないのとでは天と地ほどの差があるでしょう。 参考 ゼロ幅スペース Unicode ゼロ幅スペースを利用して情報を隠して仕込む ゼロ幅スペースの謎を解く 本当に大切なものは目に見えない ~Unicodeの目に見えない改行文字に苦しめられた話~ https://ysko909.github.io/posts/got-error-ts-file-cannot-be-compiled-under-isolatedmodules/ Fri, 03 Mar 2023 21:13:27 +0900 https://ysko909.github.io/posts/got-error-ts-file-cannot-be-compiled-under-isolatedmodules/ 概要 小ネタです。 'hoge.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. ちょっと長いですが、TypeScriptを書いているときにこんなエラーメッセージが出たりします。 このエラーメッセージは通常、モジュールに含まれていないTypeScriptファイル（この場合はhoge.ts）をコンパイルしようとしているときに、--isolatedModulesコンパイラフラグが有効になっていると表示されます。 --isolatedModulesフラグはTypeScriptコンパイラのフラグで、モジュール間の分離を強化し、各ファイルが自己完結したモジュールであることを保証するものです。これにより、グローバルな名前空間汚染などの問題を防ぐことができます。 このエラーを修正するには、ファイルの先頭にexport {}を追加してhoge.tsファイルをモジュール化する必要があります。このステートメントは、実際に何かをエクスポートする必要がない場合でも、アプリケーション内の他のモジュールによってインポートされることができる空のモジュールを作成します。export {}ステートメントを追加した後は、通常通りファイル内の残りのコードを書き続けることができます。 export {}; // 以降にコードを普段どおりに書く 上記のようにhoge.tsファイルにexport {}文を追加したら、--isolatedModulesフラグを有効にしてTypeScriptコードを再コンパイルしてみると、エラーメッセージは消えるはずです。 参考 cannot be compiled under ‘–isolatedModules’が出た時の対処方法 https://ysko909.github.io/posts/install-grafana-on-docker-contailner-and-show-chart-with-csv-file/ Sun, 26 Feb 2023 18:33:04 +0900 https://ysko909.github.io/posts/install-grafana-on-docker-contailner-and-show-chart-with-csv-file/ 概要 GrafanaとはOSSのデータ可視化ツールで、データソースからデータを取得してさまざまなグラフやチャート、テーブルなどで可視化できます。このGrafanaはオフィシャルでDockerコンテナが用意されており、このコンテナを利用することで簡単に環境構築が可能です。 今回はDockerコンテナを利用してGrafanaを構築し、テスト用のCSVデータを参照して簡単なチャート出力を実行してみます。 環境 Windows 10上のWSL Ubuntu 20.04 LTS Docker 20.10.16 上記の環境において実行しています。 Grafanaコンテナ GrafanaのコンテナはDocker Hubにあるものを利用しています。 CSV Data Source for Grafana 動作確認のため、CSVファイルをデータソースとして扱えるプラグインを導入します。 本来であれば、Grafanaの入力に利用できるデータソースとして、何らかのDBを用意する必要があります。たとえばinfluxDBとかPrometheusですね。ただ、まぁ、動作確認のためだけにDB用意するのはメンドくさい大変なので、ここではCSVを使って動作確認します。とはいえ、デフォルトの状態ではGrafanaはCSVをデータソースとして利用できないので、CSVもデータソースに指定できるプラグインをインストールします。DBの用意が面倒でCSVを読むためのプラグインをインストールしてるとか若干本末転倒な感があるような。 Dockerコンテナの準備 GrafanaのコンテナはDocker Hubに存在するものをそのまま利用します。なのでdocker pullして実行すればそれで終わりです。 docker pull grafana/grafana docker run -d --name=grafana -p 3000:3000 grafana/grafana 上記のコマンドをWSLで実行すれば、あとは自動的に処理が進みます。 docker pull -e HTTP_PROXY=http://<PROXYSERVER>:<PROXYPORT> -e HTTPS_PROXY=http://<PROXYSERVER>:<PROXYPORT> grafana/grafana docker pull -e HTTP_PROXY=http://<USERNAME>:<PASSWORD>@<PROXYSERVER>:<PROXYPORT> -e HTTPS_PROXY=http://<USERNAME>:<PASSWORD>@<PROXYSERVER>:<PROXYPORT> grafana/grafana Proxy環境下では、上記のように-eコマンドを使って、環境変数としてProxyのアドレスなどを設定します。なお、docker composeを使う方法もありますが、今回は単純にコマンドをガシガシと実行していくスタイルとします。 処理が完了したら、Grafanaのコンテナが起動しているはずです。ブラウザでhttp://localhost:3000にアクセスすると、Grafanaのログインページが表示されます。ここではIDがadmin、パスワードもadminと入力することでログインできます。なお、「パスワード変えてね」という表示が出ますが、無慈悲にもここでは「Skip」を押して見なかったことにします。どうせ、動作確認したらコンテナ終了させるしね（ﾊﾅﾎｼﾞｰ CSV Data Source for Grafanaをインストールする 動作確認のためだけにDBを用意するのは面倒なので、ここは適当なCSVファイルを入力にします。するのですが、Grafanaはデフォルトの状態だとCSVファイルをデータソースをして参照してくれません。そこで、CSVをデータソースとして扱ってくれるプラグインを導入します。 docker exec -it grafana /bin/bash grafana-cli plugins install marcusolsson-csv-datasource Grafanaが稼働しているコンテナに入り、grafana-cliを使ってプラグインをインストールします。インストールが終わったら、「リスタートしてね」というメッセージが表示されます。 https://ysko909.github.io/posts/select-unmatch-item-from-other-list/ Sat, 25 Feb 2023 23:31:14 +0900 https://ysko909.github.io/posts/select-unmatch-item-from-other-list/ 概要 小ネタです。 あるリストの要素について、別のリストと比較したときにマッチしない要素を取り出すコードを考えます。ここでは、1つだけでなく2つ以上の要素を1度に削除することを考慮します。 >>> hoge = [1, 'a', 'b', 4, 'c', 6, 7, 'd', 'e'] >>> fuga = [4, 'c', 6, 7] >>> piyo = [1, 4, 7, 'e'] ここではリストhogeが持つ要素のうち、リストfugaやpiyoが持つ要素と一致しない要素を取り出します。 [1, 'a', 'b', 'd', 'e'] たとえばリストhogeとfugaを比較したとき、上記の結果が返ってくればOKです。これをどう取得しましょうか。 コード >>> hoge.remove(fuga) Traceback (most recent call last): File "<stdin>", line 1, in <module> ValueError: list.remove(x): x not in list 単純に考えると、リストfugaが持つ要素をhogeから「削除」してやればいいわけです。そして、リストから要素を削除するにはremove()メソッドを使います。 ただ、remove()は引数に指定した「値」が存在したときに該当の要素を削除します。上記のように、remove()の引数にリストを指定すると、「リストである1要素」を削除しようとします。つまり、リストfugaと同じ要素を持つリストが1要素になっている箇所を探そうとするわけです。 >>> foo [[1, 2, 3], [4, 'A']] >>> foo.remove([4, 'A']) >>> foo [[1, 2, 3]] たとえば、上記のように要素がリストであるならば、削除したい要素としてリストを指定できます。ただ、リストhogeにはリストである要素は存在しません。そのため、ValueError: list. https://ysko909.github.io/posts/fundamentals-of-optional-chaining/ Thu, 23 Feb 2023 21:49:40 +0900 https://ysko909.github.io/posts/fundamentals-of-optional-chaining/ 概要 オプショナルチェーン演算子ってのは、JavaScript（以下、JS）にありがちな「一見すると何なのかよくわからない」かつ「ググラビリティが低い」系の記述方法です。個人的に見た目が似たようなタイプだと思っている三項演算子とかだと、まだなんとなーく解読できそうな見た目だったりしますが、この演算子は初見だと何やってるのかいまいちわかりにくい演算子です。 なにせ、hoge?.fooみたいな見た目なので・・・もう少しこう何というか、手心というか_(:3」∠)_ ただ、オブジェクトにプロパティをいろいろ付与しがちなJSだと、この演算子の使いでが結構あるので覚えておいて損はないです。というか、得しかないかも。 そんなコイツは一体なんなのかと言うと、undefinedやnullのプロパティに誤アクセスした際、発生するエラーを回避しながら可動性を確保できる書き方です。つまり、JSでありがちな「存在しないプロパティに誤アクセスしちゃってエラーが起きる」問題を回避できるわけです。 具体的な使い方 プロパティに対して使う基本的な使い方 オプショナルチェーン演算子は、前述の通りhoge?.fooのように書きます。これで何をしているのかというとhogeオブジェクトのfooプロパティにアクセスしています。「ん？単純にアクセスするなら、そんな演算子使わなくてもhoge.fugaでいいじゃないか」と思うかもしれません。 const hoge = { foo: 1, bar: 'test' }; const fuga = hoge.foo; つまり上記のように、hoge.fooと記述することでhogeオブジェクトのfooプロパティにアクセスするわけです。もちろんですが、上記のコードで実際にhoge.fooに問題なくアクセスできるため、エラーは発生せず処理が正常終了します。では、ここでhogeオブジェクトに存在しないプロパティを指定した場合は、どういう動作になるか考えてみます。 const hoge = { foo: 1, bar: 'test' }; const piyo = hoge.baz; hoge.bazと書いてみました。hogeオブジェクトにはbazというプロパティが存在しないため、この場合だとundefinedが返ってきます。JSでは、undefinedやnullのプロパティにアクセスするとエラーが発生します。 const hoge = { foo: 1, bar: 'test' }; const fuga = hoge.foo; // これはOK const piyo = hoge.baz; // これはNG alert(piyo); // TypeError: Cannot read properties of undefined 上記ではundefinedのプロパティをアクセスしてエラーが発生していますが、nullのプロパティでも同様にエラーが発生します。コーディングミスなら修正すればいいわけですが、何らかの理由でプロパティの存在が保証されていなくても、場合によっては処理を進める必要があるかもしれません。 https://ysko909.github.io/posts/fundamentals-of-gradio/ Sat, 15 Oct 2022 22:01:10 +0900 https://ysko909.github.io/posts/fundamentals-of-gradio/ 概要 gradioとはPython用のパッケージであり、Jupyter Notebook上で用いることによりwebアプリケーションのようなUIを実装できます。これにより、Notebookで作成した機械学習モデルを簡単なwebアプリ化でき、公開できる限度はあるものの作成したアプリケーションを独自のURLでwebアプリとして共有できるという優れものです。 つまり、学習モデルというバックエンドさえ作っておけば、JSでフロントエンドを用意しなくてもgradioがその肩代わりしてくれるわけです。しかも、UIを構築する際も少ないコードで済むため、「作成したモデルの入出力をコードではなくGUIで行いたい。けどそこまで凝ったUIを作る必要はない」という場合に効果を発揮するでしょう。 Google Collaboratory（以下、Colab）上でも動作するため、Colabで利用するとより実装が楽かもしれません。共有するのも、Colabでのソース本体でなく生成したwebアプリを共有すればいいのもポイント高いです。 ここでは利用するシチュエーションが多いと思われるColabで、gradioを使用する方法について記述してみます。 導入方法 導入は簡単で、他のPython用パッケージと同様にpipでインストールすれば問題ありません。gradioが要求する動作環境はPython 3.7以上なので、たいていの環境ではフツーに導入できるはずです。 !pip install gradio 新規のセルに上記のコードを記述しておけばインストールしてくれます。 簡単な入出力サンプル ここでは、入力された文字列について簡単な編集を行って出力する機能を実装してみます。 import gradio as gr def greet(name): return "Hello " + name + "!!" demo = gr.Interface(fn=greet, inputs="text", outputs="text") demo.launch() 処理自体は簡単で、入力された名前に挨拶を付与するだけのものです。この場合、入出力のインターフェイスを用意するのはgradio.Interface()の1行で問題ありません。あとは、UIのインスタンスをlaunch()すると、Colab上に入出力のフロントが表示されます。コレ、地味にちゃんと日本語表示されるんですよね、何もコードの中で指定しなくても。 実際にColab上で実行してみると上記のようなに表示されます。 名前を入力して「送信」を押すと、右側に編集された文字列が表示されます。 また、このとき生成されるURLは72時間の間保持されます。このURLは、gradioを利用して作成したUIをColabの外部で利用できるものです。つまり、Colab上作成した機能にgradioで簡易的なUIを作りさえすれば、あとはこのURLを共有することでwebアプリを実装できます。 72時間しかURLが有効じゃないので、恒久的な利用には向きません。が、「とりあえず利用してみたい」という短期的なニーズを満たすための用途としては素晴らしい機能だと言えるのではないでしょうか。 上記のようにブラウザでアクセスすれば、Colab上じゃなくても実行できます。 そしてちゃんとColab上と同様に利用できます。 画像を入出力としたサンプル 簡易的とはいえちゃんとUIを実装できるので、テキストだけでなく画像などのデータを入出力の対象にもできます。 import numpy as np import gradio as gr def sepia(input_img): sepia_filter = np.array([ [0.393, 0.769, 0.189], [0.349, 0.686, 0.168], [0.272, 0.534, 0.131] ]) sepia_img = input_img. https://ysko909.github.io/posts/delete-volume-when-get-password-authentication-failed-error/ Mon, 10 Oct 2022 16:52:53 +0900 https://ysko909.github.io/posts/delete-volume-when-get-password-authentication-failed-error/ 概要 Dockerを使いPostgreSQLの環境を立ち上げた後で、認証情報を変更するとなぜか正しいはずなのに認証が通らずエラーを吐くようになってしまうケースに遭遇しました。現象と対処法をご紹介します。 エラーの内容 pgAdminなどを使ってDockerコンテナ上に構築したPostgreSQLへログインしようとすると、エラーが発生してログインできません。 error: password authentication failed for user "xxx" 上記がそのエラーメッセージでして、xxxの部分にはユーザー名が入ります。xxxというユーザーのパスワード認証に失敗したと言っています・・・が、実際は正しい認証情報を入力していてもエラーになります。入力が正しくても間違っていてもダメと言われるわけですね。 pgAdminだと上記のように表示されます。 エラーの再現手順 このエラーは特定の手順を踏むと再現します。 docker-compose.ymlなどによりPostgreSQLのコンテナを構築する。 PostgreSQLにログインする。この時点では正常にログインできる。 ymlに記述してあるPostgreSQLの認証情報を変更する。 コンテナをリビルドする。 変更後の認証情報を使ってPostgreSQLにログインしようとするとエラーを吐く。 ここで言う認証情報とはPOSTGRES_USERやPOSTGRES_PASSWORDを指します。これらの設定値を変更すると、新しい認証情報を使ったログインができなくなってしまいます。もちろん、変更前の認証情報でもダメです。 version: "3" services: postgres: image: postgres container_name: sample_postgres ports: - 5432:5432 environment: POSTGRES_USER: admin POSTGRES_PASSWORD: admin POSTGRES_DB: sample_db volumes: - ./initdb:/docker-entrypoint-initdb.d - ./postgres:/var/lib/postgresql/data pgadmin: image: dpage/pgadmin4 container_name: sample_pgadmin restart: always ports: - 30001:80 environment: PGADMIN_DEFAULT_EMAIL: admin@example.com PGADMIN_DEFAULT_PASSWORD: admin volumes: - pgadmin:/var/lib/pgadmin depends_on: - postgres volumes: postgres: pgadmin: たとえば上記のようなdocker-compose. https://ysko909.github.io/posts/can-not-connect-to-pdadmin-on-docker-container/ Sun, 09 Oct 2022 23:14:09 +0900 https://ysko909.github.io/posts/can-not-connect-to-pdadmin-on-docker-container/ 概要 Dockerコンテナで構築したPostgreSQLとpgAdminの組み合わせで、ブラウザからpgAdminに接続できないケースを確認したのでメモしてみます。同じ症状に見舞われている方の参考になれば幸いです。 症状 ブラウザからpgAdminへアクセスできません。 docker-compose.ymlのファイル内にて定義したpgAdminのコンテナに対し、ブラウザからlocalhost:8000（URLの例。ポートはymlの設定次第で可変）などのURLにアクセスすると、本来はpgAdminのログイン画面が表示されるはずです。 上記のようなログイン画面が本来は表示されるはずなんです。 が、なぜか表示されません。 タイムアウトになるわけでもなく、ただただ真っ白な画面が表示されるだけです。こりゃおかしいぞ、というわけで調査開始。 原因 コンテナそのものではなく、コンテナ内で利用するボリュームの権限が問題でした。以下で解説します。 調査 version: "3" services: postgres: image: postgres container_name: sample_postgres ports: - 5432:5432 environment: POSTGRES_USER: root POSTGRES_PASSWORD: root POSTGRES_DB: sample_db volumes: - ./initdb:/docker-entrypoint-initdb.d - ./postgres:/var/lib/postgresql/data pgadmin: image: dpage/pgadmin4 container_name: sample_pgadmin restart: always ports: - 8000:80 environment: PGADMIN_DEFAULT_EMAIL: admin@example.com PGADMIN_DEFAULT_PASSWORD: admin volumes: - ./pgadmin:/var/lib/pgadmin depends_on: - postgres volumes: postgres: pgadmin: 今回のDockerコンテナは、上記のようなdocker-compose.ymlを基に作成しました。内容としてはPostgreSQLとpgAdminのみです。コンテナのビルド時もとくにエラーは出ずに正常終了しました。 ただ、構築したコンテナのpgAdminにブラウザからアクセスすると「あれ？表示されないぞ？」になった、というわけですね。 タイムアウトにならないところを見ると、ブラウザ自体はコンテナに対しアクセスできており、コンテナからの返答も返ってきていると考えるのが妥当です。そうなると、少なくともコンテナ自体は正常に起動しており、ブラウザからのアクセスを受け付ける状態にはなっているのでしょう。ただ、ブラウザには何も表示されないことから、アクセスを受け付けた後の処理で何かしらの異常が出ていると考えられます。 こういう場合はコンテナのログを確認します。 docker logs sample_pgadmin 上記のコマンドを実行することで、コンテナのログを出力可能です。 [2022-10-04 01:10:25 +0000] [24430] [INFO] Booting worker with pid: 24430 [2022-10-04 01:10:27 +0000] [24430] [INFO] Worker exiting (pid: 24430) ERROR : Failed to create the directory /var/lib/pgadmin/sessions: [Errno 13] Permission denied: '/var/lib/pgadmin/sessions' HINT : Create the directory /var/lib/pgadmin/sessions, ensure it is writeable by 'pgadmin', and try again, or, create a config_local. https://ysko909.github.io/posts/swap-row-for-columns-of-dataframe/ Sat, 27 Aug 2022 22:34:45 +0900 https://ysko909.github.io/posts/swap-row-for-columns-of-dataframe/ 概要 pandasのDataFrameにおいて、行と列は交互に入れ替えることが可能です。ここでは入れ替える方法についていくつか紹介します。 行と列を単純に入れ替える DataFrameの行と列を単純に入れ替える場合、T属性かtranspose()メソッドを使います。 >>> import pandas >>> import io >>> s = '''a,b,c ... hoge,1,2 ... fuga,3,4 ... hoge,5,6 ... hoge,7,8 ... piyo,9,10 ... fuga,11,12 ... piyo,3,6 ... hoge,7,12 ... fuga,1,8 ... piyo,1,2 ... ''' >>> df = pandas.read_csv(io.StringIO(s)) >>> df a b c 0 hoge 1 2 1 fuga 3 4 2 hoge 5 6 3 hoge 7 8 4 piyo 9 10 5 fuga 11 12 6 piyo 3 6 7 hoge 7 12 8 fuga 1 8 9 piyo 1 2 >>> df. https://ysko909.github.io/posts/develop-game-with-topdown-engine-series-1/ Tue, 16 Aug 2022 08:45:06 +0900 https://ysko909.github.io/posts/develop-game-with-topdown-engine-series-1/ 概要 TopDown engineとは、Unityで「見下ろし型（TopDown）」ゲームを作成するためのアセットです。3D、2D問わず利用可能ですが、見下ろし型というゲームの形式上2Dのほうが直感的にわかりやすいでしょう。 なお、同じデベロッパーが開発している有名なエンジンでCorgi Engineがあります。こっちはいわゆる2D横スクロールアクションゲームを作るためのエンジンです。 今回からは、このTopDown Engineを使ったゲーム開発を行います。とはいえ、この1記事では言及できないほどの機能や設定を備えているので数回に分けて書いていきます。数回で終わるんかな？_(┐「ε:)_ なにはともあれインストール 基本的には、普段のUnityにおける新規作成の手順に準拠しています。違いは、新規作成した直後のプレーンな状態のプロジェクトに、TopDown Engineをインポートすることです。既存のプロジェクトにインポートする場合、競合を避けるため少なくとも（存在するなら）古いTopDown Engineのフォルダを最初に削除することをオススメします。 また、TopDown Engineが機能するためにいくつかのアセットと依存関係にあります。インポート時にエラーが発生することは考えられますが、これ自体はオフィシャル曰く「通常のこと」らしいです。エラーが出た場合は、こことかを参考にしつつインポートを進めることになると思います。 今回はインストール時を含め、発生したエラーは基本的に掲載する方向で記事を作成しています。ただし、当方の環境では発生しなかったと言って、別の環境で発生する可能性がないわけではないので、そのあたりはご了承ください。 環境 念の為、記事作成時点でも環境をメモしておきます。 macOS 11.6.8 Unity 2021.3.1f1 TopDown Engine 3.0 新規プロジェクトを作成する まずは、Unity Hubでいつもどおり新規プロジェクトを作成します。ここはいつもどおり。 ここでは2Dを選択しています。名称は適当に「TopDown」としました。 アセットのインポート 新規プロジェクトが立ち上がったらTopDown Engineを追加します。メニュー「Window」＞「Package Manager」を選択します。 Package Managerの画面は、起動した直後だとPackageの欄が「In Project」になっているはず。 Packageを「My Assets」に変更すると、購入済みのアセットが一覧になって表示されるはず。表示されない場合はUnityエディタのコンソールを確認します。 上記のようにエラーメッセージが出ていることがあります。今回は「1回サインアウトしてから再度サインインしてね」とメッセージが表示されているので、そのとおりに従います。 正常にサインインできていれば、上記のように購入済みのアセットが表示されるはず。TopDown Engineが表示されているはずなので、選択して右下のDownloadボタンを押してからImportボタンを押します。ダウンロード済みの場合は最初からImportボタンが押せます。 「本当にインポートしていいの？」と聞かれるので、Importボタンを押します。 上記のようなメッセージが表示された場合は、Install/Upgradeボタンを押します。 今度は、TopDown Engineのどのコンポーネントをインポートするか選択するウィンドウが表示されます。基本的には全部インポートするので、そのままImportボタンを押せばOKです。あとはインポートが終わるまでしばらく待ちます。そこそこ時間がかかる（5分くらい？）なので、軽く休憩でも取りましょう。 インポートが終わると、Assetsフォルダの中にTopDown Engineのフォルダが作成されています。このフォルダには各種デモが格納されています。その中の「LevelSelection」というフォルダ内にあるSceneを実行すると、各種デモを選択できる画面が表示されます。 上記スクショは、LevelSelectionのSceneファイルをダブルクリックして選択した様子。ここからゲームを実行してみます。 任意のゲームを選択すると、自動的にシーンが切り替わってゲームが開始されます。ゲーム実行中にEscキーを押すと左側にメニューが表示され、LevelSelection画面に戻れます。 WASD、上下左右キー：上下左右に移動 Space：ジャンプ、キャラクターとの会話 I：装備選択画面 マウスポインタ：照準の方向 マウス左ボタン：弾の発射 F：ダッシュ E：攻撃 デモゲーム本体でのキー操作は上記の通りです。なお、ゲームによってキー設定が異なっており、使えるキーと使えないキーが存在します。 それと、現状だと当方の環境では「KoalaProcedural」というデモゲームを実行しようとするとエラーが表示されます。 Tilemap Generator : you need to specify a Tile to paint with. https://ysko909.github.io/posts/docker-does-not-run-cmd-in-dockerfile-with-using-vscode/ Fri, 29 Jul 2022 19:54:52 +0900 https://ysko909.github.io/posts/docker-does-not-run-cmd-in-dockerfile-with-using-vscode/ 概要 docker-composeのチュートリアルを進めている際に気付いたことです。 「どうも、コマンドラインでdocker-compose upからコンテナをビルドして実行するときと、Visual Studio Codeの拡張機能であるRemoteを使うのでは、同じファイル使っててもコンテナ構築後の挙動が違うぞ・・・？」 環境の情報 Windows 10のWSL（Ubuntu20.04）を利用 Docker version 20.10.17, build 100c701 Visual Studio Code Version: 1.69.2 (system setup) 上記の環境で実行しています。 何したのよ docker-composeのチュートリアルでは、Pythonのwebアプリケーション用フレームワークであるFlaskとNoSQLデータベースのRedisを使った、簡単なwebアプリケーションの作成を行います。ここではFlaskが稼働するコンテナと、Redisが稼働するコンテナをそれぞれ構築します。コンテナを構築したあとで、ブラウザでローカルホストに対しアクセスすると「n回アクセスしたよ」と表示されます。 ええ、表示されるはずなんです。 こんな感じ。なお、表示されている回数はページ更新の際に増加しますので、更新ボタンをポチポチ押せばどんどん数が増えていきます。 チュートリアルでは、ターミナルでdocker compose upを実行してコンテナを構築します。ところがこのとき、たまたまいつものクセでVS CodeのRemote機能を使ってコンテナをビルドしちゃったんですね。「Reopen in container」っていう、VS Codeユーザーにはいつもの「おなじみの処理」です。「まぁ、別にコマンドでビルドしても、VS Code経由でビルドしても結果は変わらないだろ」・・・そんなふうに考えていた時期が俺にもありました。 ご想像のとおり、実際は違ったわけです。どういうことだってばよ。 どう違うのよ コマンドラインからdocker compose upで実行すると、Flaskが起動してブラウザでアクセス可能。これが本来想定している挙動。 VSから実行すると、ブラウザからアクセスしても反応がない。調べてみたらFlaskが起動していなかった。 上記がコマンドラインによる実行と、VS Code経由による実行の差です。こんな感じで、VS Codeから実行したらFlaskが起動せず、ブラウザからアクセスができませんでした。 FROMpython:3.7-alpineWORKDIR/codeENVFLASK_APP=app.pyENVFLASK_RUN_HOST=0.0.0.0RUN apk add --no-cache gcc musl-dev linux-headersCOPY requirements.txt requirements.txtRUN pip install -r requirements.txtEXPOSE5000COPY . .CMD["flask", "run"] 上記は、チュートリアルに記載されているDockerfileの内容です。Flaskは、最終行のCMDで起動するように指定されています。この行が無視されてFlaskが起動されていないか、起動されてもすぐさま終了してしまってアクセスできないのかなー、と思っていました。 原因調査 当初、ttyの永続化が原因かなーと思っていました。つまり、「起動はしたんだけど、すぐさま終了してしまっている」ケースです。 version: "3.9" services: web: build: . https://ysko909.github.io/posts/illmirague-soda-impressions/ Sun, 24 Jul 2022 18:25:29 +0900 https://ysko909.github.io/posts/illmirague-soda-impressions/ タイトルに全部込めた ので、以降はただの蛇足・・・ではあるのですが、さすがにそれだけでは何なので、稀代の名作「イルミラージュ・ソーダ」を紹介して皆さんをこの深い沼に引きずり込もうというのが今回の記事の趣旨です。はい、こちらに見えるのが沼です。沈もう？ね？沈もう？（圧 なお、この記事ではネタバレを含みません。ネタバレを含まないかわりに、作品のストーリーテーリングに絡むような核心部分には触れず、上澄みの部分を紹介するのみとなっております。というか、全般的にほぼブログ主の愚にもつかない駄文となっています。 なので、あまりに暇すぎてフローリングの木目の筋を端から1本ずつ数えそうになったときにでも、クーラーの効いた部屋のなかでソーダ片手にでも気楽にお読みいただければ幸いです。今年の夏も相変わらず暑いし。 ちなみに、この記事ではイルミラージュ・ソーダの購入先リンクをこれでもかと配置しています。ダイレクトマーケティングです。アフィリエイトとかではないので、仮にご購入されたとしてもブログ主には1銭も入りません。 ええ、お代は要りませんとも、沼に沈んでくれさえすれば。 作品紹介（と駄文） イルミラージュ・ソーダは音声作品です。ボイスドラマっていうよりは、声と音を最大限活用した音声作品です。 音声作品がお好き？結構、ではこれを見ればますます好きになりますよ！ ご購入はこちらからどうぞ（ダイマ1回目）。 ・・・と、声の調子やセリフというようなボイスドラマとして有効な表現方法だけでなく、背景の環境音やもう環境音ですらないグリッチノイズや深いリバーブのかかったドローンサウンドまで、ありとあらゆる「音」という素材を総動員で駆使したアンビエントエレクトロニカです。 そう、ストーリーに基づいたボイスドラマっぽい出来でありながら、音楽的なアプローチを取った作品であるために音楽作品としても立派に成立しているのです。 もちろん、音声作品としても声の表現やセリフから織りなすストーリーは非常に素晴らしく、一筋縄ではいかない「終わる世界と夏の夢（作品のキャッチコピー）」に浸れること請け合いです。しかし、声による表現だけではなくときおり差し込まれる効果音やノイズのおかげで、目を閉じれば深く深く沈み込むような冷たくも静謐な感覚を味わえるでしょう。水の音、とくにせせらぎのような優しい音ではなく「ボコッボコッ」という深い海に沈むようなわりと派手な音の、かくも効果的な演出に度肝を抜かれます。かと思えば、ほとんど何も聞こえず不安感を煽るような部分もあり、刻一刻と目まぐるしく変わる万華鏡のようなサウンドスケープは、何回も聴き込まなければ咀嚼しきれない味わい深さを演出してくれます。 音声作品と言いつつも、ボイスドラマ的な側面だけではない音が持つ本来の魅力に溢れた本当の傑作なのですよ。いや、ホントに。 ぜひ、いいノイズキャンセリング性能を持ったイヤホンやヘッドホンを使って現実というしょうもないノイズをキャンセルしつつ、イルミラージュ・ソーダのサウンドアートにどっぷりと浸かってほしいところです。なぜかというと、無音だと思っていた場面にも、よくよく耳を澄ましてみると極々小さいか細いドローンが鳴っていた、なんていうことが何回もあります。ちゃんとそのボリューム設定にも意味があるわけです。 また、セリフとノイズがオーバーラップしている場面では、どうしても人間の性質として「人の声」を優先して聞こうとします。が、ここはぜひその背後で鳴っているノイズにも注目してほしいので、やっぱり高音域から低音域までまんべんなく聴かせてくれるようなイヤホンやヘッドホンをオススメします。中音域だけじゃないのですよ、これが。 そんな出来なので、「ボイスドラマってあんまり興味ない」という向きにも聴いてもらいたいくらい、素晴らしい作品となっております。聴こう？ね？聴こう？（圧 駄文はいいからストーリーはよ あー、ストーリーの中身とかここで言いたいんだけど！言いたいんだけどなー！（ﾁﾗｯﾁﾗｯ というわけで、こちらからどうぞ（ダイマ2回目）。 なお、百合作品にありがちな話題としてよく挙がる「百合の間に挟まる男が出てくるか否か」ですが、イルミラージュ・ソーダには出てきません。ヨカッタネ！ トラックの話 DLSiteのページにはトラックリストが掲載されています。が、購入してダウンロードしてみるとわかるのですが、実は聴けるのは掲載されている分だけでありません。実際にダウンロードできるトラックは掲載されている本編分に加え、ノイズ作品と音声作品が特典として追加されています。やったぜ。 このボーナストラック的な追加トラックも、クオリティ的に抜かりはまったくありません。しかも、これらのトラックはすべて同じ長さという、「きっと何か意図があるよね？」と勘ぐりたくなる要素もまでしっかり含みをもたせてくれているのがニクい。 というか、この追加トラックたちだけでちょっとしたEPがパッケージできるよね？ってくらいのクオリティなんですよね。音像を無理やり言葉で表現するなら、気持ちハードなOneohtrix Point Neverというべきか、ディストーションを踏んだStars of the Lidというべきか。はたまたリバーブをWetに全振りして残響の海に沈んだMogwaiか。 個人的には、この追加トラックたちも本編に負けず劣らずのクオリティを持った素晴らしい出来であると言うほかありません。ノイズの嵐にさらされながら、それでも聴き続けなければ到達できない境地がここにはあります（これは比喩でなく本当。あるトラックで、本編との絡みがちゃんと用意されています）。 ここからは本当に本当に趣味 前述のとおり「イルミラージュ・ソーダ」は、ボイスドラマとしてだけでなくアンビエントエレクトロニカとしてまごうことなき傑作なわけです。 とはいえ、エレクトロニカってそんなに一般的じゃないよね？と思うので、ここからはイルミラージュ・ソーダでアンビエントやエレクトロニカに興味を持った貴方に送る、ブログ主の独断と偏見によるオススメのアーティスト紹介です。 ・・・あぁああぁ、ちょっとまって、ブラウザの「戻る」ボタン押すのはちょっと待って！ちょっとだけ、ちょっとだけでいいから！！ なお、以下のYouTubeのリンクはなるべく「オフィシャルっぽいもの」を選んでいるつもりです。そのため、オフィシャルチャンネルが見つけられなかったアーティストについては、YouTubeのリンクを貼っていません。が、「貼ってあるやつはどうもオフィシャルじゃないものっぽいぞ」とか、「オフィシャルチャンネルあるじゃねーか」という場合はこっそり教えてください、よろしくお願いします。 Pharmakon 個人的には、イルミラージュ・ソーダのトラック群を聴いて最初に思い浮かんだのが、Pharmakonでした。囁きか叫びか、っていう違いはありますが。ビーーーーーガーーーーーーギャーーーーーーっていう音楽です。ホントにこんな感じの音。 説明になってないように見えますが、百聞は一見（一聴？）にしかず、です。 Wolf eyes Pharmakonの次に思い浮かんだのが、往年の名グループであるWolf eyesです。イルミラージュ・ソーダのノイズトラックと聴きながら、「We all hate you」とかこんな感じだったような・・・と思って、Apple Musicで久しぶりに探して聴きました。 あと、オフィシャルサイトがかなりサイケ。 Oneohtrix Point Never 次はOneohtrix Point Never。こっちもこっちでオフィシャルサイトがめちゃくちゃサイケデリック。アルバムによって、かなり内容が変化するアーティストなのですが、アルバム「Betrayed in the Octagon」は白玉全開なエレクトロニカに全振りしてます。 Tim Hecker こちらも大御所のTim Hecker。心地よくもどこか不穏で、少し「怖い童話」の世界を歩いているような気になる、そんなドローンやフィードバック。 直近のリリースが、「KONOYO」（この世）「ANOYO」（あの世）というのもポイント高い。 なお、YouTubeではオフィシャルチャンネルっぽいものを見つけられませんでした。大御所なのにないの？マ？（ごめん、探し方が悪いだけだと思いたい） Stars of the Lid 今回挙げた中では多分一番叙情的で静か、パーカッションなどのリズム隊を徹底的に排した穏やかなアンビエント。 https://ysko909.github.io/posts/use-p5js-with-react/ Wed, 25 May 2022 00:06:25 +0900 https://ysko909.github.io/posts/use-p5js-with-react/ 概要 この記事では、ReactとTypeScriptを使ってp5.jsをコーディングする開発環境を構築します。 p5.jsでやりたいのは、たとえば「カラフルな線がゆらゆらと動く」だったり「ゆっくりと降り注ぐパーティクルのアニメーション」といった、ダイナミックでクリエイティブな表現だと思います。そんなp5.jsを使って何かしら動かすだけなら、p5.js editorを使えばすぐにコーディングが始められるでしょう。 まぁ実際のところはこれらの表現方法を前面に押し出すよりも、「SSRしているwebサイトの背景でラインアニメーションを実装したい」とか「冬には雪を、春には桜の花びらをトップページに散りばめたい」といったような、webサイトが持つUXをもっと上げるための付加的要素として用いるケースのほうが多いんじゃないかとも思います。 もちろん「ジェネラティブアート」としてp5.jsをダイナミックに使ってるところもあるとは思いますが、そのケースでもただ単純にindex.htmlとそれが参照するsketch.jsだけより、今ならVue.jsや後述するReactと言ったフレームワークやライブラリを使った方がwebページとして扱いやすくなって保守性を向上できるはずです。 それと個人的に「Reactとp5.jsって、同居させたときフツーに使えるんだよね？なんか変なところで衝突したりしないよね？」という確認をしたかった・・・というのもあります＿(　_´ω`)_ﾍﾟｼｮ そこで、今回はただ利用するだけでなくより現実的にp5.jsを活用する方法として、ReactとTypeScriptをベースにp5.jsによるクリエイティブなコーディングが可能な環境を構築します。 プロジェクト作成の手順 まずはReactの環境を作らないことには始まりません。ここでは、手前味噌ですが事前に作っておいたReact用のDockerコンテナを流用することとします。 git clone https://github.com/ysko909/docker_for_react_sample.git app_name ここではgit cloneしていますが、ZIPファイルによるダウンロードでもOKです。 次にVisual Studio Code（以下、Vs code）を起動し、クローンした先のフォルダを開きます。なお、ここではVs codeの拡張機能であるRemote Containerなどはインストール済みである前提です。Vs codeのメニューから「Reopen in container」を選択して、コンテナのビルドを実行します。コンテナのビルドには時間がかかるため、しばらく放置してコーヒーでも飲みましょう。 npx create-react-app app_name --template typescript cd app_name yarn start コンテナのビルドが終わったら、シェルを開きnpx create-react-app app_nameを実行してReactの環境を構築します。app_nameの部分は任意です。今回はTypeScriptで作りたいので、--template typescriptのオプションをつけています。環境構築が終わったら、フォルダを移動してyarn startを実行して、ブラウザで「localhost:3000」にアクセスしましょう。Reactの画面が表示されればここまでは成功です。 yarn add p5 yarn add react-p5-wrapper yarn add @types/p5 次に肝心のp5.jsを追加します。react-p5-wrapperは、Reactのコンポーネントとしてp5.jsを利用するためのライブラリです。一応これがなくても自分でラッパーを作成することでp5.jsをコンポーネントとして利用できるのですが、ここでは環境構築を優先してもともとあるものを活用しています。 ここまでで開発環境の準備は完了です。 p5.jsを試してみる 開発環境の構築が終わったので、ここからは実際にTSファイルなどを作成してp5.jsを動かしてみましょう。ここでは、p5.jsのGet Stertedページのサンプルをもとにして、p5.jsが動作することを確認してみます。 まず、今存在するファイルの整理を行います。create-react-appを実行した直後だと、srcフォルダの内容は上記のスクリーンショットのようになっているはずです。必要なのは後述する2ファイルだけなので、他のファイルはとりあえず削除します。いやまぁ*.text.tsxとかテスト用に必要なファイルはもちろんあるんだけど、とりあえず今必要じゃないからいいかなーって_(┐「ε:)_ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM. https://ysko909.github.io/posts/generate-voice-with-openjtalk/ Thu, 28 Apr 2022 00:01:16 +0900 https://ysko909.github.io/posts/generate-voice-with-openjtalk/ 概要 OpenJTalkとは、名古屋工業大学製の音声合成エンジンです。デモはここで実行できます。使い方は単純で、文字列を渡すと指定されたパラメータにしたがって音声合成を行ってくれます。指定できるオプションとしては話す速度や抑揚、声の高低などさまざま。サンプリングレートも指定できますが、このあたりは必要な人が限られるかも。 今回は、このOpenJTalk用の環境をDockerを使って構築しようと思います。 前提 OpenJTalkは、使用するプラットフォームによって環境構築の難易度に差が存在します。macOSやLinuxでの環境構築は比較的楽な反面、Windowsは自分自身でビルドしないといけないのがちょっと・・・いや、かなり面倒。 そんなわけで、ここではmacOSにてDockerコンテナを用いてOpenJTalkの環境を構築します。多分、WindowsでもWSLを用いるとか、Dockerコンテナ上で構築する方が楽だと思います。 ちなみに、ここではPython3のコンテナをベースに環境構築してますが、他で使っていたDockerfileを使いまわしただけで意味はありません＿(　_´ω`)_ﾍﾟｼｮ 環境構築 Dockerfileは、前述のとおりPythonのコンテナをベースとします。 FROMpython:3.10-busterENVACCEPT_EULA=YRUN apt-get update \ && apt-get install -y g++ \ apt-utils \ apt-transport-https \ gcc \ build-essential \ open-jtalk \ open-jtalk-mecab-naist-jdic \ && apt-get upgrade -y \ && apt-get clean \ && pip install --upgrade pip \ && pip install --no-cache-dir \ autopep8 \ flake8 \ && rm -rf /var/lib/apt/lists/*ADD. https://ysko909.github.io/posts/reverse-item-in-list-with-python/ Wed, 27 Apr 2022 01:30:34 +0900 https://ysko909.github.io/posts/reverse-item-in-list-with-python/ 小ネタです Pythonにおいて、リストの要素を逆順に並び変えるにはいろいろ方法はあります。 結論から言ってしまうと、リスト・文字列・タプルと汎用的に使えるスライスで処理するのが一番楽です。しかも、もともとのデータを破壊しない（新しいオブジェクトを作る）ので安心。 スライス >>> hoge = [1, 2, 3] >>> hoge[::-1] [3, 2, 1] >>> hoge [1, 2, 3] 上記はスライスによる逆順処理です。スライスは[start:end:step]の形で指定しますが、startとendが指定されない場合は、全要素が対象になります。全要素を対象としつつstepを-1とすると、最後の要素を最初に参照します。あとは最後から最初に1件ずつさかのぼって参照されるため、逆順に並べ替えられるというわけです。新しいオブジェクトを返すので、もともとのリストはそのままなのもポイント高い。 reverse() >>> hoge = [1, 2, 3] >>> print(hoge.reverse()) None >>> hoge [3, 2, 1] >>> hoge.reverse() >>> hoge [1, 2, 3] >>> hoge = (1, 2, 3) >>> hoge.reverse() Traceback (most recent call last): File "<stdin>", line 1, in <module> AttributeError: 'tuple' object has no attribute 'reverse' >>> hoge = 'foobarbaz' >>> hoge. https://ysko909.github.io/posts/fix-label-position-with-matplotlib/ Mon, 25 Apr 2022 01:19:38 +0900 https://ysko909.github.io/posts/fix-label-position-with-matplotlib/ 概要 matplotlibでグラフを作成する際、ラベルが長すぎるなどの理由で他のラベルと重複して表示されてしまい見にくい場合があります。こういうときは、rotationで角度をつけると見やすくなるのでメモ。 サンプル fig = plt.figure() ax = fig.add_subplot(1, 1, 1) ax.plot(df, label='original') ax.plot(pred, label='prediction', linestyle='--') ax.plot(pred2, label='prediction2', linestyle='--') ax.legend() plt.show() 任意のデータが含まれたdfについてプロットします。 この結果は上記のようになります。X軸のラベルがそれぞれに被ってしまい非常に見にくいですね。 fig = plt.figure() ax = fig.add_subplot(1, 1, 1) ax.plot(df, label='original') ax.plot(pred, label='prediction', linestyle='--') ax.plot(pred2, label='prediction2', linestyle='--') labels = ax.get_xticklabels() plt.setp(labels, rotation=45) ax.legend() plt.show() そこで、上記のようにラベル表示に角度をつけます。上の例だと、45度の角度を設定しているわけです。 もともとの表示位置から45度反時計回りに回転した状態で、X軸のラベルが表示されました。どうも、ラベルの文字列の中心が、回転の中心になっているようです。また、そのまま回転するとグラフ本体に被ってしまいそうな場合、上下方向に調節してくれるようです。 fig = plt.figure() ax = fig.add_subplot(1, 1, 1) ax.plot(df, label='original') ax.plot(pred, label='prediction', linestyle='--') ax.plot(pred2, label='prediction2', linestyle='--') labels = ax.get_xticklabels() plt.setp(labels, rotation=45, ha='right') ax. https://ysko909.github.io/posts/find-game-object-in-unity/ Sun, 24 Apr 2022 19:44:59 +0900 https://ysko909.github.io/posts/find-game-object-in-unity/ 概要 Unityのスクリプトは、「アタッチされているゲームオブジェクトの参照」だけではなく、同一のシーンに存在していてスクリプトがアタッチされていないゲームオブジェクトについても参照が可能です。方法はいくつかあります。 GameObject.Find()を用いて名称からゲームオブジェクトを参照する。 GameObject.FindGameObjectWithTag()を使用する。 public Gameobject Hogeと宣言し、Inspectorウィンドウにて参照先のゲームオブジェクトを指定する。 それぞれのメリットやデメリットについて見てます。 手法別に見てみる GameObject.Find()を用いる あるシーンにて「Hoge」という名前のゲームオブジェクトがあるとします。ここで言う「名前」とは、Hierarchyウィンドウで表示されている文字列とします。 上記の場合、Main CameraやCM vcam1のことを指します。これらの名称を用いて、参照したいゲームオブジェクトを指定するのがGameObject.Find()です。 GameObject hoge = GameObject.Find("Hoge"); 上記の方法で参照すれば、以降は変数hogeを使ってゲームオブジェクトに対し処理が可能になります。Hierarchyウィンドウ上で表示されている名称をコードでそのまま指定できるので、取得したいオブジェクトが直感的に指定できることが最大の強みです。 注意点は、この処理動作が重めであること。Update()の中で何回も実行するのは避けて、Start()の中で変数に確保しておくべきでしょう。 GameObject.FindGameObjectWithTag()を用いる Unityはゲームオブジェクトに対して「Tag」を指定できます。Tagとは、1つ以上のゲームオブジェクトに対して割り当てることができる参照ラベルです。たとえば、プレイヤーが制御するオブジェクトには「Player」を、プレイヤーが制御しないNPCについては「NPC」を定義できます。他に、あるシーン内で獲得できるさまざまなアイテムについては、「Item」というタグを定義できるでしょう。 このように設定されたタグは、スクリプトによるゲームオブジェクト参照時に役立ちます。たとえばNPC全体に対して何らかの処理を行いたい場合、すべてのNPCオブジェクトを個別に指定するのは大変ですが、NPCに対しタグを設定していれば「NPCというタグを持つオブジェクト」という簡単な指定で処理対象を限定できます。 GameObject player = GameObject.FindGameObjectWithTag("Player"); 上記では、「Player」というタグがついたゲームオブジェクトを参照しています。 ただし、GameObject.FindGameObjectWithTag()が利用できるのは対象のゲームオブジェクトが1つの場合です。1つのタグが複数のゲームオブジェクトに設定されている場合、GameObject.FindGameObjectsWithTag()を利用します。非常に似たメソッド名ですが、複数のゲームオブジェクトを検索できるほうはGameObjectsと複数形のメソッド名になっています。 GameObject[] items = GameObject.FindGameObjectsWithTag("Item"); GameObject.FindGameObjectsWithTag()は、戻り値が配列になっているため代入する変数も配列で宣言する必要がある点に注意。 Inspectorウィンドウにて参照先のゲームオブジェクトを指定 スクリプト内で宣言したパブリック変数は、Inspectorウィンドウで値を設定できます。これを利用し、ゲームオブジェクトをパブリック変数として宣言しておいて、Inspectorウィンドウで参照先のゲームオブジェクトを直接指定する方法があります。複数指定するのは手間ですが、1つ2つくらいならこの方法で指定しても良いかもしれません。 Find()メソッドなどを用いるケースとは異なり、対象のゲームオブジェクトをInspectorウィンドウで指定しているため、参照先を検索する処理を実行する必要がありません。つまり、動作が軽いことこそ、この方法の最大のメリットです。それと、Find()などのメソッドは参照先が非アクティブの場合指定できません。ですが、この方法はアクティブあるいは非アクティブに関係なく、とりあえず存在さえしていれば指定可能です。アクティブかどうかを考慮する必要がないことも、この方法のメリットの1つです。 あるスクリプトで上記のようにパブリック変数を宣言します。 すると、先ほどのスクリプトがアタッチされているゲームオブジェクトを選択した際に表示されるInspectorウィンドウで、スクリプトで宣言したパブリック変数に対してどんなオブジェクトをアタッチするかの項目が増えます。この枠に、参照したいオブジェクトをアタッチしてやればいいわけです。 デメリットとしては、スクリプトだけ見ると具体的にどんなオブジェクトがアタッチされているかがはっきりしないことです。ただ、これはコメントで参照先をメモしておくなどすれば、一応は回避できます。それと、参照したい先を手動設定するため、対象が複数あるとだと手間なのも割と大きめなデメリット。この場合は、ゲームオブジェクトにタグを付けて管理したほうがいいでしょう。 まとめ Unityにおいて、ゲームオブジェクトを参照する方法は複数存在しますが、それぞれについてメリットとデメリットが存在します。うまく使い分けたいものです。 参考 GameObject.Find GameObject.FindGameObjectsWithTag タグ 【Unity】スクリプトでオブジェクトを見つける ゲームオブジェクトの取得 How can I reference to a component of another gameobject? https://ysko909.github.io/posts/get-error-if-using-all-scalar-values-you-must-pass-an-index/ Sat, 26 Feb 2022 14:49:22 +0900 https://ysko909.github.io/posts/get-error-if-using-all-scalar-values-you-must-pass-an-index/ データフレーム作ろうとしたらエラー出た Pythonで、データフレームを辞書から新規に作ろうとしたらエラーが出ました。 >>> import pandas as pd >>> hoge = {'foo': 1, 'bar': 'aaa', 'baz': 3} >>> df = pd.DataFrame.from_dict(hoge) Traceback (most recent call last): File "<stdin>", line 1, in <module> File "/usr/local/lib/python3.8/site-packages/pandas/core/frame.py", line 1593, in from_dict return cls(data, index=index, columns=columns, dtype=dtype) File "/usr/local/lib/python3.8/site-packages/pandas/core/frame.py", line 614, in __init__ mgr = dict_to_mgr(data, index, columns, dtype=dtype, copy=copy, typ=manager) File "/usr/local/lib/python3.8/site-packages/pandas/core/internals/construction.py", line 464, in dict_to_mgr return arrays_to_mgr( File "/usr/local/lib/python3.8/site-packages/pandas/core/internals/construction.py", line 119, in arrays_to_mgr index = _extract_index(arrays) File "/usr/local/lib/python3. https://ysko909.github.io/posts/make-message-dialog-with-phaserjs/ Mon, 07 Feb 2022 20:45:49 +0900 https://ysko909.github.io/posts/make-message-dialog-with-phaserjs/ ノベルゲームでよくあるアレ 会話が主体のノベルゲームでは、登場人物の会話を表示するためのダイアログが存在します。よく、画面の下半分くらいに表示される小窓っぽいアレですね。アレをPhaser.jsを使って実装してみようという小ネタです。 実際どうするの ここでは、四角や円といったPhaser.jsがもともと持っているゲームオブジェクトを使って表示します。 ダイアログをアセットとして用意するのではなく、ゲームオブジェクトで表示するメリットはゲームの挙動を軽くできることです。Phaser.jsが持つ機能を使って描画するだけなので、アセットをダウンロードするのに比べて段違いに早いです。コード量も、アセットを使ったときと大差ありません。 ダイアログをアセットとして準備すれば、ただの四角などではなく凝ったデザインのダイアログにできるため、ゲーム画面のUIデザインに凝りたい場合は画像のアセットとして準備したほうがよいです。ゲーム画面のUI素材は、探せばCC0のものがあったりします。 ただ、アセットを多用し凝ったUIは見た目に華やかですが、そう感じるのは最初だけでゲームを進めていくうちに慣れてしまいます。ところが、「ロードが遅い」といったマイナス面はいくぶんか慣れこそするものの、ストレスがたまらなくなるわけでもないので、なるべくUIに凝るよりUX向上を狙います。 べ、別にデザインセンスがないのでUIには凝らない、とかそういうわけじゃないんだからね！ サンプル codepenで実装してみました。 See the Pen Untitled by ysko909 (@ysko909) on CodePen. コード type DialogProps = { width: number; height: number; align: string; fontSize: number; color: string; strokeColor: number; } class OriginalDialogClass extends Phaser.GameObjects.Container{ constructor (scene: Phaser.Scene, x:number, y:number, text:string, dialogProps: DialogProps){ super(scene, x, y); this.scene = scene; this.scene.add.existing(this); // 入力されたオブジェクトから各要素を取り出す const { width = 100, height = 100, align = 'left', fontSize = 15, color = '#222233', strokeColor = 0x009285 } = dialogProps; this. https://ysko909.github.io/posts/build-docker-env-on-wsl-under-proxy/ Sat, 29 Jan 2022 22:28:19 +0900 https://ysko909.github.io/posts/build-docker-env-on-wsl-under-proxy/ 概要 Proxy環境下のWSLで、Dockerをインストールしコンテナを構築する手順についてメモします。さらに、構築したコンテナにVS Codeからリモートでアクセスして編集してみるところまでやってみました。 なお、めちゃめちゃ長いです。コーヒー片手にでもお読みください。 そもそもなんでそんなことすんの Docker Desktop便利すぎてダメ人間になりそうだから。っていうのは半分嘘ですが、普段使っているWindows環境でLinuxが利用できるWSLという機能がせっかくあるので、どうせなら勉強ついでにDockerでも入れてWSL環境で運用してみようかな、というのが理由。 Docker Desktopが従業員250名を超えるなどの条件を満たす企業での利用は有料となったため、WSLへの移行を検討していた人もいらっしゃるかと思いますが・・・そういう人たちはさすがにもう移行してるよね？まぁDocker Desktopが優秀なので、むしろ今まで無料で使えていたことのほうが異常という気もしなくはないのですが。 手順 前提条件 Windows 10以降 現状でDocker Desktopを利用中 ディストリビューションはUbuntuを利用 エディタはVisual Studio Code 上記の環境を想定しています。 WSL2の有効化 フルオートでインストールする まず基盤となるWSL2環境を準備します。WSLのインストール手順については、マイクロソフトの「WSLのインストール」を参照するのが早いです。 とは言ってもWSLの環境構築はすこぶる簡単で、コマンドを1つ実行すればあとは待っているだけでいいのが素晴らしい。 wsl --install 上記のコマンドをPowerShell上で実行すればよく、Linuxカーネルのダウンロードやインストール、WSL2の既定設定がオートで実行されます。 マニュアルでインストールする Proxy環境下では上記のコマンドが動作しない（ただ、どうも例外があるようで動作するケースもあるようです。一応上記の方法を試してみて、ダメならマニュアルインストールを行ってみるといいかもしれません）。そのため、別の方法を検討する必要があります。つまり、マニュアル作業でUbuntuをWSL2環境にインストールします。手順はここにあります。 PowerShellでEnable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linuxを実行しWSLをインストールします。この際、インストール終了時にリブートを求められるはず。 ディストリビューションのパッケージをダウンロードします。ここから好きなディストリビューションを選択してダウンロードします。curlを使う方法もあるのですが、上記のwebページから直接ダウンロードした方が早いです。 PowerShellで先ほどダウンロードしたAdd-AppxPackage C:\Users\XXX\Downloads\Ubuntu2004.appxを実行して、パッケージをインストールします。 インストールが完了すると、スタートメニューからUbuntuが選択できるようになっているはす。 結果確認 前提条件の通りここではUbuntuをインストールすることを想定しています。バージョンは、特別な理由がない限り指定する必要はありません。デフォルトではUbuntuの最新版がインストールされるはず。 一度インストールが完了すれば、以降はUbuntuをスタートメニューから起動できるようになるはず。初期起動時、Ubuntu環境でのユーザーIDとパスワードを入力する必要があるので、適当に決めておきましょう。 Ubuntuのコンソールにログイン後、バージョンを確認します。 cat /etc/os-release 上記のコマンドを実行すると、Ubuntuのバージョン情報が表示されます。 仮想化の確認は事前にしておこう インストールの時点でCPU側が仮想化をサポートしていない場合エラーが発生します。仮想化に対応しているか（利用可能か）は、タスクマネージャーを参照すると確認できます。事前にやっておくと吉。 Ubuntuのデフォルトユーザーを変更する この時点ではUbuntuのデフォルトユーザーが、インストール後に設定した任意のユーザーとなっているはずです。通常の利用ではそれでも問題ないのですが、後述する「VS CodeからDockerを起動する処理」を行う際に、処理が権限の不一致でエラーになります。そのため、これを回避するためにデフォルトユーザーをrootに変更します。最初から最高権限のユーザーを利用すれば、前述の権限問題は気にしないで済むからです。ただし、最高権限であるがゆえに誤操作などのアクシデントには弱くなるので、そこだけは注意。 $ sudo su - # passwd Ubuntuにログイン後、まずrootになります。その後rootのパスワードを設定しておきましょう。その後Ubuntuのコンソールはいったん終了します。 wsl -l --verbose PowerShellで上記のコマンドを実行して、WSLで動作しているディストリビューションの一覧を表示します。 NAME STATE VERSION * Ubuntu Stopped 2 Ubuntu-20. https://ysko909.github.io/posts/fundamentals-of-pycaret/ Sat, 16 Oct 2021 14:45:04 +0900 https://ysko909.github.io/posts/fundamentals-of-pycaret/ 概要 PyCaretとは、AutoMLをサポートしたPythonの機械学習ライブラリです。AutoMLはというと、ある程度定型化されているような機械学習モデルの作成作業を自動化する仕組みのことです。 PyCaret自体は、scikit-learnやOptuna、Hyperoptなどの機械学習ライブラリのラッパー的な位置づけ。もちろん、LightGBMやCatboostにようなアルゴリズムもばっちりサポート。 scikit-learnで実装すると何行も書かなければならないようなモデルの学習ロジックを数行で実装できたり、本来matplotlibやseabornなどを使って描画するようなグラフもPyCaretでは1行で描画できたりと、とにかく機械学習における作業サイクルを簡素化して生産性向上に全振りしてる印象。しかも、PyCaret自体を実行するときも煩雑なコードを書く必要はまったくないのがすごい。 ここでは機械学習の代表的なデータを使って、PyCaretの使い方を見てみます。 PyCaretをIrisデータで使ってみる クラス分類では、毎度おなじみIris（アヤメ）のデータを使って、ざっくりPyCaretを実行してみます。 インストールは、こちらも毎度おなじみpipを使います。 pip install pycaret PyCaretのインストールは上記を実行しておきましょう。 なお、上記のコマンドでインストールされるPyCaretはSlim Versionであるため、一部の依存関係にあるライブラリをスキップしているようです。顕著に影響が出てくるケースがinterpert_model()あたりを実行する場合で、「XXXのライブラリがインストールされてないぞー」みたいなエラーが出てきたりますが、まぁ今回は気にしないでいきます。 pip install pycaret[full] 上記のコマンドを実行することで、PyCaretのFull Versionがインストールされます。 import pandas as pd import numpy as np from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split from pycaret.classification import * まずはライブラリ読み込み。 ここではscikit-learnのload_iris()を使うのでimportしておきます。今回はクラス分類モデルの作成なのでpycaret.classificationを参照します。回帰モデルを作成する場合は別なクラスが用意されているのでそちらを参照します。 ちなみに後で気付いたのですが、PyCaretは代表的なデータを自分自身で提供している（ここでPyCaretが提供しているデータを確認できる）ので、わざわざscikit-learnをインポートする必要はなかったんだよなぁ・・・。 iris = load_iris() x = pd.DataFrame(data=iris.data, columns=iris.feature_names) y = pd.Series(data=iris.target, name='Species') 次にirisのデータをロードします。 train_X, test_X, train_y, test_y = train_test_split(x, y) train = pd.concat([train_X, train_y], axis=1) test = pd.concat([test_X, test_y], axis=1) 学習に使うトレーニングデータと、モデルを作ったあとの検証に使うテストデータを分けておきます。なお、ここでは説明変数と目的変数を1つのデータセットとして結合していますが、これは後で実行するPyCaretのセットアップで利用するため。 https://ysko909.github.io/posts/add-loading-scene-including-progress-bar/ Sat, 11 Sep 2021 21:51:52 +0900 https://ysko909.github.io/posts/add-loading-scene-including-progress-bar/ ああ、よくあるよね ゲームのオブジェクトを読み込むときによくあるのがローディング画面。ゲームにもよりますが、だいたい「Loading…」みたいな文字列を表示しつつ、プログレスバーがだんだん進行していって、ロードが100%終了するとゲームが始まるような画面のことをここではローディング画面と表現しています。今回は、このローディング画面をPhaser3で実装しようという話。 実際どうやるの 基本的に、Phaser3はゲームで使うオブジェクト（アセットと言います）をpreload()関数内でロードします。このアセットのロードがすべて終了するところを100%として、「今xx%までロードできましたー」という情報をPhaserからもらいつつ、その進行具合で画面に表示したプログレスバーの長さを更新します。Phaserはその進行具合を情報として返してくれるので、こういう実装ができるのですね。 ここではわかりやすく0%でプログレスバーの表示がなし、100%でプログレスバーが画面右まで到達している状態とします。また、ロードが100%になった時点で自動的にローディング画面からゲーム本編に遷移するものとします。ロードの進捗率が100%になったら画面をクリック、とか毎度したくないしね。 なお、「ゲーム内のSDキャラクターがちょこちょこと走り回る」ような、コンテンツ的にリッチなローディング画面もゲームによってはあったりますが、今回は考えないことにします。というのは、「ゲームで使うアセットをロードするためのローディング画面で、ローディング画面に使うアセットをロードする必要がある」という入れ子構造になってしまい、そのアセットを事前にどこかでロードしておく必要があるためです。ただ、事前にどこかでロードさえしておけば、Phaser3ではアセットのキャッシュはどのシーンからでもアクセスが可能です。なので、序盤のどこかでロードしておいてそれ以降のローディング画面ではアセットを表示する、というのも十分検討できる手段だと思います。 ただし、前述のとおりここではプログレスバーの長方形について、進捗率にしたがって幅を変えるだけにします。 サンプル codepenで実装してみました。 See the Pen loading scene with phaser3 by ysko909 (@ysko909) on CodePen. wikimediaにあるファイルを読み込んでいるのですが、うまく動作しないことがあります。そういう場合は更新してみてください。なお、ネットワーク環境が良好だとすぐダウンロードできるので、ローディング画面が一瞬で終わってしまうことがあるようです。そのときは心の目で見てください（ェ コード class BaseScene extends Phaser.Scene { nextSceneName: string; canMoveToNextSceneWithClick: boolean; progressBar!: Phaser.GameObjects.Rectangle; game!: Phaser.Game; wholeCanvas!: Phaser.GameObjects.Zone; constructor(sceneName: string, nextSceneName: string, canMoveToNextSceneWithClick = false) { super(sceneName); this.nextSceneName = nextSceneName; this.canMoveToNextSceneWithClick = canMoveToNextSceneWithClick; } preload() { this.game = this.sys.game; this.progressBar = this.add.rectangle(0, this.game.canvas.height / 2, 0, 8, 0xffffff); this. https://ysko909.github.io/posts/get-error-when-use-interpret-model-with-pycaret-and-shap/ Wed, 01 Sep 2021 23:51:17 +0900 https://ysko909.github.io/posts/get-error-when-use-interpret-model-with-pycaret-and-shap/ 前提 Pythonで機械学習をする際に有用なライブラリPyCaretの1機能であるinterpret_mode()を使うと、SHAPを利用したモデルの解釈をPyCaretから実行できるようになります。 pip install pycaret pip install shap この2行（正確にはinterpretも必要なプロットがあったりするけど）だけで、基本的にはPyCaretからSHAPが使えるようになるので非常に便利です。とくにNotebook上でPyCaretだけimportすればよく、import shapすら必要ありません。あとはinterpret_mode()と記述して、create_model()しておいたモデルについてプロットするだけです。 本来はそれだけのはずなのですが。 ええ、エラーになってしまったのですよ。 エラー内容 ImportError: numpy.core.multiarray failed to importRuntimeError: module compiled against API version 0xe but this version of numpy is 0xd interpret_mode()を実行したところ、上記のようなエラーが発生しました。importの実行でエラーになってしまい、これから先に進みません。 場合によっては、importは実行できるもののinterpret_model()を実行した箇所で似たようなエラーになるケースにも遭遇しました（ただし、こちらについては後述）。 さらに解せないのは、同じコードでつい数日前までは実行できていたことです。数日前にinterpret_model()を正常に使っていたコンテナからDockerfileを持ってきて、それを元に新しくコンテナをビルドした環境で同じコードを実行したらエラーになる、という謎なシチュエーション。エラーメッセージを見るとNumPyが犯人っぽいけど・・・？ 原因 Numbaのバージョンアップのせい。 実はNumbaの更新履歴を見てみると、2021年8月21日にバージョン0.54がリリースされていることがわかります。これが直接の原因です。 PyCaretは、NumPyなら後述のようにバージョン指定していますが、Numbaについてはとくにバージョン指定がありません。そのため、PyCaretをインストールするとNumbaは最新版がインストールされます。現時点（2021年9月1日）では0.54がインストールされます。ところが、このバージョンでinterpret_model()を実行すると、さっきのようなエラーが表示されてしまい、処理が異常終了してしまいます。 「数日前までは動いてた」ってのもコレが原因。たまたま8月21日以前にPyCaretの環境をDockerコンテナにて構築した際は、Numbaがバージョン0.53.1でインストールされたため問題なく動作していました。ところが、8月21日以降にPyCaretの環境を構築するとNumbaは最新バージョンをインストールしてしまいます。そのため、interpret_model()が正常に動作していた環境とは厳密には異なる環境になっていたわけです。 なお、エラーメッセージからしてNumPyが悪いように見えますが、これは完全に濡れ衣です。PyCaretはNumPyのバージョン1.19.5を指定している（以上でも以下でもなく==で指定）ため、少なくともフツーにpipするならこれ以外のバージョンがインストールされることはありません。 回避策 インストールするNumbaのバージョンを指定すればいいわけです。単純ですね。 numba==0.53.1 自分は、上記のように0.53.1をインストール対象のバージョンとして指定しています。コンテナであれば、上記のようにバージョン指定したうえでコンテナをリビルドすれば問題なくinterpret_model()が実行できるようになるはずです。 （参考）別解 基本的には上記のようにインストールするNumbaのバージョンを指定すれば問題ないはずですが、そんなことをしなくてもエラーになったセルを再度実行することで、何事もなかったかのように処理が通るケースも確認しました。なんでやねん。とくにimport部分ではなくinterpret_model()のセルでエラーを吐いているケースでは、単純に再実行するだけで処置が通りました。なんでやねん。理由は謎です。 なお、import部分でエラーになってしまうケースでは、この単純に再実行する方法は使えない（同じエラーが出続ける）ので、Numbaのバージョン指定を行うべきです。 いずれにせよ、なぜimport部分でコケるケースとコケないケースが存在するのかは謎です。とはいえ、エラーになる条件がいまいちはっきりせず、仮に再実行で処理の継続は可能とは言っても毎回エラーの度に再実行するのは手間なので、基本的には前述の通りNumbaのバージョン指定することがベターだと思います。 参考 Numba Numba history https://ysko909.github.io/posts/think-about-reassign-param/ Fri, 23 Jul 2021 18:58:27 +0900 https://ysko909.github.io/posts/think-about-reassign-param/ 再代入ってなにそれ まぁ次のコードを見てくださいな。 const hoge = arg => { let temp = arg + 1; return temp; }; console.log(hoge(1)); 関数hogeは入力された値に1を加算して返すだけです。機能としてはそれだけです。ここで注目するのは、加算された結果の格納先です。ここでは変数tempを新しく宣言して格納しています。アロー関数なんだから、return arg + 1;にすればいいじゃん、というのはとりあえずここでは置いておいて。 次に、このコードを少し書き直してみます。 const hoge = arg => { arg = arg + 1; // arg += 1;でも同様 return arg; }; console.log(hoge(1)); 変数を新しく宣言して結果を格納するのではなく、引数として与えられたargに直接再代入しちゃえという上記のコード。つまり、計算結果を関数の引数に再代入しているわけです。もちろん、少なくとも狙ったように入力値が1加算されて出力されます。さきほどのコードと同様に動作するわけです。 つまり、引数に本来格納されている値とは別の値を関数の中で再代入しちゃうようなケースですが、とりあえず文法エラーにならず実行が可能で、少なくともこのケースでは想定通りの挙動をしています。なので、少なくとも言語仕様としては問題ないと言えるわけです。 ただ、言語仕様で問題ないからって多用してもいいようなものなの？コレ。 規約で禁止してたりする Airbnbのコーディング規約では、関数の引数へ値を再代入することは禁止されています。ESLintにも、再代入を禁止するルールが存在します。 7.13 パラメータを再割り当てしない。eslint: no-param-reassign const hoge = foo => { foo += 1; return foo; } hoge(1); つまり上記のような、fooに再代入するのはダメということですね。 https://ysko909.github.io/posts/get-statistical-test-level-2/ Mon, 12 Jul 2021 20:22:01 +0900 https://ysko909.github.io/posts/get-statistical-test-level-2/ 統計検定2級合格しました 統計検定受けてました。2級のCBT方式です。紆余曲折（？）ありましたがなんとか合格しました。 今回は、その顛末を覚えているうちに書いておこうと思います。一体験談としてどなたかの参考になれば幸いです。なお、この受験記は2021年7月における情報です。最新の受験に関する情報などは統計検定のオフィシャルページをご参照ください。 そもそも統計検定is何 「統計検定」は、統計に関する知識や活用力を評価する全国統一試験です。 データに基づいて客観的に判断し、科学的に問題を解決する能力は、仕事や研究をするための21世紀型スキルとして国際社会で広く認められています。日本統計学会は、国際通用性のある統計活用能力の体系的な評価システムとして統計検定を開発し、様々な水準と内容で統計活用力を認定しています。 上記は、統計検定のオフィシャルページのからの引用です。上記のとおり、統計検定とは一般財団法人　統計質保証推進協会が実施している、統計に関する知識や活用力を評価し認定する資格です。1級から4級のレベル別に存在する統計検定のほか、統計調査士や専門統計調査士などがあります。 データサイエンティストと呼ばれる「さまざまなデータを収集し分析することでビジネスに活用する」人材があらゆる業界で求められている昨今、単純にプログラムが書けるだけではなくいかにデータを活用できる知識や技術があるか、それを証明するのに有効な資格と言えるかもしれません・・・言えるといいなぁ＿(　_´ω`)_ﾍﾟｼｮ まぁ、全く資格が何もないよりはマシだと思います（遠い目 受験方式 統計検定の受験方式には2つあります。1つはペーパーテスト方式。こちらは1年に2回実施されます。特定の会場に受験者が集まって、みんなで一斉に受験する馴染み深いスタイルですね。 もう1つがCBT方式と呼ばれる方法です。CBT方式とは、全国各地に存在しているCBT方式による受験が可能な会場で、コンピュータを使って統計検定を受験できる方式です。ただ、どのレベルでもCBTで受験できるわけではありません。統計検定の2級から4級まではCBTとペーパーテストの両方が実施されていますが、準1級以上は現状のところペーパーテストのみです。 なお、準1級は2021年7月以降にCBTでの受験が可能になるようです。準1級って、選択肢じゃなくて記述で回答するスタイルだったような気がするけど。どうするんだろう。 従来の紙ベースな受験方式は1年に2回定期的に実施される（ただし、2020年はコロナウイルスによる影響でさすがに実施されなかった）のですが、CBT方式であれば好きな会場かつ好きなタイミングで受験できます。 また、CBT方式はテストが終わるとすぐに結果が出ます。そうです、その場で合否が判明します。よって、結果の通知までヤキモキする必要はありません。合格したら帰り道に自分へのご褒美でも買ってから帰ることができますし、不合格ならお通夜のような気分で帰宅できます。いやん。 自分が受験した統計検定2級は、「大学基礎科目レベルの統計学の知識の習得度と活用のための理解度」を問うために実施される検定です。よって、もし大学の講義で統計学を勉強していればそのまま合格できる程度の難易度、ということになります。基礎科目レベルとあるのがポイントで、発展レベルは準1～1級が対象です。 追記 2021年7月27日から準1級がCBTでも受験可能になりました。合格水準は2級のCBTと同様100点満点中60点に設定されています。問題数や試験時間は2級と大差ありません。ただ、出題形式が5肢選択問題のほかに、数値入力問題が新たに設定されている模様です。 さらに追記 1級以外の種別は、紙媒体を利用した従来の試験（PBT方式試験）が終了しました。準1級以下の種別におけるテストは、2022年以降すべてCBT方式による実施になっていたようです。マジかよ。 なんで受験したのよ コロナ禍に世界中が騒然となっていた2020年に転職しまして、仕事内容がガラリと変わりました。これが地味に統計の素養が必要な仕事でして、ちょっと統計学を勉強しようかなーと思い始めていました。ただ、単純に勉強するだけじゃ張り合いがないしモチベーションも上がらないので、せっかく勉強するなら資格取るか！と思い立ったわけです。 大学では統計学を勉強していなかったものの、漠然と「まぁイケんじゃないかなー（ﾊﾅﾎｼﾞｰ」とか気楽に思ってたのですが、まあまあ苦労しました。結局、まともに勉強を始めてから合格するまでに3か月近くかかりました。これが長いか短いかはわかりませんが、ネットの情報を見る限り長めかな？という感じ。最短だと2週間っていう人もいるんだけど・・・すげぇ。 まぁ逆に言えば、大学で勉強してなくてほぼ知識ゼロから始めたとしても独学で取得できる程度の資格、ということになります。ソースは俺。 「ん？2020年に転職したのに受験したのは2021年？1年間近くなにしてたの？」 いやー、そもそも資格勉強の前に業務知識を吸収するのでいっぱいいっぱいだったっていう理由がありまして。確保できた時間は業務知識の勉強に当ててたので、統計検定の勉強がその分後ろにズレこんだわけでして、異業種からの転職にありがちな話です。中途採用者のツラいところです。 あと、コロナ禍のためにCBT受験の会場も場所によっては一時的にですが受験休止してたりと、そもそも受験が実施されていなかったという理由もあります。とくにペーパーテストタイプの受験は2020年の実施を休止してたくらいなので、やっぱり新型コロナウイルスの影響は（もちろんこの資格の試験に限った話ではありませんが）すごかったですねぇ。 勉強のスタイル 勉強時間 平日は1～2時間程度を勉強に当てていました。社会人なので当たり前ですが、平日の昼間は仕事をしているわけです。してるってば。なので、平日で勉強できるのは夜のみということになります。また、休日だとしても家庭の事情で長時間は勉強に割けなかったため、確保できるのは最長でも4時間ほどでした。 なお、上記の時間は1日あたりで確保できる最長の時間です。よって、実際はもっと少なかったりします。まぁ、仕事で疲れちゃって勉強しない日もそこそこあったりしたけどね・・・それはそれとして。 前述のとおり、勉強を始めてから3か月近くかかって合格しているので、勉強時間の合計はざっくり計算すると100時間強ってところでしょうか。 参考書とか なにはともあれ、まず欠かせないのは過去問です。統計検定は過去問をオフィシャルページで公開しています。単純に過去問を見てみたいという場合は、これを参照すればいいと思います。とくに、大学で勉強したなどの理由でもともと統計学の知識がある人は、いきなり挑戦してみてもいいかもしれません。ただし、あくまでもこれは過去問を公開しているだけなので、解説などはありません。じゃあ解説付きの過去問はないのかって？あるんですよ、それが。 それが、実務教育出版の日本統計学会公式認定　統計検定　2級　公式問題集です。 「2級」と書かれていることからもわかる通り、1級など他のレベルについても別個に出版されています。また、直近4年分くらいをまとめて出版するので、上記のオフィシャルページより過去の問題も掲載されます。先述したように、こちらは過去問をただ掲載するだけでなくちゃんと解説もしてくれます。まぁ、この解説を見て解法が理解できるなら苦労しねぇよ！と言いたくなるような解説もあったりするので、全面的にこれだけを攻めればいいのはそれなりに統計の知識がある人だけになるでしょう。 そんなわけで、そもそも知識のない人がいきなり過去問に挑戦したところで返り討ちに遭うのは確実です。 じゃあ、そもそも知識がない人はどうするのよ？という問題なのですが、とても良い教材がインターネットには存在します。しかもタダ！（重要）なのです。それはどこかって？ それは統計web 統計学の時間です。このページは、統計検定2級に必要な知識がしっかりまとまっているありがたいサイトです。基本的に、ここの学習コンテンツをすべて身に着ければ、統計検定2級までならなんとかなります。3級なら楽勝でしょう。しかも、統計webのブログを検索すると過去問を解説している記事があります。至れり尽くせり、素晴らしい。 とはいえ、場合によっては上記のサイトだけでは理解ができない、なんてケースがあるかもしれません。あるいは、そもそも統計学とはなんぞや？という人にとっては、別のテキストをあたったほうがいいかもしれません。 自分の場合は、以下の2冊を副読本として用意しました。 完全独習統計学入門 完全独習ベイズ統計学入門 どちらも著者は小島　寛之先生です。 とくに統計学入門の方は、「これ以上削ると統計学として成立しない最低限、ギリギリのライン」だけをとても丁寧に解説してくれています。この本を読んだだけで統計検定に合格するのはかなり難しいですが、統計学を学ぶうえでのスタートダッシュをキメるにはぴったりの本です。ベイズの方は単純に自分の趣味です。どちらの本も、統計学という比較的カッチリした内容を丁寧に読みやすく解説してくれるので、読み物としても十分に成立するくらいおもしろいです。オススメ！ あと個人的にはYouTubeも使ったりしました。ヨビノリさんにはお世話になりました。 なお、いろんなブログでも言われていることですが、統計検定の公式テキストは出来が初学者にはイマイチなので買う必要はありません。アレは、もともと統計学の素養があって手を動かした経験がある人が、「次の一押しが欲しい」と思って手を出すものです。準1級以上を取りに行く人はいいかもしれませんが、自分のようなド素人には分厚い壁でしかありませんし、内容からしてオーバースペックです。 勉強の流れ まずは統計webの基礎編をメインに勉強します。それと並行して、隙間の時間では副読本を読み進めました。こういうとき、kindleはいいですね。スマートフォンにダウンロードしておけばすぐ読めるし。 統計webの基礎編が終わったら、過去問に取り掛かりました。とはいえ、この時点で半分も解ければいい方です。最初はそんなもんです。自分は5割行ってなかったかも。ひととおり解いたら、間違ったり理解があやふやな部分を復習しました。復習したらまた過去問に挑戦。間違ったところをまた復習・・・と、ひたすらこれの繰り返し。 ここまでやっておけば、大抵の場合ペーパーテスト方式への対応は十分だと思います。ええ、iPhoneならねペーパーテストならね。 いざ受験 CBT方式の詳しい受験方法はオフィシャルページに書いてあるとおりです。 たいていは、受験の時間の15分前くらいまでには受験会場に来いよ！と言われるので、ホイホイそのとおりに到着しましょう。到着したら受付を行い、統計検定を受ける旨を伝えます。ここで持ち物検査があります。当たり前ですが携帯電話やスマートフォンなどの電子機器、参考書などの類はロッカーに入れるよう言われます。さらに腕時計もダメです。スマートウォッチじゃない、ただの時計だったとしてもダメです。 ちなみに時間に関しては、CBTの画面に検定の残り時間が表示されるので時計がなくても問題ありません。会場によっては、壁掛け時計が設置されているところもあるかもしれませんが、いずれにせよ受験では使いません。 統計検定は電卓の持ち込みが可能です。というか、問題によっては平方根を計算する必要があるので、筆算あるいは暗算でも平方根を計算できるぜーという特異な方以外は必須アイテムです。ただし、関数電卓などは検定には利用できませんので、先述した持ち物検査のときにチェックされます。 持ち物検査が終わると、検定を行うPCに案内されます。机の上には計算用紙2枚と筆記用具、推定・検定用の数値表があるはずです。「って計算用紙、2枚だけじゃ足りないよ」と思われるかもしれませんが、要求すれば追加でもらえますのでご心配なく。なお、会場によっては「サインペン＋ラミネート加工されたシート」を提供されるところもあるとか。どっちがいいかと言われれば、フツーに筆記用具＋紙の方だと思います。こればっかりは、実際に受験してみないとわからないのが難儀なところ。 この時点で、すでに画面には統計検定のCBT画面が起動しているはずです。必要事項を確認・記入し、「受験を開始する」というようなボタンを押すと、その時点から検定開始となります。統計検定2級の場合、持ち時間は90分です。 https://ysko909.github.io/posts/make-button-class-with-phaserjs/ Mon, 10 May 2021 23:45:04 +0900 https://ysko909.github.io/posts/make-button-class-with-phaserjs/ Phaser3を使ってボタンを作ろう 任意の文字列と押されたときの挙動を記述したコールバック関数などを引数として受け取って、画面にボタンを配置するクラスを作ってみました。 メニュー画面やRPGの戦闘シーンなどで、コマンドなどを一覧描画したりする際に利用できます。また、ボタンとしての機能を持たせるため、カーソルオーバーなどのイベントに何かしらの反応を示す要素が記述されています。 ソース // 設定用オブジェクト type Props = { width: number; height: number; onClick: Function; align: string; fontSize: number; color: string; } class OriginalButtonClass extends Phaser.GameObjects.Container{ text: Phaser.GameObjects.Text; container: Phaser.GameObjects.Rectangle; constructor (scene: Phaser.Scene, x:number, y:number, text:string, props: Props){ super(scene, x, y); // 入力されたオブジェクトから各要素を取り出す const{ width = 90, height = 40, onClick, align = 'center', fontSize = 30, color = 'black' } = props; // シーンにボタンを追加 this.scene = scene; this. https://ysko909.github.io/posts/define-args-of-function-with-typescript/ Tue, 04 May 2021 12:36:38 +0900 https://ysko909.github.io/posts/define-args-of-function-with-typescript/ いろいろするって雑すぎるだろ いい表現方法が思い浮かばなかったんだよぅ。 たとえば 基本的な関数における引数の指定方法は、引数名:引数のデータ型という感じで宣言します。 const func = (str: string):string => 'input: ' + str; console.log(func('hoge')); これが基本形。ここでは、これをもう少し便利に使える記述方法だったり、拡張機能を見ていこうと思います。 関数の引数にオブジェクトを指定する 当たり前ですが、関数の引数は文字列や数値などのプリミティブな型以外に、オブジェクトを指定できます。 const func = (arg:{x: string, y: string, z: string}): string => arg.x + arg.y + arg.z; const func2 = (arg:{x: number, y: number, z: string}, arg2: string) => { return arg.x.toString() + arg.y.toString() + arg.z + arg2; } console.log(func({x:'foo', y: 'bar', z: 'baz'})); console.log(func2({x: 1, y: 2, z: 'funcfunc'}, 'fugafuga')); 記述方法は上記のとおりで、引数のオブジェクト自体に名前をつけて、各プロパティにそれぞれ型情報を付与してやります。関数内で引数を参照する場合は、オブジェクトの名前.プロパティ名で参照できます。基本的には、普段のTypeScriptの書き方で問題ありません。 https://ysko909.github.io/posts/use-timer-event-with-phaserjs/ Sun, 02 May 2021 09:20:03 +0900 https://ysko909.github.io/posts/use-timer-event-with-phaserjs/ タイマーイベントってなんだっけ 一定の時間経過を条件として発動するイベントのことを、タイマーイベントといいます。タイマーイベントには繰り返し発生するタイプと、1回だけ発動するタイプの2つが存在します。繰り返し発生するタイプは永久に発生し続けるものと、決められた回数のみ発生する2パターンが存在します。 loop:シーンが遷移するなどの処理が実行されない限り、永久に発生し続ける。 repeat:決められた回数分発動し、以降は実行されない。 one shot:1回だけ発生するタイプ。 後述しますが、実装時のメソッドが異なるのでそれだけは注意。 これらのタイマーイベントは、Phaser.Time.Clockクラスを利用することで実装が可能です。 サンプルコード class GameScene extends Phaser.Scene { timerRepeat: Phaser.Time.Clock; timerLoop: Phaser.Time.Clock; timerOneShot: Phaser.Time.Clock; constructor() { super('gameScene'); } preload() { } create() { this.timerRepeat = this.time.addEvent({ delay: 1000, callback: ()=>console.log('hoge'), callbackScope: this, repeat: 2, }); this.timerLoop = this.time.addEvent({ delay: 2000, callback: ()=>console.log('loop'), callbackScope: this, loop: true, }); this.timerOneShot = this.time.delayedCall(3000, ()=>console.log('one shot'), this ); } } let gameScene = new GameScene(); let config = { type: Phaser. https://ysko909.github.io/posts/permission-denied-when-use-data-volume-of-docker/ Thu, 29 Apr 2021 09:00:07 +0900 https://ysko909.github.io/posts/permission-denied-when-use-data-volume-of-docker/ 概要 DockerfileでVOLUMEを使ったりdocker runの際に-vオプションを利用することで、ホストのフォルダをコンテナにマウントできます。それにより、コンテナにおいてホストに存在するファイルを参照したり、逆にコンテナ内で作成したファイルをホストで操作できるようになります。 ただし、後者の場合はファイルのowner権限を考慮しておかないと、Permission deniedエラーを食らうこともあるので注意が必要です。 再現してみる Busyboxコンテナ内で作成したファイルを、ホスト側で削除してみます。 sampleusr@foohost:~/foo$ id uid=1000(sampleusr) gid=9999(testgr) groups=9999(testgr),999(docker) sampleusr@foohost:~/foo$ mkdir hoge && touch hoge/hoge.txt sampleusr@foohost:~/foo$ ls -al hoge total 8 drwxr-xr-x 2 sampleusr testgr 4096 4月 20 16:41 . drwxr-xr-x 4 sampleusr testgr 4096 4月 20 16:41 .. -rw-r--r-- 1 sampleusr testgr 0 4月 20 16:41 hoge.txt sampleusr@foohost:~/foo$ docker run -it -v $(pwd)/hoge:/hoge busybox / # ls -al /hoge total 8 drwxr-xr-x 2 1000 9999 4096 Apr 20 07:41 . https://ysko909.github.io/posts/delete-volume-if-can-not-update-container/ Sun, 04 Apr 2021 09:27:22 +0900 https://ysko909.github.io/posts/delete-volume-if-can-not-update-container/ コンテナをリビルドしても反映されないんだけど 前回に引き続き、今回もDockerまわりのトラブルシューティングです。 Dockerfileやdocker-compose.ymlの内容を更新した場合、基本的にはリビルドして内容をコンテナに反映させます。 docker-compose build --no-cache docker-compose up -d --build --force-recreate docker-composeの場合、上記のようなコマンドを発行するとキャッシュを無視（--no-cache）してリビルドしたり、ymlの内容に変更がなくてもイメージの強制再作成（--force-recreate）から実行してくれます。 ところが、場合によってはこれだけでは反映されないことがあります。 遭遇した現象 version: '3' services: postgres: image: postgres container_name: postgres_hoge restart: always environment: TZ: "Asia/Tokyo" POSTGRES_USER: admin POSTGRES_PASSWORD: admin POSTGRES_DB: hoge ports: - 30000:5432 volumes: - postgres:/var/lib/postgresql/data - ./postgres/initdb:/docker-entrypoint-initdb.d pgadmin: image: dpage/pgadmin4 container_name: pgadmin_hoge restart: always ports: - 30001:80 environment: PGADMIN_DEFAULT_EMAIL: admin@example.com PGADMIN_DEFAULT_PASSWORD: admin volumes: - pgadmin:/var/lib/pgadmin depends_on: - postgres volumes: postgres: pgadmin: 上記は、PostgreSQLとpgAdminのコンテナを立ち上げるdocker-compose.ymlファイルです。このファイルのうち、environmentの部分を変更して、コンテナをリビルドしたのですが変更が反映されませんでした。 environment: PGADMIN_DEFAULT_EMAIL: hogehoge@example.com PGADMIN_DEFAULT_PASSWORD: hogehoge PGADMIN_DEFAULT_EMAILは、pgAdminにログインするメールアドレスを記述する箇所。PGADMIN_DEFAULT_PASSWORDは、その名の通りパスワードを記述する箇所。これらについて、admin@example. https://ysko909.github.io/posts/docker-container-gets-into-restarting-loop/ Sat, 03 Apr 2021 09:05:43 +0900 https://ysko909.github.io/posts/docker-container-gets-into-restarting-loop/ Restartingループから抜け出せない 今回は、自分が経験したDockerまわりのトラブルシューティングについてです。 docker-compose.ymlを編集してdocker-compose up -dしたところ、一度は起動したコンテナがRestartingの状態に変化し、その後ずっとRestartingから変化しなくなる、という症状に見舞われました。つまり、一度は正常に起動しても何らかの原因でコンテナが落ちて、再起動してまた落ちて再起動して・・・を繰り返していることになります。 docker-compose ps psコマンドでコンテナの状態（status）を見てみると、起動直後は「Up」なのですが少ししてから再度psで見てみると「Restarting」に変化していて、以降はずっと「Restarting」から変化しません。 結論から言うと、コンテナ自体が悪いわけではなく起動の際にコンテナ内でエラーが起こっている可能性が高いです。よって、その原因が解消できればコンテナは正常に起動するはずです。 トラブったdocker-compose.yml version: '3' services: postgres: image: postgres container_name: postgres_hoge restart: always environment: TZ: "Asia/Tokyo" POSTGRES_USER: pg_hoge_admin POSTGRES_PASSWORD: pg_hoge_admin POSTGRES_DB: pg_hoge ports: - 30000:5432 volumes: - postgres:/var/lib/postgresql/data - ./postgres/initdb:/docker-entrypoint-initdb.d pgadmin: image: dpage/pgadmin4 container_name: pgadmin_hoge restart: always ports: - 30001:80 environment: PGADMIN_DEFAULT_EMAIL: admin@example.com PGADMIN_DEFAULT_PASSWORD: admin volumes: - pgadmin:/var/lib/pgadmin depends_on: - postgres volumes: postgres: pgadmin: 上記のようなdocker-compose.ymlを作成してdocker-compose up -dしたところ、PostgreSQL側のコンテナだけRestartingから抜け出せなくなってしまいました。コンテナのリビルドやイメージの再取得をしてもダメです。ダメです。ダメだってば(/ω＼)ｲﾔﾝ エラーの回避策 こういう場合は、正常起動しないコンテナのログを参照してみて、何らかのエラーが起きていないかチェックした方がいいです。 というのは、「少なくとも1度は正常起動するコンテナ」なので、イメージやコンテナのビルドそのものには問題がないと考えるのが自然です。そうなると、コンテナが正常起動した直後になんらかのエラーがコンテナ内部で発生していると考えられるため、そのエラーを解消する手がかりがログに残っているはずです。残っているはずなんです。残っているといいなぁ。 docker logs --tail 50 --follow --timestamps postgres_hoge 上記のコマンドを実行すると、指定したコンテナ（上記だとpostgres_hogeコンテナを指します）のログの最新50件分を表示します。大抵の場合、これくらいの件数だけ直近のログを見てみれば何かしらのエラーログを見つけられるはずです。エラーログが見当たらなければ、もうちょっと出力する件数を増やしてみます。 https://ysko909.github.io/posts/use-localforage-with-phaser/ Tue, 16 Mar 2021 23:31:22 +0900 https://ysko909.github.io/posts/use-localforage-with-phaser/ 概要 今回はローカルにデータを保存するJSライブラリのlocalForageをPhaserに導入してみよう、というお話です。 ここで保存対象とするデータは、個人情報やカード情報、セッション情報などの重要なデータ以外とします。たとえばユーザーが指定した背景の色のカラーコードや、webアプリケーション側が生成した重要情報を含まないデータなどです。 背景 Phaserに限らず、クライアント側に何かしらのデータを保存しておきたいというニーズはたまにあったりします。サイトの背景色や文字サイズなどの表示設定を個人に合わせるケースや、前サイトでの重要でない行動情報などのデータを保存しておきたいケースなどです。 こういう場合にパッと思いつくのはweb storageを使う方法です。とくに「local storage」は、クッキーと比べてそこそこのサイズのデータを有効期限なしに保存できます。 ただ、代償として非同期処理できないことやセキュリティ的な保護機構は一切存在しないデメリットがあります。つまり、local storageは同期処理であるため、パフォーマンス的にイマイチです。さらに、個人情報やセッション情報などをlocal storageに保存したら、攻撃者から窃取されたい放題になってしまいます。明示的に削除しないかぎり、データが残存し続けるというのも考え物なのですね。さらに、保存できるデータ型はstringのみ、という縛りもあります。 こういうデメリットのせいで、さして重要じゃないデータについてもlocal storageで運用するには二の足を踏む状況なわけです。 じゃあ代替手段はないの？という話ですが、手段は、ありまぁす。たとえばindexedDBなどは、その代表格でしょう。ただ、コイツはその実装方法が若干複雑です。シンプルにちょっとしたデータを格納したいんだよね、という場合には少し重いです。そこでよりフレンドリーに扱えるlocalForageの出番です。 localForageとは localForageは、シンプルにストレージを扱えるJSライブラリです。前述のIndexedDBやWebSQLといった機能を、シンプルな記述で利用できるラッパーのような感じでしょうか。こういう機能だと他にはStore.jsもあります。 コイツの個人的に一番いいところは、メジャーなブラウザでもサポートに差のあるストレージ機能の複数に対応していることです。さらに、ブラウザが対応しているドライバーに勝手に合わせて保存してくれる、という親切機能付き！素晴らしいー。 IndexedDB WebSQL localStorage 優先度で言えば、上記の順になります。たとえばプログラマーがIndexedDBを使え！と指定していたとしても、ブラウザがIndexedDBを利用できなければ勝手にWebSQLで処理を進めてくれる、というわけです。 他にもAPIの実装が簡単、というのも大きいメリットです。localForage API Docsを見ると実装方法が記載されていますが、とても見通しのいいコードです。Promiseを利用している、ということもありますがコールバック関数での記述でもそこまで可動性は落ちません（でもPromiseが推奨なのでPromiseで書くのが正解かな）。コードの体裁が整っているのももちろんですが、このページ自体とても可読性が高いので見習いたいものです。 コード では実際に、PhaserへlocalForageを導入してみましょう。ここでは、以前作成したシーンの切り替えでフェードアウト・フェードインするコードを流用しています。 class FirstScene extends Phaser.Scene { constructor() { super('firstScene'); this.hoge = 'hoge'; } create() { // ローカルからデータを取得 localforage.getItem('hogekey') .then(value=>{ if (value){ console.log('get item: ' + value); this.hoge = value; this.add.text(width / 2, height / 2 + 100, this.hoge).setOrigin(0.5); localforage.removeItem('hogekey'); } else { console. https://ysko909.github.io/posts/change-scene-with-fade-in-phaser3/ Sun, 14 Mar 2021 23:30:13 +0900 https://ysko909.github.io/posts/change-scene-with-fade-in-phaser3/ 概要 Phaser3でゲームを作るときに、フェードアウトとフェードインを活用してシーンを変える方法があります。しかも割と簡単。今回はその話です。 Phaser3においてシーン遷移する場合、なんの設定もしないといきなりシーンがバシッと変わってしまって、余韻もへったくれもありません。とはいえ、マスクを使ってシーンを変えるほどでもないしなーそういうのは他でやりたいなー、という場合に便利なのがフェードアウトとフェードインです。じわーっと画面がだんだん消えていって、消えきったなーと思ったら別の画面がじわーと現れる、この一連の動きを実装してみます。具体的には、遷移前のシーンをフェードアウトさせて、遷移後のシーンをフェードインさせるわけですね。 コード 全体像 Phaser3でシーンを遷移させる場合はscene.start('nextScene')を使うわけですが、これが実行されるとシーンが遷移します。ということは、これが実行される前にフェードアウトさせて、次のシーン側でフェードインさせるわけです。 今回はFirstSceneからSecondSceneに遷移するケースを考えてみます。 export class FirstScene extends Phaser.Scene { constructor() { super('firstScene'); } create() { const { width, height } = this.game.canvas; this.add.text(width / 2, height / 2, 'First Scene').setOrigin(0.5); const zone = this.add.zone(width / 2, height / 2, width, height); zone.setInteractive({ useHandCursor: true }); zone.on('pointerdown', () => { zone.removeInteractive(); this.cameras.main.fadeOut(1200, 0, 0, 0); // このシーンが完全にフェードアウトしてから次のシーンをstartする this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => { this.scene.start('secondScene'); }); }); } } export class SecondScene extends Phaser. https://ysko909.github.io/posts/use-pickle-for-ml-model/ Sat, 13 Mar 2021 10:51:59 +0900 https://ysko909.github.io/posts/use-pickle-for-ml-model/ 概要 今回は、作成した学習済みモデルをpickleを使って保存・ロードしてみます。 作成した機械学習モデルは、何もしなければそのプログラムが実行終了するとともにメモリから揮発してしまいます。そのため再度モデルを利用したい場合は、もう一度最初からプログラムを実行して学習モデルを作成する必要があるわけです。 とは言え、学習モデルの作成は場合によっては何時間もかけて行うため、モデルを利用するごとに毎回モデル作成を実行していたのでは割に合いません。よって、一度作成したモデルはどこかに保存するなりして永続化しておき、利用するときに読み込むという運用ならモデルの再作成という余計な処理をしなくて済みます。また、モデル間の予測結果を比較したい場合などは、バージョンごとにモデルを保存しておきたい、というニーズもあるかもしれません。 こういうケースにおいて、モデルの保存に利用するのがpickleです。Pythonの標準ライブラリなので追加インストールする必要はありません。 ちなみにもう少し正確に言うと、pickleは学習モデルを保存するためだけのモジュールではありません。もともとの目的は、Pythonのオブジェクトをバイト列などの直列化・非直列化するためのモジュールです。よって、学習モデルに限らずPythonにおけるオブジェクトなら扱えます。学習モデルの永続化以外の用途だと、巨大なデータを読み込んだ結果をpickleで保存しておき、再度利用する際のデータ読み込み負荷を軽減するためなどに利用するケースがあります。 なお、「pickle」の複数形は「pickles」。つまりピクルスのことで、直列化されたデータについて「長期保存できる漬物」という見方をしているのですね。 環境 # python --version Python 3.8.5 上記の環境で実行しました。Pythonのバージョンは、事前に確認しておいてください。 なぜそんな必要があるかというと、Pythonのバージョンに依ってpickleが生成するデータ形式の内容は微妙に異なるからです。正確に言えば、プロトコルのバージョンが異なります。 Python3.8以降の環境において、直列化の際にプロトコルを指定しないのなら、作成されたデータのプロトコルバージョンは4になります。こいつは、たとえばPython2系ではロードできません。Python2系がロードできるのは、プロトコルのバージョンが2であるデータだけです。よって、Pythonのバージョンが異なる環境をまたいでpickleを利用したい場合は、出力時のプロトコルを実行環境に対応したバージョンで指定しておく必要があるわけです。詳細はこちらを参照してください。 なお、今回は直列化・非直列化で同じバージョンのPythonを利用するため、プロトコルの指定は行っていません。 コード 試しにちょっとした学習モデルを作成してみましょう。ここではおなじみのirisデータを用いて、学習モデルを作成し永続化してみます。 import pickle from sklearn import datasets from sklearn.ensemble import RandomForestClassifier from sklearn.model_selection import train_test_split iris = datasets.load_iris() X_train, X_test, y_train, y_test = train_test_split(iris['data'], iris['target'], random_state=0) model = RandomForestClassifier(n_estimators=5, criterion='entropy', max_depth=3, random_state=3) print(model) model.fit(X_train, y_train) pred = model.predict(X_test) accuracy = model.score(X_test, y_test) print('accuracy {0:.2%}'.format(accuracy)) with open('model.pickle', 'wb') as f: pickle.dump(model, f) モデリングのアルゴリズムはRandom Forestを利用しました。とくに意味はありません。手癖です。 https://ysko909.github.io/posts/access-to-mongodb-with-python/ Sun, 28 Feb 2021 23:10:52 +0900 https://ysko909.github.io/posts/access-to-mongodb-with-python/ はじめに PythonからMongoDBのクラウドサービスであるMongoDB Atlasにアクセスして、データを取得する方法についてメモしておきます。ここでは、将来的にはAPIサーバーとして運用することを想定してFlaskをついでに導入していますが、単純にアクセスするだけであればFlaskは必要ないので読み飛ばしてください。 自分がざっくり調べた範囲ですが、MongoDB Atlasについては日本語の記事があまり見受けられなかったので、同じような方法で接続しようとしています方の一助になれば幸いです。 前提 ここでは下記の処理が済んでいることを前提としています。 MongoDB側にクラスターとデータベース、コレクションが既存である（もちろんなにかしらのデータが格納済み）。 Read権限あるいはReadとWrite権限を持ったユーザーを作成している。 プロジェクトのトップページから左メニュー内の「Database Access」を選択すると、ユーザーの一覧が表示されます。ここで「Add new database user」ボタンをクリックすると、新しいユーザーを追加できます。ここの権限設定で「Only read any database」を選択しておけば、プロジェクト内におけるどのデータベースでもRead権限でアクセスできるようになります。 単純に接続確認をするだけなら初期ユーザーで行えばいいわけですが、初期ユーザーはAdmin権限なのでただ接続確認するだけなら権限としては強力すぎるので不要でしょう。それに、今後恒常的に利用することを鑑みると、専用のユーザーを作成しておくほうが望ましいと思いました。 手順 Pythonの環境を準備する。 pipで必要なライブラリをインストールする。 MongoDB Atlasで接続用のドライバーを発行する。 Pythonスクリプトを用意する。 接続確認を行う。 大雑把な手順は上記のとおりです。順に説明します。 Pythonの環境を準備する Python自体の環境は、Dockerコンテナによる構築やローカルへのインストールなど好きな方法で準備します。接続用ドライバーはPythonのバージョンで内容が異なりますが、あまりに古いバージョンをあえて利用しなければならない場合を除けば、安定版を準備するべきと思います。どっちかって言うと注意が必要なのは、後述するMongoDBへの接続用のライブラリです。 FROMpython:3.8-buster 今回、自分は上記のイメージでDockerコンテナを作成しています。まぁほかのプロジェクトのDockerfileを流用しただけなんですけど。 pipで必要なライブラリをインストールする MongoDBへ接続するのに必要なライブラリはpymongoというもの。ところがこれをインストールする際には、ちょっとした記述が必要になります。 python -m pip install pymongo[snappy,gssapi,srv,tls] あるいは pip3 install pymongo[srv] pip install pymongo[srv] 角カッコの中身なに？というところなのですが、この中で最低でもsrvは記述が必要です。pip install pymongoとだけ書くと、あとで実行したときに「dnspython must be installed error」というわかりにくいエラーになってしまうので注意が必要。 なお、pipでこのように角カッコを記述するのは、インストール対象のライブラリについて環境を指定したい場合。つまり単純にpymongoとするだけではダメで、srv用環境としてのpymongoが必要なわけです。 とりあえず、最低限接続に必要なライブラリはこれだけなのですが、後々APIサーバーとして扱いたいので自分はFlaskもインストールしておきました。 MongoDB Atlasで接続用のドライバーを発行する MongoDBには、いわゆるAPI Keyとは異なる接続用のドライバーが存在します。ドライバーは簡単に取得できます。 まずはとりあえず、いつもどおりMongoDB Atlasにログインします。次に接続したいクラスタの「CONNECT」ボタンを押します。 表示されたメニューのうち、真ん中の「Connect your application」を押します。 次に表示されたメニューから、接続元の環境を選択します。ここではPythonの3.6以降を選択しました。すると、mongodb+srv://で始まる文字列が表示されると思うので、この文字列を丸々コピーして控えておきます。後述するPythonスクリプトに記述するのですが、ここで編集が必要になるのは下記の項目。 ユーザー名。これは<username>となっている部分を書き換える。もちろん<>の部分もだぞ！ パスワード。これは<password>となっている部分を書き換える。もちろん<>の部分もだぞ！ 接続先データベース名。これはmyFirstDatabaseとなっている部分を書き換える。 Replace <password> with the password for the <username> user. https://ysko909.github.io/posts/how-to-use-markovify/ Mon, 15 Feb 2021 20:50:59 +0900 https://ysko909.github.io/posts/how-to-use-markovify/ 感想文とか自動生成されたら楽だなって そういう不純な動機で調べてたわけじゃないんですが、今回はPythonでマルコフ連鎖を使いそれっぽい文章を自動生成してみよう、という話です。ここではマルコフ連鎖を実装するためのライブラリとしてmarkovifyを、日本語の形態素解析器としてSudachiPyを利用します。 今回のコードと元ネタのテキストは、ここのリポジトリで公開しています。 マルコフ連鎖 マルコフ連鎖の詳しい内容はwikipediaとかマルコフ連鎖とかを参照してみてください。自分もよくわかってないです。 すっごい乱暴にざっくり言うなら、将来の状態が過去の状態に左右されず、現在の状態のみに依存するという性質（正確にはこれをマルコフ性と言い、マルコフ性のある確率過程のことをマルコフ連鎖と言う・・・らしい）のことです。この性質から、入力されたテキストから下記のような単語の出現におけるつながりをモデルとして作成します。 ある名詞の後は、この助詞の来る確率が高い ある助詞の後はこの動詞、あるいはこの形容詞の来る確率が高い 作成したモデルから、各ノード（形態素）をランダムに選択すれば文章が生成できる、というわけです。 今回は、マルコフ連鎖の実装を自力では行わないでmarkovifyを利用します。あるなら使わなきゃソンでしょー。巨人の肩には遠慮なく乗ります。 なお、モデルの生成にはその元となるテキストが必要です。そのテキストをどこから調達するかによって、生成される文章のテイストが変わってきます。新聞記事のようなテキストを元に作成したモデルから、口語主体のブログのようなテキストは生成できません。よって、「どのような文章を生成したいか」によって、調達するテキストが違ってきます。 今回は、自分が過去に書いたブログ記事を利用します。 形態素解析 形態素解析とは、普段生活の中で使用する自然言語を意味を持つ最小単位である形態素にまで分解すること。このとき、文章は名詞や動詞、副詞などの各品詞に分解されます。 形態素解析を行う機能を持ったツールを、形態素解析器とか形態素解析エンジンと言ったりします。代表的なところだとMecabやJanomeあたりが有名でしょうか。今回はSudachiのPython用ライブラリであるSudachiPyを利用します。なんでこれかって言うとpipだけで完結できることと、比較的マイナーどころなのでどんな感じか触ってみたかったってところです。 環境 $ python --version Python 3.8.5 $ pip freeze | grep markov markovify==0.9.0 $ pip freeze | grep -i sudachi SudachiDict-full==20201223.post1 SudachiPy==0.5.1 Dockerコンテナ上にPython3.8を構築しています。利用したmarkovifyのバージョンは0.9.0でした。Sudachiは0.5.1でした。SudachiDict-fullって何よ？ってところだと思いますが、これは後述します。 環境構築 Python3.8のDockerコンテナ作って、markovifyとSudachiをpipするだけの簡単なお仕事。 pip install markovify pip install sudachipy pip install sudachidict_core 3行目のコマンドが何をインストールしているのか、なんとなく想像がつくと思います。これはSudachi用の辞書なんですが、全部で3パターンあります。上記のcoreはスタンダードなエディションです。他には最小構成のsudachidict_small、フル構成のsudachidict_fullがあります。 sudachipy link -t small あるいは sudachipy link -t full core以外の辞書を利用する場合、上記のコマンドを実行して辞書のリンク先をcoreから変更しておく必要があります。なお、一度リンクをsmallかfullに切り替えたあとでcoreへ戻したい場合は、sudachipy link -uを実行すれば戻ります。 pipでインストールが終わると、コマンドライン上で実行可能になります。 $ sudachipy -m A -a Pythonはインタープリタ型の高水準汎用プログラミング言語である。 Python 名詞,固有名詞,一般,*,*,* Python Python パイソン 0 [19295] は 助詞,係助詞,*,*,*,* は は ハ 0 [] インタープリタ 名詞,普通名詞,一般,*,*,* インタープリター インタープリタ インタープリタ 0 [14262] 型 接尾辞,名詞的,一般,*,*,* 型 型 ガタ 0 [] の 助詞,格助詞,*,*,*,* の の ノ 0 [] 高 接頭辞,*,*,*,*,* 高 高 コウ 0 [] 水準 名詞,普通名詞,一般,*,*,* 水準 水準 スイジュン 0 [244] 汎用 名詞,普通名詞,一般,*,*,* 汎用 汎用 ハンヨウ 0 [] プログラミング 名詞,普通名詞,サ変可能,*,*,* プログラミング プログラミング プログラミング 0 [19447] 言語 名詞,普通名詞,一般,*,*,* 言語 言語 ゲンゴ 0 [19562] で 助動詞,*,*,*,助動詞-ダ,連用形-一般 だ だ デ 0 [] ある 動詞,非自立可能,*,*,五段-ラ行,終止形-一般 有る ある アル 0 [] 。 補助記号,句点,*,*,*,* 。 。 。 0 [] EOS 上記のコマンドを実行すると文字列の入力待ちになるので、適当な文章を入力します。すると入力した文章を、解析して返してきます。 https://ysko909.github.io/posts/make-ar-with-a-frame-and-gltf/ Sat, 21 Nov 2020 10:31:39 +0900 https://ysko909.github.io/posts/make-ar-with-a-frame-and-gltf/ 作ったもの ペルソナ玲音を召喚するARを、A-Frameを使って実装しました。今回はマーカーに依存しないマーカーレスなARで、任意の座標にペルソナ玲音の3Dモデルが「浮いている」ARを実装してみることにします。 なお、「ペルソナ玲音」とはなんぞや？という方がいらっしゃるかと思いますが、ざっくりウィキペディアあたりをご参照ください。玲音を好きになりましょう。 マーカーベースなARじゃないです 前述しましたが、今回はマーカーレスなARとして実装します。 マーカーベースなARは「3Dモデルを召喚する」手法としては王道ですが、ユーザーにURLを渡しただけでは動作しません。何らかの方法で、ユーザーにマーカーを準備させなければならないのが難点です。名刺とかにマーカーを印刷してURLと一緒に渡すなど、物理（フィジカル）なものを利用すれば手段がないわけではありません。とはいえ、ネット上でのみやり取りする際にはこの方法が使えないため、やっぱりマーカーを準備する分の手間はどうしても増えます。 その点、マーカーレスなARはユーザーにURLさえ渡せばすぐ動作するのが最大のメリット。SNSなどにURLだけ掲載しておけば、あとはユーザーにブラウザ経由でアクセスさせるだけです。場合によっては、SNSアプリの内部ブラウザでは動作しないケースがありますが、そこはChromeやSafariでアクセスするよう誘導すればなんとかなるでしょう。 JSによるwebARの実装である以上、現状では3DoFでしか実現できない（XYZ軸の回転のみ検出する）のが難点ですが、そこはアイデアで乗り切るしかありません。あとは、ブラウザとライブラリの進化に期待するしか！（他力本願寺 ペルソナ玲音の3Dモデルについて ペルソナ玲音の3Dモデルは、MagicaVoxelとBlenderを利用し自作しました。モデルの形式ですが、今回はglTFを利用します。glTFだとモーションまで含んだ3Dモデルとして扱えるため、ただ3Dモデルが「そこにある」だけでなく「動く」ので、UXの観点から非常に有利です。 3Dモデルの作り方は割愛しますが、簡単に紹介すると下記のような手順で動く3Dモデルを作成可能です。というか、これ書くだけで1つ記事ができそうな内容ではあるのでちょっと割愛しないとテキスト量が大変なことに＿(　_´ω`)_ﾍﾟｼｮ MagicaVoxelでボクセルモデルを作成する。 objファイルとしてエクスポートする。 エクスポートしたファイル一式をZIPで圧縮する。 MixAmoにアクセスし好きなモーションを付与する。 MixAmoのメニューからFBX形式でダウンロードする。 Blenderで新規プロジェクトを作成し、ダウンロードしたFBXをインポートする。 3Dモデルのサイズや位置、角度などを必要に応じて調整する。 glTF形式でエクスポートする。 ちなみに、MixAmoからダウンロードする際は、FBX形式じゃなくてもBlenderにはインポートできると思いますが、とりあえずFBXを選択しておけば問題ないと思います。 実際のコード 実際に記述したコードは下記のHTMLソースだけです。HTMLと3Dモデルだけ準備すればARが実装できるのは、本当にA-Frame様様ですね。 <html> <head> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script> <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script> </head> <body> <a-scene embedded arjs="debugUIEnabled:false;" renderer="gammaOutput: true;" vr-mode-ui="enabled: false"> <a-assets> <a-asset-item id="model" src="persona_lain_blender.glb"></a-asset-item> </a-assets> <a-entity scale="100 100 100" position="0 0.4 -3" animation-mixer="clip:*" gltf-model="#model" visible="true"> </a-entity> <a-light type="ambient" color="#ffffff"></a-light> <a-light type="point" intensity="2" position="0 4 0"></a-light> </a-scene> </body> </html> 本来、glTFやFBXをそのまま3DモデルとしてAR空間上に出現させる場合、A-Frame単体では実現できません。じゃあどうしているかというと、A-Frame extrasという、A-Frameの拡張機能を利用します。このアドオンを導入することで、glTFの実装が可能になります。 https://ysko909.github.io/posts/check-docker-config-when-disconnect-from-container/ Sat, 12 Sep 2020 05:41:57 +0900 https://ysko909.github.io/posts/check-docker-config-when-disconnect-from-container/ 概要 Kerasを使ったモデルのSHAPによる寄与度の評価を実行しようとしたところ、コンテナとの接続が無言で切れる現象が頻発しました。Visual Studio Code(以下、vscode）のRemoteからも、コマンドプロンプトからもコンテナにアクセスできなくなり、Dockerのリスタートorシステムリブートを余儀なくされるほど無反応。 今回はこの事象の回避策について。 環境 Windows 10 1909 Docker 2.3.0.3 現象 vscodeでPythonスクリプトの処理だったりJupyter notebookの実行だったりと、必ず何かの処理中に突然切断されるのが特徴。また、しばらく再接続ができないなど、コンテナに対するアクションも実行不能になりました。 じゃあ、vscodeを使わなければいいのか、という話なのですがそんなこともなく、ターミナルから直接ファイルを指定して実行してもレスポンスが途切れた後、コンテナから切断されてしまいました。 「特定の処理時に必ず切断される」というわけではなく、比較的軽めな処理は問題なく実行できます。逆に言えば、いつ切断されるのかが読めないということでもあります。 その他の特徴としては、切断直後はディスクの使用率がガンッと跳ね上がって、しばらく100%近くに張り付きます。放置していると、徐々に使用率が下がっていきます。ディスクの使用率が下がったころ、再度コンテナにアクセスしてみると接続が可能になりました。 ・・・リソース不足じゃない？ ログ # python bar.py 2020-09-08 04:19:54.095345: I tensorflow/core/platform/profile_utils/cpu_utils.cc:104] CPU Frequency: 1992000000 Hz （いろいろ中略） 2020-09-08 04:19:57.169352: W tensorflow/core/framework/cpu_allocator_impl.cc:81] Allocation of 642252800 exceeds 10% of free system memory. 2020-09-08 04:20:00.732041: W tensorflow/core/framework/cpu_allocator_impl.cc:81] Allocation of 160563200 exceeds 10% of free system memory. Killed # Pythonの実行ログを見てみると、プロセスがkillされてる・・・なんか、「それ」っぽいな・・・。 原因と対処法 原因はDockerのデフォルト設定が、リソースを遠慮がちに設定してる（CPUは1コア、メモリは2GB・・・など）せいで、ちょっと重い処理（shapの寄与度計算とかな！）をすると、スワップ領域まで喰いつくしてしまい、プロセスがコンテナ内部のカーネルによりkillされてしまうようです。 リソース設定を贅沢に使うよう設定変更してやると、killされなくなりコンテナとの切断も起こらなくなりました。 備考 ただし、当たり前だけどリソースをDockerに割り振る分は、他のアプリケーションが割を食うので注意。余力がある分を、Dockerに割り振るといいかと思います。 ちなみに、あんまりこういうケースをネットで見かけなかったのですが、みんなDockerには最初から贅沢なリソースを設定してるの・・・？ https://ysko909.github.io/posts/access-to-sql-server-with-pyodbc-and-docker/ Wed, 19 Aug 2020 20:40:06 +0900 https://ysko909.github.io/posts/access-to-sql-server-with-pyodbc-and-docker/ はじめに 今回はDockerコンテナ上で、pyodbcを使ってSQL Serverにアクセス可能な環境を構築します。また、Pythonコードを記述するのにVisual Studio Code（以下、vscode）の拡張機能であるRemoteを利用して、Dockerコンテナに対しリモートでのソース編集と実行を行います。この環境を構築するには、下記のように各種ドライバーなどが必要になります。 pyodbcを使うためにodbcドライバーが必要 相手（アクセス先）がSQL Serverなので、SQL Server用のドライバーが必要 pyodbcがsql.hに依存しているため、unixodbc-devのインストールが必要 vscodeで編集するためPythonなどの拡張機能が必要 これらの要求をすべて満たすような、Dockerfileやvscodeの設定ファイルなどを用意します。 フォルダ構成 │ Dockerfile │ requirements.txt │ ├─.devcontainer │ devcontainer.json │ ├─.vscode │ extensions.json │ settings.json │ └─src main.py 冒頭にピリオドのついたフォルダは、vscode用の設定フォルダですのでフォルダ名は固定です。「src」は、実行するPythonのソースコードを格納するだけなので、名前は何でもいいです。もちろん、中身のPythonファイルも名前は任意です。 Dockerfile なにはともあれ、Dockerコンテナを生成しないことには始まりません。 ファイルの内容 ここでは「python:3.8-buster」を利用しています。PythonとDebianのバージョンは、動作させたいアプリケーションの要求する環境に合わせて変更します。ここでは特段のこだわりがないので適当です。 FROMpython:3.8-busterENVACCEPT_EULA=YRUN curl https://packages.microsoft.com/keys/microsoft.asc | apt-key add -RUN curl https://packages.microsoft.com/config/debian/10/prod.list > /etc/apt/sources.list.d/mssql-release.listRUN apt-get update \ && apt-get install -y g++ \ apt-utils \ apt-transport-https \ gcc \ build-essential \ unixodbc \ unixodbc-dev \ msodbcsql17 \ mssql-tools \ && apt-get upgrade -y \ && apt-get clean \ && sed -i -E 's/(CipherString\s*=\s*DEFAULT@SECLEVEL=)2/\11/' /etc/ssl/openssl. https://ysko909.github.io/posts/behringer-td-3-am-review/ Sun, 16 Aug 2020 11:15:05 +0900 https://ysko909.github.io/posts/behringer-td-3-am-review/ やっちまったい これですよ、これ。スマイルマーク版TD-3。 数多あるダンスミュージックに欠かせない音色の代表の「アシッドサウンド」。その音色を奏でるうえで欠かせない機材のRolandの「TB303」。そのクローンとして、去年末あたりから話題になっていたBehringerのTD-3。 今回購入したのはそのTD-3の黄色版です。通常バージョンだとBehringerのロゴマークがある部分は、スマイルマークに変わっています。どんな使い方するか（されるか）わかってるよね、と言わざるを得ないデザインでとても好感が持てます。いい・・・。 スペック 同時発音数：モノフォニック タイプ：アナログ オシレーター数：1 VCF ：1ローパス エンベロープ：1 MIDI：MIDI In / Thru (各×1、5ピンDIN) USB：（MIDI）USB 2.0、タイプB ヘッドホン出力：3.5mmステレオミニジャック×1 ライン出力：1/4インチ端子（ただし回路はアンバランス、TS端子ケーブル接続可） CV出力：+ 1V+ 5V（1ボルト/ oct） 3.5 mmTS入力：Filter in： +12 dBu、Sync in: 2.5V以上 3.5 mmTS出力：CV out：+1V to +5V (1 volt/oct)、Gate out：OFF: 0 V;ON: +12V サポートOS：Windows 7以降、macOSX 10.6.8以降 外部電源アダプター：9V DC670 mA（付属のアダプターを使用） 最大消費電力：2 W 寸法：（高さx幅x奥行き）56 x305 x 165 mm 質量：0.8 kg 付属品：電源アダプター 外観 まずは箱から 自分が購入したのは筐体が黄色のTD-3ですが、ちゃんと筐体の色で箱が別個に用意されているのって、地味にすごいと思います。 箱を開けるとこんな感じ。製品より先にスマイルマークのステッカーが、目に入ります。Aciiiiid!! ステッカーや取説などをどかすと、こんな感じに本体が見えます。 筐体 筐体はプラスチック製です。TD-3は色ごとに型番が若干変わっていて、SRだと銀、AMだと黄色です。銀色だと「THE TB303クローン！」って感じでそれはそれでアリですが、この黄色もなかなかグッとくるデザインです。色が派手な黄色なせいか、プラスチッキーなチープさが1周回って「むしろこの方がいいのでは・・・」と思わせるくらいのデザインになっています。いかにも「Acid!」な感じがいいのですよ。他の筐体色でも同様ですが、文字類は黒で印字されています。これのおかげで「黄色・黒」の警戒色になっているのがまたいいですね。 コネクタ TB303ではフロント側にコネクタは存在しませんが、TD-3にはFilter InやSync Inなどが並んでいます。 https://ysko909.github.io/posts/note-for-immediately-invoked-function-expression/ Sat, 08 Aug 2020 13:47:08 +0900 https://ysko909.github.io/posts/note-for-immediately-invoked-function-expression/ 概要 プログラミング言語における関数は、一度どこかで宣言をしてから別の所でその関数を呼び出すことにより実行できます。ただ、JSに関しては宣言と同時に実行が可能な即時関数という機能があります。 一度しか利用しないような処理を即時関数としてまとめておく、とにかく冒頭で実行させたい処理がある・・・というケースに使うかな。あとは、サンプル的に実行するのでわざわざ呼び出しすら記述したくない、とか。 なお、function()やアロー関数でも両方即時関数として記述できます。 記述方法 記述方法は関数を丸カッコで囲います。この囲い方に特徴があって、「関数を宣言しつつ、実行するようなコード」を記述しています。 ((hoge)=>{console.log(hoge)})('hoge'); なにやらカッコがいっぱいあってややこしいですが、分解して考えれば問題ありません。 (hoge)=>{console.log(hoge)} まず、この部分はアロー関数の宣言部分。これは「関数の宣言」部分として解釈できます。名前のない関数、つまり匿名関数を宣言しています。とりあえず、これ以降はこの部分を「F」として表記を簡略化してみましょう。すると残った部分はどうなるか、という話ですが。 (F)('hoge'); こうなります。 「F」で置き換えた部分と'hoge'という文字列が、それぞれ丸カッコで囲われています。このうち、'hoge'を囲っている部分は関数に渡す引数を記述しています。関数Fは引数を指定する必要がある関数なのでこのような記述になりますが、引数を必要としない関数に対しても丸カッコは省略できません。 ところで、関数は引数の有無こそあれ、実行のためのトリガーがなにかしら必要になります。宣言と実行を別に記述するような、普段の実装の場合はどう記述しているかを考えてみると、宣言した関数がXXXという名前である場合はXXX()というように記述して実行します。これが引数を必要とする関数である場合は、XXX(foo, bar, baz)というように記述し実行します。つまり、この()の部分が関数の実行の直接のトリガーになる、と考えられるわけです。ということは、このトリガーを匿名関数でも使えばいいわけです。 そんなわけで、さきほど記述した匿名関数のFに対しても同様に記述してみます。 F('hoge'); ただし、上記のような書き方では残念ながらエラーになります。これはJSの言語仕様で、冒頭にいきなりfunction()が来る関数や丸カッコの左側になにもないアロー関数、つまり匿名関数をそれ単体では書けないからです。ただ、逆に言えば冒頭に書かなければいいのであって、なにかしらの文字を冒頭に書いてやればいい、ということになります。 +function(){console.log('test')}() というわけで書いたのがこれ。 冒頭に演算子の+を書くという、ある意味非常識極まりない記述方法ですがこれはJSだと実行可能です。これは、-とかでもいいし!でもいいです。ただし、この書き方はアロー関数では使えませんので念のため。ただ、function()の即時関数でも上記のような書き方をすることはほとんどありません。理由は、+のような演算子を記述することがバグの遠因となるかもしれないから。よって、大抵は算術の優先度を決める丸カッコを利用します。 (function(){console.log('test')})(); (function(){console.log('test')}()); // この書き方でも大丈夫 つまりこうなります。この記述方法を匿名のアロー関数に適用したのが、最初の例です。 まとめ 匿名関数単体では記述できないから冒頭になにかしら書いておきたい。 演算子とかだとなんか怖いから丸カッコで囲うことにしよう。 関数実行の「トリガー」となる丸カッコをつけよう。 これらの結果が即時関数の書き方なわけです。考え方がわかれば、ぱっと見よくわからない文法もなんとか納得できます。 それにしても、JSはホントに複雑怪奇だわ・・・。 参考 IIFE（即時実行関数式） 即時関数の使い方と構造について https://ysko909.github.io/posts/install-japanese-font-to-docker-cotainer/ Fri, 07 Aug 2020 15:12:54 +0900 https://ysko909.github.io/posts/install-japanese-font-to-docker-cotainer/ 概要 Dockerコンテナで構築したDebianの環境に、日本語フォントをインストールする方法についてメモします。基本的にはコンテナ上で日本語を使うことってあまりないような気もしますが、matplotlibで日本語項目や日本語のデータを表示する際には日本語フォントが必要になるので。 インストール FROMpython:3.8-busterENVACCEPT_EULA=YRUN curl https://packages.microsoft.com/keys/microsoft.asc | apt-key add -RUN curl https://packages.microsoft.com/config/debian/10/prod.list > /etc/apt/sources.list.d/mssql-release.listRUN apt-get update \ && apt-get install -y g++ \ apt-utils \ apt-transport-https \ gcc \ build-essential \ unixodbc \ unixodbc-dev \ msodbcsql17 \ mssql-tools \ locales \ fonts-takao-gothic \ && apt-get upgrade -y \ && apt-get clean \ && sed -i -E 's/(CipherString\s*=\s*DEFAULT@SECLEVEL=)2/\11/' /etc/ssl/openssl. https://ysko909.github.io/posts/can-not-access-to-github-with-git/ Mon, 11 May 2020 22:02:34 +0900 https://ysko909.github.io/posts/can-not-access-to-github-with-git/ Macの話なんですけどね Missing or invalid credentials. Skip silent fetch commands remote: Repository not found. ある日、いつもの通りブログをチョロっと書いてGitHubのリポジトリにpushしようとしたら、「Repository not found.」とか言われたわけです。リポジトリがないよ、って言っているわけですね。 ないわけないだろ。 ないわけないじゃないですかやだー つい最近作ったばっかりだったら「リポジトリ名間違えたかなー」とか思うわけですけど、もう何ヶ月も同じリポジトリ使ってるわけで、稼働実績があるリポジトリなわけです。だから、「リポジトリが見つからないよ」って言われたところで、そんなわけないだろってなるわけです。 エラーのメッセージをよくよく見てみると「リポジトリないよ」って言っている前にMissing or invalid credentials.って言ってるんですよね。認証情報のエラーなんだけど、認証情報を入力できない。 リポジトリを作ってはじめてpullとかする場合、認証画面が表示されたりコンソールなら入力を求められるはずです。それすら表情されない。あれ、これって結構重症？ Macのキーチェーンアクセスを見てみる GitHubに限りませんが、Macの場合認証情報をキーチェーンアクセスというアプリケーションで管理しています。ここに格納されているGitHub用の認証情報がコケてるんじゃね？ というわけでおもむろに確認してみます。 アプリケーションからユーティリティのフォルダを開いて、その中の「キーチェーンアクセス」をクリックします。すると保持している認証情報の一覧が表示されます。 ウィンドウの右上にある検索窓へ「GitHub」と入力します。するとGitHub用の認証情報が表示されるはずです。 表示されたら、そいつは削除します。右クリックメニューから削除を選択します。 きれいサッパリ削除が完了したのを確認したら、キーチェーンアクセスは閉じて構いません。 さあどうだ おもむろにgit pullしてみます。 $ git pull Username for 'https://github.com': というわけで、認証情報の入力を求められました。再度正しい情報を入力すれば、また普段どおりpullやpushが実行できるようになります。 まとめ とくに何か特別な作業をやった記憶はないのですが、たまにこういうことも起こり得るようです。というわけで、なにかのお役に立てば幸いです。 https://ysko909.github.io/posts/unity-vscode-omnisharp-error/ Mon, 11 May 2020 00:42:40 +0900 https://ysko909.github.io/posts/unity-vscode-omnisharp-error/ UnityのエディタをVS Codeに変えた UnityではC#を編集する際、もともとVisual Studio Communityを使うのですが、使い慣れたVisual Studio Code（以下、VS Code）でコーディングしたかったので、Unity側の設定を変えたんです。 そうしたら 問題発生。 おい、なんかエラー（Warning？）吐いてるぞ。 とりあえず「Show Output」で内容を確認してみます。 [fail]: OmniSharp.MSBuild.ProjectLoader The reference assemblies for .NETFramework,Version=v4.7.1 were not found. To resolve this, install the Developer Pack (SDK/Targeting Pack) for this framework version or retarget your application. You can download .NET Framework Developer Packs at https://aka.ms/msbuild/developerpacks [fail]: OmniSharp.MSBuild.ProjectManager Attempted to update project that is not loaded:/hoge/hoge/... 「.NETFramework v4.7.1が見つからないぞ！」って言われてるな・・・。これ単体でインストールが必要とかって聞いたことないぞ。っていうか、Macなんだからいらないよな、これ。 解決策は王道のアップデート 王道はアップデートだよね、ってことでVisual Studio Community側の更新を行いました。しばらくUnity触ってなかったから、随分バージョンも古くなってしまっていたようで・・・。 合計するとそこそこファイルサイズが大きいので、なかなかダウンロードするのにも時間がかかりました。 そうしたら。 [info]: OmniSharp.MSBuild.ProjectManager Update project: Assembly-CSharp 直ってる？ https://ysko909.github.io/posts/access-to-postgresql-in-docker-container-with-python/ Sat, 11 Apr 2020 09:18:31 +0900 https://ysko909.github.io/posts/access-to-postgresql-in-docker-container-with-python/ はじめに Pythonを使ってDB操作をする場合、pyodbcを利用すると思います。そこで、Dockerコンテナで立ち上がっているPostgreSQLに対して、pyodbcで接続する手順をメモします。なお、確認用としてPostgreSQLにはテスト用のデータを少しだけ格納しておきます。 ちなみに、今回のソースはこちらにあります。 環境 macOS : 10.15.4 Python : 3.7.5 pyodbc : 4.0.30 Docker : 19.0.3.8 psql : 12.2 ざっくりした手順 psqlとpyodbcをインストールする。 DockerでPostgreSQLのコンテナを起動する。 Pythonから接続してみる。 詳しい手順 各種インストール psqlをインストールする まずは、何はなくともpsqlが必要です。インストールします。 psqlとはPostgreSQLのターミナル型フロントエンドです。 対話的に問い合わせを入力し、それをPostgreSQLに対して発行して、結果を確認することができます。 macOSなのでHomebrewを使うのが1番早いです。 brew update brew install postgresql 次にODBCの設定ファイルを変更します。もともと（多分）何も記述されていないファイル「odbcinst.ini」に、PostgreSQL用の部分を追記します。 $ cat /usr/local/etc/odbcinst.ini [PostgreSQL] Driver=/usr/local/lib/psqlodbcw.so 追記の仕方は、下記のようにヒアドキュメントを使うのが多分早いです。 cat <<EOF >> /usr/local/etc/odbcinst.ini heredoc else> [PostgreSQL] heredoc else> Driver=/usr/local/lib/psqlodbcw.so heredoc else> EOF とりあえずバージョンでも見ておきます。 $ psql --version psql (PostgreSQL) 12.2 これでpsqlの準備が整いました。 https://ysko909.github.io/posts/change_file_name_with_python_and_pathlib/ Mon, 09 Mar 2020 14:04:54 +0900 https://ysko909.github.io/posts/change_file_name_with_python_and_pathlib/ 小ネタです。ファイル名の操作を、Pythonとモジュールpathlibを使ってやってみようと思います。 まず目的 ここに、500ファイルほど格納されたフォルダがあります。あります（圧）。すべてJpegファイルで、ファイル名は1.jpegみたいな名前です。適当な連番のファイル名です。 これについて、下記の通りファイル名の操作をします。なお、対象はフォルダ中の全ファイルとします。 ファイル名に連番を付与する。 ファイル名に任意の文字列を付与する。 拡張子を変更する。 最後の拡張子に関しては、厳密には「ファイル名」と表現できるものではありませんが、便宜上他の操作と同様に扱います。 環境 Windows 10 Python 3.6 ファイル名に連番を付与する もともとのファイル名に連番を付与します。連番はゼロ埋めで整形するものとします。たとえば3なら[003」のような形で整形します。 ここでは{:03}とすることでゼロ埋め3桁としています。ここを編集すれば別の桁で出力できます。 ファイル名に任意の文字列を付与する もともとのファイル名に、別な文字列を付与します。 拡張子を変更する もともとの拡張子を、別な拡張子に変更します。 pathlibとな pathlibとはPythonのモジュールの1つで、ファイルシステムのパスを表すクラスを提供しています。簡単に言うとosとglobを足したようなモジュールで、これらの良いとこどりができます。少なくともPython3系であるなら、ファイル操作にわざわざos.pathを使う理由はあまりないかもしれません。 まとめ ちょっとした作業用スクリプトですが、こういうのがあるのとないのでは大違いだったりするので、柔軟に作れるようなくらいモジュールに慣れておきたいものです。 https://ysko909.github.io/posts/fix-compile-error-of-access-vba-with-database-class/ Wed, 12 Feb 2020 09:43:01 +0900 https://ysko909.github.io/posts/fix-compile-error-of-access-vba-with-database-class/ Access関係の小ネタです 久しぶりにAccessのVBAを弄っているのですが、ちょっとエラーでハマったのでメモ。 こんなコンパイルエラーが表示されるんですけど 「プロジェクトではなく、ユーザ定義型を指定してください。」か・・・。相変わらず、VBAのエラーメッセージはなんだかよくわからない文言を出力してくれるなー、とか思いつつ調べます。エラーが出現するソースは下記の部分です。 Option Compare Database Sub func() Dim db As Database ' ここでエラーになる Dim rec As Recordset End Sub えぇー、領域確保だけで何もしてないよー。っていうか、Databaseって思いっきりプロパティの一覧に存在してるじゃん。 ここで書いているDatabaseはDAOのDatabaseですが、なぜかここでコンパイルエラーが発生します。F2キーを押して表示できるオブジェクトエクスプローラーにも、DatabaseはDAOのメンバーとして記載されているので、参照設定を追加しなくてもDAOはAccessのVBAから利用できるはずなんですけどねぇ・・・。 なお、ADO利用時は参照設定の変更が必要です。 原因 原因はコイツです。 Accessファイルを生成した時点で、プロジェクトを指すオブジェクト名が「Database」に設定されます。コイツが「Database」というオブジェクト名になっているせいで、Accessはコード中に記述されたDatabaseをDAOのメンバーであるDatabaseとして解釈してくれません。「Database？ああ、プロジェクトのオブジェクト名ね、はいはい」と解釈してしまうわけです。なんでこんな初期値にした？言え！ 対策 対策は2つあります。 プロジェクトのオブジェクト名を「Database」以外にする 手っ取り早く確実なのはこの方法です。オブジェクト名が重複するからいけないのであって、それならリネームしちゃえばいいわけです。なので、Accessファイルのファイル名と同じにしてみます。 こうすることで、エラーを解消できます。 変数宣言時に「DAO.Database」と記述する 何らかの理由でプロジェクトのオブジェクト名を変更したくない（変更できない）場合は、変数宣言時に「DAOのメンバーであるDatabaseである」と明記すれば、コンパイルエラーは発生しません。 Option Compare Database Sub func() Dim db As DAO.Database ' ここを変更 Dim rec As Recordset End Sub ただし、Databaseの変数を複数宣言する必要があるとか、複数のモジュールでDatabaseを宣言しなきゃいけない、なんてケースだととても面倒くさいです。なので、基本的には「1か所だけ書き換えればいい」という場合を除き、推奨できない方法と言えます。 まとめ VBAクンさぁ、ホントにクセがすごいよね。 web版のExcelだとTypeScriptベースの「Office Script」が提供されたりして、OfficeのスクリプトもそのうちVisual Basicベースではなくなっていくでしょう。が、VBAを搭載した（負の）資産がそうそうOffice Scriptに取って代わるとは思えません。というか無理だろう、きっと。だからこれからも、数年はVBAで悩まされたり苦しみ悶える人たちがまだまだ後を絶たないと予想しています。絶望・・・。 https://ysko909.github.io/posts/docx-convert-to-pdf-with-python/ Tue, 14 Jan 2020 15:34:28 +0900 https://ysko909.github.io/posts/docx-convert-to-pdf-with-python/ はじめに 小ネタです。 Wordで作ったドキュメントをPDFに保存して、メールで送信する。ビジネス上、そんなシチュエーションがたまにあるかと思います。私もそうでした。 上司：「ここのフォルダのwordファイルをPDFで保存して、お客さんにメールしといてくれ。」 自分：「はーい。えーとどれどれ・・・」 なんでファイルを分けた？ え、このファイル全部いちいちWordで開いてPDF形式で保存して、しかも1つのPDFファイルに連結するの？しかも、ファイルそれぞれでページ設定とか書式が微妙に違っているから、Wordでファイルを結合するのも面倒だし・・・。 ちなみに、上記のスクリーンショットは実際のファイルではなく、イメージですのでご了承ください。 やってられるか というわけで、Pythonを使ってWordファイルをPDFに保存しつつ、PDFファイルの結合も一緒に処理しちゃいましょう。 実現したいこと 任意のフォルダ内にあるdocxを全部PDFに変換する 変換したPDFたちは1つのPDFに結合する PDFのページ順は別途編集するので考慮不要とする ざっくりこんなところでしょうか。 ちなみに、PDFのページ順を編集するのにはCubePDF Utilityを使っていますが、他のアプリケーションでももちろんOKです。Wordファイルの数にもよりますが、ファイル名でソートした結果がPDFで最終的に出力したいページ順と一致するよう、ファイル名をリネームする方法もあります。 環境 Windows 10 Word 2016 Python 3.6 PythonはAnacondaでも問題ありません。なお、実行には下記のライブラリやパッケージが必要です。pipやcondaを利用してインストールしてください。 PyPDF2 comtypes ソース いきなりですが、結論です。 import sys import comtypes.client import glob import pathlib import PyPDF2 import time start = time.time() wdFormatPDF = 17 def convert(in_file, out_file): word = comtypes.client.CreateObject('Word.Application') doc = word.Documents.Open(in_file) doc.SaveAs(out_file, FileFormat=wdFormatPDF) doc.Close() word.Quit() def pdf_merger(out_pdf, pdfs): merger = PyPDF2. https://ysko909.github.io/posts/default-solver-param-of-logisticregression-is-changed/ Sun, 15 Dec 2019 14:43:33 +0900 https://ysko909.github.io/posts/default-solver-param-of-logisticregression-is-changed/ はじめに scikit-learnライブラリのロジスティック回帰（LogisticRegression）を使っていたときに気づいた事象です。 まあまあこの界隈ではありがちですが、「過去に動作していたコードがライブラリ（やパッケージ）のアップデートで動作しなくなる」パターンのお話です。 具体的な現象 下記のようなコードでエラーが発生します。具体的にはLogisticRegression()実行時にL1正規化を行うと「L1正規化はサポートしてないぜ！」っていうエラーになります。 lr_l1 = LogisticRegression(C=C, penalty='l1').fit(X_train, y_train) エラーの内容はこんな感じ。 --------------------------------------------------------------------------- ValueError Traceback (most recent call last) ~/devp/hoge.py in 1 for C, marker in zip([0.001, 1, 100], ['o', '^', 'v']): ----> 2 lr_l1 = LogisticRegression(C=C, penalty='l1').fit(X_train, y_train) 3 print('Training accuracy of l1 logreg with C={:.f3}: {:.2f}'.format(C, lr_l1.score(X_train, y_train))) 4 print('Test accuracy of l1 logreg with C={:.f3}: {:.2f}'.format(C, lr_l1.score(X_test, y_test))) 5 plt.plot(lr_l1.coef_.T, marker, label='C={:.3f}'.format(C)) /usr/local/lib/python3.7/site-packages/sklearn/linear_model/_logistic.py in fit(self, X, y, sample_weight) 1484 The SAGA solver supports both float64 and float32 bit arrays. https://ysko909.github.io/posts/install-and-make-some-deliverables-with-phinajs/ Fri, 06 Dec 2019 09:15:20 +0900 https://ysko909.github.io/posts/install-and-make-some-deliverables-with-phinajs/ phina.jsとはなんぞや phina.jsとは「ゲームやツールを簡単に作る事ができるJavaScript製のゲームライブラリ」（オフィシャルより）です。詳細はオフィシャルページを見てもらうとわかりやすいと思いますが、JavaScriptでできているため、PCやスマートフォンなどを問わずブラウザ上で実行できる、便利なライブラリです。たとえばこれとかおもしろいですよね。とくに2Dのブラウザ上で動くゲームを作りたいってなったら、結構イケると思います。 ちなみに ゲームライブラリでJavaScriptって言ったらPhaserあたりが有名だと思うのですが、今回は「国産」ってところでphina.jsを贔屓しています。もちろんPhaserもいいライブラリなので、また別の機会に触ってみたいと思います。 何作るのよ いきなり出鼻をくじくようでアレなんですが、今回は触りってことでテンプレートとして使える簡単なデモ用のスクリプトです。クリックでランダムに「何か」が変わるようなもの、っていう簡単なテンプレートです。 （2020年1月追記）ちょっとした落ちものゲームを作ってみました。 完成形 いきなりですが完成形です。 See the Pen phina.js sample by ysko909 (@ysko909) on CodePen. 画面のテキトーな場所をクリックすると、文字色が変わります。なんかそれっぽいボタンがありますが、画面のどこでも反応するので関係ないです。 ソース // 戦闘画面サンプル // 画面サイズ const W = 960; const H = 640; // 素材asset const ASSETS = { font: { digiFont: "https://db.onlinewebfonts.com/t/55ea8f43f01d7f6e293a0b84be8861eb.woff2" } }; phina.globalize(); /* * メインシーン */ phina.define("MainScene", { // 継承 superClass: 'DisplayScene', // 初期化 init(param) { // 親クラス初期化 this.superInit({ width: W, height: H, }); // 背景色 this. https://ysko909.github.io/posts/search-keyword-in-excel-book-with-python/ Fri, 22 Nov 2019 09:50:35 +0900 https://ysko909.github.io/posts/search-keyword-in-excel-book-with-python/ 職場からExcelが駆逐される日は来るのだろうか Excel。 いいアプリケーションだと思います。実力に裏打ちされた歴史もあるしね。とはいえ、こと日本においては単なる表計算ソフトに留まらず、エゲツない「1セルにつき1文字」という縛りでDTPの真似事までやらされる姿を見るに、個人的には落涙を禁じえません。「ネ申Excel」なんていう話もあるわけで、日本のExcelがいわれのない誹りを受けずに本来の表計算作業を全うする日は来るのか、という思いを抱かずにはいられません。 また、前述のようなリッチな使い方とはまったく逆のベクトルで利用されることがあります。何はなくとも「とりあえずExcelファイルでやります」とExcelを立ち上げるケースです。今日も、テキストファイルでいいのにわざわざExcelファイルに箇条書きする、サラリーマンの姿がどこかで見られるかもしれません。そしてそのExcelファイルを送り付けられて、しかもいろんな情報までてんこ盛りだったりすると、「何この・・・何・・・？」などと口走りながらエンジニアが頭を抱えることになるでしょう。「テキストでいいじゃん」って言いたいところなのですが、相手側にはその発想がそもそもないわけです。 となれば ExcelファイルをそのままCSVなどのテキスト形式にエクスポートすればいいわけです。文字列だとダブルクォーテーションが付与されたりだとか、いろいろExcelが余計なことをしてくれるかもしれませんが、とりあえずテキストまで落とせればどうにでもなります。 ところが必要な情報が一部の列だけで他は必要ない、という場合にはテキストファイルにエクスポートしたせいで却って利用しにくくなってしまう場合もあります。たとえば下記のような感じ。 いくつかある列のうち、「項目名」の列に含まれる値のみを利用するとしましょう。テキスト出力した場合、CSVならカンマで各項目が区切られているので、カンマでsplitして必要な要素だけ利用する、という方法も可能です。この場合では各行を最初の要素のみを参照し、他のデータは捨てる、という処理をループするわけです。ですが、それなら最初からExcelファイルの必要な列だけを参照すればいいんじゃね？という気がします。「読み込むだけは読むけど使わない」なら、最初から読み込まなければいいわけですから。 というわけで実現したい内容を 送り付けられたExcelファイルの必要な部分だけを参照しつつ、ついでに別の処理を行うこととしましょう。とりあえず下記のようなことを要求されていると仮定します。 Excelファイルの一部分をキーワードとして参照する 検索のキーワードとして利用したいセルの場所は確定している 検索時に追加したいキーワードがあれば事前に追加できる キーワードは複数件存在する そのキーワードを利用してGoogle検索する 検索結果はとりあえずテキストファイルに出力する こんなところでしょうか。 なお、検索結果について解析したりアクセスしその内容を取得するのは、Beautiful SoupやScrapyなどを用いて検索結果を解析する必要があります。ここではそこまでは要求されていない、として割愛します。 また、数字が格納されている特定の列に対して何かしらの計算を行いたい場合も、Excelファイルを読み込む処理までは同様に考えることができます。読み込んで値を参照しながら、行いたい計算をPythonで記述すればいいわけです。 環境 Windows 10 Python 3.6.8 selenium 3.141.0 結論から こんなソースを書きました。 import time from selenium import webdriver from selenium.webdriver.chrome.options import Options import xlwings as xw # 時間計測 start = time.time() options = Options() # options.add_argument('--headless') # ChromeのWebDriverオブジェクトを作成(ヘッドレスモードの場合) # ノーヘッドレスの場合は引数なしで実行する driver = webdriver.Chrome(chrome_options=options) driver.command_executor._commands["send_command"] = ( "POST", '/session/$sessionId/chromium/send_command' ) params = { 'cmd': 'Page. https://ysko909.github.io/posts/resist-kaggle-and-make-notebook-of-tutorial/ Tue, 19 Nov 2019 15:25:40 +0900 https://ysko909.github.io/posts/resist-kaggle-and-make-notebook-of-tutorial/ 概要 今回はKaggleに登録して、チュートリアルのデータ参照をしてみます。実際にモデルを作成したりするのはまた別の機会に。 Kaggleってなにさ Kaggleは企業や研究者がデータを（場合によっては懸賞金も）提供し、世界中のエンジニアが最適な機械学習のモデルを競い合うプラットフォームのこと。これだけ聞くと恐れ多い感じもしますが、初心者にとってはデータ分析がタダで練習できるステキなサイトです。しかも参考になる他人のソースや解説資料なども見放題と来たもんで、非常に学べるサイトです。 Titanicチュートリアル Kaggleに掲載されているコンペティションは、基本的に企業や個人がデータを提供し期限を設けて開催するものです。それとは別に、常時開催され提出期限のないチュートリアルがあります。Titanicチュートリアルはその中でも割と有名なチュートリアルです。Titanicとは「あの」タイタニック号のことであり、提供されるデータは乗船していた顧客名簿です。このデータを用いて、生存予測を行うというチュートリアルです。 なにはともあれアカウント登録 Kaggleにアカウントを開設します。登録の方法は、とくに躓くようなところはないと思いますので割愛します。登録するとアイコンはアヒルになります。なぜに？ Titanicチュートリアルに参加 Kaggleのアカウント作成が終わったら、コンペ参加のためTitanicチュートリアルにアクセスします。「Join Competition」をクリックするとポップアップウィンドウが出現しますので、おもむろにに「I Understand and Accept.」をクリックします。要は「同意する、ってボタン押したら、コンペのルールに準拠してもらうからね」ということです。これに同意しないと先に進まないので同意します。 するとこんな感じの画面になるはずです。「You have accepted the rules for this competition. Good luck!」 なお、ルールなどを確認したい場合は「Rules」にいろいろ記述してあります。コンペティションによっては、そのコンペに限定した特別なルールがあったりするので確認が必要です。 Notebookの作成 チュートリアルに参加したところで、今度はNotebookを新規で作成します。コンペティションのトップにある「Notebooks」をクリックすると、右側に「New Notebook」と表示されますので、そのボタンをクリックします。 すると画面が切り替わって、新規でNotebookを作成する画面が表示されます。基本的にはあまり変更する必要はないとは思います。「SHOW ADVANCED SETTINGS」をクリックすると詳細な設定項目が表示されますが、GPUの使用だとかGCPとアカウントをリンクするかといった設定（デフォルトではどちらもOFFに設定されている）なので、やっぱりあまり変更する必要はとりあえずないと思います。 ちなみに、NotebookとScriptの違いですが、NotebookはJupyter Notebookです。なのでMarkdownを記述しつつPythonコードを書くスタイルです。Scriptはその名の通りスクリプトで、コード単体です。どちらがいいかはお好みで。ここではNotebookを選択しました。 下の「Create」ボタンを押すと処理が進んでNotebookが作成されます。すると下記のような画面に遷移します。 これでNotebookが作成できました。Jupyter NotebookなのでMarkdownで任意の記述を行いつつ、Pythonソースを記述かつ実行できます。Notebookの任意の場所にカーソルを置くとMarkdown用、あるいはPython用のセルを追加するボタンが出現します。これでセルを追加していろいろ記述するわけです。 実行は、セル単位であれば実行したいセルにカーソルを置くと、三角形の再生ボタンが左側に表示されます。コイツをクリックすることで、そのセルを実行できるわけです。 実行するとそのセルの直下に実行結果が表示されます。 Notebookを作成したら右上の「Commit」ボタンを押します。下の画像だとすでに何回かボタンを押した後なのでVersionが3まで行っちゃってますが・・・。 「Logs」の部分に処理内容が表示されます。ただし、ここではNotebookに処理内容を記述していないのであまり意味のないCommit結果になっていますが・・・。 なにはともあれ、「Notebookを作成し処理を記述、できあがったらCommitして必要に応じてチューニングを施す」のが、Kaggleのコンペにおける基本的な行動です。 データセットを準備する Notebookを作成したので、コンペ用のデータを読み込んで内容を確認してみます。Notebookの内容は下記のとおりとします。データはコンペのメインページに戻り「Data」タブを参照します。 「Overview」にはどんな名前のデータがあるか、データにはどんな情報が含まれているかなどの情報が記載されています。そのまま読み進めていくと、ページの中頃に「Data Sources」という項目があり、データがダウンロードできるようになっています。 タイタニックのチュートリアルで利用するファイルは「train.csv」と「test.csv」の2ファイルです。とりあえずトレーニング用の「train.csv」について、その内容を確認してみます。そんなわけで下記のようなソースを書きました。 import pandas as pd train = pd.read_csv('train.csv') train.head(3) これを実行すると・・・そんなファイルねぇよ！って怒られます。 えー。まぁなんの考慮もなくべた書きしたところで、そんなテキトーなコードがちゃんと動作するはずもないですな。じゃあどうすれば参照できるのか調べます。 Kaggleではコンペそのものにはデータがキチンと準備されています（じゃないとコンペできないから当たり前ですね）。が、参加者が各々で作成したNotebookから参照するためには、データがどのフォルダに格納されているかを確認する必要があります。 作成したNotebookの右側に「Data」を押すと、下記のようなフォルダが表示されます。 展開してみるとこんな感じ。 じゃあこのファイルをどうやって参照するかですが、まずはinputフォルダはいいとして、その下のフォルダはなんかずいぶんと長い名前です。これ全部指定しなきゃだめなの・・・？とりあえずその辺を確認したいので、ざっくりこんなコードを書いて実行してみます。 import os print(os.listdir('../input')) print(os.listdir('../input/titanic')) listdir()は指定したフォルダの中身を返します。実行結果を見てみます。 ['titanic'] ['train.csv', 'gender_submission.csv', 'test.csv'] どうやらinput/titanic/と指定すれば、配下のファイルが参照できそうです。というわけで冒頭のファイルを修正してみました。 https://ysko909.github.io/posts/behringer-release-analog-bass-synth-clone-tb303/ Fri, 15 Nov 2019 18:38:56 +0900 https://ysko909.github.io/posts/behringer-release-analog-bass-synth-clone-tb303/ むしろ今まで売ってなかったんだね 実を言うとむしろ今まで作ってなかったの？って感じです。そう思えるくらい、Behringerといえば「往年のシンセやエフェクターなんかのクローンを安価で売る」っていうイメージでしたので（失礼）。 とはいえ、TB-303って言ったらもうレジェンドと言ってもいいくらい、ダンスミュージックには欠かせない機材（というか音）なので、「BehringerがTB-303のクローンを売るらしい」って言う話を聞いたらどうしても期待しちゃうわけです。 そしたらこれよ behringer/TD-3が発表されました。 オリジナル回路を再現しつつ、ディストーションやポリチェインなどの機能も搭載しました。https://t.co/45hMi7Fmz2 — BEHRINGER JP (@BEHRINGERJP) November 8, 2019 筐体色は3色！？ ※その後、黒と黄色の筐体色も追加されました。（2020年1月1日追記） ディストーション回路搭載！？ アナログ回路！？ ・・・とまぁ、結構いろんな要素をぶっ込んできたな、という感想です。というか、TD-3自体がTB-303のクローンなのに、これに搭載するディストーション回路はBOSSのDS-1を参考にしましたって商品のオフィシャルページでサラッと書いてます。 これを見るにつけ、とくにRoland方位に向けて絨毯爆撃しつつケンカ売ってる・・・じゃなくて多大なリスペクトを感じるわけです、えぇ。すげぇな、Behringer。 そして驚愕の値段 149ユーロ！! 日本で代理店を経由して販売するなら、だいたい2万円前後といったところになるでしょうか。なお、Behringerの代理店のオフィシャルには、現時点でTD-3の情報はとくにありません。 所感 個人的には中身をアナログ回路にしてきた、っていうのはかなり気になっています。というのは、本家本元のRolandはBoutiqueシリーズのTB-03でTB-303を復刻したわけですが、これってデジタルなんですよね。ACBっていう、「アナログ回路をシミュレートする」Rolandの技術が使われています。デジタルだからだめだ、という話ではありません。「本家がデジタルで再現したものを、Behringerはアナログでクローンしつつ低価格で売る」っていうのが、消費者としては嬉しい反面、商売人として考えると「Behringer、エゲツねぇな」と思ってしまうわけです。 「アナログ回路をシミュレートするなら、実際にアナログ回路を作ったほうが安い。シミュレートの精度をあげようとするとその分処理系にコストがかかる」という、真偽の程がわからない話もあります。本当のところはどうなのでしょうか。 実際のところどうなのよ YouTubeにはすでにクローン元と比べる動画があります。 TB-303だけでなく、RE-303やx0xb0xなどの有名どころなクローンとも比較しています。 アップロードされた動画を見るに「TD-3はよく似てるけど、本物や往年のクローン機に比べるとやっぱりどこか違うなー」という感想を持たざるを得ません。ただ、これはTD-3がダメなのではなく、TD-3を含んだ各クローンがどれも総合点高すぎという「どんぐりの背比べの逆」を地で行っているためです。 本家のTB-303なんかと比較すると、動画の録音環境もあるとは思いますが、若干TD-3はハイに特徴がある感じを受けます。そう考えるとRE-303やx0xb0xの再現率たるや、もはや本物ではなかろうかという驚異の再現率です。とは言え、前述の通り「基本的にはどいつもこいつもレベル高すぎ」なので、TD-3の持つ「ちょっとした差異」が如実に感じられるだけです。単体で聞いて違和感を覚えるか、と言われると・・・まぁ、個人的には感じないなぁ、というところです。 そしてTD-3には、RE-303などのクローンが搭載しなかったディストーション回路を持っています。値段も他のクローンと比較すると、とんでもなく安いです。バーゲンセールかってくらいすでに安い。実際安い。同じく歪み系（オーバードライブ）とディレイを搭載したTB-03の値段を考えると、空間系エフェクターはないものの「エフェクター込みのTB-303クローン」として考えれば恐ろしいコストパフォーマンスです。もはや、「TB-303に忠実な完璧クローンじゃなきゃダメだ！」という再現率至上主義者でもない限り、十二分に魅力的なプロダクトとして映るでしょう。実際自分もグラグラ来てます。 発売っていつなんだろう とりあえず、日本の代理店による発表を待とうと思います。 追記 年の瀬も迫った2019年12月31日、突如新たな筐体色が追加されました。黒と黄色です。 黒もなかなかシックでカッコいいですが、なにより黄色ですね。ベリンガーマークがスマイルマークに変わっているところなんて、ホントにわかってますよねぇ、使われ方が。 この黄色が欲しいんですけど、まだ代理店から情報出ませんねぇ・・・。 さらに追記 黄色、買ってしまいました。 さらにさらに追記 Devilfish版・・・というか、MOD版のTD-3-MOが発表されております。スゲェ。ただ、ノーマルのTD-3と比較すると若干だいぶお値段はお高め。 https://ysko909.github.io/posts/chrome-headless-returns-emply-page-with-python/ Wed, 13 Nov 2019 15:14:28 +0900 https://ysko909.github.io/posts/chrome-headless-returns-emply-page-with-python/ はじめに Python、SeleniumにChromeの組み合わせは、PhantomJSが息絶えてしまった今では自動化の王道だと思います。そんな王道の組み合わせをWindowsで試してたら、Headlessモードの時だけページの取得が上手くできない事象を目撃しましたので、メモしておきます。Headlessモードじゃないなら正常なのに、Headlessモードへ変更した途端におかしくなってしまいました。 環境 Windows 10 Python 3.6.8 ChromeDriver 2.38.552522 Google Chrome 80.0.3965.0（Official Build）canary （64 ビット） 現象 どんなURLを指定しても、HeadlessモードではSeleniumで取得した結果が空っぽのHTMLになってしまいます。Headlessモードを外すだけで、ちゃんと取得します。謎。 Chrome用ソース Chromedriverは、インストール先のパスが通っている前提です。 import time from selenium import webdriver from selenium.webdriver.chrome.options import Options options = Options() options.add_argument('--headless') options.add_argument('--disable-gpu') options.binary_location = 'Chrome Canaryのアドレス' driver = webdriver.Chrome(options=options) driver.get('https://www.yahoo.co.jp/') time.sleep(3) html = driver.page_source print(html) driver.save_screenshot("hoge.png") driver.quit() 多分、極端に変なことはしてないと思うんですが、これが動作するとコンソールには下記のHTMLソースが表示されます。 <html xmlns="http://www.w3.org/1999/xhtml"><head></head><body></body></html> 中身空っぽじゃねーかよ！ 実際save_screenshotで生成されるファイルを見てみると下記の通りです。 オドロキの白さ！ まぁそうですわな、HTMLファイル中に何もないんだから。 Headlessモードを外してみる ソースはこんな感じ。Headlessモードをコメントで外しただけです。 import time from selenium import webdriver from selenium.webdriver.chrome.options import Options options = Options() # options. https://ysko909.github.io/posts/make-spa-site-with-vuex-and-vue-router-first/ Mon, 07 Oct 2019 09:41:57 +0900 https://ysko909.github.io/posts/make-spa-site-with-vuex-and-vue-router-first/ はじめに 以前の記事ではVue CLIを使って簡単なWebアプリケーションを作ってみました。このとき、Vue CLIの設定はデフォルトを採用したのですが、デフォルトだと「Vuex」や「Vue Router」はOFFです。Vue.jsでなくともReactなどのJavaScriptのライブラリやフレームワークを用いた環境でSPAを作成する場合、状態管理とルーティングは避けて通れない機能です。いや、別に利用しなくてもいいんですが、たぶん避けて通ったほうが後々面倒なこと（コンポーネント間でデータバケツリレーしたり、ページ遷移する必要が出てきたり・・・）になります。 なので今回は「VuexとVue Routerを使用したSPAをざっくり作って、状態管理とルーティングに慣れておこうぜ」というのが趣旨です。基本的にはVuexのチュートリアルを参考にしています。 また、基本的にはVue.jsのオフィシャルドキュメントを見つつ、通称「猫本」と呼ばれる「基礎から学ぶVue.js」の記述に沿っています。相変わらず完全に読み切ってないのですが、サンプルコードが参照できるサイトもあってとても親切です。 環境 Windows 10 Visual Studio Code 1.38 $ vue --version 3.10.0 $ node --version v10.15.3 なにはともあれ まずはVue CLIで枠を作ります。 vue create hogehoge ・・・いい名前が思いつかなかった_(:3」∠)_ ここで注意が必要なのは、VuexとVue Routerを設定するのにはデフォルト設定だとダメということです。マニュアル設定します。 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing このうち、RouterとVuexを選択しておきます。もし必要なら他の項目もついでに選択してエンターキーを押します。 https://ysko909.github.io/posts/disk-review-cadans-der-getouwen-cadans-der-getouwen/ Wed, 25 Sep 2019 00:16:41 +0900 https://ysko909.github.io/posts/disk-review-cadans-der-getouwen-cadans-der-getouwen/ Cadans der getouwenとは オランダのカントリー・フォークグループ。Guy Roelofsが中心となり結成。活動時期は2000年前後ごろ。現在は解散しており、Tjaneに活動が引き継がれています。 ・・・基本情報少な過ぎるんじゃないかって？いえいえ。何せオフィシャルサイトがオランダ語でさっぱり、リーダーのGuy Roelofsをインタビューした記事は英語（とりあえずなんとか読める内容ではあるけど）。検索して出てくるとしたらオランダ語のレコード店のページ。あとはDiscogs。日本語のページは皆無・・・。むしろ、下手したらこのページが日本語記事でサジェストされる勢い。まぁ、ホントに情報ないです。 とは言え、情報が少ないことと、アーティストの音楽性やアルバムのクオリティに関係はまったくありません。えぇ、とにかく絶品です（ちなみに試聴は後述のとおりYouTubeでも可能です。ググっても出てきます）。 アルバムの内容とか どの曲も基本的には、フォークとかトラッドミュージックをベースにしています。そこにポップとかカントリー、イージーリスニングっぽい要素が絡んで、郷愁を誘うような懐かしい曲調でありつつも現代的なエッセンスを盛り込んで、非常に聴きやすいアルバムになってます。 1曲目の「Rom Rom Mij Wielken」とか2曲目の「De Linnenwevers」なんて、すごくポップで「トラッドミュージック」って感じはあんまりしなかったりします。むしろ、ちょっとしたAORって感じ。 とは言え4曲目の「Spotlied – Polka」では、いかにもフォーク！トラッド！って感じの曲が出てきたりして。後半になればなるほどトラッドさで主張するような曲が多くなってたりして、しっかりカントリー好きもワールドミュージック好きも喜ばせてくれます。アルバム前半では聴きやすく現代的な曲調で揃えつつ、そのままトラッド色の強い後半まで引っ張って行くような構成です。なので、個人的には後半まで通して聴かせるために、前半に「掴み」になりそうな曲を配置したのかなー、と思ったりもします。 基本的にリズム隊はエレキベースとベーシックなドラムセットなので、そこだけ聴くととても馴染みやすくポップです。ただ、各々の曲のイントロや間奏に顔を出すフルートやアコーディオンのおかげでただのポップやAORにならず、カントリーやトラッドさがブレンドされて、いいスパイスになってます。とくに特徴的なのが「ブズーキ」と呼ばれる、バルカン半島方面で用いられるギターやマンドリンのような弦楽器です。一聴するとシングルコイルのピックアップ搭載のギターっぽい硬質な響きなのですが、この「ギターっぽいけど、でもなんか違う」というのがいい味を出しています。 どの方面にもウケる、高次元でバランスの取れた構成になっていると思います。 ちょっと難点があるのよ 難点なのは全曲通じて歌詞がオランダ語なので、内容がさっぱりなこと。全然わからん。オランダ語を解する人でカントリーやトラッドミュージックが好きで、しかもSpotifyなどのサービスを利用している人は、今すぐ歌詞の内容を理解しつつ聴けます・・・って、難易度が高すぎるっての_(:3」∠)_ それとCDをはじめとするフィジカルな音源が入手困難なこと。ただ、Spotifyなどではストリーミング配信されているため、こういったサービスを利用している人で「別にCDとかモノで持ってなきゃいけない必要はないよ」っていう人には問題ないと思います。 どこで聴けるかって言うと Spotifyにはありますが、Amazom music unlimitedにはありませんでした。Apple Musicでは配信されているのかな？ちょっと調べきれてないです。誰かご存じないですかね？ ちなみに、YouTubeに音源がアップロードされているのですが、これオフィシャルなんですかね？ ちなみに グループ名である「Cadans der getouwen」。これはオランダ語で、翻訳すると「織機のリズム」。なんで織機か、というと中心人物のGuy Roelofsの両親がテキスタイルの工場オーナーだったからだとか。 ちなみに2 そもそも自分がこのアーティストを知ったのは、タワレコかHMVかディスクユニオンのどこか店舗でセールされてた輸入盤を買い漁ってたときなんですよね。たぶん2000年代後半のどこかで買いました。この頃は、とにかく何でもいいからいろんなアルバム買ってたな・・・。このアルバムに関しても、「とりあえず中身わからないし、そもそも何語なのかすらわからないけど、なんとなくジャケットからして良さそうだから買ってみようか」みたいな。たしか、そんなノリだったと思います。よくぞ買っておいた、私。いやー、数百円をケチったりしないで買っておいて、ホントよかった。 今ではもう記憶も定かではないですが、たぶん中古盤ではなかった覚えがあるので、そもそもバイヤーは何でこのアルバムを仕入れたのか、とても興味があります。ヨーロッパカントリー好きなバイヤーだったのだろうか。でも、なかなか売れないだろ、こんなの。いや中身はいいんだけどさ、ニッチすぎるでしょ。 郷愁の田園風景を彷彿とさせる曲たち。帰省する旅路でのBGMにいかがでしょう。 https://ysko909.github.io/posts/make-random-data-easily/ Sat, 07 Sep 2019 10:31:55 +0900 https://ysko909.github.io/posts/make-random-data-easily/ テストデータは欲しいけど「hoge」とかじゃ困るときに 文書作成やレイアウト検討など、さまざまなシチュエーションでダミーデータは必要です。ただ、あんまり「テストテストテスト・・・」のような単語の羅列だったり、同じ日付が繰り返し並んでいても、実際の動作がイメージしにくいです。かと言って、「hoge」「fuga」「piyo」「foo」「bar」「baz」ばっかりだと「そもそもどんなデータを想定してるんだかさっぱりだよ！」なんてこともあるかもしれません。 そこで各種ダミーデータの作成方法をメモしておきます。なお、ここで言及する「ダミーデータ」とは以下のようなものを想定しています。 テキストであればLorem ipsumなど意味はないが読める（読めそうな）テキスト 小数あるいは整数であれば適当な値 時刻や日付であれば（任意の範囲で）適当な値 よって、Linuxなどでランダムなデータを生成するのに利用するurandomのような機能は対象外です。また、VBAによるランダムなデータの生成もここでは対象外とします。プログラムを組むなら何でもアリになっちゃうしね_(:3」∠)_ fakerを使う fakerはPythonパッケージの1つです。このパッケージのすごいところは人名、住所、会社名などを日本語で生成できるところ。またその機能もすこぶる多彩です。前述のプロフィール情報のほか、下記のようなダミーデータを生成できます。 業界名（銀行、食品、保険など） 職業（バスガイド、薬剤師など結構細かい） クレジットカード情報 ファイル情報 緯度経度情報 メールアドレス（フリーメールか否か、なんていう細かい指定も可能） URL、ドメイン、ホスト名 IPv4、v6のアドレス もう、とりあえずプロフィール系のダミーデータはこれ使っておけばいいんじゃね？っていうくらいに多彩です。ホントしゅごい_(:3」∠)_ 強いて難点をあげるなら、ダミーテキストも生成できるのですが、日本語として意味のない文章になることくらい。「別に意味がなくてもいいよー」という場合は、このパッケージ1つあればもう完璧です。 ちなみに紹介したこれはPythonのパッケージですが、PHPやRubyにもfakerという同名のライブラリが存在します。 ダミーデータを生成するサービスを利用する ダミーデータを調達するには、web上で生成してくれるサイトを利用するのが手っ取り早いです。大抵は出力もCSVなどに対応しているので、わざわざwebページをコピペする必要もありません。なので、有名どころ（？）を紹介します。 疑似個人情報データ生成サービス もうページの名前からして期待できるのが疑似個人情報データ生成サービスです。出力できるダミーデータは一般的なプロフィール情報です。名前などのパターンが多い上、住所は出力したい都道府県を選択できる、男女比率を選択できる、出力する年齢の範囲も指定できるとあってなかなか多機能です。血液型も生成できるのですが、日本人の血液型の割合に合わせて生成されるというのも、「それっぽさ」を醸し出す一因かもしれません。 JSONの出力はできませんがXMLの出力が可能で、他にxls、CSVでの出力ができます。 難点は、メールアドレスのドメインが完全にランダムなこと。gTLDにないような文字列なので、そこだけはケアが必要です。 mockaroo 日本語データではありませんが、ダミーのプロフィール情報のほかにBitcoinのアドレスや中国っぽい名前まで生成する、めちゃくちゃ多彩な機能を持ったサービスがmockarooです。出力もCSV以外にJSON、xls形式など多彩。なお、1000件を超えるデータの出力についてはお金がかかるので注意。 ただねぇ・・・日本語データが生成できないのは、唯一にして最大の弱点・・・。 NameMaker 英語名やフランス語名など、それっぽい名前を生成できるのがName Makerです。NPC名とかに使えるかな？ ダミーテキストを生成する 前述のfakerではカバーしきれなかったのがダミーテキスト。そんなわけでダミーテキストを調達する方法について紹介します。 Lorem Ipsum 英字のダミーテキストでは大御所のLorem Ipsum。とりあえずこれを使っておけば「それっぽくなる」のが便利。UIの出来がいいと、Lorem Ipsumを書いておくだけでなんかオサレっぽさが醸し出されます。 青空文庫 日本語のダミーテキストを調達するのについては、もうこれが一番なんじゃなかろうか、と。最終手段を最初に持ってきた感がありますが、青空文庫にある任意の本の一節を引用する方法があります。著作権はすでに切れているので利用については自由です。 ネックはルビが振られていること。具体的には以下のように振られ方をしています。 私《わたくし》はその人を常に先生と呼んでいた。 だからここでもただ先生と書くだけで本名は打ち明けない。 これは世間を憚《はば》かる遠慮というよりも、その方が私にとって自然だからである。 これを除外しないといけないのが手間です。ルビの削除についてはググると方法が出てたりするのですが、結論から言っちゃうと正規表現で条件に一致したところは消しちゃえ、です。 青空文庫のルビを削除する Visual Studio Codeなどのエディターで置換元を指定する際、下記のような正規表現で指定します。置換先には何も指定しません。これでルビの削除ができます。なお、置換元の条件に正規表現が指定できないエディターでは利用できません。 《[^》]+》 なお、カッコの形が異なる場合は違った条件にする必要があります。たとえば「（～）」でルビが記述されていれば下記のように置換元を指定します。 ([^)]+) 各種ダミーテキスト生成サイト ググると結構出てきます。手前味噌ですが、こちらでもダミーテキストを生成できます。 Officeでは便利な関数があります Microsoft Officeでは、各アプリケーションにダミーデータを生成する関数などがもともと備わっています。 Excel 以下はすべてExcel関数です。動作はOffice Professional 2016環境下にて確認しています。 Randbetween()・・・ランダムな値を生成 最小値と最大値を指定すれば、勝手にランダムな値を生成してくれます。数値だけじゃなくて日付や時刻などもイケるのが素晴らしい。超絶便利。なお、値の指定は整数のみ有効です。 https://ysko909.github.io/posts/edit-excel-with-python-and-xlwings/ Fri, 06 Sep 2019 15:14:51 +0900 https://ysko909.github.io/posts/edit-excel-with-python-and-xlwings/ 概要 xlwingsを利用して、PythonからExcelファイルをいじってみます。下記の例はインタプリタですが、*.py形式のファイルでも同様に利用できます。 環境 Python 3.6 xlwings 0.15.3 Windows 10 注意点として、xlwingsはExcelがインストールされている必要があります。そのため、WindowsかmacOSでないと動作しません。一応、Linuxでなんとかしたい先行者がいるようですが、自分は試していません＿(　_´ω`)_ﾍﾟｼｮ 新規でワークブックを作成する 空のワークブックを作成します。 >>> import xlwings as xw >>> xb = xw.Book() >>> xb.name 'Book1' 次の方法でも作成できます。上記の方法は明示的に「ワークブックを作成」しますが、こっちの方法はアプリケーション（Excel）を起動しつつ新規ワークブックをアプリケーションに作成させます。スタートメニューなどから単純にExcelを起動した場合、空っぽのファイルを開いた状態でExcelが起動しますが、あれの状態をプログラムで再現している感じ。 >>> import xlwings as xw >>> app = xw.App() >>> app.books[0].name 'Book1' 既存のファイルを開く >>> xw.Book(r'C:\\app\\hoge.xlsx') または >>> app = xw.App() >>> app.books.open(r'C:\\app\\hoge.xlsx') ファイルを閉じる すでにオープンしたExcelファイルを閉じます。保存はせず、確認メッセージも出力されません。 >>> xb = xw.Book() >>> xb.close() ちなみに、このコードはワークブックを閉じるだけなので、Excelのプロセスそのものは残ることに注意。 Excelを閉じる Excelのプロセスそのものを閉じる場合は、killを利用します。 >>> app = xw.App() >>> app.kill() セルに値を設定・参照する .valueを用いて値を設定あるいは参照します。文字列の場合はクオーテーションで囲います。 https://ysko909.github.io/posts/can-not-live-together-markdownlint-and-details-tag/ Wed, 04 Sep 2019 09:22:56 +0900 https://ysko909.github.io/posts/can-not-live-together-markdownlint-and-details-tag/ はじめに とある記事で、そこそこ長いソースを記述するのに<details>タグを利用しました。すると、なぜか正常なコードブロックでエラーMD046/code-block-styleを吐くようになってしまいました。なんでー_(:3」∠)_ 環境 Windows 10 Visual Studio Code 1.37.1 markdownlint 0.30.2 実際のエラー 上の2つのMD033/no-inline-htmlは、<details>タグをmarkdown中に直接記述しているために表示されるエラーです。問題は下の3つのMD046/code-block-style。「コードはインデントじゃなくてコードブロック使えよ！」ってエラーなんですけど・・・。いや、コードブロック使ってるんですけどね？ それぞれを見てみます。 うーん、なんか間違ってる感じしないんだけど？ detailsタグの部分を消してみる 思い切って<details>タグを消してみます。グリっと選択して・・・ えいっ。 さて、エラーメッセージはどんな感じでしょうか・・・って、ちょ、待て。「現時点で問題はワークスペースで検出されていません。」とな？ <details>タグ消しただけだぞ？試しに消した<details>タグの部分を元の状態へ戻してみると・・・。 しっかりとエラーが復活しましたな。ほげ。 まぁ別に特段困らないんだけどね エラーエラーと言っていますが、実際はmarkdownlintのコレはワーニングなので無視しても問題ありません。 markdownlintのエラーは表示されたところで、最終的にmarkdownがブラウザで正常に出力されればそれで問題ないので、あまり気にしなくていいのですね。実際、この記事でも最終的には<details>タグの内容もコードブロックの内容もちゃんと出力されているので、実害ありませんでした。 いや、もちろん修正できるならlintに従うのが一番です、はい。 しっかし、なんでMD033のエラーに引きずられてMD046のエラーまで出現するのかは不明です。マジで謎_(:3」∠)_ https://ysko909.github.io/posts/make-dummy-text-generator-site-with-vuejs-edit-function/ Mon, 02 Sep 2019 16:08:20 +0900 https://ysko909.github.io/posts/make-dummy-text-generator-site-with-vuejs-edit-function/ はじめに 前回は、とりあえず見た目のコンポーネントを実装しました。今回はテキストを生成する機能を実装してデプロイまでしてしまいます。後述しますがデプロイ先はGitHub Pagesです。便利ですよね。 今回の成果物 こちらです。 Vue.jsのオフィシャルを参考に 機能を実装するにあたっては何はともあれ、まずはVue.jsのガイドを読みます。とくにコンポーネントの部分はよく参照することになると思います。自分はここを見つつソースの編集をしてました。 実際書いたソース 結構長いので折りたたみます。 JavaScriptのソース <template> <div> <b-button size="is-medium" v-bind:icon-left="buttonIcon" @click="generateText(quoteTextname, outputNumber, genOptions)" >{{ buttonMsg }}</b-button> </div> </template> <script> export default { name: "GenerateText", props: { buttonMsg: { type: String, required: true }, buttonIcon: { type: String, required: true }, quoteTextname: { type: String, required: true }, outputNumber: { type: Number, required: true }, genOptions: { type: Array, required: false } }, methods: { generateText: function(quoteTextname, outputNumber, genOptions) { // コピーのコマンドに対応しているか確認する if (document. https://ysko909.github.io/posts/make-background-gradation-with-css/ Fri, 30 Aug 2019 10:10:16 +0900 https://ysko909.github.io/posts/make-background-gradation-with-css/ はじめに CSSでグラデーションを背景に、かつ固定する書き方についてです。 コード html,body { height: 100% } body:after { position: fixed; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: -1; background: linear-gradient(to right bottom, #5dc4cb, #4ad8c6, #60e9b0, #92f78e, #d0ff66)fixed; } 詳細 とりあえず高さは画面いっぱいにしておきたいので、height: 100%を指定。次のbody:afterの部分はあまり必要ない部分なのだけど、bodyに直書きだとiOSで背景が固定されないので、疑似要素をfixedで画面全体に背景として配置してグラデーションを記述しています。 なお、linear-gradientの数値を変更するにはジェネレーターを使用するのが手っ取り早いのでオススメ。 動作サンプル codepen上で確認してみます。 See the Pen webpage sample by ysko909 (@ysko909) on CodePen. おわりに 背景に限らずグラデーションは重宝するので、使い方を覚えておきたいものです。 https://ysko909.github.io/posts/make-dummy-text-generator-site-with-vuejs-add-ui/ Tue, 27 Aug 2019 13:50:30 +0900 https://ysko909.github.io/posts/make-dummy-text-generator-site-with-vuejs-add-ui/ はじめに 前回は、Vue CLIで作った環境の内容を確認しつつ、どのファイルがどのように参照されているか、どのファイルをどう変更してアプリケーションを開発するかを確認しました。 今回はやっとこさ、コーディングします。もう内容は見切った！もう完璧だ！（死亡フラグ） 取っ掛かりにUI部分のコーディングをします。何はともあれ、まずは見た目です。 と、その前に 「そもそもどんなアプリケーション作るのよ？」ってところです。ここではダミーテキストを生成する機能を実装します。単純に、ちょっと今そういう機能が欲しいのです。 ちなみに、Vue.jsに限らないと思いますが、この手のチュートリアルはToDoリストが鉄板だと思います。 コンポーネントの構成 必要な項目 ダミーテキストジェネレータを実装するに当たって、ざっくりとどんなコンポーネント構成で実装するかを考えます。そこで、テキスト生成に必要なものはどんな機能か、ちょっと考えてみます。 ダミーテキストの生成元を選択 生成する文字数を指定 その他オプション 各文章において改行の要否を選択 英数字出力時の全角・半角を選択 クリップボードへ出力結果をコピー 条件はすべてお任せで一発生成 こんなところでしょうか。ダミーテキストは青空文庫から入手するものとします。あと英文のダミーテキストが必要なら、王道のアレですかねぇ。 クリップボードへのコピーは正確にはテキストの内容に影響はしませんが、単純に機能として存在するとうれしいかな、と思って実装します。だって、文字列を生成するだけなのに、その都度ボタンを押して生成されたテキストをマウスなんかで選択してコピーして・・・ってしたくありませんし。それと同じ発想で、「このボタンを押せば、条件はすべてお任せでテキスト生成できるよ」という機能も実装したいなー。 ちなみに、意味のないただランダムに文字を並べただけの文字列が必要なシチュエーションを想定できなかったため、一応「読める文章」を生成するつもりです。なので、基本的には指定された文字数分、青空文庫の文章を切り出す感じに実装しようかと思います。適当に切り出したら文章の途中で終わっちゃうかもしれないから、その辺のケアは必要かもしれません。まぁ追々考えます。 コンポーネントの分割 必要があればコンポーネントを分割して疎結合にし、再利用が容易になるよう実装すべきでしょう。となると、分割できそうな、あるいは分割しても問題なさそうな部分はどのあたりかちょっと考えてみます。 とは言ったものの、先述した機能は画面に表示されるオブジェクトとして1つのコンポーネントにまとめちゃってもいいかもしれません。もちろん、それぞれを別コンポーネントにしっかり分割する、という方法もあります。が、今回のような小規模なアプリケーションにおいては、あんまり細分化するのもイマイチだなぁと思っています。たった数行のHTMLやJavaScriptのためにいくつもコンポーネントを分割するのは、保守性の面から考えれば本末転倒です。 というわけで、今回については1つのコンポーネントに全部乗せすることとします！（白目）あーでも、テキストの生成部分は別コンポーネントに分割するかもしれないなー・・・。 重ねて強調しますが、規模によってコンポーネントを分割する方が絶対保守性高いから！じゃないと後で泣きを見るから！！_(:3」∠)_（経験則） というわけで、UIの検討を UIコンポーネントはBuefyを利用するつもりだったので、まずはオフィシャルのドキュメントを参考にどんなインターフェイスを実装するか検討します。 ダミーテキストの生成元の選択 これはもうRadio一択でしょう。いくつかある選択肢のうち、1つだけ選ぶとなればRadioで決まりです。 生成する文字数 デフォルトを100文字として、フォームに任意の数値を入力してもらう方法にしようかな・・・と思っていたらNumberinputという機能を発見。おお、これいいじゃん。ただ、デフォルトでは「＋」をクリックしたときに1しか増加しないので、「200文字出力したいから、スタートが100だとすると100回クリックすることに・・・？」ってなるからステップの調整は必須ですね。 あるいはSliderでもいいかもしれません。この辺は実装してみてから使用感を比べて、どっちがいいか考えます。場合によっては両刀使いもいいかもしれません。 その他オプション 各文章において改行の要否 これは単純にYes/NoなのでSwitchでいいと思います。 英数字出力時の全角・半角を選択 これも全角または半角のいずれかなのでSwitchでいいと思います。 必ず句点で終わる これも単純にYes/NoのいずれかなのでSwitchでいいと思います。 この機能ですが、任意の文字数を入力させた場合、文章を最後まで生成できず途中で終わってしまう可能性があります。そこで、「句点まではテキストを生成する」条件を設定しておきます。この条件を指定すると、入力された文字数プラスαのテキストが生成されることになります。なお、英文の場合はピリオドです。実装はJavaScript側のハナシなので、今回はあくまでも見た目です。 クリップボードへのコピー これはもうボタンかな。単純に「クリップボードへコピーする」みたいな文字列だけでもいいかもしれません。が、ボタンならより見やすく「これ押せば何かしら処理するだろう」感を演出するためにも、目立つオブジェクトはあった方がいいかと。 そんなわけでコーディング 任意の名前で.vueファイルを作成します。作成したvueファイルについてコーディングするとVisual Studio Code（以下vscode）が下画像のように補完してくれます。すごい助かる（小並感） ちなみに下画像にもあるように、script部分の記述にはTypeScriptを利用できます（上から2番目にtypescriptの文字が確認できますね）。ただ、今回は純粋にJavaScriptを利用しています。これは単純にいろいろ手を出しすぎると自分の頭では収集が付かなくなるからで、TypeScriptが書ける人はわざわざJavaScriptを記述する必要はないと思います。 実際のコード そこそこ長くなったので、折りたたみます。 HTMLソース <template> <div id="generator"> <div class="tile is-ancestor"> <div class="tile is-parent is-6"> <div class="tile is-child box container"> <div class="has-text-centered"> <b-tooltip class="title is-4" label="生成するテキストの引用元を選択してください。" position="is-bottom" dashed multilined>引用元</b-tooltip> </div> <p class="blank1em"></p> <div class="field"> <b-radio v-model="textName" name="name" native-value="Lorem Ipsum"> Lorem Ipsum </b-radio> </div> <div class="field"> <b-radio v-model="textName" name="name" native-value="Silver"> Silver </b-radio> </div> <div class="field"> <b-radio v-model="textName" name="name" native-value="Jack"> Jack </b-radio> </div> <div class="field"> <b-radio v-model="textName" name="name" native-value="Vane"> Vane </b-radio> </div> <p class="radioValue"> <b>選択した元ネタ:</b> {{ textName }} </p> </div> </div> <div class="tile is-parent is-6"> <div class="tile is-child box"> <div class="has-text-centered"> <b-tooltip class="title is-4" label="生成したい文字数を入力、またはスライドバーで選択してください。" position="is-bottom" dashed multilined>出力する文字数</b-tooltip> </div> <p class="blank2em"></p> <b-field> <b-numberinput v-model="textNumber" rounded controls-rounded> </b-numberinput> </b-field> <b-field> <b-slider v-model="textNumber" max="300"></b-slider> </b-field> <p class="numberValue"> <b>文字数:</b> {{ textNumber }} </p> </div> </div> </div> <div class="tile is-ancestor"> <div class="tile is-parent is-6"> <div class="tile is-child box"> <div class="has-text-centered"> <b-tooltip class="title is-4" label="出力する際の条件を設定してください。" position="is-bottom" dashed multilined>出力オプション</b-tooltip> </div> <p class="blank1em"></p> <div class="field"> <b-checkbox v-model="selecedOptions" native-value="Silverhoge"> Silverhoge </b-checkbox> </div> <div class="field"> <b-checkbox v-model="selecedOptions" native-value="Flinthoge"> Flinthoge </b-checkbox> </div> <div class="field"> <b-checkbox v-model="selecedOptions" native-value="Vanehoge"> Vanehoge </b-checkbox> </div> <div class="field"> <b-checkbox v-model="selecedOptions" native-value="Billyhoge"> Billyhoge </b-checkbox> </div> <p class="content"> <b>Selection:</b> {{ selecedOptions }} </p> </div> </div> <div class="tile is-parent is-6"> <div class="tile is-child box"> <div class="has-text-centered"> <b-tooltip class="title is-4" label="テキストを生成してクリップボードへコピーします。" position="is-bottom" dashed multilined>テキスト生成</b-tooltip> </div> <p class="blank5em"></p> <div class="has-text-centered"> <b-button size="is-medium" icon-left="clipboard-text" @click="alert">テキスト生成する</b-button> </div> <h1>{{ msg }}</h1> </div> </div> </div> <p class="blank1em"></p> </div> </template> https://ysko909.github.io/posts/fix-vue-cli-service-command-not-found-error/ Fri, 23 Aug 2019 20:59:07 +0900 https://ysko909.github.io/posts/fix-vue-cli-service-command-not-found-error/ はじめに Vue.jsのツール「Vue CLI」にて作成したプロジェクトをクローンしてnpm run serveをしたところ、下記のようなエラーメッセージが出てきてしまいました。 ❯ npm run serve > dtg@0.1.0 serve /Users/hoge/dummytextgen > vue-cli-service serve sh: vue-cli-service: command not found npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! dtg@0.1.0 serve: `vue-cli-service serve` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the dtg@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. https://ysko909.github.io/posts/make-dummy-text-generator-site-with-vuejs-edit-component/ Wed, 21 Aug 2019 13:05:14 +0900 https://ysko909.github.io/posts/make-dummy-text-generator-site-with-vuejs-edit-component/ はじめに 前回は環境構築で終わってしまいましたが、今回から本格的に開発を始めていきます。取っ掛かりとして、Vue CLIで作った環境の内容を確認しつつ、どのファイルがどのように参照されているか、どのファイルをどう変更してアプリケーションを開発するかを確認します。 まずはプロジェクトを俯瞰する 何はともあれ、Vue CLIでcreateした直後の環境を俯瞰してみます。 なにはともあれindex とりあえずファイルの名前で判断して、index.htmlあたりを見てみます。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>dtg</title> </head> <body> <noscript> <strong>We're sorry but dtg doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> なんとなく<div id="app">あたりが気になりますが、内容としてはあっさりしたものです。というかこれ、どこでVue.jsとか読み込んでるの・・・？CSSとかも全然記述ないけど・・・？ 結論から言えば、現状の状態は「動作する実体」ではありません。ただの生成元でありテンプレートです。というわけで、実体を生成・参照するためにビルドを行う必要がありますので、下記のコマンドを実行します。 npm run build しばらく待つとメッセージが表示されるはずです。 DONE Build complete. The dist directory is ready to be deployed. https://ysko909.github.io/posts/make-dummy-text-generator-site-with-vuejs/ Mon, 19 Aug 2019 15:23:26 +0900 https://ysko909.github.io/posts/make-dummy-text-generator-site-with-vuejs/ はじめに フロントの勉強としてVue.jsをいじってますが、Vue.jsのCLIを使ってシンプルなサイトを構築する際の手順についてまとめます。 まずは構築するにあたって、開発環境の用意を行います。なお今回はNuxt.jsを利用しない（あるいは利用するまでもない）、ライトな用途を想定しています。SSRする必要がある、とかならNuxt.jsの導入を検討してみるべきかと思います。 なお、基本的にはVue.jsのオフィシャルドキュメントをベースに、通称「猫本」と呼ばれる「基礎から学ぶVue.js」の記述に沿っています。まだ全部読み切ってないのですが、サンプルコードが参照できるサイトもあってとても親切です。 環境 Windows 10 vue/cli@3.10.0 npm 6.4.1 npmを利用する場合はNode.jsのインストールが必要です。 インストール Vue.jsのインストール手順 Vue.jsのインストールには、npmを利用してローカルの環境に展開しておくか、Dockerで環境を準備するか、CDNを利用します。 NPMによるインストール ローカル環境にインストールする場合は、オフィシャルページに則って下記のコマンドを実行します。 npm install vue なお、オフィシャルでは大規模なアプリを構築する場合はNPMを利用しろ、とのことです。 Vue.js による大規模アプリケーションを構築するときには、NPM を利用したインストールを推奨しています。 Dockerによる環境構築 こちらをどうぞ。 CDN NPMを利用したインストール以外にもunpkgやcdnjsを利用することでVue.jsを利用できます。 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> なお、本番環境ではバージョンを指定することが推奨されています。 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> 本番環境では、新しいバージョンによる意図しない不具合を避けるため、特定のバージョン番号とビルド番号にリンクすることをお勧めします Vue CLIの導入 Vue CLIはVue.jsを用いたサイトを生成する際に、環境のセットアップを肩代わりしてくれるコマンドラインのツールです。オフィシャルページを参考にして導入します。とは言っても難しいことではなく、下記のコマンドを実行するだけです。 npm install -g @vue/cli インストールが終わったらバージョンを確認してみます。 $ vue --version 3.10.0 プロジェクトを作成する vueコマンドを叩いてプロジェクトを作成します。なお、下記のコマンドを実行する際は、事前にプロジェクトを作成するフォルダに移動してください。ここではフォルダをdummytextgenとします。コマンドを実行すると対話形式で作成するプロジェクトの内容を設定します。 cd dummytextgen vue create dtg プリセットの選択 キーボードの上下キーで選択しますが、デフォルトで問題ないと思います。なお、vue routerやvuexを利用することが確定しているなら、Manually select featureを選択して手動で導入できます。 Vue CLI v3.10.0 ? Please pick a preset: (Use arrow keys) > default (babel, eslint) Manually select features パッケージマネージャの選択 https://ysko909.github.io/posts/korg-volca-drum-review/ Fri, 09 Aug 2019 16:03:40 +0900 https://ysko909.github.io/posts/korg-volca-drum-review/ まーた買っちゃった modularに引き続き、volca drumも買っちゃったい_(:3」∠)_ volcaとは volcaとは、KORGの生み出したシンセサイザーのシリーズでして、個人的にも大好きなシリーズです。コンパクトな筐体にハイエンドモデル顔負けの要素をこれでもかと積み込んで、美味しいところをコンパクトな筐体に詰め込んだセミモジュラーシンセだったり、かと思えばキック音に特化しまくった超絶ニッチだけどスゴく使えるキックジェネレーターだったり、王道のポリフォニックなアナログシンセサイザーなどなどを生み出してきたシリーズです。 個人的にも今までにkeys、bass、kick、sampleなどなど購入してきましたが、今回新たにリズムマシン・パーカッションシンセサイザーであるvolca drumを購入しました！ ちなみにvolca modularは 以前に購入したセミモジュラーシンセであるvolca modularのレビューはこちらです。 volca drumとは volca drum（以下、drum）はKORGがデジタル・パーカッション・シンセサイザーと銘打っているとおり、デジタルのリズムマシンです。すでにリリースされているvolca beatsやvolca kickがアナログのリズムマシンであることを考えると、今までにない新機軸の機種であることがわかります。ちなみに、volca sampleも同様にデジタルですが、こちらはサンプラーなので基本的にプレイバックが主な利用用途で、音作りに関しては限界があります。要は元のサンプルから大いに逸脱した音は作れないわけです。 対して、drumではDSPによるアナログモデリングによって音を編集して、volcaシリーズでお馴染みのシーケンサーでリズムパターンを組み立てます。drumのDSPは、オシレーター波形にサイン波、のこぎり波、ノイズなどを採用しています。オシレーターから出力された音にいろんな変化を加えることで、本物の打楽器に近似した音からデジタル特有の独特な音まで、ドラムだけにはとどまらず、幅広いバリエーションのパーカッション・サウンドを生成できます。 パートの仕様 volca drumは合計で6つのパートを保持しています。また、これらのパートはそれぞれ個別に2つのレイヤーを持っています。これらのパートはそれぞれ同じ仕様です。「同じ仕様」とは各パートが同じオシレーター、モジュレーター、EGを保持していることを指しています。つまり「ここはバス・ドラム、ここはシンバル・・・」といったルールや制限はないため、バスドラムやスネアドラムを抜いたパターンを構築したり、全パートでそれぞれ微妙に異なるシンバル音を生成したりすることも可能です。極端なことを言えば、全パートで同じ音を生成することも可能なわけです。まぁ、実用性があるかどうかは、とりあえず別にして。 なお、パターンは最大16個まで保存が可能です。 各パートはそれぞれ2レイヤーを保持しています。各レイヤーのパラメーターは個別でも同時でも編集が可能なので、2つのレイヤーに同じ音を重ねて厚みを持たせることができます。 ウェーブガイド・リゾネーター エフェクト部は、物理モデリングをベースとしたウェーブガイド・レゾネーターを搭載しています。これは、太鼓の胴や長いパイプのような筒状の残響音を加えるチューブと、スネアの音っぽいメタリックな感じの弦の響きを加えるストリングスの2タイプが選択可能です。パネル中央部の3つのツマミによりDECAY（減衰量）、BODY（音のキャラクター）、TUNE（ピッチ）の設定が可能で、TUNEを小さな値にすればショートディレイにもなります。これらのツマミはモーションシーケンスの対象です。 シーケンサーなど シーケンサーは他のvolcaシリーズやリズムマシンでもおなじみな、16ステップがベースのシーケンサーです。16ステップを1小節としてパターンを組み立てていきます。その中でdrumには即興性と表現力に優れた機能がいくつかあります。 ACTIVE STEP ACTIVE STEPは各パートにおいて再生したいステップを任意に設定できる機能です。各パートごとに設定できるので、全体のうち1パートだけリアルタイムに再生するステップを変えたいっていう場合にも利用可能です。 SLICE たとえばスネアドラムのロールは、シーケンサーが16ステップである場合これより細かいステップでビートを設定はできません。ところが、SLICE機能を利用することで、16ステップよりさらに細かいステップを設定でき、さらにSLICEするレベルはツマミで変更可能です。 ACCENT アクセントです。これが設定されたステップは強拍になり、リズムのニュアンスを多彩に表現することが可能です。 CHOKE 複数パートのうち、発音を優先させたいパートを設定できるのがCHOKE機能です。チョークを有効にしたパートは同時に発音させず、パート番号の小さい1パートの発音が優先されます。要はサイドチェイン、あるいはダッキングのような感じです。たとえばハイハットを鳴らす際に、オープンをパート番号の若い方に設定することでクローズドより優先できます。そのため、オープンハイハットとクローズドハイハットを交互に鳴らすときなど、とくに有効活用できる機能だと思います。 開封の儀 さて、いつもの如く開封の儀です。 相変わらず、ひと目見てそれとわかるKORGのガジェット特有のデザインであるパッケージがとても良いです。 こちらもいつもの如く開封してすぐ出てくるマニュアル類。 中の蓋を外すとdrum本体が出てきます。 本体です。黒とゴールドの彩色で、高級感のあるデザインです。あまりこの価格帯でのガジェットにはない色彩ですよね。 実際の動作の様子 volca drum買いました。特有の出音がクセになりそうな面白いガジェットですね#volca#korg pic.twitter.com/D2VT1rgejD — ysko (@unknown_strings) August 9, 2019 いかにもダンストラック的な4つ打ちです。drumのDSPが出力する音は、結構特徴的であることがわかりますね。 他も#volca #korg pic.twitter.com/eLEP0L5UON — ysko (@unknown_strings) August 9, 2019 ドラムンベースのようなリズムパターン。スネアドラムにSLICE機能でロールを入れています。さらに「ぴょーん」という飛び道具的な音も組み込んでみました。 なお、このパターンではSwing機能の値をマイナス方向に設定しています。そうすることで、前のめりなノリになっていることがわかります。ちなみに、Swingをマイナス方向に設定するには、FUNCキーを押しながらSwingのツマミをいじることで、設定可能です。 まとめ 音作りの底なし沼。馴染みな音も奇抜な音もなんでもござれな個性的リズムマシン！です。 https://ysko909.github.io/posts/run-jupyter-notebook-with-vscode/ Fri, 02 Aug 2019 14:00:38 +0900 https://ysko909.github.io/posts/run-jupyter-notebook-with-vscode/ はじめに Visual Studio Code（以下、vscode）ではDockerでPythonやVue.jsの開発環境を構築したり、あるいはMarkdownで書いたドキュメントを配布用にPDF変換したりと、今までいろいろやってきました。今度はJupyter Notebookを動かします。いやー、vscodeってホントに多彩ですね。 なお、今回においてはDockerを利用せず、単純にローカル環境でJupyterを使用します。 追記 2019年時点ではこの記事の仕様でしたが、現在(2020年後半）では完全にネイティブでnotebookに対応しています。なので、#%%という記述は現在では完全に不要です。よって、この記事の存在意義は現時点で皆無なのですが、過去の遺産ということでそのまま残しておきます。 Jupyter Notebookとは Jupyter Notebook (なお、読み方は「ジュパイター・ノートブック」、または「ジュピター・ノートブック」。自分は「ジュピター」って言ってますが、どっちが一般的なんですかね？) とは、ブラウザ上で実行するデータ分析作業のためのツールです。特徴的なのは、実行結果を記録しながらプログラミングができる点です。ここでブラウザから実行できます。 プログラムそのものを記述しつつ、Markdownを利用して各種テキストや図表も同時に書き込んでいくことが可能です。つまり、プログラムのソースとその実行結果が、メモを含めて明確に紐づいた状態で確認できます。そのため、作業内容の振り返りに非常に便利ですし、複数人で作業を行う場合の共有にも有用です。また、Jupyterは*.ipynb形式のファイルで保存しますが、ソースコード部分を*.pyのPythonコードとして出力することも可能ですし、実行結果をPDFやHTML形式で出力できるため、Jupyterの実行環境がなくても内容を共有できます。 そんなJupyterをvscodeで使っちゃえ、というのが今回の趣旨です。 環境 Windows 10 Anaconda version 1.7.2 vscode 1.36 インストール Anacondaをインストールしている場合、基本的にはJupyterも一緒にインストールされているはずです。なお、Anacondaのインストールは、オフィシャルページからプラットフォームに合ったインストーラーをダウンロードして実行します。インストール後に下記のコマンドを実行すると、condaコマンドにてインストールされているリストが出力されます。表示されたリストの中にjupyterがあればインストール済みであることがわかります。 conda list ちなみに、Anacondaを導入しないでJupyterを利用するにはpipを利用します。下記のコマンドを実行するだけです。 pip install jupyter vscodeで実行する 拡張機能のインストール vscodeでJupyterを利用するには、Pythonの拡張機能をインストールする必要があります。 拡張機能をインストールするには、vscodeの左側にあるメニュー中から拡張機能のアイコン（下画像の赤枠内）をクリックします。 検索窓に「python」と入力します。検索結果のうち、「Python」を選択し、インストールします。なお、下画像ではすでにインストール済みのため、歯車のアイコンが表示されています。 他にも導入すると便利な拡張機能はありますが、今回は割愛します。 vscodeでノートブックを書いてみる まず任意のフォルダを作成します。今回はworkdirとしましたが、フォルダ名はなんでもいいです。次にvscodeで先ほど作成したフォルダを開きます。フォルダを開いたら、適当にファイルを作成します。ただし、この際に作成するファイルの拡張子は*.pyです。先ほどJupyterでは*.ipynb形式を用いると言いましたが、vscodeで実行する場合はPythonの拡張子でファイルを作成します。 「だけど、それじゃあフツーのPythonコードを見分けがつかないじゃん！」と思ったあなたは正しい。つまりファイルの拡張子ではなく、ファイルの中身で見分けるわけです。 ファイルを*.py形式で作成したら、下記のコードを入力してください。なお、「その2」部分はCSVファイルがないとコケちゃうので、適当なCSVファイルを作っておくかコードを削除してください。 #%% ## その１ import numpy as np x = np.arange(10) print(x) #%% ## その２ import pandas as pd data = pd.read_csv("C:\\app\\hoge.csv", encoding="cp932") data.head() #%% ## その3 ### sin plot import matplotlib. https://ysko909.github.io/posts/install-unity-with-unity-hub/ Thu, 11 Jul 2019 16:41:00 +0900 https://ysko909.github.io/posts/install-unity-with-unity-hub/ Unityって何さ Unity 世界で最も広くつかわれているゲーム開発エンジン。 様々な機能を備えたエディターと、業界で最も幅広いプラットフォームへのサポートを利用して、ゲームやインタラクティブなコンテンツを制作する方法を学びましょう。 「ゲーム開発エンジン」とは、画面描写、効果音やBGMなどの音楽管理、ステータスなどの各種データ管理などを総合して開発できる環境のこと。ただ、昨今ではゲームだけでなく映像制作にも用いられてますし、3Dに強いという特徴を生かして建築設計にも活用されているようです。すげぇ。 2Dを多用した映像制作ではちょっとアレかもしれませんが、3Dがメインならリアルタイムで3Dレンダリングが可能なUnityの強みを活用できそうです。Unityオフィシャルを始めとしてナレッジも多いですし、販売されているテキストも充実しているのも、Unityの強みかもしれません。 何はともあれ、まずは環境を整備しようと思います。今回はインストールについて。 環境 macOS Mojave 10.14.5 なお、インストールする対象はUnity 2019.1版とします。 エディション Unityには現在（2019年7月10日）エディションが3パターン存在します。 名称 月額 条件 Personal 無料 収入ならびに資金調達（自己資金を含む）の合計が年間10万ドルを超えない場合 Pro with Teams Advanced 15,000円 条件なし Plus ～3000円 個人・法人問わず、年間収益ならびに資金調達（自己資金を含む）の合計が20万米ドル以下の場合 エディション構成あるいは月額は、ある程度のスパンで更新されると思うので、Unityオフィシャルを参照していただくことを強くオススメします。 とりあえずここでは、Personalエディションを選択します。 インストール手順 Unityは基本的に直接インストーラーをダウンロードせず、Unity Hubと呼ばれるソフトを経由してインストールします。まずはそのUnity Hubをインストールするところから。 Unity Hubのダウンロード Unityオフィシャルから「はじめる」をクリックします。 プランが表示されます。ここではPersonalを選択します。 「利用規約および〜」の部分にチェックを入れると、ボタンが活性化されてUnity Hubのダウンロードができるようになります。 ダウンロードしたらインストールします。MacへのインストールはApplicationsのフォルダーにコピーするだけです。 ダウンロードするUnityの選択 Unity Hubのインストールが終わったら、起動します。 この状態ではまだUnity本体はインストールされていません。ダウンロードもされていません。そこで、左の「インストール」をクリックします。 右上の「インストール」ボタンをクリックします。すると現時点（2019年7月）でインストールが可能なバージョンの一覧が表示されます。 とくにこだわりがなければ最新の安定版をインストールします。 一緒にインストールするモジュールの選択 本体のバージョンを選択し「次へ」をクリックすると、今度は本体と同時にインストールするモジュールを選択できます。自分は「Android Build Support」「iOS Build Support」の2つを選択しました。とくに深い意味はありません。なんとなく必要になりそうだな・・・と思ったので。なお、Dev toolsのVisual Studio for Macは最初から選択されています。 https://ysko909.github.io/posts/fix-git-path-with-vscode/ Sun, 07 Jul 2019 17:14:15 +0900 https://ysko909.github.io/posts/fix-git-path-with-vscode/ VS Codeをアップデートしたらこんなメッセージが Visual Studio Code(以下、VS Code)をアップデートしたらこんな通知が出るようになりました。 「Gitが見つからないよ！」って・・・いや、君今までしこたまGit使ってたじゃないか。 理由はともかく、このままではGitの各種コマンドが利用できないので、設定します。 環境 macOS Mojave 10.14.5 Visual Studio Code version 1.36 設定手順 左下の歯車マークから、あるいはCommand + ,で「Settings」画面を表示します。 出てきた画面に「git.path」と入力します。すると、「Settings.jsonで設定してね」と言われるのでSettings.jsonを開きます。 ごちゃごちゃしてますが、下のところに"git.path": "/usr/bin"を追記しました。なお、gitのパスはコンソール画面にてwhich gitすればわかります。 編集が終わったら保存します。これで完了です。なお、いつのバージョン以降からかは失念しましたが、設定の変更を行ってもVS Codeを再起動する必要はなく即時反映されます。 （番外編）XcodeをインストールしたらなぜかGitが使えないぞ XcodeをインストールしたらGitが使えなくなりました。なんかライセンス契約に同意する必要があるみたいです。 指示に従いコマンド発行および同意を行ったら、Gitが再び利用できるようになりました。 $ git --version Agreeing to the Xcode/iOS license requires admin privileges, please run “sudo xcodebuild -license” and then retry this command. $ sudo xcodebuild -license You have not agreed to the Xcode license agreements. https://ysko909.github.io/posts/build-environment-of-vuejs-with-docker/ Thu, 04 Jul 2019 13:58:10 +0900 https://ysko909.github.io/posts/build-environment-of-vuejs-with-docker/ 概要 フロントの勉強としてVue.jsの開発環境を整備するときに、せっかくなのでDockerを使って環境を構築してみました。 環境 macOS Mojave 10.14.5 Docker version 18.09.2 Visual Studio Code version 1.35 手順 今回は勉強がてらdocker-composeを利用します。とは言っても「書くよ！」ってだけで複雑なことは全然やってないです。 Dockerfileの作成 FROMnode:lts-alpineWORKDIR/appRUN apk update && \ npm install -g npm @vue/cli ただし、現時点（2019年7月3日）でVisual Studio CodeのRemoteはAlpine Linuxに対応していないので、Remoteを利用したい場合は別のイメージを使った方がいいと思われます（1敗）。以前記事にしていたので「Vue.jsの環境もリモートで開発だぁ！」とか思ってたんですけど出鼻をくじかれました。 なお、Alpine LinuxはVS Code Insidersではサポートされているため、そのうち正式対応するはずなので正座して待機しようと思います。 Alpine Linuxに対応しました（2019年9月8日追記） vscodeのバージョン1.38にてAlpine Linux製コンテナへRemote接続できるようになりました！ docker-compose.ymlの作成 version: '3'services: vue_app: build: . ports: - 1234:8080 volumes: - .:/app stdin_open: true tty: true command: /bin/sh コンテナーのビルド docker-compose build コンテナーの起動 docker-compose up -d docker psコマンドを叩くとコンテナーが起動しているはず。 https://ysko909.github.io/posts/why-are-there-few-articles-of-java/ Sun, 30 Jun 2019 16:40:00 +0900 https://ysko909.github.io/posts/why-are-there-few-articles-of-java/ はじめに とある事情でJavaとJavaEE（今はJakartaEEか）を使用しないといけなくなってしまって、それはそれはさんざんな目にあった（あっている）。 そんな中で気づいたのだが、Javaって記事少なくない？ということ。 どういうこと？ JavaはブログのエントリーでもQiitaの記事でも、とにかく知名度の割りに数が少ない。検索してもエラい昔のエントリーがしれっと上位に表示される始末で、ホントに苦労した（している）。とくにJavaEEに関して言うと、例のEclipseへ移管されるニュースの方が検索上位に来てしまい、知りたい情報が埋没する。JSFについて調べたいなーと思ったら2013年の記事が検索上位にしれっと紛れ込んできた。 仕事の多いプログラミング言語の1位はJavaだそうだ。これはここ最近いきなり増加したわけじゃなく、何年も昔から同じ傾向だった。むしろ、Androidの開発はKotlinが普及する前はJavaで行われていたのだから、当然の結果と言える。それでもこの結果。 どういうことだ。Javaに関する記事書いたら、黒服の男たちに記事ごと投稿者も消されるジンクスでもあるのか。東方算法騎士団もびっくりだぞ。 記事数を調べる Qiita Qiitaでタグ検索すると、それぞれ下記のような結果になった。なお調べたのは2019年6月13日なので、下記の記事数はその時点でのものだ。 名称 記事数 Java 12022記事 Python 28170記事 JavaScript 26033記事 Ruby 21669記事 PHP 15987記事 Go 6035記事 golang 2899記事 C# 7342記事 順不同。Goとgolangで別タグになっているのはちょっとよくわからない。 ちなみにJavaEEに至ってはたった217記事だ。 あくまでタグでの検索結果なのでノイズがそこそこあると思う。それでもPythonの突出具合はスゴい・・・のではなく、Javaの記事数が少ないのだ。Python（1991年発表）はJavaの先輩だが、RubyやPHPはほぼ同期（1995年発表）だ。なのにこの差。Python、JavaScriptにはダブルスコア以上の差がある。Rubyとも、ダブルスコアまで行かなくても、1.8倍だ。だいぶ後輩のGo（golang）やC#はさすがにJavaに及ばなかったが、もう数年頑張れば記事数も逆転できるんじゃない？というくらいの差だ。 やっぱり少なくないか？Java。 stackoverflow stackoverflowでも各言語でタグ検索してみた。 名称 記事数 Java 1556934 Python 1187632 JavaScript 1823840 Ruby 205187 PHP 1289292 Go 38620 C# 1319866 こちらではJavaとPythonが逆転しているが、言うほどの極端な差はない。C#の質問数が結構多いのが気になる。 https://ysko909.github.io/posts/apple-iphone-xr-review/ Fri, 28 Jun 2019 10:18:44 +0900 https://ysko909.github.io/posts/apple-iphone-xr-review/ もともとiPhone 6Sだった iPhone XR（以下、XR）を購入する前はiPhone 6Sを使用していました。au版を中古で買ったのですがそのままauショップへ持ち込みSIMロックを解除してもらって、SIMフリーとして使っていました。当時刺していたSIMはIIJのデータ通信用SIMだった・・・ような気がします（この頃はSIMカードをコロコロ変えていたものでちゃんと覚えてない・・・）。 ところが、iPhone 6Sの発売は2015年です。さすがに発売から数年も経過してくると、バッテリーのヘタりが目立つようになります。Googleマップのナビで長距離ドライブ、とハードに使用したわけでもないのに、1日を乗り切れないくらい持ちが悪くなってきました。遠出する場合は、もちろんモバイルバッテリー持参が必須。自転車に乗る際のナビ代わりに使用したら、それはもうアメ車のガソリンメーターのように、バッテリーがモリモリ減っていきます。ある意味、見ていておもしろいですが、使う分には恐ろしくてたまりません。 「あ、こりゃダメだ」 そう思っていたころでちょうどiPhone XSやXRが発表されました。これ幸いとばかりに、新機種の購入を検討し始めたわけです。 なんでXRよ 一番の理由は値段・・・。 当初はXS購入の検討をしました。とはいえ、さすがは最上位機種であるXS。おいそれと購入できるような金額ではありません。いや、わかるんですよ、メチャクチャハイスペックなら値段も相応に高くなるっていうのは十分に理解できます。 でもね、XSってもうちょっとしたノートPC並みの値段してますよねぇ・・・。ノートPCなら、そこそこのスペックでもドキュメント書いたり軽めなプログラムを組めたりするわけですよ。そして、そういう長文が書けるにはやっぱりキーボードが必要なわけです。いくらスマホのスペックがすごいからって、わざわざ外部キーボード買ってまでスマホで文章書こうとは思わないし、まさかフリック入力で文章なんて書いたら腱鞘炎になりかねません。 そして、XSとXRは同じチップセットを搭載しています。 もちろん細かい仕様ではXRはしっかりと廉価版という扱いですが、それでも頭脳であるチップセットは最上位機種A12 Bionicで、XSと同等であるわけです。その上で、XSと比べれば比較的手の届く金額。 「もうXRでいいんじゃね？」 この2点で、XRの購入を決定しました。 ラッキーだったことに、当時手元にMacBook Air（2011mid）や初代iPad miniがあったため、これらをAppleの下取りプログラムに出してApple Storeのギフト券に換えて購入資金の一部にする（うろ覚えだけど、確か3万から4万くらいにはなったような気がする）ことで、多少安くXRを購入することができました。 ちなみに、XRのカラーは（PRODUCT）REDにしました。ケースはSpigenのクリアケースにしました。 メリット 以下のメリットは、iPhone 6Sと比較してのメリットですのでご了承ください。 大画面ゆえの情報量 ホームボタンなしのデザインとなり、ほぼ全面で情報が見られる大画面は、一度慣れると戻れないですね。ベゼルはXSに比べると若干太いです。が、このあたりは後述したいと思います。 画面の上部にちょこっと出っ張っているノッチの好き嫌いはあるし、一部アプリはXシリーズの画面に対応してなかったりしますけど。 FaceIDが手軽で便利 iPhoneを取り出し、画面を見ればすぐに操作可能。TouchIDも登場から代を重ねるにつれ高速化していきましたが、「ホームボタンを触れる」アクションはどうしても必要だったわけです。それがFaceIDになることで、そのワンアクションすら必要ではなくなりました。 ただ、朝起きた直後の「起き抜けの顔」でFaceIDやると、必ず認証エラーになるのはなぜなんですかね・・・自分だけですかそうですか。 軽快なレスポンス もともと、iPhoneとiOSでストレスを感じたことはあまりありませんが、XRでもレスポンスの良さは相変わらずです。むしろ端末本体のレスポンス云々より、回線の速度だったりサーバー側のレスポンスの方が気になるくらいです。あと、iMovieで動画ファイルを編集して書き出すときなどは、高パフォーマンスの恩恵に預かれると思います。 スマホで撮影しただけでは味気ないから、撮影した後にちょっとした動画編集をiMovieを使って行い、ムービーを書き出す。出力が終われば、ムービーはAirDropやAirPlayで共有する・・・なんてのも、全部iPhoneで完結できますし、さらにレスポンスよく作成できます。 YouTuber、とまでは行かなくとも子供やペットのムービーを撮って、ちょっと手間をかけて見栄え良くしたい。そんなときはiPhoneで全部できます。 長時間持つバッテリー もともとの購入動機だったバッテリーですが、さすがです。動画再生だったりナビだったりで酷使してもしっかり1日持ちます。ライトな使い方をするなら、2日くらいでも十分持つんじゃないでしょうか。 機種変更してから、モバイルバッテリーの出番がすっかりなくなりました。 高性能カメラ カメラはもう気軽にパシャパシャ撮るなら、もうデジカメを持ち出すまでもないですが、背景をボカしたポートレート撮影もソフトウェア処理で撮影できるようになりました。かなりきれいに背景がボケます。 ムービーもお馴染みのタイムラプス動画などをしっかり常備しています。 動画・静止画ともに手軽さとクオリティを両立させていて、ポイント高いです。 カラーバリエーションが豊富 派手な色いいよー_(┐「ε:)_ 耐水性能と防塵性能 水深1メートルで最大30分間の耐水性能です。XS（水深2メートルで最大30分間の耐水性能）よりは少し弱いですが、それでも十分です。 デメリット 以下のデメリットは、メリットと同様にiPhone 6Sと比較してのメリットですのでご了承ください。 デカい、厚い iPhone6Sと比べるので、どうしても感じざるを得ません。「デカい」の大画面とほぼ同義語なので問題ないと言えばないのですが、厚いのはちょっとどうにもならないです。端末サイズのせいで、今まで利用していたスマホケースが軒並み利用できなくなりました。いやまぁ、サイズは理解した上で買ったのですが、ケースに入りそうでギリギリ入らなかったときの絶望感と来たら・・・。 コントロールパネルと通知センターの呼び出し方法が似すぎ どちらも画面の上部から下方向にスワイプするのは共通しています。異なるのは右側で行うか、中央部分で行うか。 カメラが出っ張りすぎ 割と前からそうでしたが、カメラがどんどん出っ張ってます。ケースを着けないのであれば、机などにポンと置くとカメラのせいで必ず不安定です。カタカタ揺れるくらいにはバッチリ不安定です。こればっかりはいただけません。 https://ysko909.github.io/posts/korg-volca-modular-review/ Sun, 16 Jun 2019 00:30:23 +0900 https://ysko909.github.io/posts/korg-volca-modular-review/ 買っちゃった volca modular、買っちゃったい。いやっほー_(:3」∠)_ volca modular？ volcaとは、KORGの生み出したシンセサイザーのシリーズでして、個人的にも大好きなシリーズです。コンパクトな筐体にハイエンドモデル顔負けの要素をこれでもかと積み込んで、FM音源を完全再現した上でUIをユーザーフレンドリーにして扱いやすくしたデジタルシンセサイザーだったり、かと思えばキック音に特化しまくった超絶ニッチだけどスゴく使えるキックジェネレーターだったり、王道のポリフォニックなアナログシンセサイザーなどなどを生み出してきたシリーズです。 個人的にも今までにkeys、bass、kick、sampleを購入してきましたが、今回新たにセミモジュラーシンセであるvolca modularを購入しました！ ちなみにvolca drumは 別途購入したリズムマシンであるvolca drumのレビューはこちらです。 モジュラーシンセサイザーって何よ？ モジュラーシンセサイザーはシンセサイザーの各機能をモジュールとして分割して、それぞれをパッチケーブルで接続します。利用するモジュールも接続の順番もその接続先もすべて自分でカスタマイズできる、非常に自由度の高いシンセサイザーの形式です。「ユーロラック規格」という統一規格があって、この規格に沿った設計のモジュールであれば異なるメーカーのモジュール間でもパッチケーブルで接続して使用する事ができます。 逆に言えば自由度が高いゆえに難易度も高く、モジュール1個だけでは何もできず複数のモジュールが必要になりますが、そのモジュール1個あたりでウン万円したりします。また、モジュールが多くなればそれを格納するラックも大型の物が必要になり、異なるサイズのラックを用意しないといけないという難点もあります。ハマったらなかなか抜け出せない沼ですが、とっかかりにくいのでそもそも初心者向けとは言えません。 多分、めちゃくちゃハマったら車1台分とかの金額を投入することになると思います_(:3」∠)_ そんなモジュラーシンセサイザーを、そこそこの自由度を保ちつつ扱いやすくしたのがセミモジュラーシンセサイザーです。モジュラー構造を持ちつつもあらかじめ内部でパッチングされているため、一般的なシンセサイザーのようにも利用できます。もちろん、モジュラーシンセサイザーの醍醐味であるパッチングもできるようジャックがしっかりと用意され、外部でパッチングされると内部のパッチをバイパスするような仕組みになっています。 このvolca modularはセミモジュラーシンセサイザーです。そう、パッチングなしに楽しむこともできますが、パッチングすることでモジュラー然とした見た目とサウンドを得られるのです。しかも、一般的なモジュラーシンセサイザーのモジュール1個分の価格で！ここまでの話で、いかにこのシンセが画期的であるかがおわかりいただけると思います。実際安い（忍殺語 開封の儀 外箱から。volcaに限りませんが、KORGの箱のデザインってイイですよね。 箱を開封するとモジュールのリファレンスがまず目に入ります。多分、触り始めた当初はこれがないとにっちもさっちも行かないのでは・・・モジュラーシンセサイザーの知識がある人だったら問題ないのでしょうが、そういう人ってコレ買わないと思うしなー。 同梱されているのは、前述のリファレンスと取扱説明書などです。あと、ソフトシンセのプロダクトキーが記載された紙もありました・・・けど、使うかなぁこれ_(:3」∠)_ さて、書類などを出すと本体と電池、パッチケーブルなどが見えますね。 本体を取り出したところ。ところどころにある黒い四角い部分は、パッチケーブルを差し込むジャックです。 本体を真上から。白いラインは内部パッチングを表しています。1本もパッチケーブルを利用しない場合は、この白いラインで表された内部パッチングを通過して音が出力されます。 動作の様子など とりあえず、まずはパッチングなしでプレイしてみました。volcaシリーズで培われたシーケンサーは、相変わらず直感的でおもしろいです。 Korgのvolca modular、買ってしまったのですが、パッチなしで既にこの出音でエグい(褒め言葉#volca pic.twitter.com/tkItOYT7Nv — ysko (@unknown_strings) 2019年6月6日 もともとこの手のシンセは、いい意味で結構アバンギャルドな音なんですが、コイツもご多分に漏れずかなりキテます。いわゆるMOOGだったり往年のRolandやYamaha的なシンセサイザーとは異なる音で、好みは少し分かれるかもしれません。 コイツはいわゆる「ウエストコーストスタイル」なモジュラーシンセサイザーに分類されるのですが、前述のMOOGたちなどは「イーストコーストスタイル」なんですね。キーボードでの演奏を前提としているイーストコーストに比べると、ツマミでのパフォーマンスを前提にしているのか、とにかくツマミをグリグリやっているだけで時間が過ぎていきます。それぐらい楽しいです。ビキビキ言ってますぜ。 まとめ 良心的な値段とユーザーフレンドリーなUIに刺激的なサウンドを内包したアツいモジュラーシンセサイザー！です。 モジュラーシンセサイザーって、セミモジュラーシンセを含めてもそこそこの値段するので、2万円前後で買えるというのはもはや規格外と言ってしまっていいでしょう。それでいてモジュラーシンセの醍醐味をしっかり内包していて、サウンドもエキサイティングと、欠点らしい欠点がないです。 さあ、これでモジュラーシンセサイザーにハマって、沼に沈みましょう。沼は楽しいですよ。ほら、レンズ沼とかあるじゃないですか（ぐるぐる目 https://ysko909.github.io/posts/sequenz-volca-rack-review/ Sat, 15 Jun 2019 21:02:37 +0900 https://ysko909.github.io/posts/sequenz-volca-rack-review/ はじめに （個人的に）待望の、待望のvolca rackが来ました！ volca rack? volcaといえば、KORGの生み出した大ヒット商品でして、個人的にも大好きなシリーズです。コンパクトな筐体にハイエンドモデル顔負けの要素をこれでもかと積み込んで、王道のポリフォニックなアナログシンセサイザーだったり、かと思えばキック音に特化しまくった超絶ニッチだけどスゴく使えるキックジェネレーターだったり、価格とサイズで攻めに攻めたセミモジュラーシンセサイザーなどなどを生み出してきたシリーズです。 そんなvolcaなんですが、どの機種でも筐体のサイズは全部一緒です。なので「ラックに格納したら良さげだよねー」というのがvolcaユーザーの思いでした。実際、DIYでvolca用のラックを作ってしまった人もいるようで、YouTubeなんかを見てるとたまに自作っぽいラックでvolcaをプレイしている動画なんかがあったりします。 そんな、多分誰もが「あったらいいよねー」と思っていたはずのラック。個人的にも結構欲しかったラック。それがこの度とうとうKORGオフィシャルで発売されました！ 前置きが長くなりましたが、そのvolca rackを購入しましたのでレビューしてみよう！という記事です。 開封の儀 まずはおなじみな開封風景をどうぞ。 外箱から 「取り扱いはていねいに」がデカデカと印字されておりますな。これに限りませんが、開封時のカッターは、品物本体を傷つけないよう気をつけたいものです。 箱側面には「2x2」と印字されています。そう、合計4つのvolcaを設置できるわけです。 開封 箱を開けた直後。簡単な組み立て説明書があります。 Sequenzの小さいステッカーが同梱されていました。 説明書などを取り出すと各パーツが収納されています。 組み立ては6角レンチを用いてネジで行います。 取説は英語表記ですがなんの問題もありません。というか、これは絵だけでもいいのでは、ってレベルです。簡単です、簡単。 各パーツです。サイドパネルが木製なの、シンセサイザーラック然といった雰囲気でいいですよね。 なお、volcaを収納するメインパネルの内側には、滑り止めのゴムがあります。車のワイパーブレードみたいにはまっています。これのおかげでvolca本体の固定ができるわけですね。 完成 5分くらいで組み立ては完成します。簡単です。 縦に設置するとこんな感じ。場所は取りませんが、この状態で操作するなら目線的には椅子が必須ですね。落ち着いて操作するにはこのポジションがいいかもしれません。 個人的に、インテリアとして置いておくにはこのポジションがベストだと思います。 横に設置するとこんな感じ。立ちながら操作するなら、個人的にはこのポジションがベストです。 なお、ご想像のとおりで、縦置きセッティングのまま横置きへと移行することは、ラックの天地が逆転してしまうためできません。移行するためには、一度volcaをぜんぶ引っこ抜いてセッティングし直す必要があります。まぁ、そこは仕方ないですね。 横から見るとこんな感じ。 Sequenzのロゴが手前側だと、横置きです。 縦置きにするとサイドはこんな感じ。 とりあえず仮セッティング いいですねー！ 単純に手持ちのvolcaを並べて見ましたが、それでもこの整然とした「ピッタリ感」はさすがオフィシャルと言えます。volcaをセッティングしたままインテリアとして置いておくとしても、なんの問題もない王道なデザインにグッときます。やっぱりこのサイドパネルが木製なのはいいですね（2回目 volcaは全面からはめ込んでいきます。このとき、はめ込むのにもラックから外すのも滑り止めのゴムが絶妙に支えてくれます。ケーブルを抜くのと一緒にvolcaが引っこ抜ける、なんてことはありませんでした。ただし、MIDIケーブルだけは結構しっかり挿さるので、さすがに本体を固定しないとラックからvolcaが釣れます_(:3」∠)_ 自分はたまたまvolcaを4つ以上持っているので、問題ありませんでした。が、3つ以下しかなかったりするとラックに空きスペースができちゃうので、その空きスペースを埋めるためにまたvolcaシリーズを買うことになるでしょう。ええ、きっとそうなります（ぐるぐる目 ちなみに、SQ-1も設置できます。ただし、写真の通り、縦は少し足りません。縦が足りないため、滑り止めのゴムが仕事をしないので、縦置き時には下段に収納しないと、ふとした瞬間に落下しそうでちょっと怖いです。ただ、SQ-1の給電がUSBケーブルで、本体の上側麺にコネクターがあるのを考えると、上に多少スペースが開いてないとUSBケーブルが挿せなくて困るというのもあるのですが・・・。ケーブルをうまく回避しつつ、空きスペースをなにかで埋めればなんとかなりそうな気もします。あるいはもう電池駆動を前提にしちゃうとか。 ちょっと見にくくて申し訳ないですが、SQ-1でvolca modularをCVでコントロールしつつ、kickとsampleでドラムパターンを組めるようなセットアップにしてみました。イイですねー_(:3」∠)_ まとめ volcaを複数台持っているようなvolcaファンには必須です！ 手持ちのvolcaを自由にセッティングでき、SQ-1も設置可能。その上インテリアとしてちゃんと成立するデザイン。非常にイイです。 volcaも（2019年6月16日現在で）また新しい機材がリリースされることですし、このラックにセッティングしてプレイしてみるのも一興かなと思います。 ああ、ウチのvolcaは今5台だからあと3台買えばもう1つラックにセッティングできるんだな・・・（ぐるぐる目 https://ysko909.github.io/posts/connect-to-docker-with-vscode-extension/ Mon, 10 Jun 2019 00:52:30 +0900 https://ysko909.github.io/posts/connect-to-docker-with-vscode-extension/ はじめに Visual Studio Code（以下、vscode）を使って、Dockerのコンテナー上にある開発環境へリモートで接続します。このとき、ptvsdではなく、vscodeの拡張機能であるRemoteを用いて接続します。 環境構築 環境 macOS Mojave 10.14.5 Docker version 18.09.2 Visual Studio Code version 1.35 拡張機能 まずは何はなくとも下記の拡張機能をインストールします。 Remote - Containers RemoteはまだvscodeのInsider版でしか動作しなかった・・・のですが、6月6日にStable版でも対応しました。 接続手順 基本的な手順はここにあるものを参考にしています。 Dockerアイコンをクリックして、メニュー中の「Preferences」をクリック。「File Sharing」を選択して、共有したいディレクトリが設定されているか確認する。 Dockerのメニュー中にPreferencesがあるはずなので、これをクリック。 表示されたディレクトリのうち、共有したいディレクトリが設定されていることを確認しておきます。 任意のコンテナーを準備します。今回はPython用のサンプルプロジェクトをmicrosoftが準備しているので、これをcloneしました。 ~/devp git clone https://github.com/microsoft/vscode-remote-try-python.git Cloning into 'vscode-remote-try-python'... remote: Enumerating objects: 94, done. remote: Counting objects: 100% (94/94), done. remote: Compressing objects: 100% (70/70), done. remote: Total 94 (delta 47), reused 51 (delta 18), pack-reused 0 Unpacking objects: 100% (94/94), done. https://ysko909.github.io/posts/xcrun-error-after-macos-update/ Sun, 09 Jun 2019 19:29:47 +0900 https://ysko909.github.io/posts/xcrun-error-after-macos-update/ macOSあるある？ macOSのアップデート（High SierraからMojave）後にgitを実行するとxcrunが見つからないよ！というエラー内容が出現しました。 経験上このエラーメッセージが出現するのってmacOSのアップデート直後なんですよね・・・。そんなわけで毎度調べるのもアレなのでメモしておきます。 エラー内容 macOSをアップデートした際に、gitを実行しようとすると下記のようなエラーになることがあります。 ~ ❯❯❯ git xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun 他のコマンドでも同じようなエラーメッセージが出現するのかな？ 解消法 下記のコマンドを発行します。 xcode-select --install 「インストールしますか？」という旨のメッセージが表示されたらOKします。インストールは十数秒で終わると思います。インストールが終わればgitは使えるようになります。 https://ysko909.github.io/posts/recocrd-with-tascam-ixz/ Tue, 04 Jun 2019 17:11:23 +0900 https://ysko909.github.io/posts/recocrd-with-tascam-ixz/ そもそもiXZって何ぞや TASCAMが販売しているスマートフォン・タブレット端末用オーディオインターフェイスです。発売は2011年とめちゃくちゃ昔なのですが現役で販売されていることからもわかる通り、スマートフォン・タブレット端末で利用できる手軽なインターフェイスの王道です。 特徴としては、スマートフォンなどに「アナログで接続する」という点。そして、ギター専用のiRigのような「スマートフォンに直接接続する」仕様であるにもかかわらず、ギターだけじゃなくコンデンサーマイクの利用も可能な点でしょうか。 仕様 サイズは106（W）× 40（H）× 45（D）mmと、最近大型化しているスマートフォンと比べると厚さ以外は割とコンパクト。単3電池2本がセット可能ですが、電池を含めないと100gを切るくらいの軽量さ。 入力端子はハイインピーダンス入力に対応していて、ギターなどを直接接続できます。また、端子がXLR/TSコンボジャック仕様で、ギター・ベースやシンセサイザーなどの標準プラグだけでなく、XLR端子をもつマイクも接続可能です。さらに、単3電池2本によるファントム電源の供給が可能で、コンデンサーマイクの接続もできるとあって、実売価格が4000円前後の商品としては割と充実した装備です。 スマートフォンやタブレットへの接続には、本体から「ニョキッ」と生えている4極端子を用います。デバイスのヘッドホン端子に接続することで、アナログでのレコーディングができるようになるわけです。最近だとLightning端子などに接続してデジタルでレコーディングする機種もありますが、ヘッドホン端子でのアナログ接続ならAndroidとiOSの双方で利用できるので、ありがたいです。まぁ、最近はそもそもヘッドホン端子が存在しないスマホもゴロゴロありますけどね・・・。 ちなみに、説明書などにはこの機種が利用できるデバイスを「4極端子（CTIA規格）を搭載した端末に限ります」としているのですが、4極端子を装備していないデバイスって最近あるんですかね？ また、本体背面の3.5mmステレオミニジャックにイヤホンやヘッドホンを接続することで、音声出力をモニターしながらレコーディングできます。まぁ、この「モニターしながらレコーディングできる」って言うのが、ちょっとした罠 になっているんですけどね・・・_(┐「ε:)_（後述） なお、当機種はiOSにおける動作検証の対象機材となっておりサポートページでiOS12における動作が確認されていることから、今後もしばらくは安心して使用できます。ただ、Lightning端子に接続するようなデジタル仕様じゃないので、OSの変更で影響が出てくるのか？と問われると、「ぶっちゃけ関係ないんじゃないの？」と首をかしげるところではありますが。 ちなみに、細かいところにツッコミを入れるなら、多分USBオーディオインターフェイスじゃないと思うんですけど（名推理） 使い方 接続 使い方は、正面の入力端子にギターやシンセを接続し、背面の4極ミニプラグケーブルをスマートフォンやタブレットのヘッドホンを接続します。また、本体の背面にあるヘッドホン端子へ対しヘッドホンなどを接続して音声出力をモニターします。 このとき、標準ジャックを利用するのであれば電池は不要です。電池は、コンデンサーマイクを接続する際のファントム電源の供給にのみ利用するからです。 音量調整 音量はデバイスのボリュームを調整することで操作します。 さあレコーディング！・・・あれ？ 接続はこれで終わりです。ただこれだけではレコーディングできません。そう、アプリが必要なのですよ・・・！ アプリは？ iXZ用のアプリというものはリリースされていません。じゃあどうするか？ 好きなアプリを使えばいいんじゃね？、です。 そう言ってしまうと冗談に聞こえますが割とマジです。何せアナログの入力なので、プロテクトも何もないわけですから、極端なことを言えばスマホに標準搭載されているカメラアプリを使って録画してもいいわけです。あるいは、iOSであればGarageBandがパッと思い浮かぶところでしょうか。外部入力が可能になった。Korg Gadget 2でもいいかもしれません。ただ、Gadgetはちょっと問題があるかも（後述）。 慣れ親しんだアプリを使ってねという、TASCAMの思いやりなのかもしれないデスネ（ぐるぐる目） つまづいたところ 音声入力のモニターができるか否かはアプリ次第 単純明快なアナログ接続のiXZですが、スムーズに万事うまく行ったわけではありませんでした。というのが、音声入力のモニターができるか否かはアプリに依存する点です。 当初、この機種の動作確認を行うのに、iPhoneのカメラアプリを利用しました。ところが、接続したイヤホンから音声のモニターができないのです。かすかな「サー」というホワイトノイズが彼方に聞こえるのみで、INPUTのダイヤルをひねろうとiPhoneの音量を調整しようと一向に音声をモニターできません。 「あちゃー、初期不良かなー」と思いましたが、録画した動画を再生してみるとしっかりと入力した音声が録画されていました。つまり、音声入力は取得できているけど、それをモニターできないわけでした。 少し調べてみたところ「モニターの可否は、レコーディングに利用するアプリが入力された音声を出力へ返してくれるかどうかに依存している」ということがわかりました。 つまり、iXZは録音するデバイス（この場合iPhone）からの音声出力を単純にデバイスのイヤホンに出力しているだけで、iXZ本体のイヤホンジャックに向けて配線しているわけではない、ということです。なので、入力された音声をモニターできる機能を持ったアプリを利用すればよい、ということになります。 モニターできるアプリ Garagebandはモニター機能があります！ なので、iOSデバイスをお持ちの方はiXZを購入すれば、すぐに手持ちのイヤホンをiXZにぶっ刺してモニター可能です。なお、Korg Gadget 2はレコーディングするガジェットが搭載されているのですが、モニター機能を終ぞ探しきれませんでした・・・まさか、そもそも存在しない？ ただし、GarageBandのようなアプリは動画ではなく音声のみを録音するので、「動画を取りつつ音声をモニターしたい」というニーズには対応できない、ということになります。この場合、根本的な解決策はモニターできる録画アプリを探すことになります。そんなのあるんですかね？ モニター非対応のアプリでモニターしながら録画するには プラグを分岐させるアダプターを用意することで、片側をiXZ側に流しながらもう片側でモニターする、という力技が実現可能です。 今回は録画したかったものがKORGのvolcaをいじる場面だったので、ステレオミニプラグを分岐させるアダプターを利用しました。volcaのアウトプットに分岐アダプターを接続し、一方はiXZに接続しつつもう一方をイヤホンやスピーカーに接続することで、モニターしながら録画できる環境にしました。 使った感じはどうなのよ スゲーお手軽・・・！！ _(┐「ε:)_ これなんですよねぇ。レコーディングしたい機材をパパッと接続して、アプリを起動して録音するだけ。それ以上の操作は必要ないうえ、どこへでも持って行けるサイズ。ギターなどを接続するなら電池も不要で、とにかく身軽かつ気軽。 アナログ特有のノイズはどうしてもありますが、言うほど気にはなりません。これ以上を望むならもう少し出費してデジタルのオーディオインターフェイスを準備するほうが、精神衛生上よろしいかと思います。 というか、この手のインターフェイスでギターとマイクが接続できるものはiXZが今の所最安値です。より良い環境を求めるなら自動的に出費する以外にはありません。強いて言えばiRigですけど、あれはギターとかの標準プラグのみ対応してる機種ですしね。 気になったと言えば、iXZ本体にイヤホンを接続してモニターする場合、原音と比べて若干音がマイルドになるというか、少しハリがなくなるというか、そんな気がします。良く言えば「角が取れて落ち着く」、悪く言えば「ヌケが悪くなってダルい」。ただし、イヤホンはあくまでもモニター用ですしiPhone本体にはそこそこのヌケで録音されているので問題ないでしょう。 そして何よりこの値段設定が素晴らしい。コストパフォーマンスとしては、100点満点じゃないでしょうか。 まとめ 身軽でお手軽な上、コスパまで備えた働き者です。 スマートフォンやタブレットを利用してレコーディングしたい、ギターだけじゃなくてマイクも使いたい、小難しいのはいいからとにかく気軽にやりたい。 そんな人にぜひオススメしたい、良質なインターフェイスです。 https://ysko909.github.io/posts/convert-markdown-to-html-with-python/ Fri, 24 May 2019 14:50:30 +0900 https://ysko909.github.io/posts/convert-markdown-to-html-with-python/ はじめに 以前、VS CodeでMarkdownをPDFに自動で変換する方法を書いたのだけど、今度はHTMLファイルに変換する必要が出てきたので勉強がてら、Pythonで書くことにしました。と言っても難しい処理では全然ないんだけど・・・_(┐「ε:)_ ちなみに、前の記事で紹介した拡張機能Markdown PDFを使えばHTMLにも変換できます。ただ、今回はVS Codeがないというシチュエーションでファイル変換したいのと、自分が作成したスタイルシートでHTMLファイルを生成したかったため、VS Codeの拡張機能を頼らない方法を取りました。 というわけで、Pythonを使ったMarkdownファイルをHTMLへ変換する手順について書きます。 リポジトリ こちらにソースコード一式を置いてあります。 環境 Python ※3.x系 Markdown Markdownは事前にpipしておく。 pip install Markdown 一応プラットフォームに関しては、MacやWindowsに限らず動作する・・・はず_(┐「ε:)_ 概要 フォルダ中に存在するmdファイルを取得して、HTMLファイルに変換します。 詳細 ファイル mdtohtml.py Pythonで記述された本体。実行の際は当ファイルを指定します。 style.css CSSが書かれたファイル。生成されたHTMLファイルに<style>タグで記述されます。スタイルの変更を行いたい場合、当ファイルを書き換えてHTMLを生成してください。 使い方 変換したいmdファイルがあるフォルダに上記の2ファイルを配置します。 $ ls README.md iamacat.md main.css mdtohtml.py 配置したら、そのフォルダにて下記のコマンドを実行します。 $ python mdtohtml.py iamacat.md の変換を開始します ----------------------------------- iamacat.md を iamacat.html へ変換しました README.md の変換を開始します ----------------------------------- README.md を README.html へ変換しました $ ls README.html README.md iamacat.html iamacat.md main.css mdtohtml.py 処理内容 実行されたフォルダ中に存在するmdファイルを取得して、HTMLファイルに変換して同じフォルダーに出力します。mdファイルが複数ある場合は、すべてHTML化します。 https://ysko909.github.io/posts/convert-markdown-to-pdf-with-vscode/ Wed, 15 May 2019 13:44:12 +0900 https://ysko909.github.io/posts/convert-markdown-to-pdf-with-vscode/ はじめに Markdownで記述したmdファイルは、エンジニア間ではそのまま利用することが多いように思います（GitHubなどにREADME.mdとしてアップするとか）。ところが、メールに添付したり印刷する等、外部へ持ち出す際はPDFに変換しておいた方がいろいろ安心。とくに「mdファイルって何？」みたいなお客さんにドキュメントを渡さないといけない場合とか・・・。 MarkdownをPDF化するのは、Pandocを利用する方法もあるのですが、ここではVisual Studio Code（以下、VS Code）の拡張機能である「Markdown PDF」を利用します。 環境 Windows 10 vscode インストール VS Codeにて、Ctrl＋Shift＋Xで拡張機能の検索窓に「Markdown PDF」と入力するか、上記のリンクをクリックします。検索結果から「Markdown PDF」を選択し、インストールします。Markdown PDFをインストールしてから、VS Codeで適当なMarkdownファイルを最初に開いた際、Chromiumのダウンロードが自動で始まります。ちなみに、なんでChromiumが必要かというと、Markdown PDFがPDF変換するのに利用しているから。 使い方 PDF化したいMarkdownファイルを開く。 F1キーを押すか、Ctrl+Shift+Pキーを押しコマンドパレットを表示させる。 exportと入力すると下記のメニューが表示される。 markdown-pdf: Export (settings.json) markdown-pdf: Export (pdf) markdown-pdf: Export (html) markdown-pdf: Export (png) markdown-pdf: Export (jpeg) markdown-pdf: Export (all: pdf, html, png, jpeg) この中からExport (pdf)を選択する。 少し待つと、Markdownと同一のフォルダーにPDFが生成される。 自動化 上記の使い方ではPDFへ変換するのに、毎回コマンドパレットを表示してコマンドを入力し、どのファイル形式でエクスポートするかを選択する必要があります。これを特定の変換先（今回はPDF）に限定して自動変換するよう設定します。 「ファイル」メニュー＞「基本設定」＞「設定」を選択するか、Ctrl＋,で直接画面を開く。 setting.jsonファイルを開いて下記のように設定する。 "markdown-pdf.convertOnSave": true, "markdown-pdf.type": [ "pdf" ], 設定内容を書き込んだらVS Codeを1度再起動する。 https://ysko909.github.io/posts/iterator-will-return-blank-with-loop-twice/ Wed, 15 May 2019 11:57:24 +0900 https://ysko909.github.io/posts/iterator-will-return-blank-with-loop-twice/ なんのこっちゃ？ 実行しようとしていたのはこんなコードでした。 >>> import re >>> s = "hogefugapiyofoobarbaz1234567890abc987efg654hij321" >>> iter = re.finditer("b..", s) ← finditer()は結果をイテレータで返す >>> for i in iter: ... print(i.start()) ... 15 18 32 >>> for i in iter: ... print(i.start()) ... >>> ← 同じループを実行しても最初のループと異なり結果が返ってこない このように、同一のイテレータに対しループ処理を複数回行うと、2回目以降のループは結果が空になってしまいます。 ちなみにジェネレータでも上記のような複数回のループ処理を行おうとすると、2回目以降のループで結果が空になるらしいですが、ジェネレータについては別途まとめて記事にしようと思います（まだ勉強中）。 なんでこーなるの？ イテレータが持つ要素を取得したい場合、__next__() メソッド（または組み込み関数のnext()）を繰り返し呼び出すと、イテレータ中の要素を1つずつ返します。このメソッドは集合から1つずつ要素を取り出しています。取り出しているので、すべて取り出し終わったら元の集合には要素が存在しません。よって2回目以降のループは空っぽになります（要素がない場合は、StopIteration例外を返す）。 ※「取り出す」という表現が正確かどうかはちょっと自信がありません。メソッドや関数の「next」という名前の通り「次の要素へ」という挙動と、同じ要素を複数回取得できないことから「取り出す」という表現を使っています。 なお、直接関係はありませんが、map()やfilter()はイテレータを返す（Python3での話）ので、返されたオブジェクトについてlist()などを複数回実行すると、上記のように2回目以降は空っぽになってしまうようです。 >>> list = [1, 2, 3] >>> f = filter(None, list) >>> list(list) [1, 2, 3] >>> list(list) [1, 2, 3] ← リストlistに複数回listしても結果が返ってくる >>> list(f) [1, 2, 3] >>> list(f) [] ← イテレータに複数回listすると2回目以降ブランクになる >>> そもそもイテレータって？ iteratorとはオブジェクトの一種で、データの走査方法について表現するものです。なんのこっちゃ、という感じですが「要素を1つずつ繰り返し取得できる構造を持っていて（iterable）、実際に順次取得ができる」オブジェクトっていう感じかと。 https://ysko909.github.io/posts/show-data-without-tools/ Sun, 05 May 2019 17:38:31 +0900 https://ysko909.github.io/posts/show-data-without-tools/ 小ネタです Vue.jsは、ブラウザの開発ツールやVue.js用の拡張機能を利用しなくても、HTMLファイルにとあるタグを記述することで、データの内容をJSON形式で確認できます。 記述方法 HTMLファイル内に「{{ $data }}」を任意の場所に記述します。 <html> <head> </head> <body> <div id="app"> <p>{{ message.v }}</p> <p>{{ message.v.length }}</p> <p>{{ l[2] }}</p> <p>{{ l[n] }}</p> <pre>{{ $data }}</pre> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="main.js"></script> </body> </html> 仮にJavaScript側が下記の内容だった場合、 var app = new Vue({ el: '#app', data: { message: { v: 'Hello Vue World!' }, l: ['hoge', 'ふが', 'ぴyo'], n: 1 } }) 表示内容は下記の通り。 CodePenでやってみました。 See the Pen vuejs_type by ysko909 (@ysko909) on CodePen. https://ysko909.github.io/posts/encode-error-with-open-function/ Thu, 25 Apr 2019 10:57:12 +0900 https://ysko909.github.io/posts/encode-error-with-open-function/ 結論 WindowsでPythonのopen関数を使うなら、encoding引数を指定しよう（血涙 何があったのさ WindowsにてPythonを用いて、テキストファイルの書き出しと読み込みをしようとしたんです。 そうしたら憎きアイツが出てきたわけです。 出たよ、UnicodeDecodeError・・・。 環境 Windows 10 Python 3.6 Visual Studio Code コード s = '\x85' print(s) with open('C:/app/hoge.txt', mode='w', encoding='utf-8') as f: f.write(s) with open('C:/app/hoge.txt', mode='r') as g: print(g.read()) # UnicodeDecodeError`でエラー ※問題の部分だけ抜粋しています。本来のソースは入力の文字列がもっとごちゃごちゃしてました。 原因 つまるところ、読み込み時のopenで引数のencodingを指定していなかったからでした_:(´ཀ`」∠):_ 書き出しの際には下記のようにencodingを指定していました。 with open('C:/app/hoge.json', mode='w', encoding='utf-8') as f: ただ、書き出したファイルを読み込む際に、encodingの指定を失念していました。 with open('C:/app/hoge.json', mode='r') as g: encodingの指定がない場合については、オフィシャルだと下記のように説明されています。 encoding が指定されていない場合に使われるエンコーディングはプラットフォームに依存します Windowsだと利用されるエンコーディングはCP932です。Pythonから入出力する際、CP932に変換できない文字が存在したため、「変換できないよ！」とエラーになったわけです。 ちなみに Python内部では文字列型はUnicodeで保持されています。そして、入出力の際はPythonがシステムのエンコーディングに自動で変換してくれます。この場合、もともとUTF-8で保持されていたものをCP932に変換します。 この変換をユーザーが意識する必要はありません。逆に言えば、知らない間に勝手に変換されます。そして、この自動変換の際に何かしらの「変換できない文字」があるとエラーになる、というわけです。 解消方法 エラーを解消するには、書き出し時と同様に読み込み時にもencodingを指定する必要があります。 with open('C:/app/hoge.json', mode='r', encoding="utf-8) as f: j = json. https://ysko909.github.io/posts/garbled-text-with-json-dumps/ Wed, 24 Apr 2019 10:38:54 +0900 https://ysko909.github.io/posts/garbled-text-with-json-dumps/ 概要 Pythonでjson.dumps()した際に、日本語が文字化けするのを防ぐメモ。 環境 Windows 10 Python 3.6 実際のコード >>> import json >>> dic = {"hoge":"foo", "fuga":"bar", "piyo":"baz"} >>> json.dumps(dic) '{"hoge": "foo", "fuga": "bar", "piyo": "baz"}' >>> dicj = {"日本語":"項目名", "にほんご":"こうもくめい"} >>> json.dumps(dicj) '{"\\u65e5\\u672c\\u8a9e": "\\u9805\\u76ee\\u540d", "\\u306b\\u307b\\u3093\\u3054": "\\u3053\\u3046\\u3082\\u304f\\u3081\\u3044"}' こんな感じで、単純にjson.dumps()すると文字化けしてしまいます。この場合、ensure_asciiオプションでFalseを指定します。 >>> json.dumps(dicj, ensure_ascii=False) '{"日本語": "項目名", "にほんご": "こうもくめい"}' すると、上記のように文字化けが解消されました。 https://ysko909.github.io/posts/make-file-with-dot-on-windows/ Mon, 22 Apr 2019 13:06:22 +0900 https://ysko909.github.io/posts/make-file-with-dot-on-windows/ 結論 ファイル名の冒頭および語尾の両方にドットを付与！ 小ネタです .gitignoreとか.bashrcのように、何かの設定ファイルは冒頭に「.（ドット）」が付いて拡張子なしであるような名前だったりします。 ところが、Windowsのexplorer上でドット付のファイルを作成しようとしたらエラーになりました。 たとえば.hogeという名前のファイルを作成しようとします。 こんな名前のファイルを作成しようとすると・・・ エラー！ 対策 そういう場合は、下記のようにファイル名の冒頭および語尾の両方にドットを付与してやるとファイルを作成できます。 .hoge. すると・・・ 「はい」を押せばドット付ファイルのできあがりです。 https://ysko909.github.io/posts/busybox-on-windows/ Tue, 16 Apr 2019 09:38:26 +0900 https://ysko909.github.io/posts/busybox-on-windows/ 結論 普段LinuxやMacのシェルで使用している各種コマンドを、Windows環境でも使いたい！となった時には、BusyBoxを使えばいいよ！ はじめに 仕事ではWindows、プライベートではMacまたはLinuxなんて人もいるかもしれません。そこな貴方、こんなシチュエーションがありませんでしょうか？ ふと仕事中に「grep使いたいなー」とか「awk使いたいなー」とかなっても、Windowsのコマンドプロンプトじゃ足りないし、PowerShellはあの文法がいまいち性に合わない。ガッツリ使うわけじゃないから、わざわざ端末や仮想環境を用意するというわけにもいかない。 とか、 Windows使ってるのに普段のMacのノリでlsって入力しちゃって、Windowsに「そんなコマンドないよ」と言われた経験がある。 そんな貴方（私）のため、BusyBoxが十徳ナイフのごとく活躍してくれます。 この記事の対象者 以下に当てはまる方は、BusyBoxで幸せになれるかもしれません。 Windowsを利用しているがUnixのコマンドを使いたい 管理者権限ではなくインストールができない Hyper-Vなどの仮想環境がない （余談1）Win10だとLinux使えなかったっけ？ Windows 10だとWSL（Windows Subsystem for Linux）で、UbuntuなどのLinuxディストリビューションを利用できます・・・が、リリースモデルの1つ、Enterprise LTSC（Long Term Servicing Channel）だとWSLが利用できません。企業によっては、「安定性などを確保するために、OSに対する頻繁な変更は行いたくない」場合、このモデルが採用されている可能性があります。 この場合も、やっぱりBusyBoxの出番です。 ※以前は「Long Term Servicing Branch（LTSB）」という名前でリリースされていましたが、現在は「Long Term Servicing Channel（LTSC）」に名称変更されました。 （余談2）Cygwinとかじゃダメなの？ ダメじゃないです、全然大丈夫です。ただ、「ちょっとsed使いたいなー」っていう場合には、機能てんこ盛りなCygwinだとオーバースペックだったりします。 VMwareなどの仮想環境が利用できるなら、そっちの方がいろいろ便利です。ただ、マシンスペックがイマイチだったり記憶容量があまりない場合は却ってストレスになるでしょうし、やっぱりちょっとだけ使うという用途に対してオーバースペックと言わざるを得ません。 インストール サイトからバイナリをダウンロードして、任意のフォルダーにて展開する。 展開したフォルダーを環境変数に登録する（利用するだけなら必須ではないけど、登録しておくと後が楽）。 終わりです。ダウンロードして展開すればいい実行ファイルなので、インストール権限は必要ないです。しかもめちゃくちゃ軽量なので、記憶容量をガツガツ食っちゃうこともありません。 なお、ソースもダウンロードが可能ですが、あまりニーズはないだろうと判断し、この記事の中では触れません。 使い方 とりあえず実行してみる BusyBox64.exeと入力して実行してみます。 C:\hoge>BusyBox64.exe BusyBox v1.31.0-FRP-2910-ge92596d0b (2019-01-10 14:16:45 GMT) multi-call binary (mingw64-gcc 8.2.0-3.fc29; mingw64-crt 5.0.4-2.fc29) BusyBox is copyrighted by many authors between 1998-2018. https://ysko909.github.io/posts/python-naming-conventions/ Fri, 12 Apr 2019 15:27:02 +0900 https://ysko909.github.io/posts/python-naming-conventions/ 命名規約のメモ PEP8に準拠。何番煎じかわからないけども自学用に。 推奨される命名規約 命名対象 ルール 例 備考 パッケージ、モジュール すべて小文字で短く flask, os アンダースコアの利用は非推奨 クラス （アッパー）キャメルケース MyClass 型変数 （アッパー）キャメルケース MyClass 例外 （アッパー）キャメルケース、最後に「Error」 MyExcepError 例外はクラスであるべき、とのこと グローバル変数 すべて小文字でアンダースコア区切り、2つアンダースコアを付与 __all__ グローバル変数をエクスポートするのを防ぐ 関数、変数 すべて小文字でアンダースコア区切り my_function メソッド、インスタンス変数 すべて小文字でアンダースコア区切り my_method 定数 すべて大文字でアンダースコア区切り MY_CONST ポピュラーな命名 上記の基本的なルールに準拠して、実際にはどんな感じで命名をされているか、について。 1文字のみ b 小文字1文字。 https://ysko909.github.io/posts/aframe-particle/ Thu, 11 Apr 2019 09:47:58 +0900 https://ysko909.github.io/posts/aframe-particle/ 降らせるって何を？ こんな感じ。 See the Pen aframe_particle_star by ysko909 (@ysko909) on CodePen. 結論 これを使います。 概要 webVR用のフレームワークA-Frameにはさまざまなサードパーティーのコンポーネントが存在します。その中で、「いろいろ降らせる」コンポーネントを実装します。これを実装することで「雪の降る町」や「チリの舞う荒野」なんかの表現ができます。 設定値 preset presetの値で粒子の形を変えて降らせることができます。 stars（デフォルト） 星が降ってきます。デフォルトではrainとsnowの中間くらいの落下速度で、粒度がrainより粗いです。そして、粒子が星形。他と異なり、後方で噴水のように噴き出しています。 See the Pen aframe_particle_star by ysko909 (@ysko909) on CodePen. dust チリっぽい何か。この設定値が一番ゆっくり降ってきます。というか、舞ってます。粒度は以下の2つと同様で、細かいです。チリっていうよりも「ホコリ」っていった方が正確かもしれない。 See the Pen aframe_particle_dust by ysko909 (@ysko909) on CodePen. snow その名の通り、雪。rainよりゆっくり降ってきます。粒度と粒子はデフォルトではdustと同じっぽく見えます。これはしっかり上から「降って」きます。 See the Pen aframe_particle_snow by ysko909 (@ysko909) on CodePen. rain その名の通り、雨。snowより早く降ってきます。粒子はいわゆるティアドロップっぽい形。これもしっかり上から「降って」きます。 See the Pen aframe_particle_rain by ysko909 (@ysko909) on CodePen. https://ysko909.github.io/posts/make-site-with-hugo/ Fri, 05 Apr 2019 10:15:49 +0900 https://ysko909.github.io/posts/make-site-with-hugo/ Hugoとは Hugoとは、Golangで作られている静的サイトジェネレーター。なんでも、生成が速いらしいです。今回はコイツを使って、サイトを生成し公開してみようと思います。 この記事が役立つであろう人 サイトを立ち上げたくて、ターミナルでの作業が苦でない人。また、自分でCSSなどをいじったりしてデザインするなら、記事を書くほうに労力を割きたい人。 手順 基本的にはここを参考にしています。以下の手順はWindows 10にて行っていますが、多分macOSとかでも同様なはずです。なお、個人的な好みでWindowsのコマンドプロンプトではなくbusyboxで実行していますが、普通にコマンドプロンプトやPowerShellで実行しても問題ないと思います。 Hugoのインストール HugoのGithubから、自分が利用するプラットフォーム用のインストーラーをダウンロードして展開します。この記事を書いている現在での最新は0.54.0。 インストール後、Hugoのbin（実行ファイルが格納されているアドレス）を環境変数に追加します。GUIでもいいし、setxコマンドを実行しても問題ありません。インストールしたあとで、下記コマンドを実行してみます。 $ hugo version Hugo Static Site Generator v0.54.0-B1A82C61 windows/amd64 BuildDate: 2019-02-01T09:42:02Z 上記のように返ってくれば完了です。 サイトを生成 以下のコマンドを実行してサイトを生成します。hogeの部分は任意で、自分が生成したいサイト名でOKです。実行したら生成されたフォルダーに移動します。 hugo new site hoge cd hoge テーマを決定 Hugoのテーマを集めたページを参照して、好みのテーマを探します。カスタマイズしたり、自力で作成することももちろん可能ですが今回は割愛します。今回はミニマムなデザインが気に入ったので、Hermitにしてみました。 テーマを決めたら下記のコマンドを実行して、gitでGitHubから必要なファイルをダウンロードします。なお、導入手順はテーマのページにしっかり記述されていました。親切！ git init git submodule add https://github.com/Track3/hermit.git themes/hermit ここまで実行すると、下記のようなフォルダーとファイルの構成ができ上がっているはずです。 . ├── archetypes ├── config.toml ├── content ├── data ├── layouts ├── static └── themes この時点で下記のコマンドを実行すると、publicという名前でフォルダーが作成されて、その中に生成されたHTMLファイルなどが格納されるはずです。ただし、この時点ではコンテンツを作成していないため、トップページだけで中身はなにもありません。 hugo 設定ファイルを変更 ファイルconfig.tomlに設定を追記します。 オフィシャルでは下記のコマンドを実行するだけでいい、としています。要はテーマの名前を追加しています。なぜかというと、生成直後の設定ファイルの中身では、何のテーマを利用するか記述がないためわからないから追記してやる必要があるわけです。 echo 'theme = "ananke"' >> config.toml ただ、一応これ以外にも後々修正や追記したりする部分があるので、この時点で編集してしまっても問題ありません。それと、他のテーマについては不明ですがHermitに関して言えば、config.tomlは自分で記述するのではなくて、用意されたものを流用して中身を編集した方が便利です。というのは、テーマによってはこの設定ファイル中に特定の設定値がないと、hugoコマンドでのサイト生成の際エラーになる可能性があるから・・・実際、それで30分ほどムダにしました_(┐「ε:)_ 記事を作成 下記のコマンドを実行するとcontentフォルダー配下にファイルを生成します。 https://ysko909.github.io/about/ Thu, 04 Apr 2019 19:32:06 +0900 https://ysko909.github.io/about/ はじめに このページは日々の学習内容を書いたりトラブルをメモったり、たまに全然関係ない記事を書いたりする予定。 どうぞ、よしなに。 誰が書いてるの こんな人。 名前は？ ysko どんな人？ アラサー超えのそろそろ息切れエンジニア。いろんなことに手を出して、そこそこ細く長く続けるのが特技。 なに書くの？ プログラミングのこと シンセサイザーのこと ガジェットのこと 聴いた曲のこと あたりを書きます。 SNSとか Twitter GitHub Kaggle Codepen 免責事項 当ブログで掲載している画像の著作権・肖像権等は各権利所有者に帰属致します。 権利を侵害する目的ではございません。記事の内容や掲載画像等に問題がございましたら、各権利所有者様本人様よりご連絡ください。確認後、対応させて頂きます。 当ブログからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。 当ブログのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもあります。 当ブログで掲載されている情報に関しては告知なしに情報を変更・削除することがあります。 当ブログに掲載された内容によって生じた損害等の一切の責任を負いかねます。 https://ysko909.github.io/ppolicy/ Thu, 04 Apr 2019 19:32:06 +0900 https://ysko909.github.io/ppolicy/ プライバシーポリシー 当サイトに掲載されている広告について 当サイトでは、第三者配信の広告サービス（Googleアドセンスなど）を利用しています。 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報であるCookie（氏名、住所、メールアドレス、電話番号は含まれません）を使用することがあります。 またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないための方法については、こちらをクリックしてください。 当サイトが使用しているアクセス解析ツールについて 当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。 このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。 このトラフィックデータは匿名で収集されており、個人を特定するものではありません。 この機能はCookieを無効にすることで収集を拒否できますので、お使いのブラウザの設定をご確認ください。 この規約に関して、詳しくはこちら、またはこちらをクリックしてください。 当サイトへのコメントについて 当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。 これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。 すべてのコメントは管理人が事前にその内容を確認し、承認した上での掲載となりますことをあらかじめご了承ください。 加えて、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。 特定の自然人または法人を誹謗し、中傷するもの。 極度にわいせつな内容を含むもの。 禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。 その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。 https://ysko909.github.io/posts/after-tutorial/ Thu, 04 Apr 2019 18:38:04 +0900 https://ysko909.github.io/posts/after-tutorial/ チュートリアルってあるよね どんなプログラミング言語やライブラリやフレームワークでもあるもの、チュートリアル。ものによっては、チュートリアルという名前じゃなくて「Getting Started」とか書かれたりもする。そして大抵の人がチュートリアルに触れて、場合によってはちょっと値を自分流に編集したりして、対象の雰囲気や実装のしかたをざっくり掴む。そして、それをもとに「実際自分が作りたいもの」を目指していく。 文章として記述するとこれだけなんだけど、自分はチュートリアルをやった直後にモチベーションがガクッと下がる。さすがに折れるまでは行かないんだけど、再起するのに苦労する。 なぜなんだぜ 結論から言ってしまえば、チュートリアル卒業レベルでは作りたいものは作れないから。 何言ってんだ 「チュートリアル」は、基本的にほんの触りだけを「こんな感じで使うんだぜ」って紹介するもの。だから内容としては薄かったり、しょぼかったりする。仕方ない、「触り」だもの。「自分が作りたいもの」は、既存の製品やサービスだったり「すでに稼働しているスゲーやつ」を見た後で、「特定の問題やニーズを解消したい」あるいは「似たものを作りたい」という風に発生する感情だったりする。 大抵はこの感情が発露する時点で、中途半端に目が肥えていたり、利用する側としての経験値を得てしまっている。 たぶん、これが問題なんだ。 だからどういうことだってばよ 中途半端に目が肥えてしまった上に、なまじ既存サービスが利用できてしまうため、チュートリアルに毛が生えたレベルでは下記の感情に対処しにくい。 見た目がしょぼい 機能少ない そもそも自分が作る必要あるの？ あー・・・なんて言えばいいのかな こんな例えはどうだろう。 ふと、「アクションゲームを作りたい」と思ったあなた。そう、そこのあなた。どうして作りたいと思った？アサシ〇クリードとかプレイして、「面白えー！すげー！俺も作ってみてー！」って、そう思ったんじゃない？「これで俺も『クリエイター』で『ミリオネア』だぜー！うひょー！」とか、人と場合によっちゃ思ったんじゃない？ そして、その感情迸るままUnityのチュートリアルに触れたりしちゃってるんじゃない？ あるいはTwit〇erにほんのちょっとした不満のあるあなた。そう、あなた。確かにTwit〇erは、興味のあるカテゴリだけ抽出してタイムラインに流すのは難しい。うん、その通りだ。プログラミング関係でフォローした人が、プログラミングのことだけツイートすることってあんまりないよね。場合によっては旅行のことだったり、引退するスポーツ選手のことをツイートしてたりする。 だから「カテゴライズして必要な情報だけタイムラインに流したいな。そういうサービス作ろうかな」って思ったりするんじゃない？そして「動作が軽いって評判のGolangやってみるかな」って思ったりして、Gopherに見守られながらチュートリアルをやってみたりしてるんだよね？ オーライ、そこで質問なんだけど、そのチュートリアルってアレク〇オスが画面を縦横無尽に動き回るような、そんなアグレッシブで派手なチュートリアルかな？ あるいは、Bo〇tstrapなんかのフレームワークよろしく美しくデザインされたUIにいろんな機能がモリモリ実装できるような、そんな洗練されたチュートリアルかな？ そして何より、チュートリアルを卒業したあなたは、卒業したての今、まさにこの瞬間、どんなものを作れるのかな？見た人が、利用した人が、プレイした人があっと驚き感動し熱中するようなものだろうか？ そんな訳がない。そんな訳がないのだ。 現実に立ち返る 昨今あらゆる機能や情報が提供されるwebサービスにおいても、ジャンルが細分化されまくってるゲームもスマートフォンのアプリにおいても同様のことが言える。 自分よりずっと知識も経験も技術も熱意も、場合によっては将来の時間すらも持ち合わせた先人たちがいる。そんな一騎当千の偉人たちが綿々と作り上げてきた実績を見た、一介の雑兵ができることなどたかが知れているんだ。 どうしろって言うんだ。 オーライ、わかった。やればいいんだろ、やれば。とにかくやるしかないんだ、悩んでる時間も惜しいんだ、おっさんはさ。 ・・・というわけで、日々の学習内容を書いたりトラブルをメモったり、たまに全然関係ない記事を書いたりする予定。どうぞ、よしなに。