webサイトのPHP、Javascript(Ajaxも含む)による効率化

webサイトをHTML(CSSも含む)だけで制作することはかなり減ってきたんじゃないかと思う。
もちろんHTMLだけで作ることが悪い訳じゃないし、規模によってはそれで十分なこともあるので全て効率化することが良いとはかぎらないけれど、制作後運用していくことを考えれば、効率化しておいて損はしない。

PHPで効率化

PHPでは主にサーバー側でデータの管理やコーディングの手間などを省く効率化が可能

サイト内で共通の項目は変数で共通化する。
$URL = "http://abc.jp/";
などとし、<?php echo $URL; ?>/kaisou/index.phpのように流用可能なようにする。
こうすることで、URLの変更にも即座に対応できるし、ページごとに階層を気にする必要もなくなる。
HTMLとPHPの分離
HTMLの<body>内に直接プログラミングを行うのではなく、関数やクラスを利用して、htmlとは分離する。
分離する際に、共通化できるものは共通化する。
HTMLの各セクション(ヘッター・ナビゲーション・フッター)などの別ファイル化する。
各ページ共通であるセクションを別ファイル化し、1つのファイルにすることで、ナビゲーション変更などの時に全ページ修正の必要がなくなる。
ページごとに現在どのカテゴリのページにいるのか、パンくずとしてナビゲーションを利用している場合は「サイト内のページサマリーのデータベース化」からどのカテゴリに属するのかをif文などで判別させると良い
サイト内のページサマリーのデータベース化
サイト内のページサマリーとは以下のようなもの

・ページ個別のID
・ページURL
・タイトル
・キーワード
・概要
・どのカテゴリに属するコンテンツなのか

このような情報をまとめておくことで、サイトマップ・サイトマップXMLの自動生成、サマリー情報の一元管理を行え、管理を効率化することができる。
連続するデータの一元データ化
サイト内の連続するデータ、たとえばお知らせや募集要項等、決まったフォーマットのあるものはページサマリー同様、データベース化(データベースでなくともcsvや配列ファイル)することで管理しやすく、後々CMSとして管理できるようにすることも可能になる

Javascriptで効率化

Javascript(Ajaxフレームワークを利用しても良い)ではソースコードの見やすさを維持したままインタラクティブな表現を可能にする

Javascriptでの画像ボタンのロールオーバー
CSSでの画像置換がロールオーバーでよく使われているが、画像名に「_n」「_o」などを付け、class="rollover"をつけることでイベントハンドラを利用しない形でロールオーバーを実現することが可能
ものによってはプリーロードが必要だろうが、現在の回線速度であればほぼ必要ない。
yuga.jsMJLなどで実現可能
Javascriptでの_blankを利用しない別ウィンドウの表示
標準に準拠したいが別ウィンドウで表示した場合や外部へのリンクを行う際に離脱の原因になってしまう場合がある、このようなときに便利なのがJavascriptを利用した別ウィンドウ表示である。
yuga.jsで実現可能

その他webサイトに合った内容をJavascriptやPHPで効率化することによって作業時間が削減でき、SEOにも効果があったり、ユーザーの利便性を向上させることができる。
(ここには記していないが、tipsやタブ表示などユーザーへの情報提供を補助するためにjavascriptを利用することは良い利用方法である。)

と雑に書きましたが、メモとして残しておきます。

Trackback(0)

Trackback URL:

Please Comments





Page Top