Smarty ✕ Vueの技術的なことを知りたい人のために結論だけ先に書く
ポイントは２つあります。
- ポイント１： Smarty側のデリミタ（{literal}・・・{/literal}で囲う記法）を使ってVue側のコードをSmarty の対象からエスケープして出力すること。Vue側のデリミタでSmarty記法をエスケープすることはできないです。
- ポイント２： VueのスクリプトをHTMLファイル内に記述する場合などで、ファイル内の広い範囲を{literal}{/literal}で囲うとエラーが出ることがあるので所どころに {literal}・・・{/literal}{literal}・・・{/literal}{literal}・・・{/literal}を入れて分割エスケープすることです。
以下、暇な人はお読み下さい。
まだまだ使えるレンタルサーバー
2022年のこんにち、クラウド全盛の時代なので、流行りのAIだとかデータ処理などではやはりAWSや最近はGoogle Colabなどといった便利なツールにおんぶ抱っこになっています。
しかし、ちょっとしたホームページとか、ちょっとしたWebアプリといったものを作る際には、AWSなどはオーバースペックです。HTTPSにしないと最近はGoogle様の検索順位を下げられるような時代ですが、EC2で立てたサーバにSSLを入れるのは少し面倒です。そもそもEC2高いし。なので、私は令和の世でも相変わらず「レンタルサーバー」というものを使っています。
レンタルサーバーはロリポップのライトプランがお手頃です
実のところ、この１０年、ずーーーっとロリポップのアカウントを持っています。使い勝手は良いし安いです。色々古臭いところはありますが、別にロリポップに最先端を期待はしていないので、ちょっとした「ホームページ」を作るには、今でもロリポップ推しになります。私が何件か契約しているのはロリポップのライトプランで月額わずか220円となっています。これならお小遣いで払えますね。
ロリポップのプラン一覧
Vueで運転免許認知機能検査のWebアプリを作ってみた
話は変わって、最近Vueを使わざるを得ないことがあって勉強しないといけなくなりました。せっかくなのでちょっとしたシステムを作って見たくなりました。なにか、社会課題に関係するテーマが良いなあ、と探していたところ、、ありました。運転免許「認知機能検査」というものがあるそうです。どういう人が検査対象なのかなど、細かい話は作ったこちらのページに書いてありますのでご参照ください。運転免許「認知機能検査」の練習ができるWebアプリをVueで作ってみよう、と思って作り始めました。運転免許「認知機能検査」には３問の問題が出ますが、２問目は健常者の方でも、意外に難しいものです。こちらのページに運転免許「認知機能検査」の２問目を練習できるようにVueでコードを書いたので試してみてください。
Vueで作った運転免許認知機能検査の無料練習サイト
問題はロリポップのライトプランだとSmartyしか使えないこと
さて、今回はこのロリポップの上にVueで運転免許「認知機能検査」を実装しようと考えたわけですが、画面遷移が必要な部分はPHPで実装し、画面内の動作はVueをjQueryのような形で使おうと考えました。
PHPでWebアプリを作る場合、最近はLaravelを使うことが多いのですが、困ったことにロリポップのライトプランだと、 html を置くディレクトリより上にアクセスすることも出来ないしSSH接続してコマンドラインを叩くことも出来ない。もっと言えばLaravelをインストールすることが出来ないのですね。もちろん、Laravelの基本であるartisan hogehoge というコマンドを叩くことも出来ない。
PHPのフレームワークを使う場合「Smarty」を使うことが要求されます。若い人は知らないでしょ・・Smarty。
ロリポップのライトプランはコマンドラインが使えない
Laravel v.s. Smarty
今どきSmartyを実務で使うことは殆どないと思いますし、そもそもこの記事を読みに来る人がSmartyを知らないということはないと思いますので What is Smarty? という説明は割愛します。Smartyを知らない人がわざわざ今から勉強するべきものではないです。
ただ、最近分かったSmartyの良さについて一言触れておきたいです。Smarty はシンプルなだけに、Laravelより圧倒的にレスポンスが早いです。ローカルPCにWebサーバを入れて動かした場合でも、Laravelだと表示遅延がかならず150～200ミリ秒ほどのってきますが、Smartyだと10~20ミリ秒程度の遅延しかなくサクサクです。
趣味で作る程度のちょっとしたWebシステムにはまだまだSmartyも捨てたものではないな、と思います。
Smarty とVueを合わせて使う
ただVueとSmarty はあまり相性がよろしくありません。（※ここで言うVueは、vue.js を引っ張ってきて、jQueryの代わりにコンポーネントとして利用するような形態使い、Vue CLIなどは使わないものです）
SmartyでHTMLを出力して、その中にVueのコードも含まれているような形にするわけですが、お互い｛｝を表示用タグとして使うので干渉してしまいます。
VueのMustache（マスタッシュ）構文はこんな感じです。
<span>Message: {{ msg }}</span>Smartyのテンプレート内変数は以下のように書きます。
<span>Message: {$msg}</span>つまり、このままではSmartyの template が解釈できない表現となりエラーを吐きます。
これを回避するためには、Smarty のデリミタである {literal} {/literal} で Vue の変数部分を囲うようにします。
HTMLで記述されているマスタッシュ構文部分はデリミタで回避すれば良いですが、VueのコードをスクリプトとしてHTML内に書かなければならない場合は、あちこちに｛｝が出てくるため、まるっとデリミタで囲う必要があります。
理由はわかりませんが、あまりに長い部分をSmartyのデリミタで囲うとエラーになります。このため、以下のようにデリミタを分割する必要がありました。
{literal}
（Vueのスクリプトの一部）
{/literal}
{literal}
（Vueのスクリプトの一部）
{/literal}
{literal}
（Vueのスクリプトの一部）
{/literal}最後にロリポップでのPHPのコーディングの注意点
「ロリポップ！アクセラレータ」という機能があります。要はキャッシュなのですが、これがONになっているとひどい目にあいます。PHPのコードを改修したのに不定期に反映されない、といったことが多発します。理由がわからない間は大混乱になります。開発中は「ダメ、絶対」です。
「ロリポップ！アクセラレータ」は開発中は絶対オフにする
