あとはエディタ部分だけですね。Phoneアプリを作ってみましょう。アプリの仕様を考えてみよう面倒くさいので保存機能は一切なしという漢らしい仕様でいきましょう。漢であっても電話着信や瞬断で記入中のテキストが消えてしまうのは、きっと悲しいと思うので、エディタページとプレビューページとの切り替え時だけ保存してあげるようにしましょう。markdownを解釈する機能はどうするかこれは冒頭でも紹介した通り、僕があらかじめ用意しています。GitHub/CH3COOH/Markdown4winrtからダウンロードしてください。ZIP」と書かれたボタンがあるので、クリックすると最新のソースコードを取得することができるはずです。このMarkdown4winrtのfork元はMarkdownSharpです。このライブラリをWinRT/WP8向けで動かさられるように移植しました。テストコードも一通り移植してチェックしているので機能的な差異はないと思います。markdownエディタを実装しようさて、早速アプリを作っていきます。2013を起動します。アプリ」を選択します。名前はそのまんま「MarkdownEditor」にしました。Markdown4winrtプロジェクトの参照アプリからmarkdownライブラリを使いたいので、MarkdownEditorプロジェクトからMarkdown4winrtプロジェクトを参照します。先ほどダウンロードしてきたZIPファイルを任意のフォルダへ解凍しておいてくださいね。Markdown4winrtプロジェクトをソリューションに追加します。'MarkdownEditor'を右クリックします。コンテキストメニューから追加→既存のプロジェクトを選択します。先ほどダウンロードしたMarkdownプロジェクトを追加します。次にMarkdownEditorプロジェクトからMarkdownプロジェクトを参照します。MarkdownEditorプロジェクトの参照設定を右クリックします。参照の追加を選択すると参照マネージャーダイアログが表示されます。これでMarkdownEditorプロジェクト側からMarkdown4winrtの機能が使えるようになりました。画面を作ろう画面を作りましょう!とは言っても、ベースのテンプレートにピボットアプリを選択しているので、このレベルの画面でしたらすぐに作ることができます。実質やったことと言えば、以下の通りです。アプリケーション名を変更PivotItemのHeaderを変更PivotItemに元々入っている中身(ListViewとか)を削除PivotItemにTextBoxとWebBrowserを追加もうすでにXAMLを用意しておきました。上図の画面はこのようなXAMLで構成されています。</Grid></phone:PhoneApplicationPage>これで画面の実装が完了しました。ページ遷移時に保存してからmarkdownへの変換Pivotはフリックでページを左右する際に、SelectionChangedイベントが発生します。MainPageではそのSelectionChangedイベントハンドラ内で、ユーザーが記述したテキストの保存とmarkdownへの変更をおこないます。MainPage.xaml.csは、下記のようになっています。ここから手を入れていきましょう。}}まずは、テキストの保存をおこないましょう。Phoneアプリでテキストを保存するには分離ストレージ(IsolatedStorage)を使います。Storage)を使ってデータの保存と取得を行うSaveTextAsyncメソッドでテキストを保存する処理を実装します。SaveTextAsyncメソッドでは、IsolatedStorageFileクラスのGetUserStoreForApplicationメソッドでストレージの管理オブジェクトを取得します。あとはOpenFileメソッドでファイルを作成しテキスト情報を保存しています。ページの切り替わりイベントハンドラのpivot_SelectionChangedメソッドにて、入力されているテキストを保存する処理の実装ができました。}次は、markdownを変換してみましょう。こちらの方が簡単かもしれません。MarkdownSharp.Markdownクラスのインスタンスmarkdownを生成します。MarkdownクラスのTransformメソッドにユーザーが入力したテキストを渡すと、markdownをHTMLに変換したテキストを得ることができます。HTMLを表示させるにはWebBrowserコントロールのNavigateToStringメソッドを使います。Phoneアプリができました。Phoneエミュレータで動かしてみましょう。エディタページで下記の文章を入力しました。🐱ピボットをフリックして、プレビューページで見た時にどのようになっているか確認しましょう。入力した通り綺麗にプレビューで表示されているのが確認できます。