// xml
$(function(){
$.ajax({
url: 'dummy.xml',
success: function(data) {
$('title', data).each(function(i){
alert($(this).text())
});
}
});
});
// json
$(function(){
$.ajax({
url: 'member.json',
success: function(data) {
eval('var j = ' + data);
alert(j.a);
}
});
});
//yahoo API
$(function(){
$('#btnsend').click(function(){
var queryText = $('#query').attr('value');
$.ajax({
jsonp:'onJsonPLoad',
dataType:'jsonp',
url:'http://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch',
data:{appid:'ここにAPIのID',query:queryText,callback:'onJsonPLoad'}
});
});
});
function onJsonPLoad(data){
var list ='';
for(i=0;i<data.ResultSet.totalResultsReturned;i++){
list += '<li><dl><dt>'+data.ResultSet[0].Result[i].Name+'</dt><dd><img src="'+data.ResultSet[0].Result[i].Image.Medium+'"></dd></dl></li>'
}
list = '<ul>'+list+'</ul>';
$('#result').html(list);
}
月曜日, 7月 26, 2010
jQueryのHTTPRequestサンプル
月曜日, 4月 27, 2009
記号文字のフォントサイズが小さいのはなぜか
前までいい感じで表示されていた○や×や△が、ひらがなや漢字に比べて小さくなってしまったり、なんだか汚く表示されるようになる現象。
ブラウザの種類やバージョンによって挙動がまちまちで、なぜそうなるのか良く分からなかったのですが、調べていくうちに文字コードやフォントの設定に関係あることが分かりました。
UTF-8でのサイト制作時、特にcssに関して気をつけることを以下にまとめます。
■cssファイルもUTF-8にして、文字コード宣言を記述する
基本的にファイルの文字コードは全て揃えたほうが良いようです。
cssファイルの場合、UTF-8にするだけでなく、cssファイルの1行目に
と宣言します。
■cssファイルがShift_JISの場合は、その旨を1行目に宣言する
cssファイルの文字コードを変更したくない場合は、Shift_JISの宣言を記述します。
■日本語フォントを英文フォントより先に記述する
cssファイル内でbody等にfont-familyを指定するとき、優先して欲しいフォントを先に記述します。(クライアントは持っているフォントの中で、一番先に記述されたフォントを使用するため)
例えばMS PゴシックもArialもパソコンに入っている場合、
と記述するとMS Pゴシックで表示されます。
■日本語フォントのアルファベット表記の全角/半角に注意
'ヒラギノ角ゴ Pro W3'のアルファベット部分「Pro W3」は半角ですが、
'MS Pゴシック'等の「MS P」は全角です。
■ブラウザの設定が優先されている場合は、反映されない
サイト側でいくらきちんと指定していても、ブラウザの設定で無効にされていれば反映されません。
ブラウザの設定は以下のような具合に変更できます。
IE:ツール→インターネットオプション→全般タブ→ユーザー補助→書式設定
Firefox:ツール→オプション→コンテンツタブ→フォントと配色→詳細設定→Webページが指定したフォントを優先する
これで記号文字がきれいに表示されるはずです。
ブラウザの種類やバージョンによって挙動がまちまちで、なぜそうなるのか良く分からなかったのですが、調べていくうちに文字コードやフォントの設定に関係あることが分かりました。
UTF-8でのサイト制作時、特にcssに関して気をつけることを以下にまとめます。
■cssファイルもUTF-8にして、文字コード宣言を記述する
基本的にファイルの文字コードは全て揃えたほうが良いようです。
cssファイルの場合、UTF-8にするだけでなく、cssファイルの1行目に
@charset='utf-8';
と宣言します。
■cssファイルがShift_JISの場合は、その旨を1行目に宣言する
cssファイルの文字コードを変更したくない場合は、Shift_JISの宣言を記述します。
@charset='shift_jis'
■日本語フォントを英文フォントより先に記述する
cssファイル内でbody等にfont-familyを指定するとき、優先して欲しいフォントを先に記述します。(クライアントは持っているフォントの中で、一番先に記述されたフォントを使用するため)
例えばMS PゴシックもArialもパソコンに入っている場合、
body {
font-family : 'MS Pゴシック', Arial, sans-serif;
}
と記述するとMS Pゴシックで表示されます。
■日本語フォントのアルファベット表記の全角/半角に注意
'ヒラギノ角ゴ Pro W3'のアルファベット部分「Pro W3」は半角ですが、
'MS Pゴシック'等の「MS P」は全角です。
■ブラウザの設定が優先されている場合は、反映されない
サイト側でいくらきちんと指定していても、ブラウザの設定で無効にされていれば反映されません。
ブラウザの設定は以下のような具合に変更できます。
IE:ツール→インターネットオプション→全般タブ→ユーザー補助→書式設定
Firefox:ツール→オプション→コンテンツタブ→フォントと配色→詳細設定→Webページが指定したフォントを優先する
これで記号文字がきれいに表示されるはずです。
火曜日, 3月 17, 2009
Windows Update にプロキシ設定
職場のマシンが自動更新できなくなった。
タスクトレイにアイコンが表示されても「ダウンロード0%」のまま消える。
手動でダウンロードしようとすると失敗したり遅かったり。
イベントビューアを見ると接続に失敗している。ネットにはつながっているのに…IEのプロキシ設定が解釈できていないらしい。
この職場のプロキシ設定はpacファイルを使っているけどどうしたらいいんでしょう?
# pacファイルというのは中身はjavascriptで、if文でURLごとにプロキシを変えていた。
Windows Updateのプロキシ設定方法は、コマンドプロンプトで
>proxycfg -u
とすればIEの設定が反映されるとのこと。
【覚書】Windows Update でエラー。
こちらの方のまねをして、pacファイルに書いてあったプロキシサーバのURLをIEに設定した上で、そのプロキシを使うチェックを外した状態にしてから、proxycfg -uしてみた。そして
>net stop wuauserv
>net start wuauserv
と打って自動更新を再起動。
すると間もなく自動更新が動き出した!
でも本当は pacファイルを参照させたいんだけどな…。
参考
御社は大丈夫?WindowsUpdateできてますか
プロキシ環境において「Windows Update」がエラー番号「0x80072xxx」を返す
タスクトレイにアイコンが表示されても「ダウンロード0%」のまま消える。
手動でダウンロードしようとすると失敗したり遅かったり。
イベントビューアを見ると接続に失敗している。ネットにはつながっているのに…IEのプロキシ設定が解釈できていないらしい。
この職場のプロキシ設定はpacファイルを使っているけどどうしたらいいんでしょう?
# pacファイルというのは中身はjavascriptで、if文でURLごとにプロキシを変えていた。
Windows Updateのプロキシ設定方法は、コマンドプロンプトで
>proxycfg -u
とすればIEの設定が反映されるとのこと。
【覚書】Windows Update でエラー。
こちらの方のまねをして、pacファイルに書いてあったプロキシサーバのURLをIEに設定した上で、そのプロキシを使うチェックを外した状態にしてから、proxycfg -uしてみた。そして
>net stop wuauserv
>net start wuauserv
と打って自動更新を再起動。
すると間もなく自動更新が動き出した!
でも本当は pacファイルを参照させたいんだけどな…。
参考
御社は大丈夫?WindowsUpdateできてますか
プロキシ環境において「Windows Update」がエラー番号「0x80072xxx」を返す
火曜日, 7月 15, 2008
Movable Type の StyleCatcher で背景画像をアップするとき
Movable Type の StyleCatcher の機能を使って、自分で作成したスタイルを公開する方法を以下のページ等を参考にやってみました。
小粋空間: StyleCatcher リポジトリ公開方法
決められたディレクトリ構成でリポジトリにしたいサーバーにアップすれば、Movable Type の管理画面からそのサーバーのURLを指定することでスタイルが選べるようになります。
表示されたスタイルを適用すると関連ファイルを取得するようなのですが、テストしてみたところ背景画像がクライアント側でうまく取得できなかったので、少し考えましたが、CSSファイル内の記述で画像ファイルのURLのクオーテーションを外したらうまくいきました。
小粋空間: StyleCatcher リポジトリ公開方法
決められたディレクトリ構成でリポジトリにしたいサーバーにアップすれば、Movable Type の管理画面からそのサーバーのURLを指定することでスタイルが選べるようになります。
表示されたスタイルを適用すると関連ファイルを取得するようなのですが、テストしてみたところ背景画像がクライアント側でうまく取得できなかったので、少し考えましたが、CSSファイル内の記述で画像ファイルのURLのクオーテーションを外したらうまくいきました。
変更前
#header{background:url('header.gif');}
変更後
#header{background:url(header.gif);}
火曜日, 3月 25, 2008
geeklogに汎用フォームメール設置
まず、静的ページPHPを有効にする
静的ページPHPを作成する
静的ページHTMLを作成する
上記で作成した静的ページPHPを読み込んで動作するHTMLを作成する。
静的ページPHPを修正してもよいが、こちらの方法であればフォームの追加・変更がしやすい。
静的ページHTMLの作成サンプル
管理者用メールはconfig.phpで "site_mail" に設定したメールアドレスに送信される。
- グループ管理画面で、"Static Page Admin" の左側にある編集ボタンをクリック
- ページ下部の"権限"の所を見ると、"staticpages.PHP" のチェックボックスがオフで、 "staticpages.delete" と "staticpages.edit" のチェックボックスがオンになっているので、"staticpages.PHP" のチェックボックスをオンにする。
静的ページPHPを作成する
- 静的ページ管理画面で、新規作成をクリック
- geeklog wikiのページから、汎用フォームメールの静的ページPHPをコピーして作成
- idは "formmail" にする
- PHPの項目は、"PHPを実行する" を選択
- このページは単独でも動作可能
静的ページHTMLを作成する
上記で作成した静的ページPHPを読み込んで動作するHTMLを作成する。
静的ページPHPを修正してもよいが、こちらの方法であればフォームの追加・変更がしやすい。
静的ページHTMLの作成サンプル
管理者用メールはconfig.phpで "site_mail" に設定したメールアドレスに送信される。
月曜日, 3月 24, 2008
geeklogのDBバックアップ
- プラグイン "dbman" をインストール
- 管理画面から "DBman" をクリック
- "バックアップ作成" をクリック
簡単!そのままダウンロードもできるし、/backups以下にsqlファイルが格納される。
データベースのバックアップとリストア
木曜日, 12月 13, 2007
Scuttleの設置
オープンソースのソーシャルブックマーク Scuttle。
MySQLは4じゃないとだめみたいです。
ダウンロード元
インストール方法
解凍したソースをドキュメントルートに格納、
ルートディレクトリにある config.inc.php.example を config.inc.php にリネームして、
このへんとか
このへんを環境に合わせる。
新規アカウント登録は、http://サイト名/register.phpから。
参考
Scuttleという名の ソーシャルブックマーク を設置してみる
Scuttle ソーシャルブックマーク の設置
エラーがでましたが上記サイトより以下の方法で解決
Rename Tag
タグのリネーム機能を使えるようにするにはファイルを追加する必要がありました。
ScuttleのTagReplace機能
[ 1597978 ] Missing tag rename for 0.7.2
ダウンロードしたファイルは以下のように配置
/tagrename.php
/templates/tagrename.tpl.php
タグの大文字小文字対応
あとで試してみます。
引き続きブックマーク(Scuttle)ネタ
MySQLは4じゃないとだめみたいです。
ダウンロード元
インストール方法
解凍したソースをドキュメントルートに格納、
ルートディレクトリにある config.inc.php.example を config.inc.php にリネームして、
このへんとか
$dbtype = 'mysql4';
$dbhost = '127.0.0.1';
$dbport = '3306';
$dbuser = 'username';
$dbpass = 'password';
$dbname = 'scuttle';
このへんを環境に合わせる。
$locale = 'en_GB';
新規アカウント登録は、http://サイト名/register.phpから。
参考
Scuttleという名の ソーシャルブックマーク を設置してみる
Scuttle ソーシャルブックマーク の設置
エラーがでましたが上記サイトより以下の方法で解決
注意点 php5でscuttleを動かす場合の変更点
setlocale()のエラーが出るときは、
scuttle\includes\php-gettext\gettext.inc の131行目、
$ret = setlocale($category, $locale);
を
コメントアウト
//$ret = setlocale($category, $locale);
次の行に、
$ret = setlocale(LC_ALL, $locale);
とする。
Rename Tag
タグのリネーム機能を使えるようにするにはファイルを追加する必要がありました。
ScuttleのTagReplace機能
[ 1597978 ] Missing tag rename for 0.7.2
ダウンロードしたファイルは以下のように配置
/tagrename.php
/templates/tagrename.tpl.php
タグの大文字小文字対応
あとで試してみます。
引き続きブックマーク(Scuttle)ネタ
木曜日, 11月 08, 2007
火曜日, 11月 06, 2007
Movable Type 4.01 インストール
Movable Type インストールでやったこと
ActivePerlインストール
5.6.1は不具合があるので、5.8.8をインストール
コマンドプロンプトで
perl -v
するとバージョン情報確認できます。
ActivePerlのPPMで必要なモジュールをインストール
PPMのモジュールインストール時、プロキシ通す場合はコマンドプロンプトで、
SET HTTP_Proxy=http://www.hoge.ne.jp:8080/
Apacheの設定
cgiが動くように追記
<Directory "C:/path/to/htdocs/">
・・・
Options Indexes FollowSymLinks ExecCGI
・・・
AddHandler cgi-script .cgi
</Directory>
ActivePerlインストール
5.6.1は不具合があるので、5.8.8をインストール
コマンドプロンプトで
perl -v
するとバージョン情報確認できます。
ActivePerlのPPMで必要なモジュールをインストール
PPMのモジュールインストール時、プロキシ通す場合はコマンドプロンプトで、
SET HTTP_Proxy=http://www.hoge.ne.jp:8080/
Apacheの設定
cgiが動くように追記
<Directory "C:/path/to/htdocs/">
・・・
Options Indexes FollowSymLinks ExecCGI
・・・
AddHandler cgi-script .cgi
</Directory>
木曜日, 10月 25, 2007
デフォルトファイルの設定
index.phpまで指定しないとファイルの一覧が表示されてしまうのを
ちゃんとindex.phpを読ませるには、apacheの設定ファイルhttpd.confの
DirectoryIndexのところにスペース区切りでindex.phpを追記する。
ちゃんとindex.phpを読ませるには、apacheの設定ファイルhttpd.confの
DirectoryIndexのところにスペース区切りでindex.phpを追記する。
水曜日, 10月 24, 2007
joomlaインストール
ステップ2のところでインストール失敗となっていたが
MySQLのmy.iniでsql-modeをコメントアウトしたらインストールできた。
インストールが終わったら戻したほうがいいでしょうか。
MySQLのmy.iniでsql-modeをコメントアウトしたらインストールできた。
インストールが終わったら戻したほうがいいでしょうか。
MySQL4と5を同一マシンにインストール
MySQL5が既に入っているけれど、typo3はMySQL4じゃないと動かないので、
両方のバージョンが使えるようにMySQL4.1もインストール。4.0はもう無かった。
通常通りインストールを進めて、最後に設定画面で名前をMySQL4.1とわかるように変えて、ポートをMySQL5と別のものを指定するだけで良いらしい。
TYPO3をインストールするときは、ブラウザのウィザードに出てくるホスト名入力ボックスに
"localhost:3307"といった感じにポートを指定する。
両方のバージョンが使えるようにMySQL4.1もインストール。4.0はもう無かった。
通常通りインストールを進めて、最後に設定画面で名前をMySQL4.1とわかるように変えて、ポートをMySQL5と別のものを指定するだけで良いらしい。
TYPO3をインストールするときは、ブラウザのウィザードに出てくるホスト名入力ボックスに
"localhost:3307"といった感じにポートを指定する。
Typo3インストール後ログインできない
id:admin
password:password
のはずなのにログインできない。
調べるうちに、データベースでアカウントのテーブルにレコードが作成されていないことに気づいた。
MySQL4じゃないと作成できないみたい。
MySQL5がすでに入っているが、設定ファイルのmy.iniで、
sql_mode="MYSQL40"
とすると、MySQL4.0として動作するらしい。
編集してMySQLを再起動すると、ログインできた。
password:password
のはずなのにログインできない。
調べるうちに、データベースでアカウントのテーブルにレコードが作成されていないことに気づいた。
MySQL4じゃないと作成できないみたい。
MySQL5がすでに入っているが、設定ファイルのmy.iniで、
sql_mode="MYSQL40"
とすると、MySQL4.0として動作するらしい。
編集してMySQLを再起動すると、ログインできた。
木曜日, 10月 18, 2007
Bloggerをカスタマイズ
テンプレートのカスタマイズ
cssで画像をつかう
ブックマークアイコンを変える
Bloggerのマイレポートに表示されているブログの一覧から任意のブログの「レイアウト」をクリックすると、「テンプレート」タグを選択した状態で画面が表示され、既存のテンプレートを選択したり、配置を変えたり、配色を変えたりといったことが一通り簡単にできますが、さらにオリジナルのcssを書きたい場合、「HTMLの編集」をクリックして表示されたソースを編集します。
なお、「テンプレートをすべてダウンロード」をクリックすると現在のソースがxmlファイルとして取得できるのでバックアップがとれるので、これをダウンロードしてから編集したり、編集済みのオリジナルテンプレートのバックアップを取っておいたりということができます。
cssで画像をつかう
cssで背景画像を使いたい場合は、サーバにファイルを置くことができないので、どこかウェブ上にある画像をURLでしなければならない。
今回はflickrに置いてみた。
flickrでプライベートモードでアップロードしてもURL参照できた。
ブックマークアイコンを変える
headerタグ内に以下を追加します。
<link href='ファイルのURL' rel='shortcut icon'/>
js-kit
http://js-kit.com
以下を書くだけでコメントやレイティングが組み込めます。
<div class="js-kit-rating"></div>
<script src="http://js-kit.com/ratings.js"></script>
<div class="js-kit-comments"></div>
<script src="http://js-kit.com/comments.js"></script>
サンプルここから
js-kit-rating
js-kit-comments
サンプルここまで
以下を書くだけでコメントやレイティングが組み込めます。
<div class="js-kit-rating"></div>
<script src="http://js-kit.com/ratings.js"></script>
<div class="js-kit-comments"></div>
<script src="http://js-kit.com/comments.js"></script>
サンプルここから
js-kit-rating
js-kit-comments
サンプルここまで
登録:
投稿 (Atom)