Twitter で、こんな記事を読んだんで、そう、確かに!と膝を打つ思い。

 

私はココ最近 CakePHP をさわる時はずっと PHPStorm 使ってるんですが上記と同じ問題に遭ってました。ここではあくまでも PHPStorm に限った話になりますが、同様の問題に遭遇した人の情報の足しになれば幸いです。

PHPStorm の前提

まず前提として、HTMLの箇所に <script> や <style> タグを書いてあげればその中は正しく javascript および css ときっちり認識してくれます。

たとえば

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Sample</title>
<?php
// php code is here
?>
<style>
h1 {color:red;}
</style>
<?php
// php code is here
?>
<script>
$(function(){ $('h1').addClass('title'); });
</script>
<?php
// php code is here
?>
</head>
<body>
<h1>Sample</h1>
.....
...
.

みたいな書き方をすると、html、php、css、javascript の4つのコーディングスタイルに合わせて適切にコードの補完およびハイライト描画をしてくれます。

phpstorm

問題

しかし、ビューファイルにて CakePHP のビューブロック機能などを利用するなどしたときに、 <style></style> タグや <script></script> タグ無しで css や javascript をしたい時があります。けれど、その箇所はHTMLとしてしか認識してくれなくてとても残念。というのがこの問題です。

<?php
// php code is here

// ビューブロックを用いて、レイアウト側で <style> タグを出力する
$this->start('cssInHead');
?>
h1 {color:red;}
<?php
$this->end();

// php code is here

// ビューブロックを用いて、レイアウト側で <script> タグを出力する
$this->start('scriptOnFooter');
?>
$(function(){ $('h1').addClass('title'); });
<?php
$this->end();

// php code is here
?>

こんな風に開始と終了タグを記述しない場合、PHPStormはどこが css で、どこが javascript かを判別できないので、最初の場合と違って css も javascript も HTMLとして扱われてしまいます。

こんな記述の仕方は絶対に必要というわけではありませんが、たとえばエレメントに css や javascript を埋め込んでレイアウト側で統合して出力したい場合なんかは、<style>や<script>のタグはレイアウト側で一括して出力したいなぁ、という思いがあるのです。

で、結果はこんな残念な具合なんですね。

phpstorm2

まぁ、仕方ないとは思うんですが、『PHPStorm は超出来る子』という評判が巷にあふれまくってるとやはり期待してしまいます。

不本意ながら妥協

でも、どうしようもないんで、かなり乱暴な感がありますが <script> タグを記述して PHPStorm に言語を認識させると同時に、そのタグを出力させないためにバッファに貯めて消去。

<?php ob_start(); ?>
<script>
<?php ob_end_clean(); ?>
<?php $this->start('scriptOnFooter'); ?>
$(function(){ $('h1').addClass('title'); });
<?php $this->End(); ?>
<?php ob_start(); ?>
</script>
<?php ob_end_clean(); ?>

なんて感じでやり過ごしています。無駄なコードに囲まれてて気持ち悪いんですけどねぇ。(※コードの補足ですが、 javascript のバッファ退避処理には HtmlHelper::scriptStart()/scriptEnd() というメソッドもあります)

開発元に解決策はないのか問い合わせたところ、今のところ不可能だということでした。アノテーションによる拡張機能みたいなものがあるのではと期待してたんですがねぇ。

サポートの人にはついでに関連するスレッドを教えてもらったのは収穫だった。

http://youtrack.jetbrains.com/issue/WI-19120

同じ問題ですね。

普通、こんなことする奴おらんやろ、世界的に見て。あと超ややこしいし。だから無理

ってことみたいです。

あと、”Template Data Languages” という設定項目を念のためにということで教えていただいた。これは任意のファイルの基底言語みたいなものを指定できる機能。たとえばあるファイルの “Template Data Languages” を javascript1.8 にすると、そのファイルの php の外側にあるコードは全て(HTMLではなく)javascript として認識されるというものです。あまり使うことはないかもしれないけど覚えておこう。

この話は以上です。

※ ブログのタイトルを大幅に変更。元は「IDEを使ったCakePHPのviewの編集で、javascriptやcssを”とりあえず”補完してもらう方法」でした。