C#、ASP.NET、TypeScript、Angular を中心にプログラミングに関した話題を諸々。
by @jsakamoto
検索
リンク
北海道のITコミュニティ - CLR/H 無聊を託つ
タグ
カテゴリ
最新の記事
ASP.NET Core で..
at 2019-07-06 23:02
Azure Storage ..
at 2019-06-09 13:15
node のバージョンあげた..
at 2019-05-24 19:43
.NET HTTP REPL..
at 2019-04-23 00:19
C# プログラムでの Exc..
at 2019-03-31 22:44
最新のコメント
Windows Upda..
by mtakama at 12:06
同じ問題で悩んでいました..
by yonas at 12:32
Mac(Chrome)で..
by Macユーザー at 00:46
すみません、記事書きかけ..
by developer-adjust at 22:36
続きはないんですか?
by hanamo at 13:03
助かりました。ありがとう..
by あああ at 21:32
いえす、F#! F#! :)
by developer-adjust at 21:46
F#はAzure Not..
by 幻のK泉さん at 18:37
> 今、Setcronj..
by developer-adjust at 08:25
今、Setcronjob..
by Kibe at 03:23
記事ランキング
最新のトラックバック
Web API における..
from 松崎 剛 Blog
[Other]Code2..
from KatsuYuzuの日記
Developer @ ..
from .NET Clips
asp.netでrail..
from 4丁目より
F#でASP.NET M..
from ナオキにASP.NET(仮)
[B!] これはいい h..
from Twitter Mirror
[報告] Microso..
from .NET Clips
Developer @ ..
from .NET Clips
[F#]F# でブログア..
from 予定は未定Blog版
ASP.NET MVC ..
from ナオキにASP.NET(仮)
以前の記事
2019年 07月
2019年 06月
2019年 05月
2019年 04月
2019年 03月
2019年 02月
2019年 01月
2018年 12月
2018年 11月
2018年 10月
2018年 09月
2018年 08月
2018年 07月
2018年 06月
2018年 05月
2018年 04月
2018年 03月
2018年 02月
2018年 01月
2017年 12月
2017年 11月
2017年 10月
2017年 09月
2017年 08月
2017年 07月
2017年 06月
2017年 05月
2017年 04月
2017年 02月
2017年 01月
2016年 12月
2016年 11月
2016年 10月
2016年 09月
2016年 08月
2016年 07月
2016年 06月
2016年 05月
2016年 04月
2016年 03月
2016年 02月
2016年 01月
2015年 12月
2015年 11月
2015年 10月
2015年 09月
2015年 08月
2015年 07月
2015年 05月
2015年 04月
2015年 03月
2015年 02月
2015年 01月
2014年 12月
2014年 11月
2014年 10月
2014年 09月
2014年 08月
2014年 06月
2014年 04月
2014年 03月
2014年 02月
2014年 01月
2013年 12月
2013年 10月
2013年 09月
2013年 08月
2013年 07月
2013年 06月
2013年 05月
2013年 04月
2013年 03月
2013年 02月
2013年 01月
2012年 12月
2012年 11月
2012年 10月
2012年 09月
2012年 08月
2012年 07月
2012年 06月
2012年 05月
2012年 04月
2012年 03月
2012年 02月
2012年 01月
2011年 12月
2011年 11月
2011年 10月
2011年 09月
2011年 08月
2011年 07月
2011年 06月
2011年 05月
2011年 04月
2011年 03月
2011年 02月
2011年 01月
2010年 12月
2010年 11月
2010年 10月
2010年 09月
2010年 08月
2010年 07月
2010年 06月
2010年 05月
2010年 04月
2010年 03月
2010年 02月
2010年 01月
2009年 12月
2009年 10月
2009年 09月
2009年 07月
2009年 06月
2009年 05月
2009年 04月
2009年 03月
2009年 02月
2009年 01月
2008年 12月
2008年 11月
2008年 10月
2008年 09月
2008年 08月
2008年 07月
2008年 06月
2008年 05月
2008年 04月
2008年 03月
2008年 02月
2008年 01月
2007年 12月
2007年 11月
2007年 04月
2007年 03月
2007年 02月
2007年 01月
2006年 11月
2006年 10月
2006年 09月
2006年 08月
2006年 07月
ファン
ブログジャンル
画像一覧
2013年 06月 29日

MarkdownPresenter

markdown記法のテキストをブラウザ上でスライド表示

以前の投稿でも紹介した MarkdownPresenter

markdown 記法で書き記したテキストファイル "presentation.md" を AJAX で読み込み、プレゼンテーション用にスライド形式で Web ブラウザに表示してくれる HTML + JavaScript だ。

この Markdown Presenter について、もう少し紹介しておきたい。

クイックスタート for Windows

Markdown Presenter は、Webブラウザ上で動作するので特定のプラットフォームに縛られない。
ただし、あとでも再び触れるが、何かしらの HTTP サーバー上に配置する必要がある。

その点、Windows7 以降の Windows OS であれば、下記手順で簡単に Markdown Presenter を手元の PC で動かしはじめることができる。
  1. 下記から Markdown Presenter の Zip ファイルをダウンロード。
    https://github.com/jsakamoto/MarkdownPresenter/archive/master.zip
  2. ダウンロードした Zip ファイルのプロパティウィンドウをエクスプローラで開き、[ブロック解除] しておく。
  3. ダウンロードした Zip ファイルを適当なフォルダに解凍。
  4. 解凍した先のフォルダに「start-presenter-for-windows.bat」というファイルがある。
    これをダブルクリックして実行。
  5. すると既定のブラウザで Markdown Ppesenter によるスライドが表示される。
  6. 「presentation.md」をテキストエディタで編集して保存後、ブラウザでスペースキーを押せば、再読み込みされて即反映される。

シンプル

このように、Web ブラウザ(と何らかのHTTPサーバへの配置)さえあればそれで動作する、シンプルさが特徴だ。

先に書いたとおり、markdown 記法のテキストをスライド形式にブラウザ上に表示する仕掛けは、そのブラウザ上の HTML と JavaScript によるものである。

別のプログラムによって、事前に markdown ファイルから HTML "ファイル" に "書きだし" ておくような「コンパイラ」タイプではない。
よって、Ruby や Python 等々のプログラミング環境やランタイムがなくても動作する。

瞬時に markdown テキストの変更を反映

元となる markdown テキストを書き換えても、Markdown Presenter でその markdown テキストを開いているブラウザでリロード (F5) するだけで即時に反映されるのである。

さらに特別に用意された再読み込み用のキーボードショートカットとして Space キーを押せば、HTML や JavaScript をまるごと再読み込みするのではなく、markdown テキストだけ AJAX で取得しなおすので、瞬時に更新可能だ。

タッチデバイス・モバイルデバイス対応

今どきなら当然(?)なのかもしれないが、iPhone や iPad、Android や Windows8 といった、タッチデバイス/モバイルデバイスにも対応している。

スワイプでページを前後することができるのはもちろんのこと、スマートフォンであればブラウザのアドレスバーを自動で非表示にする定番のギミックも入っている。



slideshare.com への投稿は?

この種の markdown → HTML 変換系のプロダクトだと、作成した出来上がったスライド (HTML) を slideshare.com にアップロード・共有したい場合はどうしたものだろうか?

幸い、Markdown Presenter では slideshare への掲載を考慮済みだ。

ブラウザの印刷機能を使って PDF 形式に印刷してから、その PDF ファイルを slideshare にアップロードすればよいのである。

Windows OS であれば CubePDF のような PDF ファイルに保存できるプリンタアプリケーションをインストールして使うのもよいだろう。

Google Chrome ブラウザであれば、Ctrl + P を押して表示される印刷ダイアログから、印刷先のプリンタの選択肢で「PDFへの保存」を選べば PDF 化が可能だ。



なお、ブラウザの印刷設定を、以下のように構成しておくのがよい。
- 用紙設定は横長 ( ランドスケープ )
- ヘッダ/フッタに印字される項目(印刷日時とか URL とか)をすべて削除
- マージンは無し (0)
- 背景色の印刷を有効化

Markdown Presenter では印刷を想定して HTML を生成しているので、このようなことが可能だ。

でも HTTP サーバーが要るんでしょう?

ブラウザ上の JavaScript では、ローカルファイルシステム上では外部 markdown テキストファイルを読み込める手段はない。

これはセキュリティ上の制限だ。
この制限がないと、ブラウザ上の JavaScript から、あなたの PC 内のファイルを吸い上げし放題になってしまう。

そこで Markdown Presenter では、致し方なく(?)、AJAX で外部 markdown テキストを読み込むようになっている。

AJAX とはすなわち、"ファイルシステムに対する I/O" ではなく、"HTTP による通信" である。

そのため、なんらかの HTTP サーバー上に Markdown Presenter を配置する必要があるわけだ。

Dropbox も使える!

Windows OS であれば、冒頭で述べたとおり、ミニ HTTP サーバーが同梱されているのであまり問題にはならなさそうだ。

また、同梱のミニ HTTP サーバーが使えない・用途や状況に合わない場合でも、F# や Python、Ruby、Visual Studio や WebMatrix などのプログラミング環境があればそれら処理系でミニ HTTP サーバーを起動したり、Apache や IIS を構成してやれば可能ではある。

しかし「なんだかそれも難しい or 面倒」という場合もあきらめる必要はない。

上手いことに、Dropbox が使えるのだ。

まず Dropbox のクライアントアプリを導入し、ローカルファイルと Dropbox とを同期するようにしておく。

次に、Dropbox の Public フォルダ(に該当する、ローカルの同期先フォルダ)以下に Markdown Presenter を配置。

この状態で "presentation.md" を編集、上書き保存すると、保存のたびにほぼリアルタイムで、Dropbox へもアップロードされる。

さて、Dropbox には Public フォルダ以下に配置したファイルについては、なんと、HTTP 経由で直に公開できてしまうのだ。
ちょっとした HTTP サーバーであるわけだ。

具体的には、ブラウザで Dropbox を開き、Public フォルダに同期した Markdown Presenter の "Presenter.html" を右クリック。
出てきたコンテキストメニューから「Copy public link」をクリックすると、公開用の URL が知らされる。
d0079457_22573195.png
この URL を改めてブラウザで開けば、Markdown Presenter が動作し始める。

このような仕掛けであれば、ローカルファイルシステムの "presenttion.md" を編集・保存、ブラウザにフォーカス切り替えてリロード、の迅速なサイクルで、プレゼンテーションスライド作成を進めていくことができる。

まとめ

以上、シンプル・軽量な Markdown Presenter、いかがだったろうか。

impress.js を使ったような派手な効果はない。
その代わりに、テキストベースでサクサクと出来上がってしまう手軽さや、できあがったあとに PDF 化して slideshare.com で共有したりできるところは魅力だと感じている。
 
by developer-adjust | 2013-06-29 23:04 | その他IT系 | Comments(0)
2013年 05月 17日

F# スクリプトでミニ HTTP サーバを立ち上げる

MrakdownPresenter

最近 MarkdownPresenter なるものをいじっている。

これは Wiki 記法的なマークアップ言語として GitHub 界隈を中心にか勢いを増している "マークダウン" 記法で書かれたテキストを、Web ブラウザ上でプレゼンテーション風のスライド表示に仕立て上げるもの。

マークダウンテキストをブラウザでスライド表示可能とするプロダクトとしては、
Ruby や Python 等々のスクリプト言語によってマークダウンテキストを HTML に変換、といったものを見かける。

その中でも、MarkdownPresenter は処理が HTML + ブラウザ上JavaScript だけで完結しているのが特徴らしい。

MarkdownPresenter は、元となるマークダウンのテキストファイルを編集/保存したら、ブラウザ表示上でスペースキーを押してリロードすればすぐ反映されるので、変換作業に手間取ることなく快調に作業が進む。

そのかわり、impress.js を使ったような派手なスライドは作れない。
テキスト主体のシンプルで渋いスライドを作るのに最適だ。

Webサーバ必須

さてそのような MarkdownPresenter なのだが、マークダウンテキストを "presentation.md" として独立したファイルとして配置し、"Presenter.html" 中の JavaScript にて AJAX で読み込む仕掛けである。

そのため、ローカル環境で作成作業中もHTTP サーバが必須なのだ。

もっとも自分の場合、Windows OS 上での作業となるのだが、Visual Studio や WebMatrix などがあるため、このことが問題とはならない。

WebMatrix がインストールされていれば、Windows エクスプローラでフォルダを右クリックすると、"このフォルダを WebMatrix で開く" というメニューがあるくらいだ。

作業中のフォルダでこのメニューをクリックすればそのフォルダが WebMatrix で開かれ、そのまま WebMatrix の "実行" をクリックすれば、内蔵の Web サーバ ( IIS Express ) が起動して Presenter.html を http 経由でお好みのブラウザによる閲覧開始となる。

そのほかにもインターネット接続が前提でよければ DropBox を簡易Webサーバとして活用する方法もあるし、実質困ることはないだろう。

ちなみに、MarkdownPresenter の GitHub リポジトリの README を読むと、"Installing" の節に、IIS や IIS Express を設定する方法のほか、Python がインストールされている環境であれば
python -m SimpleHTTPServer
で簡易 Web サーバが立てられる説明もあった。

Python で簡易サーバが立てられるなら...

実は Python でこれほどまでに容易に簡易Webサーバを立ち上げられるのは知らなかった。

そういえばと思いだしたのが、Ruby にも WEBrick なるものがあって、簡易にWebサーバが立ち上げられたはず。
ネットで検索して、以下のワンライナーを見つけた
> ruby -rwebrick -e 'WEBrick::HTTPServer.new({:DocumentRoot => "./"}).start'
と、ここまできて、F# スクリプトで簡易Webサーバを立てるとなるとどうなるか? ということを思いついた。

F# スクリプトで簡易Webサーバ

結論としてはこんな感じ。
ワンライナーで書けるほど抽象度を上げたコンポーネントは .NET Framework 標準にはない。

とはいえ、.NET 標準の HttpListener クラスによって結構な量の処理がカプセル化されており、上記程度のコードで記述できる。

早速にコマンドライン引数の解析処理も書き加えて httpd.fsx として仕上げ、F# scripts for command line の一員に加えた。

F# スクリプト実行のための環境設定が整備されていれば(過去投稿1過去投稿2 参照)、最短で、
> httpd
とコマンドプロンプトから実行するだけで、カレントディレクトリの内容が http://localhost:8080 経由で HTTP プロトコルにて公開されるようになる。

ポート番号の指定など、コマンドラインオプションの詳細は GitHub リポジトリに登録してある README を参照のこと。

なお、ポート80番や、* による外部コネクションの受付を行うには、「管理者として実行」として管理者権限でないと例外になるようなのでご注意を。

おまけ

コマンドラインオプション解析の実装は、以前に引き続き、今回もなかなか頭を捻らされた。
これはこれで面白い F# ネタではあるのだが、それはまたの機会に。
 
by developer-adjust | 2013-05-17 23:18 | .NET | Comments(0)
2012年 05月 31日

ASP.NET Webサイト上で Markdown な .md ファイルを表示する

はじめに - Markdown とは?

Markdown とは、Wiki などで用いられるような、軽量マークアップ言語である。
Markdown 書式で記述した内容を、なんらかのプロセッサに読み込ませて、結果として HTML を生成してブラウザに表示、なんていう用途で使われたりする。

たとえば、Markdown 記法で記述した下記のようなテキスト(文字列)を、
# This is Heder-Level1
- List Item-A.
- List Item-B.
しかるべき Markdown プロセッサを通せば、
<h1>This is Heder-Level1</h1>
<ul>
<li>List Item-A.</li>
<li>List Item-B.</li>
</ul>
なんていう HTML が手に入る寸法だ。

.NET Framework 環境においても、この Markdown のプロセッサライブラリが公開されている。
有名どころとしては、MarkdownSharp や、MarkdownDeep などがあるらしい。

...ところで ASP.NET Web API の "help page" について

さてとろこでちょっと話は変わるが、このブログでも度々取り上げている
ASP.NET Web API
について。

まさしく "Web で API を公開する" にはうってつけのこの機能。
しかし、少なくともβ段階の現時点では、"help page" 生成は実装されていない。

"help page" とは、すなわち、API の使い方についてのドキュメントだ。
API コントローラクラスを .NET のリフレクション機能で実行時に動的に探索したり、XML ドキュメントコメントを解析すれば、APIの一覧、引数、説明文などを掲載した Web ページを自動生成できるはず、というわけだ。

下記ブログに "今はまだ" 実装してないよ、的なことが書かれているっぽい。

Will ASP.NET Web API support a test client and help page generation?
http://blogs.msdn.com/b/bryang/archive/2012/02/21/asp-net-web-api.aspx

なおすでに、多少のコードを自分で配線して、help page を自作する話題がブログ投稿されている。

ASP.NET Web API: Generating a Web API help page using ApiExplorer
http://blogs.msdn.com/b/yaohuang1/archive/2012/05/21/asp-net-web-api-generating-a-web-api-help-page-using-apiexplorer.aspx

...で、それと Markdown の関係は?

話が長くなってしまったが、実装・公開した ASP.NET Web API サイトに、その Web API の使い方・ドキュメントを掲載しようと思ったの発端。

上記のような全自動 help page を自作搭載してもよかったのだが、もしかしたらリリース時点では ASP.NET 本家本体による help page サポートが実装されるかもしれない。

取り急ぎ、Markdown でちゃっちゃっとドキュメント書いて公開できれば、それでいいのに、と考えたわけだ。

いちおう、MarkdownSharp はじめ、公開されているライブラリを使えば、たとえば .cshtml ファイル中で、
@Html.Raw(new Markdown.Transform(markdownText))
みたいな記述をすれば、Markdown 記法で書かれたテキストをHTMLに変換して出力することはできる。

しかし、今回は完全に静的なテキストを書きたいだけなのだ。

結論を言えば、
拡張子 .md で Markdown 記法で内容記述したテキストファイルを置いておくだけで、ブラウザでその .md ファイルを指す URL を開けば、HTML に変換された結果で表示されたらうれしいのに、
と思ったのである。

Markdown Pages!

...ということで、NuGet パッケージマネージャの検索結果を眺めていたら、
Markdown Pages というパッケージを発見。

試しにこのパッケージをインストールしてみたところ、これが大正解!

.md ファイルを置いておけば、これが Markdown 記法であると解釈されて、ブラウザには HTML に変換された結果が返るのだ。

ちなみに、ASP.NET Web Pages の仕組みに則ってページハンドラが実装されているため、拡張子 .md を省略した URL でもアクセス可能である。

すなわち、http://host/foo.md が表示できるのであれば、http://host/foo でも同じコンテンツが表示される。

※拡張子 .markdown に対しても同じく処理される。

ということで Markdown Pages を自サイトに導入させて頂き、目的は達成、一件落着。

NuGet Docs で使われてます

どうやらこの Markdown Pages は、
NuGet Docs サイト (http://docs.nuget.org/) で使うために開発されたっぽい。

実際、NuGet Docs サイト上の任意のページに対して、ブラウザのアドレスバーから、拡張子 .markdown を明示的に付けてアクセスしても、ちゃんと同じコンテンツが返ってくる。

ソースコードを拝見すると、恐ろしく高度なことがかかれているわけではなく、基本的には、.md コンテンツを読み取って、MarkdownSharp を使って Transform する、WebPage クラスから派生したクラスの実装である。
しかし、細かいところのチューニングがそこかしこに効いている。

http://docs.nuget.org/ 用には、この Markdown Pages パッケージに対してさらに、専用のカスタムコードやカスタムチューニングが施されているようだ。

いずれにせよ、このような形で NuGet パッケージとして公開してくださっているのは大変ありがたいことである。

お陰で、.md に対するハンドラを自作するという "車輪の再発明" をすることなく速攻で .md でコンテンツ公開できたのである。

多謝。
 
by developer-adjust | 2012-05-31 23:27 | .NET | Comments(0)