jQueryとPHPでシングルページ

簡単にいうと、この図の通りになってしまうのですが、自分が社内でWebツールを作ったときの備忘録として載せておきます。

いまさらjQueryという感も否めませんが、スクラッチでなにか動くもの(デモ)を作るときに、肩肘張らなくていいので大好きです。

このツールは、とある番号から該当するファイル一覧を表示し、そのファイル名をクリックするとソースコード内の修正候補を表示するというものです。

図ではjsonを使わないようなことを書いていますが、初手のファイルの一覧表示には使用しています。

とにかくCDN

読み込むものは以下の通りです。

  • jQuery
  • jQuery UI
  • Font Awesome
  • Google Code Prettify

jQueryは説明不要かと思います。Font AwesomeはWebFontを使ったアイコンセットで、Google Code Prettifyはソースコードのシンタックスハイライトをしてくれるライブラリです。

Formの内容をAjaxで送信

とある番号を送出するときに、Formをシリアライズしています。別に単なる番号を送るだけなので、自前でオブジェクトを作ってもよいのですが、検索オプションをつけたりする可能性も考えてこのような作りにしました。

以下は最初に表示されるHTML部分の肝となるコードです。

ポイントがいくつかあります。

  1. アイコンは「<i class=”fas fa-file-video”></i>」という感じで表示できます。Font Awesomeのページでアイコンを検索してコードをコピペしてください。CSSで文字として扱うことで大きさや色を変更することもできます。
  2. Ajaxのデフォルト設定ではタイムアウトが設定されていないので、2秒で設定しています。
  3. Formのserializeをするときには、通常送信するときと同様にnameを設定しておかねばなりません。
  4. jsonをparseするときはtry-catch文を使います。(ここではうまく行けば正常処理で、失敗すれば受け取ったデータをエラー文字列として表示しています。)
  5. formのsubmitイベントをトリガーにしているので、このままだと自分自身にPOSTをしてしまうため、最後にreturn falseをして抑止します。
  6. 「対象ファイル一覧に展開」の部分は、次のPHP部分を参照してください。

以下がAjaxで叩いているPHP部分(いわゆるAPI)です。

PHP 5.4.0 以降でjson_encodeのオプションにJSON_UNESCAPED_SLASHESを使用可能です。それ以前の場合は「/」のエスケープを自力で削る必要があります。

一覧のファイル名をクリック

一覧のファイル名をクリックして個々のファイルを解析していきます。今度はjsonは使わず、受け取ったデータをそのままDOMの中に突っ込んでいきます。

追記したJSの部分は以下の通りとなります。

ポイントの多くは「sourceDiff.php」のほうにあるのですが、このファイルはいわゆる社内ツールのごちゃごちゃしたコードなので、開示しても意味もわからなければ参考にもならないので、コード自体は割愛させていただきます。

  1. ajaxがsuccessしたら「PR.prettyPrint();」をしてシンタックスハイライトのJSを動かす。
  2. 「sourceDiff.php」でのechoでscriptタグを出力してjQuery(function($){});の中に処理を書けば、Ajaxのsuccess時に動く。
  3. Google Code Prettifyはそのpreタグのclassに「linenums:数字」を追加すれば(もちろん「prettyprint」も必要)その行番号から始まる。

最後に

これはベストプラクティスではないですが、書き散らせるのがjQueryの楽しさでもあります。例えるなら、方眼紙にフリーハンドでフロー図を書いている気分です。

フレームワークはプロトタイプを作ってから導入を検討したらいいのではないでしょうか。

  • このエントリーをはてなブックマークに追加

水蕗をフォローする

コメントを残す