nDiki : JavaScript

今日のさえずり: docomo Wi-Fi がようやく WPA2 対応か。であれば使ってもいいかなぁ

2013年05月11日

• 10:17 docomo Wi-Fi がようやく WPA2 対応か。であれば使ってもいいかなぁ。
• 11:02 家の中の湿度を完全にコントロールしたい。
• 11:42 ブー。 / “画面をスクロールするとオナラの音が出るJavaScriptライブラリfartscroll.js | 秋元@サイボウズラボ・プログラマー・ブログ” http://t.co/ksZcvzltlI
• 12:13 フレッツ光をクレジット支払いにしたい→要フレッツ光メンバーズクラブ→登録とかした→「フレッツ光メンバーズクラブ会員サイトへの不正アクセス」関連で契約・利用情報の閲覧を規制中。
• 12:17 Web116.jp で設定できるっぽい。
• 12:25 クレジット支払い申し込み完了。
• 15:00 暑いので卓上扇風機出した。
• 16:40 フレッツ光導入記念にラジオ体操とドナルド体操。
• 22:12 オレルール的には口つけたら翌日までにしている。 / “ペットボトルを直飲みしたら？　実験開始7日目結果編。: サイキンのオハナシ” http://t.co/hwM3hsNnef
• 22:50 枕元用に「キーン」って言わない USB AC アダプタが欲しい。
• 23:30 Kindle本、やはり家族で読むとか考慮されてないのか。
• 23:51 @b_wind 1回限りとかだと「また読ませて。」っていうのには対応してなさそうですね……。

今日のさえずり: Dropbox を Cloud Folder としていったん保存して、 iFiles で Google ドライブにコピーするという方法

2013年11月06日

• 08:01 あ、Flickr Pro のサブスクリプション分取ったよってメールが届いてた。Pro 続けるかちょっと迷っていてまあ続けてもいいかなと思っていたぐらいのやつ。
• 08:17 “ビールでご飯を炊いてみた。その味は…: 地ビール会社で働く広報の日記” http://bit.ly/HIe8bL
• 08:17 「CPANに上げるモジュールの場合」 / “CPANモジュールは依存モジュールのバージョンを固定しない方がいい | おそらくはそれさえも平凡な日々” http://bit.ly/HyvDMc
• 08:29 Google+ カスタム URL 設定した。名姓で妥協した。
• 13:00 I'm at お弁当の大臣 http://4sq.com/1bapb5o
• 14:13 “サーバサイドからクライアントサイドのJavaScriptを呼び出す際のベストプラクティス - kazuhoのメモ置き場” http://bit.ly/17Lzuzq
• 20:47 iThoughts/iThoughtsHD で書いたマインドマップの PNG ファイルを Google ドライブに上げるの、Dropbox を Cloud Folder としていったん保存して、 iFiles で Google ドライブにコピーするという方法に到達した。

iOS アプリ Textwell で現在日時入りテキストを書いて PlainText 2 で Dropbox 上のファイルに追記する

Dropbox 上の Markdown ファイルの最後に

 - [2014-08-07 22:23:24] つぶやきー。

みたいな行をどんどん追記する形でキャプっている。Emacs では Org Capture にて、 Android デバイスでは Jota+ で自動的に現在日時を挿入するようにしている。iOS デバイスでは PlainText 2 でこのファイルの編集をしているのだけれど、単独で現在日時を挿入する機能が無いので Textwell という iOS アプリを入れてみた。

Textwell ではテキストをさくっと書いて他のアプリに渡すのに便利なアプリっぽい。Android アプリのサポテキ(SupportText)的なポジションのアプリなのかな。 JavaScript でアクションを書いておいて実行できるのがマニアック。

現在日時を入れるアクション

Textwell にある関数だと日付が / 区切りなので - 区切りにしたい場合は自前でコードを書く必要がある。以下のような感じにしてみた。

 function zerofill(s) { return ("0" + s).substr(-2) }
 dt    = new Date();
 date  = dt.getFullYear() + "-" +zerofill(dt.getMonth() + 1) + "-" + zerofill(dt.getDate());
 time  = zerofill(dt.getHours()) + ":" + zerofill(dt.getMinutes()) + ":" + zerofill(dt.getSeconds());
 stamp = "- [" + date + " " + time + "] ";
 T("insert", {text:stamp});

PlainText 2 に末尾に追記する

Dropbox 上の /capture/capture.md ファイルの末尾に Textwell の内容を追記するアクションは以下のような感じにしてみた。

 path = "/var/howm/capture/";
 file = "capture.md";
 T("iacplaintext://x-callback-url/append?x-success=textwell:&location=dropbox&path=" + encodeURI(path) + "&name=" + encodeURI(file) + "&text=" + encodeURIComponent("\n" + T.text + "\n"));

昨日ファイル名を固定にしたのもこの仕込みだったりもする。

Markdown でプレゼンテーションスライドを書ける reveal.js と remark のどちらが良いか

Markdown ファイル読み込んでプレテンテーションスライド Web ページにする reveal.js と remark を試してみたところ Markdown ファイルの再利用の点で reval.js の方がイケていた。

以前プレゼンテーションスライドを Markdown で書いて pandoc で reveal.js なページを生成する方法を使っていた。この方法だと1つの Markdown ファイルからスライドページと普通の HTML5 ファイルを生成できるという点が便利だった。

ただデメリットとして「作成環境で pandoc を用意しなければならないので、環境移行した時などにスライドを作る腰が重くなってしまう」というのと、「原稿を修正するたびに pandoc (make) して生成しなおして確認する必要がある」というのがあってちょっと面倒でもあった。

今は自前で Markdown ビューアを立てているということもあり、某環境では HTML5 ファイルは生成しなくても良いので、スライドページの方も Markdown ファイルを外部ソースファイルとして直接読み込む形の方が気楽かなと。

ちょうどこの間の PerlCasual #06 で @Niratama 氏が Remark というスライドショーツールを 使っていて興味が沸いたのでこのタイミングで試してみた。

reveal.js はちょっとグリグリ動くこともあって結構負荷が高い印象だったのに対して、こちらの方が軽い。また reveal.js はテーマファイルなどを読み込むので一通りパッケージディレクトリを一緒にどこかに置いておかなければならないんだけれど remark は JavaScript ファイルだけで良さそうというのも簡潔で良い。

ただ一方で Markdown ファイルで追加でプロパティを書く必要があったりして、 Markdown ファイルの再利用性はちょっと低い感じ。結局そのスライド専用の原稿ファイルにする必要がある。

一方で reveal.js だと Markdown ファイルに追加の記述をしなくてもそれなりに形になるので自分にとっては reveal.js の方が便利そう。

ということで引き続き reveal.js を使うことにした。

個人的な好みで reveal.js 2.6.2 に対して以下を style に追加してみた。これでちょっと日本語スライドが見やすくなるかな?

 .reveal .slides { text-align: left; }
 .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
    text-transform: none;
    text-shadow: none;
  }
  .reveal h1 { font-size: 3.00em; }
  .reveal h2 { font-size: 2.00em; }
  .reveal h3 { font-size: 1.50em; }
  .reveal h4 { font-size: 1.00em; }

今日のさえずり: 絶対毎日が楽しくなるから注文した

2016年10月17日

• 12:00 “JavaScript 祭で発表してきました - 若き JavaScripter の悩み” http://bit.ly/2dHjjtF
• 18:00 “仕事において「裁量がない」時の精神的負担は、想像するよりも遥かに大きい。 | Books&Apps” http://bit.ly/2dhoDba
• 22:39 絶対毎日が楽しくなるから注文した。 / “レゴシティ アドベントカレンダー 60133” http://amzn.to/2entbtC

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/ より。)

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

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

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

今日のさえずり: 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 コードを書くとか、不慣れなことをした。