Moonmile Solutions Blog

漫画 on Webのビューアに触発されて、Silverlight で作ってみよう、と思い立ちました。

Silverlight 3 のインストールが必要ですが、こんな感じ。
http://moonmile.net/sl/SampleMekuri/

ページの左半分をクリックすると前へ、右半分をクリックすると元に戻ります。

ソースの方は後で公開しますが、制作ポイントを話すと、

1. Grid に囲まれた Image を 2枚用意する。
2. マウスクリック時に、1枚目の Image をアニメーション。
3. 2枚のImageをページに合うように差し替え

なことをしているだけです。
ページ自身は、見て分かるとおり画面のキャプチャで、サーバーに PNG 画像として置いてあり、適宜読み込んでいます。なので、１回目はちょっと重たい。２回目以降は、キャッシュが効いているので、スムースに読み込めます。

# このあたり、リソースからもできるはずなんだが、ひとまずサーバーから読み込み方式で実装

制作手順としては、

1. めくり画像を用意
2. 最初に、WPFアプリケーションでWindows上で実装。
3. Expression Blend のタイムラインを使って、切り替えアニメを作成。
4. １枚目から２枚目の切り替えを実装。
5. 複数のページを切り替える方式に変更。
6. マウスの右ボタン/左ボタンで、進む/戻るを実装。
7. Silverlight アプリケーションを作成。
8. XAML コードの移し替え
9. C# のコードを移し替え
   WPF と Silverlight で要素の扱いが若干違うので修正。
10. Silverlight だと、マウスの左クリックしかないので、ページの右/左に変更。
11. リソース読み込みから、サーバーのURI指定に変更。
12. FTPでサーバーにアップして実験

な感じですね。

漫画の場合は、スキャナで読み込むので画像の切り替えだけで済みます。漫画の著作権なんかは、サーバーに画像データを置くので、通信時にしか使えないので大丈夫そう（トリッキーなことをすれば、抜けるかもしれませんが）。

iPhoneアプリと同じように、WPFアプリを作成してしまってPC上のローカル環境で動かすのも可能です。この場合は、WPFアプリ自身にDRMを確認するコードを入れるか、パスワード配布という方式が取れます。公開キー方式でも良いでしょう。

文章の場合には、（アイデアレベルですが）ブラウザ（WebBrowserコントロール）を内蔵させてしまうという手があります。ページ捲りをしたいので、ブラウザを2枚用意して、WPFの機能でめくるようにアニメーションさせます。

なところまで考えて作成。ここまで３時間弱ぐらい。

電子書籍を開始する前に、システム屋さんとしてはePubを勉強しておこう、ということで、いくつか調査中。

• テキストからePubを作成する。
• 画像からePubを作成する。

著作権、不法コピー（海賊版）を防ぐためにはDRM(Digital Rights Management)が必要なんだが、プラットフォーム依存（Kindle、iPhone、iPad、Sony、Adobeなど）なところもあり、流通依存（Amazon、Appleなど、漫画onWeb）なところもある。将来的には課金を考えないといけないのだが、ひとまずシステム屋としてはインフラ主導で考えてみよう。

フリーで作成、流通、PCやiPadなどで閲覧、を想定してフリーなものを探してみると、

iPadビジネスを先取り！EPUB関連フリーソフト5選http://builder.japan.zdnet.com/sp/opensource-for-developer2010/story/0,3800103086,20408786,00.htm

で、フリーのビューア＆作成ツールが選べる。ひとまず手軽だろうと思われる Adobe Digital Editions をダウンロードして導入してみる。ページ送り1枚なので見開きとはいかないが、横書きならばこれで十分だろう。

さて、フリーなコンテンツからePubというと、青空文庫からコンバートできるのがいいので、Text2ePub 0.8（β）を試してみる。青空文庫から直接ダウンロードできたりして、版権が切れた本を読むのにいいんだが、、、ああ、何故か私の環境では動かない（悔しい）。

青空文庫 (XHTML) -> ePub変換 なところで、ePubに変換できるらしいんだが、ああ、Bookmarlet が動かん。

ん～、どうしたもんか、と悩んだところ、そうか、試しに epub を zip に変換して中身を覗いてみればいいのだ、ってことで zip を解凍してみる。なるほど、見たことがあるファイルっぽいね、単なるXHTMLファイルが並んでる。

というわけで、いくつか手作業で修正してみて、zip 圧縮、拡張子を「epub」に変えて、先の adobe digital Editions で読むと、うん読めます。この位ならば、perl スクリプトを組むだけでも十分ですね。

という訳で基本に返って、仕様っぽいものを読んでみる。

日本語Epubブックサンプル
http://www.kobu.com/docs/epub/index.htm

.epub eBooks Tutorial
http://www.jedisaber.com/eBooks/tutorial.asp

ここのチュートリアルは英語しか通さないので、日本語を通すようにします。その手順をざっと書いていきますね。

1. チュートリアルから、sample.epub をダウンロード
2. sample.zip にして展開する。
3. OEBPS/chap01.xhtml を開いて、
   先頭の encoding を “iso-8859-1″ から “UTF-8” に変更
   <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> を追加
   body の何処かに日本語を書いておく。
   そして、UTF-8 で保存
4. OEBPS/stylesheet.css を開いて

   @font-face {
     font-family: “ipampmona”;
     src: url(font/ipamp-mona.ttf);
   }
   body {
     font-family: “ipampmona”;

   な感じで追加。これは、日本語のフォントを埋め込むためで、ipamp-mona.tff は IPA でダウンロードするか、先の「青空文庫 (XHTML) -> ePub変換」から、サンプルをダウンロードして、展開した後、font/ipamp-mona.ttf を引っこ抜きます。

5. なわけで、フォントは、
   OEBPS/font/ipamp-mona.ttf
   にコピーしておく。
6. これを zip で圧縮します。
   圧縮するときは、sample のフォルダを圧縮するのではなく（これでしばらく悩んだ）、
   META-INF
   OEBPS
   mimetype
   を選択した状態で圧縮します。

   

7. 拡張子を zip から epub に変換します。
8. Adobe のビューアにドロップします。

な感じで、epubをPCで見ることができます。

内容のコンテンツは、拡張子が xhtml になっていますが、これだと IE とかのブラウザで確認しづらいので、html にすることができます。拡張子を変更した場合は、content.opf ファイルを書き換えます。

manifest/item のところで、IDとファイル名(href）が指定してあるので、これをちまちま修正。

<item id=”chapter01″ href=”chap01.html” media-type=”application/xhtml+xml” />
<item id=”chapter02″ href=”chap02.html” media-type=”application/xhtml+xml” />

な感じで書きかえるとブラウザで確認しつつ、html を修正ってことができます。

というわけで、ビューアが縦書きをサポートしてくれれば、自前のスクリプトでepubファイルを作って小説を読むってことができます。

同様に、画像の埋め込みも非常に簡単なので、同人誌をepubにして配布ってのも十分可能です（無料配布ってのがアレだけど）。宣伝用にはいいんじゃないでしょうか。

後は、epub のファイルを作っていて思いついたんですが、Adobleのビューアでは印刷ができるので、PDFの変わりになります。適度にHTMLを使ってページを作成した後に、ツールを使って epub へコンバート、そのまま印刷。配布資料を作成する場合は、HTMLとepubが一度にできるので楽そうです。

前回の反省を踏まえて、bit.ly は真面目にテストしつつやる。プログラマ根性というところ。

さて、bit.ly の API を使えることを知っていはいたものの、

APIドキュメントを見るのもしんどいし
http://code.google.com/p/bitly-api/

そんな訳で、検索して探すと、

bit.ly (短縮URL) API呼び出し (その1)
http://d.hatena.ne.jp/m-kawato/20090603/1244041369

があるので参照する。

1. bit.ly で api key を取得する。
2. .NETのWebClientを使うことに決定。
3. クエリ呼び出しが楽なので、OpenReadメソッドを使う。
4. テスト用のプロジェクトを作って、長いURLを渡して結果を返すところまで完成。
5. デフォルトではJSONで返ってくるので、formatをxmlで指定。
6. ストリームを XmlTextReader → XmlDocument に変換。
7. 「shortUrl」を探して変換テスト

string transBitUrl(string longurl)
{
    string query = "";
    string shorturl = "";

    WebClient web = new WebClient();

    query = "http://api.bit.ly/shorten?format=xml&"
          + "version=2.0.1&longUrl=" + longurl
          + "&login=" + bitLogin + "&apiKey=" + bitApiKey;

    Debug.Print(query);

    Stream st = web.OpenRead(query);
    XmlTextReader xr = new XmlTextReader(st);
    XmlDocument doc = new XmlDocument();
    doc.Load(xr);
    var lst = doc.GetElementsByTagName("shortUrl");
    if (lst != null && lst.Count > 0)
    {
        XmlElement el = lst[0] as XmlElement;
        shorturl = el.InnerText;
    }
    st.Close();

    return shorturl;
}

これがテストできたので、今度は文章中のURLを変換させる。

1. IndexOfメソッドで変換しようと思ったが、面倒そう。
2. 正規表現の Regex クラスを使うことに決定。
3. 簡単のために”http://[^ ]+ “ のように、後ろに半角スペースで区切る。
   実は、文章末の場合のチェックが必要なのだが、ここでは省く。
4. 見つかった文字列を MatchCollection で受けて、Replace すれば OK。
5. ローカルでチェックしてOKなので、これを先のアプリに組み込む。

string transShortUrl(string text)
{
    Regex reg = new Regex("http://[^ ]+ ");
    MatchCollection mc = reg.Matches(text);
    if (mc == null || mc.Count == 0)
    {
        return text;
    }     foreach (Match m in mc)
    {
        string lurl = m.Value;
        if (!lurl.StartsWith(http://bit.ly))
        {             string surl = transBitUrl(lurl);
            if (surl != "")
            {
                text = text.Replace(lurl, surl+" ");
            }
        }
    }
    return text;
}

Bitボタンを付けて、

な状態から、Bitボタンを押せば、

な状態へ。ここまでは１時間半程度、まずまずか。

さくっ、と出来るかと思ったら、結構掛かった。20時頃からやって23時半まで、う～む。

原因としては、

OAuth(xAuth)のVB.net実装サンプル
http://d.hatena.ne.jp/Kiri_Feather/20100305

なところを、VB.NETからC#へ移し替えようとしたのが駄目。結構長いことが分かって嫌になってしまった。あと、いきなりWPFアプリを作ろうとしたのが駄目だな。２重に駄目が重なってしまって、うまくいかなくなってしまった。

なので、一端やり直して。

1. VB.NETを丸ごとコピーしてビルド
2. 試しに、Windowsフォームを作ってみた。
3. その前に、ボット用のアカウントを取得
4. TwitterのbotをOAuthに対応させる を参考にして、ruby で手順通りやる。
5. 手順通り、gem install oauth する。
6. 手順通り、oauth-patch.rb を作る。
7. 手順通り、twitter-oauth.rb を作る。
8. アクセストークンを取ってきて、
9. 手順通り、twitter-oauth-access.rb で動かしてみる。
10. 動いた動いた。
11. どうやら、二重投稿は却下される模様。よかったよかった。
12. IEでツイッターにログインしてない状態でもチェック。
13. さて、VB.NET のほうで、認証を試してみるが「認証失敗」
14. 試しに、投稿してみると投稿できる。
15. なぜ、認証に失敗するのかよくわからないが、投稿ができるのでOKとする。
16. いくつか、Windowsフォームから投稿するパターンをチェック。大丈夫そう。
17. VB.NETで、WPFプログラミングかぁ、と一瞬悩んだ末、C#でWPFを作ることに決定。
18. 参照設定で、VB.NETのライブラリを追加する。
19. Visual Studio 2008 で、WPFアプリを作って動かしてみる。
20. 一応大丈夫そう。投稿できている。
21. Expression Blend 3 を立ち上げてデザイン開始。
22. ああ、ボタンの作り方がわかんない、ってんでネットで検索
23. ああ、テキストボックスが改行されない、ってんでネットで検索
24. ああ、イメージをリソースから表示できない、ってんでネットで検索
25. ああ、マウスをポイントしたときに色が代えられない、ってんでネットで検索
26. やっぱり、WPFの本がないと無理だよなぁ。デザイナじゃないし、良しとするか。

という訳で、自分専用（パスワードとか埋め込みだから）のツイート専用アプリは、ひとまず完成。

ああ、そうそう、せめてbit.lyを入れなくちゃ。

フォントは「江戸勘亭流Ｐ」で。日本語の場合はいいのだが、アルファベットの場合が変なので後で変えるか。

Visual C++ 2010 の新機能
http://msdn.microsoft.com/ja-jp/library/dd465215.aspx

C++/CLIのインテリセンスが効かないので、C++/CLI関係は駄目なのですが、C++はかなり便利機能満載なので、メモ書き。

■autoキーワードで型推論が使える

最初に言っておくと、「auto」はC++のキーワードで、内部変数の有効期間を示すものなのですが、滅多に使われない（というか全く使われない）ので、Visual C++ では「型推論」のために意味が変更されています。

なので、/Zc:auto なるスイッチが導入されています。デフォルトでは、型推論が有効な状態ですね。
http://msdn.microsoft.com/ja-jp/library/dd293615.aspx

書き方は、

auto i = 10 ;

なんて形で書きます。これだと余り意味がないので、

vector <int> vec ;
vector <int>::iterator it = vec.begin();

の代わりに

auto it = vec.begin();

なんてことが出来ます。

この型推論ですが、F#のタプルを扱う時や、C#での複雑なLINQを扱うとき（C++にLINQはないけど）に便利です。

■ラムダ式

ラムダは無名関数とも呼ばれますが、algorithm 関係で比較式を扱うときに便利です。

例えば、sort 関数の場合、比較関数を指定できるのですが、今までは必ず関数を作る必要がありました。

int comp( int x, int y ) { return x < y ; }

sort( vec.begin(), vec.end(), comp );

な感じで、comp関数が必要なのですが、ラムダ式を使うと、

sort( vec.begin(), vec.end(), [=](int x, int y ) { return x < y; });

な感じで、その場で書けます。

いくつか書き方があるので、詳細は調べないと駄目なんですが、mutalble というキーワードを使うところを見ると、F# の影響も入っているようです。

■nullptrの利用

長らく、NULLポインタを表すものは、

#define NULL (void*)(0)

で定義されていた訳ですが、Visual C++ 2010 では決別したいようですｗ

if ( p != NULL ) {

のところを

if ( p != nullptr ) {

と書き換えができます。

nullptr
http://msdn.microsoft.com/ja-jp/library/4ex65770.aspx

を見ると、/clr が必須なようですが、ネイティブのC++を使った場合も通ります。

ってここが改変点なのに！ Visual C++ 2008 だとネイティブのほうは nullptr が通りません。

これの便利な処はですね、組み込みシステム何かを作っていると、「#include <stdio.h>」なんてのができません。なので、自前で #define NULL (0) ってことをやることが多いのですが、別の会社でもやっていると、

#ifndef NULL
#define NULL (0)
#endif

なんてのが、頻繁に出てきます。これを回避するために、nullptr が…って、あと、ポインタと0の混在が…、組み込みだと Visual C++なんて使わないですよね～。

• NULLの再定義による副作用を避けるために、nullptr の導入
• C++/CLI で使われるNULLポインタと合わせるために、C++にnullptrを導入
• templateプログラミングでNULLポインタが扱える

ってところですね。

ちなみに、sizeof( nullptr ) ってのも通って、値は「4」です。int型になっているみたいですね。代入は、char *でも、double *でも、NULL同様にできます。

Twitterを始めて２週間ほどなので、PCからブラウザ上でやっています。

Webでぽちぽち追っていてもいいんですが（この手のは慣れているので）、入力がちっと面倒。文字数をカウントしてくれるのはいいけど、あの textarea でちまちま編集するのは難しい。かといって、エディタで書いてからペーストすると、文字数を超えてしまうし。

なので、自分用の投稿専用があってもいいかなと（先行きは、リストを表示するでしょうが）。

目標としては、

• 文字数が制限される（140文字）
• URLを bit.ly などを使い、短縮できる。
• そのアプリで投稿できる。

なぐらいですか。実は、最後のはブラウザへコピペでもいいんですが、まあ、先行き作る（であろう）botの調査も兼ねて作ってみるということで。

あと、どうせなので、.NET Framework の WPF を使って、綺麗な画面を作ります。

PHP+OAuthでTwitter
http://www.sdn-project.net/labo/oauth.html

そんなんで、いきなり認証絡みで躓いたので、↑を参照にして。

と思ったら、VB.NET のサンプルが

OAuth(xAuth)のVB.net実装サンプル
http://d.hatena.ne.jp/Kiri_Feather/20100305

ありがたや～。