nDiki : JavaScript

JavaScript

2017年11月5日 (日)

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

Roofpig

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

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

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

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

[ 11月5日全て ]

2018年2月26日 (月)

Markdown で書いているノートWeb ブラウザで見るのに MkDocs を使う

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

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

MkDocsHomebrew で入れてみる

MacBook ProHomebrew で入れて動かしてみます。

 $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静的サイトジェネレータで、プレビューサーバは補助的機能ですがまずまず使えそうです。

[ 2月26日全て ]

2018年10月30日 (火)

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

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

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

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 だ。

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

2018年10月30日

[ 10月30日全て ]

2019年6月26日 (水)

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

[ 6月26日全て ]

2021年8月13日 (金)

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

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

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

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

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

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

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

[ 8月13日全て ]

2021年9月24日 (金)

Obsidian PublishJavaScript を使う

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

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

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

[ 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 をオンにしておきたかったので良かった良かった。

[ 10月8日全て ]

2021年10月13日 (水)

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

[ 10月13日全て ]

2022年3月10日 (木)

Twitter の widgets.js を1度だけ読み込むように修正

publish.twitter.com でコードを生成して Web 日記に Tweet を載せている。その際 JavaScript コード読み込みの script 要素が入った状態でそのまま貼り付けていたので、1ページに複数表示される場合にちょっと無駄が生じていた。

ので、1度だけの読み込みで済むように公式サイトのコードを今日ようやくフッタに埋め込んだ。

https://developer.twitter.com/...

これで各記事内の Tweet 埋め込みコードから script 要素を消していける。数があるのでちょっとずつやっていくことにしよう。

それから Obsidian Publish サイト nNodes の publish.js にも同じようにコードを追加し、 nNodes 内にも Twitter フォローボタンを追加してみた。 Tweets もこれで載せられるね。

[ 3月10日全て ]

2022年7月27日 (水)

Obsidian URIJavaScript location リダイレクトする

Remember The Milk のタスクに Obsidian ノートを関連付けたいのだけれど、 Remember The MilkURL フィールドに Obsidian URI を指定できない。

ノート名を document.location.search で受け取って Obsidian URI を組み立て document.location.href を更新する小さな HTML ファイルを配置し、そこを経由させることにした。

[ 7月27日全て ]

About

Naney Naneymx

Naney (なにい) です。株式会社MIXIで SNS 事業の部長をしています。

※本サイトの内容は個人的見解であり所属組織とは関係ありません。

Process Time: 0.042655s / load averages: 0.69, 0.58, 0.62