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

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

イラスト:con_cen_t

カテゴリ:HTML/CSS

0JSONを視覚的に表示するサイト

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

WEBアプリ開発の時によく使われるようになったJSONですが、
他のものと比べて読みやすいと言われてもそれでも複雑なものはわかりにくいです。

そんなJSONを視覚的に表示するサイトがあるのでメモしておきます

JSON Visualization

上の「Input:」のボックスに調べたいJSONを入力した後、
左の「Render」をクリックします

するとOutput:にテーブルなどでわかりやすく表示されたJSONデータが表示されます。

// テスト用
{"first":1,"second":2,"third":{"Object":"string"}}

これでずいぶんと見やすくなりますね

表をクリックしたら、rootからの位置が分かったりと色々便利です

試してみてはいかがでしょう?

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とある歌詞サイトをコピーするブックマークレット作ってみた

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

とあるサイトの歌詞をコピーするブックマークレットです

ちなみに俺は歌詞タイムってサイト好きです アニソン多いし

http://www.kasi-time.com/

おっと話がそれましたね

全て利用者の自己責任でお願いします

 

///// 導入方法 /////

歌詞コピー

上にアクセスしてください

エラーが出ると思いますがそのままブックマークに追加してください

ブックマークに登録したら、ブックマーク一覧を開いてください

プロパティ もしくは編集を押してください

URLの欄があると思いますが、それを次のとおりにしてください

「http://kamijin-fanta.info/」の所を削って

「javascript:…」にしてください

名前も適当に変えるといいと思います

 

今回のはあまりサポートしたくないんで・・・・

まぁ気が向けばサイトの追加しますよ

0Index Library Data Base beta 作成中…

カテゴリー:HTML/CSS,PHP,サーバ,デザイン

PHPの勉強として作っているサイトがちょっと出来てきたので上げようと思いまして

御坂美琴のキャラ詳細がでますね?
そんな感じで全てのキャラのデータを入れていき、一部をWikiとして公開しようと思っています。
まだログインもできない・デザインが完成ではないのでbetaよりも前のバージョンかもしれませんがw
なので、、、、 出来上がったらキャラのアイコン募集するかもしれませんのでその際はよろしくですorz
付けてほしい機能などあればtwitterでリプください
では

0イナズマイレブン人気投票 リアルタイムグラフ

カテゴリー:HTML/CSS,Java Script,PHP,日記

こんにちは!

最近PHPの勉強してるファンタです!

いきなりですが

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

PHPとHTML、そしてCSS・JavaScriptを使ったランキングのグラフです

まぁざっと言えば今までのwebページの知識を押し込んだグラフって事です

相変わらずの五条さんですね! ってことでおしまい!

第二回会場:http://blog.kamijin-fanta.info/2011/01/post-36.html

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

0今欲しいもの

カテゴリー:HTML/CSS,Java Script,PC全般,アニメ・漫画,日記,自作PC

風邪で本日休みましたカミジン@ファンタです。 なんか汗出るくらい暑いんですけど汗は風邪の時に良いんでしたっけ??www

まぁそんな事をかきに来たわけでもないんですがね~ 今日はカテゴリいつもより多いですよ!それだけ欲しいものが多いんですがw

「お金があったら」欲しいものを書きますよ! 買えないのがほとんどですwwwwwww

さて行きましょー!

 

続きを読む…

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(レスポンステキスト,レスポンスヘッダ){関数・命令}って言うふうに書くと良いですー

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