nDiki : Web ブラウザ

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

Roofpig

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

• https://github.com/larspetrus/Roofpig

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

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

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

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

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

• howm + Markdown + Plack
• Text::Markdown::Discount でテーブルや ``` や自動リンクなどの拡張を使う
• 社内でも動かしている PSGI アプリケーションに OpenID 認証をつけた
• Markdown ビューアを OpenID Connect を使って Google アカウントで認証できるようにした

が、セットアップしたり保守したりという手間を今とれないなと思って、 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

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

GitHub Flavored Markdown ファイルの Web ブラウザでのプレビューに Grip を使う

「Markdown で書いているノートを Web ブラウザで見るのに MkDocs を使う」とつぶやいたら @bsdhack 氏が Grip を紹介してくれました。

私はgithubなどのmdファイル(https://t.co/nyoqRnjsN7)を読むために python製の grip 使って↓なスクリプトを書いて使ってます。

grip --export ${1:-README.md} - | w3m -T text/html

— Mitzyuki IMAIZUMI (@bsdhack) 2018年2月28日

さっそく試してみました。

 $pip2 install grip

でインストールしたら Markdown ファイルを指定して Grip を起動します。

 grip index.md

Grip が http://localhost:6419/ で Web サーバとして立ち上がるので Web ブラウザでアクセスすると index.md の HTML 変換されたものを見ることができます。なお

 grip -b index.md

とすれば起動と同時に Web ブラウザで開いてくれます。URL でパスを指定すればそのまま同じ/サブディレクトリにある Markdown ファイルもプレビューできるので、ハイパーリンク付けをしておくことでドキュメント群をブラウジングすることもできます。なるほどお手軽で便利。 GitHub 上とほぼ同様の見慣れたデザインになるのがいいですね。

そもそも Grip は「GitHub Readme Instant Preview」で GitHub 上での表示確認のためのツールで、 GitHub の REST API を使ってレンダリング結果を生成しているので当然といえば当然だったりはします。

ただそのかわり GitHub の API を使うので

• オフラインでは使えない(オフラインレンダリングは開発中)
• 外部サービスを使って変換させたくないドキュメントには使えない

と場合によっては不便な部分があります。なお後者については GitHub Enterprise があるなら Grip でそちらを指定するとう手もあります。

GitHub に push する前にチェックしたい時はもちろん、それ以外でさっと Web ブラウザで見てみたい時にも便利なツールですね。

• https://github.com/joeyespo/grip

今日のさえずり: イトーヨーカドー 大井町店のポッポとうとう今日まで。名残惜しい。

2018年02月28日

• 08:03 Google Chrome 68 の HTTP サイトでの表示は「保護されていません」になるのかな。ニュースサイトが書いていた「非安全」ほどはキツくない表現。 / “保護されたウェブの普及を目指して” http://bit.ly/2FBonP5
• 13:00 イトーヨーカドー 大井町店のポッポとうとう今日まで。名残惜しい。
• 15:15 Mac 上にある Markdown で書いたノートファイルを Web ブラウザで見るのに MkDocs を使ってみた。ビルトイン Web サーバ付き。 http://bit.ly/2F0lWV4
• 17:21 とんかつ屋さん #α6300 + GIZMON #Utulens http://bit.ly/2ht8a6M https://t.co/mNUuKKt3ep
• 22:27 @bsdhack ありがとうございます。 Grip 初めて知ったので使ってみました!
• 22:28 GitHub Flavored Markdown ファイルの Web ブラウザでのプレビューに Grip を使ってみた。 http://bit.ly/2t4U2Wk
• 22:31 @bsdhack Grip で変換するの単独ページだけかと思ったらちゃんとディレクトリ階層中の Markdown ファイルも表示できて「おー」となりました。
• 22:36 お疲れ様でした & お大事に! @orga_chem / “退職の前座エントリ - 若き JavaScripter の悩み” http://bit.ly/2CP3vR9

macOS で使っている Mac アプリケーション (2018年03月06日版) #nNote

無料

• Web ブラウザ Google Chrome
  • https://www.google.co.jp/chrome/...
• Dropbox
• ターミナル iTerm2
• Clipy
• Google のバックアップと同期

無料 + 有料

• ランチャ Alfred 3
  • https://www.alfredapp.com/
• ジャーナルアプリ(日記アプリ) Day One
  • http://dayoneapp.com/
• Evernote

有料

• ライティングアプリ Ulysses
  • https://www.ulyssesapp.com/

nDiki Bootstrap 3 でのサイトの幅の見直してコンテナを 750px までに

一昨年にサイトの幅の見直してコンテナを 970px までにしたのですが、やはりそれでも文章の幅としては広すぎでした。 970px までから 750px までに変更してみました。

なんとなくずっと昔から固定幅は悪のように思えて、Web ブラウザを広げたらできるだけ広がる方が良いと今まで思っていたのでした。

今日のさえずり: どんより小雨パラパラ

2018年10月23日

• 06:30 小田急バス。 PowerShot G9 X Mark II https://t.co/W1hjhFuP5e
• 06:45 渋谷の連絡通路下。ここも今後変わっていくのかな。 PowerShot G9 X Mark II https://t.co/Aq4GiEiFqT
• 09:45 2018年10月23日 #朝の渋谷 どんより小雨パラパラ。 DSC-RX0 #RX0 https://t.co/64feVeDkJV
• 24:21 Web ブラウザ上で動く Perl。 / “WebPerl | Run Perl in the browser with WebPerl!” https://webperl.zero-g.net/

Synology DiskStation DS216j の HDD 交換(2回目)

2016年11月5日から使い始めている NAS の Synology DiskStation DS216j に積んでいる HDD が故障した(2回目)。前回交換したのはドライブ 2 で今回はドライブ 1 なので、最初から使っていた HDD だ。稼働時間からするとどちらももうちょっと長持ちして欲しいところではある。

昨日 HDD を注文して即日届いているので本日朝に交換。

手順は前回の交換とほぼ同様(今回は外付け HDD へのバックアップはサボった)。

1. DS216j をシャットダウンする(昨日シャットダウン済み)。
2. 電源ケーブルと LAN ケーブルを外して、ケースを開ける。
3. 溜まったホコリを取る。
4. ドライブ 1 の方の HDD を外して新しい HDD を挿す。
5. ケースを閉じて、電源ケーブルと LAN ケーブルを接続する。
6. 電源を入れる。
7. ストレージマネージャで修復を開始する。

10:45 頃に電源を入れて Web ブラウザからアクセスして修復を開始。終わったのが 18:36 なので8時間弱で完了した。ちなみにタイミングの問題なのか修復前に電源を入れたあとにエラーが出ていて再起動を要求されていたので、修復後に再起動。ディスクチェックが走ったので 19:00 前に完全に対応完了となった。

別途バックアップもする構成にしておきたいけれど、なかなかねー。

第0回 PM Meetup by pmconf 〜リモートワーク時代のプロダクトマネジメント〜

プロダクトマネージャーカンファレンス実行委員会主催で、プロダクトマネジメントをテーマにしたトークセッションイベントがオンラインで開催されたので参加。今回は試験的な第0回目でテーマは「リモートワーク時代のプロダクトマネジメント」。

新型コロナウイルス感染拡大による外出自粛で急遽リモートワークを行うようになった人が多い状況ということもあり「リモートワーク時代のプロダクトマネジメント」という主題までは辿り着けず、リモートワークを始めて感じていることや工夫していること・使っているツールなどがまだまだ話題の中心という印象だった。

まずは組織・個人が新しい働き方に馴染みパフォーマンスが出るようになってから、その上でプロダクトマネジメントにフォーカスできるようになっていくのかなと。

オンラインでのディスカッションを進めるのに Miro (miro.com) が良いという声が多かった。今度触ってみたい。

cluster

今回はバーチャルイベントプラットフォーム cluster での開催。初 cluster。

あえて VR である必要も無いんじゃないかなと思っていたけれど、人けが感じられるという点やリアクションができるという点で参加している感が高まるし、登壇者も反応が感じられるしでこれはこれでアリかなと感じた。ネームプレート・フキダシ表示をオフにした方が見やすいけれど、そうするとデフォルトのアバター(ロボット)ばかりでただの群衆になっちゃうな。

アバターで登壇者の顔が見えないとノンバーバルな情報が希薄というのもちょっと感じた。まあラジオだと思えば問題ないか。

簡単な2択アンケートを出し、参加者を会場内で移動して2つに分かれてもらうというのを冒頭のアイスブレイクでしていたのはうまいなと思った。イベント開催慣れしていてさすが。

Doorkeeper では 800人以上の参加申し込みがあったけれど、アバター数をみる限り結構少なめだった。オンライン + 無料なのでとりあえず申し込みの人がほとんどだったみたい。

システム的には MacBook Pro (13-inch, 2018, Four Thunderbolt 3 Ports) でも結構重く感じた。ファンは回りっぱなしとして、 Web ブラウザで slido を開いて操作するのまでもっさり。もうちょっと軽いといいな。

• 第0回 PM Meetup by pmconf 〜リモートワーク時代のプロダクトマネジメント〜 - プロダクトマネージャーカンファレンス / Product Manager Conference | Doorkeeper

[ COVID-19 ] [ WFH 2020 18回目 ]

Markdown ファイルを Marked 2 で self-contained HTML に変換して Google ドキュメントに貼り付けて共有する(画像付きで)

Markdown ファイルを iA Writer で Web プレビューしたものを Google ドキュメントに貼り付けて共有する(記事1)時、画像データをデータ URL 化して Markdown ファイルに記述すれば一緒に貼り付けられることが分かった(記事2)。

でもやっぱり管理が面倒くさい。

そこまでするなら「別のアプリで self-contained HTML に変換」→「Web ブラウザで表示」→「コピー & ペーストで Google ドキュメントに貼り付け」を実行する方がいいのでは。いったん HTML に書き出すのが嫌だなと今まで思っていたけれど。

と思って調べたら、インストールしてある Marked 2 が self-contained HTML に変換できたし、Google Chrome で表示して全選択からのコピー & ペーストで画像付きで Google ドキュメントに貼り付けられた。

こちらの方法にしよう。

Obsidian Publish を独自ドメインで使う

6日前に使い始めた Obsidian Publish がいい感じ。やはり独自ドメインにすることにした。 notes という名前を使っている Obsidian Publish サイトが多いので notes.naney.org にしよう。

Cloudflare を設定する

まず Cloudflare にアカウントを作り naney.org のネームサーバを VALUE-DOMAIN のから Cloudflare のに変更。

移行ができたところで Obsidian Publish のカスタムドメインを設定する。

Cloudflare の「DNS 管理」で下記レコードを追加。

• タプ: CNAME
• 名前: notes
• コンテンツ: publish-main.obsidian.md
• TTL: 自動
• プロキシ ステータス: プロキシ済み

「SSL/TLS」はすでに「SSL/TLS 暗号化モード」が「フル」になっていたのでこれで設定終了。

Obsidian Publish を設定する

Obsidian Mac アプリケーションの Obsidian Publish 設定「サイトオプション」にある Custom domain で「notes.naney.org」を変更する。

反映されるのを待つ

これで https://notes.naney.org/ でアクセスできるようになる。設定直後は Web ブラウザでセキュリティ警告が出たり一部のノートがエラーで正しく表示されなかったりして焦ったが、しばらく時間を空けてから Web ブラウザのキャッシュをクリアしてアクセスしたら正常に動くようになった。

めでたしめでたし。自分のドメインだと自分のノート感が出て嬉しい。

Cloudflare にネームサーバを移す

Obsidian Publish で HTTPS アクセスできるようにカスタムドメインを設定する方法として Cloudflare を使う方法が説明されている。

なるほどと Cloudflare のアカウントを昨夜作ったところ、 Free プランではドメインのネームサーバを Cloudflare に切り替える必要があることがわかった(サブドメインだけ Cloudflare で設定することができない)。

2009年12月に VALUE-DOMAIN 独自のネームサーバを使うようにしてからずっとそのままだったけれど、 Cloudflare のネームサーバに変更してみることにした。

まず Cloudflare アカウントのメールアドレスを変更

昨日 @naney.org のメールアドレスで Cloudflare アカウントを作成したが、まずはこれを Gmail のメールアドレスに変更。naney.org ドメインを扱うサービスのアカウントで @naney.org のメールアドレスを使っていると詰むリスクがあるので。

VALUE-DOMAIN から Cloudflare にネームサーバを変更

ネームサーバの移行なのでプロキシは有効にしないことにする。

1. dig コマンドの結果を記録。
2. VALUE-DOMAIN にログインし現在の DNS 設定を記録。
3. Cloudflare にログインして naney.org ドメインを追加。
4. Cloudflare がスキャンした DNS 設定を確認。
   • プロキシ ステータスは「プロキシ済み」にせず「DNS のみ」にする。
   • 自動的に追加されなかったサブドメインの A タイプレコードを手動で追加。
5. VALUE-DOMAIN のネームサーバ変更で「他社提供/自前ネームサーバー」を指定し Cloudflare のネームサーバを入力し変更。
6. ネームサーバが変更されるのを dig コマンドで確認しながら待つ。
7. 切り替わったところで Web ブラウザでアクセスできることを確認。メールが届くことも確認。

以上で終了。