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

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

イラスト:con_cen_t

カテゴリ:プログラミング

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

0PHPの引数をディレクトリ形式で渡す

カテゴリー:PHP

例えば「http://ex.com/user.php?flg=kamijin」とするよりも「http://ex.com/user/kamijin/」とするほうがスマートで検索的にも有利です。拡張子を消すのは別で調べてください。

通常は$_GETの配列を取得しますが、PATH_INFOを使用して変数を指定します。

ソースは以下です

<html>
<?php
$query = getenv ("PATH_INFO");
// $info = preg_split ("[/]", $query);
$info = explode ("/" , $query);
$cnt = count($info);
$cnt–;
?>
<head>
<title>
PATH_INFOテスト
</title>
</head>
<body>
設定されたパスインフォは以下の通り:<br />
<?PHP echo $query?><br />
<br />
設定されたPATH_INFOの数<?php echo $cnt;?>個<br />
<Br />
<?PHP
for($i = 1 ; $i <= $cnt ; $i++){
echo $i."番目のPATH_INFO:".$info[$i]."<br />\r\n";
}
?>
</body>
<html>

コメントアウトしてる部分は正規表現で分割したい人向けです。$infoに配列を格納することにより、$_GETとほぼ同じ状態になります。配列の0番目は空白となっている点は注意してくださいね。なのでforで書き出すときは1から始めてください。

サンプル:http://kamijin-fanta.info/sample/path-info.php

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

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

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

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

0配列についてのメモです~

カテゴリー:Java Script

JavaScriptで配列に配列入れるのってどうするのかな?と思ってたらwikibooksが分かりやすかったので書いときます

http://ja.wikibooks.org/wiki/JavaScript/Array

var array = [
[ 'A', 'B', 'C', 'D', 'E' ],
[ 'A', 'B', 'C', 'D', 'E' ],
[ 'A', 'B', 'C', 'D', 'E' ],
[ 'A', 'B', 'C', 'D', 'E' ],
[ 'A', 'B', 'C', 'D', 'E' ]
];
alert( array[0][0] ); // A
alert( array[1][0] ); // A
alert( array[2][2] ); // C
alert( array[3][2] ); // B
alert( array[4][4] ); // E

こういうの「多次元配列」とか「ジャグ配列」って言うんですね

他の言語でも使いそうだからしっかり覚えないと・・・

 

そして、配列の走査は下のようにするみたいです

http://d.hatena.ne.jp/amachang/20070202/1170386546

var array = ['hoge', 'fuga'];
for (var i = 0; i < array.length; i ++) {
alert(array[i]);
}

多次元配列でも同じような感じでいけますね

連想配列には for in を使うそうです

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

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

0ひとまずは、、、、、デザイン完了・・・?

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

なんか標準のやつを弄っただけですが、、、、

まぁいいということで!w
また来週辺りにでも変えていこうと
ヘッダとかは今のフッダみたいな感じの画像を突っ込もうと思ってます。
それと処理が単純に倍になるけどiPhone用のページも作ろうかと思ってたりします。iPhoneからブログ簡単に投稿できたらうれしいしー!
まぁログインページだけiPhone用でも全くもって問題ないんだけどね!wwww
っということで
今後とも宜しくお願いしますorz