electronをwsl2（のUbuntu20.04)で動かす
Intro
いわゆるやってみた記事。 二箇所ほど詰まった場所があったので、知見を込めて
やったのは公式のQuickStartQuick Start Guide | Electron
つまったところ
npm startをすると以下のようなエラーが出た（上で起動した）。
libGL error: No matching fbConfigs or visuals found libGL error: failed to load driver: swrast
これに関してはexport LIBGL_ALWAYS_INDIRECT=1を~/.bash_profileに追加したら消えた。
npm run makeがエラーで止まる。
npm run make
> my-electron-app@1.0.0 make
> electron-forge make
✔ Checking your system
✔ Resolving Forge Config
An unhandled rejection has occurred inside Forge:
Error: Cannot make for rpm, the following external binaries need to be installed: rpmbuild
at MakerRpm.ensureExternalBinariesExist (/home/akutagawa/projects/electron_get_started/my-electron-app/node_modules/@electron-forge/maker-base/src/Maker.ts:147:13)
at _default (/home/akutagawa/projects/electron_get_started/my-electron-app/node_modules/@electron-forge/core/src/api/make.ts:148:11)
at /home/akutagawa/projects/electron_get_started/my-electron-app/node_modules/@electron-forge/cli/src/electron-forge-make.ts:44:5
Electron Forge was terminated. Location:
{}
これはエラーをちゃんと読むとrpmbuildがないからインストールせよとあるので、
sudo apt install rpm
でインストールしたら無事治った。
エラーが出ると脳死でエラー文をGoogleに突っ込んで公式Issueとかを探すくせがあるのだが、読めそうな英語なら一旦読もう、といういい経験になった。
蛇足になるが、「〇〇がありません」、みたいなエラーは多いが、「〇〇がないから△△してください」ってエラーは少ない気がする。そういう意味ですごく親切なエラーハンドリングがされているシステムだなと感じた。おわり。
Pandas DataframeのVisualizer "Lux"の紹介 Github Trendを眺めてみる②
Intro Luxとは
pandas Dataframeに対して適当な統計量を計算してVisualize してくれるツールにLuxっていうのが合って、それが既存のコードにimport luxを追加するだけで動くとのことなので、試してみたいと思います。Readme.mdにあった、Example Jupyter notebookはなぜかうまく動かなかったので、Localで仮想環境を作って試してみました。
※追記 その後普通に動きました。一時的にサーバー重かっただけみたいですね。
環境構築&install
pyenvとpipenvは入っているものとします。Luxを試すためのフォルダと環境を作っていきます。
環境
環境構築
mkdir -p lux cd lux pipenv --three #今回は3.8.7 pipenv install numpy pandas lux-api notebook #必要なライブラリをインストール pipenv run jupyter nbextension install --py luxwidget --user #LuxをJupyterNotebookに拡張機能として入れる。 --userをつけないと自分の環境ではPermissionErrorが起こりました。 pipenv run jupyter nbextension enable --py luxwidget --user #同上 pipenv run jupyter notebook
terminalにJupyterLabのURLが出てくるので、コピーしてブラウザで開く
Exampleにあった、最小の構成をコピーして実行するとちゃんと以下のような結果を得られた。
Jupyter Labの場合
本当はJupyter Labでやってみたかったのですが、試してみると、widgetをうまく読み込めないと出てしまいました。
参考URL（該当のIssue） https://github.com/lux-org/lux/issues/110
おわりに
今回はPandas DataframeのVisulalizerであるLuxを紹介しました。 今回はデフォルトの設定だけの紹介となりましたが、設定することで、色々なVisualizeができるみたいですし、これ自体もMatplotlibのようにコードでVisualizeしてくれるツールにもなるらしいです。是非触ってみてください。 ところで、最近こういう既存のコードを書き直さずに使える〇〇みたいなライブラリ見かけますけれど、これどうやって作っているんでしょうかね。
参考サイト
LuxのGithub https://github.com/lux-org/lux
LuxのDoucment https://lux-api.readthedocs.io/en/latest/index.html
1分でわかるLux（公式） https://www.youtube.com/watch?v=qmnYP-LmbNU
Githubで料理レシピのウェブサイトがトレンド入りしてた。それも至って真面目な文脈で。
Intro
Chokudaiさんのテレ東NEWSが曲がった受け止められ方をしていて話題になっていましたね。
本編良かったので、スクショしか見てない人は是非見てみてください。
さて、自分は技術でなにかするというよりは技術が好きな人間なのです。ものはあんまり作らないので、せめて何か紹介でもしようかとGithubのTrendを眺めていたら面白いリポジトリがあったので、今回はそれを紹介します。
それがこれ、
Q. based.cookingってなに？ A. 料理レシピ紹介サイト
Readme.mdにリンクが貼られているサイトを見てみると分かる通り、レシピ紹介ウェブサイトです。contributeにはレシピをプルリクエストしてくれとありました。 それほど難しくないMarkdownを一つ書けばそれだけでプルリクを出せるので、最初はGithub初心者の練習のためのリポジトリだと思っていました。
しかし、このリポジトリの目的はそんなところにはなかったのです。答えになるのはこの動画。 https://odysee.com/@Luke:7/a-demonstration-of-modern-web-bloat:f
Q. based.cookingってなに？ A. 昨今のウェブサイトの重さに意義を唱えるサイト
動画から一部取り出して意訳する。
レシピを見ようと思ったら、読み込みが遅い。どれだけ通信しているか調べたら、なんと一つのウェブサイトを見るだけなのに7MBも必要だった！しかも、面白いことにここからコンテンツ部分だけ取り出したサイトがこちら。なんと1MBも通信せずにサイトのコンテンツをみることができた。つまりは我々が通信しているもののほとんどは広告であったり、トラフィックであったりコンテンツとは関係のない部分なのである。これに対して意義を唱えよう。コンテンツだけで構成されたウェブサイトを作ろう。
そういう趣旨で作られたサイトらしいです。
そういえば、最近こんな調査結果も出ていましたね。 主要コンテンツサイトのデータ通信量、約4割が広告だった
なるべく軽い、けれど内容のあるウェブサイトを作ろう。リッチになりすぎたインターネットはそういう道を歩んでもいいのかもしれません。
はしがき
そういえばあの帯域監視どうやってたんだろう。
Obsidian_to_Ankiで詰まったポイント
起きたこと
公式GithubのWikiのExampleが動かない（idが挿入されない）
START Basic This is a test. Back: Test successful! Tags: Testing END
Wikiに有るようにこのようなコードを打ち込めばとりあえずは動くはずというTutorialなのだが、それが動かなくて困っていた。
解決法①
Ankiを日本語化していた関係でBasicというNote Typeがなく、"基本"にしないといけなかった。
これで無事Obsidian2Ankiに読み込まれidが挿入された。
解決法②
これだけだと読み込まれはしたものの、全て表面に映っているという状況です。
実は日本語化していると、Backではなく、裏面というキーワード指定が必要。なので、まとめると、コマンドは
START 基本 This is a test. 裏面: Test successful! Tags: Testing END
となる。
WSL2でVSCodeが突然動かなくなったときにやったこと（一応の解決は得た）
起こったこと
WSL2でVSCodeを開こうとするとSegment faultが起こった（スクショ取り忘れた）
$ code . Segment fault
GUIからVSCodeを開こうとしても開くのだが、WSL2との接続ができない状態（Terminalが使えず、ファイルも読み込めない）になりました。
解決方法
色々探していると以下のIssueに同様の症状を見つけました。
簡単に言うと、~/.vscode-serverというディレクトリがVSCodeServerのコードだからそれを消して（念の為Renameして）VSCodeを開こうとすると新しくInstallするような状況になるからうまく開くよ。その後に拡張機能(extension directory)を入れ直しても問題ないよ。っていうことらしい。ただし原因はわかっていないままCloseされている。
Obsidian（Markdown）で画像を左右に並べる方法（CSS)
まえがき
こんにちは、yakata66です。 最近Obsidianというものにハマっています。ObsidianはMarkdownを使ったメモアプリです。 形式張らずに書くことができる手軽さと、検索性を兼ね備えているのが売りです。 良くも悪くもすべてをMarkdown形式で保存しているため、最悪Obsidianのサービスが終了したとしても、メモが保存されるという安心感もあります。
Markdownなので、基本的には上から下にしかかけません。しかし、文字列の横に画像を置きたいことは結構あると思います。今回はそれを実現しました
#Obsidian 割と実用的では？ pic.twitter.com/eGMFtfIUXD
— ヤカタ (@yakata66) 2021年2月26日
本題。画像を横に置く方法
ObsidianではCSSを使うことが出来ます。本来はテーマ（背景の色や文字の色など）のために導入されていますが、CSSはもっと色々とできるので、今回はこれを使って画像の回り込みをやってみます。 （正直分かる人にとってはCSS使えるの時点で帰って大丈夫です）
結論から書くと、以下のコードをcssの最後に貼った上で、画像のソースの最後に"#float"と書くだけです。 ex. [IMAGE](./path/to/image.jpg#float)
div[src$='#float'] { float:right; margin: 10px; width: 30%; }
コードの解説
css3になってから、属性に書いてある内容をセレクタにすることができるようになったようです。上のコードではdivタグでsrc属性が"#float"で終わるようなものを選ぶセレクタを指定してます。 後はそれに対してfloat:right;をしているだけですね。大きさやmarginは趣味です。
おわりに
今回はObsidianで画像を横に置く方法について解説しました。属性をユーザーが追加で付けられないという制約があるので、なんでもできるわけではありませんが、結構応用が効くと思いますので、色々カスタマイズして遊んでみてください。最後に参考文献を載せておきます。
