JavaScript

2017年11月5日 (日)

Roofpig でルービックキューブの手順をメモる【日記】

Roofpig

昨日から Roofpig という Web ブラウザ上でルービックキューブの手順アニメーションを表示させる JavaScript プログラムを使ってメモを書いてみています。

https://github.com/larspetrus/Roofpig

自分で図を書かなくて良いので便利。

Fire HD 8 タブレットで寝ながら日本語入力

Google 日本語入力だとどうも片手で入力しづらい。 ATOK を入れてフローティングキーボードにしたら、寝転んで入力するの便利になりました。

[ permalink ]

[ 11月5日全て ]

ノート/メモははライティングアプリ Ulysses を使い Markdown で書いていて、検索・閲覧・整理も Ulysses で基本済ませています。ただいくつかの良く参照するファイルはブックマークやハイパーリンクから Web ブラウザでさっと表示させたかったりします。なので以前は Plack::App::Directory::Markdown を使った自作 PSGI アプリケーションを使ってました。

が、セットアップしたり保守したりという手間を今とれないなと思って、 Markdown ビューアを探してみたところ MkDocs が良さそうなので試してみました。

http://www.mkdocs.org/ (公式サイト自体が MkDocs で作られているのでどのような表示になるか確認できます)

MkDocs を Homebrew で入れてみる

MacBook Pro に Homebrew で入れて動かしてみます。

 $brew install MkDocs
 $mkdir -p ~/var/mkdocs
 $cd ~/var/mkdocs
 $mkdocs new local
 $cd local
 $mkdocs serve

で Web サーバが立ち上がるので http://127.0.0.1:8000/ にアクセスすると ~/var/mkdocs/local/docs/index.md の内容を HTML に変換したものが表示されます。お手軽! 設定変更は ~/var/mkdocs/local/mkdocs.yml できます。

設定ファイルの書き方

あとは docs の下に Markdown ファイルを置いておけば Web ブラウザで閲覧できます。docs の下に既存の Markdown ファイルノートディレクトリへシンボリックリンクを作ればそれらも辿って表示されます。

pip で入れ直す

試していてブラウザでのレンダリング表示が重いなと思って HTML ソースを見たら同じ JavaScript ファイルを何十回も読み込んでいて何か変ぽかったので Homebrew のをやめて pip で入れなおしました。どちらも現在 mkdocs 0.17.2 ですが pip で入れた方は問題なかったのでこちらを使うことにします。

 $brew uninstall mkdocs
 $brew install python
 $pip2 install mkdocs

MkDocs は静的サイトジェネレータで、プレビューサーバは補助的機能ですがまずまず使えそうです。

[ permalink ]

[ 2月26日全て ]

2018年10月30日 (火)

JavaScript コードで TaskPaper ファイルにノートを挿入する

ちょっとしたメモを Alfred for Mac から一発で TaskPaper ファイルに挿入したい。Packal 上に TaskPaper のための多機能な Alfred Workflow があるので入れたんだけれど、うまくタスク追加ができないことがあるので、自前でスクリプトを作って Alfred から呼ぶことにした。

TaskPaper ファイルはテキストファイルなので書き慣れている Perl でスクリプトを書いてもいいんだけれど、編集の競合が避けられるし parser も書かなくて済むしということで TaskPaper の API を使うことにした。

JavaScript for Automation (JXA) を使えば JavaScript コードで TaskPaper API を呼べるっぽい。

以下指定した TaskPaper ファイルに Inbox: プロジェクトがなければ追加した上でその子供としてノートを挿入するコード(エラー処理割愛。実際にはタイムスタンプとかもノートにつけるようにした)。

 #!/usr/bin/env osascript -l JavaScript

 function TaskPaperContext(editor, options) {
   let inbox = editor.outline.evaluateItemPath("//Inbox:")[0];
   if (!inbox) {
     inbox = editor.outline.createItem("Inbox:");
     let projects = editor.outline.evaluateItemPath('@type = project')
     if (projects.length == 0) {
         editor.outline.root.appendChildren(inbox)
     } else {
       editor.outline.root.insertChildrenBefore(inbox, projects[0]);
     }
   }

   let items = ItemSerializer.deserializeItems(options.text, editor.outline, ItemSerializer.TEXTMimeType)
   editor.setCollapsed(items[0])
   inbox.appendChildren(items, inbox.firstChild)
 }

 function run(argv) {
   Application('TaskPaper').open(argv[0]).evaluate({
     script:TaskPaperContext.toString(),
     withOptions: {text: argv[1]}
   })
 }

これを inbox.scpt というファイルで保存し実行権限を与えれば

 ./inbox.scpt $HOME/tmp/test.taskpaper こんにちはこんにちは!!

という感じで呼び出せるようになる。

あとは Alfred Workflow を作ってそこからこのスクリプトを実行すれば OK だ。

[ permalink ]

今日のさえずり: ブロックアウト(3次元テトリス)、当時ゲーセンで何回かやったけど激ムズだった

2018年10月30日

06:30 続々と集結。 PowerShot G9 X Mark II https://t.co/atEV71Hsai
06:45 日陰で待つビール樽。 PowerShot G9 X Mark II https://t.co/HVdAHHTcqr
07:43 @hiloyuqi_500c シルバーでこんなに揃えてみたいです!
09:54 2018年10月30日 #朝の渋谷新南口は落ち着いた雰囲気。 DSC-RX0 #RX0 https://t.co/82mrCVlsrc
18:03 JavaScript for Automation (JXA) ちょっと理解した。
22:30 Bluetooth 対応の薄型コンパクトコンポ、やはりパナソニックの SC-HC2000 かな。ソニーの CMT-X7CD / CMT-X5CD だと aptX にも対応しているんだけれど2014年発売とけっこう経つんだよね。 https://amzn.to/2zauuHl
23:37 ブロックアウト(3次元テトリス)、当時ゲーセンで何回かやったけど激ムズだった。

[ permalink ]

[ 10月30日全て ]

2019年6月26日 (水)

今日のさえずり: JavaScript コードを書くとか、不慣れなことをした

06:15 方眼 RICOH GR III #GR #GRIII #GR3 https://t.co/tad9jykPQB
09:44 2019年6月26日 #朝の渋谷順調解体。 RICOH GR III Posi #GR #GRIII #GR3 https://t.co/yV17vx24bE
20:39 渋谷駅で山手線に乗るの、南口じゃなくて新南口からだとどうなんだろと思って試してみたけど予想の範囲内だった。
23:45 JavaScript コードを書くとか、不慣れなことをした。

[ permalink ]

[ 6月26日全て ]

2021年8月13日 (金)

Next.js で nDiki を作り直そうと考えて引っ込めた

Web サイトの移行の話が出た流れで、この Web 日記についてちょっと考えたりした。

Perl で書いた自作の日記システム (CGI プログラム) で問題なく動いているが、手を入れずに使い続けているので将来環境(Perl やライブラリ)のアップデート時にハマるのではというのがあると、このまま記事が増え続けた時に問題が起きるのではというのがあり、気掛かりではある。

配信環境に依存しないように静的サイトジェネレータで生成する形に変えたらいいのではと、以前から思ったりしている。

ちょっとしか使ったことがない JavaScript を学ぶ機会としても Next.js とかどうかなとちょっと調べてみた。

https://nextjs.org/

個別記事ページを静的ページとして生成するのはいいとして、自動リンク機能で実現しているキーワード別ページとそのページングがちょっと厄介そう。やれるとしても今の URL 体系も一部変えなければいけないな。

今の日記システムに手を入れるのを再開して、 Markdown 対応させるのが先かな。

[ permalink ]

[ 8月13日全て ]

2021年9月24日 (金)

Obsidian Publish で JavaScript を使う

Obsidian Publish サイトの下部にある Powered By Obsidian Publish フッタを publish.css で非表示にしていたのだけれど、せっかくなので著者表示に差し替えてフッタを表示することにした。

https://notes.naney.org/

Obsidian vault のルートに publish.js ファイルを作りコードを書き、公開対象に追加してパブリッシュ。規定のファイル名だから自動的に公開対象になるだろうと勘違いして最初あれっとなった。 publish.css の時も同じように勘違いした記憶があるな。

JavaScript でコードを書けばあれやこれや出来る訳だが、あまりやりすぎると将来メンテナンスが面倒になって困ることになるので、ほどほどにしとこ。

[ permalink ]

[ 9月24日全て ]

2021年10月8日 (金)

data-cfasync を指定して Cloudflare Rocket Loader で特定の JavaScript コードを除外する

HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるのが動いていないのに昨日気づいた。 initialize がうまく動いていいないっぽい。 Cloudflare の Rocket Loader をオフにしたら再び動くようになったのでそれが原因のようだ。

How can I have Rocket Loader ignore specific JavaScripts? – Cloudflare Help Center

によると

 <script data-cfasync="false" src="/javascript.js"></script>

のように data-cfasync を指定するとそのスクリプトの読み込みを最適化から除外するらしい。

今回は HTML ファイル中に直接 script 要素で埋め込んだコードが動かなくなったので

 <script data-cfasync="false" type="text/javascript">
 ... // Rocket Loader オンで動かなくなったコード
 </script>

のように追加してみたところ Rocket Loader をオンにしても動くようになった。高速化のため、できれば Rocket Loader をオンにしておきたかったので良かった良かった。

[ permalink ]

[ 10月8日全て ]

2021年10月13日 (水)

今日のさえずり: 傘を取りに戻ってきた人を見かけて傘を取りに戻った

08:25 本線合流 #photography RICOH GR III #GR #GRIII #GR3 https://t.co/eyxfSErlmb
13:05 昼休みに渋谷駅近くのクリニックでインフルエンザ予防接種を受けてきた。昨日の健康診断に続き2日連続の注射だ。
19:27 「インフルエンザワクチンってこんなに量あったっけ?」ってぐらいの量をチューっとされた。
19:43 傘を取りに戻ってきた人を見かけて傘を取りに戻った。
21:24 Obsidian Publish サイトで Viz.js を使えるようにしたのだけれど、 Viz.js は v2.1.2 で開発が止まっているみたい。別の JavaScript 版 Graphviz にそのうち変えよう。