うろ覚えでプログラミング

この記事はEmber.js Advent Calendar 2013の参加作品です。では改めてこれの説明文を確認しましょう。

Ember.js だったり Ember.js じゃなかったり、なんかそんな感じで。

なるほど(強調は引用者)。はい、では本題です。


やること

先日Ember.jsのハンズオンに参加させていただき、今はその知見をはよ社内に広めんかいという苛烈なプレッシャーと戦っているわけですが、あまり興味のない人に「おっ」と言わせるには実際に動きを見せないとと思うのです。

それもできればシンプルなコードでー、と考えるとEmberホームページにある「名前を入力するとモデルが変わって画面の表示も変わる」AUTO-UPDATINGのサンプルがちょうどいい感じですかね。


13

あのコードは何度か写経してるので、今回は何も見ずにあれをかけるのかチャレンジしてみたいと思います。


準備書き書き

まずはライブラリとスタイルを取り込むところです。この辺はgoogleさんでホスティングしてくれてるから楽ちんですよね。CSSは本当はいろいろやってるんだろうけど、最低限。text-transform:uppercase;ってので大文字になるんですね。ほほう。


JS書き書き

次はJSでモデルの定義をしてやります。なんとなく、ドキュメントには「JavaScript書かなくてもいけるぜ!」って書いてあったような気もするのですが。。気のせいかな。


HTML書き書き

inputとoutputを先ほどモデルで定義した「model」でつないでやるイメージでしょうかね。ドキュメントをみるとrefパラメータはDeprecatedなんですかね。。まあ社内勉強会でイメージを伝える分には問題ないでしょう。



できた!

これが
00

こうなる!

18

うん、動いてますね。とはいえ、名前の所に入力したHTMLがエスケープされなかったり、モデル変更のタイミングがinputからフォーカスが外れたときとか、ちょっと動きが違う部分があるようです。うーん、ちゃんと書けるようになってたつもりでいたから残念。もう一度答え合わせがてら公式のホームページを見直してみたいと思います!

Ember.js ハンズオン講座に参加しました

世界観

yuguiさんが"初めてのRuby"で「プログラム言語にはそれぞれに世界観があり、私はその世界で自然な考え方でプログラムする」という旨の事を書かれてました。カッコ良くって好きな考え方ですが、今回ハンズオンに参加し、emberjsの世界観に触れる事が出来ました。

@ursm先生、@tricknotesサポート先生によるEmber.js ハンズオン講座二日間で僕の見聞きした、emberjsの世界観に触れるにあたっての心得をメモします。

先生の金言で振り返る心得

先生「emberのコントローラはモデルのような振る舞いをします」

僕はmvcについて誰かと議論できるほどの教養はないですが、それでも「こういうもんだべ」というイメージはあります。そのイメージでemberのmvcの説明を聞くと???になってしまったのですが、そこで先生のこの一言がありました。しっくりきました。

先生「できるはずですがイバラの道です」

どんな質問だったかの記憶はあいまいですが、(命名規約に則らないroute名はつけれますか、とかそんな感じだったかな?)なんどかこんな答えをききました。

世界観を無視するときのペナルティ、それが茨の道。

先生「(長めの沈黙)そうですね」

「ember dataってactive recordみたいな感じですか?」という質問への回答。

「今の長めの沈黙も含めて回答」とサポート先生のすかさずの補足もあり、どーやら近いけど違うものという認識の方が良さそう。

ember本体とは違って、ember dataはまだβが取れてないからバギーだし、というニュアンスも感じ取りました。

そうそう、ember dataといえば、

先生「動きが変だと思ったら丁度その件でissueが報告されてましてね…」

一日目に思いのほか進みが良かったため、二日目用の課題を夜なべして作って下さった先生の魂の叫び。

emberjsはドキュメントが少ない、なんて聞くこともありますが、公式のドキュメントはとっても充実している印象があります。

英語だけど、そんなに難しくないし。ですがそれだけではやはり足りない、期待通りのうごきをしない時はオープンになってるissueやstack overflowもチェックせよ、という教えでした。

その他雑多な感想

最初、受講者の中に明らかに入門者じゃないお方が混じってるようにお見受けしたので、もしや上級者用研修だったかとビビりましたけど、内容も進むスピードもちょうど良くて、楽しくあっとゆーまの二日間でした。

先生のいい声、サポート先生のサポート上手さも印象に残ったです。また参加できればいいな。ありがとうございました!

dojoするなら!:ちょっとアプリ作ってみますか

今回のテーマ

さてさて。だいぶdojoにも慣れてきましたし、ちょっとしたアプリを作ってみましょうか。 hello, world だけじゃつまんないですもんね。

手頃ないいネタないかなー、って面白そうなAPIありましたよ。

github Markdown Rendering API

みんな大好きgithub、のAPIですね。マークダウンで書いたテキストを渡すと、それをHTMLに変換したものを返してくれます。便利便利♪これを使って、簡易マークダウンエディタ作りましょう。手順はこんな感じ。

  • 画面にはテキストエリアがあって
  • そこにmarkdownで入力したテキストをajaxってサーバにpost
  • レスポンスのHTMLを描画

dojoで部品を探す

上記手順で、ajaxでサーバとやり取りする部分は前々回あたりでやりましたね。となると、今回やるべきは

  • テキストを(markdownで)入力するところ
  • サーバ通信するきっかけ
  • テキストを(HTMLで)出力するところ
のあたりで、dojoでうまいことできる部品があればいいなーってとこですね。 それでは、今回の目的にはどんなUIが考えられますかね?

UI案

案1:入力するところと、出力するところを横に並べて、間のボタンクリックのタイミングでサーバ通信する、とか?

案2:入力するところタブと、出力するところタブを作って、タブ切り替えのタイミングでサーバ通信する、とか?

イメージ図。
イメージ図

どちらでもできそうですね。でもせっかくdojo使うので面白いやつでいきましょう。

InlineEditBox

dijitの部品であるInlineEditBoxは、その名の通りインラインのeditboxです。…つ、つまり一見普通のHTML要素をクリックするとその部分がテキストエディタになって、編集することができます。編集後はもともと普通のHTML要素がアップデートされます。

言葉で説明するより、testを見ると一目瞭然ですね。

これって、先ほど述べた今回欲しいUIの3つの条件にばっちり満たしますよね。

こいつは使えそうってのは分かったけど、具体的にどう書けば良いのか?最近のバージョンに対応した素敵な解説本でも出ていれば、それを読みたいところですがそうもいかないので、公式のドキュメントに頼ります。まあdojoに限らないですけど

この2つ(とソース)があればなんとかなるもんです。dojoはこの2つとも充実してます。今回もそれをもとに、プロパティはこんな感じで設定しますよ。

  • 表示はHTMLで行いたいので、renderAsHtmlをtrueに。
  • 登録するボタンを表示したいので、autoSaveをfalseに。
  • 登録するボタンのラベル表示が「保存」だとなんなんで、buttonSaveを "preview"に。
  • 登録するボタンを押した時にxhr通信をしたいので、onChangeにその旨を記述。

コードで書くとこんな感じになります。

mdEditor = new InlineEditBox({
    editor: Textarea,
    renderAsHtml: true,
    buttonSave: "preview",
    buttonCancel: "cancel",
    autoSave: false,
    onClick: function(){
        // クリックされたときには、markdown形式の方のテキストをセット
        this.set("value", inputString);
    },
    onChange: function(){
        var mdEditorVal = this.get("value");
        if (string.trim(mdEditorVal) != string.trim(previewString)){
            // ajaxするところ
            request.post(
                "./md",
                {
                    data:{
                        text: mdEditorVal
                    }
                }).then(
                    function(text){
                        // うまく結果を受け取ったらHTMLになったテキストをセット
                        inputString = mdEditorVal;
                        previewString = text;
                        mdEditor.set("value", text);
                    },
                    function(error){
                        console.log("An error occurred: " + error);
                    }
                );
        }
    }
}, "markdown_editor"); // ターゲットdomのid

サーバー側を駆け足で

サーバー側はメインとなるmarkdownエンジンは前述のとおりgithubなんで、特になんもないです。ただ、JSONPのAPIがないんで、プロキシってあげます。個人的に今年はpython勉強年なんで、pythonのbottle.pyを使ってみました。

@post('/md')
def md():
    requestedParam = request.POST
    params = dict(text=requestedParam.text, mode="gfm")
    res = urlopen('https://api.github.com/markdown', json.dumps(params))
    return res.read()

簡単便利♪

こんな感じになりました

初期表示

15

クリックすると…

47

マークダウンで書いてプレビューを押すと…

37

HTMLになりました!

11

全体をgithubにおいておきます。

https://github.com/haseg/dojo-md-editor
Twitter プロフィール
コメントなどあったら、お気軽に♪
カテゴリ別アーカイブ
タグクラウド
QRコード
QRコード