Treasure2014 2014/09/01の授業復習

1. Markdownが
レンダリングされるまで
Treasure2014
Fine

2. どこで何が使われてるか
Vue.js Slim
Javascript PHP
Browser Web Server
Database
Twig
MySql

3. まずブラウザからリクエストが飛びます
Browser Web Server
Database
http://192.168.56.14/doc/basic

4. Browser Web Server
Database
http://192.168.56.14/doc/basic
Slim
1. ’doc/basic’にマッチするルートを探す
2. file_get_contentsでマークダウンファ
イルの中身を取得
3. $app->renderでhtmlを作る
4. [‘markdown’ => $markdown]は
markdown.html.twigの中の変数
{{markdown}}に$markdownの中身を
代入してる
$app->get('/doc/basic', function () use ($app) {
$markdown = file_get_contents(__DIR__. '/../../docs/basic.md');
$app->render('doc/markdown.html.twig', ['markdown' => $markdown]);
})
->name('doc_basic')
;
!

5. Web Server
Database
余談
file_get_contents()
File
SELECT *
FROM …
データの取得元が違うだけ
(ファイルかデータベースか)
やりたいことは、PHPプログラムに
データをロードすること

6. Twig
1. renderされる時にTwigが走る
2. {% %}, {{ }} で囲まれたとこを処理す
る
3. {{ markdown|raw }} のとこにSlimから
もらったmarkdownの中身を出力する
http://192.168.56.14/doc/basic
(rawはHTMLエスケープをさせないた
めの命令)
Browser Web Server
{% block contents %}
<!-- Main hero unit for a primary marketing message or call to action -->
<p id="document">
{{ markdown|raw }}
</p>
!
<!-- Example row of columns -->
!
{% endblock %}
!
{% block javascript %}
<script src="{{ asset('/bower_components/marked/lib/marked.js') }}"></script>
<script>
(function(){
var doc = $('#document');
doc.html(marked(doc.html()));
})()
</script>
{% endblock %}

7. ここまでやったらレスポンスを返す
HTML Response
Browser Web Server
あとはブラウザ側のお仕事

8. <div class="container theme-showcase" role="main">
<!-- Main hero unit for a primary marketing message or call to action -->
<p id="document">
## GroupWorkBase の基本構成
!
GroupWorkBase は Slim2 という PHP製Webアプリケーション用 マイクロフレームワークで構築されています。
!
### フロー
!
以下のフローでアプリケーションが動作します。
!
(略)
HTML Response
</p>
Browser Web Server
!
<!-- Example row of columns -->
!
<hr>
!
<footer>
<p>&copy; Company 2014</p>
</footer>
</div> <!-- /container -->
!
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/underscore/underscore.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/marked/lib/marked.js"></script>
<script>
(function(){
var doc = $('#document');
doc.html(marked(doc.html()));
})()
</script>
(重要な部分抜粋)こんなHTMLが返る

9. Vue.js
Browser
!
<script>
(function(){
var doc = $('#document');
doc.html(marked(doc.html()));
})()
</script>
あ、今回Vue.js使ってないですね。
使ってたらこのタイミング
(サーバーからHTMLもらった後)
に動きます

10. Browser
!
<script>
(function(){
var doc = $('#document');
doc.html(marked(doc.html()));
})()
</script>
<script>
(function(){
var doc = $(‘#document'); // markdown記法の文字列が入ってるpタグを取得
var markdown_content = doc.html(); // pタグの中身を取得
!
var compiled_html = marked(markdown_content); // markdownをhtmlに変換
doc.html(compiled_html); // pタグの中身を変換されたhtmlで書き換える
})()
</script>
見やすく書くとこう

11. まとめ
1. ブラウザがリクエストを投げる
2. Slimがルーティング処理をする (‘doc/basic’)
3. Twigを使ってHTMLを生成して、ブラウザに返す
4. ブラウザ上でJavascriptが走る(Vue.jsを使う場合は
このタイミングで走る)