nDiki : HTML5

2012年9月28日 (金)

今日のさえずり: ライブリファクタリング芸いつもすごい

2012年09月28日

[ permalink ]
[ 9月28日全て ]

2012年12月18日 (火)

今日のさえずり: 「穴があったら入らせたい。」って……

rimage:/nDiki/Flickr/8282508481.jpg

2012年12月18日

  • 06:50 RT @h_okumura: W3CがHTML5仕様策定完了を発表 http://t.co/OsIgj4gS
  • 07:26 一晩寝かせたけど HootSuite から Facebook への投稿なおっとらん。
  • 08:49 HootSuite から Facebook へ投稿、回復した模様。
  • 11:55 「穴があったら入らせたい。」って……。
  • 12:25 MUA って書かれてると心地よいし、相手に合わせてメーラーとか書いちゃう自分に電撃が走る。
  • 13:36 参拝。 (@ 金王八幡宮) http://t.co/YqnGtexT
  • 14:05 RT @nissen: 憎しの光も、その発射台の密閉型宇宙コロニーもお取扱いございません。何卒ご了承下さい。スミス RT @Yenxing20 ニッセン様におかれましてはソーラ・レイも扱われているのですか。残念ながら平生のツイートを拝見しておりますと「それくらい扱っている ...
  • 14:05 「最初からイジリー岡田に似てると思ってましたよ。」って、今朝べつの人から言われた。
  • 14:08 スマートフォン対応ハンドクリーム欲しい。
  • 14:14 全日本柔拳連盟。 http://t.co/f7wDT6FH
  • 17:42 今度はやまもといちろう氏に似ていると言われた。
  • 17:43 若い頃は床屋のマスターに細川護熙氏に似ていると言われました。
  • 17:44 陶芸家です。
  • 21:42 RT @maru_kei: @Naney 日本人なだけいいじゃん。高校時代、デストラーデ(西武ライオンズ)に、似てるって言われたよ。自分でも納得したけど(笑)
  • 21:45 @maru_kei 画像検索してみました。似ているといえば似ているのかーぐらいな感じですねぇ。
  • 21:48 「芸能人なら北川とか鈴木ですかねぇ」と言われて駅で別れたので、検索してみたらオリックスがヒットした。野球人?
  • 22:01 今日アルバイトさんに衝撃の自己開示をされて、危うくこちらも何かポロリしそうになった。
  • 23:00 「北川景子」と「鈴木えみ」とのこと。Google トレンド的には近年は前者の方が話題の模様。
  • 23:30 第1食堂「けやき」がバイキングになっていたの驚きだし、錦電サービスが Web サイト開設していることがもっと驚き。 http://t.co/CaFgjRGv
[ permalink ]
[ 12月18日全て ]

2013年2月3日 (日)

nDiki のサイドバー無くした

nDiki(この Web 日記)では長らく右にサイドバーのある2列レイアウトにしていたんだけれど、昔みたいな「ブログパーツ!」みたいな時代でもとうに無くなっているし、簡単な自己紹介と直近の Tweets を載せているぐらいだったので、バスッと消すことにした。

時代はスマートフォンだしね (スマートフォン向けにまではスタイルシートを修正していないから、まだまだ最適化されていないけど)。

あと昔貼った Facebook ソーシャルプラグインの挙動が変になってきたので、HTML5 用の新しいのに変えた。多少ましになったかな。

時代とともに仕様もデバイスもトレンドも変わっていってしまうから、長く継続していくにシンプルにしてメンテナンスコストを抑えよう。

[ permalink ]

今日のさえずり: 「80歳の頃が懐かしい。」

2013年02月03日

  • 08:02 業界が 恵まれたいのよ 恵方巻
  • 08:32 ドキドキはちょい時差で観ます。
  • 09:19 ドキドキ!プリキュア、王道感あって良かった。
  • 09:42 @maru_kei L2TP/IPsec って自分は使うかなーと思って調べたら、スマートフォンからの VPN 接続で使うというシチュエーションがありますね。
  • 09:52 RT @maru_kei: @Naney NEC、コンシューマー用ルータでl2tp/ipsecに対応すると言って随分経つけど、いつまでも製品が出ないので買い換えられないです。
  • 11:11 レンジフードのフィルター交換。2カ月に1度はがっつり拭いた方が良さそげ。
  • 12:12 豆まいた。
  • 12:52 先週に引き続き、ふさかけ設置。
  • 12:52 洗面所のフィルターも交換。
  • 14:07 おしゃれキャット観る。マリーのやつ。 http://t.co/agxSg1Pq
  • 14:10 「80歳の頃が懐かしい。」
  • 15:45 マリーの映画、ジャズ映画だった。
  • 15:48 閉店間際の恵方巻投げ売りに期待が高まる。
  • 19:14 昨日の陽気で花粉本気出しましたね?
  • 23:06 昔貼った Facebook ソーシャルプラグインの挙動が変になってきたので、HTML5 用の新しいのに変えた。
[ permalink ]
[ 2月3日全て ]

2013年12月16日 (月)

プレゼンテーションスライドを Markdown で書いて pandoc で reveal.js なページを生成する

ちょっとした勉強会などの資料は Markdown とかで軽く書いて、Web ブラウザでプレゼンテーションするための HTML ファイルと、参照用のシンプルな HTML ファイルを生成したいなと思ってちょっとチェックしてみた。pandoc を使うと Markdown から reveal.js を使ったスライドページを作れるし、普通に HTML5 なページにも変換できるので良さそげ。

pandoc をインストール

pandoc は Haskell で書かれている。 GHC + Haskell Platform が入っている環境なら 

 cabal update
 cabal install pandoc

を実行すればインストールできる(Fedora 17 の home 以下に GHC + Haskell Platform をインストールした時のメモ)。Debian GNU/Linux sid にも pandoc Debian パッケージはあるのだけれど、まだちょっと古めなので cabal で入れた。

スライド原稿を用意する

 mkdir pandoc-sample
 cd pandoc-sample
 emacs source.md

してサンプルを Markdown で書く。

できたら reveal.js をとってくる。 

 git clone https://github.com/hakimel/reveal.js.git

スタイルシートの微調整が必要なら reveal.js/css/reveal.min.css に手を入れる(自分の場合 text-align: center を left にしたり、.reveal h<n> のサイズを小さくしたりする)。

reveal.js な HTML を生成する

 ~/.cabal/bin/pandoc -s -t revealjs -V theme:default -o slide.html source.md

でスライド HTML ファイルが生成される。

HTML のテンプレートを変更したい場合は、例えば 

 cp -a ~/.cabal/share/pandoc-1.12.2.1/data/templates/default.revealjs .

とコピーしてきて編集後、 

 ~/.cabal/bin/pandoc -s -t revealjs -V theme:default --template=default.revealjs -o slide.html source.md

とする。

シンプルな HTML5 版を生成する

 ~/.cabal/bin/pandoc -s -t html5 --toc -c /path/to/bootstrap.min.css -o doc.html source.md

などとしてシンプルな HTML5 版も作っておける。

[ permalink ]
[ 12月16日全て ]

2013年12月31日 (火)

2013年日記まとめ

mixi日記で2013年の月毎のふりかえりを書いている人がいていいなあと思ったので日記まとめという形で今年の1年をふりかえり。

1月 再び毎日日記を書こう

rimage:/nDiki/Flickr/8358153206.jpg

再び毎日日記を書こうということで数年前まではほぼ欠かさず1日1記事書いていた Web 日記を毎日書くことにした。結果継続成功! 来年も続ける。

正月休みは3年ぶりに IKEA に行って、ダイニングテーブルを新調。ちょっと高さが高いかなという声もあるけれど結構満足している。IKEA は11月にも行って今年2度。

仕事始めは氷川神社への初詣からスタート。今年は本厄だからというわけではないけれど厄除け含めて結構ちょくちょく神社へ行った感じがする。なんか落ち着くんだよね。

1月には久しぶりに東京タワーも上った。昔ながらの土産店も健在だったので嬉しい。来年はまだ行っていないスカイツリーに行きたい。

2月 20年の時を経てソバアレルギー無罪判決

rimage:/nDiki/Flickr/8457649052.jpg

20年の時を経てソバアレルギー無罪判決。ソバアレルギーだと思ってずっと生きてきたのだけれど実は違ったことが判明! 残りの人生で蕎麦を食べられるようになった。でも今年数回しか食べてないな。ずっと食べてこなかったから口が欲しがらないというのもあるんだよね。来年はおいしい蕎麦を食べてみたい。

それから仕事で使うキーボードを Happy Hacking Keyboard Lite から ThinkPad USB トラックポイントキーボード(英語)に交換。打鍵のストレスが減ったので良かった。今年はワイヤレス版が出でるのでずっと欲しいと思っているのだけれどちと高いんだよね。50%オフになるのをずっと待っている(40%オフまではセールになることがある)。

2月にはチームに優秀なエンジニアが join。ハイパフォーマー。

3月 煙霧

rimage:/nDiki/Flickr/8545735187.jpg

税務署で初めての確定申告。3月10日には大騒ぎになった煙霧。東京生活長いけれどこんなの初めて。

あと3月末にはサントリーホールのオープンハウスへ。なかなか上がる機会のないステージに上がった。年に1回あるので来年もぜひ。

去年末から取り入れていたポモドーロテクニックは3月中旬に止めることにした。学ぶことはあったけれども、自分のワークスタイルには合わなかった。

Android の日本語入力は3月に ATOK から Google 日本語入力に変えた。入力補正が秀逸でとても捗る。iPod touch 5th を8月に買ったんだけれど、やっぱり日本語入力環境は圧倒的に Android の方が上。

ツールといえば WorkFlowy というオンラインアウトライナーサービスを使い始めた。その後ずっと使っていて、今年出会った当たりサービス。お薦め。

3月29日には PerlCasual に参加。今年行った勉強会系は YAPC::Asia Tokyo 2013 以外だと

あたり。

4月 宇宙戦艦ヤマト2199テレビ放送開始

rimage:/nDiki/Flickr/8688132001.jpg

4月6日で Twitter を使い始めて6年。一番気楽。ただフィードバックは mixi > Facebook > Twitter > Google+ な印象。 アイコンを近影に変更した。

4月7日(日)から宇宙戦艦ヤマト2199のテレビ放送が開始。週末の楽しみとなった。やっぱり宇宙戦艦ヤマトいいわー。来年はオリジナルの宇宙戦艦ヤマトを DVD レンタルして全話観るぞ。

4月16日にはミクシィ歴3年目突入。

レジャー的にはゴールデンウィークに国立科学博物館附属自然教育園へ。穴場スポット。新緑の季節にまた行きたい。

5月 フレッツ光へ

rimage:/nDiki/Flickr/8708789759.jpg

ゴールデンウィークに風邪をひいてしまったのでパズドラとケリ姫スイーツをやり始めた。これがきっかけで今年はスマートフォンゲームアプリをちょこちょこやるように。長続きしているのはチェインクロニクルとモンスターストライク。チェインクロニクルはストーリーと世界観がしっかりしていてロールプレイングゲームらしいゲームで非常に良くできている。モンスターストライクはマルチプレイができる点が新しくまだまだ伸びそう。

5月4日には国立科学博物館。1回じゃ全然みきれない。何度もリピートする必要あり。

自宅ネットワーク的にはようやくフレッツ・ADSL からフレッツ光へ変更。ワイヤレスブロードバントルータも10年以上ぶりに新しいものにかえて YouTube がストレスなく快適に見られるようになった。素敵。

新調と言えば今年は NEX-5N 用としてEマウント用広角パンケーキレンズ E 20mm F2.8 SEL20F28 を買った。今年買ったレンズはこれ1本。NEX-5N につけると気軽に持ち出せるようになるので、結構重宝している。手ブレ補正まで入っていれば夜も持ち出せるんだけどね。

6月 15年ぶりの東京ディズニーランド

rimage:/nDiki/Flickr/8987108074.jpg

15年ぶりの東京ディズニーランド。健歩大会さまさま。トムソーヤ島が探検ぽくて意外と面白かった。来年はディズニーシーへ行くぞ。

久しぶりに献血をしようと思ったところなんと貧血で見送り。以前からではあるけれども、秋の健康診断でも「貧血疑 要経過観察」となっていたので引き続き注意。あとなんと「左腎結石(症) 要経過観察」という診断結果もセットで出たのでより健康には注意しなくちゃ。

あと生活的には妻が Xperia A でスマートフォンデビューしたというのが大きな変化。spモードメールにかえて LINE で連絡を取るようになったり Google カレンダーの共有を果たしたりといろいろ便利になった(自分的に)。

7月 隅田川花火大会大波乱

rimage:/nDiki/Flickr/9281038482.jpg

Haskell をやりかけたけどすぐ飽きた。

「おさわり探偵 なめこ栽培キット」を始めたのも7月。最近は起動するとたいがい枯れてる。

7月中旬にはコンタクトセンター・アワード 2013 全申請発表会を見に。ビューティフル・ドリーマーの話が印象に残っている。

7月のお祭は、桜新道の盆踊り大会。今年初めて行ってきた。あとは行かなかったけれど今年の隅田川花火大会は土砂降りで大波乱だったねー。

8月 iPod touch 5th 購入

rimage:/nDiki/Flickr/9426414843.jpg

8月中旬からチームにインターンがやってきた。最初にさわったのが Windows XP という。想像以上に飲み込みがはやく優秀だった。青春の夏休みに我々のインターンシップを選んでくれてありがとう!

8月のお祭りは天祖・諏訪神社。巡行だけじゃなくて夜のお参りも済ませた。今年はちょっとずついろいろやれることが増えてきたなー。あと大井どんたくも例年通り。

iPod touch 5th を買ったのも8月。iOS アプリをいろいろ試せるようになったのは収穫(iPad 2 しか持っていなかったので)。Android 端末より電池がよくもつのでサブ機としていいんじゃないかな。チェインクロニクルを始めたのは iPod touch 5th を買ったせい。今は iPad 2 と2台でやっている。

ネットサービスとしては TeamGantt を使い始めたのだけれど、使い勝手はまずまずなのだけれどフルに使うわけでもなかったので解約。もうちょっと安ければ維持してもとは思ったんだけれども。

月末には初めてアーバンドック ららぽーと豊洲へ行った。「らーらぽーと」のサウンドロゴは昔の音程の高いのが好き。

9月 よこはまコスモワールド

rimage:/nDiki/Flickr/9754213855.jpg

iPod touch で QWERTY 配列だと小さくて厳しいのでフリック入力を練習し始めるも習得ならず。今も QWERTY。

9月の外出はよこはまコスモワールド。ファミリー・バナナ・コースターにライド。

あと YAPC::Asia Tokyo 2013 は例年通り参加。

10月 大井競馬場

rimage:/nDiki/Flickr/10268741013.jpg

雨で行きそびれていた東京シティ競馬のトゥインクルレースをようやく見に行けた。すごくロマンチックで興奮した。

それと10月はキャッシュカード・クレジットカードの暗証番号を一斉変更。 IC チップ付きのカードの暗証番号変更は要返却というの結構ネック。

11月 Remember The Milk から Google Tasks に

rimage:/nDiki/Flickr/10643286184.jpg

ネルフからエンジニアが配属された。今年は CS 開発はエンジニア2増1減。来年もさらにチーム力を高めて一丸となって CS 向上に取り組んでいきたい。

アイテム的には今年後半バンナイズに注目。301プラスはスマートフォンを持ち歩くのにばっちりで重宝している。

個人的にはタスク管理ツールを Remember The Milk から Google Tasks に変更したのも大きな出来事。やはりサブタスクが使えるとブレークダウンするのに便利。Remember The Milk がサブタスクをサポートしないかなあ。

レジャー的には久しぶりのプラネタリウム。五反田文化センタープラネタリウムで星空投影を鑑賞。リーズナブルなのが嬉しい。

12月 喜正を呑む

rimage:/nDiki/Flickr/11235583524.jpg この Web 日記(nDiki) を Bootstrap 3 ベースに変更。スマートフォンでも見やすくなったし更新するモチベーションもアップ。

自分の名前と同じ綴りの酒をついに買って呑んだ。マジめでたいので正月にも呑もう。

今年のイルミネーション鑑賞は目黒川で。夜桜を楽しんだ。

ツールとしては pandoc に出会った。Markdown で書いえ reveal.js なプレゼンテーション用 HTML5 ファイル生成できる。発表系はしばらくこれを使いたい。

まとめのまとめ

年末にざざっとまとめをすると、どうしても行ったところとかまとめやすいのに偏るね。あと後半力尽き気味。(HootSuite + IFTTT の話題のような)数カ月に渡るものや、じっくり考え直す系のものは取り上げそびれた。

あとまとめていると「やはり書いていないことはふりかえり対象にもあがってこず記憶から薄れていく/消されていく」という背筋の寒さを感じる。プライベートや仕事での出来事や思いなど、Web 日記には載せないことをどう書き留めていくか最近考えている。今年は Web 日記継続の習慣が復活できたので、来年はそちらにも力を入れたいな。

なにはともあれ今年一年も良い年でした。ありがとうございました。

[ permalink ]
[ 12月31日全て ]

2014年3月14日 (金)

Day One のエントリを Web ページ化するサービス Publish

image:/nDiki/2014/03/14/publish-shares.jpg

日記アプリ(ジャーナルアプリ)の Day One が今週 Publish というサービスを開始した。

https://dayone.me/

Day One アプリのエントリ画面の右下の Publish のボタンを押した後の画面で「Publish」を押すとそのエントリが Publish のサーバにアップロードされて HTML5 形式になったページが公開される。

もともとプライベートのジャーナル用のアプリなので、公開サービスと連携させるのはちょっとどうなのかと思いもしたけれど、試したところ明示的に Publish したエントリがそのタイミングのみでアップロードされ、勝手に何でも同期されてしまうわけではない感じだ。そういう意味での懸念は大丈夫そう。

Publish したページは以下のような感じ。

整形済みブロックは Day One アプリ上とは違い改行が反映されず auto wrap となる。また今のところ画像がインラインで表示されないとう制約がある。

Publish したページにはアカウントのプロフィールが表示されるけれども、そのアカウントで Publish したインデックスページはないので、基本独立したページができていく感じになる。

位置付け的には Evernote の共有ノートに近い。Markdown で書ける点や、公開ページへの反映を明示的にできる点で Publish の方が個人的には使い勝手がいいと思う。

エントリデータのオリジナルはあくまでもアプリ(と同期をとっている Dropbox 上など)にあり、ネットサービス側にはアップロードで送るという形式は、サービス終了で大切な日記が消えてしまうといった不安感が無くていいな。

SNS の日記アプリもこんな感じでプライベート日記の一部をアップロードする形だといいと思う。Publish だと公開したものを Twitter・Facebook・foursquare でシェアできるけれどもページ自体は全体公開なので、そこをその SNS 内向け公開にできるようなイメージのもので。

「mixi日記や Twitter・Facebook など」と「Blog や Web 日記など」との間あたりのポジションで、両方使っていると利用シーンがちょっと少ないかもとは思う。ただそれらと比べて(機能的にも心理的にも)カジュアルに更新をかけられるので、リアルタイムにアップデートしていくようなイベントエントリを書くのに使うのにいいのかなと思う。

ノート:

  • Publish したエントリについて「Remove Publish Page」をすると公開ページを消すことができる。その後同じエントリを再度 Publish した場合は別の URL が割り当てられる(通常の Update による更新の場合は URL は変わらない)。
  • Publish したエントリについて Publish したページを消す前に、エントリを消してしまうと Publish したページを消す手段が無くなってしまうので注意(Dropbox 上でエントリに対応するファイルを復元して Day One アプリ上で復活させ、Remove Publish Page してからあらためてエントリを削除しなおした)。 → Publish の Web サイトでサインインすれば削除可能だった。

(画像は https://dayone.me/publish より)

[ permalink ]
[ 3月14日全て ]

2014年5月9日 (金)

今日のさえずり: 東京タワーキレイだな。やはり東京スカイツリーより良い。

2014年05月09日

[ permalink ]
[ 5月9日全て ]

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日全て ]

2014年10月29日 (水)

今日のさえずり: 一部工事中

2014年10月29日

[ permalink ]
[ 10月29日全て ]

2014年10月30日 (木)

HTML5 がついに W3C の勧告(Recommendation)になっていた

HTML5 がついに W3C の勧告(Recommendation)になっていた。

014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。-- http://www.w3.org/2014/10/html5-rec.html HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成

これでようやく安心して仕様をもとに言及できるな。

[ permalink ]
[ 10月30日全て ]
Naney の Web 日記 nDiki について・月別インデックス

About

Naney Naneymx

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

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

Process Time: 0.023494s / load averages: 0.42, 0.32, 0.23