KANPAI!」に菅沼がLTで登壇致します。使ってあげることでクライアントサイドはもちろん、サーバサイドでもデータを取得し、HTMLで出力することが出来ます。静的ファイルをgenerateした時点でしか走っておらず、ページロード時にデータが更新されていない問題が起こり得ます。使うのはサーバサイド(プリレンダリング時)のみ。データの更新をかけてあげるわけです。することでプリレンダリング運用でも、一応(少し古いかもしれないけど)非同期データのHTMLもプリレンダリングされていて、ブラウザで訪れた際にはちゃんと最新の情報に更新されます。2017年5月11日PhpStormでnode製サイトのプレビューをするnode製サイトを開発時はwebpackを利用していればwebpack-dev-serverなどを利用するのが常ですが、プロダクションビルド後のファイルで確認したい場合もあります。いうときにわざわざサーバーにアップロードしたり、MAMPなどを利用するのは面倒です。PhpStormであればビルドも含めてショートカット1発でサーバーを起動することができます!今日はその設定をしていきましょう。設定は1分で終わります。Configurations」のウィンドウを表示し下記に設定します。ドキュメントルートへのパスHostとPortは他のアプリケーションが利用中だと起動できないので、webpack-dev-serverやMAMPなどを利用している場合は被らないように設定するのが吉です。script」をクリックします。Script」のウィンドウが開くので下記に設定します。server'(上記のName:で設定した名前)」をクリックすれば指定したHostとPortでサーバーが起動します。PhpStormなどJetBrains製のIDEはWeb関係の技術と親和性が高いので、Web開発者は必携ですね。箇所で下記のようなエラーが出る場合がある。単純な文字列の配列)。}}</template>回避するには、下記のように個々を要素で囲ってあげる。}}</span></template>クライアントサイドのみではエラーは出ず、ちゃんとレンダリングされるので、サーバ側の実行ロジックにバグがあるのかもしれない。APIでカテゴリー情報を取得する場合、下記のエンドポイントを使いますよね。取得件数を設定できるのですが、実はこのパラメータ、1〜100の数値以外を渡すとエラーになります。似てるので-1を指定すれば全件取得できそうな気がするのですが、ところがどっこいできません。指定して取得してあげるほうが良さそうです。ロジカルにページングする必要がありそうです。Extraだいたいこの4つから選ぶことになると思います。多機能で実装も多いPHPで実装されているライブラリ今回はcebe/markdownを選びました。Extraについては定義リストなど実装されていない文法があるようです。拡張が簡単なので、今回はこれを利用します。実装まずはcomposerでインストールします。cebe/markdown下記のコードで簡単にHTMLに変換することができます。Extraは改行のみだと<br>が生成されず、行末にスペースを2つ入れる必要があるので、拡張してみましょう。$converter->parse($markdown_string);簡単ですね。これをうまく利用するとWordPressでも実装することができます。WordPressへの組み込みはまたいずれ...。使ってSPAサイトのSEO対策をする株式会社なすびのウェブサイトは、Vue.jsを用いたSPAで作られています(2017年4月現在)。コーポレートサイトのような情報の提供に重きを置くサイトで、SPAのアーキテクチャを使うことはSEOの面からあまり適した用途であるとは言えません。それは、GoogleボットこそJSを実行してからパースしてくれるので問題にはならないのですが、FacebookなどのSNSにシェアされた場合は未だにJSの実行までしてくれないからです。これを解決するためには、サーバーからのレスポンスでHTMLを返す必要性が絶対的にあるのですが、いかんせんSSRを前提に環境の構築を考えると、サーバサイドでNode.jsを噛ませる必要があったりなど、なかなかに敷居が高いのです。コーポレートサイトのような、ページ数も動的コンテンツも少ない小規模サイトであれば、プリレンダリングという選択肢もあります。今回はwebpackプラグインでサクッとプリレンダリングする方法の紹介です。Pluginhttps://github.com/chrisvfritz/prerender-spa-pluginこのプラグインを使って、webpackのbuild過程で静的HTMLを書き出してしまいます。]}上記のように保存先とエンドポイントを設定してbuildすると、下記3ファイルが書き出されます。違うファイルを指しているため、この状態でリロードすると404になってしまいます。制作過程においてスタッフが躓いた点や日々の気付きを投稿していきます。