Mermaid

Launchpad Pro MK3は、Ableton LiveやLogic ProなどのDAWとシームレスに連携する、Novation社製のMIDIパッドコントローラー。64個のRGB感圧パッドを搭載し、トラックメイクからライブパフォーマンスまで幅広い用途に対応する。 主な特徴・機能 # 強力なスタンドアロンシーケンサー PCなしで外部のMIDI対応シンセサイザーやドラムマシンを直接コントロールできる、4トラック・32ステップシーケンサーを内蔵。 設定したキーに合わせてパッドの音階が配置されるため、楽器の演奏スキルがなくても音を外さずに美しいメロディやベースラインを弾くことができる。８２８２ Ableton Liveとの深い統合 クリップやシーンの再生、ミキサー、デバイス、トランスポートの操作がマウスを使わず本体から行える。「Capture MIDI」機能を使えば、思いつきで弾いたフレーズを逃さずクリップに記録できる。 自由なカスタマイズ性 専用ソフト「Novation Components」を使用することで、自分だけのカスタムモードを作成し、あらゆるMIDI機器やソフトウェアを自在に操作できる。 使い方のメモ # ノートモード # ノートモードの設定: Shift + Note クロマチック・スケールモード切り替え: Chro/Schale 作成したプリセット・スクリプト # YAMAHA SEQTRAK用のカスタムモード # 作成したSEQTRAK用カスタムモード(自分の環境ではカスタムモード5にアサイン) カスタムモードの切り替えは パッドの割り当て # No. トラック名 トラックグループ MIDIチャンネル 1 KICK Drum 1 2 SNARE Drum 2 3 CLAP Drum 3 4 HAT1 Drum 4 5 HAT2 Drum 5 6 PERC1 Drum 6 7 PERC2 Drum 7 SYNTH1 Synth 8 SYNTH2 Synth 9 DX DX 10 11-16 SAMPLER SAMPLER 11 SYNTH1, SYNTH2, DXを鳴らす場合はShift + Noteを押しMIDIチャンネルを8〜10に変更してから使う SEQTRAK Mode.syx

最近､Garmin Connectへ体重が取り込まれないと思ったら､MyFitnessPal: 健康管理というアプリの使用を止めたからだった。 Garmin Connectに複数の体重データがあるのはなぜですか | Garmin サポートセンターによると､Garmin Connectへ体重を取り込む方法としては､ Garmin Indexスマート体重計で体重測定したとき タニタの体重計とペアリングされたデバイスを同期したとき 体重を手動で入力したとき MyFitnessPalアプリと体重の記録を同期したとき というパターンがあるようだ。 一時､MyFitnessPalアプリを使っていたため､その期間だけ体重が取り込まれていたということだ。 家で使っている体重計は1byoneのため､Garmin Connectへの体重取り込みは以下の流れで行われる（はず） flowchart TD A[1byone体重計] --> |体重・体脂肪率・内臓脂肪率など| B(1byone Health) B --> |体重・体脂肪率| C(ヘルスケア（Apple）) C --> |体重| D(MyFitnessPal) D --> |体重| E(Garmin Connect) style A fill:#ffa23e, stroke:white style B fill:#ffa23e, stroke:white style C fill:#7BCCAC, stroke:white ただ､この方法では体重を測定したあと､MyFitnessPalアプリを起動して体重を取り込む必要がある。 MyFitnessPalアプリは食事内容を管理するアプリだが､使い勝手やデータベースの充実度など､あすけん の方が圧倒的に良いのが悩ましいなぁ。 Garmin

Maschineのコンセプト # graph TB Song("ソング") Song -->|"セクションのシーケンスで構成"| SectionGroup subgraph SectionGroup ["ソング"] direction LR Section1("セクション1") -->|"次のセクション"| Section2("セクション2") Section2 -->|"次のセクション"| Section3("セクション3") Section3 -->|"次のセクション"| Section5("セクション1") Section5 -->|"次のセクション"| Section6("セクション2") end Section1 --> Scene1("シーン1") Section1 --> Scene2("シーン2") Section1 --> Scene3("シーン3") Scene1 --> Pattern1("パターン1") Scene1 --> Pattern2("パターン2") Scene2 --> Pattern2 Scene2 --> Pattern3("パターン3") Scene3 --> Pattern1 Pattern1 --> Group1("グループ1") Pattern1 --> Group2("グループ2") Pattern1 --> Group3("グループ3") Group1 -->|"16種類の音"| Sound1("音1") Group1 --> Sound2("音2") Group1 --> Sound3("音3") classDef section fill:#AEC6CF,stroke:#7AA0B0,stroke-width:2px; classDef scene fill:#Baffc9,stroke:#8FA78C,stroke-width:2px; classDef pattern fill:#CBA0E3,stroke:#A864C8,stroke-width:2px; classDef group fill:#FFDFBA,stroke:#E4957D,stroke-width:2px; classDef sound fill:#FFFFBA,stroke:#D6D26F,stroke-width:2px; class Section1,Section2,Section3,Section5,Section6 section; class Scene1,Scene2,Scene3 scene; class Pattern1,Pattern2,Pattern3 pattern; class Group1,Group2,Group3 group; class Sound1,Sound2,Sound3 sound;

Pomera DM250は、デジタルメモツールとして人気のある「Pomera」シリーズの最新モデル。 Pomeraシリーズはキングジム社が製造する、主にテキスト入力に特化したポータブルデバイスで、ノートパソコンと同様のフルキーボードを備えていますが、インターネットや複雑なアプリケーションの使用を排除し、シンプルな文書作成に特化している。 Pomera DM250とファイルをやり取りする方法 # 方法 手順 SDカード経由 SDカードを抜き差し USBケーブルでPCと接続しストレージとして認識させる ツール→PCリンク スマホアプリPomera Link経由でファイルを送受信する ツール→アプリ接続 または ツール→QRコード Wi-Fiに接続しGmailでファイルを送信する ツール→アップロード 内部のディレクトリ構造 # 本体メモリ # Pomera本体ストレージはMacのFinderからボリューム名をPOMERAに変更した。 /dev/disk10 on /Volumes/POMERA (msdos, local, nodev, nosuid, noowners, noatime, fskit) flowchart TD A[／Volumes／POMERA] --> |本体メモリのメモ|B(Pomera) B --> C(ファイル名.txt) B --> G(フォルダ名) A --> |カレンダーメモ| D(Pomera_memo) D --> E(YYYY) E --> F[YYYYMMDD.txt] SDカード # PomeraのSDカードはMacのFinderからボリューム名をPOMERA_SDに変更した。

PocketへWebページを保存するとページの本文らしき部分を抽出し、Text-to-Speechでそれを読み上げた音声ファイルを作り、プライベートなPodcastとして配信するしかけを作った。 音声合成エンジンとしてVOICEVOXも試したが、手元の環境で安定して動作させるところまでいけず断念。 システムの概要 # flowchart TD Podcastアプリ[/Podcastアプリ\] --> |参照|nginx Pocket[/Pocket\] --> |新規保存|IFTTT IFTTT --> |Webhooks|nginx subgraph システムの概要 nginx nginx --> |PodcastのRSSフィード参照|index.rss nginx --> |PocketしたURLを通知|sinatra subgraph PodcastのRSSフィード生成 mp3 --> |参照|index.rss mp3 --> |参照|dropcaster cron --> |5分毎|dropcaster --> |存在するmp3からRSSフィード生成|index.rss end subgraph 音声ファイル生成 sinatra sinatra --> readability readability --> |ページの本文|texttospeech texttospeech --> |本文からmp3生成|mp3[(mp3)] end end 使用したライブラリやサービス # Webhooks Integrations - Connect Your Apps with IFTTT Webページから本文らしき部分を抽出する nerab/dropcaster: Simple Podcast Publishing Text-to-Speech: 自然な音声合成 | Google Cloud

C4モデルとは # ソフトウェアのアーキテクチャを表現するためのモデル。 コンテキスト（context） コンテナ（containers） コンポーネント（components） コード（code） で構成される。 C4モデルは特別な表記法を規定していない。以下、ダイアグラムの図はThe C4 model for visualising software architectureを参考に作成した。 flowchart TD ソフトウェアシステム:::system ソフトウェアシステム --> containerA(コンテナ) ソフトウェアシステム --> containerB(コンテナ) ソフトウェアシステム --> containerC(コンテナ) componentA1:::dot containerA:::dot --> componentA1(コンポーネント) componentA:::dot containerB --> componentA(コンポーネント) containerB --> componentB(コンポーネント) containerB --> componentC(コンポーネント) containerB:::container componentC:::dot componentA2:::dot containerC:::dot --> componentA2(コンポーネント) componentB --> codeA(コード) componentB --> codeB(コード) componentB --> codeC(コード) componentB:::component codeA:::code codeB:::code codeC:::code classDef dot fill:#eef,stroke:#f66,stroke-width:2px,color:#aaa,stroke-dasharray: 5 5 classDef system fill:#faa,stroke:#333,color:#fff,stroke-width:4px classDef container fill:#44f,stroke:#333,color:#fff,stroke-width:4px classDef component fill:#77f,stroke:#333,color:#fff,stroke-width:4px classDef code fill:#aaf,stroke:#333,color:#fff,stroke-width:4px レベル1 システムコンテキスト ダイアグラム # 対象システムが、それを使用する人や関連する他システムとの関係性、どのような位置づけにあるかを図示する。

terrastruct/d2: D2 is a modern diagram scripting language that turns text to diagrams. テキストからダイアグラムを生成するツール。類似のツールとしてはMermaid、GraphViz、PlantUMLなどがあり、以下のサイトでこれらのツールで同じダイアグラムを書く場合の比較が可能。このサイトはD2開発元によるものらしい。 Text to diagram テキストと出力の例 # 公式サイトからの引用 # Actors hans: Hans Niemann defendants: { mc: Magnus Carlsen playmagnus: Play Magnus Group chesscom: Chess.com naka: Hikaru Nakamura mc -> playmagnus: Owns majority playmagnus <-> chesscom: Merger talks chesscom -> naka: Sponsoring } # Accusations hans -> defendants: 'sueing for $100M' # Offense defendants.naka -> hans: Accused of cheating on his stream defendants.mc -> hans: Lost then withdrew with accusations defendants.chesscom -> hans: 72 page report of cheating インストール # d2/INSTALL.md at master · terrastruct/d2 Macの場合はbrew install d2でOK

Choosing the right estimator — scikit-learn 1.2.0 documentationを元にMermaidでまとめた。 flowchart TD A((Start))--> B{50サンプル以上?} B -->|Yes| B1{カテゴリの\n予測?} B -->|No| B2((データを収集)) B1 -->|Yes| C1{正解ラベルあり?} C1 -->|Yes| Z3((分類)):::terminal C1 -->|No| Z4((クラスタリング)):::terminal B1 -->|No| C2{数量の予測?} C2 -->|Yes| Z1((回帰)):::terminal C2 -->|No| H((次元削除)):::terminal classDef terminal fill:#69F 分類 # flowchart TD Z3((分類)):::terminal --> I1{10万サンプル以下?} I1 -->|Yes| I11[線形SVC] I1 -->|No| I21[SDG Classifier]:::method I21 -->|うまくいかない| I22[kernel approximation\nGBDT]:::method I11 -->|うまくいかない| I12{テキストデータ?} I12 -->|Yes| I122[ネイティブベイズ]:::method I12 -->|No| I13[K近傍法]:::method I13 -->|うまくいかない| I131[SVC\nランダムフォレスト]:::method classDef terminal fill:#69F classDef method fill:#f9f,stroke:#333,stroke-width:4px クラスタリング # flowchart TD Z4((クラスタリング)):::terminal --> J1{カテゴリ数は既知?} J1 -->|Yes| J11{<10万サンプル以下?} J11 -->|Yes| J12[KMeans]:::method J12 -->|うまくいかない| J13[スペクトラルクラスタリング\nGMM]:::method J11 -->|No| J21[MiniBatch\nKMeans]:::method J1 -->|No| J3{<10K samples} J3 -->|Yes| J31[MeanShift\nVGBMM]:::method J3 -->|No| J34((不運)) classDef terminal fill:#69F classDef method fill:#f9f,stroke:#333,stroke-width:4px 回帰 # flowchart TD Z1((回帰)):::terminal --> D1{10万サンプル以下?} D1 -->|No| E1[SGD回帰分析]:::method D1 -->|Yes| E2{説明変数xの一部が重要?} E2 -->|Yes| F1[Lasso\nElasticNet]:::method E2 -->|No| F2[Ridge\n線形SVR]:::method F2 -->|うまくいかない| F3[SVR Kernel='rbf'\nEnsembleRegressors]:::method classDef terminal fill:#69F classDef method fill:#f9f,stroke:#333,stroke-width:4px 次元削除 # flowchart TD Z((次元削除)):::terminal --> H[Randomized PCA]:::method H -->|うまくいかない| H11{10万サンプル以下?} H11 -->|Yes| H22[Isomap\nSpectral Embedding]:::method H11 -->|No| H3[kernel\napproximation]:::method H22 -->|うまくいかない| H4[LLE]:::method classDef terminal fill:#69F classDef method fill:#f9f,stroke:#333,stroke-width:4px

ホップ数 # flowchart LR B1 & B2 --> A G --> O1 H --> O1 A --> O1 & O2 O2 --> E F --> O2 B1:::hop1 B2:::hop1 O1:::hop1 O2:::hop1 F:::hop2 G:::hop2 H:::hop2 style A fill:#f9f,stroke:#333,stroke-width:4px classDef hop1 fill:#a9a classDef hop2 fill:#f96 ホップ数とは自身から任意のページまでたどり着くまでのリンクの数である。 このようなリンク関係がある場合、ページAから見て、B1 B2 O1 O2は1ホップリンクと呼ばれる。 2ホップリンクの意味 # このため、上記のリンク関係で言えば、ページAから見たG H E Fは2ホップリンクとなる。 Scrapboxでは2ホップリンクの内、アウトゴーイングリンクのページへリンクしているページ、つまり、 AからリンクしているO1へリンクしている Gと H AからリンクしているO2へリンクしている F を関連リンクとして表示している。これは、 A→C, B→Cというリンクが存在するとき、AとBの間にはなんらかの関連があると考えてよい。 「和歌山」→「みかん」、「愛媛県」→「みかん」 ならば「和歌山県」と「愛媛県」はみかんつながりになっているわけだし、 「増井」→「Rubyプログラミング」、「高林」→「Rubyプログラミング」 ならば「増井」⇔「高林」は意味がある。 出典: 2ホップリンクの考察 - 増井俊之 上記の考え方に基づく仕様であり、本サイトでもQuartzを拡張し同様の2ホップリンクを表示している（各ページ配下の「関連リンク」） QuartzにScrapbox的な2ホップリンクを追加する Obsidiaのリンク表示 参考情報 # 2ホップリンクの考察 - 増井俊之

オープンソースの静的サイトジェネレーター。go言語で記述されておりページ生成の速度が速くカスタマイズ性が高い。 The world’s fastest framework for building websites | Hugo Hugo関連のノート # Hugoメモ Hugoのショートコードをうまく使い回す方法 Hugoのローカルサーバでページが表示されない場合 Hugoで本文の先頭画像をアイキャッチとして使用する Hugoでローカルサーバのみ実行する処理を書く方法 Hugoで楽譜を描画する(abcjs) Hugoのレンダーフックを使ったMermaidの利用 Hugoのショートコード入力を支援するChrome拡張 Hugoでイメージギャラリーを表示するhugo-shortcode-gallery Hugoで写真をリサイズしExif情報を表示する

独自構文のテキストから、各種のダイアグラムを生成できるMermaidという便利なライブラリがありますが、現時点ではHugoでサポートされていません。 このため通常、 独自のショートコードを作成する 言語としてmermaidを指定したコードブロックを使用し、mermaidでlanguage-mermaidクラスの要素を変換対象として指定する などの実装が多かったと思うのですが、公式サイトを調べていたところv0.93.0からサポートされたcodeブロックに対するレンダーフックを用いた例が載っており、よりスマートに実装できそうでした。 ここでは公式サイトのレンダーフックを用いたMermaidの組み込み方法を説明します。 レンダーフックの追加 # codeブロックに対するレンダーフックを定義するには、 layouts/_default/_markup/render-codeblock-言語名.html というファイルを作成します。今回ファイル名を、 layouts/_default/_markup/render-codeblock-mermaid.html とすることで、 ```mermaid flowchart LR Start --> Stop ``` というような、言語にmermaidを指定したコードブロックに対してレンダーフックが起動します。レンダーフックの内容は以下の通りです。 <div class="mermaid"> {{- .Inner | safeHTML }} </div> {{ .Page.Store.Set "hasMermaid" true }} <div class="mermaid">でコードブロックの内容を囲む Mermaidの記述があることを表すhasMermaidフラグをtrueにする テンプレートの修正 # テンプレートについては、 layouts/_default/baseof.html layouts/_default/single.html など、Mermaidのコンテンツを表示したいテンプレートへ以下の内容を追加します。私の場合、通常エントリでのみ表記できれば良いためsingle.htmlへ追加しました。 {{ if .Page.Store.Get "hasMermaid" }} <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script> mermaid.initialize({ startOnLoad: true }); </script> {{ end }} このコードはhasMermaidフラグがtrueの場合のみ、MermaidのJavascscript読み込みと初期化を行います。これにより、Mermaidの記述がないページではコードが展開されずムダな処理を抑止できるわけです。 上記処理をテンプレートへ追記する場合の注意点としては、.Contentが出現する箇所より下へ書く必要があるということです。Hugoでは.Contentが実行（評価）されるまではレンダーフックは処理されないためです。 参考サイト # mermaid.js で Markdown 中に UML 図を埋め込む - まくまくHugoノート Markdown Render Hooks mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.