スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. --/--/-- (--)|
  2. スポンサー広告

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

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

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

 スポンサードリンク

スポンサーサイト
  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:モバイル
  2. ジャンル:コンピュータ
  1. 2007/06/30 (土)|
  2. [携帯]ホームページ
  3. | トラックバック:0
  4. | コメント:0

セッションと携帯

携帯向けホームページでセッションを利用する際の注意点を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向けホームページの違い

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. 2007/06/30 (土)|
  2. [携帯]ホームページ
  3. | トラックバック:0
  4. | コメント:0

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向けホームページの違い

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. 2007/06/28 (木)|
  2. [携帯]ホームページ
  3. | トラックバック:0
  4. | コメント:0

QVGA(Quarter VGA)

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

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

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

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. 2007/06/28 (木)|
  2. [携帯]ホームページ
  3. | トラックバック:0
  4. | コメント:0

携帯向け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向けホームページでは半角カナの利用は推奨されません。携帯向けホームページではファイルサイズの削減や画面の大きなの関係で半角カナを利用する場面も多くあります。
フレーム
携帯向けホームページはフレームが利用できない。

関連記事:
携帯向けホームページとキャリア・端末振り分け
セッションと携帯
QVGA
XHTML Basic

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:モバイル
  2. ジャンル:コンピュータ
  1. 2007/06/28 (木)|
  2. [携帯]ホームページ
  3. | トラックバック:0
  4. | コメント:0

XHTML Basic

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

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

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

 スポンサードリンク

[XHTML Basic]の続きを読む
  1. ブックマークに追加する
  1. ブログランキングFC2
  1. 2007/06/28 (木)|
  2. [携帯]ホームページ
  3. | トラックバック:0
  4. | コメント:0

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>

スクリプトの呼び出し

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

関連記事
»Javascriptライブラリの使い方
»Javascript/Ajaxライブラリー一覧
»Lightbox2.0の使い方
»ThickBoxの使い方
»Javascriptの角丸ライブラリ
»Prototype Window Classの使い方
»Link Thumnailの使い方

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:web制作
  2. ジャンル:コンピュータ
  1. 2007/06/26 (火)|
  2. [Javascript]ライブラリ
  3. | トラックバック:0
  4. | コメント:0

Javascriptの角丸ライブラリ

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

関連記事
»Javascriptライブラリの使い方
»Javascript/Ajaxライブラリー一覧
»Lightbox2.0の使い方
»ThickBoxの使い方
»Javascriptの角丸ライブラリ
»Prototype Window Classの使い方
»Link Thumnailの使い方

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:プログラミング
  2. ジャンル:コンピュータ
  1. 2007/06/26 (火)|
  2. [Javascript]ライブラリ
  3. | トラックバック:0
  4. | コメント:0

ThickBoxの使い方

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

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

関連記事
»Javascriptライブラリの使い方
»Javascript/Ajaxライブラリー一覧
»Lightbox2.0の使い方
»ThickBoxの使い方
»Javascriptの角丸ライブラリ
»Prototype Window Classの使い方
»Link Thumnailの使い方

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. 2007/06/24 (日)|
  2. [Javascript]ライブラリ
  3. | トラックバック:0
  4. | コメント:0

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

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

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

<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript"></script>

<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY" type="text/javascript" charset="utf-8"></script>

コードの挿入位置

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

<div id="map" style="width: 500px; height: 300px"></div>

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

関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:ホームページ・ブログ制作
  2. ジャンル:コンピュータ
  1. 2007/06/24 (日)|
  2. [Javascript]Google Maps
  3. | トラックバック:0
  4. | コメント:0

Javascript/Ajaxライブラリー一覧

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

基本/総合ライブラリ
表示系ライブラリ
リンク関連ライブラリ
サブウインドウ表示ライブラリ
角丸系ライブラリ

関連記事
»Javascriptライブラリの使い方
»Javascript/Ajaxライブラリー一覧
»Lightbox2.0の使い方
»ThickBoxの使い方
»Javascriptの角丸ライブラリ
»Prototype Window Classの使い方
»Link Thumnailの使い方

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:ホームページ
  2. ジャンル:コンピュータ
  1. 2007/06/23 (土)|
  2. [Javascript]ライブラリ
  3. | トラックバック:0
  4. | コメント:0

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を利用する場合,絶対パスで記述したほうが良いと思います。

関連記事
»Javascriptライブラリの使い方
»Javascript/Ajaxライブラリー一覧
»Lightbox2.0の使い方
»ThickBoxの使い方
»Javascriptの角丸ライブラリ
»Prototype Window Classの使い方
»Link Thumnailの使い方

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:プログラミング
  2. ジャンル:コンピュータ
  1. 2007/06/23 (土)|
  2. [Javascript]ライブラリ
  3. | トラックバック:0
  4. | コメント:0

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

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

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

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:プログラミング
  2. ジャンル:コンピュータ
  1. 2007/06/23 (土)|
  2. [cubelabo]cubelabo
  3. | トラックバック:0
  4. | コメント:0

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

目標

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

<A HREF="URL">リンク1</A><br />
<A HREF="URL">リンク2</A><br />
・・・・・・・・・・・・・・・・・・・・・・・・・・
<A HREF="URL">リンクN</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にしたいと思いました。

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:Firefox
  2. ジャンル:コンピュータ
  1. 2007/06/23 (土)|
  2. [cubelabo]cubelabo
  3. | トラックバック:0
  4. | コメント:0

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

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


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


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

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

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. 2007/06/22 (金)|
  2. [cubelabo]cubelabo
  3. | トラックバック:0
  4. | コメント:0

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が一番拡大して表示

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
      type="text/javascript"></script>
<script type="text/javascript"></script>
//<!--[CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(,,), );
}
}
//]]-->

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を自サイトに設置する

関連記事
Google Maps
FC2ブログに設置 -Google Maps-
地図の表示(1) 基本地図 -Google Maps-
地図の表示(2) マーカー表示 -Google Maps-
地図の表示(3) 吹き出しの表示 -Google Maps-
地図の表示(4) タブ付吹き出しの表示 -Google Maps-
IEで発生するGoogle Mapsのエラー回避策
外部ファイル -Google Maps-
オリジナルアイコンを表示 -Google Maps-

 スポンサードリンク

  1. ブックマークに追加する
  1. ブログランキングFC2
  1. テーマ:ホームページ・ブログ制作
  2. ジャンル:コンピュータ
  1. 2007/06/22 (金)|
  2. [Javascript]Google Maps
  3. | トラックバック:0
  4. | コメント:0

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。