カミジン@ファンタの平穏な日常 Blog

パソコン・カメラ・アニメがないと3日持ちません。そんな学生のダラダラ日記。

イラスト:con_cen_t

カテゴリ:WEB

2ブログデザイン変えたよ!

カテゴリー:WEB,デザイン

どうもカミジンです。
ブログのデザインかえました。

CSSはTwitterBootstrapベースに作りました。
iPhoneとかの端末で見てもいい感じに縮小されると思います。

 

作業時間は5時間くらい? ワカンネ

じゃあバイバイ!

0IEでJavaScript/jQuery動かないときのメモ

カテゴリー:Java Script,WEB,デザイン

他のブラウザでは動くのに、
IEでJavaScriptとかjQueryがエラーで動かないときは

オプションとかで書くオブジェクトの最後に注目

// エラーの例
$.ajax({
     url: "http://",
     type: 'GET',
     dataType: 'json', // この最後の,が原因
});

以下のようにするとOKです

// 正解の例
$.ajax({
     url: "http://",
     type: 'GET',
     dataType: 'json'
});

{ foo, bar, }はNGだけど、{ foo, bar }はOKってことだそうです。

0MySQLでのタイムゾーンを設定する

カテゴリー:PHP,WEB

MySQLでタイムゾーンを変更する方法。

今後サマータイムとか導入する際には役立つと思われます。導入する予定がなくとも、GMTで時間を管理する方がいいかもしれませんね。

さて、次のコマンドでタイムゾーンを設定できます。

SET GLOBAL time_zone = '+0:00';
SET time_zone = '+0:00';
SELECT NOW(); 

一行目は管理者の権限を持っているときに、全体のタイムゾーンを変更するクエリです。2行目はそのセッションでのみ変更するクエリです。レンタルサーバーなどで管理者の権限を持っていない場合は、DBに接続する都度2行目のクエリを実行していただければいいかと。

ではっ

0東京電力の計画停電 地区分けの検索サービス開始

カテゴリー:HTML/CSS,PHP,WEB

完全に乗り遅れましたが。

http://kamijin-fanta.info/kantou/

携帯からのアクセスもたぶんいけます

携帯からはトップに行かず、直接検索画面になります

 

見れば使い方はわかると思いますが、一応説明します。

上のURLにアクセスし、下の方にある県を選択してください。

そのあとは、住所をたどっていくのみです。

ひとつの地域に複数の区分がある地域がありますが、詳細はサポートセンターなどに問い合わせしてください。

0Yahoo ジオシティーズにおけるフレームを使ったリファラー問題

カテゴリー:HTML/CSS,Java Script,WEB,サーバ

昨日知恵袋にて質問している方がいたのでメモしておきます

その質問は「あるページが見れる人と見れない人で分かれる」ということでした。サーバはYahooのジオシティーズを使っている様子です。サイトは主にフレームで構成されていました。 見れない人はどのデバイスからも見れない状態で、見れる人はどのデバイスからも見れるという不思議な現象がおきている様子でした。

その「見れない人」の再現性を確認するまでにかなりの時間がかかりましたが。。。。。

 

原因は至って簡単でした。

プロパイダ?と思った方もいるかも知れませんが、「アクセス経路」でした。

HTTPの通信にはヘッダというデータがつきます。これには「どのファイル」「Cookie」「?以降の文字」など、そして「どこからアクセスしたのか」というデータも含まれます。

多くのレンタルサーバー(無料のものなどが多い)では、迷惑な直リンクを防ぐために様々な対策をしています。そしてその直リンクを防ぐ方法が「どこからアクセスしたのか」というリファラーを確認するというものがほとんどです。

YahooではJavaScriptを使った直リンク対策もしていたようです。

あるHTMLにはリファラーがない(アクセス元がない)アクセスに関しては404をご丁寧にも返してくれる仕様だそうです。(このあるHTMLの判定基準は分かりませんでしたが、この問題が起きているページの拡張子は.htmでした)

もともと指摘されていましたが、フレームを使用した場合、HTMLのリクエストへリファラーが送信されないというブラウザの仕様がジオシティーズと喧嘩してしまったみたいです。

 

この例の場合Googleの検索から目次ページそして本文のフレームページへとリンク 何故かこれがリファラーが送信されない対象になってしまってたようです。

 

確かFC2などはリファラーの対策がサーバ側だったのでほぼこのような問題は起きないと思います。

 

対策としては

よく「ようこそ」画面を出している方もいますが、あれが一番効果的なのです。ワンクッション置くとリファラーがどの状況でもうまいこと作動してくれます。

その画面にリンクさせる→フレームを用いた目次→フレームを用いたページ

となる方は一度google検索からページを確認してはどうでしょうか?

 

 

ながながとありがとうございます。

質問あればご自由に

では

 

リファラー … Referer

0第二回イナズマイレブン リアルタイムブラフについて

カテゴリー:PHP,WEB

なんか最初見たときなんだよと思ったけど、ある選手がまたセンスのいい。。。。

ということで またやろうかと

なんかもう一方の方に完全に真似された感はあるけど←

 

まぁ一応CSVの方はできたので

http://kamijin-fanta.info/inaire2/get.php?type=csv&limit=1440

&limit= を任意の数にすることによって、取得数を変更できます。

追記(01/11) メモリの関係で300行程度しか取得できない点を修正し、1440行まで取得できるように修正しました。しかし、結構なメモリを食うので、更新はあまりしないことをお願いします。何度更新しても更新されるのは1分に一度です。 また、「グラフ」については、違う方がもうやってるのでそっちに全てお渡ししようかと思います(デットヒートにならないと思うから/急ぎでいろいろやることが増えたから)。

http://ffff.orsp.net/inazuma/ CSVを使った詳細なグラフを描きたい方は本サイトのデータを使っていただき、グラフはこちらの方のページを参照していただければ。

あと、GoogleチャートAPIでiPhoneから見れるグラフ誰かつくってくれませんかね・・・? とか思ったりしてみたり そのくらい自分でつくろうかな では

0iPhone向けサイトのHTML/CSS まとめ

カテゴリー:HTML/CSS,iPhone,Java Script,WEB,デザイン

iPhone/iPod対応のサイトを作りには少々コツが必要です。せっかくなので調べた内容を書いていきたいと思います。

・CSSの振り分け

まずiPhoneとパソコンなどに別々のCSSを読み込ませるのがサイト作りの一歩です。

<link media=”only screen and (max-device-width:480px)” href=”iphone.css” type=”text/css” rel=”stylesheet”/>
<link media=”screen and (min-device-width:481px)” href=”pc.css” type=”text/css” rel=”stylesheet”/>

このように<head>内に記述すると、「iPhoneのディスプレイの横幅は最大480px→iphone.cssを読み込む」 「横幅の最大が481px以上あるパソコン/iPad→pc.css」が読み込まれます。
この機能は確かCSS3.0の機能だったと思います。JavaScriptなどを使用しないため容易に実装できるのがありがたいですね!
iPhoneだけに表示させたくない所(ファイルアップロードなど)を「display:none;」指定し、それをiphone.cssに記述するとiPhoneだけが表示されないということも可能です。

・サイズ/ズームの指定

ここでは、iPhone3GとiPhone4の画面解像度は同じと考えてください。(320×480)
通常のサイトを見るとiPhoneでは「縦の時:三分の一 横の時:2分の一」に縮小されています。 その時のサイズの変更をやめる
また、つまんだ時の縮小/広げた時の拡大などを禁止する方法は以下です。<head>内に書き込みましょう。

例:<meta name=”viewport” content=”width=480, user-scalable=no, maximum-scale=0.6667″ />
上の例では横幅が320pxのiPhoneに480pxのサイトを押しこめ、拡大/縮小を禁止しています。

他の詳細は以下です この画像で分かるでしょか?(クリックして拡大です) 単位は無しで「, 」で区切ってくださいね~

viewport

設定項目 説明 標準値 設定範囲
width ページの横幅 980px 200px ~ 10,000px

device-height(デバイス値をセット)

height ページの縦幅 自動 223px ~ 10,000px

device-height(デバイス値をセット)

initial-scale 標準の拡大率 1 0 ~ 10
user-scalable ユーザーへの拡大縮小の許可 yes yes もしくは、 no
minimum-scale 拡大率の下限 0.25 0 ~ 10
maximum-scale 拡大率の上限 1.6 0 ~ 10

 

・JavaScriptで表示するページを振り分ける

下のコードで対応します。アドレスを書き換えてください。
useragentを取得して順に検索をしていますね。コードを変えれば様々なことに応用できそうです。

<script type=”text/javascript”>
// iPhoneまたは、Androidの場合は振り分けを判断
if ((navigator.userAgent.indexOf(‘iPhone’) > 0 && navigator.userAgent.indexOf(‘iPad’) == -1) || navigator.userAgent.indexOf(‘iPod’) > 0) {
if(confirm(‘ようこそ。€このサイトにはスマートフォン用のサイトがあります。€表示しますか?’)) {
location.href = ‘http://kamijin_fanta.info/phone/';
}
}
</script>

 

iPhoneのサイトを作るときは以上のことを頭に入れておくとスラスラとかけると思います。

それとiPhoneなどは「クリックではなくタップ」とのことも頭に入れておきましょう。つまりリンクなどが小さすぎるとタップしにくいということです。小さなボタンにもボーダーなどを設定し、範囲を広くすることも大切です。

では、健闘を祈ります! 質問あればコメント/ツイッターで待ってますのでb

 

最後に忘れていた画像

iPhone-size

0FC2ブログでの広告を消す方法

カテゴリー:HTML/CSS,WEB

ホントはいけないんですけどFC2ブログを広告なしにできるので書いておきます。

フッダ&アカマイ&一ヶ月以上更新なしの広告削除

ブログのコントロールパネルに行きます

http://blog110.fc2.com/control.php

左のメニューの[環境設定]から[テンプレートの編集]に移動します。
「〇〇のCSS編集」とかの下に色々と英語だらけのが出ましたね?
一番上に数行改行をしたところに下の文字をコピペして貼り付けてください。

#googleAdContainer { display : none; }
#googleAdContainerNoActive { display : none; }
#ad1 { display : none; }
#ad2 { display : none; }

ad

間違がなければ[更新]を押して更新すれば一番下の広告が消えています。

なお、この方法は規約違反(だと思う)なので利用する際は自身の責任で行ってください。

広告の意味をかみしめた上でやろうという人は自信の責任で…では

0Ajax XMLHttpRequest メモ

カテゴリー:HTML/CSS,Java Script,WEB

Ajaxを実装したかったんだがクロスドメインだったので、、、、、、

参考:http://blog.livedoor.jp/dankogai/archives/51502865.html

getURL = (function(){
var xhr;
if (window.XDomainRequest){
xhr = new XDomainRequest();
return function(url, callback){
xhr.onload = function(){ callback(xhr.responseText, xhr.contentType) };
xhr.open('GET', url);
xhr.send();
};
}
else{
xhr = new XMLHttpRequest();
return function(url, callback){
xhr.onreadystatechange = function(){
if (xhr.readyState === 4)
callback(xhr.responseText, xhr.getResponseHeader("Content-Type"));
};
xhr.open('GET', url, true);
xhr.send();
};
}
})();

こんな感じで関数作っておくと下みたいな感じで呼び出せるようになります。

第1引数でURLを指定して、第2引数でコールバックを指定します。第2引数でレスポンステキスト、レスポンスヘッダを返します。レスポンステキストを取得して関数を実行します。

getURL(‘http://api.dan.co.jp/jsonenv’,function(c,t){alert(c)})

function(レスポンステキスト,レスポンスヘッダ){関数・命令}って言うふうに書くと良いですー

これでちょっとやりたいことができそうですー!