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

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

イラスト:con_cen_t

カテゴリ:Java Script

0サイトにメールアドレスを表示したい場合

カテゴリー:Java Script

どうもカミジンです。

サイトにメールアドレスを表示したい場合。
みなさんどうしているんでしょうか。

画像ですか?
でもメールするときに一文字づつ書き写すのは勘弁。

「example☆example.com ☆→@にしてね!」ですか?
なかなかダサいです。

簡易的にJavaScriptを使って隠そうかなと言う講座的なあれです。

続きを読む…

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ってことだそうです。

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

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

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

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

JSON Visualization

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

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

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

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

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

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

0JavaScriptでSleep,Watiメモ

カテゴリー:Java Script

良いサイトがあったので

http://f29.aaa.livedoor.jp/~morg/wiki/index.php?JavaScript%2FSleep%2CWait%A4%CE%BC%C2%C1%F5

 

以下コピー

////////////////////////////////////////////
//
// ■ ある(グローバルな)条件が満たされるまで一定間隔で監視を行い、
//    条件が満たされたら指定された処理を呼び出す関数
//
// ■ setViser( 監視する条件式(文字列) ,
//		条件が満たされとき呼び出す関数(文字列) ,
//		監視間隔)
//    ※条件式の中の変数、関数などはグローバルのものである必要があります。
//	必要に応じてグローバル変数に移しておきます。
//    ・何個も起動できます。
//
var g_IdViser = new Array(); // 監視タイマーのID
var g_NumViser = 0;      // 監視器のの数
var g_i = 0;        // グローバルカウンタ
function setViser( cond , funcCall , timeVise)
{
// 条件が満たされれば、タイマーをクリアして関数を呼び出す
strFunc = "" +
"if(" + cond +"){ " +
"clearInterval(g_IdViser[" + g_NumViser + "]);"
+ funcCall + ";" +
"}";
// 監視タイマーをセット ( setInterval)
g_IdViser[g_NumViser] = setInterval( strFunc , timeVise);
g_NumViser++;
}

 

要するにsetIntervalでtimeVise毎にcondを調べるんですね

勉強になりました

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:…」にしてください

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

 

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

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

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

さて行きましょー!

 

続きを読む…