nDiki : Web ブラウザ

Markdown でプレゼンテーションスライドを書ける Deckset for Mac

ここ最近はプレゼンテーションスライドを用意する時は reveal.js を使っています。Markdown で内容を書けるので便利なのですが、個人的には書き始めが億劫というネックがあります。ディレクトリを作って reveal.js のファイル一式を最初に用意するのがちょっとしたことなのですが面倒くさいのです(自分用に若干アレンジしたサンプル一式をコピーする作業)。

Markdown で書けるもので、かつもうちょっとさくっと書けるツールがあるかなと探してみたところ Deckset for Mac が良さそうなので使ってみることにしました。

• http://www.decksetapp.com/

スライドを書く

Deckset 方言の Markdown で記述したファイルを1つ用意すれば Deckset でスライドとしてレンダリングしてくれるのでお手軽。Deckset アプリ自体には Markdown エディタは内蔵されておらず Emacs や Atom など好みのテキストエディタで編集するスタイルというのも良いです。テキストエディタ側で保存すると Deckset 側が更新を検知してスライドを更新してくれます。

スライドに使う画像は URL で指定することができる(そして推奨している)ので、ローカルディレクトリに用意してという必要がありません(もちろん Markdown ファイルと同じディレクトリに用意して読み込ませることもできます)。「プレゼンテーション時にネットワークにつながっていなかったり URL 先から消えていたら困るのでは?」というのが気になるところですが、 Deckset 側でローカルホスト上にキャッシュしてくれるので大丈夫になっています。

テーマ

テーマは Deckset が用意しているものから選びます。欧文系らしいちょっと派手なのが多く、個人的に使えるなというのはそれほど多くない印象です。個人的には Titillium がいちばんしっくりくるかなと。

エクスポート

PDF ファイルや画像でエクスポート可能なので困ることはなさそうです。

好みの設定

スライドの冒頭にそのスライドの設定を書いておくことができます。

 theme: Titillium,1
 footer: [各ページ下部のフッタに載せたい文字列]
 slidenumbers: true
 autoscale: true

が良さそげ。

reveal.js との比較

reveal.js と比べて良いなというところは以下です。

• すぐ書き始められる。
• さくっと画像を貼れる。
• 「右半分画像」というレイアウトが簡単にできる(reveal.js だと厳しい)。
• autoscale を有効にするとページに収まるようにフォントサイズを調整してくれる。

reveal.js では Web ブラウザで表示するため縦横比が変わる前提である程度余裕をもってページを書く必要があるのですが、Deckset はそこを気にしなくて良いのが楽です。CSS や JavaScript コードをいじれる reveal.js に比べると細かいカスタマイズは全然できないのですが、その分デザインは Deckset に任せると割り切って内容だけに集中してさくっと書けます。

reveal.js が便利なところもあるのでプレゼンテーションシーンに合わせて使い分けることにします。

(画像は http://www.decksetapp.com/ より。)

自宅用 NAS として Synology DiskStation DS216j をセットアップ

妻用の MacBook Pro が届いたら AirMac Time Capsule は Time Machine 専用にしようと考えているので、写真データのファイル共有のため NAS を別途用意することにしました。

QNAP のとちょっと迷いつつソフトウェアの評判が良い Synology DiskStation DS216j を選びました。

• Synology DiskStation DS216j

HDD は容量的には 2TB でも十分かなと思ってはいたのですが 3TB の方が値頃なので 3TB x 2 にしました。NAS 向けの WD Red WD30EFRX で。

• WD HDD 内蔵ハードディスク 3.5インチ 3TB WD Red WD30EFRX SATA3.0 5400rpm 64MB 3年保証

 WD Red NASハードディスクドライブ WD30EFRX
 容量: 3TB
 インタフェース: SATA 6Gb/s
 フォームファクタ: 3.5インチ
 RPMクラス: 5400RPM
 キャッシュ: 64MB
 製品保証: 3年間

HDD を装着して電源ケーブルと LAN ケーブルを接続し電源ボタンを押して起動。あとは PC の Web ブラウザから http://find.synology.com/ にアクセスしてページに表示される接続ボタンを押せば DS216j にアクセスできます。全部 Web ブラウザから設定できてお手軽です。

「DiskStation のネットワークでの位置を Synology と共有」は無しに、 QuickConnect も ID を作らず安全側に倒した設定にしました。

あとは何かあった時にメール通知するよう設定ができるので、専用のメールアドレスを作成しそちらに送るようにしました。

今日はまずは初期設定まで。どのようにファイルを置いていくかはこれから考えます。この NAS 自体のバックアップ手段をまだ用意していないので、当面は MacBook Pro と2重でファイルをもっておかなければいけないかな。

一番時間かかったのは設置場所の配線の整理と掃除でした。

リビングに置くので一番気にしていたのは騒音問題ですが、普通に生活している分には気にならない感じでほっとしました。必要ない時はスリープ(?)もしてくれます。ビープ音の音だけがめちゃ怖いです。

[ 製品レポート ]

LINE BLOG を使ってみる

2016年11月14日に LINE BLOG が全ユーザーに開放されたので naney の確保も兼ねて開設してみました。

• LINE BLOG 初記事

雑感

以下、ターゲット層でないことを承知しつつ雑感です。

• 書く & 投稿する
  • アプリの下に並んでいる5つのボタンを無意識のうちに端から押していくと、真ん中の記事作成ボタンなのでいきなり書いてミソ状態になる。書かせる誘導が半端ない。
  • 予約投稿機能がついているのが良い。
  • アプリでしか書けないのは戦略上理解できるけれど、やはりチマチマ感がある。
• その他
  • 今まで「LINE」だけれど認証以外はほぼ LINE 関係ない感じ。
  • フィード出力もきちんとあるのでその点ではきちんと Blog プラットフォームっぽい。
  • エクスポート機能が無いのでロックインされる。記事の下に広告が表示される(スマートフォンアプリ・スマートフォン Web ブラウザで閲覧すると)。デジタル小作人感を感じる。

---

[ 初投稿 ]

今日のさえずり: Amazonプライム・ビデオで宇宙刑事ギャバンを全話観るの諦めた

2017年09月14日

• 15:00 Amazonプライム・ビデオで宇宙刑事ギャバンを全話観るの諦めた。
• 19:00 Trello の Mac アプリケーションを入れてみた。Web ブラウザで開いている時より圧倒的すっきり感がある。 Alfred でもさくっと開けるのも便利だな。 http://apple.co/2f754Ew https://t.co/t1ki1X22zo
• 19:22 BEGIN。 (@ 金王八幡宮 in 渋谷区, 東京都) https://www.swarmapp.com/c/i9WaIupnW7P
• 19:28 こんなに人がいる金王八幡宮を見るの初めてだ。 https://t.co/z2jeybeOq3

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

Roofpig

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

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

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

Hire 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

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 前に完全に対応完了となった。

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