nDiki : JavaScript

JavaScript

web

関連情報

デバッガ

インタプリタ

単体テスト

開発環境

スポンサード リンク

2013年5月11日 (土)

今日のさえずり: 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回限りとかだと「また読ませて。」っていうのには対応してなさそうですね……。
[ permalink ]
[ 5月11日全て ]

2013年11月6日 (水)

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

2013年11月06日

[ permalink ]
[ 11月6日全て ]

2014年8月7日 (木)

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"));

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

[ permalink ]
[ 8月7日全て ]

2014年10月28日 (火)

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; }
[ permalink ]
[ 10月28日全て ]

2016年10月17日 (月)

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

2016年10月17日

[ permalink ]
[ 10月17日全て ]

2016年10月30日 (日)

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

https://www.naney.org/nDiki/2016/10/30/Deckset.jpg

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

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

スライドを書く

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

[ permalink ]
[ 10月30日全て ]

2017年11月5日 (日)

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

Roofpig

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

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

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

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

[ permalink ]
[ 11月5日全て ]

2018年2月26日 (月)

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

ノート/メモははライティングアプリ 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

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

[ 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日

[ permalink ]
[ 10月30日全て ]

2019年6月26日 (水)

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

2019年06月26日

[ permalink ]
[ 6月26日全て ]

About Me

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

nDiki は1999年1月に始めたコンピュータ日誌を前身とする Naney の Web 日記(兼パーソナルナレッジベース)です。ちょっとしたノートは nNote にあります。

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

月別インデックス
Process Time: 0.080971s / load averages: 0.26, 0.30, 0.26
nDiki by WATANABE Yoshimasa (Naney)
Powered by DiKicker