Web Tips：デバッグ

スマートフォンサイトの開発環境としてEdge Inspectを利用する

Adobe Edge Inspectは、PCに表示しているWebページを、LANに接続しているスマートフォンに同期して表示するツールです。スマートフォンの操作なしでWebページの表示確認が行えるため、効率的にデバッグできる開発環境が構築できます。

XAMPP環境でLAN内の他PCからWordPressサイトにアクセスする

XAMPPでローカルに開発環境を構築している場合、LAN内の他のPCからWordPressで作ったWebサイトにアクセスする方法を解説します。これによりWi-Fiで同じネットワークに接続したスマートフォンなどからもサイトを閲覧できるので、デバッグする時に便利です。

Android 開発環境として Android SDK Tools を利用する

スマートフォンサイトの制作で、Android での表示を確認したい場合は、Android SDK に含まれているエミュレータを利用できます。Android SDK は、Windows/Mac OS/Linux の各プラットフォーム向けに提供されています。

Windowsで使えるiPhone/iPadシミュレータ「iBBDemo3」

iPhoneやiPadに搭載されているiOS用シミュレータとして、MacであればXcodeがありますが、Windowsの場合は「iBBDemo3」を使うことができます。また古いMac OSではXcodeをインストールできませんので、iBBDemo3 を代わりに使うことができます。

Webサイトのリンク切れチェックソフト「LinkCheker」

Webページ制作完了時には必ずリンク切れをチェックします。外部リンクもありますので、サイト運用でも定期的にリンク切れをチェックしなければなりません。
そんな時に便利なソフト「LinkCheker」を紹介します。

Eclipse+XdebugによるPHPのデバッグ方法

Eclipse+Xdebugを使って、PHPプログラムのデバッグをする方法を解説します。
EclipseとXdebugは個別にインストールすることもできるのですが、Pleiades All in Oneで、XAMPPとともにローカル環境にまとめてインストールしている前提で解説します。

スマートフォン画面と外観を表示するツール「Mobilizer」

Mobilizerは、スマートフォン画面をPCで表示するための無料のアプリケーションソフトです。iPhoneやGalaxyの外観がそのまま表示されますので、プレゼンテーションなどに活躍します。

Chromeデベロッパーツールでモバイルをエミュレートする

Chromeに標準搭載されているデベロッパーツールには、モバイルをエミュレートする機能が豊富に備わっています。デバイス、ユーザーエージェント、画面解像度の指定ができるだけでなく、タッチスクリーンのエミュレートも可能です。

Firefoxのユーザーエージェント切替えによるスマホサイト表示

スマートフォンサイトのデバッグをする際、Firefoxのユーザーエージェント切替えを使って、開発PC上で表示確認する方法を解説します。

PayPalテストサイト Sandboxで決済処理を検証する

PayPalの決済サービスを利用して商品を販売する際、決済処理が正しく動作するか確認する手段として、Sandboxというテストサイトが用意されています。ここにテスト用アカウントを作成すれば、実際のお金のやりとりなしに決済処理を検証することができます。

正規表現によるフォーム入力データの妥当性確認

正規表現とは文字列の形式を表現するための表記方法で、Webページではメールフォームなどでユーザーが入力した文字列の検証によく使われます。ここでは、お問い合わせや登録フォームに入力してもらう文字列の妥当性確認をする正規表現例を示します。