cubeLabo PHP,Javascript,Web標準などWeb制作覚書 2007年06月

携帯HPのキャリア・端末振り分けの覚書

携帯向けホームページはキャリア間で仕様の違いがあります。そのためキャリア別に異なる表ページを表示する振り分けがよく行われます。

プレーンテキストのみ: XHTML Basicで記述すればキャリア・端末振り分けを行わなくてもそれほど問題はおこらない。
画像を利用する場合: 画像を利用する場合の振り分けはしらぎくさいと全機種で使えるサイトにするには。でとてもくわしく解説されています。
絵文字を利用する場合: 絵文字はキャリア間で互換性がないため、振り分ける必要がある。; PHPでの振り分けは携帯電話向けサイトでのPHPの応用・端末振り分け(1)においてとても詳しく解説されています。

スポンサードリンク

スポンサーサイト

テーマ:モバイル
ジャンル:コンピュータ

セッションと携帯

携帯向けホームページでセッションを利用する際の注意点をPHPを中心にまとめています。

PHPでは通常セッションID(PHPSESSID)をクッキーに保存することにより、セッションを利用します。クッキーが利用できない携帯向けホームページではセッションIDをクッキーに保存することができません。

PHPではクッキーにセッションIDを保存できない場合はURLにセッション情報をクエリ文字としてつけることによりセッションを実現することができます。

しかし、URLを利用したセッション管理はセキュリティの問題でPHP4.30からはデフォルトで無効になっています。

携帯でセッションを利用する場合はこの設定を有効にする必要があります。

php.iniで有効化: session.use_trans_sid=1
スクリプト内で有効化: ini_set("session.use_trans_sid", "1");

関連記事:
携帯向けホームページとPC向けホームページの違い

スポンサードリンク

WAP 2.0(Wireless Application Protocol)

WAP 2.0をIT用語辞典より引用します。

WAP Forumによって策定された、携帯電話や腕時計などの携帯端末用の通信プロトコル。従来のWAPでは独自プロトコルを利用してきたが、WAP 2.0ではTCP/IPを中心とするインターネット技術を全面的に採用している。WAP 2.0ではNTTドコモのiモードと同様、TCP/IPベースのプロトコルを使用するほか、コンテンツ記述言語も独自開発のWMLから、XHTML BasicにWML 1.2を統合したWAE 2.0に変わる。これにより、WAP 2.0ではiモードで利用されているCompact HTMLを包含することになり、WAP 2.0対応のブラウザであればiモード用コンテンツも閲覧できることになる。

出展:WAP 2.0とは - 意味・解説： IT用語辞典

関連記事:
携帯向けホームページとPC向けホームページの違い

スポンサードリンク

QVGA(Quarter VGA)

320×240ピクセルの解像度。おもに携帯電話で利用されています_※1。 VGAは640×480ピクセルの解像度のためQVGAはVGAの4分の1の解像度になります。

※1:携帯画面の場合、240×320。

関連記事:
携帯向けホームページとPC向けホームページの違い

スポンサードリンク

携帯向けHPとPC向けHPで相違点のまとめ

携帯向けHPを制作する上でPC向けHPとの違いをまとめています。

ファイルサイズ: 携帯向けHPのファイルサイズは9KB、できれば5KBに抑える。
画面サイズ: 携帯の画面サイズはQVGAが主流。
画像形式: 端末ごとに表示可能な画像形式が異なる。
参考サイト:全機種で使えるサイトにするにはしらぎくさいとにとても詳しい説明があります。
キャリアごとの振り分け: 携帯向けのHTMLはキャリア間で仕様の違いがあります。そのためキャリア別に異なるページを表示する振り分けがよく行われます。; XHTML Basicを用いてプレーンテキストのみの場合は、キャリアごとの違いを相当程度吸収できます。
HTMLタグ: XHTML Basicで記述。XHTMLの文書型はXHTML Transitonalにするとよい。; CSSが利用できないため機種が多いため、fontタグなどの装飾系タグの利用が可能なXHTMLトランジショナルにするとよい。
クライアントサイトスクリプト: Javascriptをはじめクライアントサイトスクリプトは利用できない。
スタイルシート: CSS未対応_※1の機種が多い。; ※1:基本的なCSSに対応している端末も出てきています。
クッキー(Cookie): クッキー(Cookie)は利用できない。
セッション(Session): セッション(Session)は利用可能できる機種が多いが、クッキーが利用できないため注意が必要。詳しくはセッションと携帯を参照。
文字コード: 文字コードはShift_JIS
半角カナ: PC向けホームページでは半角カナの利用は推奨されません。携帯向けホームページではファイルサイズの削減や画面の大きなの関係で半角カナを利用する場面も多くあります。
フレーム: 携帯向けホームページはフレームが利用できない。

スポンサードリンク

テーマ:モバイル
ジャンル:コンピュータ

XHTML Basic

XHTML Basic文書型は、携帯などのモバイル向けに制定されたXHTML文書型の最小限の構成。

関連記事:
携帯向けホームページとPC向けホームページの違い

参考サイト:
XHTMLベーシック

スポンサードリンク

[XHTML Basic]の続きを読む

Javascriptライブラリの使い方

Javascript/Ajaxライブラリは便利な機能を手軽に実現できます。ライブラリの利用は高度な知識が必要になるイメージがありますが，利用した感想として思っていたよりとても簡単に実現できるものもあります。

Javascript/Ajaxライブラリの大まかな利用の流れをまとめています。

(1).ライブラリのダウンロード
(2)ライブラリの配備
(3)スクリプトの読み込み(HTMLファイル内に記述)
(4)スクリプトの呼び出し(HTMLファイル内に記述)

ライブラリのダウンロード

多くのライブラリは圧縮して配布されているので，解凍ソフトで展開します。

公開フォルダへ配備

HTMLファイルからサーバ上でパスの通るフォルダ(公開フォルダ)にライブラリ(Javascriptファイル)を配備します。ライブラリによっては別のライブラリを利用しているのでそれらのファイルも適宜ダウンロードして配備します。有名なライブラリでは必要になるライブラリはダウンロードファイルに同封されていることが多いようです。

ライブラリにはJavascriptファイルだけでなくCSSや画像などが同封されていることもあります。

スクリプト等の読み込み

HTMLファイルにライブラリの読み込みを記述します。一般にhead部でscriptタグを使って読み込みます。

(記述例)
<html>
<head>
...................
<script src="ライブラリファイルのパス" type="text/javascript"></script>
</head>
<body>
...................
</body>
</html>

読み込むJavascriptファイルの文字コードがHTMLファイルと異なる場合はJavascriptの文字コードを指定するのが無難だと思います。
(JavascriptファイルがUTF-8の場合の記述例)
<script src="ライブラリファイルのパス" type="text/javascript" charset="utf-8"></script>

CSSが必要な場合はCSSも読み込みます。
(記述例)
(記述例)
<html>
<head>
...................
<link rel="stylesheet" href="CSSファイルのパス" type="text/css" media="all" />
<script src="ライブラリファイルのパス" type="text/javascript"></script>
</head>
<body>
...................
</body>
</html>

スクリプトの呼び出し

所定の方法でスクリプトを呼び出します。

スポンサードリンク

テーマ:web制作
ジャンル:コンピュータ

Javascriptの角丸ライブラリ

画像を用いることなくJavascriptで角丸を実現するためのライブラリをまとめています。

スポンサードリンク

テーマ:プログラミング
ジャンル:コンピュータ

ThickBoxの使い方

Thickboxはシンプルで高機能なAjaxライブラリです。導入はとても簡単です。「ロード中」と表示する画像(loadingAnimation.gif)パスの読み込みについての覚書です。

thickbox.jsのjavascript変数，var tb_pathToImageにHTMLファイルからの相対パスまたは絶対パスで指定します。

スポンサードリンク

IEで発生するGoogle Mapsのエラー回避策

Firefoxでは問題なく表示されるGoogle MapsがIEでエラーが発生する場合があります。その場合の回避策を2点まとめています。

スクリプトの呼び出しでUTF-8を指定

コードの挿入位置

body内に挿入するコードをdivなどで囲まず，bodyタグの直下に挿入する

参考サイト:IE で Google Maps API がエラーになる問題に対処する方法 - seclanのほえほえルーム

スポンサードリンク

テーマ:ホームページ・ブログ制作
ジャンル:コンピュータ

Javascript/Ajaxライブラリー一覧

とても使い勝手が良く高機能なJavascript/Ajaxライブラリを集めました。

基本/総合ライブラリ

表示系ライブラリ

リンク関連ライブラリ

Link Thumbnail

サブウインドウ表示ライブラリ

Prototype Window Class : Introduction

角丸系ライブラリ

スポンサードリンク

テーマ:ホームページ
ジャンル:コンピュータ

Lightbox2.0の使い方

LightboxはAjaxを利用した画像表示ライブラリです。

»Lightbox 2

とてもシンプルでJavascriptの知識がなくても利用できます。 Lightboxの利用方法の解説は下記のサイトを参考にしました。

»【ハウツー】ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を (1) Lightbox 2.0とは？ | パソコン | マイコミジャーナル

ここからはLightboxを実際に利用した際の覚書を健忘禄としてまとめています。

読み込み中を示す画像URL: lightbox.jsを開きJavascriptの変数，fileLoadingImageを探します。変数fileLoadingImageに読み込み中を示す画像のパスを指定します。パスはlightboxを利用するHTMLファイルからの相対パスまたは画像の絶対パスで指定します_※1。初期値はimages/loading.gifです。
CLOSEボタンの画像URL: lightbox.jsを開きJavascriptの変数，fileBottomNavCloseImageを探します。変数fileBottomNavCloseImageにCLOSEボタン画像のパスを指定します。パスはlightboxを利用するHTMLファイルからの相対パスまたは画像の絶対パスで指定します_※2。初期値はimages/closelabel.gifです。
同封されるファイル: Lightbox2をダウンロードするとprototype.jsなど必要なファイルが含まれています。prototype.jpにもいくつかバージョンがあり互換性の問題から同封されているものを利用します。; Lightbox 2.0はprototype.js、scriptaculous(エフェクト処理)を使用します。

※1,※2:階層の異なるHTMLからLightboxを利用する場合，絶対パスで記述したほうが良いと思います。

スポンサードリンク

テーマ:プログラミング
ジャンル:コンピュータ

日本語にだけマッチする正規表現

日本語にのみマッチさせる正規表現
([^0-9,a-z, ,t]+)

上は正確には英数字,半角スペース,タブ以外の文字列にマッチする。
()をマッチさせたくない文字に加える場合
([^0-9,a-z, ,t,(,)]+)

スポンサードリンク

テーマ:プログラミング
ジャンル:コンピュータ

正規表現でFirefoxブックマークかをHTMLリストへ変換

目標

Fireforxのエクスポートしたブックマークをa要素のみのシンプルな形式に整形します。

実行ツール

Firefox 1.5.0.1
秀丸 Ver5.12

STEP1 : ブックマークのエキスポート

Firefox[メニュー]→[ブックマーク]→[ブックマークの管理]→[ファイル]→[エキスポート]
bookmarks.htmlというファイルが作成されます。

STEP2 : bookmarks.htmlの内容を整形

(1)DOCTYPE宣言からtitle要素までを削除
(2)a要素からhref属性以外の属性を削除

検索文字 <A HREF="([^>]+?)".*>(.+)</A>
置換文字 <A HREF="\1">\2</A>

(3)h1～h6要素を削除
検索文字列 <H[1-6].*>
置換文字空

(4)a要素以外を削除
検索文字列 </?[^A]([^A])*>
置換文字列空

※属性に文字Aを含む要素は残りますが筆者のブックマークでは見出し要素以外にそのような要素はありませんでした。見出しは(3)で削除済み。

(5)2個以上連続する半角スペースの削除
検索文字列 {2,}

※ {2,}の前に半角スペースが入っています。

(6)<で始まらない行の削除
検索文字列 ^[^<].*$
置換文字列空

(7)空行の削除
検索文字列 ^\n
置換文字列空

(8)全ての行末に<br />を挿入
検索文字列 ^(.+)$
置換文字列 \1<br />

(9)英字大文字を小文字へ変換します。
»全角半角大小文字変換マクロ Ver4.4（付マクロ取り消しマクロ）

自分のブックマークをA要素のみのシンプルなHTMLにしたいと思いました。

スポンサードリンク

テーマ:Firefox
ジャンル:コンピュータ

XOOPSのインストール時の覚書

XOOPSをインストールした際に戸惑った点の覚書です。

「インストール後初めて管理画面を開きます。下のボタンをクリックすると続行します。」をクリックしても元のページに戻り先に進めない現象が起こりました。

Norton Internet Security 2006を無効にしたら解決しました。

XOOPS 2.0.6インストール終了後の不具合について [Archive] - XREA&CORE SUPPORT BOARD

スポンサードリンク

Google Maps利用の流れ

Google Mapsの設置に関する手順を説明しています。

Google Maps設置の流れ

STEP1 : Google Maps API keyを取得
STEP2 : Google Maps API key取得の際、表示されるGoogle Mapを利用するためのjavascriptコードをローカルに保存_※1
STEP3 : 表示させたい場所の緯度·経度を取得_※2
STEP4 : ローカルに保存したjavascriptコードの変更_※3
STEP5 : 変更したjavascriptコードをHTMLファイルに記述
STEP6 : アップロード

※1:ローカルに保存する際の文字コードはUTF-8にする。Ajaxを利用する場合、HTMLファイルはUTF-8で保存しなければならない。またHTMLファイルのmeta要素のcharsetでutf-8を指定する。
※2後述するように簡単に目的の緯度·経度を調べることができるサイトがある。
※3:表示されるjavascriptコードは、取得キーが埋め込まれた状態なので、地図を表示させるだけの場合、実際に変更する箇所は緯度·経度情報のみ。

STEP1 : Google Maps API keyの取得

http://www.google.com/apis/maps/のSign up for a Google Maps API keyからキーを取得。_※1

キーを取得のする際に必要な情報は、設置するサイトのURLだけ。

※1:Googleのアカウントを持ってない場合は先にGoogleアカウントを取得する必要があります。

STEP2 : Google Maps API key取得の際、表示されるGoogle Mapを利用するためのjavascriptコードをローカルに保存

キー取得の際にjavascriptコードのサンプルが表示されるので、コピーしてローカルのテキストエディタなどに保存する_※1。

※1:ソースコードはUTF-8で保存する。

STEP3 : 緯度·経度の調べ方

次に紹介する方法のいづれかで表示したい場所の緯度·経度を調べる

方法1:»geocoding

住所から緯度·経度を取得する。

方法2 : 『緯度·経度を調べる』
地図を日本全体まで拡大して目的の地域へ動かしそこで縮小して目的地の経度と緯度を取得する。

日本の緯度は大まかに35あたり,経度は136～137あたり

STEP4 : Javascriptコードの変更

Google Maps API keyを取得時に保存したコードをカスタマイズする。単に画像を表示させる場合、変更するのはAPI keyの値と緯度·経度情報。

実際に変更するのは赤字の①～④

①：取得したGoogle Maps API keyの値を入力。Google Maps API key取得時の
サンプルを利用する場合は既にその値が埋め込まれているので変更の必要はない。

②：表示したい場所の緯度(日本の場合35～36;)を入力する。

③：表示したい場所の経度(日本の場合136～137)を入力する。

④：表示する場所の拡大度を0～17で指定する。17が一番拡大して表示

STEP5 : 変更したJavascriptコードをHTMLに貼り付ける

Google Mapsを利用するためにHTMLに貼り付けるのは大きく2箇所ある。
1.head要素の最後に貼り付ける部分
2.body要素の地図を表示したい部分に貼り付ける

(1)のhead要素に貼り付けるのはSTEP4で変更したJavascriptコード

(2)のbody要素の地図を表示したい部分に貼り付けるコードは下記のコード
<div id="map" style="margin-left: 30px; width: 500px; height: 300px"></div>

参考記事
»Ajax Google Mapsを自サイトに設置する

スポンサードリンク

テーマ:ホームページ・ブログ制作
ジャンル:コンピュータ

ライブラリのダウンロード

公開フォルダへ配備

スクリプト等の読み込み

スクリプトの呼び出し

スクリプトの呼び出しでUTF-8を指定

コードの挿入位置

目標

実行ツール

STEP1 : ブックマークのエキスポート

STEP2 : bookmarks.htmlの内容を整形

Google Maps設置の流れ

STEP1 : Google Maps API keyの取得

STEP2 : Google Maps API key取得の際、表示されるGoogle Mapを利用するためのjavascriptコードをローカルに保存

STEP3 : 緯度·経度の調べ方

STEP4 : Javascriptコードの変更

STEP5 : 変更したJavascriptコードをHTMLに貼り付ける

RSS登録

ブックマークに追加

カテゴリー

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

ブロとも申請フォーム

hatena

トラックワード

お勧めプログラム

RSSフィード

リンク