nDiki : HTML
HTML (HyperText Markup Language)
関連情報
Perl モジュール
- HTML::PopupTreeSelect
- ディレクトリツリーなどのツリー構造のノードを選択させるウィンドウをポップアップさせるためのモジュール。
- Template Toolkit
HTML への変換
スポンサード リンク
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
CSS の微調整が必要なら 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 版も作っておける。
今日のさえずり: 10:30 にお腹が空くのなんとかしたい
2013年12月16日
- 09:28 着席。 (@ 株式会社ミクシィ (mixi, Inc.)) http://4sq.com/19rvy7N
- 10:40 10:30 にお腹が空くのなんとかしたい。
- 11:20 ちょっとしたスライド作るの、 Markdown で書いて pandoc で reveal.js なページ生成するのが良さそげ。
- 11:28 @yusukebe プレゼンテーション用のスライド HTML 版と、素朴な HTML 版両方生成できるといいなと思ったのでした。でも実際のところ書き分けた方がいい気もしてきました。
- 11:32 @yusukebe あ、pandoc お使いになったことあるんですね。自分も試してみまーす。
- 11:36 @yusukebe イイネ！ 実績があると心強いです!
- 14:25 前に home に入れた GHC + Haskell Platform で Cabal したら pandoc あっさりはいって、 Markdown ファイルから reveal.js な HTML ファイルに変換できた。
- 17:44 クリームパン補充。
- 19:44 ALTER TABLE / “MySQLでカラムやインデックスの追加、削除をするときのロックの話など - (ﾟ∀ﾟ)o彡 sasata299's blog” http://bit.ly/1fguvZ0
- 19:44 ALTER TABLE / “漢(オトコ)のコンピュータ道: ALTER TABLEを上手に使いこなそう。” http://bit.ly/1jaT3It
- 25:38 “プレゼンテーションスライドを Markdown で書いて pandoc で reveal.js なページを生成する” http://bit.ly/1bKMWEm
2014年4月3日 (木)
iOS デバイス + iThoughts でマインドマップ書いて Plack 使って Web ブラウザで見る
マインドマップで頭を整理するのに久しぶりに iPad 2 を持ち出した。今まで使ったマインドマップソフトの中では iThoughts / iThoughts HD が一番。iPad は今のところこのアプリと YouTube (と FaceTime とチェインクロニクル)のために外せないデバイスである(逆にいうとこれ以外ではそれほど使い道がない)。
iThoughts でマインドマップ書いてて保存・同期したら、すぐ Web ブラウザで見られる/見てもらえるように
という流れを作っておいてあって便利。iThoughts は保存時に PNG ファイルと Markdown ファイル両方自動的に出力するようにできる。なので Dropbox で同期したディレクトリを Plack::App::Directory::Markdown で見られるようにしておけば、そのまま PNG ファイルで見たり他の Markdown ファイルにインラインで埋め込んだり、iThoughts 自身が吐いた Markdown ファイルを HTML 形式で見たりできる。
2014年7月10日 (木)
Emacs markdown-mode 設定していなかったので設定した
Markdown ファイルに色がつくだけでもまず良い。
公式サイトから markdown-mode.el をダウンロードし、設定ファイルに
(autoload 'markdown-mode "markdown-mode"
"Major mode for editing Markdown files" t)
(add-to-list 'auto-mode-alist '("\\.markdown\\'" . markdown-mode))
(add-to-list 'auto-mode-alist '("\\.md\\'" . markdown-mode))
としておけばまずは OK。standard Markdown (SM) ではなく GitHub Flavored Markdown (GFM)*1 で書いているならば markdown-mode のかわりに gfm-mode を使う。
外部コマンドを呼んで HTML ファイルに変換して preview とかする機能もあるのだけれど特に使うことなさそうなのでスルー。
2014年9月7日 (日)
旅行日程立てるのに WorkFlowy が便利
今度の旅行の旅行日程を昨日と今日で作成。交通機関や観光スポットの Web サイトで時刻表やら何やらをチェックし、その URL をメモしつつ回る順番や時刻をこねくり回すのにアウトライナーの WorkFlowy が重宝した。
順番の入れ替えも簡単だし、流れを見る時は各リストを畳んで見渡せるし、いろいろ検討するのに良い。
そのまま旅のしおりとして当日スマートフォンからも WorkFlowy を参照できるのだけれど、小さい画面だと深い階層のリストは操作しずらいので、日別に HTML エクスポートして Evernote にコピーしておいたりプリントアウトしたりしておくのが良さそげ。
- https://workflowy.com/
- このリンク先から登録すると通常の2倍のスペースが使えます。
(画像は https://workflowy.com/ より)
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勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成
これでようやく安心して仕様をもとに言及できるな。
2014年12月23日 (火)
HipChat で first name だけを表示するようにする
HipChat は first name と last name を要求するところがイケてないので last name を LEFT-TO-RIGHT OVERRIDE (LRO) U+202D にした。
IM によって入力方法が違ったりして U+202D の入力方法を覚えていないので HTML ファイルに書いたのを Web ブラウザで表示させてコピー&ペーストして入力。
Naney ‭!
と HTML ファイルに書いて Web ブラウザで「Naney !」と表示されているところを範囲選択しコピーし、そのあと HipChat の full name のところにペーストする。そして「!」をバックスペースで削除して保存。
2015年3月13日 (金)
サイト訪問者と運営者とのチャットを簡単に設置できる Zopim が面白い
最近はチャットでユーザーサポートを提供しているサービスが増えてきている。自分も過去チャットのサポートで解決が迅速に進んだ経験があってチャットサポートについては肯定的である。最近のチャットサポートはどうなっているのだろうと自分でも試してみたいと思い、人気が高そうな Zopim を実際に設置して試してみることにした。なお Zopim はカスタマーサービス・プラットフォームを提供する Zendesk に去年買収されている。
簡単に登録と設置ができた
実際にこのサイトのページの右下に出ているのがそれ。
上記のページの「SIGN UP」か「TRY ZOPIM」ボタンで登録ページへ。Name (後で変更できる) と、Email Address (後で変更できる)を入力してサインアップ。メールアドレス確認メールが届いたらそこのリンクから残りの登録ステップ済ませる。
あとはダッシュボードの「ウィジェット」のところにある HTML コードをページの HEAD 要素の中に追加すれば設置 OK。
HTML コードは PC 向けサイトでもスーマートフォン向けサイトでもどちらでも使えるのでサイト側では意識しなくて良い。 Bootstrap を使ってデザインした両対応しているページでも、Zopim もアクセスしてきたブラウザに合わせて機能してくれる。日本語も問題なく使えている。
「設置してみたのでテストしてみて」と言ったら一気に5人チャットがきて、慌てて返信してみたりした。実際にはリラックスして訪問者とやりとりするのが良さそう。
使って感じた点
- 設置
- 簡単。
- 訪問者に対して
- スマートフォンからの訪問者ともチャットできるのが良い。
- サイト運営者にとって
Zopim Lite パッケージは無料なので立ち上げたばかりのサービスや、Blog などに設置してみるのに良いと思う。
(画像は https://zop.im/press-kit より。)
2015年8月9日 (日)
reveal.js 3.1.0 用にサンプルスライドファイルを作り直し
ちょっとしたプレゼンテーションスライドはもっぱら reveal.js を使っているのですが、今日公式ページを見たら reveal.js 3.1.0 が出ていました。自分は reveal.js 2.6.2 を使っていたのですが、これを機会に reveal.js 3 に乗り換えるようと思います。2.6.2 と 3 系は一部互換性がないところがあるとのことなので、確認しつつテンプレート用途的な自分用サンプルを改めて作り直しです。
reveal.js を共有しないサンプルに変更
2.6.2 の時は
- www.naney.org 上の固定されたパス上に reveal.js が展開されている。
- スライド Markdown ファイルを HTML ファイルと同じサイトに置く(ので Markdown ファイルと HTML ファイルを分離できる)。
前提でサンプルを作りました。しかしやはり「reveal.js リリースファイルを展開したディレクトリにサンプル HTML ファイル1つを置くだけ」で済むようにしておいた方が便利そうです。なので
ことにしました。ということで以下が自分用の新しいサンプルです。
About Me
Naney (なにい)です。株式会社ミクシィでマネージャー・PO をしています。
nDiki は1999年1月に始めたコンピュータ日誌を前身とする Naney の Web 日記(兼パーソナルナレッジベース)です。ちょっとしたノートは nNote にあります。
※内容は個人的見解であり所属組織とは関係ありません。
nDiki by WATANABE Yoshimasa (Naney, Google profile)
Powered by DiKicker